/* ---------- editor tokens ---------- */
:root{
  --bg:#EEF0F3; --panel:#FFFFFF; --panel-2:#F6F7F9; --ink:#1B2029; --ink-2:#5B6474; --ink-3:#8A93A3;
  --line:#D9DEE6; --line-2:#C6CDD8; --accent:#D2232A; --accent-ink:#FFFFFF; --accent-soft:#FBE9EA;
  --field:#FFFFFF; --focus:#3A424F; --ok:#1F8A4C; --radius:10px; --shadow:0 1px 2px rgba(27,32,41,.06),0 8px 24px rgba(27,32,41,.08);
  --stage:#D5DAE2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141820; --panel:#1C2230; --panel-2:#171C26; --ink:#EEF1F5; --ink-2:#A1AAB8; --ink-3:#6F7A8B;
    --line:#2A3241; --line-2:#3A4454; --accent:#E5343B; --accent-ink:#FFFFFF; --accent-soft:#3A2225;
    --field:#141820; --focus:#C9D1DE; --ok:#3FB36E; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --stage:#0F1319;
  }
}
:root[data-theme="dark"]{
  --bg:#141820; --panel:#1C2230; --panel-2:#171C26; --ink:#EEF1F5; --ink-2:#A1AAB8; --ink-3:#6F7A8B;
  --line:#2A3241; --line-2:#3A4454; --accent:#E5343B; --accent-ink:#FFFFFF; --accent-soft:#3A2225;
  --field:#141820; --focus:#C9D1DE; --ok:#3FB36E; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --stage:#0F1319;
}
/* ---------- fonts (inlined) ---------- */
/* @font-face lives in fonts.css */

