/* ================================================================
   MatchHub 2 – Esport-Layout
   Angelehnt an das wannaB33F-Profil: Chakra Petch / Barlow,
   Markenblock in Akzentfarbe, Segment-Navigation, Panels mit Oberkante.
   Farben kommen als CSS-Variablen aus core/layout.php (pro Instanz).
   Schriften liegen lokal in assets/fonts (keine Google-Verbindung).
   ================================================================ */

@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/chakra-petch-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/chakra-petch-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2')}

:root{
  --ac:#e02020; --ac-rgb:224,32,32; --on-ac:#fff;
  --win-base:#22c55e; --lose-base:#ef4444;
  /* Theme-Tokens (Standard = Arena, dunkel) – assets/css/themes.css überschreibt sie je Theme und Modus */
  --bg:#0a0b0d; --surf:#131418;
  --fg:#eceef2; --fg2:#a9aeb8; --mute:#7c828e; --fg-strong:#ffffff; --fg-soft:var(--fg-soft); --fg-rgb:255,255,255;
  --surf2:color-mix(in srgb, var(--surf) 86%, rgb(var(--fg-rgb)) 14%);
  --inset:color-mix(in srgb, var(--bg) 70%, var(--surf) 30%);
  --line:rgba(var(--fg-rgb),.08); --line2:rgba(var(--fg-rgb),.14);
  --win:var(--win-base); --lose:var(--lose-base); --draw:#8b919c; --warn:#f59e0b; --info:#60a5fa;
  --ac-text:var(--ac);
  --f-head:'Chakra Petch','Rajdhani',Impact,sans-serif;
  --f-body:'Barlow','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-label:var(--f-body);
  --tt-head:uppercase; --ls-head:1;
  --r:10px; --r-panel:14px;
  --grid-op:.035; --grid-size:72px;
  --foot-bg:color-mix(in srgb,var(--bg) 85%,#000);
  --shadow-lg:0 18px 40px rgba(0,0,0,.55); --shadow-sm:0 0 #0000;
  --content-max:1340px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grid-op);
  background-image:linear-gradient(rgb(var(--fg-rgb)) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--fg-rgb)) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ac-text)}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-head);font-weight:700;text-transform:var(--tt-head);letter-spacing:calc(.02em * var(--ls-head));margin:0;line-height:1.1}
p{margin:0 0 .8rem}
code{background:var(--inset);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:.85em}
.muted{color:var(--mute)}
.small{font-size:.85rem}
.inline{display:inline}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── Leiste ─────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:stretch;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:2px solid var(--ac)}
.bar-brand{display:flex;align-items:center;gap:.65rem;padding:.7rem 1.2rem;background:var(--ac);color:var(--on-ac);
  font-family:var(--f-head);font-weight:700;font-size:1rem;letter-spacing:calc(.04em * var(--ls-head));text-transform:var(--tt-head);white-space:nowrap}
.bar-brand:hover{color:var(--on-ac)}
.bar-brand img{width:1.8rem;height:1.8rem;object-fit:contain;border-radius:4px}
.bar-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.bar-nav::-webkit-scrollbar{display:none}
.bar-nav a{display:flex;align-items:center;gap:.45rem;padding:.7rem 1rem;min-height:2.9rem;border-right:1px solid var(--line);
  color:var(--fg2);font-family:var(--f-head);font-weight:600;font-size:.8rem;letter-spacing:calc(.1em * var(--ls-head));text-transform:var(--tt-head);white-space:nowrap;transition:background .15s,color .15s}
.bar-nav a .bi{font-size:.95rem;opacity:.8}
.bar-nav a:hover{background:rgba(var(--ac-rgb),.14);color:var(--fg)}
.bar-nav a[aria-current="page"]{background:rgba(var(--ac-rgb),.22);color:var(--fg-strong);box-shadow:inset 0 -2px 0 var(--ac)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:.5rem;padding:.45rem 1rem}
.bar-user{display:flex;align-items:center;gap:.6rem;padding:.25rem .6rem .25rem .3rem;border-radius:999px;border:1px solid var(--line)}
.bar-user:hover{border-color:var(--ac-text);color:var(--fg)}
.bar-user-name{display:flex;flex-direction:column;line-height:1.1;font-weight:600;font-size:.88rem}
.bar-user-name small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600}
.avatar{width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:rgba(var(--ac-rgb),.18);color:var(--fg);font-family:var(--f-head);font-weight:700;font-size:.9rem;border:1px solid rgba(var(--ac-rgb),.4)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--fg2);cursor:pointer;font-size:1.05rem}
.icon-btn:hover{color:var(--fg-strong);border-color:var(--ac-text)}

@media (max-width:1100px){
  .bar-nav{order:5;flex:1 0 100%;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .bar-brand{padding:.6rem .9rem;font-size:.9rem}
  .bar-brand span{max-width:9rem;overflow:hidden;text-overflow:ellipsis}
  .bar-user-name{display:none}
  .bar-user{padding:.2rem;border:none}
  .bar-nav a{padding:.6rem .85rem;min-height:2.6rem;font-size:.74rem}
}

/* ── Inhalt ─────────────────────────────────────────────── */
.main{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:1.8rem 1.4rem 3.5rem}
.main--wide{max-width:none}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}
.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
@media (max-width:1024px){.span-8,.span-7,.span-6,.span-5,.span-4{grid-column:span 12}.span-3{grid-column:span 6}}
@media (max-width:560px){.hide-sm{display:none!important}.span-3{grid-column:span 12}.main{padding:1.2rem .8rem 2.6rem}}

/* Seitenkopf */
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}
.ph h1{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.ph-sub{margin:.35rem 0 0;color:var(--fg2)}
.ph-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.kicker{font-family:var(--f-head);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-text);margin-bottom:.3rem;font-family:var(--f-label)}

/* Panels */
.panel{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-panel);background:var(--surf);
  border:1px solid var(--line);border-top:3px solid var(--line2);overflow:hidden}
.panel--ac{border-top-color:var(--ac-text)}
.panel-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);
  font-family:var(--f-head);font-weight:700;font-size:.92rem;letter-spacing:calc(.06em * var(--ls-head));text-transform:var(--tt-head)}
