/* =========================================================
   TuS Kirchberg · Kleidungsbestellung
   Flutlicht-Kabine: dunkler Grund, Licht in den Wappenfarben,
   Rautenband aus dem Vereinswappen. Für Eltern- und Vereinsseite.
   ========================================================= */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --nacht:#080a12; --nacht2:#10131e; --glas:rgba(255,255,255,.055); --glas2:rgba(255,255,255,.09);
  --kante:rgba(255,255,255,.12); --kante2:rgba(255,255,255,.22);
  --text:#f4f5f8; --leise:#a9afbf; --leiser:#7d8497;
  --rot:#d90f30; --rot2:#8f0a22; --gold:#ffcc00; --gold2:#ffdf5e; --blau:#2467c9; --blau-tief:#0c3f8c;
  --gut:#3ddc97; --warn:#ffb648; --schlecht:#ff6b78;
  --r:20px; --r2:13px; --schatten:0 24px 60px rgba(0,0,0,.45);
  --schrift:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif;
  --raute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath fill='%23ffcc00' d='M22 0 44 22 22 44 0 22z'/%3E%3Cpath fill='%230c4fa8' d='M22 0H0v22zM44 0H22l22 22zM0 44h22L0 22zM44 44V22L22 44z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{font-family:var(--schrift);background:var(--nacht);color:var(--text);line-height:1.5;min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;overflow-x:clip;}
button,input,select,textarea{font:inherit;color:inherit;}
img{max-width:100%;display:block;}
a{color:var(--gold2);}
.versteckt{display:none !important;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---- Bühne: Flutlicht im Hintergrund ---- */
.buehne{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(70% 50% at 12% -8%,rgba(217,15,48,.42),transparent 70%),
  radial-gradient(60% 46% at 96% 8%,rgba(36,103,201,.34),transparent 72%),
  radial-gradient(90% 60% at 50% 118%,rgba(255,204,0,.09),transparent 70%),
  linear-gradient(180deg,#0b0e18 0%,var(--nacht) 58%);}
.buehne::before,.buehne::after{content:"";position:absolute;top:-30%;width:46vmax;height:150vmax;
  background:linear-gradient(180deg,rgba(255,240,190,.13),transparent 62%);filter:blur(26px);transform-origin:50% 0;}
.buehne::before{left:-6%;transform:rotate(-24deg);animation:licht 13s ease-in-out infinite alternate;}
.buehne::after{right:-8%;transform:rotate(25deg);animation:licht2 16s ease-in-out infinite alternate;}
@keyframes licht{to{transform:rotate(-17deg);opacity:.72;}}
@keyframes licht2{to{transform:rotate(19deg);opacity:.7;}}

/* ---- Kopf ---- */
.kopf{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(8,10,18,.9),rgba(8,10,18,.56));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07);}
.kopf-in{max-width:1120px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:12px;}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0;margin-inline-end:auto;}
.marke img{width:40px;height:44px;object-fit:contain;flex:none;}
.marke b{display:block;font-size:15px;font-weight:800;letter-spacing:.01em;line-height:1.15;white-space:nowrap;}
.marke span{display:block;font-size:11.5px;color:var(--leise);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sprachen{display:flex;gap:3px;flex:none;}
.sprachen button{width:40px;height:40px;border:0;border-radius:9px;background:transparent;display:grid;place-items:center;cursor:pointer;opacity:.58;transition:opacity .15s ease,background-color .15s ease;}
.sprachen button img{width:21px;height:15px;border-radius:2px;object-fit:cover;}
.sprachen button:hover{opacity:1;}
.sprachen button.aktiv{opacity:1;background:var(--glas2);box-shadow:inset 0 0 0 1px var(--kante2);}

/* ---- Rahmen ---- */
main{max-width:1120px;margin:0 auto;padding:18px 18px 132px;overflow-x:clip;overflow-y:visible;}
.schmal{max-width:760px;margin-inline:auto;}
.ansicht.neu{animation:ein .38s cubic-bezier(.2,.8,.2,1) both;}
@keyframes ein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.karte{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid var(--kante);border-radius:var(--r);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:22px;box-shadow:0 10px 34px rgba(0,0,0,.26);}
.karte+.karte{margin-top:16px;}
.rautenband{height:12px;background:var(--raute) 0 50%/12px 12px repeat-x;border-radius:2px;}

h1,h2,h3{margin:0;line-height:1.08;}
.gross{font-size:clamp(46px,9.5vw,92px);font-weight:900;font-stretch:78%;text-transform:uppercase;letter-spacing:-.012em;line-height:.93;}
.gross em{font-style:normal;color:var(--gold);display:block;}
html[lang=ar] .gross,html[lang=ru] .gross,html[lang=uk] .gross{font-size:clamp(38px,8vw,72px);line-height:1.08;letter-spacing:0;}
.titel{font-size:clamp(28px,5.4vw,40px);font-weight:900;font-stretch:82%;letter-spacing:-.005em;margin:6px 0 18px;}
.dach{font-size:15px;font-weight:650;color:var(--gold2);}
.leise{color:var(--leise);}
.klein{font-size:13.5px;}

/* ---- Startseite ---- */
.held{display:grid;grid-template-columns:1.06fr .94fr;gap:28px;align-items:center;min-height:min(72vh,620px);}
.held-text p{font-size:clamp(16.5px,2.3vw,19px);color:#d5d8e2;max-width:32em;margin:18px 0 24px;}
.held-bild{position:relative;display:grid;place-items:center;}
.held-bild::before{content:"";position:absolute;inset:6% 2%;background:radial-gradient(closest-side,rgba(255,204,0,.2),rgba(217,15,48,.13) 52%,transparent 75%);filter:blur(10px);}
.held-duo{position:relative;display:grid;grid-template-columns:1.25fr .9fr;align-items:end;width:100%;max-width:470px;}
.held-duo>div:nth-child(2){margin-inline-start:-16%;transform:translateY(5%);}
.held-duo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14);}
.frist{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.marke-pille{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--kante);border-radius:99px;background:var(--glas);font-size:13px;color:#dfe2ea;}
.marke-pille.heiss{border-color:rgba(255,204,0,.55);color:var(--gold2);}
.ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;}
.ablauf div{padding:16px;border-top:2px solid var(--gold);background:var(--glas);border-radius:0 0 14px 14px;}
.ablauf b{display:block;font-size:12px;color:var(--gold);font-weight:800;letter-spacing:.1em;margin-bottom:3px;}
.ablauf span{font-weight:700;font-size:15px;}
.meine{margin-top:20px;display:flex;flex-direction:column;gap:8px;}
.meine a{display:flex;justify-content:space-between;gap:10px;padding:13px 15px;border:1px solid var(--kante);border-radius:13px;background:var(--glas);text-decoration:none;color:var(--text);font-weight:650;}
.meine a span:last-child{color:var(--gold2);}

