/* =========================================================
   ARIRANG — dunkler, aufgeraeumter Grund, darauf die roten
   Klebestreifen und Blockmarkierungen vom Albumcover.
   Farben aendern: hier ganz oben.
   ========================================================= */

:root{
  --grund:      #131316;   /* Seitengrund, fast schwarz */
  --karte:      #1B1B20;   /* Flaechen: Karten, Zeilen */
  --karte-hoch: #23232A;
  --papier:     #F1EFEA;   /* Schrift und Hervorhebungen */
  --papier-matt:#9C9891;
  --rot:        #EC1C31;   /* ARIRANG-Rot */
  --rot-tief:   #B51425;
  --rand:       rgba(241,239,234,.13);
  --rand-hell:  rgba(241,239,234,.26);

  --schrift: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hangul:  "Black Han Sans", "Archivo", sans-serif;

  --breite: 980px;
  --kurve: cubic-bezier(.22,1,.36,1);
  --nav-hoehe: 54px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--grund);
  color:var(--papier);
  font-family:var(--schrift);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Wiederkehrende Bausteine ---------- */

/* Roter Block — das Grundelement vom Cover */
.block-rot{
  display:inline-block; background:var(--rot); color:#131316;
  font-weight:900; letter-spacing:-.01em;
  padding:.16em .48em .2em;
  clip-path:polygon(0.6% 4%, 100% 0%, 99.3% 96%, 0% 100%);
}
.block-hell{ background:var(--papier); color:#131316; }

.eyebrow{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rot); margin-bottom:12px;
}

/* ================= LADEVORHANG ================= */
#vorhang{
  position:fixed; inset:0; z-index:200; background:var(--grund);
  display:flex; align-items:center; justify-content:center;
  animation:vorhangWeg .6s var(--kurve) 1.8s forwards;
}
.vorhang-baender{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; gap:7px;
}
.vorhang-baender span{
  height:clamp(20px,5vh,42px); background:var(--rot);
  transform:scaleX(0); transform-origin:left;
  animation:bandRaus .5s var(--kurve) forwards;
}
.vorhang-text{
  position:relative; z-index:2;
  font-family:var(--hangul); font-size:clamp(2.8rem,15vw,6.5rem);
  color:var(--papier); background:var(--grund); padding:.06em .3em;
  opacity:0; animation:textAuf .45s var(--kurve) .75s forwards;
}
@keyframes bandRaus{ to{ transform:scaleX(1); } }
@keyframes textAuf{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes vorhangWeg{ to{ opacity:0; visibility:hidden; } }

/* ================= MENÜ OBEN ================= */
#nav{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:center; gap:0;
  height:var(--nav-hoehe);
  background:rgba(19,19,22,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rand);
  overflow-x:auto; scrollbar-width:none;
}
#nav::-webkit-scrollbar{ display:none; }
.nav-btn{
  flex:0 0 auto; font-family:var(--schrift);
  font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--papier-matt); background:none; border:0;
  padding:0 clamp(12px,3.4vw,22px); cursor:pointer;
  position:relative; transition:color .25s;
}
.nav-btn::after{
  content:""; position:absolute; left:14%; right:14%; bottom:11px; height:3px;
  background:var(--rot); transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--kurve);
}
.nav-btn:hover{ color:var(--papier); }
.nav-btn.is-aktiv{ color:var(--papier); }
.nav-btn.is-aktiv::after{ transform:scaleX(1); }
.nav-btn:focus-visible{ outline:2px solid var(--rot); outline-offset:-4px; }

.nav-pfeil{
  display:inline-block; margin-left:5px; font-size:.7em;
  transition:transform .25s var(--kurve); vertical-align:middle;
}
.nav-btn[aria-expanded="true"] .nav-pfeil{ transform:rotate(180deg); }

/* Aufklappmenü der Member. Haengt am Body, damit die
   seitlich scrollbare Leiste es nicht abschneidet. */
