@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:normal;font-display:swap;src:url(cormorant-garamond-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;src:url(cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:italic;font-display:swap;src:url(cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url(montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;src:url(montserrat-latin-500-normal.woff2) format('woff2')}

:root{--schwarz:#000;--creme:#F2ECE3;--beere:#C0286A;--text:#3D3A36;--grau:#B8B0A6;--linie:#DCD3C7;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Montserrat',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--creme);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.7}
a{color:var(--beere)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.schmal{max-width:680px;margin:0 auto;padding:0 28px}

/* Kopf */
.hero{background:var(--schwarz);color:var(--creme);padding:56px 0 80px}
.marke{display:flex;align-items:center;gap:12px;font-family:var(--serif);letter-spacing:.32em;font-size:20px;color:var(--creme);text-decoration:none}
.marke img{width:30px;height:30px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;margin-top:64px}
.ueber{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--beere);font-weight:500;margin-bottom:22px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,6vw,76px);line-height:1.04;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--beere);display:block}
.lead{font-size:18px;color:#D9D2C8;margin-top:26px;max-width:520px}
.hero-foto{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}

/* Formular */
.formbox{margin-top:36px;max-width:520px}
.anmeldung{display:grid;gap:12px}
.anmeldung input{width:100%;font:inherit;font-size:16px;padding:17px 18px;background:#141312;border:1px solid #5E5A55;color:var(--creme);border-radius:0;-webkit-appearance:none}
.anmeldung input::placeholder{color:#8a837b}
.anmeldung input:focus{outline:none;border-color:var(--beere)}
.anmeldung button{font:inherit;font-size:15px;letter-spacing:.06em;background:var(--beere);color:#fff;border:0;padding:19px 24px;cursor:pointer;transition:background .2s}
.anmeldung button:hover{background:#8E1B4E}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.form-platzhalter{border:1px dashed #5E5A55;padding:22px;color:var(--grau);font-size:14px}
.klein{font-size:12.5px;line-height:1.6;color:var(--grau);margin-top:14px}
.klein a{color:var(--grau)}

/* Inhalt */
section{padding:clamp(64px,8vw,104px) 0}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.4vw,50px);line-height:1.1;margin-bottom:28px;color:#2A2826}
p+p{margin-top:18px}
.liste{list-style:none;margin-top:26px;border-top:1px solid var(--linie)}
.liste li{padding:16px 0 16px 34px;border-bottom:1px solid var(--linie);position:relative}
.liste li::before{content:"";position:absolute;left:4px;top:27px;width:14px;height:1px;background:var(--beere)}
.ich{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center}
.ich img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.dunkel{background:var(--schwarz);color:#D9D2C8}
.dunkel h2{color:var(--creme)}

/* Knopf */
.knopf{display:inline-block;background:var(--beere);color:#fff;text-decoration:none;padding:20px 34px;font-size:15px;letter-spacing:.06em;margin-top:30px;transition:background .2s}
.knopf:hover{background:#8E1B4E}

/* Audio */
.player{margin-top:36px;background:#141312;border:1px solid #2A2826;padding:26px}
.player-titel{font-family:var(--serif);font-size:28px;color:var(--creme);line-height:1.2}
.player-info{font-size:13px;color:var(--grau);margin-top:4px;letter-spacing:.04em}
audio{width:100%;margin-top:20px;display:block}
.download{display:inline-block;font-size:13px;color:var(--grau);margin-top:14px}

/* Fuß */
footer{background:var(--schwarz);color:var(--grau);font-size:13px;padding:40px 0;line-height:1.7}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--grau);margin-right:18px}

@media (max-width:820px){
  body{font-size:16px}
  .hero{padding:32px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .hero-foto{max-width:320px;aspect-ratio:4/5}
  .ich{grid-template-columns:1fr;gap:28px}
  .ich img{max-width:260px}
  .wrap,.schmal{padding:0 20px}
}