html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Barlow,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- app layout ---------- */
.app{display:grid;grid-template-columns:440px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;min-height:100%}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .mark{width:30px;height:36px;flex:none}
.topbar .actions{display:flex;gap:10px;align-items:center}
/* Der Vorschau-Schalter ist eine Handy-Sache – am Schreibtisch steht die Vorschau ohnehin. */
#btnPreview{display:none}
#btnPreview .chev{font-size:13px;line-height:1}
#btnPreview[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.brand h1{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:.04em;margin:0;line-height:1}
.brand small{display:block;font-size:12px;color:var(--ink-2);letter-spacing:.02em;font-family:Barlow,sans-serif}
.panel{overflow:auto;background:var(--panel);border-right:1px solid var(--line);padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.stagewrap{overflow:auto;background:var(--stage);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.stagebox{position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35);flex:none}
.stage{transform-origin:top left}
/* ---------- Handy und Tablet ----------
   Eine einzige, natuerliche Seitenscrollung: die Vorschau steht oben im Fluss und
   scrollt weg, sobald getippt wird – danach gehoert der ganze Schirm dem Formular.
   Kein verschachtelter Scroller mehr; die Adressleiste des Browsers darf sich
   dabei wegschieben und gibt nochmals Hoehe her. */
@media (max-width:900px){
  html,body{height:auto;min-height:100%}
  /* Spalte statt Raster – order() hebt die Vorschau ueber die Bedienung, die im
     Markup darunter steht. Beide behalten ihre natuerliche Hoehe, das Dokument scrollt. */
  .app{display:flex;flex-direction:column;height:auto;min-height:100%}

  /* Kopfleiste klebt oben: Vorlage wechseln und Vollbild bleiben immer erreichbar. */
  .topbar{position:sticky;top:0;z-index:35;gap:8px 10px;padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .stagewrap{order:1;flex:none;height:52vh;height:52dvh;min-height:240px;padding:10px 12px;
    align-items:center;overflow:hidden}
  .panel{order:2;flex:none;overflow:visible;border-right:0;border-top:1px solid var(--line);
    padding:12px 12px calc(84px + env(safe-area-inset-bottom,0px))}

  /* Vollbild auf Abruf: die Vorschau legt sich ueber alles, die Kopfleiste bleibt als
     Rueckweg stehen. Hier ist der Post gross genug, um den Foto-Ausschnitt zu ziehen. */
  #btnPreview{display:inline-flex}
  body.preview-full{overflow:hidden}
  body.preview-full .stagewrap{position:fixed;inset:0;z-index:40;height:auto;min-height:0;
    padding:calc(var(--topbar-h,96px) + 12px) 12px calc(84px + env(safe-area-inset-bottom,0px))}
  body.preview-full .topbar{position:fixed;left:0;right:0;top:0}
  body.preview-full .topbar,body.preview-full .topbar .actions{z-index:45}

  .brand .mark{width:22px;height:26px}
  .brand h1{font-size:19px}
  .brand small{display:none}
  #fmtSeg{flex:1 1 100%;order:3}
  #fmtSeg button{padding:9px 6px;font-size:13px}

  /* Export als feste Leiste unten – dort greift der Daumen hin. */
  .topbar .actions{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.10)}
  .topbar .actions .btn{flex:1 1 0;justify-content:center;padding:13px 10px}
  .topbar .actions .btn.primary{flex:1.4 1 0}

  /* Vorlagen-Umschalter scrollt seitlich statt umzubrechen */
  #tplSeg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #tplSeg::-webkit-scrollbar{display:none}
  #tplSeg button{flex:0 0 auto}

  details.sec>summary{padding:14px}
  .minimap{max-width:none}
}

/* Schmale Telefone: alles einspaltig, Eingaben gross genug zum Tippen */
@media (max-width:560px){
  /* Die Kopfleiste klebt oben und kostet darum dauerhaft Platz: ohne den Schriftzug
     passen Verwalten und Vorschau in die Zeile der Marke, das spart eine ganze Reihe.
     Das rote Thuner Wappen bleibt als Erkennung stehen, der Name steht im Tab. */
  .brand h1{display:none}
  .grid2,.grid3{grid-template-columns:1fr}
  .sprow{grid-template-columns:auto 44px minmax(0,1fr)}
  .sprow .thumb{width:44px;height:30px}
  .modal .mbody{padding:12px}
  .modal.setup .mbody{padding:14px 14px 18px;gap:22px}
  .modal.setup .grp+.grp{padding-top:22px}
}

/* Finger statt Maus: groessere Trefferflaechen */
@media (pointer:coarse){
  .btn{padding:11px 15px}
  .btn.small{padding:9px 12px;font-size:13px}
  .seg button{padding:11px 12px}
  .check input{width:20px;height:20px}
  input[type=range]{height:28px}
  .field input[type=text],.field input[type=number],.field select,.field textarea{padding:11px 10px;font-size:16px}
}

/* ---------- controls ---------- */
.seg{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:4px;flex-wrap:wrap}
.seg button{flex:1 1 auto;border:0;background:transparent;border-radius:7px;padding:8px 10px;cursor:pointer;color:var(--ink-2);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.btn{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--radius);padding:9px 14px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px;line-height:1.1}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(.95)}
.btn.small{padding:6px 10px;font-size:13px}
.btn.icon{padding:6px 8px;min-width:32px;justify-content:center}
.btn[disabled]{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field input[type=text],.field input[type=number],.field select,.field textarea{width:100%;border:1px solid var(--line-2);background:var(--field);border-radius:8px;padding:9px 10px;min-width:0}
.field textarea{min-height:76px;resize:vertical}
.field input[type=range]{width:100%;accent-color:var(--accent)}
.field.off{opacity:.45}
.field.off input[type=range]{cursor:not-allowed}
/* Auswahlfelder tragen den System-Pfeil nicht mit – der eigene steht als
   Hintergrundbild rechts und folgt der Farbwelt (Farbe muss im Bild stecken). */
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235B6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px 8px}
.field select:hover{border-color:var(--ink-3)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A1AAB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A1AAB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rangeval{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12px;margin-left:auto;font-weight:500}
.field .lblrow{display:flex;align-items:center;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.stack{display:flex;flex-direction:column;gap:12px}
.rowflex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}
.check input{accent-color:var(--accent);width:16px;height:16px}
details.sec{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-top:12px}
details.sec>summary{cursor:pointer;padding:12px 14px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px;list-style:none}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
details.sec[open]>summary::before{transform:rotate(45deg)}
details.sec>.body{padding:4px 14px 14px;border-top:1px solid var(--line)}
.hint{font-size:13px;color:var(--ink-2);margin:0}
.list{display:flex;flex-direction:column;gap:8px}
.gamerow{display:grid;gap:6px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.gamerow .field label{font-size:11px}
/* In den Spielzeilen ist wenig Platz – der Pfeil rueckt naeher an den Rand. */
.gamerow select{padding-right:24px;background-position:right 7px center;background-size:10px 7px}
.gamerow.g-sched{grid-template-columns:1fr 1fr 1.6fr auto}
.gamerow.g-sched>*:nth-child(3){grid-column:3/-1}
.gamerow.g-sched>*:nth-child(4){grid-column:1/3}
.gamerow.g-sched>*:nth-child(5){grid-column:3}
/* Resultatzeile wie die Spielplanzeile zweizeilig – sechs Spalten nebeneinander
   schneiden im 440er-Panel jeden Namen mitten im Wort ab. */
.gamerow.g-res{grid-template-columns:1fr 1fr 1.3fr auto}
.gamerow.g-sea{grid-template-columns:1fr 1fr 1.6fr auto}
.gamerow.g-sea>*:nth-child(3){grid-column:3/-1}
.gamerow.g-sea>*:nth-child(4){grid-column:1/3}
.gamerow.g-sea>*:nth-child(5){grid-column:3;align-self:end;padding-bottom:9px;font-size:13px}
.gamerow.g-res>*:nth-child(1){grid-column:1/3}
.gamerow.g-res>*:nth-child(2){grid-column:3/-1}
/* Entfernen: kein Kasten, nur ein leises Kreuz – erst beim Draufzeigen rot. */
.gamerow .del{align-self:end;width:38px;min-width:38px;height:38px;padding:0;border:0;background:transparent;
  color:var(--ink-3);font-size:20px;line-height:1;border-radius:9px;transition:background .15s,color .15s}
.gamerow .del:hover{background:var(--accent-soft);color:var(--accent);border:0}
.sprow{display:grid;grid-template-columns:auto 56px minmax(0,1fr);gap:8px 10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.sprow .thumb{width:56px;height:36px;object-fit:contain;background:#fff;border-radius:4px;display:block;padding:3px}
.sprow .thumb.txt{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#3a424f;text-align:center;line-height:1.05;padding:2px}
.sprow .name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprow .check{font-size:13px;white-space:nowrap}
.sprow .ctl{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.sprow .ctl .btn{font-size:12px;padding:5px 9px}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.minimap{width:100%;aspect-ratio:1;max-width:260px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;cursor:crosshair;display:block}
.minimap path{fill:#8A93A3;stroke:#5B6474;stroke-width:3}
.minimap circle{fill:var(--accent);stroke:#fff;stroke-width:6}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90vw}
.toast.show{opacity:1}
dialog.modal{border:0;border-radius:14px;padding:0;background:var(--panel);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.5);max-width:min(96vw,980px);width:100%}
@media (max-width:640px){
  dialog.modal{max-width:100vw;width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0}
  .modal .mbody{max-height:none;flex:1 1 auto;align-items:center}
  .modal .result img{max-height:58vh;max-height:58dvh}
  .modal .mfoot{flex-direction:column;align-items:stretch;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
dialog.modal::backdrop{background:rgba(10,12,16,.7)}
.modal .mhead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .mhead h2{margin:0;font-size:18px;margin-right:auto}
.modal .mbody{padding:16px 18px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-height:70vh;overflow:auto}
.modal .result{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:100%}
.modal .result img{max-height:52vh;max-width:100%;box-shadow:0 10px 30px rgba(0,0,0,.35);display:block}
.modal .result .fn{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.modal .mfoot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.modal .mfoot .hint{margin-right:auto}
dialog.modal.setup{max-width:min(96vw,620px)}
/* Verwalten: kein Akkordeon – die drei Bereiche stehen offen untereinander,
   getrennt nur durch Abstand und eine Haarlinie. */
.modal.setup .mbody{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:28px;text-align:left;padding:20px 20px 22px}
.modal.setup .grp{display:flex;flex-direction:column;gap:14px}
.modal.setup .grp+.grp{border-top:1px solid var(--line);padding-top:28px}
.modal.setup .grp>h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:640px){dialog.modal.setup{max-width:100vw;width:100vw;height:100vh;height:100dvh;max-height:100dvh;border-radius:0}}
.busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(27,32,41,.55);color:#fff;font-weight:700;letter-spacing:.06em;font-size:14px}
.busy.on{display:flex}

/* ---------- post canvas (feste Bildwelt) ----------
   Alle Farben laufen ueber Tokens, damit die drei Themes nur diese neu setzen.
   Das Layout selbst ist in jedem Theme identisch. */
.post{position:relative;width:1080px;height:1350px;overflow:hidden;font-family:Barlow,"Helvetica Neue",Arial,sans-serif;
  /* Theme: Anthrazit (Standard) */
  --ground:#1B2029; --ground-rgb:27,32,41;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.70); --ink-4:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.20); --veil:rgba(255,255,255,.12); --flag-edge:rgba(255,255,255,.30);
  --accent:#D2232A; --accent-ink:#FFFFFF; --hl:#F4C21B; --hl-ink:#1B2029;
  --band:rgba(255,255,255,.90); --band-glow:none; --shade:rgba(0,0,0,.35); --shade-2:rgba(0,0,0,.45);
  --dim-rgb:8,14,30; --dim:.30; --grad-mid:.56; --grad:.94;
  --empty:linear-gradient(160deg,#4A5364 0%,#3A424F 45%,#1B2029 100%); --empty-o:.14;
  /* Geometrie */
  --px:50%;--py:50%;--pz:1;
  --band-w:130px;--band-x:300px;--band-y:-465px;--star-x:-155px;--star-s:160px;
  --safe-t:0px;--safe-b:0px;--sp-h:76px;--map-s:720px;--map-x:-40px;--map-y:130px;--map-o:.3;--pad-x:64px;
  background:var(--ground);color:var(--ink)}

/* Theme: Hell – Eisgrund, dunkle Schrift, roter Schraegbalken (wie im Wappen) */
.post.t-light{
  --ground:#EDF1F5; --ground-rgb:237,241,245;
  --ink:#1B2029; --ink-2:rgba(27,32,41,.80); --ink-3:rgba(27,32,41,.62); --ink-4:rgba(27,32,41,.42);
  --line:rgba(27,32,41,.16); --veil:rgba(27,32,41,.08); --flag-edge:rgba(27,32,41,.22);
  --hl:#B07E00; --hl-ink:#FFFFFF;
  --band:rgba(255,255,255,.80); --band-glow:0 0 60px 6px rgba(210,35,42,.38); --shade:rgba(27,32,41,.14); --shade-2:rgba(27,32,41,.18);
  --dim-rgb:255,255,255; --dim:.30; --grad-mid:.66; --grad:.97;
  --empty:linear-gradient(160deg,#FFFFFF 0%,#E7EDF3 45%,#D7E0E9 100%); --empty-o:.20}

/* Theme: Rot – Clubfarbe als Grund */
.post.t-red{
  --ground:#A81A20; --ground-rgb:168,26,32;
  --accent:#1B2029; --accent-ink:#FFFFFF;
  --veil:rgba(255,255,255,.16); --flag-edge:rgba(255,255,255,.80); --band-glow:0 0 60px 6px rgba(60,6,9,.30);
  --shade:rgba(60,6,9,.35); --shade-2:rgba(60,6,9,.45);
  --dim-rgb:150,16,22; --dim:.40; --grad-mid:.62; --grad:.97;
  --empty:linear-gradient(160deg,#C4262D 0%,#A81A20 45%,#7E1216 100%); --empty-o:.16}

/* Quadrat: dichter, kleinere Schriftgrade, damit der Inhalt nicht an den Rand stoesst. */
.post.f-square{height:1080px;--sp-k:.82}
.post.f-square .main{gap:16px;padding-top:40px;padding-bottom:30px}
.post.f-square .sp{padding:16px 22px;gap:12px 12px}
/* Story: Sponsorenleiste sitzt am unteren Bildrand, ihre Logos bleiben aber oberhalb
   der Instagram-Bedienleiste. Ohne Leiste gilt wieder die normale Schutzzone. */
.post.f-story{height:1920px;--safe-t:210px;--safe-b:0px;--pad-x:72px}
.post.f-story.sp-off{--safe-b:250px}
.post.f-story .main{gap:28px;padding-bottom:56px}

/* Foto laesst sich direkt in der Vorschau verschieben. */
.post.has-photo{cursor:grab;touch-action:none}
.post.has-photo.dragging{cursor:grabbing}
.post .layer{position:absolute;inset:0}
/* Das Foto geht nur bis zur Sponsorenleiste, nicht bis zum Blattrand: darunter liegt
   ohnehin die weisse (oder anthrazite) Leiste. --sp-y ist ihre gemessene Hoehe und steht
   auf 0, wenn sie aus ist oder ohne Hintergrund laeuft – dann fuellt das Bild wieder alles. */
.post .ph,.post .ph-empty,.post .tint,.post .dim,.post .grad{bottom:var(--sp-y,0px)}
.post .ph{background-size:cover;background-position:var(--px) var(--py);background-repeat:no-repeat;transform:scale(var(--pz));transform-origin:var(--px) var(--py);filter:grayscale(var(--gray,0))}
/* Schleier direkt ueber dem Foto – Balken, Karte und Schrift bleiben unberuehrt. */
.post .tint{background:var(--tint,transparent)}
.post .ph-empty{background:var(--empty)}
.post .bandwrap{overflow:hidden}
.post .band{position:absolute;left:50%;top:50%;width:4200px;height:var(--band-w);margin-left:-2100px;margin-top:calc(var(--band-w) / -2);background:var(--band);box-shadow:var(--band-glow);transform:translate(var(--band-x),var(--band-y)) rotate(45deg)}
.post .band .star{position:absolute;left:calc(50% + var(--star-x));top:50%;width:var(--star-s);height:var(--star-s);transform:translate(-50%,-50%) rotate(-45deg)}
/* Abdunkeln gilt nur dem Foto – ohne Foto wuerde es nur den Verlauf stumpf machen.
   Der Schleier traegt die Farbe der Farbwelt (blauschwarz / weiss / rot): sonst sieht das
   obere Drittel in allen drei Welten gleich aus, und die Vorschau unterscheidet sie nicht. */
.post .dim{background:transparent}
.post.has-photo .dim{background:rgba(var(--dim-rgb),var(--dim))}
/* Die beiden Stopps setzt fitGrad() aus der Hoehe des Inhalts – je mehr Zeilen, desto
   frueher faengt das Abdunkeln an. Die Werte hier sind nur der Rueckfall. */
.post .grad{background:linear-gradient(180deg,rgba(var(--ground-rgb),0) var(--g0,28%),rgba(var(--ground-rgb),var(--grad-mid,.5)) var(--g1,58%),rgba(var(--ground-rgb),var(--grad)) 100%)}
/* Geisterschrift: der Teamname kachelt den Grund, alle Zuege nur als Kontur, einer
   ausgefuellt. Als SVG mit Attributen, weil der Export CSS-Farben auf SVG verliert. */
.post .ghost{pointer-events:none}
.post .ghost svg{display:block;width:100%;height:100%}
.post .mapwrap{pointer-events:none}
.post .map{position:absolute;right:var(--map-x);top:var(--map-y);width:var(--map-s);height:var(--map-s)}
.post .ct{position:absolute;left:0;right:0;top:var(--safe-t);bottom:var(--safe-b);display:flex;flex-direction:column}
/* Das obere Polster gehoert dem Inhalt. Frueher stand hier eine leere Kopfzeile, die es
   trug – sie ist seit dem Entscheid «kein Handle im Bild» ohne Aufgabe gewesen. Weil
   .main mit margin-top:auto nach unten gedrueckt wird, wirkt das Polster nur dort, wo es
   soll: bei langen Listen als Sicherheitsabstand nach oben. */
.post .main{margin-top:auto;padding:52px var(--pad-x) 44px;display:flex;flex-direction:column;gap:22px}
.post .kick{display:inline-flex;align-self:flex-start;background:var(--accent);color:var(--accent-ink);font:400 40px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.14em;padding:12px 20px 9px;border-radius:6px}
.post .h1{font:400 118px/.92 "Bebas Neue",Impact,sans-serif;letter-spacing:.01em;text-wrap:balance;text-shadow:0 3px 18px var(--shade)}
.post .h1.small{font-size:88px}
.post .h2{font:400 62px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.02em;color:var(--hl)}
.post .meta{font:600 30px/1.3 Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.post .meta b{color:var(--ink);font-weight:700}
.post .meta .sep{opacity:.5;margin:0 12px}
.post .evhead{display:flex;flex-direction:column;gap:10px}
.post .evname{font:400 72px/.95 "Bebas Neue",Impact,sans-serif;letter-spacing:.02em;text-wrap:balance;text-shadow:0 3px 18px var(--shade)}
.post .evsub{font:600 28px/1.3 Barlow,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.post .evsub .sep{opacity:.5;margin:0 10px}
.post .body{font:500 40px/1.32 Barlow,sans-serif;color:var(--ink-2);white-space:pre-line;text-wrap:pretty}
.post .flag{display:block;position:relative;border-radius:10px;overflow:hidden;background:var(--veil);flex:none;box-shadow:0 6px 18px var(--shade)}
.post .flag::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 3px var(--flag-edge)}
.post .flag svg,.post .flag img{display:block;width:100%;height:100%;object-fit:cover}
.post .flag.big{width:188px;height:141px;border-radius:14px}
.post .flag.big::after{border-radius:14px}
.post .flag.sm{width:68px;height:51px;border-radius:7px;box-shadow:0 3px 10px var(--shade)}
.post .flag.sm::after{border-radius:7px}
.post .flag.none{background:var(--veil)}
/* game */
.post .match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px}
.post .side{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;min-width:0}
/* Test: Flagge und Teamname stehen aussen buendig, der Score haelt die Mitte. */
.post .match .side:first-child{align-items:flex-start;text-align:left}
.post .match .side:last-child{align-items:flex-end;text-align:right}
.post .tname{font:400 60px/.95 "Bebas Neue",Impact,sans-serif;letter-spacing:.03em;text-wrap:balance;text-shadow:0 2px 12px var(--shade)}
.post .score{font:400 236px/.86 "Bebas Neue",Impact,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;align-items:baseline;justify-content:center;text-shadow:0 6px 30px var(--shade-2);white-space:nowrap}
.post .score .colon{font-size:.72em;margin:0 6px;opacity:.75;align-self:center;line-height:1}
.post .score .lose{color:var(--ink-4)}
.post .center{display:flex;flex-direction:column;align-items:center;gap:14px}
.post .when{font:400 150px/.9 "Bebas Neue",Impact,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em;text-shadow:0 6px 30px var(--shade-2);white-space:nowrap}
/* Die NEXT-Zeile trug als einziges Element im Post noch eine Trennlinie, seit die
   Listen ohne auskommen. Jetzt macht den Abstand das Polster. */
.post .nextup{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:2px;padding-top:10px}
.post .nextup .lab{font:400 30px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.16em;color:var(--ink-3)}
.post .nextup .txt{font:400 46px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.03em}
.post .note{font:600 32px/1.2 Barlow,sans-serif;letter-spacing:.04em;color:var(--ink-2);text-align:center}
.post table.ls{width:100%;border-collapse:collapse;font:600 30px/1 Barlow,sans-serif;font-variant-numeric:tabular-nums;margin-top:6px}
.post table.ls th,.post table.ls td{padding:12px 4px;text-align:center;border-top:2px solid var(--line)}
.post table.ls th{font:400 28px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.1em;color:var(--ink-3);border-top:0;padding-top:0}
.post table.ls td:first-child,.post table.ls th:first-child{text-align:left;font-family:"Bebas Neue",Impact,sans-serif;font-size:36px;letter-spacing:.04em;color:var(--ink);padding-left:0;width:150px}
.post table.ls td:last-child,.post table.ls th:last-child{font-weight:700;color:var(--ink);background:var(--veil)}
/* lists */
.post .rows{display:flex;flex-direction:column}
/* Drei Rasterzeilen: der Tag steht fuer sich oben, Zeit, Flagge und Name bilden die
   Hauptzeile und richten sich unter sich aus, der Zusatz steht darunter. Frueher steckten
   Tag und Zeit in einem Block – dann zentrierte das Raster den Namen zwischen beide. */
.post .row{display:grid;grid-template-columns:minmax(170px,auto) 68px minmax(0,1fr);
  column-gap:26px;row-gap:0;align-items:center;padding:16px 0}
.post .row.noflag{grid-template-columns:minmax(170px,auto) minmax(0,1fr)}
.post .row:first-child{padding-top:0}
.post .row .day{grid-row:1;grid-column:1;font:600 24px/1 Barlow,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.post .row .time{grid-row:2;grid-column:1}
.post .row .flag{grid-row:2;grid-column:2}
.post .row .opp{grid-row:2;grid-column:3}
.post .row.noflag .opp{grid-column:2}
/* Bebas setzt die Versalien 2.5 px ueber die Mitte ihrer Zeilenbox – darunter liegt der
   Platz fuer Unterlaengen, die Versalien nicht haben. Die Flagge ist das einzige Element
   ohne diese Eigenheit und wird darum um denselben Betrag angehoben. */
.post .row .flag,.post .nextup .flag{position:relative;top:-2.5px}
.post .row .time{font:400 52px/.95 "Bebas Neue",Impact,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.post .row .opp{font:400 50px/.95 "Bebas Neue",Impact,sans-serif;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Saison: die roten Eintraege aus dem Saisonplan – Gold statt Weiss. */
.post .row .opp.hl{color:var(--hl)}
/* Die Zusatzzeile ist eine eigene Rasterzeile unter dem Namen. Sie in den Namen zu packen
   hiesse, dass das Raster Flagge, Zeit und Score ueber beide Zeilen zentriert – sie sassen
   dann rund 16 px zu tief. So richtet sich die erste Zeile unter sich aus. */
.post .row .sub{font:600 24px/1.1 Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:6px;grid-row:3;grid-column:3/-1}
.post .row.noflag .sub{grid-column:2/-1}
/* Spielplan: gleicher Tag = eine Gruppe. Der Tag steht einmal als Zwischentitel darueber
   und traegt die Trennlinie; innerhalb der Gruppe gibt es keine. Die Zeitspalte darf dann
   schmaler werden, sie traegt nur noch die Uhrzeit. */
.post .rows.sched .dgrp{font:600 24px/1 Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 0 6px;border-top:2px solid var(--line)}
.post .rows.sched .dgrp:first-child{border-top:0;padding-top:0}
.post .rows.sched .row{padding:8px 0;grid-template-columns:auto 68px minmax(0,1fr)}
/* Ohne den Wochentag ist die Zeitspalte nur so breit wie «09:00» – dann steht die Flagge
   direkt daneben. Die Gasse dahinter kommt darum aufs Feld, nicht auf die Spaltenbreite:
   so bleibt sie gleich, egal wie lang die Zeit getippt wird. */
.post .rows.sched .time{padding-right:22px}
.post .rows.sched .row.noflag{grid-template-columns:auto minmax(0,1fr)}
.post .rows.sched.compact .row{padding:6px 0;grid-template-columns:auto 58px minmax(0,1fr)}
.post .rows.sched.compact .time{padding-right:16px}
.post .rows.sched.compact .row.noflag{grid-template-columns:auto minmax(0,1fr)}
.post .row .sc{font:400 60px/.9 "Bebas Neue",Impact,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:150px;text-align:right}
.post .row .sc .lose{color:var(--ink-4)}
.post .row.res{grid-template-columns:68px minmax(0,1fr) auto}
.post .row.res .flag{grid-row:1;grid-column:1}
.post .row.res .opp{grid-row:1;grid-column:2}
.post .row.res .sc{grid-row:1;grid-column:3}
.post .row.res .sub{grid-row:2;grid-column:2/-1}
.post .rows.compact .row.res{grid-template-columns:58px minmax(0,1fr) auto}
.post .rows.compact .row{padding:11px 0}
.post .rows.compact .row .opp{font-size:42px}
.post .rows.compact .row .time{font-size:44px}
.post .rows.compact .row .sc{font-size:50px}
.post .rows.compact .flag.sm{width:58px;height:44px}
.post .rows.compact .row{grid-template-columns:minmax(170px,auto) 58px minmax(0,1fr)}
.post .rows.compact .row.noflag{grid-template-columns:minmax(170px,auto) minmax(0,1fr)}
.post .rows.compact .row .flag{top:-2px}
/* Saisonliste: neun Turniere muessen aufs Bild – enger als die Spielplanzeile,
   im Quadrat nochmals enger, weil dort am wenigsten Hoehe da ist. */
/* Monat einmal als Zwischentitel; er traegt die Trennlinie, die Zeile darunter nicht. */
.post .rows.sea .mgrp{font:600 24px/1 Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 0 5px;border-top:2px solid var(--line)}
.post .rows.sea .mgrp:first-child{border-top:0;padding-top:0}
.post .rows.sea .row{padding:5px 0}
.post .rows.sea .row{grid-template-columns:minmax(118px,auto) minmax(0,1fr)}
.post.f-square .rows.sea .mgrp{font-size:18px;padding:6px 0 4px}
.post.f-story .rows.sea .mgrp{font-size:26px;padding:16px 0 10px}
.post .rows.sea .row .day{font-size:20px}
.post .rows.sea .row .time{font-size:40px}
.post .rows.sea .row .opp{font-size:40px}
.post .rows.sea .row .sub{font-size:20px;margin-top:4px}
.post.f-square .rows.sea .row{padding:3px 0}
.post.f-square .rows.sea .row{grid-template-columns:minmax(118px,auto) minmax(0,1fr)}
.post.f-square .rows.sea .row .day{font-size:17px}
.post.f-square .rows.sea .row .time{font-size:33px}
.post.f-square .rows.sea .row .opp{font-size:33px}
.post.f-square .rows.sea .row .sub{font-size:17px;margin-top:3px}
.post.f-story .rows.sea .row{padding:14px 0}
.post.f-story .rows.sea .row .opp{font-size:46px}
.post.f-story .rows.sea .row .time{font-size:46px}
.post.f-story .rows.sea .row .day{font-size:22px}
.post.f-story .rows.sea .row .sub{font-size:22px}
.post .bilanz{display:flex;align-items:baseline;gap:18px;margin-top:6px}
.post .bilanz .n{font:400 96px/.9 "Bebas Neue",Impact,sans-serif;font-variant-numeric:tabular-nums}
.post .bilanz .l{font:600 30px/1 Barlow,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* final */
.post .rank{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;text-shadow:0 6px 30px var(--shade-2)}
.post .rank .num{font:400 400px/.8 "Bebas Neue",Impact,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.post .rank .num.m-gold{color:#F4C21B}
.post .rank .num.m-silver{color:#D3DBE4}
.post .rank .num.m-bronze{color:#D98A46}
.post.t-light .rank .num.m-silver{color:#8D9AA8}
.post.t-light .rank .num.m-gold{color:#C79A11}
.post .rank .lab{font:400 120px/.9 "Bebas Neue",Impact,sans-serif;letter-spacing:.04em}
/* sponsors */
/* Die Spalten teilen die Breite unter sich auf (1fr statt auto) – mit auto waren die
   Spalten nur so breit wie die Logos und die Leiste hatte links und rechts viel Luft. */
.post .sp{background:#fff;padding:24px 28px;display:grid;grid-template-columns:repeat(var(--sp-cols,4),minmax(0,1fr));
  justify-items:center;align-items:center;gap:20px 16px;min-height:calc(var(--sp-h) + 48px)}
.post .sp .pl{grid-column:1/-1}
.post .sp.dark{background:#3A424F}
.post .sp.none{background:transparent;padding-top:0}
.post .sp img{height:var(--sp-h);max-width:min(240px,100%);width:auto;object-fit:contain;display:block}
.post .sp .txt{font:700 30px/1 Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#3A424F;white-space:nowrap}
.post .sp.dark .txt{color:#fff}
.post .sp.none .txt{color:var(--ink)}
.post .sp .pl{font:400 22px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.2em;color:#8A93A3;text-align:center;margin-bottom:-6px}
.post .sp.dark .pl{color:rgba(255,255,255,.6)}
.post .sp.none .pl{color:var(--ink-3)}


/* ---------- boot overlay (removed once the data is in) ---------- */
.boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-2);text-align:center;padding:24px}
.boot p{font-weight:600;letter-spacing:.04em;margin:0}
.boot small{display:block;margin-top:8px;font-weight:500;color:var(--ink-3);word-break:break-word}

/* ---------- Schriftgrade pro Format ---------- */
.post.f-square .h1{font-size:98px}
.post.f-square .h1.small{font-size:76px}
.post.f-square .evname{font-size:58px}
.post.f-square .evsub{font-size:25px}
.post.f-square .h2{font-size:52px}
.post.f-square .score{font-size:200px}
.post.f-square .when{font-size:124px}
.post.f-square .rank .num{font-size:320px}
.post.f-square .rank .lab{font-size:96px}
.post.f-story .h1{font-size:132px}
.post.f-story .h1.small{font-size:100px}
.post.f-story .evname{font-size:86px}
.post.f-story .evsub{font-size:32px}
.post.f-story .h2{font-size:68px}
.post.f-story .score{font-size:252px}
.post.f-story .when{font-size:164px}
.post.f-story .rank .num{font-size:430px}
.post.f-story .rank .lab{font-size:132px}
.post.f-story .kick{font-size:44px}
.post.f-story .tname{font-size:66px}
.post.f-story .flag.big{width:214px;height:161px}
.post.f-story .body{font-size:44px}

/* Spielzeilen auf schmalen Schirmen – steht bewusst am Schluss, damit es die
   Spaltenvorgaben von .g-sched / .g-res ueberschreibt. */
@media (max-width:560px){
  .gamerow.g-sched,.gamerow.g-res{grid-template-columns:1fr 1fr;gap:8px}
  .gamerow.g-sched>*,.gamerow.g-res>*{grid-column:auto}
  .gamerow.g-sched>*:nth-child(3),.gamerow.g-sched>*:nth-child(5),.gamerow.g-res>*:nth-child(1){grid-column:1/-1}
  .gamerow .del{grid-column:1/-1;justify-self:start}
}