.panel-head > b{margin-left:auto;font-weight:600;font-size:.7rem;letter-spacing:.16em;color:var(--mute);font-family:var(--f-label)}
.panel-head .head-act{margin-left:auto}
.panel-head .head-act + b{margin-left:.6rem}
.panel-body{padding:1.2rem;flex:1}
.panel-body.flush{padding:0}
.panel + .panel{margin-top:0}
.stack{display:flex;flex-direction:column;gap:1rem}

/* Kennzahlen als Kachelblock */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tile{background:var(--surf);padding:1rem 1.1rem;min-width:0}
.tile b{display:block;font-family:var(--f-head);font-weight:700;font-size:2rem;line-height:1;color:var(--fg-strong)}
.tile b.ac{color:var(--ac-text)}
.tile .lbl{display:block;margin-top:.35rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-family:var(--f-label)}
.tile .sub{display:block;font-size:.84rem;color:var(--fg2);margin-top:.15rem}
.meter{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:.55rem}
.meter i{display:block;height:100%;background:var(--ac);border-radius:3px}

/* Hero-Streifen (Dashboard) */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.2rem;padding:1.4rem 1.4rem;margin-bottom:1rem;
  border-radius:var(--r-panel);border:1px solid var(--line);border-top:3px solid var(--ac);
  background:linear-gradient(120deg,rgba(var(--ac-rgb),.16),var(--surf) 55%)}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:var(--f-head);font-weight:700;font-size:1.45rem;line-height:1}
.ring span small{font-family:var(--f-body);font-size:.6rem;letter-spacing:.14em;color:var(--mute);margin-top:.2rem}
.wld{display:flex;gap:1.4rem}
.wld div b{display:block;font-family:var(--f-head);font-size:2.1rem;line-height:1}
.wld div span{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.c-win{color:var(--win)!important}.c-lose{color:var(--lose)!important}.c-draw{color:var(--draw)!important}.c-ac{color:var(--ac-text)!important}
.form-row{display:flex;gap:.3rem}
.vsep{width:1px;align-self:stretch;background:var(--line)}
@media (max-width:640px){.vsep{display:none}}

/* Ergebnis-Badges */
.res{display:inline-flex;align-items:center;justify-content:center;min-width:1.9rem;height:1.9rem;padding:0 .45rem;border-radius:7px;
  font-family:var(--f-head);font-weight:700;font-size:.8rem;letter-spacing:.04em;border:1px solid}
.res--w{color:var(--win);background:color-mix(in srgb,var(--win) 14%,transparent);border-color:color-mix(in srgb,var(--win) 35%,transparent)}
.res--l{color:var(--lose);background:color-mix(in srgb,var(--lose) 14%,transparent);border-color:color-mix(in srgb,var(--lose) 35%,transparent)}
.res--d{color:var(--draw);background:rgba(139,145,156,.12);border-color:rgba(139,145,156,.3)}
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(var(--ac-rgb),.14);color:var(--fg);border:1px solid rgba(var(--ac-rgb),.35);white-space:nowrap}
.tag--mute{background:rgba(var(--fg-rgb),.05);border-color:var(--line2);color:var(--fg2)}
.tag--ok{background:color-mix(in srgb,var(--win) 14%,transparent);border-color:color-mix(in srgb,var(--win) 40%,transparent);color:var(--win)}
.tag--bad{background:color-mix(in srgb,var(--lose) 14%,transparent);border-color:color-mix(in srgb,var(--lose) 40%,transparent);color:var(--lose)}
.score{font-family:var(--f-head);font-weight:700;font-size:1.1rem;white-space:nowrap}
.score i{font-style:normal;color:var(--mute);padding:0 .15rem}

/* Listen */
.list{display:flex;flex-direction:column}
.list-row{display:flex;align-items:center;gap:.9rem;padding:.75rem 1.2rem;border-bottom:1px solid var(--line);min-width:0;transition:background .12s}
.list-row:last-child{border-bottom:none}
a.list-row:hover{background:rgba(var(--fg-rgb),.035);color:inherit}
.list-row .grow{flex:1;min-width:0}
.list-row .grow b,.list-row .grow strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.list-row .grow span{display:block;font-size:.8rem;color:var(--mute)}
.list-row .chev{color:var(--mute)}
a.list-row:hover .chev{color:var(--ac-text)}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.94rem}
.kv:last-child{border-bottom:none}
.kv span{color:var(--mute)}
.kv strong{font-weight:600;text-align:right}

/* Tabellen */
.table-wrap{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th{padding:.65rem 1rem;text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);white-space:nowrap;font-family:var(--f-label)}
.table td{padding:.7rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:rgba(var(--fg-rgb),.025)}
.table th.sortable{cursor:pointer;user-select:none}
.table th.sortable:hover{color:var(--fg)}
.table th.sortable::after{content:" \2195";opacity:.4}
.table th.sort-asc::after{content:" \2191";opacity:1;color:var(--ac-text)}
.table th.sort-desc::after{content:" \2193";opacity:1;color:var(--ac-text)}
.table tr.is-active td{background:rgba(var(--ac-rgb),.08)}
.table .num{text-align:center;font-variant-numeric:tabular-nums}
.res-bar{display:block;width:4px;align-self:stretch;border-radius:2px;flex:none}
td.res-cell{width:4px;padding:0!important}
td.res-cell span{display:block;width:4px;min-height:2.6rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.6rem;padding:.55rem 1.15rem;border-radius:var(--r);
  border:1px solid var(--line2);background:transparent;color:var(--fg);cursor:pointer;
  font-family:var(--f-head);font-weight:700;font-size:.82rem;letter-spacing:calc(.06em * var(--ls-head));text-transform:var(--tt-head);white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--ac-text);background:rgba(var(--ac-rgb),.12);color:var(--fg-strong)}