/* ---- Knöpfe ---- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;border:0;border-radius:14px;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#f0b800);color:#17130a;font-weight:800;font-size:16.5px;cursor:pointer;
  box-shadow:0 10px 28px rgba(255,204,0,.26),inset 0 1px 0 rgba(255,255,255,.65);transition:transform .12s ease-out,box-shadow .15s ease,opacity .15s ease;text-decoration:none;}
@media(hover:hover) and (pointer:fine){.knopf:hover{box-shadow:0 14px 34px rgba(255,204,0,.34),inset 0 1px 0 rgba(255,255,255,.65);}}
.knopf:active{transform:scale(.97);}
.knopf:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.knopf.zweit{background:var(--glas2);color:var(--text);box-shadow:inset 0 0 0 1px var(--kante2);font-weight:700;}
.knopf.klein{min-height:38px;padding:0 13px;font-size:13.5px;border-radius:10px;}
.knopf.breit{width:100%;}
.knopf.gefahr{background:rgba(255,107,120,.13);color:var(--schlecht);box-shadow:inset 0 0 0 1px rgba(255,107,120,.42);}
.knopf.paypal{background:linear-gradient(180deg,#ffd76a,#ffc439);color:#111;}
.text-knopf{background:none;border:0;color:var(--leise);text-decoration:underline;cursor:pointer;padding:6px;font-size:13.5px;}

/* ---- Schrittleiste ---- */
.schritte{display:flex;gap:6px;margin:6px 0 20px;}
.schritte div{flex:1;font-size:12px;font-weight:700;color:var(--leiser);}
.schritte div::before{content:"";display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.12);margin-bottom:6px;}
.schritte div.an{color:var(--text);}
.schritte div.an::before{background:linear-gradient(90deg,var(--rot),var(--gold));}

