/* =========================================================================
   Deutscher Harmonika Wettbewerb 2027
   Farbwelt nach dem bestehenden Erscheinungsbild: Rot, Stein, Weiß.
   Schwarz kommt nur dort vor, wo es im Plakat auch vorkommt: hinter dem Foto.
   ========================================================================= */

:root{
  --rot:#BE1824;
  --rot-tief:#9A1220;
  --rot-nacht:#6B0E17;
  --stein:#E9DFCE;
  --stein-tief:#D9C8AE;
  --tinte:#1A1614;
  --grau:#6E665E;
  --max:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--stein); color:var(--tinte);
  font:400 18px/1.62 'Barlow',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding-left:24px; padding-right:24px}

/* ------------------------------------------------------------- Typografie */
h1,h2,h3{margin:0; letter-spacing:-.022em}
h2{font-weight:800; font-size:clamp(34px,4.8vw,56px); line-height:1.0; margin-bottom:20px}
h3{font-weight:700; font-size:22px; margin-bottom:8px}
.eyebrow{
  font-weight:800; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rot); margin:0 0 16px;
}
.hell .eyebrow{color:rgba(255,255,255,.7)}
.lead{font-size:20px; color:var(--grau); max-width:60ch; margin:0}
.hell .lead{color:rgba(255,255,255,.8)}
.hell{color:#fff}

/* --------------------------------------------------------------- Flächen */
section{padding:96px 0; position:relative}
.f-stein{background:var(--stein)}
.f-weiss{background:#fff}
.f-rot{background:var(--rot); color:#fff}
.f-nacht{background:var(--rot-nacht); color:#fff}

.textur{position:relative}
.textur::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url(bilder/stein.webp) repeat; background-size:420px auto;
  opacity:.40; mix-blend-mode:multiply;
}
.textur > *{position:relative; z-index:1}

/* ------------------------------------------------------------ Risskanten */
.kante{position:absolute; left:0; width:100%; height:72px; z-index:3; pointer-events:none; display:block}
.kante-oben{top:-1px}
.kante-unten{bottom:-1px}
.kante svg{width:100%; height:100%; display:block}

/* ----------------------------------------------------------------- Knopf */
.knopf{
  display:inline-block; background:var(--rot); color:#fff; text-decoration:none;
  font-weight:800; font-size:16px; letter-spacing:.07em; text-transform:uppercase;
  padding:19px 40px; border-radius:100px; transition:background .18s, transform .18s, box-shadow .18s;
  box-shadow:0 4px 0 var(--rot-nacht);
}
.knopf:hover{background:var(--rot-tief); transform:translateY(-2px); box-shadow:0 6px 0 var(--rot-nacht)}
.knopf:active{transform:translateY(1px); box-shadow:0 2px 0 var(--rot-nacht)}
.knopf-weiss{background:#fff; color:var(--rot); box-shadow:0 4px 0 rgba(0,0,0,.2)}
.knopf-weiss:hover{background:#fff; color:var(--rot-tief); box-shadow:0 6px 0 rgba(0,0,0,.2)}
.knoepfe{display:flex; flex-wrap:wrap; gap:14px}

/* -------------------------------------------------------- Bewegung
   Ohne JavaScript bleibt alles sichtbar: die Klasse .js setzt erst
   das Skript. So kann kein Text unsichtbar hängen bleiben.            */
.js .rein{
  opacity:0; transform:translateY(46px);
  transition:opacity .85s cubic-bezier(.16,.84,.28,1), transform .85s cubic-bezier(.16,.84,.28,1);
}
.js .rein.da{opacity:1; transform:none}
.js .rein.v2{transition-delay:.12s}
.js .rein.v3{transition-delay:.24s}
.js .rein.v4{transition-delay:.36s}
.js .rein.v5{transition-delay:.48s}
.js h2.rein, .js .summe.rein{transform:translateY(62px)}
@media (prefers-reduced-motion:reduce){
  .js .rein{opacity:1 !important; transform:none !important; transition:none}
}

/* --------------------------------------------------------------- Kopfzeile */
header{position:sticky; top:0; z-index:60; background:var(--rot-nacht)}
.kopf{display:flex; align-items:center; gap:28px; height:74px}
.kopf > a img{height:34px; width:auto}
nav{margin-left:auto; display:flex; gap:26px; align-items:center}
nav a{
  color:#fff; text-decoration:none; font-weight:700; font-size:15px;
  letter-spacing:.05em; padding:5px 0; border-bottom:2px solid transparent;
}
nav a:hover,nav a:focus-visible{border-bottom-color:#fff}
nav a.nav-cta{background:var(--rot); padding:11px 22px; border-radius:100px; border:0}
nav a.nav-cta:hover{background:#fff; color:var(--rot)}
.menue-knopf{display:none; margin-left:auto; background:none; border:0; color:#fff; padding:8px; cursor:pointer}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative; background:#0A0A0A; overflow:hidden}
.hero-foto{position:relative; height:clamp(290px,48vh,540px);
  background:url(bilder/hero.webp) center 30%/cover no-repeat}
.hero-foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.5), rgba(10,10,10,.05) 45%, rgba(10,10,10,.45));
}
.hero-band{position:relative; background:var(--stein-tief); padding:0 0 78px}
.hero-band .wrap{padding-top:36px; text-align:center}
.hero-wortmarke{max-width:min(680px,88%); height:auto; margin:0 auto 6px}
.hero-ueber{
  font-weight:800; font-size:clamp(15px,2.1vw,21px); letter-spacing:.28em;
  text-transform:uppercase; color:var(--rot); margin:0 0 4px;
}
.hero-wann{font-weight:800; font-size:clamp(27px,4.3vw,46px); color:var(--rot); margin:26px 0 2px}
.hero-wo{font-size:clamp(18px,2.4vw,24px); margin:0 0 32px}
.hero-wo b{font-weight:800}
.hero-band .knoepfe{justify-content:center}
.hero-marke{position:absolute; top:26px; left:26px; z-index:4; width:clamp(78px,9vw,116px)}

.countdown{
  display:flex; justify-content:center; gap:clamp(20px,5vw,58px);
  margin:42px auto 0; padding-top:28px; max-width:620px;
  border-top:2px solid rgba(190,24,36,.3);
}
.cd-zahl{font-weight:800; font-size:clamp(30px,4.8vw,46px); line-height:1; font-variant-numeric:tabular-nums}
.cd-wort{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--rot); margin-top:10px; font-weight:800}
.cd-hinweis{margin:18px 0 0; font-size:16px; color:var(--grau); text-align:center}

/* ------------------------------------------------------------- Preisband */
.preis-band{padding:132px 0 120px; text-align:center; overflow:hidden}
.summe{
  font-weight:800; font-size:clamp(72px,15vw,180px); line-height:1.16;
  letter-spacing:-.05em; margin:0; font-variant-numeric:tabular-nums;
  display:block; color:#fff;
}
.summe-dazu{
  position:relative; z-index:1; font-weight:800; font-size:clamp(17px,2.4vw,24px); letter-spacing:.1em;
  text-transform:uppercase; margin:52px 0 0; color:rgba(255,255,255,.9);
}

/* Zahlenband: klar getrennte Felder mit viel Luft zwischen Zahl und Wort */
.zahlen{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:78px;
  border-top:1px solid rgba(255,255,255,.28);
}
.zahl{padding:40px 20px 10px; text-align:center; position:relative}
.zahl + .zahl::before{
  content:''; position:absolute; left:0; top:36px; bottom:16px; width:1px;
  background:rgba(255,255,255,.28);
}
.zahl b{
  display:block; font-weight:800; font-size:clamp(46px,5.8vw,70px); line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.zahl span{
  display:block; margin-top:24px; font-size:13px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); line-height:1.55;
}

/* -------------------------------------------------------------- Schritte */
.schritte{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px}
.schritt{
  background:#fff; border-radius:6px; padding:46px 32px 34px;
  position:relative; transition:transform .25s, box-shadow .25s;
}
.f-weiss .schritt{background:var(--stein)}
.schritt:hover{transform:translateY(-5px); box-shadow:0 14px 34px rgba(26,22,20,.14)}
.schritt .ziffer{
  position:absolute; top:-24px; left:30px; width:52px; height:52px; border-radius:50%;
  background:var(--rot); color:#fff; font-weight:800; font-size:23px;
  display:grid; place-items:center; box-shadow:0 4px 0 var(--rot-nacht);
}
.schritt h3{margin:12px 0 10px; font-size:22px}
.schritt p{margin:0; color:var(--grau); font-size:17px}

/* ---------------------------------------------------------------- Ablauf */
.strahl{list-style:none; margin:52px 0 0; padding:0; position:relative}
.strahl::before{content:''; position:absolute; left:9px; top:14px; bottom:16px; width:2px; background:rgba(190,24,36,.25)}
.strahl li{position:relative; padding:0 0 34px 50px}
.strahl li::before{
  content:''; position:absolute; left:0; top:8px; width:20px; height:20px;
  border-radius:50%; background:var(--stein); border:3px solid rgba(190,24,36,.35);
}
.f-weiss .strahl li::before{background:#fff}
.strahl li.jetzt::before{background:var(--rot); border-color:var(--rot)}
.strahl .wann{font-weight:800; font-size:14px; letter-spacing:.13em; text-transform:uppercase; color:var(--rot)}
.strahl .was{font-weight:700; font-size:22px; margin-top:4px}
.strahl .dazu{color:var(--grau); font-size:17px; margin-top:3px}

/* --------------------------------------------------------------- Klassen */
.rechner{
  background:var(--rot); color:#fff; padding:40px 36px; margin-top:30px; border-radius:6px;
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
}
.rechner h3{margin:0 0 6px; font-size:24px}
.rechner p{margin:0; color:rgba(255,255,255,.82); font-size:17px}
.rechner-feld{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.rechner input{
  font:inherit; font-weight:700; font-size:17px; padding:15px 20px; border:0; border-radius:100px;
  background:#fff; color:var(--tinte); min-width:200px;
}
.rechner-ergebnis{
  font-weight:800; font-size:19px; background:rgba(0,0,0,.24); padding:15px 24px;
  border-radius:100px; display:none;
}
.rechner-ergebnis.zeig{display:inline-block}

.reiter{display:flex; gap:10px; margin:44px 0 0; flex-wrap:wrap}
.reiter button{
  font:inherit; font-weight:800; font-size:16px; cursor:pointer; background:#fff;
  border:2px solid var(--stein-tief); color:var(--tinte); padding:15px 28px;
  border-radius:100px; transition:.18s;
}
.f-weiss .reiter button{background:var(--stein)}
.reiter button:hover{border-color:var(--rot); color:var(--rot)}
.reiter button[aria-selected=true]{background:var(--rot); border-color:var(--rot); color:#fff}
.klasse{background:#fff; border-radius:6px; padding:46px 40px; margin-top:20px}
.f-weiss .klasse{background:var(--stein)}
.klasse[hidden]{display:none}
.klasse-kopf{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:36px}
.klasse-kopf img{width:82px; height:82px}
.klasse-kopf h3{font-size:30px; margin:0}
.klasse-kopf p{margin:5px 0 0; color:var(--grau); font-size:17px}
.plaetze{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:38px}
.platz{border:2px solid var(--stein-tief); border-radius:6px; padding:24px}
.platz .rang{font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--grau)}
.platz .geld{font-weight:800; font-size:36px; letter-spacing:-.03em; margin-top:12px}
.platz.eins{background:var(--rot); border-color:var(--rot); color:#fff}
.platz.eins .rang{color:rgba(255,255,255,.82)}
.stuecke h4{font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--grau); margin:0 0 14px}
.stuecke ul{list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap}
.stuecke li{border:2px solid var(--stein-tief); padding:11px 22px; font-weight:700; border-radius:100px}
.stuecke p{font-size:16px; color:var(--grau); margin:18px 0 0}

/* --------------------------------------------------------------- Galerie */
.galerie{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px}
.galerie figure{margin:0; overflow:hidden; border-radius:4px; cursor:zoom-in; position:relative; background:#000}
.galerie img{width:100%; height:100%; object-fit:cover; aspect-ratio:9/7; transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.galerie figure::after{
  content:'+'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:48px; font-weight:300; color:#fff;
  background:rgba(190,24,36,0); opacity:0; transition:opacity .3s, background .3s;
}
.galerie figure:hover img{transform:scale(1.07)}
.galerie figure:hover::after{background:rgba(190,24,36,.5); opacity:1}

.lupe{position:fixed; inset:0; z-index:200; background:rgba(20,10,12,.95); display:none; place-items:center; padding:26px}
.lupe.auf{display:grid}
.lupe img{max-width:min(1200px,94vw); max-height:86vh; width:auto; height:auto; border-radius:4px}
.lupe-zu{position:absolute; top:18px; right:22px; background:none; border:0; color:#fff;
  font-size:42px; line-height:1; cursor:pointer; padding:8px 14px}
.lupe-pfeil{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14);
  border:0; color:#fff; font-size:32px; cursor:pointer; padding:18px 24px; border-radius:100px}
.lupe-pfeil.links{left:20px} .lupe-pfeil.rechts{right:20px}
.lupe-pfeil:hover{background:rgba(255,255,255,.28)}

/* ------------------------------------------------------- Siegertreppchen */
.sieger-block{display:grid; grid-template-columns:1fr 1fr; gap:46px; margin-top:26px}
.sieger-karte{background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden}
.sieger-karte > img{width:100%; height:auto; display:block}
.sieger-kopf{display:flex; align-items:center; gap:14px; padding:28px 30px 8px}
.sieger-kopf span{
  background:var(--rot); color:#fff; font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:8px 16px; border-radius:100px;
}
.rang-liste{list-style:none; margin:0; padding:18px 30px 34px}
.rang-liste li{display:flex; align-items:center; gap:18px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.rang-liste li:last-child{border-bottom:0}
.rang-liste .platznr{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:16px; background:rgba(255,255,255,.13); color:#fff;
}
.rang-liste li.gold .platznr{background:var(--rot)}
.rang-liste .name{font-weight:700; font-size:19px; flex:1 1 auto; line-height:1.3}
.rang-liste li.leise .name{font-weight:400; color:rgba(255,255,255,.62); font-size:17px}
.rang-liste .preis{
  flex:0 0 auto; font-weight:800; font-size:16px; color:#fff;
  border:1.5px solid rgba(255,255,255,.42); padding:8px 18px; border-radius:100px; white-space:nowrap;
}
.rang-liste li.gold .preis{background:var(--rot); border-color:var(--rot)}

/* -------------------------------------------------------------- Festival */
.fest{padding:26px 0 18px; display:grid; grid-template-columns:1.05fr 1fr; gap:58px; align-items:center}
.fest img{width:100%; height:auto; border:6px solid #fff; border-radius:4px}

/* ------------------------------------------------------------------ Jury */
.jury{display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:52px}
.jury figure{margin:0; text-align:center}
.jury img{
  width:100%; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover;
  margin-bottom:24px; border:5px solid var(--rot); background:#fff; transition:transform .3s;
}
.jury figure:hover img{transform:scale(1.04)}
.jury h3{font-size:21px; letter-spacing:.11em; text-transform:uppercase; margin-bottom:14px; color:var(--rot)}
.jury p{font-size:16px; line-height:1.58; color:var(--grau); margin:0; text-align:left}

/* ------------------------------------------------------------------- FAQ */
.faq{margin-top:44px; border-top:2px solid var(--stein-tief)}
.faq details{border-bottom:2px solid var(--stein-tief)}
.faq summary{cursor:pointer; list-style:none; padding:24px 46px 24px 0; position:relative; font-weight:700; font-size:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rot)}
.faq summary::after{content:'+'; position:absolute; right:8px; top:19px; font-size:32px; font-weight:300; color:var(--rot); line-height:1}
.faq details[open] summary::after{content:'−'}
.faq .antwort{padding:0 46px 28px 0; color:var(--grau); margin:0; max-width:70ch}

/* ---------------------------------------------------------------- Aufruf */
.aufruf{text-align:center; padding:126px 0; overflow:hidden}
.aufruf h2{max-width:17ch; margin:0 auto 20px}
.aufruf .lead{margin:0 auto 40px; text-align:center}

/* ------------------------------------------------------------------ Fuss */
footer{background:var(--rot-nacht); color:rgba(255,255,255,.62); padding:74px 0 42px; font-size:16px}
footer .siegel{width:98px; margin-bottom:32px}
.fuss{display:flex; gap:44px; flex-wrap:wrap; justify-content:space-between}
.fuss h4{color:#fff; font-size:13px; letter-spacing:.17em; text-transform:uppercase; margin:0 0 14px}
.fuss a{color:rgba(255,255,255,.62); text-decoration:none; display:block; padding:4px 0}
.fuss a:hover{color:#fff}
.fuss-unten{border-top:1px solid rgba(255,255,255,.2); margin-top:48px; padding-top:26px; font-size:14px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ------------------------------------------------------ Mobiler Dauerknopf */
.mobil-cta{display:none}

@media (max-width:980px){
  .schritte{grid-template-columns:1fr}
  .schritt{padding-top:42px}
  .sieger-block,.fest{grid-template-columns:1fr}
  .jury{grid-template-columns:1fr 1fr; gap:32px}
  .galerie{grid-template-columns:1fr 1fr}
  .fest img{order:-1}
  .zahlen{grid-template-columns:1fr 1fr; border-top:0}
  .zahl{border-top:1px solid rgba(255,255,255,.28)}
  .zahl + .zahl::before{display:none}
  .rechner{grid-template-columns:1fr; gap:20px}
}
@media (max-width:680px){
  body{font-size:17px}
  section{padding:70px 0}
  .kante{height:46px}
  .preis-band{padding:96px 0 88px}
  .hero-band{padding-bottom:60px}
  .plaetze{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr; gap:8px}
  .klasse{padding:30px 22px}
  .jury{grid-template-columns:1fr; gap:38px}
  .jury img{max-width:250px; margin-left:auto; margin-right:auto}
  .rang-liste{padding:14px 22px 26px}
  .rang-liste .name{font-size:17px}
  .sieger-kopf{padding:22px 22px 4px}
  nav{
    display:none; position:absolute; top:74px; left:0; right:0; background:var(--rot-nacht);
    flex-direction:column; gap:0; padding:6px 24px 22px;
  }
  nav.offen{display:flex}
  nav a{padding:15px 0; border-bottom:1px solid rgba(255,255,255,.16); width:100%}
  nav a.nav-cta{text-align:center; margin-top:14px; border:0}
  .menue-knopf{display:block}
  footer{padding-bottom:98px}
  .mobil-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--rot); color:#fff; text-align:center; text-decoration:none;
    font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:17px;
    transform:translateY(100%); transition:transform .25s;
  }
  .mobil-cta.sichtbar{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* =========================================================================
   UNTERSEITEN
   ========================================================================= */
.seiten-kopf{position:relative; background:var(--stein-tief); overflow:hidden; padding:0 0 74px}
.seiten-kopf .wrap{padding-top:70px; text-align:center; position:relative; z-index:1}
.seiten-kopf .runde{
  display:inline-block; background:var(--rot); color:#fff; font-weight:800; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; padding:9px 20px; border-radius:100px; margin-bottom:22px;
}
.seiten-kopf h1{
  font-weight:800; font-size:clamp(42px,7vw,88px); line-height:.96;
  letter-spacing:-.03em; color:var(--rot); margin:0 0 18px;
}
.seiten-kopf .unter{font-size:clamp(19px,2.4vw,25px); max-width:46ch; margin:0 auto; color:var(--tinte)}
.seiten-kopf .frist{
  display:inline-flex; align-items:center; gap:12px; margin-top:30px; background:#fff;
  padding:15px 26px; border-radius:100px; font-weight:800; font-size:17px;
}
.seiten-kopf .frist em{font-style:normal; color:var(--rot)}

/* Kriterien */
.kriterien{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:52px}
.kriterium{
  background:#fff; border-radius:6px; padding:36px 34px; display:flex; gap:22px;
  transition:transform .25s, box-shadow .25s;
}
.f-weiss .kriterium{background:var(--stein)}
.kriterium:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(26,22,20,.12)}
.kriterium .punkte{
  flex:0 0 auto; width:62px; height:62px; border-radius:50%; background:var(--rot); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:14px; line-height:1.1; text-align:center;
}
.kriterium h3{margin:6px 0 8px; font-size:21px}
.kriterium p{margin:0; color:var(--grau); font-size:17px}

/* Checkliste */
.check{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 34px}
.check li{position:relative; padding-left:44px; font-size:18px}
.check li::before{
  content:''; position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:50%;
  background:var(--rot);
}
.check li::after{
  content:''; position:absolute; left:9px; top:11px; width:10px; height:5px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg);
}
.check b{display:block; font-weight:700}
.check span{color:var(--grau); font-size:16px}

/* Zurueck-Verweis */
.weiter{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:20px}
.weiter a{
  background:#fff; border-radius:6px; padding:34px 32px; text-decoration:none; display:block;
  transition:transform .25s, box-shadow .25s;
}
.f-stein .weiter a{background:#fff}
.weiter a:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(26,22,20,.12)}
.weiter .wohin{font-weight:800; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--rot)}
.weiter h3{margin:10px 0 6px; font-size:24px}
.weiter p{margin:0; color:var(--grau); font-size:17px}

@media (max-width:900px){
  .kriterien,.check,.weiter{grid-template-columns:1fr}
  .check{gap:16px}
}
@media (max-width:680px){
  .seiten-kopf{padding-bottom:56px}
  .seiten-kopf .wrap{padding-top:50px}
  .kriterium{padding:28px 24px; gap:18px}
}

/* Hauptüberschrift der Startseite: Wortmarke als Bild, Text für Suchmaschinen */
.hero-titel{margin:0; font-size:1rem; line-height:1}
.hero-titel .hero-ueber{display:block}

/* ---------------------------------------------- Rückmeldung / Vertrauen */
.zusage{
  display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
  background:var(--rot); color:#fff; border-radius:6px; padding:46px 44px; margin-top:30px;
}
.zusage .marke{
  width:92px; height:92px; border-radius:50%; background:rgba(255,255,255,.16);
  display:grid; place-items:center; font-size:42px;
}
.zusage h3{margin:0 0 10px; font-size:27px}
.zusage p{margin:0; color:rgba(255,255,255,.88); font-size:18px; max-width:60ch}

/* Vertrauens-Zeile */
.vertrauen{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.vertrauen > div{
  background:#fff; border-radius:6px; padding:28px 26px; border-left:5px solid var(--rot);
}
.f-weiss .vertrauen > div{background:var(--stein)}
.vertrauen b{display:block; font-size:18px; margin-bottom:6px}
.vertrauen span{color:var(--grau); font-size:16px}

/* Erinnerung und Weitersagen */
.merken{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:46px}
.merken > div{background:#fff; border-radius:6px; padding:34px 32px}
.f-weiss .merken > div{background:var(--stein)}
.merken h3{font-size:21px; margin-bottom:8px}
.merken p{margin:0 0 20px; color:var(--grau); font-size:17px}
.merken .knopf{font-size:15px; padding:15px 28px}

/* Unterlagen-Verweis */
.unterlage{
  display:inline-flex; align-items:center; gap:16px; margin-top:34px; text-decoration:none;
  background:#fff; border:2px solid var(--stein-tief); border-radius:100px; padding:14px 28px 14px 18px;
  transition:border-color .2s, transform .2s;
}
.f-weiss .unterlage{background:var(--stein)}
.unterlage:hover{border-color:var(--rot); transform:translateY(-2px)}
.unterlage .sym{
  width:42px; height:42px; border-radius:50%; background:var(--rot); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:12px; flex:0 0 auto;
}
.unterlage b{display:block; font-size:17px}
.unterlage span{color:var(--grau); font-size:15px}

@media (max-width:900px){
  .vertrauen,.merken{grid-template-columns:1fr}
  .zusage{grid-template-columns:1fr; gap:20px; padding:34px 28px; text-align:left}
}

.knopf-linie{
  background:transparent; color:#fff; box-shadow:none;
  border:2px solid rgba(255,255,255,.5); padding:17px 36px;
}
.knopf-linie:hover{background:rgba(255,255,255,.15); border-color:#fff; box-shadow:none; transform:translateY(-2px)}

/* =========================================================================
   BEWERBUNGSFORMULAR
   ========================================================================= */
.formular{max-width:720px; margin:0 auto}
.feldgruppe{background:#fff; border-radius:6px; padding:40px 38px; margin-bottom:22px}
.f-weiss .feldgruppe{background:var(--stein)}
.feldgruppe > h2{
  font-size:22px; margin:0 0 4px; display:flex; align-items:center; gap:14px; letter-spacing:-.01em;
}
.feldgruppe > h2 .nr{
  width:36px; height:36px; border-radius:50%; background:var(--rot); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:800; flex:0 0 auto;
}
.feldgruppe > p.hinweis{margin:0 0 26px 50px; color:var(--grau); font-size:16px}

label{display:block; font-weight:700; font-size:15px; margin:20px 0 7px}
label .opt{font-weight:400; color:var(--grau)}
input[type=text],input[type=email],input[type=tel],input[type=date],select{
  width:100%; padding:15px 16px; font:inherit; font-size:17px;
  border:2px solid var(--stein-tief); border-radius:5px; background:#fff; color:var(--tinte);
}
.f-weiss input[type=text],.f-weiss input[type=email],.f-weiss input[type=tel],
.f-weiss input[type=date],.f-weiss select{background:#fff}
input:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:3px solid var(--rot); outline-offset:2px; border-color:var(--rot);
}
.zeile{display:flex; gap:16px}
.zeile > div{flex:1}
.zeile .schmal{flex:0 0 34%}

/* Elternblock erscheint nur bei Bedarf */
.eltern{
  border:2px solid var(--rot); border-radius:6px; padding:8px 26px 28px;
  margin-top:26px; background:rgba(190,24,36,.05);
}
.eltern[hidden]{display:none}
.eltern .kopf{
  display:flex; align-items:center; gap:12px; margin:22px 0 4px;
  font-weight:800; color:var(--rot); font-size:17px;
}
.eltern > p{margin:0 0 6px; color:var(--grau); font-size:16px}

/* Datei */
.datei{
  border:3px dashed var(--stein-tief); border-radius:6px; padding:38px 24px; text-align:center;
  cursor:pointer; background:#fff; display:block; transition:border-color .2s, background .2s;
}
.f-weiss .datei{background:var(--stein)}
.datei:hover,.datei.aktiv{border-color:var(--rot)}
.datei input{display:none}
.datei .gross{font-weight:800; font-size:18px; display:block}
.datei .klein{color:var(--grau); font-size:16px}

/* Zustimmung */
.zustimmung{display:flex; gap:14px; align-items:flex-start; margin-top:24px; font-size:16px}
.zustimmung input{margin-top:3px; width:22px; height:22px; flex:0 0 auto; accent-color:var(--rot)}
.zustimmung label{margin:0; font-weight:400; line-height:1.55}

/* Fortschritt */
.absenden{width:100%; margin-top:8px; border:0; cursor:pointer; font-family:inherit}
.absenden:disabled{background:#B9AFA2; box-shadow:0 4px 0 #9A9184; cursor:default; transform:none}
.balken{height:10px; background:var(--stein-tief); border-radius:99px; overflow:hidden; margin-top:22px; display:none}
.balken i{display:block; height:100%; width:0; background:var(--rot); transition:width .25s}
.status{margin-top:12px; text-align:center; font-weight:700; color:var(--grau)}
.meldung{border-radius:6px; padding:26px 28px; margin-top:24px; display:none}
.meldung.zeig{display:block}
.meldung.gut{background:var(--rot); color:#fff}
.meldung.schlecht{background:#fff; border-left:6px solid var(--rot)}
.f-weiss .meldung.schlecht{background:var(--stein)}
.meldung b{display:block; font-size:20px; margin-bottom:6px}
.protokoll{
  margin-top:20px; font:12px/1.5 ui-monospace,Menlo,Consolas,monospace; background:rgba(0,0,0,.05);
  border-radius:5px; padding:14px; max-height:180px; overflow:auto; white-space:pre-wrap; display:none;
}
.protokoll.zeig{display:block}

@media (max-width:680px){
  .feldgruppe{padding:28px 22px}
  .feldgruppe > p.hinweis{margin-left:0}
  .zeile{flex-direction:column; gap:0}
  .eltern{padding:6px 18px 22px}
}

/* =========================================================================
   FINALE – Zeitplan und Auftrittsablauf
   ========================================================================= */
.zeitplan{margin-top:52px; border-top:2px solid var(--stein-tief)}
.zeitpunkt{
  display:grid; grid-template-columns:150px 1fr auto; gap:26px; align-items:center;
  padding:26px 4px; border-bottom:2px solid var(--stein-tief);
}
.zeitpunkt .uhr{font-weight:800; font-size:20px; color:var(--rot); letter-spacing:-.01em}
.zeitpunkt .was{font-weight:700; font-size:21px}
.zeitpunkt .dazu{color:var(--grau); font-size:16px; margin-top:3px}
.zeitpunkt .marke{
  width:56px; height:56px; border-radius:50%; background:var(--rot); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:19px; flex:0 0 auto;
}
.zeitpunkt.pause{opacity:.62}
.zeitpunkt.pause .was{font-weight:400}
.zeitpunkt.pause .marke{background:var(--stein-tief); color:var(--grau)}
.zeitpunkt.kroenung .marke{background:var(--tinte)}

/* Auftrittsablauf */
.auftritt{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px}
.auftritt > div{
  background:#fff; border-radius:6px; padding:34px 26px; position:relative;
}
.f-weiss .auftritt > div{background:var(--stein)}
.auftritt .ziffer{
  width:52px; height:52px; flex:0 0 auto; border-radius:50%; background:var(--rot); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:20px; line-height:1;
  margin-bottom:20px; box-shadow:0 4px 0 var(--rot-nacht);
}
.auftritt h3{font-size:19px; margin-bottom:8px}
.auftritt p{margin:0; color:var(--grau); font-size:16px}

/* Breitbild */
.breitbild{margin-top:52px; border-radius:6px; overflow:hidden}
.breitbild img{width:100%; height:auto}

@media (max-width:900px){
  .auftritt{grid-template-columns:1fr 1fr}
  .zeitpunkt{grid-template-columns:100px 1fr; gap:16px}
  .zeitpunkt .marke{display:none}
}
@media (max-width:680px){
  .auftritt{grid-template-columns:1fr}
  .zeitpunkt{grid-template-columns:1fr; gap:4px; padding:20px 2px}
  .zeitpunkt .uhr{font-size:17px}
  .zeitpunkt .was{font-size:19px}
}

/* ---------------------------------------------- Bewerbung noch geschlossen */
.tor{
  max-width:720px; margin:0 auto; background:#fff; border-radius:6px;
  padding:56px 48px; text-align:center;
}
.f-weiss .tor{background:var(--stein)}
.tor .siegel-gross{width:110px; margin:0 auto 28px}
.tor h2{margin-bottom:14px}
.tor p{color:var(--grau); font-size:19px; margin:0 auto 8px; max-width:46ch}
.tor .countdown{border-top-color:rgba(190,24,36,.25); margin-top:36px}
.tor .knoepfe{justify-content:center; margin-top:36px}
.tor .merkzeile{
  margin-top:34px; padding-top:26px; border-top:2px solid var(--stein-tief);
  color:var(--grau); font-size:16px;
}

/* Ankunftszeile im Zeitplan hervorheben */
.zeitpunkt.ankunft{background:rgba(190,24,36,.06)}
.zeitpunkt.ankunft .marke{background:var(--tinte)}

/* Fünftes Kriterium über die volle Breite */
.kriterium.breit{grid-column:1 / -1}
@media (max-width:900px){ .kriterium.breit{grid-column:auto} }

/* ------------------------------------------------------------ Rechtstexte */
.rechtstext{max-width:76ch}
.rechtstext h2{
  font-size:clamp(21px,2.4vw,26px); margin:52px 0 14px; letter-spacing:-.01em;
}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin:0 0 16px; color:var(--grau); font-size:17px; line-height:1.68}
.rechtstext p b{color:var(--tinte)}
.rechtstext a{color:var(--rot)}
.rechtstext .stand{
  font-size:14px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rot); margin-bottom:34px;
}

/* =========================================================================
   DAS GANZE WOCHENENDE – Verbindung zum Festival
   ========================================================================= */
.wochenende{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
.tag{
  background:#fff; border-radius:6px; padding:34px 30px 30px; display:flex; flex-direction:column;
  border-top:6px solid var(--stein-tief); transition:transform .25s, box-shadow .25s;
}
.f-weiss .tag{background:var(--stein)}
.tag:hover{transform:translateY(-5px); box-shadow:0 14px 34px rgba(26,22,20,.14)}
.tag.deiner{border-top-color:var(--rot)}
.tag .wann{
  font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grau); margin-bottom:12px;
}
.tag.deiner .wann{color:var(--rot)}
.tag h3{font-size:23px; margin-bottom:10px}
.tag p{margin:0 0 8px; color:var(--grau); font-size:17px}
.tag .marke{
  align-self:flex-start; margin-bottom:16px; background:var(--rot); color:#fff;
  font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
}
.tag .mehr{
  margin-top:auto; padding-top:22px; font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rot); text-decoration:none;
}
.tag .mehr:hover{text-decoration:underline}

/* Rekord-Zähler */
.rekord{
  display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center;
  background:var(--rot); color:#fff; border-radius:6px; padding:42px 40px; margin-top:30px;
}
.rekord .stand{text-align:center; flex:0 0 auto}
.rekord .stand b{display:block; font-weight:800; font-size:clamp(40px,6vw,64px); line-height:1}
.rekord .stand span{display:block; margin-top:10px; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.rekord .pfeil{font-size:34px; opacity:.5}
.rekord h3{margin:0 0 8px; font-size:25px}
.rekord p{margin:0; color:rgba(255,255,255,.85); font-size:17px}

@media (max-width:900px){
  .wochenende{grid-template-columns:1fr}
  .rekord{grid-template-columns:1fr; gap:22px; text-align:left; padding:32px 26px}
  .rekord .stand{text-align:left}
  .rekord .pfeil{display:none}
}

/* =========================================================================
   WEITERLERNEN – Brücke zur Community
   ========================================================================= */
.weiterlernen{display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center; margin-top:46px}
.weiterlernen .zahlenreihe{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--stein-tief); border-radius:6px; overflow:hidden}
.weiterlernen .zahlenreihe > div{background:#fff; padding:28px 24px; text-align:center}
.f-stein .weiterlernen .zahlenreihe > div{background:var(--stein)}
.weiterlernen .zahlenreihe b{display:block; font-weight:800; font-size:38px; line-height:1; color:var(--rot)}
.weiterlernen .zahlenreihe span{display:block; margin-top:12px; font-size:13px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grau); line-height:1.5}
.weiterlernen .preis{
  margin-top:22px; padding:20px 24px; background:var(--rot); color:#fff; border-radius:6px;
  font-size:16px; text-align:center;
}
.weiterlernen .preis b{display:block; font-size:22px; margin-bottom:4px}
.weiterlernen ul{list-style:none; margin:22px 0 0; padding:0}
.weiterlernen li{position:relative; padding-left:32px; margin-bottom:12px; font-size:17px; color:var(--grau)}
.weiterlernen li::before{
  content:''; position:absolute; left:0; top:9px; width:14px; height:14px;
  border-radius:50%; background:var(--rot);
}
@media (max-width:900px){
  .weiterlernen{grid-template-columns:1fr; gap:34px}
  .weiterlernen .zahlenreihe{order:2}
}

/* ------------------------------------------------------------------ Karte */
.karte{margin-top:44px; border-radius:6px; overflow:hidden; border:6px solid #fff}
.f-weiss .karte{border-color:var(--stein)}
.karte img{width:100%; height:auto; display:block}
.karte-fuss{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:#fff; padding:16px 22px; font-size:15px; color:var(--grau);
}
.f-weiss .karte-fuss{background:var(--stein)}
.karte-fuss a{color:var(--rot); font-weight:700; text-decoration:none}
.karte-fuss a:hover{text-decoration:underline}

/* Countdown auf Unterseiten */
.seiten-kopf .countdown{max-width:560px; border-top-color:rgba(190,24,36,.28)}