.btn--solid{background:var(--ac);border-color:var(--ac-text);color:var(--on-ac)}
.btn--solid:hover{background:color-mix(in srgb,var(--ac) 82%,#fff);color:var(--on-ac)}
.btn--ghost{border-color:var(--line)}
.btn--danger{border-color:color-mix(in srgb,var(--lose) 45%,transparent);color:var(--lose)}
.btn--danger:hover{background:color-mix(in srgb,var(--lose) 16%,transparent);border-color:var(--lose);color:var(--fg-strong)}
.btn--sm{min-height:2.1rem;padding:.35rem .75rem;font-size:.72rem;border-radius:8px}
.btn--icon{width:2.1rem;padding:0}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* Formulare */
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field > label,.label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.hint{font-size:.8rem;color:var(--mute)}
.input,select.input,textarea.input{width:100%;min-height:2.6rem;padding:.55rem .8rem;border-radius:calc(var(--r) - 1px);border:1px solid var(--line2);
  background:var(--inset);color:var(--fg);font:inherit;font-size:.95rem}
textarea.input{min-height:6rem;resize:vertical}
.input:focus{outline:none;border-color:var(--ac-text);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.2)}
.input::placeholder{color:var(--mute)}
input[type=color].input{padding:3px;width:3.2rem;height:2.6rem;cursor:pointer}
input[type=range]{accent-color:var(--ac-text);width:100%}
input[type=file].input{padding:.4rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.check{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-weight:500;user-select:none}
.check input{width:1.1rem;height:1.1rem;accent-color:var(--ac-text)}
.toggle-card{display:flex;align-items:flex-start;gap:.9rem;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--inset);cursor:pointer}
.toggle-card:has(input:checked){border-color:rgba(var(--ac-rgb),.45)}
.toggle-card b{display:block}
.toggle-card span{font-size:.85rem;color:var(--mute)}
.switch{position:relative;width:2.6rem;height:1.5rem;flex:none;appearance:none;-webkit-appearance:none;border-radius:999px;background:var(--line2);cursor:pointer;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:transform .15s}
.switch:checked{background:var(--ac)}
.switch:checked::after{transform:translateX(1.1rem)}

/* Auswahl-Chips (Lineup) */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.5rem}
.chip{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:10px;border:1px solid var(--line);background:var(--inset);cursor:pointer;user-select:none;min-width:0}
.chip input{accent-color:var(--ac-text);width:1rem;height:1rem;flex:none}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.9rem}
.chip:has(input:checked){border-color:rgba(var(--ac-rgb),.55);background:rgba(var(--ac-rgb),.1)}

/* Map-Zeilen im Match-Formular */
.maprow{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem 5.5rem auto;gap:.6rem;align-items:end;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.maprow:last-child{border-bottom:none}
@media (max-width:560px){.maprow{grid-template-columns:1fr 1fr auto}.maprow .field:first-child{grid-column:1/-1}}

/* Pills / Tabs */
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.pills a,.pills button{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1rem;min-height:2.4rem;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--fg2);font-family:var(--f-head);font-weight:600;font-size:.76rem;letter-spacing:calc(.06em * var(--ls-head));text-transform:var(--tt-head);cursor:pointer}
.pills a:hover,.pills button:hover{border-color:var(--ac-text);color:var(--fg)}
.pills a[aria-current="page"],.pills button[aria-selected="true"]{background:var(--ac);border-color:var(--ac-text);color:var(--on-ac)}

/* Admin: Seitenleiste */
.side-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1rem;align-items:start}
.side-nav{position:sticky;top:5rem;border-radius:var(--r-panel);background:var(--surf);border:1px solid var(--line);border-top:3px solid var(--ac);padding:.5rem 0;overflow:hidden}
.side-nav .grp{padding:.7rem 1.1rem .3rem;font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-family:var(--f-label)}
.side-nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem;color:var(--fg2);font-weight:600;font-size:.93rem;border-left:3px solid transparent}
.side-nav a:hover{background:rgba(var(--fg-rgb),.03);color:var(--fg)}
.side-nav a[aria-current="page"]{color:var(--fg-strong);border-left-color:var(--ac-text);background:rgba(var(--ac-rgb),.1)}
.side-nav a .bi{width:1.1rem;text-align:center;color:var(--mute)}
.side-nav a[aria-current="page"] .bi{color:var(--ac-text)}
@media (max-width:900px){
  .side-layout{grid-template-columns:minmax(0,1fr)}
  .side-nav{position:static;display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0;scrollbar-width:none}
  .side-nav .grp{display:none}
  .side-nav a{border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .side-nav a[aria-current="page"]{border-bottom-color:var(--ac-text)}
}

/* Kacheln (Maps / Taktiken) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem}
.mcard{position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--surf);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.mcard:hover{border-color:var(--ac-text);transform:translateY(-2px)}
.mcard-img{display:block;aspect-ratio:16/10;background:var(--inset);overflow:hidden}
.mcard-img img,.mcard-img .thumb{width:100%;height:100%;object-fit:cover;display:flex;align-items:center;justify-content:center}
.mcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem .9rem}
.mcard-foot b{font-family:var(--f-head);text-transform:var(--tt-head);letter-spacing:calc(.04em * var(--ls-head));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{width:3.6rem;height:2.6rem;border-radius:7px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--inset)}
.thumb--empty{display:inline-flex;align-items:center;justify-content:center;color:var(--mute);font-size:1.2rem}

/* Hinweise */
.flash{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;border:1px solid;font-weight:500}
.flash--ok{background:color-mix(in srgb,var(--win) 12%,transparent);border-color:color-mix(in srgb,var(--win) 45%,transparent)}
.flash--err{background:color-mix(in srgb,var(--lose) 12%,transparent);border-color:color-mix(in srgb,var(--lose) 45%,transparent)}
.flash--info{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.4)}
.flash--warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.45)}
.empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:2.6rem 1rem;text-align:center;color:var(--fg2)}
.empty > .bi{font-size:2.2rem;color:var(--mute)}
.empty b{font-family:var(--f-head);text-transform:var(--tt-head);letter-spacing:calc(.06em * var(--ls-head));color:var(--fg)}
.empty .btn{margin-top:.6rem}

/* Pager */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;margin-top:1.2rem}
.pager a{min-width:2.3rem;height:2.3rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .7rem;border-radius:8px;border:1px solid var(--line);font-weight:700}
.pager a[aria-current="page"]{background:var(--ac);border-color:var(--ac-text);color:var(--on-ac)}
.pager span{font-size:.8rem;color:var(--mute);margin-left:.5rem}