.nav-menue{
  position:fixed; z-index:120;
  background:rgba(23,23,28,.97); backdrop-filter:blur(14px);
  border:1px solid var(--rand-hell); border-radius:14px;
  padding:6px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-8px);
  transition:opacity .2s ease, transform .22s var(--kurve);
}
.nav-menue.ist-offen{ opacity:1; transform:none; }
.nm-eintrag{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:var(--papier); font-family:inherit; padding:10px 12px;
  transition:background .18s, transform .22s var(--kurve);
}
.nm-eintrag:hover{ background:rgba(236,28,49,.16); transform:translateX(3px); }
.nm-eintrag.ist-aktiv{ background:var(--rot); color:#131316; }
.nm-eintrag:focus-visible{ outline:2px solid var(--rot); outline-offset:-2px; }
.nm-eintrag.ist-alle{ border-bottom:1px solid var(--rand); border-radius:9px 9px 0 0; margin-bottom:4px; }
.nm-nr{
  flex:0 0 auto; font-weight:900; font-size:.62rem; letter-spacing:.02em;
  background:var(--rot); color:#131316; padding:2px 5px; border-radius:3px;
}
.nm-eintrag.ist-aktiv .nm-nr{ background:#131316; color:var(--papier); }
.nm-name{ flex:1; font-weight:900; font-size:.95rem; letter-spacing:-.03em; }
.nm-zusatz{ font-size:.64rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--papier-matt); }
.nm-eintrag.ist-aktiv .nm-zusatz{ color:#131316; }
.nm-hangul{ font-family:var(--hangul); font-size:.95rem; color:var(--rot); }
.nm-eintrag.ist-aktiv .nm-hangul{ color:#131316; }

/* ================= SEITEN ================= */
.seite{
  display:none;
  padding:clamp(30px,6vw,56px) clamp(18px,5vw,36px) 90px;
  max-width:var(--breite); margin:0 auto;
}
.seite.is-aktiv{ display:block; animation:seiteRein .45s var(--kurve); }
@keyframes seiteRein{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* ================= HERO ================= */
.hero{ padding-bottom:10px; }
.hero-marke{
  font-size:.68rem; font-weight:800; letter-spacing:.34em;
  text-transform:uppercase; color:var(--papier-matt); margin-bottom:26px;
}
.hero-streifen{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  margin:0 0 22px;
}
.hero-streifen span{
  display:block; max-width:100%;
  font-weight:900; line-height:1.12; letter-spacing:-.045em;
  background:var(--rot); color:#131316;
  padding:.06em .3em .1em .24em;
  clip-path:polygon(0.5% 4%, 100% 0%, 99.4% 96%, 0% 100%);
  animation:streifenRein .5s var(--kurve) backwards;
}
.hero-streifen span:nth-child(1){ font-size:clamp(1.25rem,5.6vw,2.2rem); }
.hero-streifen span:nth-child(2){
  font-size:clamp(3rem,16vw,6.8rem);
  background:var(--papier); color:#131316; animation-delay:.09s;
}
.hero-streifen span:nth-child(3){ font-size:clamp(1.35rem,6vw,2.4rem); animation-delay:.18s; }
.hero-streifen sup{ font-size:.26em; font-weight:800; vertical-align:super; margin-left:.2em; }
@keyframes streifenRein{ from{ opacity:0; transform:translateX(-22px); } }

.hero-hangul{
  font-family:var(--hangul); font-size:clamp(2.2rem,10vw,4rem);
  line-height:1; color:var(--rot); margin-bottom:20px;
}
.hero-sub{ max-width:40ch; font-size:1.02rem; color:var(--papier-matt); }
.hero-von{
  margin-top:22px; font-size:.72rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--papier-matt);
}
.cta{
  display:inline-block; margin-top:26px;
  font-family:var(--schrift); font-weight:900;
  font-size:clamp(1rem,4.2vw,1.3rem); letter-spacing:-.02em;
  background:var(--rot); color:#131316; border:0;
  padding:.34em .7em .4em; cursor:pointer;
  clip-path:polygon(0.5% 5%, 100% 0%, 99.5% 95%, 0% 100%);
  transition:transform .25s var(--kurve), background .2s;
}
.cta:hover{ transform:translateY(-2px); background:var(--papier); }

/* ================= COUNTDOWN ================= */
.gruss{
  margin-top:34px; border:1px solid var(--rand); border-radius:18px;
  background:var(--karte); padding:24px; position:relative; overflow:hidden;
}
.gruss.ist-gruss{
  border-color:var(--rot);
  background:linear-gradient(150deg, rgba(236,28,49,.16), var(--karte) 62%);
}
.gruss.ist-gruss::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--rot);
}
.gruss-label{
  font-size:.66rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--papier-matt); margin-bottom:14px;
}
.gruss.ist-gruss .gruss-label{ color:var(--rot); }
.gruss-gross{
  font-weight:900; font-size:clamp(1.5rem,6.4vw,2.4rem);
  line-height:1.08; letter-spacing:-.04em;
}
.gruss-hangul{
  font-family:var(--hangul); font-size:clamp(1.4rem,5.6vw,2rem);
  color:var(--rot); line-height:1.2; margin-top:6px;
}
.gruss-signatur{
  display:flex; align-items:center; gap:.42em;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--rand);
  font-weight:900; font-size:clamp(1.05rem,4.6vw,1.4rem); letter-spacing:-.03em;
}
.gruss-signatur .herz{ fill:var(--rot); }
.gruss.ist-gruss .gruss-signatur{ color:var(--papier); }
.cd-label{
  font-size:.66rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--papier-matt); margin-bottom:14px;
}
.cd-felder{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cd-feld{ text-align:center; background:var(--karte-hoch); border-radius:10px; padding:12px 6px; }
.cd-zahl{
  display:block; font-weight:900; font-size:clamp(1.5rem,7vw,2.4rem);
  line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.cd-einheit{
  display:block; margin-top:6px; font-size:.6rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--papier-matt);
}
.cd-jetzt{
  font-weight:900; font-size:clamp(1.2rem,5.4vw,1.9rem); line-height:1.2;
  letter-spacing:-.03em; text-align:center; color:var(--rot);
}

/* ================= BLÖCKE ================= */
.block{ margin-top:clamp(46px,8vw,74px); }
.block-titel{
  display:inline-block; font-size:.98rem; font-weight:900;
  text-transform:uppercase; letter-spacing:-.005em;
  background:var(--rot); color:#131316; padding:.18em .5em .22em;
  clip-path:polygon(0.6% 4%, 100% 0%, 99.2% 96%, 0% 100%);
  margin-bottom:20px;
}
.seiten-kopf{ margin-bottom:30px; }
.seiten-titel{
  font-weight:900; font-size:clamp(2.2rem,9vw,3.6rem);
  line-height:.94; letter-spacing:-.04em; text-transform:uppercase;
}
.seiten-text{ margin-top:12px; color:var(--papier-matt); max-width:48ch; }

/* Zitate */
.zitate{ display:grid; gap:14px; }
.zitat{
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  border-left:5px solid var(--rot); padding:18px 20px;
}
.zitat p{ font-weight:800; font-size:1.1rem; line-height:1.4; letter-spacing:-.02em; }
.zitat span{
  display:block; margin-top:8px; font-size:.66rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rot);
}

/* Zahlen */
.zahlen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.zahl{
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  padding:18px 16px;
}
.zahl b{ display:block; font-weight:900; font-size:2.2rem; line-height:.9; letter-spacing:-.045em; }
.zahl span{
  display:block; margin-top:7px; font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--papier-matt);
}

/* ---------- Hab dich lieb ---------- */
.liebe-block{ margin-top:clamp(40px,7vw,64px); }
.liebe{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:900; font-size:clamp(1.6rem,7vw,2.8rem);
  line-height:1.1; letter-spacing:-.04em;
  background:var(--rot); color:#131316; padding:.14em .44em .18em;
  clip-path:polygon(0.6% 4%, 100% 0%, 99.3% 96%, 0% 100%);
}
.herz{ width:.72em; height:.72em; flex:0 0 auto; fill:#131316;
  animation:puls 1.9s ease-in-out infinite; transform-origin:center; }
@keyframes puls{ 0%,100%{ transform:scale(1) } 14%{ transform:scale(1.16) } 28%{ transform:scale(1) } 42%{ transform:scale(1.1) } }

/* ================= MEMBER ================= */
/* Gruppenfotos */
.gruppe-block{ margin-bottom:26px; }
.gruppe{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--rot) transparent;
  scroll-snap-type:x mandatory;
}
.gruppe::-webkit-scrollbar{ height:8px; }
.gruppe::-webkit-scrollbar-track{ background:var(--karte); border-radius:8px; }
.gruppe::-webkit-scrollbar-thumb{ background:var(--karte-hoch); border-radius:8px; }
.gruppe::-webkit-scrollbar-thumb:hover{ background:var(--rot); }
.gruppe-bild{
  flex:0 0 auto; width:min(74vw,320px); aspect-ratio:4/3;
  padding:0; border:1px solid var(--rand); border-radius:14px;
  overflow:hidden; background:var(--karte); cursor:pointer;
  scroll-snap-align:start; transition:border-color .25s, transform .3s var(--kurve);
}
.gruppe-bild img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--kurve); }
.gruppe-bild:hover{ border-color:var(--rot); }
.gruppe-bild:hover img{ transform:scale(1.05); }
.gruppe-bild:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
@media(min-width:760px){ .gruppe-bild{ width:340px; } }

