/* Scaio · Website. Farben und Schriften wie im Spielbericht (Palette „Mintband“, 28.09.):
   Graphit-Grund, Heim/wir = Blau, Gast/die = Rot, Mint = Marke / Handlung / "hier bist du".
   Die Kopfleiste ist voll Mint mit dunkler Schrift. */
:root{
  --ground:#0F1012; --ground-2:#0B0C0E; --panel:#17191C; --panel-2:#1F2226; --panel-3:#272A2F;
  --edge:#2A2E34; --edge-2:#3A3F47;
  --ink:#F2F3F5; --ink-2:#B3B8C0; --muted:#7A808A;
  --akzent:#5CF0A4; --akzent-2:#97F5C2; --akzent-tief:#26B87A; --akzent-tint:#102B1E;
  --amber:#FFB43F;
  --heim:#4D8DFF; --heim-weich:rgba(77,141,255,.16);
  --gast:#EF4444; --gast-weich:rgba(239,68,68,.16);
  --ok:var(--akzent); --danger:#FF7A6E; /* „ok/Sieg“ ist Mint: eine Akzentfarbe, keine zweite Grüntönung */
  /* Filmkorn statt Verlauf gegen flache Flächen (feTurbulence, graustufig) */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --logo-grund:var(--akzent); --logo-strich:#052415;
  --r:14px;
  --kopf:64px;
  --display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--kopf) + 16px)}