/* Suche */
.search{position:relative;max-width:26rem;flex:1}
.search .bi{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.search .input{padding-left:2.3rem}
mark{background:rgba(var(--ac-rgb),.35);color:var(--fg-strong);border-radius:3px;padding:0 2px}

/* Dialog */
dialog.modal{border:1px solid var(--line2);border-top:3px solid var(--ac);border-radius:var(--r-panel);background:var(--surf);color:var(--fg);padding:0;width:min(520px,calc(100vw - 2rem));max-height:calc(100vh - 2rem)}
dialog.modal::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(3px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);font-family:var(--f-head);font-weight:700;text-transform:var(--tt-head);letter-spacing:calc(.05em * var(--ls-head))}
.modal-body{padding:1.2rem}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.2rem;border-top:1px solid var(--line)}

/* Auth-Seiten */
.auth{max-width:440px;margin:4vh auto 0}
.auth .panel-body{padding:1.6rem}
.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;font-size:.9rem;color:var(--fg2)}
.auth-links a{color:var(--ac-text)}

/* Fuß */
.foot{border-top:1px solid var(--line);background:var(--foot-bg)}
.foot-in{max-width:var(--content-max);margin:0 auto;padding:1rem 1.4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.82rem;color:var(--mute)}

/* Toast */
#toasts{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;flex-direction:column;gap:.5rem}
.toast{padding:.75rem 1rem;border-radius:10px;background:var(--surf2);border:1px solid var(--line2);border-left:3px solid var(--ac);box-shadow:var(--shadow-lg);font-weight:500;animation:toast-in .2s ease-out}
.toast--ok{border-left-color:var(--win)}.toast--err{border-left-color:var(--lose)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Taktik-Board ───────────────────────────────────────── */
.board-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.8rem}
.board-top .input{width:auto;min-width:10rem}
.board-top .grow{flex:1}
.board-wrap{position:relative;width:100%;margin:0 auto;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line);user-select:none;-webkit-user-select:none;touch-action:none}
.board-img{display:block;width:100%;height:auto;pointer-events:none}
.board-empty{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;color:var(--mute);flex-direction:column;gap:.4rem}
.board-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.board-svg.editable{cursor:crosshair}
.board-svg.tool-move{cursor:grab}
.board-svg.tool-erase{cursor:cell}
.toolbar{display:flex;flex-wrap:wrap;gap:.3rem;padding:.4rem;border-radius:12px;background:var(--surf);border:1px solid var(--line);margin-bottom:.8rem}
.toolbar button{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--fg2);
  font-family:var(--f-body);font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap}
.toolbar button:hover{background:rgba(var(--fg-rgb),.05);color:var(--fg-strong)}
.toolbar button.active{background:rgba(var(--ac-rgb),.18);border-color:rgba(var(--ac-rgb),.55);color:var(--fg-strong)}
.toolbar kbd{font-family:var(--f-body);font-size:.66rem;padding:1px 5px;border-radius:4px;background:rgba(var(--fg-rgb),.07);border:1px solid var(--line2);color:var(--mute)}
.toolbar .sep{width:1px;background:var(--line);margin:0 .2rem}
.toolbar .tb-ctrl{display:inline-flex;align-items:center;gap:.4rem;padding:0 .4rem;color:var(--mute);font-size:.8rem}
.toolbar .tb-ctrl input[type=color]{width:2rem;height:2rem;border:none;background:none;padding:0;cursor:pointer}
.toolbar .tb-ctrl input[type=number]{width:3.6rem;min-height:2rem;padding:.2rem .4rem}
.toolbar .tb-ctrl input[type=range]{width:6rem}
.board-status{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.8rem;font-size:.85rem;color:var(--mute)}
.board-status .dirty{color:var(--warn);font-weight:600}
.text-editor{position:absolute;z-index:5;transform:translate(-50%,-50%);background:rgba(0,0,0,.8);border:1px solid var(--ac);border-radius:8px;padding:3px}
.text-editor input{background:transparent;border:none;outline:none;color:#fff;font:inherit;min-width:10rem;padding:.3rem .4rem}
.board-wrap.is-fs{position:fixed;inset:0;z-index:300;border-radius:0;border:none;display:flex;align-items:center;justify-content:center}
.board-wrap.is-fs .board-stage{position:relative;max-width:100vw;max-height:100vh}
.board-wrap.is-fs .board-img{max-width:100vw;max-height:100vh;width:auto;height:auto}
.board-stage{position:relative}
.fs-exit{position:absolute;top:.8rem;right:.8rem;z-index:6;display:none}
.board-wrap.is-fs .fs-exit{display:inline-flex}
.board-hint{font-size:.8rem;color:var(--mute);margin-top:.5rem}
@media (max-width:760px){.edit-only{display:none!important}}

/* Admin: Toolbar-Editor */
.tool-item{border:1px solid var(--line);border-radius:12px;background:var(--inset);margin-bottom:.5rem;overflow:hidden}
.tool-item summary{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;cursor:pointer;list-style:none}
.tool-item summary::-webkit-details-marker{display:none}
.tool-item summary .ico{width:2rem;height:2rem;border-radius:7px;background:rgba(var(--fg-rgb),.06);display:flex;align-items:center;justify-content:center;flex:none}
.tool-item summary .name{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-item .tool-body{padding:1rem;border-top:1px solid var(--line)}
.tool-item.off summary .ico,.tool-item.off summary .name{opacity:.4}

/* Fuß-Links */
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.foot-links a{color:var(--fg2)}
.foot-links a:hover,.foot-links a[aria-current="page"]{color:var(--ac-text)}

/* ── Rechtliches (Impressum / Datenschutz) ─────────────── */
.legal{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:2rem;align-items:start;max-width:1100px;margin:0 auto}
.legal-toc{position:sticky;top:5rem}
.legal-toc details{border-radius:var(--r-panel);background:var(--surf);border:1px solid var(--line);border-top:3px solid var(--ac);overflow:hidden}
.legal-toc summary{padding:.8rem 1.1rem;font-family:var(--f-head);font-weight:700;font-size:.82rem;letter-spacing:calc(.12em * var(--ls-head));text-transform:var(--tt-head);cursor:pointer;list-style:none;border-bottom:1px solid var(--line)}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc ol{list-style:none;margin:0;padding:.4rem 0;max-height:calc(100vh - 10rem);overflow:auto}
.legal-toc a{display:flex;gap:.6rem;align-items:baseline;padding:.42rem 1.1rem;font-size:.9rem;color:var(--fg2);border-left:3px solid transparent}
.legal-toc a span{font-family:var(--f-head);font-size:.75rem;color:var(--mute);min-width:1.2rem}
.legal-toc a:hover{color:var(--fg);background:rgba(var(--fg-rgb),.03)}
.legal-toc a.is-active{color:var(--fg-strong);border-left-color:var(--ac-text);background:rgba(var(--ac-rgb),.08)}
.legal-toc a.is-active span{color:var(--ac-text)}
.legal-body{min-width:0;max-width:52rem}
.legal-summary{border-radius:var(--r-panel);border:1px solid rgba(var(--ac-rgb),.35);background:linear-gradient(135deg,rgba(var(--ac-rgb),.12),var(--surf) 60%);padding:1.2rem 1.3rem;margin-bottom:1.4rem}
.legal-summary h2{font-size:.95rem;letter-spacing:.1em;margin-bottom:1rem}
.legal-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.9rem 1.4rem}
.legal-summary-grid div{display:grid;grid-template-columns:2rem 1fr;grid-template-rows:auto 1fr;column-gap:.7rem;row-gap:.15rem;align-items:start;align-content:start}
.legal-summary-grid i{grid-row:span 2;width:2rem;height:2rem;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ac-rgb),.18);color:var(--ac-text);font-size:1rem}
.legal-summary-grid b{font-weight:700;line-height:1.3}
.legal-summary-grid span{font-size:.88rem;color:var(--fg2);line-height:1.45}
.legal-block{scroll-margin-top:5.5rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.legal-block:last-child{border-bottom:none}
.legal-block h2{display:flex;align-items:center;gap:.75rem;font-size:1.15rem;margin-bottom:.9rem}
.legal-num{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex:none;border-radius:8px;background:var(--ac);color:var(--on-ac);font-size:.9rem}
.legal-text{color:var(--fg-soft);line-height:1.75;font-size:1rem}
.legal-text p{margin:0 0 .8rem}
.legal-text b{color:var(--fg-strong)}
.legal-text a{color:var(--ac-text);text-decoration:underline;text-underline-offset:3px}
.legal-text .btn{text-decoration:none;color:var(--fg)}
.legal-address{font-style:normal;padding:1rem 1.2rem;border-radius:12px;background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--ac);margin:0 0 1rem;line-height:1.7;color:var(--fg)}
.legal-contact{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.4rem;margin:0 0 1rem}
.legal-contact dt{color:var(--mute);font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:.45rem}
.legal-contact dd{margin:0;color:var(--fg)}
.legal-list{margin:0 0 .9rem;padding:0;list-style:none}
.legal-list li{position:relative;padding:.3rem 0 .3rem 1.4rem}
.legal-list li::before{content:"";position:absolute;left:.2rem;top:.85rem;width:.45rem;height:.45rem;border-radius:2px;background:var(--ac)}
.legal-note{font-size:.9rem;color:var(--fg2);padding:.7rem .9rem;border-radius:10px;background:rgba(var(--fg-rgb),.03);border:1px solid var(--line)}
.legal-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
@media (max-width:900px){
  .legal{grid-template-columns:1fr;gap:1rem}
  .legal-toc{position:static}
  .legal-toc details:not([open]) summary{border-bottom:none}
  .legal-toc ol{max-height:none;columns:2;column-gap:0}
}
@media (max-width:560px){.legal-toc ol{columns:1}.legal-contact{grid-template-columns:1fr;gap:.1rem}.legal-contact dd{margin-bottom:.5rem}}
.legal-toc summary{display:flex;justify-content:space-between;align-items:center}
.legal-toc summary::after{content:"\25BE";color:var(--mute);transition:transform .15s}
.legal-toc details[open] summary::after{transform:rotate(180deg)}