.member-liste{ display:grid; gap:8px; }
.member-zeile{
  position:relative; display:flex; align-items:center; gap:16px;
  width:100%; text-align:left; color:inherit; font-family:inherit;
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  padding:16px 18px; cursor:pointer; overflow:hidden;
  transition:background .25s, border-color .25s, transform .3s var(--kurve);
}
.member-zeile::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--rot); transition:width .3s var(--kurve);
}
.member-zeile:hover{ background:var(--karte-hoch); border-color:var(--rand-hell); transform:translateX(5px); }
.member-zeile:hover::before{ width:9px; }
.member-zeile:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.mz-nr{
  flex:0 0 auto; font-weight:900; font-size:.78rem; letter-spacing:.02em;
  background:var(--rot); color:#131316; padding:3px 7px;
}
.mz-mitte{ flex:1; min-width:0; }
.mz-name{ display:block; font-weight:900; font-size:1.3rem; line-height:1.15; letter-spacing:-.035em; }
.mz-meta{ display:block; margin-top:2px; font-size:.78rem; color:var(--papier-matt); }
.mz-hangul{ flex:0 0 auto; font-family:var(--hangul); font-size:1.35rem; color:var(--rot); }
.mz-bild{
  flex:0 0 auto; width:54px; height:54px; border-radius:12px;
  object-fit:cover; object-position:top center; background:var(--karte-hoch);
}
@media(min-width:760px){ .mz-bild{ width:64px; height:64px; } }
.mz-bild{ position:relative; overflow:hidden; display:block; flex:0 0 auto; }
.mz-bild img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:opacity .45s var(--kurve);
}
.mz-frueher{ opacity:0; }
.member-zeile:hover .mz-frueher{ opacity:1; }
.member-zeile:hover .mz-heute{ opacity:0; }

/* Detail — auf dem Handy von unten, auf dem Desktop mittig und breit */
/* ---------- Eigene Seite pro Mitglied ---------- */
@keyframes fadeRein{ from{opacity:0} to{opacity:1} }
.zurueck{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:22px;
  background:var(--karte); border:1px solid var(--rand); color:var(--papier-matt);
  border-radius:100px; padding:8px 16px; cursor:pointer; font-family:inherit;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition:color .2s, border-color .2s, transform .25s var(--kurve);
}
.zurueck:hover{ color:var(--papier); border-color:var(--rot); transform:translateX(-3px); }
.ms-kopf{ margin-bottom:26px; }
.ms-name{
  font-weight:900; font-size:clamp(2.6rem,12vw,4.4rem);
  line-height:.94; letter-spacing:-.045em; margin:4px 0 2px;
}
.d-kopf{ display:flex; align-items:center; gap:10px; }
.d-nr{ font-weight:900; font-size:.74rem; background:var(--rot); color:#131316; padding:3px 7px; }
.d-hangul{ font-family:var(--hangul); font-size:1.5rem; color:var(--rot); }
.d-real{ color:var(--papier-matt); font-size:1rem; margin-bottom:14px; }
.d-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.d-tag{
  font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--rot); color:#131316; padding:5px 10px;
}
.d-satz{
  font-weight:800; font-size:1.08rem; line-height:1.45; letter-spacing:-.015em;
  border-left:4px solid var(--rot); padding-left:15px; margin-bottom:22px;
}
.d-zeile{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--rand); font-size:.94rem; }
.d-zeile b{
  flex:0 0 92px; font-size:.66rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--papier-matt); padding-top:.35em;
}
.d-liste{ list-style:none; }
.d-liste li{ padding:10px 0 10px 24px; position:relative;
  border-bottom:1px solid var(--rand); font-size:.95rem; break-inside:avoid; }
.d-liste li::before{ content:""; position:absolute; left:0; top:1.1em; width:13px; height:3px; background:var(--rot); }

/* Knopf zum Quiz des Mitglieds */
.quizknopf{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:rgba(236,28,49,.12); border:1px solid var(--rot); border-radius:16px;
  padding:20px 22px; color:var(--papier);
  transition:background .25s, color .25s, transform .28s var(--kurve);
}
.quizknopf:hover{ background:var(--rot); color:#131316; transform:translateY(-2px); }
.qk-klein{
  display:block; font-size:.66rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rot); margin-bottom:5px;
}
.quizknopf:hover .qk-klein{ color:#131316; }
.qk-gross{ display:block; font-weight:900; font-size:clamp(1.15rem,4.8vw,1.6rem);
  line-height:1.15; letter-spacing:-.035em; }

/* Vor und zurueck zwischen den Mitgliedern */
.ms-blaettern{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:clamp(40px,7vw,64px); }
.ms-nachbar{
  text-align:left; cursor:pointer; font-family:inherit; color:var(--papier);
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  padding:14px 16px; transition:background .25s, border-color .25s, transform .28s var(--kurve);
}
.ms-nachbar.ist-rechts{ text-align:right; }
.ms-nachbar:hover{ background:var(--karte-hoch); border-color:var(--rot); transform:translateX(-3px); }
.ms-nachbar.ist-rechts:hover{ transform:translateX(3px); }
.ms-nachbar span{
  display:block; font-size:.62rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--papier-matt); margin-bottom:3px;
}
.ms-nachbar b{ display:block; font-weight:900; font-size:1.05rem; letter-spacing:-.03em; }

/* Bildpaar im Steckbrief: damals und heute */
.d-paar{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:22px; }
.d-paar--eins{ grid-template-columns:1fr; }
.d-kachel{
  position:relative; margin:0; cursor:zoom-in; overflow:hidden;
  border-radius:14px; background:var(--karte-hoch); border:1px solid var(--rand);
  transition:border-color .25s;
}
.d-kachel img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center;
  display:block; transition:transform .5s var(--kurve);
}
.d-kachel:hover{ border-color:var(--rot); }
.d-kachel:hover img{ transform:scale(1.04); }
.d-kachel:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.d-kachel figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 10px 9px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(transparent, rgba(10,10,12,.94));
}
.d-kachel figcaption b{
  display:inline-block; background:var(--rot); color:#131316;
  font-weight:900; padding:1px 5px; margin-right:5px; letter-spacing:0;
}
.d-oben{ display:block; }
.d-fakten{ margin-top:4px; }