body{
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
main{flex:1; width:100%}  /* sonst macht margin:auto im Flex-Body main so breit wie breite Tabellen */
/* Korn über der ganzen Seite (overlay wirkt auf Graphit nicht, daher schwach normal überblendet) */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:300; background:var(--korn); opacity:.055}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.02em}
h1{font-size:clamp(30px,4.2vw,46px); font-weight:800; line-height:1.05; font-stretch:112%}
h2{font-size:clamp(24px,3vw,32px); font-weight:800; line-height:1.1; font-stretch:108%}
h3{font-size:17px; font-weight:700}
h4{font-size:13px; font-weight:700; letter-spacing:0}
p{margin:0; text-wrap:pretty}
a{color:inherit}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.leise{color:var(--muted)}
.grau{color:var(--ink-2)}
:focus-visible{outline:2px solid var(--akzent); outline-offset:2px; border-radius:6px}
[hidden]{display:none !important}
button{font:inherit; color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
@media (max-width:600px){ .wrap{padding:0 16px} }

/* ── Knöpfe ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  font-size:14px; font-weight:600; padding:9px 16px; border-radius:10px; cursor:pointer; text-decoration:none;
  border:1px solid var(--edge-2); background:var(--panel-2); color:var(--ink);
  transition:background .15s, border-color .15s, transform .15s;
}
.btn:hover:not(:disabled){background:var(--panel-3); border-color:var(--muted)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.pri{background:var(--akzent); border-color:var(--akzent); color:#052415}
.btn.pri:hover:not(:disabled){background:var(--akzent-2); border-color:var(--akzent-2)}
.btn.ghost{background:transparent; border-color:transparent}
.btn.ghost:hover{background:var(--panel-2); border-color:var(--edge)}
.btn.gross{font-size:16px; padding:13px 22px; border-radius:12px}
.btn.klein{font-size:13px; padding:5px 10px; border-radius:8px}
.btn.gefahr{color:#FFBDB5; border-color:rgba(255,122,110,.4)}

/* ── Kopf ───────────────────────────────────────────────── */
.seitenkopf{
  position:sticky; top:0; z-index:100; height:var(--kopf);
  background:var(--akzent); border-bottom:1px solid var(--akzent); color:var(--ink);
  --ink:#082513; --ink-2:rgba(8,37,19,.72); --muted:rgba(8,37,19,.55);
  --panel-2:rgba(8,37,19,.08); --panel-3:rgba(8,37,19,.14); --edge:rgba(8,37,19,.22); --edge-2:rgba(8,37,19,.32);
  --logo-grund:#082513; --logo-strich:var(--akzent);
}
.seitenkopf :focus-visible{outline-color:#082513}
.seitenkopf .btn.pri,.seitenkopf .avatar{background:#082513; border-color:#082513; color:var(--akzent)}
.seitenkopf .btn.pri:hover:not(:disabled){background:#103A24; border-color:#103A24}
.seitenkopf .vorschau{color:#082513; border-color:rgba(8,37,19,.35); background:rgba(8,37,19,.08)}
.kopfzeile{height:100%; display:flex; align-items:center; gap:28px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:19px; font-stretch:115%; letter-spacing:-.02em}
.logo svg{width:30px; height:30px; flex:none}
.hauptnav{display:flex; gap:4px}
.hauptnav a{padding:7px 12px; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:500; font-size:15px}
.hauptnav a:hover{color:var(--ink); background:var(--panel-2)}
.hauptnav a[aria-current="page"]{color:var(--ink); background:var(--panel-3)}
.kopfrechts{margin-left:auto; display:flex; align-items:center; gap:10px}
.avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; text-decoration:none;
  background:var(--heim); color:#051533; font-family:var(--display); font-weight:800; font-size:13px;
}
.vorschau{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(255,180,63,.35); background:rgba(255,180,63,.1); border-radius:999px; padding:3px 9px;
}
.menuknopf{display:none; margin-left:auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--edge); background:var(--panel-2); cursor:pointer; position:relative}
.menuknopf span,.menuknopf span::before,.menuknopf span::after{position:absolute; left:11px; width:18px; height:2px; background:var(--ink); border-radius:2px; content:""; transition:transform .2s}
.menuknopf span{top:19px}
.menuknopf span::before{left:0; top:-6px}
.menuknopf span::after{left:0; top:6px}
.menu-offen .menuknopf span{background:transparent}
.menu-offen .menuknopf span::before{transform:translateY(6px) rotate(45deg)}
.menu-offen .menuknopf span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .menuknopf{display:block}
  .hauptnav,.kopfrechts{display:none}
  .menu-offen .seitenkopf{height:auto}
  .menu-offen .kopfzeile{flex-wrap:wrap; min-height:var(--kopf); gap:8px 28px; padding-bottom:16px}
  .menu-offen .menuknopf{order:2}
  .menu-offen .hauptnav,.menu-offen .kopfrechts{display:flex; flex-direction:column; align-items:stretch; width:100%; order:3; margin:0}
  .menu-offen .hauptnav a{padding:12px; font-size:16px}
  .menu-offen .kopfrechts .btn{padding:12px}
  .menu-offen .avatar,.menu-offen .vorschau{display:none}
}

/* ── Fuß ────────────────────────────────────────────────── */
.seitenfuss{border-top:1px solid var(--edge); margin-top:96px; padding:48px 0 28px; background:var(--ground-2)}
.seitenfuss.klein{margin-top:64px; padding:20px 0; font-size:13px; color:var(--muted)}
.seitenfuss.klein .wrap{display:flex; gap:20px; flex-wrap:wrap}
.seitenfuss.klein a{text-decoration:none}
.seitenfuss.klein a:hover{color:var(--ink)}
.fussraster{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.fussraster p{color:var(--muted); font-size:14px; margin-top:14px; max-width:34ch}
.fussraster h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.fussraster a:not(.logo){display:block; text-decoration:none; color:var(--ink-2); padding:4px 0; font-size:14px}
.fussraster a:hover{color:var(--ink)}
.fusszeile{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:20px; border-top:1px solid var(--edge); font-size:13px; color:var(--muted)}
@media (max-width:760px){ .fussraster{grid-template-columns:1fr 1fr} .fussraster>div:first-child{grid-column:1/-1} }

/* ── Bausteine ──────────────────────────────────────────── */
.karte{background:var(--panel); border:1px solid var(--edge); border-radius:var(--r); padding:20px 22px}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--panel-3); color:var(--ink-2); border:1px solid var(--edge-2)}
.tag.s{background:var(--akzent-tint); color:var(--akzent-2); border-color:rgba(92,240,164,.35)}
.tag.n{background:rgba(255,122,110,.12); color:#FFBDB5; border-color:rgba(255,122,110,.32)}
.tag.u{background:rgba(255,180,63,.1); color:var(--amber); border-color:rgba(255,180,63,.3)}
.tag.or{background:var(--akzent-tint); color:var(--akzent-2); border-color:rgba(92,240,164,.4)}
.balken{height:8px; border-radius:999px; background:var(--panel-3); overflow:hidden}
.balken>i{display:block; height:100%; width:0; border-radius:inherit; background:var(--akzent); transition:width .4s ease}
.abschnitt{padding:88px 0 0}
.kopftext{max-width:680px; margin-bottom:36px}
.kopftext p{color:var(--ink-2); font-size:17px; margin-top:14px}
.kopftext .eyebrow{display:block; margin-bottom:12px; color:var(--akzent-2)}
.seitentitel{padding:56px 0 8px}
.seitentitel p{color:var(--ink-2); font-size:17px; margin-top:14px; max-width:640px}
.raster{display:grid; gap:18px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .r3,.r4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .r2,.r3,.r4{grid-template-columns:1fr} }
.haken{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.haken li{display:flex; gap:10px; align-items:flex-start}
.haken li::before{content:""; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%;
  background:var(--akzent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2397F5C2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  border:1px solid rgba(92,240,164,.4)}

/* ── Formulare ──────────────────────────────────────────── */
label.feld{display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2)}
label.feld small{font-weight:400; color:var(--muted)}
input,select,textarea{
  font:inherit; font-size:15px; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--edge-2); border-radius:10px; padding:10px 12px; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px rgba(92,240,164,.18)}
input[type=checkbox]{width:18px; height:18px; accent-color:var(--akzent); padding:0}
input[type=color]{padding:3px; height:42px; cursor:pointer}
textarea{min-height:120px; resize:vertical}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); cursor:pointer}
.check input{margin-top:2px; flex:none}
.seg{display:inline-flex; padding:3px; gap:3px; background:var(--panel-2); border:1px solid var(--edge); border-radius:11px}
.seg button{border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px; padding:7px 14px; font-size:14px; font-weight:600}
.seg button[aria-pressed="true"]{background:var(--panel-3); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.filter{display:flex; gap:6px; flex-wrap:wrap}
.filter button{border:1px solid var(--edge); background:var(--panel-2); color:var(--ink-2); cursor:pointer; padding:6px 13px; border-radius:999px; font-size:13px; font-weight:600}
.filter button:hover{background:var(--panel-3)}
.filter button[aria-pressed="true"]{background:var(--ink); color:#0F1012; border-color:var(--ink)}
.meldung{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:200;
  background:var(--ink); color:#0F1012; font-weight:600; padding:10px 16px; border-radius:10px; transition:.25s}
.meldung.an{opacity:1; transform:translate(-50%,0)}

/* ── Auswahl Verband → Verein → Mannschaft ──────────────── */
.teamwahl{display:grid; gap:12px}
.tw-liste{display:grid; gap:6px}
.tw-liste:empty{display:none}
.tw-liste button{display:flex; align-items:center; gap:12px; text-align:left; width:100%; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--edge); border-radius:10px; padding:9px 12px; color:var(--ink)}
.tw-liste button:hover{border-color:var(--akzent); background:var(--akzent-tint)}
.tw-liste button b{font-weight:600}
.tw-liste button span:not(.tw-wappen){color:var(--muted); font-size:13px; margin-left:auto; text-align:right}
.tw-titel,.tw-lade{font-size:13px; color:var(--muted); margin:4px 0 0}
.tw-wappen{width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center; overflow:hidden;
  background:var(--panel-3); font-family:var(--display); font-weight:800; font-size:11px; color:var(--ink-2)}
.tw-wappen img{width:100%; height:100%; object-fit:cover; background:#fff}
.tw-gewaehlt{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(92,240,164,.45); background:rgba(92,240,164,.08)}
.tw-gewaehlt b{display:block}
.tw-gewaehlt span:not(.tw-wappen){font-size:13px; color:var(--ink-2)}
.tw-gewaehlt .btn{margin-left:auto}
.tw-hinweis{font-size:13px; color:#FFBDB5; margin:0}
.tw-hinweis:empty{display:none}

/* ── Spielerfotos ───────────────────────────────────────── */
.foto{width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; background:var(--panel-3); vertical-align:middle}
.foto.ohne{display:inline-grid; place-items:center; font-family:var(--display); font-size:10px; font-weight:800; color:var(--ink-2)}
.mitfoto{display:flex; align-items:center; gap:9px; min-width:0}

/* ── Fragen (details) ───────────────────────────────────── */
.fragen{display:grid; gap:10px}
.fragen details{background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:0 20px}
.fragen summary{cursor:pointer; list-style:none; padding:17px 0; font-weight:600; display:flex; justify-content:space-between; gap:16px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+"; font-family:var(--mono); color:var(--akzent-2); font-size:18px; line-height:1; transition:transform .2s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{color:var(--ink-2); padding:0 0 18px; max-width:75ch}
:root{interpolate-size:allow-keywords}
.fragen details::details-content{block-size:0; overflow:clip; transition:block-size .3s ease, content-visibility .3s allow-discrete}
.fragen details[open]::details-content{block-size:auto}
.fragen details p+p{margin-top:-8px}

/* ── Spielfeld (wie im Spielbericht) ────────────────────── */
.spielfeld{width:100%; display:block; background:var(--panel-2); border-radius:10px; border:1px solid var(--edge)}
.spielfeld .linie{fill:none; stroke:var(--edge-2); stroke-width:.11}
.spielfeld .linie.stark{stroke:var(--muted)}
.spielfeld .flaeche{fill:rgba(255,255,255,.018)}

@media (prefers-reduced-motion:reduce){ .fragen details::details-content{transition:none} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* Schaufenster (scaio.de): Pilotphase-Band, Pilot-/Feedback-Fenster, Hinweis bei den Preisen */
.pilotband{background:var(--akzent-tint, rgba(92,240,164,.1)); border-bottom:1px solid rgba(92,240,164,.25); color:var(--ink-2); font-size:14px}
.pilotband .wrap{display:flex; gap:8px 18px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
.pilotband b{color:var(--ink)}
.pilotband a{color:var(--akzent-2); font-weight:600; white-space:nowrap}
.pilothinweis{margin:0 0 18px; padding:12px 16px; border-radius:12px; border:1px solid rgba(92,240,164,.3); background:rgba(92,240,164,.06); color:var(--ink-2); font-size:14px}
.pilothinweis b{color:var(--ink)}
dialog.fenster{width:min(540px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px;
  border:1px solid var(--edge-2); border-radius:var(--r); background:var(--panel); color:var(--ink)}
dialog.fenster::backdrop{background:rgba(5,6,8,.7)}
.fensterkopf{display:flex; justify-content:space-between; align-items:center; gap:12px}
.fensterkopf h2{margin:0; font-size:24px}
.fenstertext{margin:10px 0 18px; color:var(--ink-2); font-size:15px}
.fensterform{display:grid; gap:14px}
.fensterform input[type=file]{padding:8px; font-size:13px}
.fensterhinweis{margin:0; color:var(--muted); font-size:12px}
.fenstermeldung{margin:0; color:var(--amber); font-size:14px}
.fenstermeldung:empty{display:none}
.fensterdank{margin:8px 0 0; padding:16px; border-radius:12px; background:rgba(92,240,164,.08); color:var(--ink-2)}
.fensterdank b{color:var(--akzent-2)}
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:600px){ dialog.fenster{padding:18px} .fensterkopf h2{font-size:20px} .fensterform input,.fensterform textarea{font-size:16px} }  /* <16px: iPhone zoomt beim Antippen */