/* ── Öffentliche Plattform-Seiten (Startseite, Anmeldung) ───────────── */
.btn--lg{min-height:3.2rem;padding:.85rem 1.6rem;font-size:.92rem;border-radius:12px}
.site-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;align-items:center;padding:2.5rem 0 3rem}
.site-kicker{display:inline-flex;font-family:var(--f-head);font-weight:600;font-size:.78rem;letter-spacing:calc(.12em * var(--ls-head));text-transform:var(--tt-head);margin-bottom:1.2rem}
.site-kicker span{background:var(--ac);color:var(--on-ac);padding:.45rem .85rem;font-weight:700}
.site-kicker em{font-style:normal;color:var(--fg2);border:1px solid var(--line2);border-left:none;padding:.45rem .9rem}
.site-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;margin-bottom:1.2rem}
.site-lead{font-size:1.1rem;line-height:1.7;color:var(--fg2);max-width:36rem;margin-bottom:1.6rem}
.site-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;list-style:none;padding:0;margin:1.4rem 0 0;color:var(--fg2);font-size:.95rem}
.site-checks i{color:var(--win);margin-right:.25rem}
.site-hero-shot{position:relative}
.site-hero-shot img,.site-shot{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line2);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--ac-rgb),.15)}
.site-hero-shot::before{content:"";position:absolute;inset:-12% 0;z-index:-1;background:radial-gradient(closest-side,rgba(var(--ac-rgb),.28),transparent);filter:blur(10px)}
.site-section{padding:3.5rem 0;border-top:1px solid var(--line)}
.site-h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.site-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}
.site-feature{padding:1.3rem;border-radius:var(--r-panel);background:var(--surf);border:1px solid var(--line);border-top:3px solid var(--line2);transition:border-color .15s,transform .15s}
.site-feature:hover{border-top-color:var(--ac-text);transform:translateY(-2px)}
.site-feature-ico{display:inline-flex;width:2.6rem;height:2.6rem;border-radius:10px;align-items:center;justify-content:center;background:rgba(var(--ac-rgb),.15);color:var(--ac-text);font-size:1.2rem;margin-bottom:.9rem}
.site-feature h3{font-size:1.05rem;margin-bottom:.5rem;display:flex;gap:.5rem;align-items:center}
.site-feature p{margin:0;color:var(--fg2);font-size:.95rem;line-height:1.6}
.site-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.site-steps{list-style:none;counter-reset:s;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:1rem}
.site-steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;column-gap:1rem}
.site-steps li::before{content:counter(s);grid-row:span 2;width:2.6rem;height:2.6rem;border-radius:10px;background:var(--ac);color:var(--on-ac);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;font-size:1.1rem}
.site-steps b{font-family:var(--f-head);text-transform:var(--tt-head);letter-spacing:calc(.04em * var(--ls-head))}
.site-steps span{color:var(--fg2)}
.site-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.2rem;max-width:860px;margin:0 auto}
.price{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.6rem;border-radius:var(--r-panel);background:var(--surf);border:1px solid var(--line);border-top:3px solid var(--line2)}
.price--pro{border-color:rgba(var(--ac-rgb),.45);border-top-color:var(--ac-text);background:linear-gradient(160deg,rgba(var(--ac-rgb),.14),var(--surf) 55%)}
.price h3{font-size:1.3rem}
.price-badge{position:absolute;top:-.8rem;right:1.2rem;background:var(--ac);color:var(--on-ac);font-family:var(--f-head);font-weight:700;font-size:.7rem;letter-spacing:calc(.1em * var(--ls-head));text-transform:var(--tt-head);padding:.3rem .7rem;border-radius:999px}
.price-amount b{font-family:var(--f-head);font-size:2.6rem;line-height:1}
.price-amount span{color:var(--mute);margin-left:.4rem}
.price-alt{color:var(--fg2);margin-top:-.4rem}
.price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem;flex:1}
.price li i{color:var(--win);margin-right:.4rem}
.price li .bi-stars{color:var(--ac-text)}
.site-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.8rem}
.faq{border-radius:12px;background:var(--surf);border:1px solid var(--line)}
.faq summary{padding:1rem 1.2rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ac-text);font-family:var(--f-head);font-size:1.2rem;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 1.2rem 1.1rem;color:var(--fg2);line-height:1.65}
.site-cta{margin:2rem 0 1rem;padding:2.6rem 1.6rem;border-radius:var(--r-panel);background:var(--ac);color:var(--on-ac);text-align:center}
.site-cta h2{font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:.4rem}
.site-cta p{opacity:.85;margin-bottom:1.2rem}
.site-cta .btn{background:#0a0b0d;border-color:#0a0b0d;color:#fff}
.site-cta .btn:hover{background:#fff;color:#0a0b0d}
.signup{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.4rem;align-items:start;max-width:1040px;margin:0 auto}
.signup aside .panel-body li{margin-bottom:.5rem}
.slug-preview{font-family:var(--f-body);font-size:.85rem;color:var(--fg2);word-break:break-all}
.slug-preview b{color:var(--ac-text)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.plan-card{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center}
.plan-name{font-family:var(--f-head);font-weight:700;font-size:2rem;text-transform:var(--tt-head);line-height:1}
.pay-box{padding:1rem 1.2rem;border-radius:12px;background:var(--inset);border:1px solid var(--line);font-size:.95rem}
.pay-box code{font-size:.95rem}
.period-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.8rem}
.period-pick label{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;border-radius:12px;border:1px solid var(--line2);background:var(--inset);cursor:pointer}
.period-pick label:has(input:checked){border-color:var(--ac-text);background:rgba(var(--ac-rgb),.1)}
.period-pick input{accent-color:var(--ac-text)}
.period-pick b{font-family:var(--f-head);font-size:1.4rem}
@media (max-width:900px){.site-hero,.site-split,.signup{grid-template-columns:1fr}.site-hero{padding-top:1rem}}
body.site{overflow-x:clip}

/* ── 2.3: Team-Wechsler, Konto, Map-Packs, öffentliche Ansicht ─────────── */
.tag--warn{background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.toggle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.7rem}
.btn--block{display:flex;width:100%;justify-content:center}
.or{display:flex;align-items:center;gap:.8rem;margin:1rem 0;color:var(--mute);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

.switcher{position:relative}
.switcher>summary{list-style:none}
.switcher>summary::-webkit-details-marker{display:none}
.switcher[open]>summary{color:var(--fg-strong);border-color:var(--ac-text);background:rgba(var(--ac-rgb),.14)}
.switcher-menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;width:17rem;max-width:calc(100vw - 1.6rem);padding:.4rem;border-radius:12px;
  background:var(--surf2);border:1px solid var(--line2);border-top:3px solid var(--ac);box-shadow:var(--shadow-lg)}
.switcher-head{display:flex;flex-direction:column;padding:.55rem .7rem .6rem;font-family:var(--f-head);font-weight:700;letter-spacing:calc(.08em * var(--ls-head));text-transform:var(--tt-head);font-size:.78rem}
.switcher-head small{font-family:var(--f-body,inherit);font-weight:500;letter-spacing:0;text-transform:none;color:var(--mute);font-size:.78rem;overflow:hidden;text-overflow:ellipsis}
.switcher-menu a{display:flex;align-items:center;gap:.65rem;padding:.5rem .7rem;border-radius:8px;color:var(--fg2);font-weight:600;font-size:.92rem;min-width:0}
.switcher-menu a .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switcher-menu a .avatar{width:1.7rem;height:1.7rem;font-size:.78rem}
.switcher-menu a>.bi:first-child{width:1.7rem;text-align:center;font-size:1rem}
.switcher-menu a:hover{background:rgba(var(--ac-rgb),.12);color:var(--fg-strong)}
.switcher-menu a[aria-current="page"]{color:var(--fg-strong);background:rgba(var(--ac-rgb),.18)}
.switcher-menu a[aria-current="page"] .bi-check2{color:var(--ac-text)}
.switcher-sep{height:1px;background:var(--line);margin:.35rem .3rem}
.switcher-empty{padding:.4rem .7rem .6rem;color:var(--mute);font-size:.88rem}
@media (max-width:560px){.switcher-menu{position:fixed;left:.8rem;right:.8rem;top:3.6rem;width:auto}}

.team-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}
.team-card{display:flex;flex-direction:column;border-radius:var(--r-panel,14px);background:var(--surf);border:1px solid var(--line);border-top:3px solid var(--ac);overflow:hidden;transition:border-color .15s,transform .15s}
.team-card:hover{border-color:rgba(var(--ac-rgb),.55);transform:translateY(-2px)}
.team-card.is-off{opacity:.7}
.team-card-main{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;color:var(--fg)}
.team-card-main:hover{color:var(--fg)}
.team-card-logo{width:3rem;height:3rem;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(var(--ac-rgb),.16);border:1px solid rgba(var(--ac-rgb),.4);font-family:var(--f-head);font-weight:700;font-size:1.3rem}
.team-card-logo img{width:100%;height:100%;object-fit:contain}
.team-card-text{display:flex;flex-direction:column;min-width:0;flex:1}
.team-card-text b{font-family:var(--f-head);font-size:1.12rem;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-card-text span{color:var(--mute);font-size:.85rem}
.team-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.7rem 1.2rem;border-top:1px solid var(--line);background:var(--inset)}
.team-card-meta form{margin-left:auto}
.team-card-meta .icon-btn{width:2rem;height:2rem;font-size:.95rem}

.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.7rem}
.pick{position:relative;display:flex;align-items:flex-start;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--inset);cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick:has(input:checked){border-color:var(--ac-text);background:rgba(var(--ac-rgb),.09);box-shadow:inset 0 0 0 1px var(--ac)}
.pick:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.pick-ico{width:2.3rem;height:2.3rem;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ac-rgb),.14);color:var(--ac-text);font-size:1.1rem}
.pick b{display:block}
.pick small{display:block;color:var(--mute);font-size:.84rem;margin-top:.1rem}