@media(min-width:760px){
  .d-oben{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr); gap:34px; align-items:start; }
  .d-oben.ohne-bild{ grid-template-columns:1fr; }
  .d-paar{ margin-bottom:0; }
  .d-liste--breit{ columns:2; column-gap:34px; }
}

/* ================= JAHRESFOTOS ================= */
.jahre{
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px;
  scrollbar-width:thin; scrollbar-color:var(--rot) transparent;
  scroll-snap-type:x proximity;
}
.jahre::-webkit-scrollbar{ height:8px; }
.jahre::-webkit-scrollbar-track{ background:var(--karte); border-radius:8px; }
.jahre::-webkit-scrollbar-thumb{ background:var(--rot); border-radius:8px; }
/* Feste Hoehe, Breite richtet sich nach dem Bild - so wird
   nichts abgeschnitten, egal ob quer oder hoch. */
.jahr-karte{
  position:relative; flex:0 0 auto;
  height:clamp(170px,42vw,260px); width:auto;
  padding:0; cursor:zoom-in; overflow:hidden; scroll-snap-align:start;
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  transition:border-color .25s, transform .3s var(--kurve);
}
.jahr-karte img{ height:100%; width:auto; max-width:none; display:block;
  transition:transform .5s var(--kurve); }
.jahr-karte:hover{ border-color:var(--rot); transform:translateY(-3px); }
.jahr-karte:hover img{ transform:scale(1.05); }
.jahr-karte:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.jk-jahr{
  position:absolute; left:10px; bottom:10px;
  background:var(--rot); color:#131316;
  font-weight:900; font-size:.9rem; letter-spacing:-.02em;
  padding:3px 8px;
}


/* Luecke in der Reihe, zum Beispiel der Militaerdienst */
.jahr-pause{
  flex:0 0 auto; width:170px; height:clamp(170px,42vw,260px);
  display:flex; flex-direction:column; justify-content:center;
  padding:18px 16px; scroll-snap-align:start;
  border:1px dashed var(--rand-hell); border-radius:14px;
  background:repeating-linear-gradient(135deg,
    transparent 0 9px, rgba(241,239,234,.035) 9px 18px);
}
.jp-jahre{ font-weight:900; font-size:1.5rem; letter-spacing:-.04em; color:var(--rot); }
.jp-titel{
  font-size:.64rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; margin:6px 0 8px;
}
.jp-text{ font-size:.78rem; line-height:1.45; color:var(--papier-matt); }


/* Bilder in den Sortierzeilen */
.qs-bild{
  flex:0 0 66px; width:66px; height:48px; object-fit:cover;
  border-radius:8px; display:block; background:var(--karte-hoch);
}
.qs-frage{ font-weight:900; font-size:1.2rem; color:var(--papier-matt); }
.q-sort-zeile.ist-richtig .qs-frage,
.q-sort-zeile.ist-falsch .qs-frage{ color:#131316; }

/* ================= ZEITLEISTE ================= */
.zeitleiste{ position:relative; padding-left:30px; }
.zeitleiste::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--rot), var(--rand) 92%);
}
.zl-jahr{
  position:relative; margin:26px 0 10px -30px; padding-left:30px;
  font-weight:900; font-size:1.5rem; letter-spacing:-.04em; color:var(--papier-matt);
}
.zl-jahr:first-child{ margin-top:0; }
.zl-eintrag{
  position:relative; background:var(--karte); border:1px solid var(--rand);
  border-radius:14px; padding:14px 16px; margin-bottom:8px; cursor:pointer;
  transition:background .25s, border-color .25s, transform .3s var(--kurve);
}
.zl-eintrag:hover{ background:var(--karte-hoch); border-color:var(--rand-hell); transform:translateX(4px); }
.zl-eintrag:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.zl-punkt{
  position:absolute; left:-30px; top:20px; width:10px; height:10px;
  border-radius:50%; background:var(--karte-hoch);
  border:2px solid var(--rand-hell); transform:translateX(1px);
}
.zl-eintrag.ist-gross .zl-punkt{ background:var(--rot); border-color:var(--rot); }
.zl-eintrag.ist-gross{ border-left:4px solid var(--rot); }
.zl-typ{
  font-size:.62rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rot); margin-bottom:3px;
}
.zl-titel{ font-weight:900; font-size:1.2rem; line-height:1.2; letter-spacing:-.035em; }
.zl-datum{ font-size:.78rem; color:var(--papier-matt); margin-top:2px; }
.zl-note{
  font-size:.9rem; line-height:1.55; color:var(--papier-matt);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--kurve), opacity .3s, margin-top .4s var(--kurve);
}
.zl-eintrag.ist-offen .zl-note{ max-height:180px; opacity:1; margin-top:10px; }
@media(min-width:760px){
  .zeitleiste{ padding-left:44px; }
  .zeitleiste::before{ left:11px; }
  .zl-jahr{ margin-left:-44px; padding-left:44px; font-size:1.9rem; }
  .zl-punkt{ left:-44px; width:12px; height:12px; }
  .zl-note{ max-height:none; opacity:1; margin-top:10px; }   /* Platz genug: immer offen */
  .zl-eintrag{ cursor:default; }
  .zl-eintrag:hover{ transform:none; }
}
.qs-jahr{
  display:block; font-size:.72rem; font-weight:700; opacity:.75; margin-top:1px;
}

