/* Flex Club – Black Friday 2026 · Designsystem E1 „Cover“ */
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans-latin-standard-normal.woff2) format('woff2');font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  --creme:#FAF7EE; --sand:#E9E1D3; --esp:#371F15; --nacht:#2A1D17; --taupe:#9D847B; --linie:rgba(55,31,21,.18);
  --serif:'Instrument Serif',Georgia,serif; --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rand:24px; --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--creme);color:var(--esp);font:400 16px/1.55 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--esp);outline-offset:3px}
.dunkel :focus-visible{outline-color:var(--creme)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knöpfe – eckig */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font:500 16px/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid var(--esp);background:var(--esp);color:var(--creme);cursor:pointer;border-radius:0}
.btn:hover{background:var(--nacht)}
.btn.linie{background:transparent;color:var(--esp)}
.btn.linie:hover{background:rgba(55,31,21,.06)}
.dunkel .btn.linie,.hero .btn{background:transparent;color:var(--creme);border-color:var(--creme)}
.hero .btn:hover{background:rgba(250,247,238,.12)}
.btn.voll{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Kopf / Sprache */
.kopf{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:flex-end;padding:14px var(--rand)}
.sprache{display:flex;gap:2px;font-size:13px}
.sprache a{padding:6px 8px;color:var(--creme);text-decoration:none;opacity:.75}
.sprache a[aria-current]{opacity:1;text-decoration:underline}

/* Hero */
.hero{position:relative;min-height:100svh;min-height:100vh;color:var(--creme);background:var(--nacht);overflow:hidden;display:flex;flex-direction:column}
.hero picture,.hero .foto{position:absolute;inset:0;width:100%;height:100%!important}
.hero .foto{object-fit:cover;object-position:50% 38%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(rgba(42,29,23,0),rgba(42,29,23,.86) 55%)}
.hero .kopfzeile{position:relative;z-index:2;text-align:center;padding:58px var(--rand) 0}
.hero .wortmarke{width:min(62vw,300px);margin:0 auto}
.hero .einordnung{font-family:var(--serif);font-size:clamp(19px,2.4vw,28px);line-height:1.15;margin-top:14px}
.hero .angebot{position:relative;z-index:2;margin-top:auto;padding:0 var(--rand) 34px;max-width:var(--max);width:100%;margin-left:auto;margin-right:auto}
.hero .angebot p{margin-bottom:0}
.hero .bf{font-family:var(--serif);font-style:italic;font-size:clamp(46px,7vw,88px);line-height:1}
.hero .preis{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin-top:14px}
.hero .staffel{font-size:15px;margin-top:10px;opacity:.95}
.hero .btn{margin-top:20px;width:100%;max-width:420px}
.hero .bed{font-size:12.5px;margin-top:10px;opacity:.88}
.countdown{display:flex;gap:14px;margin-top:16px;font-size:12.5px;opacity:.9}
.countdown b{font-family:var(--serif);font-weight:400;font-size:24px;display:block;line-height:1}
@media (min-width:900px){
  .hero picture{left:44%;width:56%}
  .hero .foto{object-position:50% 30%}
  .hero::after{top:0;bottom:0;left:0;width:58%;height:auto;background:linear-gradient(90deg,var(--nacht) 76%,rgba(42,29,23,0))}
  .hero .kopfzeile{text-align:left;padding:64px 64px 0;width:44%}
  .hero .wortmarke{margin:0;width:300px}
  .hero .angebot{margin:auto 0 0;padding:0 64px 64px;width:44%;max-width:none}
  .hero .btn{width:auto}
}

/* Abschnitte */
section{padding:72px 0}
.abschnitt-titel{font-size:clamp(34px,4.6vw,56px);margin-bottom:18px}
.einleitung{font-size:17px;max-width:60ch}
.sand{background:var(--sand)}
.linie-oben{border-top:1px solid var(--linie)}

/* Angebotskarte */
.karte{background:var(--creme);border:1px solid var(--linie);padding:32px 24px;max-width:560px}
.sand .karte{background:var(--creme)}
.karte .tarif{font-size:14px;color:var(--taupe)}
.karte .gross{font-family:var(--serif);font-size:clamp(44px,6vw,64px);line-height:1;margin:8px 0}
.karte .gross small{font-size:.42em}
.karte ul{list-style:none;padding:0;margin:18px 0 24px}
.karte li{padding:10px 0;border-top:1px solid var(--linie);font-size:15px}
.karte .hinweis{font-size:12.5px;color:#5c4a42;margin-top:12px}
.angebot-raster{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.angebot-raster{grid-template-columns:1.1fr 1fr}}
.angebot-raster img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* Drei Punkte */
.drei{display:grid;gap:28px;margin-top:32px}
@media (min-width:800px){.drei{grid-template-columns:repeat(3,1fr)}}
.drei h3{font-size:26px;padding-top:14px;border-top:1px solid var(--linie);margin-bottom:8px}
.drei p{font-size:15px;color:#4a3830}

/* Kursplan */
.tage{display:flex;gap:4px;overflow-x:auto;margin:24px 0 0;padding-bottom:4px;scrollbar-width:none}
.tage::-webkit-scrollbar{display:none}
.tage button{flex:1 1 0;min-width:0;height:44px;border:1px solid var(--linie);background:transparent;font:500 15px var(--sans);color:var(--esp);cursor:pointer;border-radius:0}
.tage button[aria-selected=true]{background:var(--esp);color:var(--creme);border-color:var(--esp)}
.plan{margin-top:8px}
.plan .kurs{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--linie);font-size:16px}
.plan .zeit{font-family:var(--serif);font-size:22px;min-width:64px;line-height:1.1}
.plan .dauer{font-size:13px;color:var(--taupe)}
.plan-hinweis{font-size:12.5px;color:var(--taupe);margin-top:12px}
@media (min-width:900px){
  .tage{display:none}
  .plan{display:grid;grid-template-columns:repeat(7,1fr);gap:0 12px}
  .plan .tag{display:block!important}
  .plan .tag h3{font-size:22px;padding-bottom:8px;border-bottom:1px solid var(--esp)}
  .plan .kurs{flex-direction:column;gap:2px;font-size:14px}
  .plan .zeit{font-size:19px}
}
.plan .tag h3{display:none}
@media (min-width:900px){.plan .tag h3{display:block}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:28px}
.galerie img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (min-width:900px){.galerie{grid-template-columns:repeat(4,1fr)}}

/* FAQ */
.faq{max-width:760px;margin-top:20px}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;font-family:var(--serif);font-size:22px;line-height:1.2;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--sans);font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:15.5px;color:#4a3830;padding-bottom:12px}

/* Infos */
.infos{display:grid;gap:28px}
@media (min-width:800px){.infos{grid-template-columns:repeat(3,1fr)}}
.infos h3{font-size:24px;margin-bottom:6px}

/* Schluss */
.schluss{position:relative;color:var(--creme);background:var(--nacht);text-align:center;padding:96px 0}
.schluss h2{font-style:italic;font-size:clamp(42px,6vw,72px)}
.schluss p{margin:14px auto 24px;max-width:46ch}

/* Fußnote / Fuß */
.fussnote{font-size:12.5px;color:#5c4a42;line-height:1.5;padding-top:28px;padding-bottom:28px}
.fuss{background:var(--esp);color:var(--creme);font-size:14px;padding:40px 0 110px}
.fuss .wortmarke{width:150px;margin-bottom:18px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.fuss button.linkartig{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* Mitlaufende Leiste */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--esp);color:var(--creme);display:flex;align-items:center;gap:12px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s}
.leiste.an{transform:none}
.leiste .text{flex:1;font-size:14px;line-height:1.25}
.leiste .text b{font-family:var(--serif);font-weight:400;font-size:20px;display:block}
.leiste .btn{min-height:46px;padding:0 18px;background:var(--creme);color:var(--esp);border-color:var(--creme)}

/* Strecke / Formulare (immer hell) */
.strecke{max-width:620px;margin:0 auto;padding:28px var(--rand) 120px}
.strecke-kopf{display:flex;align-items:center;justify-content:space-between;padding:16px var(--rand);border-bottom:1px solid var(--linie);max-width:none}
.strecke-kopf img{width:110px}
.strecke-kopf a{font-size:14px}
.schritte{display:flex;gap:6px;margin:8px 0 24px;font-size:13px;color:var(--taupe)}
.schritte span{flex:1;border-top:3px solid var(--sand);padding-top:6px}
.schritte span.aktiv{border-color:var(--esp);color:var(--esp)}
.strecke h1{font-size:clamp(34px,6vw,48px);margin-bottom:8px}
.kurz{background:var(--sand);padding:16px 18px;margin:18px 0 24px;font-size:15px}
.kurz b{font-family:var(--serif);font-weight:400;font-size:24px}
.feld{margin-bottom:16px}
.feld label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.feld input,.feld select{width:100%;min-height:50px;padding:12px 14px;font:400 16px var(--sans);color:var(--esp);background:#fff;border:1px solid #cdbfb1;border-radius:0;-webkit-appearance:none;appearance:none}
.feld input:focus,.feld select:focus{border-color:var(--esp);outline:2px solid rgba(55,31,21,.25);outline-offset:0}
.feld .fehler{display:none;color:#9b2c1f;font-size:13px;margin-top:5px}
.feld.falsch input,.feld.falsch select{border-color:#9b2c1f}
.feld.falsch .fehler{display:block}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drei-spalten{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.check{display:flex;gap:12px;align-items:flex-start;margin:14px 0;font-size:14.5px;line-height:1.45}
.check input{flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;accent-color:var(--esp)}
.check.falsch{color:#9b2c1f}
.zusammenfassung{border-top:1px solid var(--linie);margin:8px 0 20px}
.zusammenfassung div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:15px}
.zusammenfassung dt{color:#5c4a42}
.zusammenfassung dd{margin:0;text-align:right;font-weight:500}
.zusammenfassung.links div{display:block}
.zusammenfassung.links dt{font-weight:500;color:var(--esp)}
.zusammenfassung.links dd{text-align:left;font-weight:400}
.pflicht{font-size:13.5px;color:#4a3830;background:#fff;border:1px solid var(--linie);padding:16px;margin:16px 0;max-height:none}
.pflicht h2{font-size:22px;margin-bottom:8px}
.pflicht p{margin-bottom:.7em}
.klein{font-size:12.5px;color:#5c4a42}
.zurueck{background:none;border:0;padding:12px 0;font:inherit;color:var(--esp);text-decoration:underline;cursor:pointer}
.meldung{background:var(--sand);padding:16px;font-size:15px;margin:16px 0}
.meldung.fehler{background:#f6e3df;color:#7a2318}
.ausverkauft{display:none}
.ist-ausverkauft .ausverkauft{display:block}

/* Rechtstexte */
.text-seite{max-width:760px;margin:0 auto;padding:40px var(--rand) 96px}
.text-seite h1{font-size:44px;margin-bottom:24px}
.text-seite h2{font-size:26px;margin:32px 0 10px}
.text-seite h3{font-size:20px;margin:22px 0 6px}
.text-seite p,.text-seite li{font-size:15.5px}
.entwurf{background:#fff3cd;border:1px solid #e0c56e;padding:12px 14px;font-size:14px;margin-bottom:24px}

/* Einwilligungsbanner – immer hell */
.cc{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:var(--creme);color:var(--esp);border:1px solid var(--linie);box-shadow:0 8px 30px rgba(42,29,23,.25);padding:20px;max-width:560px;margin:0 auto;display:none}
.cc.an{display:block}
.cc h2{font-size:24px;margin-bottom:6px}
.cc p{font-size:14px}
.cc .zeile{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cc .zeile .btn{flex:1;min-width:150px;min-height:48px;padding:0 14px}
.cc .einstell{display:none;margin-top:10px}
.cc.offen .einstell{display:block}
/* SEPA-Block in Schritt 2 */
fieldset.zahlung{border:0;border-top:1px solid rgba(55,31,21,.2);margin:22px 0 6px;padding:18px 0 0;min-width:0}
fieldset.zahlung legend{padding:0;float:left;width:100%}
fieldset.zahlung legend h2{margin:0 0 12px}
fieldset.zahlung legend+*{clear:both}
#f-iban{font-variant-numeric:tabular-nums;letter-spacing:.04em}