.pack-card{display:flex;flex-direction:column;color:var(--fg);transition:border-color .15s,transform .15s}
.pack-card:hover{color:var(--fg);border-color:rgba(var(--ac-rgb),.55);transform:translateY(-2px)}
.pack-card.is-off{opacity:.6}
.pack-thumbs{display:grid;grid-template-columns:repeat(4,1fr);height:5.5rem;background:var(--inset);border-bottom:1px solid var(--line);place-items:center}
.pack-thumbs img{width:100%;height:100%;object-fit:cover}
.pack-thumbs>.bi{grid-column:1/-1;font-size:2rem;color:var(--mute)}
.pack-card .panel-body{display:flex;flex-direction:column;gap:.2rem}
.pack-card-title{font-family:var(--f-head);font-size:1.15rem}
/* Laptop-Breiten: Kopfleiste kompakter, damit Navigation + Team-Wechsler in eine Zeile passen */
@media (min-width:1101px) and (max-width:1500px){
  .bar-nav a{padding:.7rem .75rem;letter-spacing:calc(.08em * var(--ls-head))}
  .bar .bar-user-name{display:none}
  .bar .bar-user{padding:.2rem;border:none}
  .bar-right{padding:.45rem .8rem;gap:.4rem}
}

/* ── 2.7: Verwaltung, Konto, Auth ─────────────────────────────── */
.steps{display:flex;gap:.4rem;margin-bottom:1.2rem}.steps i{flex:1;height:4px;border-radius:2px;background:var(--line2)}.steps i.on{background:var(--ac)}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1px;background:var(--line)}
.check-item{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.2rem;background:var(--surf);color:var(--fg);font-weight:500}
.check-item>.bi:first-child{font-size:1.05rem;color:var(--mute)}
.check-item>.bi:last-child{margin-left:auto;color:var(--mute)}
.check-item span{flex:1}
.check-item:hover{background:rgba(var(--ac-rgb),.07);color:var(--fg-strong)}
.check-item.is-done{color:var(--mute)}
.check-item.is-done span{text-decoration:line-through;text-decoration-color:var(--line2)}
.check-item.is-done>.bi:first-child{color:var(--win)}
.op-strip{display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;margin-bottom:1.2rem;border-radius:var(--r-panel);border:1px solid var(--line2);background:var(--surf);color:var(--fg)}
.op-strip:hover{border-color:var(--ac);color:var(--fg)}
.op-strip>.bi{font-size:1.2rem;color:var(--ac-text)}
.op-strip .grow{display:flex;flex-direction:column}
.op-strip .grow span{font-size:.88rem;color:var(--mute)}
.op-strip em{font-style:normal;color:var(--warn);font-weight:600}
.section-title{font-size:1.05rem;letter-spacing:calc(.08em * var(--ls-head));margin:2.2rem 0 .9rem}
.fold{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surf)}
.fold>summary{padding:.8rem 1.1rem;cursor:pointer;font-weight:600;color:var(--fg2);list-style:none;display:flex;justify-content:space-between}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"\25BE";color:var(--mute)}
.fold[open]>summary::after{transform:rotate(180deg)}
.fold>:not(summary){padding:0 1.1rem 1rem}
.fold .list{padding:0}
.fold--danger>summary{color:var(--lose)}
.auth-title{font-size:clamp(1.6rem,3vw,2rem);margin:0 0 1rem}
.auth-note{margin:1rem .2rem 0;font-size:.86rem;color:var(--mute);text-align:center}
.auth .panel{border-top-width:1px}
/* Startseite 2.7 */
.site-note{margin:1.1rem 0 0;color:var(--mute);font-size:.92rem}
.site-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center}
.site-row--flip .site-row-text{order:2}
.site-row .site-h2{margin-bottom:1.2rem;display:flex;align-items:center;gap:.7rem}
.site-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem;color:var(--fg2);line-height:1.6}
.site-list li{padding-left:1.1rem;border-left:2px solid var(--line2)}
.site-list b{color:var(--fg-strong);font-weight:600}
.site-specs{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.1rem 2.5rem}
.site-specs li{padding:.75rem 0;border-bottom:1px solid var(--line);color:var(--fg2)}
.site-section>.site-h2{margin-bottom:1.4rem}
.site-contact{margin-top:1.4rem;color:var(--fg2)}
.price ul{gap:.7rem}
.price li{color:var(--fg2)}
.price li b{color:var(--fg-strong)}
@media (max-width:900px){.site-row{grid-template-columns:1fr;gap:1.6rem}.site-row--flip .site-row-text{order:0}}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.signup{max-width:620px;margin:1rem auto 0;display:block}
.form-section{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);padding-top:.4rem;border-top:1px solid var(--line);margin-top:.4rem}
.form-section:first-of-type{border-top:none;padding-top:0;margin-top:0}
/* Startseite 2.8 */
.hero2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;align-items:center;padding:2.2rem 0 2.6rem}
.hero2 h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1;margin-bottom:1rem}
.hero2-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line2);box-shadow:var(--shadow-lg)}
.facts{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;margin:1.8rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line)}
.facts div{min-width:7rem}
.facts dt{font-family:var(--f-head);font-weight:700;font-size:1.5rem;color:var(--fg-strong);line-height:1.1}
.facts dd{margin:.2rem 0 0;font-size:.85rem;color:var(--mute)}
.feat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--line)}
.feat3>div{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.3rem;background:var(--surf);margin:0 1px 1px 0}
.feat3 b{color:var(--fg-strong);font-weight:700;display:flex;align-items:center;gap:.5rem}
.feat3 span{color:var(--fg2);font-size:.93rem;line-height:1.55}
.feat-more{margin:1rem 0 0;color:var(--mute);font-size:.92rem}
.tour{margin-top:2.4rem;display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1.5rem;align-items:start}
.tour-tabs{display:flex;flex-direction:column;gap:.4rem}
.tour-tabs button{display:flex;flex-direction:column;gap:.15rem;text-align:left;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--fg2);cursor:pointer;font:inherit}
.tour-tabs button b{color:var(--fg);font-weight:600}
.tour-tabs button span{font-size:.85rem;color:var(--mute)}
.tour-tabs button:hover{border-color:var(--line2)}
.tour-tabs button[aria-selected="true"]{border-color:var(--ac);background:rgba(var(--ac-rgb),.08)}
.tour-tabs button[aria-selected="true"] b{color:var(--fg-strong)}
.tour-stage img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line2);box-shadow:var(--shadow-lg)}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.sec-head .site-h2{margin:0}
.showcase.showcase--6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.hero2{grid-template-columns:1fr;gap:1.8rem;padding-top:1rem}.feat3{grid-template-columns:1fr 1fr}.tour{grid-template-columns:1fr}.tour-tabs{flex-direction:row;overflow-x:auto}.tour-tabs button{flex:1 0 11rem}.showcase.showcase--6{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.feat3{grid-template-columns:1fr}.showcase.showcase--6{grid-template-columns:1fr 1fr}}
.tour-stage img[hidden]{display:none}