/* ================= GALERIE ================= */
.galerie{ columns:2; column-gap:10px; }
@media(min-width:700px){ .galerie{ columns:3; column-gap:14px; } }
.foto{
  break-inside:avoid; margin-bottom:10px; position:relative; cursor:pointer;
  border-radius:12px; overflow:hidden; border:1px solid var(--rand);
  opacity:0; animation:fotoRein .5s var(--kurve) forwards;
}
.foto img, .foto video{ width:100%; display:block; transition:transform .5s var(--kurve); }
.foto video{ background:#000; }
.foto:has(video){ cursor:default; }
.foto:hover img{ transform:scale(1.05); }
.foto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:24px 12px 10px;
  font-size:.76rem; line-height:1.35;
  background:linear-gradient(transparent, rgba(10,10,12,.92));
}
@keyframes fotoRein{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
/* Eigene Bilder hinzufuegen */
.zone{
  margin-top:16px; padding:22px; border-radius:16px;
  border:1px dashed var(--rand-hell); background:rgba(241,239,234,.02);
  transition:border-color .25s, background .25s;
}
.zone.ist-drueber{ border-color:var(--rot); background:rgba(236,28,49,.09); }
.zone-titel{ font-weight:900; font-size:1.05rem; letter-spacing:-.03em; }
.zone-text{ font-size:.85rem; color:var(--papier-matt); margin:5px 0 14px; max-width:50ch; }
.zone-knopf{
  display:inline-block; font-weight:900; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--rot); color:#131316;
  border-radius:100px; padding:12px 22px; cursor:pointer;
  transition:transform .25s var(--kurve), background .2s;
}
.zone-knopf:hover{ background:var(--papier); transform:translateY(-2px); }
.zone-knopf:focus-within{ outline:2px solid var(--papier); outline-offset:3px; }
.zone-status{
  margin-top:10px; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--papier-matt); min-height:1em;
}
.zone-status.ist-gut{ color:var(--rot); }
.zone-status.ist-fehler{
  color:var(--rot); letter-spacing:.02em; text-transform:none; font-size:.82rem;
}

/* Kacheln, die sie selbst hinzugefuegt hat */
.foto.ist-eigen img{ cursor:zoom-in; }
.foto-eigen{
  position:absolute; left:8px; top:8px;
  background:var(--rot); color:#131316;
  font-size:.58rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 7px; border-radius:4px;
}
.foto-weg{
  position:absolute; right:8px; top:8px;
  width:28px; height:28px; border-radius:50%;
  background:rgba(19,19,22,.82); border:1px solid var(--rand-hell);
  color:var(--papier); font-size:1rem; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .2s, background .2s;
}
.foto.ist-eigen:hover .foto-weg,
.foto.ist-eigen:focus-within .foto-weg{ opacity:1; }
.foto-weg:hover{ background:var(--rot); color:#131316; }
@media(hover:none){ .foto-weg{ opacity:1; } }

.galerie-leer{
  border:1px dashed var(--rand-hell); border-radius:14px;
  padding:28px 22px; color:var(--papier-matt); font-size:.92rem;
}
.galerie-leer code{
  font-family:ui-monospace,monospace; background:var(--rot); color:#131316;
  padding:2px 6px; font-size:.85em; font-weight:700;
}
.lightbox{
  position:fixed; inset:0; z-index:180; background:#0A090D;
  display:grid; align-items:center; justify-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:1fr auto;
  gap:0 4px; padding:14px; animation:fadeRein .2s ease;
}
.lb-buehne{ grid-column:2; grid-row:1; margin:0; display:grid; place-items:center;
  width:100%; height:100%; cursor:zoom-out; }
.lb-buehne img{ max-width:100%; max-height:76vh; border-radius:8px; display:block; }
.rein-links { animation:schiebLinks .32s var(--kurve); }
.rein-rechts{ animation:schiebRechts .32s var(--kurve); }
@keyframes schiebLinks { from{ opacity:0; transform:translateX(-34px) } }
@keyframes schiebRechts{ from{ opacity:0; transform:translateX(34px) } }
.lb-pfeil{
  grid-row:1; width:46px; height:46px; border-radius:50%;
  background:var(--karte); border:1px solid var(--rand-hell); color:var(--papier);
  font-size:1.7rem; line-height:1; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; padding-bottom:4px;
  transition:background .2s, transform .2s var(--kurve);
}
.lb-links { grid-column:1; }
.lb-rechts{ grid-column:3; }
.lb-pfeil:hover{ background:var(--rot); color:#131316; transform:scale(1.08); }
.lb-zu{
  position:absolute; top:14px; right:14px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background:var(--karte); border:1px solid var(--rand-hell); color:var(--papier);
  font-size:1.4rem; line-height:1; cursor:pointer;
}
.lb-zu:hover{ background:var(--rot); color:#131316; }
.lb-fuss{ grid-column:1/-1; grid-row:2; text-align:center; padding-top:12px; }
.lb-text{ font-size:.9rem; color:var(--papier); max-width:52ch; margin:0 auto; }
.lb-zaehler{
  margin-top:6px; font-size:.68rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--papier-matt);
}
@media(max-width:520px){
  .lb-pfeil{ width:40px; height:40px; font-size:1.45rem; }
}

/* ================= TICKET ================= */
.ticket{
  display:flex; margin-top:6px; border-radius:16px; overflow:hidden;
  background:var(--karte); border:1px solid var(--rand-hell);
  animation:seiteRein .5s var(--kurve);
}
.tk-stub{
  flex:0 0 88px; background:var(--rot); color:#131316;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px 8px; text-align:center;
  border-right:3px dashed rgba(19,19,22,.32);
}
.tk-klein{ font-size:.58rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.tk-gross{ font-weight:900; font-size:2.6rem; line-height:.9; letter-spacing:-.05em; margin:2px 0; }
.tk-haupt{ flex:1; min-width:0; padding:18px 18px 16px; }
.tk-marke{
  font-size:.6rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rot); margin-bottom:8px;
}
.tk-venue{ font-weight:900; font-size:clamp(1.25rem,5.4vw,1.9rem);
  line-height:1.08; letter-spacing:-.04em; }
.tk-ort{ font-size:.78rem; color:var(--papier-matt); margin-top:3px; }
.tk-raster{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--rand);
}
.tk-feld b{
  display:block; font-size:.56rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--papier-matt); margin-bottom:2px;
}
.tk-feld span{ display:block; font-weight:900; font-size:.92rem; letter-spacing:-.02em; }
.tk-sitze{
  margin-top:14px; display:inline-block; font-weight:900; font-size:1rem;
  letter-spacing:-.02em; background:var(--rot); color:#131316; padding:.16em .5em .2em;
  clip-path:polygon(1% 5%, 100% 0%, 99% 95%, 0% 100%);
}
.tk-code{
  margin-top:16px; height:34px;
  background:repeating-linear-gradient(90deg,
    var(--papier) 0 2px, transparent 2px 4px,
    var(--papier) 4px 5px, transparent 5px 9px,
    var(--papier) 9px 12px, transparent 12px 14px);
  opacity:.55;
}
.tk-link{ margin-top:12px; font-size:.85rem; }
.tk-link a{ color:var(--rot); font-weight:800; text-decoration:none; }
.tk-link a:hover{ text-decoration:underline; }
@media(max-width:480px){
  .tk-stub{ flex:0 0 66px; }
  .tk-raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ================= TAGESABLAUF ================= */
.ablauf{ position:relative; padding-left:66px; }
.ablauf::before{
  content:""; position:absolute; left:52px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--rot), var(--rand) 94%);
}
.ab-punkt{
  position:relative; margin-bottom:10px; padding:14px 16px;
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  animation:seiteRein .45s var(--kurve) backwards;
}
.ab-punkt::before{
  content:""; position:absolute; left:-20px; top:20px;
  width:11px; height:11px; border-radius:50%;
  background:var(--rot); border:3px solid var(--grund);
}
.ab-zeit{
  position:absolute; left:-66px; top:16px; width:44px; text-align:right;
  font-weight:900; font-size:.85rem; letter-spacing:-.02em; color:var(--rot);
}
.ab-titel{ font-weight:900; font-size:1.05rem; letter-spacing:-.03em; }
.ab-text{ font-size:.9rem; color:var(--papier-matt); margin-top:4px; line-height:1.55; }