/* ---- Felder ---- */
.felder{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.feld{display:block;}
.feld.ganz{grid-column:1/-1;}
.feld>span{display:block;font-size:13px;font-weight:650;color:#dcdfe8;margin-bottom:6px;}
.feld input,.feld select,.feld textarea{width:100%;min-height:52px;padding:12px 14px;font-size:16px;background:rgba(5,7,13,.55);border:1.5px solid var(--kante);border-radius:12px;transition:border-color .14s ease,box-shadow .14s ease;}
.feld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;background-size:6px 6px;background-repeat:no-repeat;}
html[dir=rtl] .feld select{background-position:20px 23px,14px 23px;}
.feld option{background:#14161f;color:#fff;}
.feld textarea{min-height:92px;resize:vertical;}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,204,0,.17);}
.feld.falsch input,.feld.falsch select{border-color:var(--schlecht);}
.hp{position:absolute !important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0;}
.fehler{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,107,120,.12);border:1px solid rgba(255,107,120,.42);color:#ffc3c9;font-size:14.5px;}
.hinweis{padding:13px 15px;border-radius:13px;background:rgba(255,204,0,.08);border:1px solid rgba(255,204,0,.28);color:#f3e6b7;font-size:14px;white-space:pre-line;}

/* ---- Initialen-Plakette ---- */
.plakette-zeile{display:flex;align-items:center;gap:15px;margin-top:18px;padding:15px;border-radius:15px;background:rgba(0,0,0,.26);border:1px dashed var(--kante2);}
.plakette{flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;font-size:27px;font-weight:900;font-stretch:80%;color:#1b1605;
  background:radial-gradient(circle at 34% 28%,#ffe88a,var(--gold) 60%,#d59e00);box-shadow:0 8px 22px rgba(255,204,0,.26);}
.plakette.leer{background:rgba(255,255,255,.07);color:var(--leiser);box-shadow:none;}
.plakette-zeile b{display:block;font-size:14.5px;}
.plakette-zeile span{font-size:13px;color:var(--leise);}

/* ---- Artikel ---- */
.artikel{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:start;}
.artikel.aus .wahl{opacity:.42;}
.produkt{position:relative;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fff,#d6dae2 82%);}
.produkt img{width:100%;height:auto;}   /* Rahmen = Bild, damit die Initialen auf jeder Breite gleich sitzen */
.produkt svg{display:block;width:100%;aspect-ratio:1/1;}
.flock{position:absolute;transform:translate(-50%,-50%);z-index:1;font-weight:800;font-stretch:82%;font-size:clamp(10px,1.8vw,15px);letter-spacing:.03em;pointer-events:none;}
.muster{position:absolute;inset-inline-start:10px;bottom:10px;padding:3px 9px;border-radius:99px;font-size:11px;background:rgba(0,0,0,.55);color:#ddd;}
.bilder-leiste{display:flex;gap:6px;margin-top:8px;overflow-x:auto;}
.bilder-leiste button{flex:none;width:58px;height:58px;padding:0;border:1.5px solid var(--kante);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06);cursor:pointer;}
.bilder-leiste button.an{border-color:var(--gold);}
.bilder-leiste img{width:100%;height:100%;object-fit:cover;}
.artikel-kopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px;}
.artikel h3{font-size:22px;font-weight:800;font-stretch:88%;}
.preis{font-weight:800;font-size:18px;color:var(--gold2);white-space:nowrap;}
.schalter{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;font-weight:650;margin:10px 0 12px;}
.schalter input{appearance:none;width:44px;height:26px;border-radius:99px;background:rgba(255,255,255,.17);position:relative;margin:0;cursor:pointer;transition:background-color .16s ease;flex:none;}
.schalter input::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:inset-inline-start .16s ease-out;}
.schalter input:checked{background:var(--gold);}
.schalter input:checked::after{inset-inline-start:21px;background:#1a1405;}
.unter{font-size:13px;font-weight:650;color:#dcdfe8;margin:0 0 7px;}
.groessen{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px;}
.groessen button{min-height:50px;padding:5px 4px;border:1.5px solid var(--kante);border-radius:11px;background:rgba(5,7,13,.45);font-weight:750;font-size:15.5px;cursor:pointer;line-height:1.1;transition:background-color .12s ease,border-color .12s ease,transform .12s ease-out;}
.groessen button:active{transform:scale(.96);}
.groessen button small{display:block;font-size:10.5px;font-weight:600;color:var(--leise);margin-top:2px;}
.groessen button:hover{border-color:var(--kante2);}
.groessen button.an{background:var(--gold);border-color:var(--gold);color:#17130a;box-shadow:0 6px 16px rgba(255,204,0,.26);}
.groessen button.an small{color:#3e3208;}
.groessen button.gesperrt{opacity:.38;cursor:not-allowed;text-decoration:line-through;}
.menge{display:flex;align-items:center;gap:12px;margin-top:13px;font-size:14px;font-weight:650;}
.menge div{display:flex;align-items:center;border:1.5px solid var(--kante);border-radius:11px;overflow:hidden;}
.menge button{width:46px;height:44px;border:0;background:var(--glas);font-size:20px;cursor:pointer;}
.menge b{min-width:36px;text-align:center;font-size:16px;}
.mini{margin-top:12px;font-size:13px;color:var(--leise);}

/* ---- Prüfen und Bestellkarte ---- */
.posten{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09);}
.posten small{display:block;color:var(--leise);font-size:13px;}
.summe{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-weight:800;font-size:18px;}
.summe b{font-size:28px;font-stretch:84%;color:var(--gold2);}
.bestaetigen{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:13px;border-radius:12px;border:1.5px solid var(--kante);cursor:pointer;font-size:14.5px;}
.bestaetigen input{width:23px;height:23px;margin:0;accent-color:var(--gold);flex:none;}
.ticket{position:relative;padding:0;overflow:hidden;}
.ticket-kopf{padding:24px 22px 20px;background:linear-gradient(120deg,rgba(217,15,48,.55),rgba(143,10,34,.25) 60%,rgba(36,103,201,.2));display:flex;gap:16px;align-items:center;}
.ticket-kopf h2{font-size:clamp(24px,5vw,33px);font-weight:900;font-stretch:82%;}
.ticket-kopf p{margin:3px 0 0;color:#e8dfe1;font-size:14px;}
.ticket-rumpf{padding:6px 22px 22px;}
.status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:13px;font-weight:750;}
.status.offen{background:rgba(255,182,72,.15);color:var(--warn);}
.status.gut{background:rgba(61,220,151,.14);color:var(--gut);}
.status.neutral{background:var(--glas2);color:var(--leise);}
.status.schlecht{background:rgba(255,107,120,.14);color:var(--schlecht);}
.zweck{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.28);border:1px dashed var(--kante2);}
.zweck code{font-family:inherit;font-weight:800;font-size:17px;letter-spacing:.04em;word-break:break-all;}
.zweck-text{min-width:0;}
.zweck-text small{display:block;color:var(--leise);font-size:12px;}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.knopf-reihe .knopf{flex:1 1 170px;}

/* ---- Leiste unten ---- */
.leiste{position:fixed;inset-inline:0;bottom:0;z-index:45;background:linear-gradient(0deg,rgba(8,10,18,.97) 62%,rgba(8,10,18,0));padding:18px 18px calc(13px + env(safe-area-inset-bottom));}
.leiste-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;}
.leiste-summe{margin-inline-end:auto;min-width:0;font-size:12px;color:var(--leise);line-height:1.2;}
.leiste-summe b{display:block;font-size:21px;color:var(--text);font-weight:850;font-stretch:86%;}
.leiste .knopf{min-width:124px;}

/* ---- Fuß und Dialoge ---- */
.fuss{text-align:center;padding:0 16px 104px;margin-top:-92px;}
.dialog{position:fixed;inset:0;z-index:100;background:rgba(3,4,8,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:16px;}
.dialog.auf{display:flex;}
.dialog-box{width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:24px;border-radius:var(--r);background:#14171f;border:1px solid var(--kante2);box-shadow:var(--schatten);}
.dialog-box.weit{max-width:720px;}
.dialog-box h3{font-size:22px;font-weight:850;font-stretch:88%;margin-bottom:12px;}
.dialog-box p{font-size:14.5px;color:#d3d6df;}
.vorschau-band{background:repeating-linear-gradient(-45deg,#3b2f00,#3b2f00 12px,#2b2200 12px,#2b2200 24px);color:var(--gold2);text-align:center;font-size:13px;font-weight:700;padding:7px 12px;}
.lade{display:grid;place-items:center;min-height:50vh;color:var(--leise);}
.summe b,.leiste-summe b,.kennzahl b,.preis{font-variant-numeric:tabular-nums;}
h1,h2,h3{text-wrap:balance;}
p,.unterzeile{text-wrap:pretty;}
.produkt img,.held-duo img,.bild-kachel img{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;}
.toast{position:fixed;left:50%;bottom:102px;transform:translate(-50%,16px);z-index:120;padding:11px 18px;border-radius:12px;background:#fff;color:#111;font-weight:700;font-size:14px;opacity:0;transition:.22s;pointer-events:none;box-shadow:var(--schatten);max-width:88vw;text-align:center;}
.toast.an{opacity:1;transform:translate(-50%,0);}

/* =========================================================
   Intro: das Wappen, sonst nichts
   ========================================================= */
.vorhang{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--nacht);cursor:pointer;transition:opacity .24s ease-out;}
.vorhang.weg{opacity:0;}
.vorhang img{width:min(38vw,168px);height:auto;animation:wappenAuftritt .62s cubic-bezier(.16,1,.3,1) both;}
@keyframes wappenAuftritt{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:none;}}

.rauten-schnitt{height:18px;margin-inline:calc(-1*clamp(16px,4vw,56px));background:var(--raute) 0 50%/18px 18px repeat-x;}

/* =========================================================
   Inszenierung
   ========================================================= */

/* ---- Großer Auftritt ---- */
.held{min-height:min(78vh,680px);}
.knopf.riesig{min-height:66px;width:100%;max-width:380px;font-size:20px;font-weight:850;border-radius:17px;position:relative;overflow:hidden;}
.uhr{display:flex;gap:8px;margin-top:18px;}
.uhr div{min-width:66px;padding:9px 6px 7px;text-align:center;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--kante);}
.uhr b{display:block;font-size:27px;font-weight:850;font-stretch:80%;line-height:1;font-variant-numeric:tabular-nums;}
.uhr span{display:block;font-size:12px;color:var(--leise);margin-top:3px;}
.kegel{position:absolute;top:-22%;left:50%;width:128%;height:136%;transform:translateX(-50%);pointer-events:none;
  filter:blur(22px);}
.kegel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(255,244,205,.3) 16%,rgba(255,244,205,.03) 76%,transparent);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);}
.boden{position:absolute;bottom:-3%;left:8%;right:8%;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,204,0,.32),transparent);filter:blur(7px);}
.held-duo{transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .28s ease-out;}
.ebene1{transform:translateZ(36px);}
.held-rahmen{position:relative;}
.held-rahmen.foto{border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fff,#d6dae2 82%);}
.held-rahmen.foto .flock{font-size:clamp(9px,1.5vw,14px);}
.held-duo .held-rahmen.foto img:not(.wappen-auf){object-fit:contain;box-shadow:none;outline:0;border-radius:0;}
.wappen-auf{position:absolute;transform:translate(-50%,-50%);height:auto;z-index:1;box-shadow:none !important;outline:0 !important;border-radius:0 !important;}
.held-rahmen .flock{font-size:clamp(17px,3.4vw,30px);letter-spacing:.02em;text-shadow:none;}
.held-rahmen svg{display:block;width:100%;filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));}
.ini-hinweis{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--leise);}
.dabei{margin-top:34px;}
.dabei h2{font-size:clamp(25px,4.6vw,38px);font-weight:900;font-stretch:80%;text-transform:uppercase;}
.dabei-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:9px;margin-top:13px;}
.dabei-reihe div{position:relative;overflow:hidden;padding:12px 14px 15px;border-radius:13px;background:var(--glas);border:1px solid var(--kante);}
.dabei-reihe b{display:block;font-size:30px;font-weight:900;font-stretch:80%;line-height:1;color:var(--gold2);}
.dabei-reihe span{font-size:12.5px;color:var(--leise);}
.dabei-reihe i{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--rot),var(--gold));}
.plakette.poppt{animation:poppen .3s cubic-bezier(.2,1.6,.4,1);}
@keyframes poppen{from{transform:scale(.8)}}