/* ── 2.9: einheitliche Raster & Handy-Feinschliff ── */
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){
  .tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{gap:1rem 1.4rem;padding:1.1rem}
  .wld{gap:1.1rem}
  .wld div b{font-size:1.8rem}
  .tile b{font-size:1.7rem}
  .list-row{padding:.7rem 1rem;gap:.7rem}
  .table th,.table td{padding-left:.7rem;padding-right:.7rem}
}
.sm-only{display:none}
@media (max-width:640px){
  .sm-only{display:block}
  .table--m :is(th,td):is(:nth-child(2),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){display:none}
  .table--wdl :is(th,td):is(:nth-child(4),:nth-child(7)){display:none}
  .table--stats :is(th,td):nth-child(6){display:none}
  .table--stats :is(th,td):nth-child(7){display:table-cell}
  .table--wdl th{min-width:0!important}
  .table--wdl .meter{display:none}
  .table--wdl td>div{gap:.5rem!important}
  .table--stats .thumb{width:2.6rem;height:1.9rem}
}
@media (max-width:640px){
  .table{font-size:.9rem}
  .table th,.table td{padding:.6rem .4rem}
  .table th:first-child,.table td:first-child{padding-left:.9rem}
  .table th:last-child,.table td:last-child{padding-right:.9rem}
  .table th{font-size:.62rem;letter-spacing:.06em}
  .table--wdl .avatar{display:none}
}
@media (max-width:640px){.table th.sortable:not(.sort-asc):not(.sort-desc)::after{display:none}}