/* ================= STADIONPLAN ================= */
.plan{
  display:block; width:100%; margin-top:6px; padding:0; cursor:zoom-in;
  background:var(--papier); border:1px solid var(--rand); border-radius:14px;
  overflow:hidden; position:relative;
}
.plan img{ width:100%; display:block; }
.plan-lupe{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:var(--rot); color:#131316; font-size:.66rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 12px;
  white-space:nowrap;
}
.plan:hover{ border-color:var(--rot); }

/* ================= INFOKARTEN ================= */
.infokarten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.infokarte{
  background:var(--karte); border:1px solid var(--rand); border-radius:14px; padding:16px;
}
.infokarte.ist-hoch{ border-color:var(--rot); background:rgba(236,28,49,.1); }
.infokarte b{
  display:block; font-size:.6rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--papier-matt); margin-bottom:5px;
}
.infokarte span{ display:block; font-weight:900; font-size:1.05rem; letter-spacing:-.025em; line-height:1.25; }
.infokarte a{ color:var(--rot); text-decoration:none; }
.infokarte a:hover{ text-decoration:underline; }

/* ================= ERINNERUNGSFELDER ================= */
.notiz-hinweis{ font-size:.85rem; color:var(--papier-matt); margin-bottom:18px; max-width:52ch; }
.notiz{ margin-bottom:22px; }
.notiz-kopf{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.notiz-frage{
  flex:1; font-weight:900; font-size:1.05rem;
  letter-spacing:-.03em; line-height:1.25;
}
.notiz.ist-eigen .notiz-frage{ padding-left:12px; border-left:3px solid var(--rot); }
.notiz-weg{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--karte); border:1px solid var(--rand); color:var(--papier-matt);
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.notiz-weg:hover{ background:var(--rot); color:#131316; border-color:var(--rot); }
.notiz-feld{
  width:100%; font-family:inherit; font-size:1rem; line-height:1.55;
  color:var(--papier); background:var(--karte);
  border:1px solid var(--rand); border-radius:14px; padding:14px 16px;
  resize:vertical; min-height:96px;
  transition:border-color .25s, background .25s;
}
.notiz-feld::placeholder{ color:var(--papier-matt); opacity:.7; }
.notiz-feld:focus{ outline:none; border-color:var(--rot); background:var(--karte-hoch); }
.notiz-status{
  margin-top:6px; font-size:.68rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--papier-matt); min-height:1em;
}
.notiz-status.ist-gespeichert{ color:var(--rot); }
.notiz-status.ist-fehler{ color:var(--rot); letter-spacing:.02em; text-transform:none; font-size:.8rem; }

/* Eigene Frage anlegen */
.notiz-neu{
  margin-top:26px; padding:20px; border-radius:16px;
  border:1px dashed var(--rand-hell); background:rgba(241,239,234,.02);
}
.notiz-neu-titel{
  display:block; font-weight:900; font-size:1rem; letter-spacing:-.03em;
}
.notiz-neu-text{ font-size:.85rem; color:var(--papier-matt); margin:5px 0 14px; max-width:48ch; }
.notiz-neu-zeile{ display:flex; gap:8px; flex-wrap:wrap; }
.notiz-neu-feld{
  flex:1 1 220px; min-width:0; font-family:inherit; font-size:.95rem;
  color:var(--papier); background:var(--karte);
  border:1px solid var(--rand); border-radius:100px; padding:12px 18px;
  transition:border-color .25s;
}
.notiz-neu-feld::placeholder{ color:var(--papier-matt); opacity:.7; }
.notiz-neu-feld:focus{ outline:none; border-color:var(--rot); }
.notiz-neu-knopf{
  flex:0 0 auto; font-family:inherit; font-weight:900; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--rot); color:#131316; border:0;
  border-radius:100px; padding:12px 22px; cursor:pointer;
  transition:transform .25s var(--kurve), background .2s;
}
.notiz-neu-knopf:hover{ background:var(--papier); transform:translateY(-2px); }

/* ================= TRACKLIST ================= */
.tracks{ list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.tracks li{
  display:block; max-width:100%;
  font-weight:900; font-size:clamp(1.2rem,5.4vw,2rem);
  line-height:1.16; letter-spacing:-.035em;
  background:var(--rot); color:#131316;
  padding:.08em .3em .12em .24em;
  clip-path:polygon(0.5% 4%, 100% 0%, 99.4% 96%, 0% 100%);
  animation:streifenRein .45s var(--kurve) backwards;
}
.tracks li:nth-child(even){ clip-path:polygon(0% 0%, 99.6% 3%, 100% 100%, 0.4% 97%); }
.tracks li.ist-highlight{ background:var(--papier); color:#131316; }
.tracks .nr{ font-size:.4em; font-weight:800; vertical-align:super; margin-left:.35em; }
.tracks--setlist li{ background:var(--karte-hoch); color:var(--papier); }
.tracks--setlist li .nr{ color:var(--rot); }

/* Platzhalter, solange Spotify nicht geladen ist */
.einbett{
  border:1px dashed var(--rand-hell); border-radius:16px;
  padding:24px; background:rgba(241,239,234,.02);
}
.eb-titel{ font-weight:900; font-size:1.1rem; letter-spacing:-.03em; }
.eb-text{ font-size:.85rem; line-height:1.6; color:var(--papier-matt);
  margin:8px 0 16px; max-width:52ch; }
.eb-knopf{
  font-family:inherit; font-weight:900; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--rot); color:#131316; border:0;
  border-radius:100px; padding:12px 22px; cursor:pointer;
  transition:transform .25s var(--kurve), background .2s;
}
.eb-knopf:hover{ background:var(--papier); transform:translateY(-2px); }
.eb-link{ display:block; margin-top:12px; font-size:.82rem; color:var(--rot); }

.spotify iframe{ width:100%; height:352px; border:0; border-radius:12px; }

/* Videos */
.videos{ display:grid; gap:20px; }
@media(min-width:720px){ .videos{ grid-template-columns:1fr 1fr; } }
.video-kopf{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.video-titel{ font-weight:900; font-size:1.1rem; letter-spacing:-.03em;
  background:var(--rot); color:#131316; padding:.1em .34em .14em; }
.video-art{ font-size:.64rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--papier-matt); }
.video-rahmen{ position:relative; padding-top:56.25%; background:#000;
  border-radius:12px; overflow:hidden; }
.video-rahmen iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-link{ display:block; text-decoration:none; color:inherit; }
.video-link img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .5s var(--kurve), opacity .3s;
}
.video-link:hover img{ transform:scale(1.05); opacity:.7; }
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:var(--rot);
  display:grid; place-items:center; transition:transform .3s var(--kurve);
}
.video-play::after{
  content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #131316; margin-left:4px;
}
.video-link:hover .video-play{ transform:translate(-50%,-50%) scale(1.12); }
.video-link:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.video-hinweis{
  position:absolute; left:0; right:0; bottom:0; padding:20px 12px 9px;
  font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(transparent, rgba(10,10,12,.9));
}