/* ---- Spind ---- */
.kind-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start;}
.kind-spind{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .28s ease-out;}
.spind{position:relative;width:100%;max-width:290px;aspect-ratio:3/5.2;margin:0 auto;perspective:1100px;border-radius:9px;background:#0a0c13;border:7px solid #232735;box-shadow:0 30px 64px rgba(0,0,0,.6),inset 0 0 44px #000;}
.spind-innen{position:absolute;inset:0;display:grid;place-items:center;padding:9px;background:radial-gradient(70% 50% at 50% 0,rgba(255,226,140,.5),transparent 72%),#10131c;overflow:hidden;}
.spind-innen img,.spind-innen svg{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:6px;}
.spind-tuer{position:absolute;inset:0;transform-origin:0 50%;transition:transform 1s cubic-bezier(.55,.05,.2,1);
  background:linear-gradient(105deg,#b50c29,#df1436 45%,#8f0a22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 30px rgba(0,0,0,.34);display:flex;flex-direction:column;align-items:center;padding:17px 14px;gap:15px;}
.spind.auf .spind-tuer{transform:rotateY(-114deg);}
.lueftung{width:62%;height:42px;background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 4px,transparent 4px 10px);border-radius:3px;}
.schild{width:100%;padding:9px 8px;text-align:center;border-radius:5px;color:#16120a;background:linear-gradient(180deg,#fff0a8,var(--gold) 58%,#dca700);box-shadow:0 3px 9px rgba(0,0,0,.4);}
.schild small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.schild b{display:block;font-size:clamp(17px,2.6vw,23px);font-weight:900;font-stretch:80%;text-transform:uppercase;line-height:1.1;overflow-wrap:anywhere;}
.tuer-ini{margin-top:auto;font-size:clamp(50px,8vw,74px);font-weight:900;font-stretch:76%;color:rgba(255,255,255,.2);line-height:1;}
.griff{position:absolute;right:11px;top:52%;width:9px;height:60px;border-radius:5px;background:linear-gradient(90deg,#d8dbe3,#70747f);box-shadow:0 3px 6px rgba(0,0,0,.5);}

/* ---- Enthüllung ---- */
.enthuellung{position:fixed;inset:0;z-index:150;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:18px;background:rgba(5,6,11,.96);cursor:pointer;}
.enthuellung.auf{display:flex;animation:ein .3s ease both;}
.enth-licht{position:absolute;top:-10%;left:50%;width:150vmin;height:95vh;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,240,190,.3),transparent 78%);clip-path:polygon(44% 0,56% 0,92% 100%,8% 100%);filter:blur(18px);}
.enthuellung .spind{height:min(54vh,430px);width:auto;max-width:none;margin:0;flex:none;}
.enthuellung h2{position:relative;font-size:clamp(33px,8vw,62px);font-weight:900;font-stretch:78%;text-transform:uppercase;text-align:center;color:var(--gold);opacity:0;animation:ein .5s ease 1.2s forwards;}
.enthuellung .rautenband{position:relative;width:min(300px,70vw);opacity:0;animation:ein .5s ease 1.4s forwards;}
.regen{position:fixed;inset:0;z-index:160;pointer-events:none;}

@media(max-width:820px){
  .kind-raster{grid-template-columns:1fr;}
  .kind-spind{display:none;}
  .held{min-height:0;}
  .ini-hinweis{position:static;margin-top:13px;}
  .kegel{top:-14%;height:120%;}
  .uhr div{flex:1;min-width:0;}
  .knopf.riesig{max-width:none;}
}
@media(prefers-reduced-motion:reduce){
}

/* =========================================================
   Scroll-Geschichte der Startseite
   ========================================================= */
#stoff{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity .7s;}
body.story.mit-stoff #stoff{opacity:1;}
.schleier{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,18,.42),transparent 22%,transparent 54%,rgba(8,10,18,.9) 78%);}
body.story .kopf{position:fixed;left:12px;right:12px;top:10px;border-radius:18px;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 34px rgba(0,0,0,.34);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.story .kopf{background:#14171f;}}
body.story main{max-width:none;padding:0 clamp(16px,4vw,56px);}
body.story .fuss{margin-top:0;padding-bottom:88px;}
body.verein .fuss{margin-top:0;padding-bottom:28px;}
.kapitel{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1180px;margin:0 auto;}
.k1{justify-content:flex-end;padding-bottom:13svh;}
.mega{font-size:clamp(58px,15.5vw,190px);font-weight:900;font-stretch:72%;line-height:.86;text-transform:uppercase;letter-spacing:-.018em;margin:8px 0 0;}
html[lang=ar] .mega,html[lang=ru] .mega,html[lang=uk] .mega{font-size:clamp(46px,11.5vw,140px);line-height:1.04;letter-spacing:0;}
.zeile-k{display:block;overflow:hidden;padding:.05em 0;}
.zeile-k.gold{color:var(--gold);}
.zeile-k .z{display:inline-block;animation:zeichen .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*32ms + .15s);}
body.mit-intro .zeile-k .z{animation-delay:calc(var(--i)*30ms + .95s);}
@keyframes zeichen{from{transform:translateY(112%) rotate(7deg);}to{transform:none;}}
.unterzeile{font-size:clamp(17px,2.3vw,21px);color:#eceef4;max-width:30em;margin:18px 0 22px;}
.scroll-hinweis{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:14px;color:#dfe2ea;}
.gross-2{font-size:clamp(46px,10.5vw,128px);font-weight:900;font-stretch:74%;line-height:.92;text-transform:uppercase;letter-spacing:-.012em;}
html[lang=ar] .gross-2{line-height:1.15;letter-spacing:0;}
.gross-2 em{display:block;font-style:normal;color:var(--gold);}
.k2{justify-content:flex-end;padding-bottom:12svh;}
.demo{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;font-weight:700;font-size:16px;}
.demo input{width:124px;height:84px;text-align:center;font-size:44px;font-weight:900;font-stretch:76%;text-transform:uppercase;border-radius:20px;border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 40px rgba(0,0,0,.45);caret-color:var(--gold);}
.demo input::placeholder{color:rgba(255,255,255,.42);}
.demo input:focus{outline:0;border-color:var(--gold);}
.k3 .held-bild{margin-top:30px;order:0;}
.k3 .held-duo{max-width:640px;}
.k4{min-height:auto;padding:58px 0 40px;}
.k4 .uhr{margin-top:22px;}
.k4 .knopf.riesig{max-width:460px;}
.schwebe-cta{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,90px);padding:14px 30px;border:1px solid rgba(255,255,255,.55);border-radius:99px;font-weight:850;font-size:16px;color:#17130a;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 40px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.9,.2,1);}
body.weit-unten .schwebe-cta{transform:translate(-50%,0);}
@media(prefers-reduced-motion:reduce){
  .zeile-k .z{animation:none;}
  .vorhang{display:none;}
}

/* =========================================================
   Vereinsseite
   ========================================================= */
.verein main{padding-bottom:60px;}
.reiter{display:flex;gap:4px;overflow-x:auto;margin:6px 0 20px;padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.1);}
.reiter button{flex:none;padding:12px 15px;border:0;background:none;color:var(--leise);font-weight:700;font-size:15px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;}
.reiter button.an{color:var(--text);border-bottom-color:var(--gold);}
.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.kennzahl{padding:15px 16px;border-radius:15px;background:var(--glas);border:1px solid var(--kante);}
.kennzahl span{display:block;font-size:12.5px;color:var(--leise);font-weight:600;}
.kennzahl b{display:block;font-size:clamp(23px,4vw,31px);font-weight:850;font-stretch:84%;line-height:1.15;margin-top:2px;}
.kennzahl.gold b{color:var(--gold2);} .kennzahl.gut b{color:var(--gut);} .kennzahl.warn b{color:var(--warn);}
.balken{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px;}
.balken i{display:block;height:100%;background:linear-gradient(90deg,var(--rot),var(--gold));}
.werkzeug{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;}
.werkzeug .wachs{flex:1 1 auto;}
.suche{min-height:42px;min-width:190px;padding:0 13px;border-radius:11px;background:rgba(5,7,13,.5);border:1.5px solid var(--kante);font-size:14.5px;}
.auswahlfeld{min-height:42px;padding:0 10px;border-radius:11px;background:#14171f;border:1.5px solid var(--kante);font-size:14px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.chip{padding:7px 13px;border-radius:99px;border:1px solid var(--kante);background:var(--glas);font-size:13.5px;font-weight:650;color:#d5d8e1;cursor:pointer;}
.chip.an{background:var(--gold);color:#17130a;border-color:var(--gold);}
.chip small{opacity:.72;font-size:12px;margin-inline-start:3px;}
.box{border-radius:15px;overflow:hidden;margin-bottom:14px;background:rgba(255,255,255,.035);border:1px solid var(--kante);}
.box-kopf{display:flex;align-items:center;gap:10px;width:100%;padding:11px 15px;border:0;color:#fff;font-weight:800;font-size:15px;cursor:pointer;text-align:start;}
.box-kopf .n{margin-inline-start:auto;font-size:13px;padding:2px 11px;border-radius:99px;background:rgba(0,0,0,.24);}
.box.zu .zeilen{display:none;}
.zeilen{padding:8px;display:flex;flex-direction:column;gap:7px;}
.zeile{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);}
.zeile.fehlt{background:none;border-style:dashed;}
.ini{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,204,0,.15);color:var(--gold2);font-weight:850;font-size:15px;}
.ini.leer{background:rgba(255,255,255,.06);color:var(--leiser);}
.zeile .nm{font-weight:750;font-size:15.5px;}
.zeile .nm small{color:var(--leiser);font-weight:500;margin-inline-start:5px;}
.zeile .was{font-size:13px;color:var(--leise);}
.zeile .rechts{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.zeile .betrag{font-weight:800;}
.zeile .akt{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.leer-text{text-align:center;color:var(--leise);padding:34px 12px;}
.groessen-tafel{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.gr-kachel{padding:13px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--kante);}
.gr-kachel h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 9px;font-size:20px;font-weight:850;font-stretch:86%;}
.gr-kachel h4 small{font-size:13px;color:var(--gold2);font-weight:700;}
.ini-liste{display:flex;flex-wrap:wrap;gap:5px;}
.ini-liste span{padding:3px 8px;border-radius:7px;background:rgba(255,204,0,.13);color:var(--gold2);font-weight:750;font-size:14px;}
.tabelle{width:100%;border-collapse:collapse;font-size:15px;}
.tabelle th{font-size:12.5px;color:var(--leise);text-align:start;font-weight:650;padding:7px 8px;border-bottom:1px solid var(--kante2);}
.tabelle td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.07);}
.tabelle tfoot td{font-weight:800;border-bottom:0;}
.tabelle input{width:78px;min-height:40px;padding:0 8px;text-align:center;background:rgba(5,7,13,.5);border:1.5px solid var(--kante);border-radius:9px;}
.ok{color:var(--gut);font-weight:750;} .nein{color:var(--warn);font-weight:750;}
.pruefung{display:grid;gap:7px;margin:12px 0 16px;}
.pruefung div{display:flex;gap:10px;align-items:center;font-size:14.5px;}
.pruefung i{flex:none;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:13px;font-weight:800;background:rgba(255,182,72,.16);color:var(--warn);}
.pruefung .ja i{background:rgba(61,220,151,.16);color:var(--gut);}
.artikel-edit{padding:16px;border:1px solid var(--kante);border-radius:15px;margin-top:12px;background:rgba(0,0,0,.14);}
.bild-reihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.bild-kachel{position:relative;width:86px;height:86px;border-radius:11px;overflow:hidden;border:1px solid var(--kante);}
.bild-kachel img{width:100%;height:100%;object-fit:cover;}
.bild-kachel button{position:absolute;inset-inline-end:3px;top:3px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;cursor:pointer;line-height:1;}
.bild-hoch{display:grid;place-items:center;width:86px;height:86px;border-radius:11px;border:1.5px dashed var(--kante2);font-size:12px;color:var(--leise);text-align:center;cursor:pointer;padding:4px;}
.flock-feld{position:relative;max-width:300px;margin-top:9px;border-radius:12px;overflow:hidden;cursor:crosshair;background:rgba(255,255,255,.06);}
.flock-feld img{width:100%;}
.anmeldung{max-width:420px;margin:7vh auto 0;}
.anmeldung img{width:82px;margin:0 auto 12px;}
#druck{display:none;}

/* ---- Antworten auf Breite ---- */
@media(max-width:820px){
  .held{grid-template-columns:1fr;min-height:0;gap:10px;}
  .held-bild{order:-1;}
  .held-duo{max-width:320px;}
  .artikel{grid-template-columns:1fr;gap:14px;}
  .kennzahlen{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  main{padding-inline:14px;}
  .kopf-in{padding-inline:14px;flex-wrap:wrap;gap:6px 10px;}
  .marke{flex:1 1 100%;}
  .sprachen{width:100%;justify-content:space-between;}
  .felder{grid-template-columns:1fr;}
  .ablauf{grid-template-columns:1fr;}
  .ablauf div{display:flex;gap:10px;align-items:center;border-top:0;border-inline-start:2px solid var(--gold);border-radius:0 12px 12px 0;padding:11px 14px;}
  .ablauf b{margin:0;}
  .karte{padding:18px 15px;}
  .zeile{grid-template-columns:44px minmax(0,1fr) auto;}
  .suche{flex:1 1 100%;}
}
@media(prefers-reduced-motion:reduce){
  .buehne::before,.buehne::after,.ansicht.neu{animation:none;}
}

/* ---- Druck: Beflockung, Lieferung, Ausgabe ---- */
@media print{
  @page{size:A4;margin:14mm;}
  body{background:#fff;color:#000;}
  body>*:not(#druck){display:none !important;}
  #druck{display:block;font-family:Arial,Helvetica,sans-serif;font-size:11pt;}
  #druck header{display:flex;justify-content:space-between;align-items:center;border-bottom:2pt solid #000;padding-bottom:6pt;margin-bottom:10pt;}
  #druck header img{width:42pt;}
  #druck h1{font-size:17pt;margin:0;}
  #druck h2{font-size:13pt;margin:12pt 0 5pt;page-break-after:avoid;}
  #druck table{width:100%;border-collapse:collapse;}
  #druck th,#druck td{border:.6pt solid #666;padding:3.5pt 5pt;text-align:start;vertical-align:top;}
  #druck tr{page-break-inside:avoid;}
  #druck .fest{width:14mm;}
}