/* ── 2.9: Kopfzeile der Plattform-Seiten (Startseite, Konto, Verwaltung) ── */
.pbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.pbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac)}
.pbar-in{display:flex;align-items:center;gap:1.4rem;max-width:var(--content-max);min-height:4rem;margin:0 auto;padding:.5rem 1.4rem}
.pbar-brand{display:flex;align-items:center;gap:.65rem;color:var(--fg-strong);font-family:var(--f-head);font-weight:700;font-size:1.08rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pbar-brand:hover{color:var(--fg-strong)}
.pbar-brand img{width:2rem;height:2rem;border-radius:7px}
.pbar-nav{display:flex;gap:.2rem;margin-right:auto}
.pbar-nav a{display:flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:8px;color:var(--fg2);font-weight:600;font-size:.94rem;white-space:nowrap}
.pbar-nav a .bi{display:none}
.pbar-nav a:hover{color:var(--fg-strong);background:rgba(var(--fg-rgb),.05)}
.pbar-nav a[aria-current="page"]{color:var(--fg-strong);background:rgba(var(--ac-rgb),.14)}
.pbar-right{display:flex;align-items:center;gap:.5rem}
.pmenu{display:none;position:relative}
.pmenu summary{list-style:none;border-color:var(--line2)}
.pmenu summary::-webkit-details-marker{display:none}
.pmenu summary .bi-x-lg,.pmenu[open] summary .bi-list{display:none}
.pmenu[open] summary .bi-x-lg{display:inline}
.pmenu-panel{position:fixed;left:.8rem;right:.8rem;top:4.4rem;z-index:80;display:flex;flex-direction:column;gap:.8rem;padding:.8rem;border-radius:16px;background:var(--surf);border:1px solid var(--line2);box-shadow:var(--shadow-lg)}
.pmenu-panel nav{display:flex;flex-direction:column}
.pmenu-panel nav a{display:flex;align-items:center;gap:.8rem;padding:.8rem .7rem;border-radius:10px;font-weight:600;color:var(--fg)}
.pmenu-panel nav a .bi{width:1.3rem;color:var(--ac-text);font-size:1.1rem}
.pmenu-panel nav a[aria-current="page"]{background:rgba(var(--ac-rgb),.12)}
.pmenu-act{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.8rem;border-top:1px solid var(--line)}
.pmenu-act>.btn,.pmenu-act>.bar-user{flex:1;justify-content:center;min-height:2.8rem}
.pmenu-act .bar-user-name{display:flex}
@media (max-width:900px){
  .pbar-nav,.pbar-right{display:none}
  .pmenu{display:block;margin-left:auto}
  .pbar-in{min-height:3.6rem;padding:.4rem .9rem}
  .site .main{padding-left:1rem;padding-right:1rem}
}
@media (max-width:640px){
  .table--inst :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)){display:none}
  .table--pay :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(6),:nth-child(7)){display:none}
}
@media (max-width:640px){
  .table--users :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(6)){display:none}
  .table--maps :is(th,td):is(:nth-child(2),:nth-child(5),:nth-child(6)){display:none}
  .table td .btn-row,.table td.right{white-space:normal}
}