.brief{
  font-weight:700; font-size:1.06rem; line-height:1.65; white-space:pre-line;
  background:var(--karte); border:1px solid var(--rand); border-radius:16px;
  border-left:5px solid var(--rot); padding:22px 24px;
}
.schloss{
  border:1px dashed var(--rand-hell); border-radius:16px; padding:26px 22px;
  text-align:center; font-weight:900; font-size:1rem; text-transform:uppercase;
}
.schloss span{ display:block; margin-top:8px; font-size:.84rem; font-weight:400;
  text-transform:none; color:var(--papier-matt); }

/* ================= QUIZ ================= */
.q-menue-kopf{ margin-bottom:28px; }
.q-runden{ display:grid; gap:8px; }
.q-runde{
  position:relative; display:flex; align-items:center; gap:14px; overflow:hidden;
  width:100%; text-align:left; color:inherit; font-family:inherit;
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  padding:15px 18px; cursor:pointer;
  transition:background .25s, border-color .25s, transform .3s var(--kurve);
}
.q-runde::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--rot); transition:width .3s var(--kurve);
}
.q-runde:hover{ background:var(--karte-hoch); border-color:var(--rand-hell); transform:translateX(5px); }
.q-runde:hover::before{ width:9px; }
.q-runde:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.q-runde--gross{ background:rgba(236,28,49,.13); border-color:var(--rot); }
.qr-mitte{ flex:1; min-width:0; }
.qr-name{ display:block; font-weight:900; font-size:1.15rem; line-height:1.15; letter-spacing:-.03em; }
.qr-meta{ display:block; margin-top:2px; font-size:.76rem; color:var(--papier-matt); }
.qr-best{ flex:0 0 auto; font-size:.66rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; background:var(--rot); color:#131316; padding:3px 7px; }

/* Fortschritt */
.q-kopf{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.q-zurueck{
  background:var(--karte-hoch); border:1px solid var(--rand); color:var(--papier-matt);
  border-radius:100px; padding:7px 14px; font-size:.68rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; font-family:inherit;
}
.q-zurueck:hover{ color:var(--papier); border-color:var(--rand-hell); }
.q-zaehler{ margin-left:auto; font-weight:900; font-size:.85rem; font-variant-numeric:tabular-nums; }
.q-balken{ height:4px; background:var(--karte-hoch); border-radius:4px; margin-bottom:30px; overflow:hidden; }
.q-balken i{ display:block; height:100%; background:var(--rot); width:0; transition:width .4s var(--kurve); }

.q-karte{ animation:seiteRein .38s var(--kurve); }
.q-kategorie{
  display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; background:var(--rot); color:#131316;
  padding:4px 9px; margin-bottom:14px;
}
.q-frage{
  font-weight:900; font-size:clamp(1.3rem,5.2vw,1.9rem);
  line-height:1.2; letter-spacing:-.035em; margin-bottom:24px;
}

/* Multiple Choice */
.q-optionen{ display:grid; gap:8px; }
.q-opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  font-family:inherit; font-weight:600; font-size:1rem; line-height:1.35;
  background:var(--karte); color:var(--papier);
  border:1px solid var(--rand); border-radius:14px;
  padding:15px 18px; cursor:pointer;
  transition:background .22s, border-color .22s, transform .25s var(--kurve);
}
.q-opt:hover:not(:disabled){ background:var(--karte-hoch); border-color:var(--rand-hell); transform:translateX(4px); }
.q-opt:focus-visible{ outline:2px solid var(--rot); outline-offset:3px; }
.q-opt:disabled{ cursor:default; }
.q-opt-buchstabe{
  flex:0 0 26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:var(--karte-hoch); font-size:.68rem; font-weight:800; color:var(--papier-matt);
}
.q-opt-text{ flex:1; }
.q-opt-zeichen{ flex:0 0 auto; font-size:1.05rem; font-weight:900; opacity:0; }

/* richtig = helle Markierung wie der hervorgehobene Track auf dem Cover */
.q-opt.ist-richtig{ background:var(--papier); color:#131316; border-color:var(--papier); font-weight:800; }
.q-opt.ist-richtig .q-opt-buchstabe{ background:#131316; color:var(--papier); }
.q-opt.ist-richtig .q-opt-zeichen{ opacity:1; }
/* falsch = rot und durchgestrichen */
.q-opt.ist-falsch{ background:var(--rot); color:#131316; border-color:var(--rot); font-weight:800; }
.q-opt.ist-falsch .q-opt-buchstabe{ background:rgba(0,0,0,.22); color:#131316; }
.q-opt.ist-falsch .q-opt-zeichen{ opacity:1; }
.q-opt.ist-falsch .q-opt-text{ text-decoration:line-through; text-decoration-thickness:2px; }
.q-opt.ist-blass{ opacity:.38; }

/* Sortieren */
.q-sort{ display:grid; gap:7px; }
.q-sort-zeile{
  display:flex; align-items:center; gap:12px;
  background:var(--karte); border:1px solid var(--rand); border-radius:13px;
  padding:10px 12px; transition:background .25s, border-color .25s;
}
.qs-pos{
  flex:0 0 28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:var(--karte-hoch); font-weight:900; font-size:.76rem; color:var(--papier-matt);
}
.qs-text{ flex:1; min-width:0; font-weight:700; font-size:.98rem; line-height:1.3; }
.qs-knoepfe{ display:flex; gap:5px; flex:0 0 auto; }
.qs-knopf{
  width:34px; height:34px; border-radius:9px;
  background:var(--karte-hoch); border:1px solid var(--rand);
  color:var(--papier); cursor:pointer; font-size:.82rem; font-weight:900; line-height:1;
}
.qs-knopf:hover:not(:disabled){ background:var(--rot); color:#131316; }
.qs-knopf:disabled{ opacity:.26; cursor:default; }
.q-sort-zeile.ist-richtig{ background:var(--papier); border-color:var(--papier); }
.q-sort-zeile.ist-richtig .qs-text{ color:#131316; font-weight:800; }
.q-sort-zeile.ist-richtig .qs-pos{ background:#131316; color:var(--papier); }
.q-sort-zeile.ist-falsch{ background:var(--rot); border-color:var(--rot); }
.q-sort-zeile.ist-falsch .qs-text{ color:#131316; font-weight:800; }
.q-sort-zeile.ist-falsch .qs-pos{ background:rgba(0,0,0,.22); color:#131316; }
.qs-soll{
  flex:0 0 auto; font-size:.66rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; color:#131316;
}

.q-pruefen, .q-weiter{
  margin-top:16px; width:100%; font-family:inherit; font-weight:900;
  font-size:1rem; letter-spacing:-.02em; text-transform:uppercase;
  border:0; border-radius:100px; padding:15px; cursor:pointer;
  transition:transform .25s var(--kurve), background .2s;
}
.q-pruefen{ background:var(--papier); color:#131316; }
.q-weiter{ background:var(--rot); color:#131316; }
.q-pruefen:hover, .q-weiter:hover{ transform:translateY(-2px); }

/* Rückmeldung */
.q-echo{
  margin-top:20px; border-radius:16px; padding:18px 20px;
  border:1px solid var(--rand); background:var(--karte);
  animation:seiteRein .35s var(--kurve);
}
.q-echo.richtig{ border-color:var(--papier); border-left:5px solid var(--papier); }
.q-echo.falsch{ border-color:var(--rot); border-left:5px solid var(--rot); }
.q-echo-kopf{ font-weight:900; font-size:1.05rem; letter-spacing:-.03em;
  text-transform:uppercase; margin-bottom:8px; }
.q-echo.falsch .q-echo-kopf{ color:var(--rot); }
.q-echo-loesung{ font-size:.98rem; margin-bottom:10px; }
.q-echo-loesung b{ background:var(--rot); color:#131316; padding:1px 6px; font-weight:800; }
.q-echo-info{ font-size:.9rem; color:var(--papier-matt); line-height:1.6; }

/* Ergebnis */
.q-ticket{
  position:relative; background:var(--karte); border:1px solid var(--rand-hell);
  border-radius:20px; padding:32px 24px; text-align:center; overflow:hidden;
  animation:seiteRein .5s var(--kurve);
}
.q-ticket::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--rot);
}
.qt-label{ font-size:.66rem; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rot); }
.qt-punkte{ font-weight:900; font-size:clamp(3.6rem,19vw,7rem); line-height:.86;
  letter-spacing:-.06em; margin:8px 0 2px; }
.qt-von{ font-size:.76rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--papier-matt); }
.qt-urteil{ font-weight:700; font-size:1.02rem; line-height:1.45;
  margin-top:20px; max-width:32ch; margin-inline:auto; }
.qt-fuss{
  margin-top:26px; padding-top:20px; border-top:2px dashed var(--rand-hell);
  font-size:.64rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--papier-matt);
}
.q-aktionen{ display:grid; gap:8px; margin-top:20px; }
.q-aktion{
  font-family:inherit; font-weight:900; font-size:.92rem;
  letter-spacing:-.01em; text-transform:uppercase;
  background:none; color:var(--papier); border:1px solid var(--rand-hell);
  border-radius:100px; padding:14px; cursor:pointer;
  transition:background .2s, transform .25s var(--kurve);
}
.q-aktion:hover{ background:var(--karte-hoch); transform:translateY(-2px); }
.q-aktion--voll{ background:var(--papier); color:#131316; border-color:var(--papier); }
.q-aktion--voll:hover{ background:var(--rot); border-color:var(--rot); }

.q-rueckblick{ margin-top:38px; }
.q-fehler{
  background:var(--karte); border:1px solid var(--rand); border-radius:14px;
  border-left:5px solid var(--rot); padding:16px 18px; margin-bottom:12px;
}
.q-fehler-frage{ font-weight:900; font-size:1rem; line-height:1.25;
  letter-spacing:-.025em; margin-bottom:8px; }
.q-fehler-deins{ font-size:.88rem; color:var(--papier-matt); }
.q-fehler-deins s{ color:var(--rot); text-decoration-thickness:2px; }
.q-fehler-richtig{ font-size:.92rem; margin-top:4px; }
.q-fehler-richtig b{ background:var(--papier); color:#131316; padding:1px 6px; font-weight:800; }
.q-fehler-info{ font-size:.85rem; color:var(--papier-matt); margin-top:8px; line-height:1.55; }

/* ================= FUSSZEILE UND INFOSEITE ================= */
#fuss{
  position:relative; z-index:1;
  max-width:var(--breite); margin:0 auto;
  padding:26px clamp(18px,5vw,36px) 40px;
  border-top:1px solid var(--rand);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
}
#fuss p{
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--papier-matt);
}
.fuss-link{
  margin-left:auto; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--papier-matt);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--rot); padding:0;
}
.fuss-link:hover{ color:var(--papier); }

.info-text{ max-width:62ch; }
.info-titel{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; background:var(--rot); color:#131316;
  padding:4px 9px; margin:26px 0 10px;
}
.info-titel:first-child{ margin-top:0; }
.info-text p{ font-size:.95rem; line-height:1.7; color:var(--papier-matt); margin-bottom:12px; }
.info-text code{
  font-family:ui-monospace,monospace; font-size:.85em;
  background:var(--karte-hoch); color:var(--papier); padding:2px 6px; border-radius:4px;
}
.info-text a{ color:var(--rot); }

/* ================= BARRIEREFREIHEIT ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #vorhang{ display:none; }
}