/* ═══════════════════════════════════════════════════════════════
   DRAFT COACH - eigenstaendiges Stylesheet

   Eine dichte App-Oberflaeche hat andere Beduerfnisse als eine
   klassische Fliesstextseite.

   Leitlinie: das hier ist ein WERKZEUG, das waehrend eines laufenden
   Ranked-Drafts bedient wird. Ein Draft gibt einem Sekunden. Deshalb:

     - Auf dem Desktop scrollt die SEITE nicht. Die drei Spalten
       scrollen fuer sich, alles Wichtige steht gleichzeitig da.
     - Bilder vor Text. Im Gitter steht Portrait und Name, sonst nichts.
     - Was jetzt zu tun ist, steht gross in der Leiste - nicht als
       Nebensatz irgendwo.
     - Nichts Dekoratives, das Platz oder Zeit kostet. Uebergaenge nur
       dort, wo sie eine Zustandsaenderung verstaendlich machen.

   Aufbau:
     1. Tokens
     2. Grundgeruest und Kopf
     3. Aktionsleiste
     4. Map-Waehler
     5. Raster der Draft-Seite
     6. Brett (Slots)
     7. Brawler-Gitter
     8. Empfehlungspanel
     9. Matchplan und Aufschluesselung
    10. Modal
    11. Nebenseiten (Meine Brawler, Login)
    12. Schmale Fenster
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0. Schriften ────────────────────────────────────────── */
/* Selbst gehostet (SIL OFL, Lizenztexte in static/drafter/fonts/) statt
   von Google Fonts - dort kamen sie mit `display=swap`, und der Wechsel
   von der Ersatz- zur Webschrift verschob auf dem Telefon die ganze
   Aktionsleiste (CLS ~0,11): andere Zeichenbreiten, andere Umbrueche.

   `font-display: optional` statt `swap`: der Browser wartet sehr kurz
   (~100 ms) auf die Schrift; ist sie bis dahin nicht da, bleibt die
   Ersatzschrift fuer diesen Seitenaufruf stehen. Es gibt also nie einen
   Wechsel mitten im Bild. Vorgeladen (basis.html) und mit Hash im
   Dateinamen - WhiteNoise liefert sie damit als "immutable" aus, ab dem
   zweiten Besuch kommen sie ohne Netzanfrage aus dem Cache und schaffen
   die 100 ms sicher. Nur der allererste Aufruf ueber langsames Netz
   zeigt die Ersatzschrift.

   Nur der Latin-Ausschnitt (wie bei Google Fonts); Zeichen ausserhalb
   des Bereichs kommen aus der Ersatzschrift. */
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: optional;
  src: url('fonts/dm-mono-400-latin.e1896b13b2b1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: optional;
  src: url('fonts/dm-mono-500-latin.9964608a8493.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: optional;
  src: url('fonts/bebas-neue-400-latin.a7c90c89240c.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── 1. Tokens ───────────────────────────────────────────── */
:root {
  --bg:        #06111a;
  --bg-2:      #0b1822;
  --bg-3:      #10212d;
  --bg-4:      #132a38;
  --rand:      #173747;
  --rand-hell: #28566b;
  --text:      #f3f7fa;
  --text-leise:#91a6b7;
  --text-sehr-leise: #60788a;

  --wir:       #20d5f5;
  --gegner:    #ff4564;
  --ban:       #73899a;
  --ban-hell:  #9eb2c0;
  --gut:       #42e89b;
  --warn:      #f5ba55;
  --akzent:    #ff7a2f;

  --display: 'Bebas Neue', Impact, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 7px;
  --schatten: 0 14px 38px rgba(0, 0, 0, .42);
  --glow-wir: 0 0 18px rgba(32, 213, 245, .12);
  --glow-akzent: 0 0 18px rgba(255, 122, 47, .12);
}

/* ─── 2. Grundgeruest ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.drafter {
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(32, 213, 245, .025) 72% 73%, transparent 73%),
    radial-gradient(circle at 50% -20%, rgba(20, 82, 108, .22), transparent 42%),
    var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
button:active:not(:disabled) { transform: translateY(1px); }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid #ffd2b4; outline-offset: 2px; }

/* Portrait bzw. Map-Bild: eingefaerbter Platzhalter mit Kuerzel, das
   echte Bild als <img> darueber. Der Platzhalter steht ab dem ersten
   Frame und bleibt, wenn die Datei fehlt. `contain` statt `cover`: das
   Fan Kit erlaubt kein Beschneiden der Bilder. */
.bild {
  position: relative; overflow: hidden; isolation: isolate;
  background-clip: padding-box;
}
.bild > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%;
  border-radius: inherit; image-rendering: auto;
  display: block; opacity: 0;
  transition: opacity .16s ease-out;
}
/* Erst nach dem Laden den Platzhalter wegnehmen - sonst stuende bis
   dahin eine leere Flaeche da. `!important`, weil die Platzhalterfarbe
   inline am Knoten steht. */
.bild.ist-geladen { background: var(--bg-3) !important; }
.bild.ist-geladen > .bild-kuerzel { visibility: hidden; }
.bild.ist-geladen > img { opacity: 1; }
.bild.ist-fehlend::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 47%, rgba(255,255,255,.1) 48% 50%, transparent 51%);
  opacity: .32;
}

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

kbd {
  font-family: var(--mono); font-size: 9.5px; line-height: 1;
  padding: 2px 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .08); color: var(--text-sehr-leise);
  border: 1px solid var(--rand-hell);
}

.kopf {
  position: relative; display: flex; align-items: stretch; justify-content: space-between;
  gap: 32px; min-height: 64px; padding: 0 30px; flex-shrink: 0;
  border-bottom: 1px solid rgba(32, 213, 245, .3);
  background: linear-gradient(110deg, #091721, #0b1720 72%, #0c202b);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.kopf::after {
  content: ""; position: absolute; right: 28px; bottom: -1px;
  width: 170px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--wir));
}
.kopf-marke {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display); font-size: 28px; letter-spacing: .065em;
  white-space: nowrap;
}
.kopf-emblem {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  color: #07111a; background: var(--warn);
  border: 3px solid #eef8ff; transform: rotate(45deg);
  box-shadow: 0 0 0 3px #0b2635, 0 0 16px rgba(32, 213, 245, .2);
}
.kopf-emblem span { transform: rotate(-45deg); font-family: sans-serif; font-size: 22px; }
.kopf-titel { display: inline-flex; align-items: baseline; }
.kopf-marke-stark { color: var(--text); text-shadow: 0 0 12px rgba(210, 238, 255, .18); }
.kopf-marke-leicht { color: var(--akzent); }
.kopf-nav { display: flex; align-items: stretch; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.kopf-nav a, .kopf-abmelden button {
  position: relative; display: flex; align-items: center;
  color: var(--text-leise); padding: 0 16px;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s, background .15s;
}
.kopf-nav a:hover, .kopf-abmelden button:hover { color: var(--text); background: rgba(255, 255, 255, .025); }
.kopf-nav a.ist-aktiv {
  color: var(--text); border-bottom-color: var(--akzent);
  text-shadow: 0 0 10px rgba(255, 122, 47, .28);
}
.kopf-zurueck { color: var(--text-sehr-leise) !important; }
.kopf-abmelden { display: inline; }

/* Pflichthinweis der Supercell Fan Content Policy. Klein, aber auf jeder
   Seite - auch dort, wo gerade kein Bild zu sehen ist. */
.fuss {
  flex-shrink: 0; padding: 4px 20px;
  font-size: 10px; line-height: 1.4; color: var(--text-sehr-leise);
  border-top: 1px solid var(--rand);
}
.fuss a { text-decoration: underline; }

/* ─── 3. Aktionsleiste ────────────────────────────────────── */
/* Map, First Pick, Ban/Pick und "wer ist dran" auf einer Zeile. Alles
   vier braucht man waehrend des ganzen Drafts - nichts davon darf in
   einem Menue liegen oder aus dem Bild scrollen. */
.aktionsleiste {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(245px, 1.15fr) minmax(150px, .72fr)
    minmax(170px, .8fr) minmax(225px, 1fr) minmax(145px, .62fr);
  align-items: stretch; gap: 12px; flex-shrink: 0;
  padding: 12px 24px 14px;
  background: rgba(5, 16, 24, .9); border-bottom: 1px solid rgba(32, 213, 245, .13);
}

.steuerpaar, .datenkarte {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 7px;
  min-width: 0; padding: 10px 14px;
  background: linear-gradient(145deg, rgba(16, 36, 49, .96), rgba(8, 24, 34, .96));
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.steuerpaar::after, .datenkarte::after, .phaseanzeige::after, .mapknopf::after {
  content: ""; position: absolute; right: -1px; top: -1px;
  width: 18px; height: 18px; pointer-events: none;
  border-top: 1px solid rgba(32, 213, 245, .28); border-right: 1px solid rgba(32, 213, 245, .28);
}
.steuer-etikett {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: #86a5b8;
}

/* Segmentschalter. Gross genug fuer den Daumen, aktiver Zustand
   nicht nur farbig, sondern gefuellt - auf einem hellen Bildschirm im
   Sonnenlicht ist ein Rahmenwechsel nicht zu sehen. */
.schalter {
  display: flex; min-width: 0; border: 1px solid var(--rand-hell);
  border-radius: 6px; overflow: hidden; background: rgba(4, 14, 21, .5);
}
.schalter button {
  display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1;
  min-width: 0; padding: 9px 10px; font-size: 12px; color: var(--text-leise);
  background: rgba(13, 31, 43, .82); transition: background .12s, color .12s, box-shadow .12s;
  min-height: 40px; white-space: nowrap;
}
.schalter button:hover { color: var(--text); }
.schalter button.ist-aktiv {
  background: linear-gradient(135deg, #ff914c, var(--akzent)); color: #14100c;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 178, .24), var(--glow-akzent);
  font-weight: 500;
}
.schalter button.ist-aktiv kbd { background: rgba(0, 0, 0, .2); color: #3a2a1e; border-color: rgba(0,0,0,.25); }
.schalter button:disabled { cursor: not-allowed; opacity: .58; }
.schalter button.ist-aktiv:disabled { opacity: 1; }
.schalter--drafttyp button { font-size: 10px; white-space: normal; line-height: 1.15; }
.drafttyp-hinweis { color: var(--text-sehr-leise); font-size: 8px; line-height: 1.25; }
/* Map als Knopf, nicht als <select>: der Waehler dahinter kann suchen,
   gruppieren und zuletzt Benutztes zeigen. Ein Dropdown kann das nicht. */
/* Feste Breite: vorher wuchs der Knopf, sobald "wählen" durch den
   Mapnamen ersetzt wurde, und schob First-Pick- und Modusschalter nach
   rechts. Lange Namen kuerzt die Ellipse. */
.mapknopf {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  align-items: flex-start; min-width: 0; padding: 10px 16px;
  background: linear-gradient(145deg, rgba(16, 36, 49, .96), rgba(8, 24, 34, .96));
  border: 1px solid var(--rand); border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s;
}
.mapknopf:hover { border-color: var(--wir); box-shadow: var(--glow-wir); }
.mapknopf-etikett {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: #86a5b8;
}
.mapknopf-zeile { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: 100%; overflow: hidden; }
.mapknopf-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mapknopf-modus { font-family: var(--display); font-size: 17px; line-height: 1.05; color: var(--text); white-space: nowrap; }
.mapknopf.ist-leer { border-color: var(--akzent); }
.mapknopf.hat-bild { padding-left: 74px; }
.mapknopf-bild {
  position: absolute; left: 13px; top: 50%; transform: translateY(-35%);
  width: 48px; height: 42px; border-radius: 4px; border: 1px solid var(--rand-hell);
}

/* Der wichtigste Text der Seite steht als Hinweis im linken Draft-Board. */
.jetzt {
  min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--radius);
  background: linear-gradient(105deg, rgba(20, 55, 72, .68), rgba(9, 27, 38, .92));
  border: 1px solid var(--rand-hell); border-left: 3px solid var(--rand-hell);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.jetzt-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  color: var(--text-leise); border: 1px solid currentColor; border-radius: 50%;
}
.jetzt-inhalt { display: flex; flex-direction: column; min-width: 0; }
.jetzt::after { content: "›"; margin-left: auto; color: var(--text-leise); font-size: 26px; }
.jetzt-text {
  font-family: var(--display); font-size: 19px; line-height: 1.05;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Zusatzzeile ist beim Laden leer und bekommt erst mit der ersten
   Antwort die Phase - ohne Mindesthoehe rutschte die grosse Zeile
   darueber dabei nach oben. */
.jetzt-zusatz {
  font-size: 10px; line-height: 15px; min-height: 15px; color: var(--text-leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jetzt--wir    { border-left-color: var(--wir); box-shadow: var(--glow-wir); }
.jetzt--wir    .jetzt-text { color: var(--wir); }
.jetzt--gegner { border-left-color: var(--gegner); }
.jetzt--gegner .jetzt-text { color: var(--gegner); }
.jetzt--ban    { border-left-color: var(--ban-hell); }
.jetzt--ban    .jetzt-text { color: var(--ban-hell); }
.jetzt--fertig .jetzt-text { color: var(--text-leise); }

.phaseanzeige {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 10px 18px; border-radius: var(--radius);
  background: linear-gradient(125deg, rgba(255, 122, 47, .15), rgba(12, 30, 41, .96) 70%);
  border: 1px solid rgba(255, 122, 47, .72); box-shadow: var(--glow-akzent);
}
.phaseanzeige-label {
  color: #9db0be; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
}
.phaseanzeige strong {
  color: #ff9b5e; font-family: var(--display); font-size: 26px;
  font-weight: 400; letter-spacing: .06em; white-space: nowrap;
}
.phaseanzeige[data-phase="last-pick"] { border-color: var(--akzent); }
.phaseanzeige[data-phase="last-pick"] strong { color: #ff9b5e; }

.datenkarte { padding-right: 10px; }
.datenkarte-zeile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.datenkarte-punkt {
  width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%;
  background: var(--gut); box-shadow: 0 0 10px rgba(66, 232, 155, .55);
}
.datenkarte-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.datenkarte-text small { color: var(--text-sehr-leise); font-size: 9px; white-space: nowrap; }
.engine-status {
  position: absolute; right: 9px; bottom: 9px;
  display: flex; align-items: center; gap: 4px; max-width: 56%;
  color: var(--text-sehr-leise); font-size: 8px; line-height: 1;
}
.engine-status-punkt {
  display: block; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%;
  background: var(--text-sehr-leise);
}
.engine-status strong {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-leise); font-size: 8px; letter-spacing: .06em;
  font-weight: 500; text-transform: uppercase;
}
.engine-status[data-status^="EXPERIMENTAL"] { color: var(--warn); }
.engine-status[data-status^="EXPERIMENTAL"] .engine-status-punkt {
  background: var(--warn); box-shadow: 0 0 0 3px rgba(232, 176, 74, .14);
}
.engine-status[data-status^="EXPERIMENTAL"] strong { color: var(--warn); }
.datenlage {
  font-size: 11px; font-weight: 500; color: var(--text); white-space: nowrap;
  cursor: help;
}
.knopf-zuruecksetzen {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px; font-size: 11.5px; color: var(--text);
  background: linear-gradient(145deg, rgba(16, 36, 49, .96), rgba(8, 24, 34, .96));
  border: 1px solid var(--rand); border-radius: var(--radius); min-height: 64px;
}
.knopf-zuruecksetzen span { font-size: 20px; color: var(--text-leise); }
.knopf-zuruecksetzen:hover { color: var(--gegner); border-color: var(--gegner); }

/* ─── 4. Map-Waehler ──────────────────────────────────────── */
.mapwaehler {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .55);
}
.mapwaehler[hidden] { display: none; }
/* Der Kasten haengt am Map-Knopf - seine Position setzt JavaScript aus
   dem Rechteck des Knopfes. Eine feste Zahl waere hier eine Falle: sie
   haengt an der Hoehe von Kopf, Demo-Hinweis und Leiste, und die drei
   aendern sich beim naechsten Satz mehr Text. */
.mapwaehler-kasten {
  position: fixed;
  width: min(380px, calc(100vw - 40px)); max-height: min(62vh, 560px);
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--rand-hell);
  border-radius: 8px; box-shadow: var(--schatten); overflow: hidden;
}
.mapwaehler-suche {
  padding: 11px 14px; font-size: 14px; border: none;
  background: var(--bg-3); border-bottom: 1px solid var(--rand);
}
.mapwaehler-liste { overflow-y: auto; padding: 6px; }
.mapwaehler-gruppe { margin-bottom: 6px; }
.mapwaehler-gruppe h3 {
  padding: 6px 8px 4px; font-size: 9.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-sehr-leise);
}
.mapzeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border-radius: 5px; text-align: left;
}
.mapzeile-bild {
  width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); background-size: cover; background-position: center;
  font-family: var(--display); font-size: 13px; color: var(--text-sehr-leise);
}
.mapzeile-text { display: flex; flex-direction: column; min-width: 0; }
.mapzeile-name { font-size: 13px; }
.mapzeile-modus { font-size: 10.5px; color: var(--text-sehr-leise); }
.mapzeile:hover, .mapzeile.ist-markiert { background: var(--bg-3); }
.mapzeile.ist-markiert { outline: 1px solid var(--akzent); }
.mapzeile.ist-aktuell .mapzeile-name { color: var(--akzent); }

/* ─── 5. Raster ───────────────────────────────────────────── */
/* Drei Spalten: Brett | Brawlergitter | Empfehlungen. Die mittlere
   waechst, die aeusseren sind fest - ein Gitter, dessen Spaltenzahl
   sich beim Tippen aendert, macht das Wiederfinden unmoeglich. */
.drafter-raster {
  display: grid;
  grid-template-columns: clamp(292px, 22vw, 390px) minmax(560px, 1fr) clamp(350px, 26vw, 470px);
  gap: 16px; padding: 0 22px 14px;
  max-width: 1940px; margin: 0 auto; width: 100%;
}
/* Rasterkinder haben von Haus aus `min-width: auto` und wachsen damit
   ueber ihre Spalte hinaus, sobald etwas darin breiter ist - auf
   schmalen Fenstern schob der waagerechte Empfehlungsstreifen so die
   ganze Seite auf 1400px auf. */
.drafter-raster > * { min-width: 0; }

/* Auf dem Desktop scrollt die Seite nicht, sondern jede Spalte fuer
   sich. Alles, was man waehrend eines Drafts braucht, ist damit
   gleichzeitig sichtbar - Scrollen ist die teuerste Geste, die eine
   Oberflaeche verlangen kann, wenn eine Uhr laeuft. */
@media (min-width: 1101px) {
  body.ist-draftseite { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .drafter-raster { flex: 1; min-height: 0; }
  .brett, .auswahl, .panel { max-height: 100%; min-height: 0; }
  .brett, .panel { overflow-y: auto; }
  .auswahl { display: flex; flex-direction: column; }
}

/* ─── 6. Brett ────────────────────────────────────────────── */
.brett { display: flex; flex-direction: column; gap: 12px; }
.brett-block {
  position: relative; padding: 13px 14px 14px;
  background: linear-gradient(145deg, rgba(13, 31, 43, .98), rgba(7, 22, 32, .98));
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
  overflow: hidden;
}
.brett-block::after {
  content: ""; position: absolute; right: -15px; top: -30px;
  width: 100px; height: 80px; transform: rotate(-28deg);
  background: linear-gradient(90deg, transparent, rgba(32, 213, 245, .025));
  pointer-events: none;
}
.brett-block h2 {
  font-family: var(--display); font-size: 20px; letter-spacing: .08em;
  font-weight: 400; margin-bottom: 11px; padding-bottom: 6px;
  display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
}
.brett-block h2::before { margin-right: 2px; font-family: sans-serif; font-size: 17px; }
.brett-block--wir { border-left: 3px solid var(--wir); box-shadow: var(--glow-wir); }
.brett-block--wir h2 { color: var(--wir); }
.brett-block--wir h2::before { content: "◆"; }
.brett-block--gegner { border-left: 3px solid var(--gegner); box-shadow: 0 0 18px rgba(255, 69, 100, .09); }
.brett-block--gegner h2 { color: var(--gegner); }
.brett-block--gegner h2::before { content: "✦"; }
.brett-block--ban h2 { color: var(--ban-hell); }
.brett-block--ban h2::before { content: "⊘"; color: var(--gegner); }
.brett-block--ban { padding-left: 11px; padding-right: 11px; border-left: 3px solid var(--gegner); }
.brett-hinweis {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--text-leise); letter-spacing: 0;
}

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slots--ban { grid-template-columns: repeat(6, 1fr); gap: 3px; }

.slot {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(145deg, var(--bg-4), #0b1923);
  border: 1px dashed var(--rand-hell);
  border-radius: 6px; font-size: 11px; color: var(--text-sehr-leise);
  transition: border-color .12s, background .12s, box-shadow .12s;
  overflow: hidden; text-align: center; padding: 3px;
}
.slot.ist-ziel {
  border-style: solid; border-color: var(--wir);
  background: rgba(32, 213, 245, .08); color: var(--wir); box-shadow: var(--glow-wir);
}
.slot.ist-belegt { border-style: solid; }
.slot.ist-belegt:hover { border-color: var(--gegner) !important; }
.slot.ist-neu { animation: auswahl-bestaetigt .46s ease-out; }
.slot-bild {
  width: min(72px, 82%); height: auto; aspect-ratio: 1; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 19px; letter-spacing: .04em; color: #0d0e10;
  background-size: cover; background-position: center;
}
.slot-name {
  font-family: var(--display); font-size: 13px; letter-spacing: .035em;
  color: var(--text); line-height: 1.05;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slots--ban .slot { aspect-ratio: .9; padding: 2px; }
.slots--ban .slot-bild { width: 90%; height: auto; aspect-ratio: 1; font-size: 13px; }
.slots--ban .slot-name { display: none; }
.slot--ban.ist-belegt .slot-bild { filter: grayscale(.55) brightness(.72); }
.slot--ban.ist-belegt::after {
  content: "⊘"; position: absolute; right: 2px; bottom: 0;
  color: var(--gegner); font-size: 17px; line-height: 1;
  filter: drop-shadow(0 0 3px #06111a);
}
.slot-leer:empty::before { content: "+"; font-size: 22px; color: var(--text-sehr-leise); }

/* ─── 7. Brawler-Gitter ───────────────────────────────────── */
.auswahl {
  position: relative; padding: 14px;
  background: linear-gradient(145deg, rgba(11, 28, 39, .98), rgba(7, 21, 30, .98));
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}
.auswahl-kopf {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px; flex-shrink: 0;
}
.suchfeld { position: relative; flex: 1; min-width: 220px; }
.suchfeld-symbol {
  position: absolute; left: 15px; top: 50%; width: 15px; height: 15px;
  border: 2px solid #8cb8d3; border-radius: 50%; transform: translateY(-58%);
  pointer-events: none;
}
.suchfeld-symbol::after {
  content: ""; position: absolute; width: 7px; height: 2px; right: -6px; bottom: -3px;
  background: #8cb8d3; transform: rotate(45deg); border-radius: 2px;
}
#suche {
  width: 100%; padding: 12px 36px 12px 45px; font-size: 13px;
  background: rgba(9, 28, 39, .88); border: 1px solid var(--rand-hell); border-radius: 7px;
  transition: border-color .12s, box-shadow .12s;
}
#suche:focus { border-color: var(--wir); outline: none; box-shadow: var(--glow-wir); }
.suchfeld-taste { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }
#suche:focus + .suchfeld-taste { display: none; }

.sortierung select {
  min-height: 43px; padding: 9px 29px 9px 12px; font-size: 12px;
  background: var(--bg-3); border: 1px solid var(--rand-hell); border-radius: 7px;
}
/* Herkunftszeile im Detailfenster: welches Zeitfenster die Zahlen
   stellt. Leise, aber lesbar - sie widerspricht im Zweifel dem, was man
   annimmt. */
.fensterlage {
  margin: 6px 0 2px; font-size: 11.5px; color: var(--text-sehr-leise);
  line-height: 1.45;
}
.fensterlage strong { color: var(--text-leise); }

/* Analysemodus - ein Schalter, kein Fragezeichen je Kachel. Aktiv
   faerbt er sich und das Gitter bekommt einen Fragezeichen-Cursor, damit
   der veraenderte Klick sichtbar ist, bevor man ihn ausprobiert. */
.analyseschalter {
  min-height: 43px; padding: 9px 11px; font-size: 11px; color: var(--text-sehr-leise);
  background: var(--bg-3); border: 1px solid var(--rand-hell); border-radius: 7px;
  white-space: nowrap; transition: color .12s, border-color .12s;
}
.analyseschalter:hover { color: var(--text-leise); }
.analyseschalter[aria-pressed="true"] { color: var(--akzent); border-color: var(--akzent); }

/* Portraits so gross wie moeglich, ohne dass die Zahl der gleichzeitig
   sichtbaren Kacheln faellt. 74px Spaltenbreite sind auf 1440px rund
   zehn Kacheln je Zeile und zugleich ein sicheres Touch-Ziel. */
.gitter {
  display: grid; grid-template-columns: repeat(6, minmax(78px, 1fr));
  /* max-content: die Kacheln haben overflow: hidden und damit keine
     Mindesthoehe - in der scrollenden Desktopspalte quetschte der Browser
     bei 108 Kacheln alle Zeilen auf die Spaltenhoehe zusammen. */
  grid-auto-rows: max-content;
  gap: 8px; overflow-y: auto; padding-right: 5px; align-content: start;
  flex: 1; min-height: 0;
}
.kachel {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 5px 5px 7px; overflow: hidden;
  background: linear-gradient(145deg, var(--bg-4), #0a1922); border: 1px solid var(--rand);
  border-radius: 7px; transition: border-color .12s, transform .12s, box-shadow .12s;
}
.kachel:hover:not(.ist-gesperrt) {
  border-color: var(--wir); transform: translateY(-1px); box-shadow: var(--glow-wir);
}
.kachel.ist-gesperrt { opacity: .38; cursor: not-allowed; filter: grayscale(.82); }
.kachel.ist-gebannt { border-color: rgba(255, 69, 100, .58); }
.kachel.ist-gebannt::after {
  content: "BAN"; position: absolute; inset: 40% 4px auto; z-index: 2;
  color: #fff; background: rgba(164, 19, 48, .84); border: 1px solid var(--gegner);
  font-family: var(--display); font-size: 12px; letter-spacing: .12em; line-height: 1.3;
  transform: rotate(-8deg); box-shadow: 0 0 8px rgba(255,69,100,.22);
}
.kachel.ist-eigener-pick { border-color: rgba(32, 213, 245, .6); }
.kachel.ist-gegner-pick { border-color: rgba(255, 69, 100, .48); }
.kachel-bild {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 24px; color: #0d0e10;
  background-size: cover; background-position: center;
}
.kachel-name {
  font-family: var(--display); font-size: 13px; letter-spacing: .035em;
  color: var(--text); text-align: center; line-height: 1.05;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachel-score {
  position: absolute; top: 7px; right: 7px;
  padding: 2px 5px; font-size: 9px; border-radius: 4px;
  background: rgba(4, 11, 16, .88); color: #f5c66d; border: 1px solid rgba(245, 186, 85, .24);
}
.kachel-score.ist-gut { color: var(--gut); }
.kachel-score.ist-schwach { color: var(--gegner); }
.kachel-rang {
  position: absolute; top: 7px; left: 7px;
  min-width: 16px; padding: 1px 3px; text-align: center;
  font-family: var(--display); font-size: 12px; line-height: 1.25; border-radius: 3px;
  background: var(--akzent); color: #12100e;
}
/* Persoenliche Sicherheit als Streifen am unteren Rand: sichtbar, ohne
   eine Zahl mehr auf die Kachel zu holen. */
.kachel-sicher { position: absolute; left: 0; bottom: 0; height: 2px; }
.kachel-sicher.ist-hoch { background: var(--wir); }
.kachel-sicher.ist-niedrig { background: var(--gegner); opacity: .6; }

/* Modifikator-Regeln stehen IMMER hinter ihrer Basisregel - bei
   gleicher Spezifitaet gewinnt die spaetere. Siehe CLAUDE.md. */
.kachel.ist-empfohlen { border-color: rgba(32, 213, 245, .48); }
.kachel.ist-bester { border-color: var(--wir); box-shadow: var(--glow-wir); }
.gitter.ist-banmodus .kachel.ist-empfohlen { border-color: rgba(154, 163, 176, .55); }
.gitter.ist-banmodus .kachel.ist-bester { border-color: var(--ban-hell); }
.gitter.ist-banmodus .kachel-rang { background: var(--ban-hell); color: #14161a; }

/* Im Analysemodus erklaert der Klick, statt zu waehlen. */
.gitter.ist-analyse .kachel { cursor: help; }
.gitter.ist-analyse .kachel:hover:not(.ist-gesperrt) { border-color: var(--akzent); }

.kachel-score--teil { border: 1px dashed rgba(232, 176, 74, .55); }
.vorschlag-wp--teil { color: var(--warn); }
.komponente-unbekannt { font-size: 11px; color: var(--text-sehr-leise); font-style: italic; }
.slot.ist-limited { position: relative; }
.slot-limited {
  position: absolute; top: 2px; right: 2px; padding: 0 3px; border-radius: 2px;
  font-size: 8px; line-height: 1.4; color: var(--warn); background: rgba(0, 0, 0, .72);
}

/* ─── 8. Empfehlungspanel ─────────────────────────────────── */
.panel {
  position: relative; padding: 14px;
  background: linear-gradient(145deg, rgba(10, 29, 40, .98), rgba(6, 20, 29, .98));
  border: 1px solid var(--rand); border-left: 3px solid var(--akzent);
  border-radius: var(--radius); transition: border-color .14s, box-shadow .14s;
  box-shadow: var(--glow-akzent), inset 0 1px 0 rgba(255, 255, 255, .015);
  overflow-x: hidden;
  container-type: inline-size;
}
.panel::after {
  content: ""; position: absolute; right: -1px; top: -1px;
  width: 66px; height: 2px; background: var(--wir); box-shadow: 0 0 10px rgba(32, 213, 245, .38);
}
/* Waehrend eine Antwort unterwegs ist bleibt der alte Inhalt stehen und
   wird nur gedaempft. Loeschen waere ehrlicher, fuehlt sich aber an wie
   ein Haenger - und die vorige Empfehlung ist fuer eine Sekunde eine
   bessere Auskunft als eine leere Flaeche. */
.panel.ist-laedt .panel-inhalt { opacity: .42; filter: saturate(.7); }
.panel-inhalt { transition: opacity .14s, filter .14s; }
.panel-inhalt.ist-aktualisiert { animation: panel-aktualisiert .18s ease-out; }
.panel-ladeanzeige {
  position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  color: var(--text); background: rgba(7, 22, 31, .96);
  border: 1px solid rgba(32, 213, 245, .38); border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.3), var(--glow-wir);
}
.panel-ladeanzeige[hidden] { display: none; }
.panel-ladeanzeige > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.panel-ladeanzeige strong { font-size: 10px; letter-spacing: .04em; }
.panel-ladeanzeige small { color: var(--text-sehr-leise); font-size: 8.5px; }
.panel-ladepunkt {
  width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%;
  background: var(--wir); box-shadow: 0 0 0 4px rgba(32, 213, 245, .12);
  animation: ladepuls 1s ease-in-out infinite alternate;
}
.panel-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.panel h2 {
  font-family: var(--display); font-size: 20px; letter-spacing: .1em;
  font-weight: 400; color: var(--text);
}
.panel-kopf-zusatz { font-size: 10px; color: var(--text-sehr-leise); white-space: nowrap; }
.panel h2 { white-space: nowrap; }
.panel-leer { font-size: 12px; color: var(--text-sehr-leise); }
.panel-fehler { font-size: 12.5px; color: var(--gegner); }

.panel-zustand {
  min-height: 118px; display: grid; place-content: center; justify-items: center;
  gap: 5px; padding: 18px; text-align: center; color: var(--text-leise);
  border: 1px dashed var(--rand-hell); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(19,42,56,.5), rgba(8,24,34,.4));
}
.panel-zustand-icon {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 3px;
  color: var(--wir); border: 1px solid currentColor; border-radius: 50%; font-size: 18px;
}
.panel-zustand strong { color: var(--text); font-size: 13px; }
.panel-zustand > span:last-child { max-width: 34rem; font-size: 10.5px; }
.panel-zustand--model .panel-zustand-icon,
.panel-zustand--context .panel-zustand-icon { color: var(--warn); }
.panel-zustand--network .panel-zustand-icon,
.panel-zustand--backend .panel-zustand-icon { color: var(--gegner); }
.panel-zustand--complete .panel-zustand-icon { color: var(--gut); }

.finalchance {
  min-height: 118px; display: grid; place-content: center; justify-items: center;
  gap: 5px; padding: 18px; text-align: center;
  border: 1px solid rgba(32, 213, 245, .42); border-radius: var(--radius);
  background: radial-gradient(circle at 50% 20%, rgba(32,213,245,.13), transparent 62%),
    linear-gradient(145deg, rgba(19,42,56,.7), rgba(8,24,34,.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--glow-wir);
}
.finalchance-label {
  color: var(--text-leise); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.finalchance-eigen {
  font-family: var(--display); color: var(--wir); font-size: clamp(38px, 5vw, 58px);
  line-height: 1; letter-spacing: .02em; text-shadow: 0 0 18px rgba(32,213,245,.28);
}
.finalchance-gegner { color: var(--text-sehr-leise); font-size: 11px; }

.panel-signale {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px; margin-bottom: 10px;
}
.panel-signal {
  min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
  padding: 5px 7px; background: rgba(255,255,255,.025);
  border: 1px solid var(--rand); border-left: 2px solid var(--text-sehr-leise); border-radius: 4px;
}
.panel-signal small { color: var(--text-sehr-leise); font-size: 7.5px; text-transform: uppercase; }
.panel-signal strong {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-leise); font-size: 8px; letter-spacing: .05em;
}
.panel-signal--direct { border-left-color: var(--gut); }
.panel-signal--direct strong, .panel-signal--evidence strong { color: var(--gut); }
.panel-signal--approx, .panel-signal--engine { border-left-color: var(--warn); }
.panel-signal--approx strong, .panel-signal--engine strong { color: var(--warn); }

.vorschlaege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vorschlag {
  position: relative;
  min-width: 0; background: linear-gradient(145deg, var(--bg-4), #0a1922);
  border: 1px solid var(--rand);
  border-radius: var(--radius); transition: border-color .14s, box-shadow .14s, background .14s;
}
.vorschlag:hover { border-color: var(--wir); box-shadow: var(--glow-wir); background: #102735; }
.vorschlag:focus-within { border-color: var(--wir); box-shadow: var(--glow-wir); }

/* Der ganze Kasten setzt den Pick - ein Klick vom Lesen zum Setzen.
   Das Fragezeichen liegt DANEBEN, nicht darin: ein Button im Button
   waere ungueltiges HTML und fuer Tastatur und Screenreader kaputt. */
.vorschlag-waehlen {
  display: grid; align-items: center; column-gap: 7px; row-gap: 4px;
  grid-template-columns: 13px 34px minmax(0, 1fr) auto;
  grid-template-areas:
    "rang bild kern  score"
    ".    bild zeile zeile";
  width: 100%; min-width: 0; padding: 8px 27px 8px 8px; text-align: left;
}
.vorschlag-rang { grid-area: rang; }
.vorschlag-bild { grid-area: bild; align-self: start; }
.vorschlag-kern { grid-area: kern; }
.vorschlag-score { grid-area: score; }
.chips, .vorschlag-bangrund { grid-area: zeile; }
.vorschlag-kurzgruende { grid-area: gruende; }
.vorschlag-rang {
  font-family: var(--display); font-size: 14px; line-height: 1;
  min-width: 14px; color: var(--text-sehr-leise);
}
.vorschlag-bild {
  width: 34px; height: 34px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 18px; color: #0d0e10;
  background-size: cover; background-position: center;
}
.vorschlag-kern { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vorschlag-name {
  font-family: var(--display); font-size: 15px; letter-spacing: .035em; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vorschlag-rolle {
  font-size: 10px; color: var(--text-sehr-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vorschlag-meta {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 8px; letter-spacing: .04em; color: var(--text-sehr-leise);
}
.suchstatus {
  padding: 1px 4px; border-radius: 3px; border: 1px solid var(--rand-hell);
  line-height: 1.35; white-space: nowrap;
}
.suchstatus--approx { color: var(--warn); border-color: rgba(232, 176, 74, .4); }
.suchstatus--direct { color: var(--gut); border-color: rgba(95, 194, 126, .4); }
.suchstatus--unknown { color: var(--text-sehr-leise); }
.evidenzstatus {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: uppercase;
}
.vorschlag-score {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--display); font-size: 21px; line-height: 1;
  color: var(--wir); flex-shrink: 0;
}
.vorschlag-wp { font-family: var(--mono); font-size: 9.5px; color: var(--text-sehr-leise); }
.vorschlag:not(.vorschlag--top) .vorschlag-wp { font-size: 7.5px; white-space: nowrap; }
.vorschlag-info {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; line-height: 1; color: var(--text-leise); background: rgba(5, 17, 25, .8);
  border: 1px solid var(--rand-hell);
}
.vorschlag-info:hover { color: var(--text); border-color: var(--text-leise); }
.vorschlag-etikett {
  position: absolute; z-index: 2; top: 0; left: 48px; transform: translateY(-50%);
  padding: 2px 7px; color: #11100c; background: var(--akzent); border-radius: 10px;
  font-size: 7.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--glow-akzent);
}

/* Statt ausformulierter Gruende: die drei staerksten Komponenten mit
   ihrem Beitrag. Gleiche Aussage, ein Blick statt einer Zeile. Der
   ganze Satz steht im Detailfenster und im title. */
/* Eine Zeile, nie mehr: was nicht passt, faellt GANZ ab. Dafuer darf
   die Zeile umbrechen, ist aber genau eine Chiphoehe hoch - ein Chip,
   der nicht mehr passt, rutscht in die unsichtbare zweite Zeile, statt
   mitten im Wort abgeschnitten zu werden. Die Chips sind nach Betrag
   sortiert; es faellt also immer der schwaechste Grund weg. */
.chips { display: flex; flex-wrap: wrap; gap: 3px; height: 19px; overflow: hidden; min-width: 0; }
.chip {
  display: inline-flex; flex-shrink: 0; white-space: nowrap; align-items: baseline; gap: 3px;
  padding: 1px 5px; border-radius: 3px; font-size: 9.5px; line-height: 1.5;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--rand);
  color: var(--text-leise); cursor: help;
}
.chip-wert { font-size: 9px; }
.chip--limited { color: var(--warn); border-color: rgba(232, 176, 74, .4); cursor: default; }
.panel-limited {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 11px; color: var(--text-leise);
}
.chip.ist-plus .chip-wert { color: var(--gut); }
.chip.ist-minus .chip-wert { color: var(--gegner); }

.vorschlag-bangrund { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.bangrund {
  font-size: 10px; color: var(--text-leise); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modifikatoren hinter der Basis. */
.vorschlag--top {
  grid-column: 1 / -1;
  border-color: var(--wir);
  background:
    linear-gradient(115deg, rgba(32, 213, 245, .09), transparent 48%),
    linear-gradient(145deg, #102936, #091b26);
  box-shadow: var(--glow-wir), 0 10px 26px rgba(0, 0, 0, .24);
  margin-top: 5px;
}
.vorschlag--top .vorschlag-waehlen {
  grid-template-columns: 22px 76px minmax(0, 1fr) auto;
  grid-template-areas:
    "rang bild kern score"
    ". bild zeile zeile"
    "gruende gruende gruende gruende";
  column-gap: 11px; row-gap: 8px; padding: 14px 34px 14px 12px;
}
.vorschlag--top .vorschlag-bild { width: 76px; height: 76px; font-size: 28px; }
.vorschlag--top .vorschlag-name { font-size: 25px; }
.vorschlag--top .vorschlag-rolle { font-size: 11px; color: #a7bece; }
.vorschlag--top .vorschlag-score {
  font-size: 40px; color: var(--wir); text-shadow: 0 0 14px rgba(32, 213, 245, .2);
}
.vorschlag--top .vorschlag-rang { color: var(--wir); font-size: 23px; }
.vorschlag:not(.vorschlag--top) .vorschlag-waehlen {
  grid-template-areas: "rang bild kern score";
  padding-top: 7px; padding-bottom: 7px;
}
.vorschlag-kurzgruende {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px;
  min-width: 0; width: 100%;
  padding-top: 9px; border-top: 1px solid rgba(32, 213, 245, .12);
}
.vorschlag-kurzgruende > span {
  display: flex; align-items: flex-start; gap: 7px; min-width: 0;
  color: var(--text-leise); font-size: 10px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.vorschlag-grund-icon {
  display: grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px;
  border-radius: 50%; color: #062018; background: var(--gut); font-weight: 700;
}
.vorschlag-kurzgruende .ist-negativ .vorschlag-grund-icon { color: #26080e; background: var(--gegner); }
.vorschlag--ban .vorschlag-score { color: var(--ban-hell); }
.vorschlag--ban.vorschlag--top { border-color: var(--ban-hell); }
.vorschlag--ban.vorschlag--top .vorschlag-rang { color: var(--ban-hell); }

.search-status {
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  margin-bottom: 10px; padding: 6px 8px; border-radius: 4px;
  border-left: 2px solid var(--text-sehr-leise); background: rgba(255, 255, 255, .025);
  font-size: 8.5px; color: var(--text-sehr-leise);
}
.search-status strong { font-size: 9px; letter-spacing: .08em; font-weight: 500; }
.search-status--approx { border-left-color: var(--warn); }
.search-status--approx strong { color: var(--warn); }
.search-status--direct { border-left-color: var(--gut); }
.search-status--direct strong { color: var(--gut); }
.panel-wartet {
  padding: 12px 10px; color: var(--text-leise); font-size: 12px;
  border: 1px dashed var(--rand-hell); border-radius: var(--radius);
}

.panel-details {
  margin-top: 10px; border-top: 1px solid var(--rand); padding-top: 8px;
}
.panel-details > summary {
  color: var(--text-sehr-leise); cursor: pointer; list-style: none;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}
.panel-details > summary::before { content: "＋ "; color: var(--wir); }
.panel-details[open] > summary::before { content: "− "; }
.panel-details > summary:hover { color: var(--text-leise); }

.abschnitt {
  margin-top: 9px; padding: 10px;
  background: rgba(11, 31, 42, .62); border: 1px solid var(--rand); border-radius: 6px;
}
.abschnitt h3 {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-sehr-leise); font-weight: 400; margin-bottom: 6px;
}
.luecken { display: flex; flex-direction: column; gap: 4px; }
.luecke { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.luecke-balken {
  flex: 1; height: 5px; background: #08141c;
  border: 1px solid var(--rand); border-radius: 3px; overflow: hidden;
}
.luecke-fuellung { height: 100%; background: var(--gegner); }
.luecke.ist-kritisch .luecke-fuellung { background: var(--akzent); }
.luecke-wert { font-size: 10px; color: var(--text-sehr-leise); min-width: 26px; text-align: right; }

/* ─── 9. Matchplan und Aufschluesselung ───────────────────── */
.gruende { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.gruende li { font-size: 12px; color: var(--text-leise); padding-left: 14px; position: relative; }
.gruende li::before { position: absolute; left: 0; }
.gruende li.pro::before { content: "+"; color: var(--gut); }
.gruende li.contra::before { content: "−"; color: var(--gegner); }
.quelle-heuristik { color: var(--text-sehr-leise); font-size: 9.5px; }

.klappe { margin-top: 9px; border-top: 1px solid var(--rand); padding-top: 7px; }
.klappe summary {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-sehr-leise); cursor: pointer; list-style: none;
}
.klappe summary::-webkit-details-marker { display: none; }
.klappe summary::before { content: "▸ "; }
.klappe[open] summary::before { content: "▾ "; }
.klappe summary:hover { color: var(--text-leise); }
.klappe > .komponenten, .klappe > .liste { margin-top: 8px; }

.komponenten { display: flex; flex-direction: column; gap: 3px; }
.komponente { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.komponente-label { min-width: 120px; color: var(--text-leise); }
.komponente-balken { flex: 1; height: 5px; background: var(--bg-3); border-radius: 3px; position: relative; }
.komponente-fuellung { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.komponente-fuellung.ist-plus { background: var(--gut); left: 50%; }
.komponente-fuellung.ist-minus { background: var(--gegner); right: 50%; }
.komponente-wert { min-width: 46px; text-align: right; font-size: 11px; }
.komponente-roh { min-width: 92px; text-align: right; font-size: 10px; color: var(--text-sehr-leise); }
.komponente.ist-ohne-wirkung { opacity: .4; }
.komponenten-fuss { margin-top: 7px; font-size: 10px; color: var(--text-sehr-leise); }

.datenlage-kasten {
  padding: 9px 11px; margin-bottom: 12px;
  background: var(--bg-3); border: 1px solid var(--rand);
  border-left: 3px solid var(--warn); border-radius: 4px;
}
.datenlage-kasten strong { font-size: 12px; font-weight: 500; color: var(--warn); }
.datenlage-kasten p { margin-top: 4px; font-size: 11px; color: var(--text-leise); }

.matchplan { display: flex; flex-direction: column; gap: 12px; }
.matchplan-spieler {
  padding: 10px; background: var(--bg-3);
  border: 1px solid var(--rand); border-left: 3px solid var(--wir); border-radius: 4px;
}
.matchplan-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.matchplan-name { font-family: var(--display); font-size: 18px; letter-spacing: .05em; }
.matchplan-rolle { font-size: 11px; color: var(--text-sehr-leise); }
.matchplan-lane {
  margin-left: auto; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise); border: 1px solid var(--rand-hell);
}
.matchplan-zeile { display: flex; gap: 9px; font-size: 12px; padding: 3px 0; color: var(--text-leise); }
.matchplan-art {
  min-width: 82px; flex-shrink: 0;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-sehr-leise);
}
.matchplan-zeile.ist-gut .matchplan-art { color: var(--gut); }
.matchplan-zeile.ist-schlecht .matchplan-art { color: var(--gegner); }
.matchplan-paar {
  display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0;
  border-bottom: 1px solid var(--rand);
}
.matchplan-paar:last-child { border-bottom: none; }

.schwaeche {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; color: var(--text-leise); padding: 3px 0;
}
.schwaeche-punkt {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-sehr-leise);
}
.schwaeche.ist-ausnutzbar { color: var(--text); }
.schwaeche.ist-ausnutzbar .schwaeche-punkt { background: var(--gegner); }

.build { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.build-zeile { display: flex; gap: 10px; }
.build-art { min-width: 96px; color: var(--text-sehr-leise); font-size: 11px; }
.liste { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.liste li { padding-left: 14px; position: relative; color: var(--text-leise); }
.liste li::before { content: "▸"; position: absolute; left: 0; color: var(--text-sehr-leise); }
.liste--warnung li::before { content: "!"; color: var(--warn); }

/* ─── 10. Modal ───────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .75);
}
.modal[hidden] { display: none; }
.modal-kasten {
  position: relative; width: min(680px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 24px; background: var(--bg-2);
  border: 1px solid var(--rand-hell); border-radius: 8px; box-shadow: var(--schatten);
}
.modal-schliessen {
  position: absolute; top: 10px; right: 14px; font-size: 24px; color: var(--text-sehr-leise);
}
.modal-schliessen:hover { color: var(--text); }
.modal h2 { font-family: var(--display); font-size: 26px; letter-spacing: .06em; margin-bottom: 4px; }
.modal h3 {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-sehr-leise); font-weight: 400; margin: 16px 0 7px;
}
.modal-unterzeile { font-size: 12px; color: var(--text-sehr-leise); }
.modal-kopf { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.modal-bild {
  width: 64px; height: 64px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 28px; color: #0d0e10;
}

/* ─── 11. Nebenseiten ─────────────────────────────────────── */
.seite { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.seite h1 { font-family: var(--display); font-size: 34px; letter-spacing: .06em; font-weight: 400; }
.seite-einleitung { color: var(--text-leise); font-size: 13px; margin: 6px 0 24px; max-width: 70ch; }

.confidence-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.confidence-zeile {
  display: flex; align-items: center; gap: 12px; padding: 11px;
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: var(--radius);
}
.confidence-bild {
  width: 40px; height: 40px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 18px; color: #0d0e10;
  background-size: cover; background-position: center;
}
.confidence-name { flex: 1; font-size: 13px; }
.confidence-regler { width: 130px; accent-color: var(--akzent); }
.confidence-wert { min-width: 34px; text-align: right; font-size: 12px; color: var(--text-leise); }
.confidence-status { font-size: 11px; color: var(--gut); min-width: 58px; }

.anmeldung {
  max-width: 380px; margin: 60px auto; padding: 26px;
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px;
}
.anmeldung h1 { font-size: 26px; margin-bottom: 4px; }
.anmeldung-unterzeile { font-size: 12.5px; color: var(--text-leise); }
.anmeldung label { display: block; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-sehr-leise); margin: 14px 0 5px; }
.anmeldung input {
  width: 100%; padding: 9px 11px; font-size: 13px;
  background: var(--bg-3); border: 1px solid var(--rand-hell); border-radius: 4px;
}
.anmeldung button[type="submit"] {
  width: 100%; margin-top: 20px; padding: 10px;
  background: var(--akzent); color: #12100e; border-radius: 4px; font-size: 13px;
}
.anmeldung .fehler { margin-top: 12px; font-size: 12px; color: var(--gegner); }
.anmeldung .hinweis { margin-top: 16px; font-size: 11.5px; color: var(--text-sehr-leise); }

.statistik-hinweis {
  margin: 12px 0; padding: 10px 12px;
  background: rgba(232, 176, 74, .08); border-left: 3px solid var(--warn);
  color: var(--text-leise); font-size: 11px;
}
.statistik-hinweis strong { color: var(--warn); }
.statistik-hinweis p { margin-top: 3px; }
.diagnose-familien {
  display: flex; flex-direction: column; margin-bottom: 12px;
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
.diagnose-familie {
  display: grid; grid-template-columns: minmax(140px, 1fr) auto 76px;
  gap: 10px; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--rand); font-size: 11px;
}
.diagnose-familie:last-child { border-bottom: 0; }
.diagnose-wert { color: var(--text); font-variant-numeric: tabular-nums; }
.diagnose-status {
  text-align: right; font-size: 8px; letter-spacing: .06em; color: var(--text-sehr-leise);
}
.diagnose-status--learned { color: var(--gut); }
.diagnose-status--partial { color: var(--warn); }
.fortsetzung p { margin-top: 7px; color: var(--text-leise); font-size: 11px; }
.advanced-details { color: var(--text-leise); }
.advanced-details > p, .advanced-details > ul { margin-top: 8px; }
.advanced-details > h3 { margin-top: 12px; }
.diagnose-name { display: flex; flex-direction: column; }
.diagnose-name small { color: var(--text-sehr-leise); font-size: 9px; font-weight: 400; }
.diagnose-hinweis { font-size: 11px; color: var(--text-leise); }

@keyframes auswahl-bestaetigt {
  0% { box-shadow: 0 0 0 0 rgba(32, 213, 245, .55); }
  55% { box-shadow: 0 0 0 4px rgba(32, 213, 245, .15), var(--glow-wir); }
  100% { box-shadow: var(--glow-wir); }
}
@keyframes panel-aktualisiert {
  from { opacity: .72; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ladepuls { to { opacity: .45; transform: scale(.86); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─── 12. Schmale Fenster ─────────────────────────────────── */
@media (max-width: 1500px) and (min-width: 1101px) {
  .vorschlaege { grid-template-columns: 1fr; }
  .vorschlag-kurzgruende { grid-template-columns: 1fr; }
}

/* Unter 1280px faellt die Empfehlungsspalte unter die Auswahl, statt
   sie zu erdruecken. */
@media (max-width: 1280px) and (min-width: 1101px) {
  .aktionsleiste {
    grid-template-columns: minmax(205px, 1.2fr) minmax(220px, 1.1fr) minmax(138px, .68fr)
      minmax(154px, .75fr) minmax(205px, 1fr) minmax(126px, .58fr);
    gap: 8px; padding-left: 16px; padding-right: 16px;
  }
  .drafter-raster { grid-template-columns: 250px minmax(520px, 1fr) 330px; gap: 10px; padding-left: 14px; padding-right: 14px; }
  .vorschlag-kurzgruende { grid-template-columns: 1fr; }
  .vorschlag--top .vorschlag-bild { width: 64px; height: 64px; }
}

/* Unter 1100px steht alles untereinander und die Seite scrollt wieder.
   Reihenfolge nach Benutzung: Leiste (klebt), Brett, Empfehlungen,
   Gitter. Die Empfehlungen liegen dabei als waagerechter Streifen ueber
   dem Gitter - senkrecht gestapelt wuerden acht Karten das Gitter aus
   dem Bild schieben, und genau das Gitter braucht man am haeufigsten. */
@media (max-width: 1100px) {
  .aktionsleiste {
    position: sticky; top: 0; z-index: 30; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 12px;
    max-height: 48vh; overflow-y: auto;
  }
  .mapknopf { grid-column: 1 / -1; min-width: 0; }
  .phaseanzeige { min-height: 76px; }
  .knopf-zuruecksetzen { grid-column: 1 / -1; min-height: 48px; }
  /* Auf schmalen Fenstern in der Mitte statt am Knopf - dort ist
     rechts daneben ohnehin kein Platz mehr. */
  .mapwaehler { display: flex; align-items: center; justify-content: center; }
  .mapwaehler-kasten {
    position: static;
    width: min(420px, calc(100vw - 24px)); max-height: 78vh;
  }

  .drafter-raster { grid-template-columns: 1fr; padding: 10px 12px 40px; }

  /* Das Brett waagerecht statt als Turm: Gegner und Wir teilen sich
     eine Zeile, die sechs Bans stehen darunter. Sonst liegen 400px
     Brett zwischen Leiste und Gitter - und das Gitter ist das, was man
     am haeufigsten braucht.

     Die Reihenfolge macht `order`, nicht das Markup: im Quelltext steht
     das Brett von oben nach unten Gegner - Bans - Wir, so wie es auf
     dem Desktop aussieht und wie ein Screenreader es vorliest. */
  .brett { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .brett-block { flex: 1; min-width: 150px; }
  .brett-block--gegner { order: 1; }
  .brett-block--wir { order: 2; }
  .brett-block--ban { order: 3; flex-basis: 100%; }
  .jetzt { order: 4; flex-basis: 100%; }
  .slot-name { display: none; }
  .slot { aspect-ratio: auto; height: 58px; }
  .slot-bild { width: 44px; height: 44px; font-size: 16px; }
  .slots--ban .slot { height: 48px; }

  /* Empfehlungen als waagerechter Streifen. */
  .panel { order: 1; }
  .auswahl { order: 2; }

  /* Hoehen reservieren, die erst nach der ersten Antwort feststehen.
     Beide Werte sind die gemessene Hoehe im geladenen Zustand - nicht
     mehr, sonst stuende ein leerer Kasten da:
       - Panel: Kopfzeile + eine Reihe Karten.
       - Gitter: zwei Kachelreihen. Das reicht, damit der Fuss beim
         Laden nicht erst im Bild steht und dann nach unten springt. */
  .panel { min-height: 120px; }
  .gitter { min-height: 170px; }
  .vorschlaege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorschlag-kurzgruende { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gitter { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  kbd { display: none; }
}

/* Telefonbreite. Messlatte: auf 390x844 muss das Gitter ohne Scrollen
   anfangen. Vor dieser Regel lag es bei y=934 - Kopf, Demo-Hinweis,
   Leiste und Brett fuellten den ganzen Bildschirm.

   Die Leiste wird zweizeilig: oben "was jetzt" neben Ban/Pick (das
   aendert sich staendig), darunter Map, First Pick und Reset (das
   setzt man einmal). Die Etiketten fallen weg - "Wir first" und
   "Ban/Pick" erklaeren sich selbst. */
@media (max-width: 560px) {
  .kopf { flex-wrap: wrap; gap: 0; padding: 8px 12px 0; }
  .kopf-marke { min-height: 44px; font-size: 21px; }
  .kopf-emblem { width: 31px; height: 31px; flex-basis: 31px; border-width: 2px; }
  .kopf-emblem span { font-size: 17px; }
  .kopf-nav { width: 100%; min-height: 40px; justify-content: space-between; gap: 0; font-size: 9.5px; }
  .kopf-nav a, .kopf-abmelden button { padding: 0 7px; }
  .kopf-zurueck { display: none; }

  .aktionsleiste { gap: 6px; padding: 6px 10px; }
  .steuer-etikett { font-size: 8px; }
  .mapknopf { min-width: 0; padding: 8px 10px; justify-content: center; }
  .mapknopf-zeile { flex-direction: column; gap: 0; }
  .mapknopf-name { font-size: 12.5px; max-width: 100%; }
  .mapknopf-modus { font-size: 15px; }
  /* Im schmalen Knopf kostete das Vorschaubild den halben Mapnamen -
     der Name ist hier die schnellere Bestaetigung. Im Waehler bleiben
     die Vorschauen. */
  .mapknopf-bild { display: none; }
  .mapknopf.hat-bild { padding-left: 10px; }
  .schalter button { padding: 6px 7px; font-size: 10px; min-height: 38px; }
  .steuerpaar, .datenkarte { padding: 8px; }
  .phaseanzeige { padding: 8px 10px; min-height: 68px; }
  .phaseanzeige strong { font-size: 21px; }
  .datenkarte-text small { overflow: hidden; text-overflow: ellipsis; }
  .engine-status { display: none; }
  .knopf-zuruecksetzen { padding: 6px 9px; min-height: 40px; }

  .drafter-raster { gap: 8px; padding: 8px 10px 40px; }
  .brett { gap: 6px; }
  .brett-block { padding: 8px; min-width: 0; }
  .brett-block h2 { font-size: 15px; margin-bottom: 6px; padding-bottom: 4px; }
  .slot { height: 46px; }
  .slot-bild { width: 30px; height: 30px; font-size: 14px; }
  .slots--ban .slot { height: 38px; }
  .jetzt { padding: 9px 11px; }
  .jetzt-text { font-size: 17px; }

  .panel { padding: 7px; min-height: 104px; }
  .gitter { min-height: 250px; }
  .panel-kopf { margin-bottom: 4px; }
  .vorschlag-waehlen { padding: 6px 26px 6px 6px; gap: 6px; }
  .vorschlaege { grid-template-columns: 1fr; }
  .vorschlag--top .vorschlag-waehlen {
    grid-template-columns: 18px 56px minmax(0, 1fr) auto;
    padding: 10px 29px 10px 8px;
  }
  .vorschlag--top .vorschlag-bild { width: 56px; height: 56px; }
  .vorschlag--top .vorschlag-name { font-size: 21px; }
  .vorschlag--top .vorschlag-score { font-size: 30px; }
  .vorschlag-kurzgruende { grid-template-columns: 1fr; }

  .auswahl { padding: 7px; }
  .auswahl-kopf { gap: 6px; margin-bottom: 7px; }
  .gitter { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 5px; }
}

/* ═══════════════════════════════════════════════════════════════
   D4 · LOBBY METADATA AND TACTICAL WORKSPACE
   Board owns the overview row; setup becomes the left control rail.
   ═══════════════════════════════════════════════════════════════ */
.drafter-raster {
  grid-template-columns: minmax(270px, 24fr) minmax(500px, 50fr) minmax(310px, 26fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}
.brett {
  grid-column: 1 / -1; grid-row: 1;
  display: grid; grid-template-columns: minmax(155px, .72fr) repeat(3, minmax(0, 1fr)) minmax(215px, 1.05fr);
  align-items: center; gap: 10px; padding: 10px 12px;
}
.brett-kopf { padding: 0 10px 0 2px; border: 0; }
.brett-block { min-width: 0; padding: 2px 10px; border: 0; border-left: 1px solid rgba(40, 86, 107, .38); }
.brett-block h2 { margin-bottom: 5px; font-size: 13px; }
.brett .slot { height: 54px; aspect-ratio: auto; }
.brett .slots--ban .slot { height: 44px; aspect-ratio: auto; }
.brett .slot-bild { width: 42px; height: 42px; }
.brett .slots--ban .slot-bild { width: 32px; height: 32px; }
.brett .jetzt { margin: 0; min-height: 54px; }

.aktionsleiste {
  grid-column: 1; grid-row: 2;
  position: static; z-index: 2; display: grid; grid-template-columns: 1fr;
  align-content: start; gap: 8px; min-width: 0; min-height: 0;
  padding: 10px; overflow: auto; border: 1px solid rgba(40, 86, 107, .58);
  border-radius: var(--radius); background: rgba(8, 24, 34, .88);
}
.aktionsleiste .mapkontext,
.aktionsleiste .mapvorschau,
.aktionsleiste .firstpick,
.aktionsleiste .drafttyp,
.aktionsleiste .phaseanzeige { grid-column: 1; grid-row: auto; }
.aktionsleiste .mapvorschau { min-height: 162px; }
.aktionsleiste .mapvorschau-bild { min-height: 118px; }
.aktionsleiste .modusfilter { grid-template-columns: repeat(3, minmax(42px, 1fr)); }
.aktionsleiste .statusdetails-inhalt { left: 0; right: auto; }
.auswahl { grid-column: 2; grid-row: 2; }
.panel { grid-column: 3; grid-row: 2; }

.firstpick-muenzen {
  display: flex; justify-content: center; gap: 18px; padding: 9px;
  border: 0; background: transparent;
}
.firstpick-muenzen button {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px;
  min-height: 58px; padding: 0; border: 3px solid rgba(97, 149, 179, .45);
  border-radius: 50%; color: #26dfff; background: #09273b;
  box-shadow: inset 0 0 0 3px rgba(2, 10, 18, .55); transform: rotate(-7deg);
}
.firstpick-muenzen button[data-firstpick="gegner"] { color: #ff526d; transform: rotate(7deg); }
.firstpick-muenzen button svg { width: 46px; height: 46px; }
.firstpick-muenzen button:hover { border-color: currentColor; transform: translateY(-2px) rotate(-7deg); }
.firstpick-muenzen button[data-firstpick="gegner"]:hover { transform: translateY(-2px) rotate(7deg); }
.firstpick-muenzen button.ist-aktiv {
  border-color: #fff; background: rgba(20, 60, 82, .95);
  box-shadow: 0 0 0 3px currentColor, 0 0 20px currentColor, inset 0 0 0 3px rgba(2, 10, 18, .55);
}

.auswahl-kopf { flex-wrap: wrap; }
.seltenheitsfilter { display: block; flex: 0 0 auto; min-height: 0; }
.sortierung select, #rollenfilter, #seltenheitsfilter, #verfuegbarkeitsfilter {
  min-height: 43px; padding: 9px 30px 9px 11px; color: var(--text-leise);
  font-size: 11px; background: var(--bg-3); border: 1px solid var(--rand); border-radius: 7px;
}
#rollenfilter, #seltenheitsfilter { max-width: 145px; }

@media (max-width: 1100px) {
  .drafter-raster { grid-template-columns: 1fr; grid-template-rows: auto; }
  .brett { grid-column: 1; grid-row: auto; order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brett-kopf { grid-column: 1 / -1; }
  .brett-block--ban { grid-column: 1 / -1; }
  .brett .jetzt { grid-column: 1 / -1; }
  .aktionsleiste {
    grid-column: 1; grid-row: auto; order: 2; position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible;
  }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
  .aktionsleiste .firstpick, .aktionsleiste .drafttyp,
  .aktionsleiste .phaseanzeige { grid-column: auto; grid-row: auto; }
  .aktionsleiste .phaseanzeige { grid-column: 1 / -1; }
  .auswahl { grid-column: 1; grid-row: auto; order: 3; }
  .panel { grid-column: 1; grid-row: auto; order: 4; }
}

@media (max-width: 680px) {
  .aktionsleiste { grid-template-columns: 1fr; }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
  .aktionsleiste .firstpick, .aktionsleiste .drafttyp,
  .aktionsleiste .phaseanzeige { grid-column: 1; }
  .brett { grid-template-columns: 1fr; }
  .brett-kopf, .brett-block--ban, .brett .jetzt { grid-column: 1; }
  .sortierung, .rollenfilter, .seltenheitsfilter, .verfuegbarkeitsfilter { flex: 1 1 42%; }
  .sortierung select, #rollenfilter, #seltenheitsfilter, #verfuegbarkeitsfilter { width: 100%; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   D5 · COMPACT DRAFT FLOW
   Reine UI-Schicht: kompaktere Filter, suchbare Map-Liste und ein
   bidirektionaler optionaler Ban-Flow ohne grossen Pick-CTA.
   ═══════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(78, 133, 168, .48) rgba(3, 16, 27, .35);
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: rgba(3, 16, 27, .35); }
*::-webkit-scrollbar-thumb {
  background: rgba(78, 133, 168, .48); border: 1px solid rgba(3, 16, 27, .5);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(75, 174, 224, .68); }

@media (min-width: 1101px) {
  main.drafter-raster {
    grid-template-columns: minmax(290px, 23fr) minmax(540px, 51fr) minmax(310px, 26fr);
  }
}
.drafter-raster > .brett {
  grid-template-columns: minmax(150px, .7fr) repeat(3, minmax(0, 1fr));
}
.brett.ist-banphase .brett-block--ban,
.brett.ist-banphase .brett-block--wir,
.brett .brett-block--gegner,
.brett .brett-block--ban,
.brett .brett-block--wir { grid-column: auto; }
.brett-kopf-aktionen { display: flex; align-items: center; gap: 7px; }
.brett-kopf .knopf-zuruecksetzen {
  width: 28px; height: 28px; min-height: 28px; flex: 0 0 28px; padding: 0;
  border: 1px solid rgba(50, 106, 141, .55); border-radius: 6px;
  background: rgba(10, 33, 48, .76);
}
.brett-kopf .knopf-zuruecksetzen span { font-size: 15px; line-height: 1; }
.bans-abschliessen.ist-rueckkehr {
  color: #ffc38a; border-color: rgba(255, 138, 69, .58);
  background: rgba(151, 70, 24, .14);
}
.bans-abschliessen.ist-rueckkehr:hover {
  color: #fff; border-color: var(--akzent); background: rgba(151, 70, 24, .26);
}

.drafter-raster > .aktionsleiste { gap: 9px; padding: 10px; }
.aktionsleiste .mapkontext { gap: 7px; padding: 10px; }
.aktionsleiste .mapknopf {
  min-height: 58px; padding: 8px 10px;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
}
.aktionsleiste .mapknopf-icon { width: 40px; height: 40px; }
.aktionsleiste .mapknopf-icon .modus-icon { width: 36px; height: 36px; }
.drafter-raster > .aktionsleiste .mapvorschau {
  min-height: 244px; padding: 9px;
}
.drafter-raster > .aktionsleiste .mapvorschau-bild { min-height: 205px; }
.drafter-raster > .aktionsleiste .mapvorschau-medium { height: 205px; }
.mapvorschau-fuss { justify-content: space-between; padding-top: 6px; }
.mapvorschau-fuss > span:first-child {
  color: #6f96b1; font: 8px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase;
}

.firstpick > .steuer-etikett {
  display: block; width: 100%; margin-bottom: 2px; color: #cfeaff;
  font: 12px/1 var(--display); letter-spacing: .16em; text-align: center;
}
.firstpick .firstpick-schilde { gap: 16px; padding: 7px 5px 8px; }
.firstpick .firstpick-schilde button {
  width: 86px; height: 76px; min-height: 76px; padding: 3px;
  opacity: .56; filter: saturate(.72); transform: scale(.92);
}
.firstpick .firstpick-schilde button[data-firstpick="wir"] {
  background: radial-gradient(circle, rgba(32, 169, 255, .18), rgba(5, 24, 42, .72));
  border-color: rgba(52, 169, 255, .28);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"] {
  background: radial-gradient(circle, rgba(255, 67, 98, .16), rgba(41, 13, 25, .7));
  border-color: rgba(255, 82, 105, .26);
}
.firstpick .firstpick-schilde button img { width: 68px; height: 68px; }
.firstpick .firstpick-schilde button[data-firstpick="wir"]:hover,
.firstpick .firstpick-schilde button[data-firstpick="wir"].ist-aktiv {
  border-color: #69c8ff; background: rgba(15, 76, 119, .72);
  box-shadow: 0 0 0 2px rgba(62, 178, 255, .42), 0 0 28px rgba(41, 169, 255, .52);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"]:hover,
.firstpick .firstpick-schilde button[data-firstpick="gegner"].ist-aktiv {
  border-color: #ff7187; background: rgba(103, 23, 43, .7);
  box-shadow: 0 0 0 2px rgba(255, 82, 105, .4), 0 0 28px rgba(255, 55, 91, .48);
}

.mapwaehler-kasten { width: min(560px, calc(100vw - 32px)); }
.mapwaehler-suche { min-height: 42px; padding: 9px 12px; }
.mapwaehler-liste { padding: 7px; }
.mapzeile { min-height: 46px; gap: 11px; padding: 6px 9px; }
.mapzeile-bild {
  width: 34px; height: 34px; flex: 0 0 34px; background: rgba(9, 34, 54, .8);
}
.mapzeile-bild .modus-icon { width: 29px; height: 29px; }
.mapzeile-text { flex: 1; overflow: visible; }
.mapzeile-name {
  overflow: visible; color: #d8efff; font-size: 13px; line-height: 1.25;
  text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.mapzeile-modus { margin-top: 2px; font-size: 9px; text-transform: uppercase; }

.auswahl-kopf {
  display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 8px;
}
.auswahl-kopf .suchfeld { min-width: 135px; }
.auswahl-kopf #suche {
  min-height: 34px; height: 34px; padding: 7px 29px 7px 35px; font-size: 11px;
}
.auswahl-kopf .suchfeld-symbol { left: 11px; width: 12px; height: 12px; }
.auswahl-kopf .suchfeld-taste { right: 6px; }
.auswahl-kopf .sortierung,
.auswahl-kopf .rollenfilter,
.auswahl-kopf .seltenheitsfilter,
.auswahl-kopf .verfuegbarkeitsfilter { flex: 0 1 auto; min-width: 0; }
.auswahl-kopf .sortierung select,
.auswahl-kopf #rollenfilter,
.auswahl-kopf #seltenheitsfilter,
.auswahl-kopf #verfuegbarkeitsfilter {
  width: auto; max-width: 122px; min-height: 34px; height: 34px;
  padding: 6px 23px 6px 8px; font-size: 9px; border-radius: 6px;
}
.auswahl-kopf .sortierung select { max-width: 72px; }
.auswahl-kopf #verfuegbarkeitsfilter { max-width: 108px; }
.auswahl-kopf .analyseschalter {
  width: 34px; min-width: 34px; min-height: 34px; height: 34px; padding: 0;
}

.kachel { gap: 5px; padding: 0 5px 7px; }
.kachel > .kachel-klasse {
  order: -1; align-self: stretch; width: auto; max-width: none;
  min-height: 22px; margin: 0 -5px; padding: 6px 4px 4px;
  overflow: hidden; color: #b8d9ed; background: rgba(19, 62, 88, .72);
  border-bottom: 1px solid rgba(57, 126, 166, .32);
  font: 600 8.5px/1.15 var(--mono); letter-spacing: .055em;
  text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}
.kachel-score { top: 29px; }
.kachel-rang { top: 29px; }

@media (max-width: 1100px) {
  .drafter-raster > .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brett-kopf, .brett-block--ban { grid-column: 1 / -1; }
  .aktionsleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
  .aktionsleiste .firstpick, .aktionsleiste .drafttyp { grid-column: auto; }
  .auswahl-kopf { flex-wrap: wrap; }
  .auswahl-kopf .suchfeld { flex: 1 1 100%; }
}

@media (max-width: 680px) {
  .drafter-raster > .brett { grid-template-columns: 1fr; }
  .brett-kopf, .brett-block--gegner, .brett-block--ban, .brett-block--wir { grid-column: 1; }
  .aktionsleiste { grid-template-columns: 1fr; }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
  .aktionsleiste .firstpick, .aktionsleiste .drafttyp { grid-column: 1; }
  .auswahl-kopf .sortierung,
  .auswahl-kopf .rollenfilter,
  .auswahl-kopf .seltenheitsfilter,
  .auswahl-kopf .verfuegbarkeitsfilter { flex: 1 1 calc(50% - 4px); }
  .auswahl-kopf .sortierung select,
  .auswahl-kopf #rollenfilter,
  .auswahl-kopf #seltenheitsfilter,
  .auswahl-kopf #verfuegbarkeitsfilter { width: 100%; max-width: none; }
}

/* D6 authoritative tail: keep polish after every historical phase cascade. */
.mapwaehler { z-index: 110; overflow: visible; }
.mapwaehler-kasten {
  overflow: hidden; border-color: rgba(54, 139, 192, .78);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .62), 0 0 24px rgba(39, 155, 225, .13);
}
.mapwaehler-liste { overscroll-behavior: contain; }
.mapzeile-name { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.drafter-raster > .aktionsleiste .mapvorschau {
  min-height: 223px; padding: 0; overflow: visible;
  background: transparent; border: 0; border-radius: 8px; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau:hover:not(:disabled) {
  background: transparent; border: 0; box-shadow: none; transform: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-bild {
  min-height: 213px; height: 213px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-medium { height: 213px; }
.mapvorschau-bild::after { display: none; }
.firstpick > .steuer-etikett { font-size: 13px; color: #e3f4ff; }
.firstpick .firstpick-schilde button { opacity: .64; filter: saturate(.78) brightness(.84); }
.firstpick .firstpick-schilde button:hover { opacity: .88; filter: saturate(1) brightness(.96); }
.firstpick .firstpick-schilde button.ist-aktiv {
  opacity: 1; filter: saturate(1.16) brightness(1.06); transform: scale(1.03);
}
.auswahl-kopf { margin-bottom: 4px; }
.filter-zuruecksetzen {
  display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px;
  min-height: 34px; padding: 0; color: #8db7d1; background: var(--bg-3);
  border: 1px solid var(--rand); border-radius: 6px;
}
.gitter { padding-top: 11px; scroll-padding-top: 11px; }
.kachel, .kachel.ist-limited { border-style: solid; }
.gitter .kachel:focus-visible { outline: 2px solid #b4e6ff; outline-offset: 3px; z-index: 3; }
@media (max-width: 1100px) {
  .mapwaehler { display: flex; align-items: center; justify-content: center; padding: 12px; }
  .mapwaehler-kasten {
    position: static; width: min(460px, calc(100vw - 24px)); max-height: min(78dvh, 650px);
  }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 202px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 196px; height: 196px; }
}
@media (max-width: 680px) {
  .filter-zuruecksetzen { flex: 0 0 34px; }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 226px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 220px; height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   D6 final cascade · map popup, filter reset and rarity restraint.
   Functional draft states intentionally override rarity below.
   ═══════════════════════════════════════════════════════════════ */
.mapwaehler { z-index: 110; overflow: visible; }
.mapwaehler-kasten {
  overflow: hidden; border-color: rgba(54, 139, 192, .78);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .62), 0 0 24px rgba(39, 155, 225, .13);
}
.mapwaehler-liste { overscroll-behavior: contain; }
.mapzeile-name { max-width: 100%; }

.drafter-raster > .aktionsleiste .mapvorschau {
  min-height: 223px; padding: 0; overflow: visible;
  background: transparent; border: 0; border-radius: 8px; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau:hover:not(:disabled) {
  background: transparent; border: 0; box-shadow: none; transform: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-bild {
  min-height: 213px; height: 213px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none;
}
.drafter-raster > .aktionsleiste .mapvorschau-medium { height: 213px; }
.mapvorschau-bild::after { display: none; }

.firstpick > .steuer-etikett { font-size: 13px; color: #e3f4ff; }
.firstpick .firstpick-schilde button { opacity: .64; filter: saturate(.78) brightness(.84); }
.firstpick .firstpick-schilde button:hover { opacity: .88; filter: saturate(1) brightness(.96); }
.firstpick .firstpick-schilde button.ist-aktiv {
  opacity: 1; filter: saturate(1.16) brightness(1.06); transform: scale(1.03);
}

.auswahl-kopf { margin-bottom: 4px; }
.filter-zuruecksetzen {
  display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px;
  min-height: 34px; padding: 0; color: #8db7d1; background: var(--bg-3);
  border: 1px solid var(--rand); border-radius: 6px;
  transition: color .12s, border-color .12s, background .12s, transform .12s;
}
.filter-zuruecksetzen span[aria-hidden] { font-size: 17px; line-height: 1; }
.filter-zuruecksetzen:hover {
  color: #fff; border-color: var(--wir); background: rgba(25, 92, 132, .38);
  transform: rotate(-16deg);
}
.filter-zuruecksetzen:focus-visible {
  outline: 2px solid #8dd7ff; outline-offset: 2px;
}
.gitter { padding-top: 11px; scroll-padding-top: 11px; }

/* Rarity is a low-priority visual undertone, never a label or badge. */
.kachel { border-style: solid; }
.kachel.ist-limited { border-style: solid; }
.kachel[data-rarity="common"] {
  border-color: rgba(85, 130, 158, .48);
}
.kachel[data-rarity="rare"] {
  border-color: rgba(52, 137, 232, .54);
  box-shadow: inset 0 1px 0 rgba(65, 151, 255, .07);
}
.kachel[data-rarity="super_rare"] {
  border-color: rgba(38, 177, 216, .52);
  box-shadow: inset 0 1px 0 rgba(51, 207, 240, .07);
}
.kachel[data-rarity="epic"] {
  border-color: rgba(156, 93, 218, .53);
  box-shadow: inset 0 1px 0 rgba(182, 110, 240, .075);
}
.kachel[data-rarity="mythic"] {
  border-color: rgba(206, 67, 126, .51);
  box-shadow: inset 0 1px 0 rgba(231, 75, 142, .07);
}
.kachel[data-rarity="legendary"] {
  border-color: rgba(217, 165, 48, .55);
  box-shadow: inset 0 1px 0 rgba(255, 200, 68, .08);
}
.kachel[data-rarity="ultra_legendary"] {
  border-color: rgba(238, 181, 47, .67);
  box-shadow: inset 0 1px 0 rgba(255, 213, 92, .12);
}
.kachel[data-rarity="rare"] > .kachel-klasse { background: rgba(20, 57, 101, .78); }
.kachel[data-rarity="super_rare"] > .kachel-klasse { background: rgba(13, 67, 86, .76); }
.kachel[data-rarity="epic"] > .kachel-klasse { background: rgba(67, 38, 91, .76); }
.kachel[data-rarity="mythic"] > .kachel-klasse { background: rgba(82, 28, 54, .76); }
.kachel[data-rarity="legendary"] > .kachel-klasse,
.kachel[data-rarity="ultra_legendary"] > .kachel-klasse { background: rgba(83, 62, 21, .74); }

/* Interaction priority: hover < disabled < recommended < banned < selected. */
.gitter .kachel:hover:not(.ist-gesperrt) {
  border-style: solid; border-color: #69c8ff;
  box-shadow: 0 0 0 1px rgba(87, 191, 255, .24), 0 0 17px rgba(40, 165, 237, .22);
}
.gitter .kachel:focus-visible {
  outline: 2px solid #b4e6ff; outline-offset: 3px; z-index: 3;
}
.gitter .kachel.ist-gesperrt { opacity: .42; border-style: solid; }
.gitter .kachel.ist-empfohlen:not(.ist-gesperrt) {
  border-color: #44baff;
  box-shadow: 0 0 0 1px rgba(68, 186, 255, .3), 0 0 20px rgba(35, 153, 231, .25);
}
.gitter.ist-banmodus .kachel.ist-empfohlen:not(.ist-gesperrt) {
  border-color: #c0c8d1; box-shadow: 0 0 15px rgba(188, 199, 211, .15);
}
.gitter .kachel.ist-gebannt {
  opacity: .62; border-color: #ff5269; filter: grayscale(.72) saturate(.62);
  box-shadow: inset 0 0 0 1px rgba(255, 82, 105, .24);
}
.gitter .kachel.ist-ausgewaehlt { opacity: .84; filter: saturate(.78); }
.gitter .kachel.ist-ausgewaehlt.ist-eigener-pick {
  border-color: #38c7ff; box-shadow: 0 0 0 1px rgba(56, 199, 255, .36), 0 0 20px rgba(38, 174, 235, .28);
}
.gitter .kachel.ist-ausgewaehlt.ist-gegner-pick {
  border-color: #ff5d75; box-shadow: 0 0 0 1px rgba(255, 93, 117, .32), 0 0 18px rgba(233, 52, 82, .24);
}

body.ist-draftseite .aktionsleiste,
body.ist-draftseite .gitter,
body.ist-draftseite .brett,
body.ist-draftseite .panel,
body.ist-draftseite .mapwaehler-liste {
  scrollbar-width: thin;
  scrollbar-color: rgba(65, 117, 151, .52) rgba(3, 15, 25, .32);
}
body.ist-draftseite .aktionsleiste::-webkit-scrollbar,
body.ist-draftseite .gitter::-webkit-scrollbar,
body.ist-draftseite .brett::-webkit-scrollbar,
body.ist-draftseite .panel::-webkit-scrollbar,
body.ist-draftseite .mapwaehler-liste::-webkit-scrollbar { width: 6px; height: 6px; }
body.ist-draftseite .aktionsleiste::-webkit-scrollbar-track,
body.ist-draftseite .gitter::-webkit-scrollbar-track,
body.ist-draftseite .brett::-webkit-scrollbar-track,
body.ist-draftseite .panel::-webkit-scrollbar-track,
body.ist-draftseite .mapwaehler-liste::-webkit-scrollbar-track {
  background: rgba(3, 15, 25, .32); border-radius: 99px;
}
body.ist-draftseite .aktionsleiste::-webkit-scrollbar-thumb,
body.ist-draftseite .gitter::-webkit-scrollbar-thumb,
body.ist-draftseite .brett::-webkit-scrollbar-thumb,
body.ist-draftseite .panel::-webkit-scrollbar-thumb,
body.ist-draftseite .mapwaehler-liste::-webkit-scrollbar-thumb {
  background: rgba(65, 117, 151, .52); border-radius: 99px;
}

@media (max-width: 1100px) {
  .mapwaehler { display: flex; align-items: center; justify-content: center; padding: 12px; }
  .mapwaehler-kasten {
    position: static; width: min(460px, calc(100vw - 24px)); max-height: min(78dvh, 650px);
  }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 202px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 196px; height: 196px; }
}

@media (max-width: 680px) {
  .filter-zuruecksetzen { flex: 0 0 34px; }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 226px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 220px; height: 220px; }
}

/* D4 follow-up: ruhigere Map-Hierarchie, optionale Bans, reduzierte Cards. */
@media (min-width: 1101px) {
  main.drafter-raster {
    grid-template-columns: minmax(300px, 25fr) minmax(500px, 49fr) minmax(310px, 26fr);
  }
}
.drafter-raster > .aktionsleiste { gap: 11px; padding: 12px; }
.aktionsleiste .mapkontext {
  display: flex; flex-direction: column; gap: 9px; padding: 12px;
  background: linear-gradient(155deg, rgba(12,38,56,.96), rgba(6,23,37,.96));
  border-color: rgba(54,133,180,.65);
}
.aktionsleiste .mapkontext .steuer-etikett { margin-bottom: 1px; }
.aktionsleiste .modusfilter {
  order: 1; grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 7px; margin: 0;
}
.aktionsleiste .modusfilter-knopf { min-height: 52px; padding: 6px 4px; }
.aktionsleiste .modusfilter-knopf .modus-icon { width: 32px; height: 32px; }
.aktionsleiste .modusfilter-knopf span { display: block; font-size: 7px; }
.aktionsleiste .mapknopf {
  order: 2; min-height: 62px; padding-top: 10px; padding-bottom: 10px;
  border-color: rgba(67,145,190,.68); background: rgba(6,24,38,.9);
}
.aktionsleiste .mapknopf-modus { color: #7fbddd; font-size: 8px; }
.aktionsleiste .mapknopf-name { font-size: 18px; }
.drafter-raster > .aktionsleiste .mapvorschau {
  min-height: 250px; padding: 10px; background: rgba(5,20,34,.92);
  border-color: rgba(54,133,180,.65);
}
.drafter-raster > .aktionsleiste .mapvorschau-bild { min-height: 205px; border-radius: 7px; }
.drafter-raster > .aktionsleiste .mapvorschau-medium { height: 205px; object-fit: contain; }

.brett-block--ban h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bans-abschliessen {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 8px;
  color: #ccecff; background: rgba(31,116,165,.15); border: 1px solid rgba(61,155,207,.55);
  border-radius: 5px; font: 8px/1 var(--mono); letter-spacing: .03em; text-transform: uppercase;
}
.bans-abschliessen:hover { color: #fff; border-color: var(--wir); background: rgba(31,116,165,.28); }
.bans-abschliessen span { color: var(--wir); font-size: 14px; }
.bans-abschliessen[hidden], .jetzt[hidden] { display: none; }
.brett.ist-banphase .brett-block--ban { grid-column: 3 / 5; }
.brett.ist-banphase .brett-block--wir { grid-column: 5; }

.kachel > .kachel-klasse {
  max-width: 100%; margin-top: -2px; overflow: hidden; color: #8eb2c9;
  font: 7px/1.25 var(--mono); letter-spacing: .015em; text-overflow: ellipsis;
  text-transform: uppercase; white-space: nowrap;
}
.kachel.ist-limited { border-style: dashed; }

/* D4 · Vom Nutzer bereitgestellte Originalgrafiken fuer Modi und First Pick. */
.modus-icon {
  display: block; object-fit: contain; object-position: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .38));
}
.modusfilter-knopf.ist-aktiv .modus-icon {
  filter: drop-shadow(0 0 7px rgba(185, 105, 255, .62));
}
.firstpick .firstpick-schilde {
  display: flex; justify-content: center; gap: 18px; padding: 7px;
  border: 0; background: transparent;
}
.firstpick .firstpick-schilde button {
  display: grid; place-items: center; width: 76px; height: 72px; min-height: 72px;
  padding: 3px; overflow: visible; border: 2px solid transparent; border-radius: 12px;
  background: rgba(5, 21, 34, .56); opacity: .48; filter: saturate(.65);
  transform: scale(.91); transition: opacity .16s ease, filter .16s ease,
    transform .16s ease, border-color .16s ease, background .16s ease;
}
.firstpick .firstpick-schilde button img {
  display: block; width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .46));
}
.firstpick .firstpick-schilde button:hover {
  opacity: .82; filter: saturate(.9); transform: translateY(-1px) scale(.96);
}
.firstpick .firstpick-schilde button.ist-aktiv {
  opacity: 1; filter: saturate(1.12); transform: scale(1);
  border-color: rgba(255, 255, 255, .82); background: rgba(20, 60, 82, .72);
}
.firstpick .firstpick-schilde button[data-firstpick="wir"].ist-aktiv {
  box-shadow: 0 0 0 2px rgba(52, 169, 255, .35), 0 0 20px rgba(52, 169, 255, .34);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"].ist-aktiv {
  box-shadow: 0 0 0 2px rgba(255, 82, 105, .35), 0 0 20px rgba(255, 82, 105, .32);
}

@media (max-width: 1100px) {
  .brett.ist-banphase .brett-block--ban,
  .brett.ist-banphase .brett-block--wir { grid-column: auto; }
  .brett.ist-banphase .brett-block--ban { grid-column: 1 / -1; }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 220px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 175px; height: 175px; }
}

@media (max-width: 680px) {
  .brett.ist-banphase .brett-block--ban,
  .brett.ist-banphase .brett-block--wir { grid-column: 1; }
  .drafter-raster > .aktionsleiste .mapvorschau { min-height: 245px; }
  .drafter-raster > .aktionsleiste .mapvorschau-bild,
  .drafter-raster > .aktionsleiste .mapvorschau-medium { min-height: 200px; height: 200px; }
}

/* ═══════════════════════════════════════════════════════════════
   D1 · PREMIUM DASHBOARD
   Gemeinsame App-Shell und kompakte, desktop-first Draft-Flaeche.
   Diese Schicht veraendert ausschliesslich Darstellung und Layout.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #020d19;
  --bg-2: #06172a;
  --bg-3: #0a2035;
  --bg-4: #0b2940;
  --rand: #123b5c;
  --rand-hell: #1d5b82;
  --wir: #34a9ff;
  --gegner: #ff5269;
  --akzent: #ff8a45;
  --gut: #35e79b;
  --radius: 9px;
  --glow-wir: 0 0 20px rgba(36, 153, 255, .2);
  --glow-akzent: 0 0 20px rgba(255, 122, 47, .16);
}

body.drafter {
  background:
    radial-gradient(circle at 36% -20%, rgba(23, 101, 167, .25), transparent 35%),
    linear-gradient(145deg, rgba(0, 61, 102, .07), transparent 38%),
    var(--bg);
}

/* App-Shell */
.kopf {
  min-height: 60px; padding: 0 20px; gap: 20px;
  border-bottom-color: rgba(45, 151, 229, .38);
  background: rgba(2, 14, 28, .96);
}
.kopf::after { right: 0; width: 260px; background: linear-gradient(90deg, transparent, var(--wir)); }
.kopf-marke { gap: 11px; font-size: 25px; }
.kopf-emblem {
  width: 38px; height: 38px; flex-basis: 38px;
  color: #071524; background: linear-gradient(145deg, #ffe46f, #f4a51c);
  border-radius: 8px; border-width: 2px;
}
.kopf-emblem svg { width: 25px; height: 25px; transform: rotate(-45deg); }
.kopf-nav { flex: 1; justify-content: center; gap: 0; }
.kopf-nav a, .kopf-nav-zukunft {
  position: relative; display: flex; align-items: center; padding: 0 15px;
  color: #9dbbd3; border-bottom: 2px solid transparent;
  font-size: 11px; text-transform: none; letter-spacing: .01em;
  white-space: nowrap;
}
.kopf-nav-zukunft { cursor: default; }
.kopf-nav-zukunft::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 1px;
  background: transparent;
}
.kopf-nav a:hover { color: var(--text); background: rgba(34, 128, 209, .06); }
.kopf-nav a.ist-aktiv {
  color: #d9efff; border-bottom-color: var(--wir);
  background: linear-gradient(180deg, rgba(39, 129, 244, .02), rgba(39, 129, 244, .15));
  box-shadow: inset 0 -8px 22px rgba(27, 126, 242, .08);
}
.kopf-konto { display: flex; align-items: center; gap: 16px; }
.kopf-online {
  display: flex; align-items: center; gap: 7px; color: var(--gut);
  font-size: 10px; white-space: nowrap;
}
.kopf-online > span { width: 7px; height: 7px; border-radius: 50%; background: var(--gut); box-shadow: 0 0 10px var(--gut); }
.profilchip, .profilmenue > summary {
  min-width: 210px; display: flex; align-items: center; gap: 10px;
  padding: 6px 11px; background: rgba(7, 29, 52, .82);
  border: 1px solid var(--rand); border-radius: 8px; list-style: none;
}
.profilmenue { position: relative; }
.profilmenue > summary { cursor: pointer; }
.profilmenue > summary::-webkit-details-marker { display: none; }
.profil-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
  border: 1px solid #357fc3; border-radius: 50%; color: #dff4ff;
  background: linear-gradient(145deg, #1a9ead, #823eaa); font-weight: 500;
}
.profiltext { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
.profiltext strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.profiltext small { color: #84a5bf; font-size: 8px; }
.profil-pfeil { color: #78b9e7; }
.profilmenue .kopf-abmelden {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  width: 100%; padding: 5px; background: var(--bg-2); border: 1px solid var(--rand); border-radius: 7px;
}
.profilmenue .kopf-abmelden button { width: 100%; padding: 8px; color: var(--text-leise); }

/* Setup-Zone */
.aktionsleiste {
  display: grid;
  grid-template-columns: minmax(315px, 1.55fr) minmax(240px, 1.15fr) minmax(250px, 1.08fr) minmax(270px, 1.18fr) minmax(180px, .72fr);
  align-items: stretch; gap: 10px; padding: 12px 20px 14px;
  background: rgba(1, 13, 25, .76); overflow: visible;
}
.setupkarte {
  position: relative; min-width: 0; padding: 11px;
  background: linear-gradient(145deg, rgba(7, 29, 49, .96), rgba(3, 20, 35, .96));
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.setupkarte::after {
  content: ""; position: absolute; right: -1px; top: -1px; width: 20px; height: 20px;
  border-top: 1px solid rgba(62, 168, 245, .25); border-right: 1px solid rgba(62, 168, 245, .25);
  pointer-events: none;
}
.steuer-etikett {
  display: block; margin-bottom: 7px; color: #83b8de;
  font-size: 9px; letter-spacing: .14em;
}
.mapknopf {
  width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center; gap: 10px; min-height: 55px; padding: 4px 3px;
  background: transparent; border: 0; border-radius: 7px; text-align: left;
}
.mapknopf:hover { background: rgba(29, 106, 172, .08); box-shadow: none; }
.mapknopf::after { display: none; }
.mapknopf-zeile { gap: 1px; }
.mapknopf-modus { font-size: 21px; letter-spacing: .04em; text-transform: uppercase; }
.mapknopf-name { color: #b8d4e9; font-size: 12px; }
.mapknopf-pfeil { justify-self: end; color: #85caff; font-size: 25px; }
.modus-icon { width: 22px; height: 22px; color: #65baff; fill: none; }
.mapknopf-icon { display: grid; place-items: center; width: 46px; height: 46px; color: #bb62ff; }
.mapknopf-icon .modus-icon { width: 39px; height: 39px; color: currentColor; filter: drop-shadow(0 0 7px rgba(177,75,255,.35)); }
.modusfilter { display: grid; grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 5px; margin-top: 7px; }
.modusfilter-knopf {
  display: flex; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 5px 2px; color: #86a8c0; background: rgba(4, 20, 34, .75);
  border: 1px solid rgba(24, 68, 100, .88); border-radius: 6px;
}
.modusfilter-knopf span { width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 7px; white-space: nowrap; }
.modusfilter-knopf:hover, .modusfilter-knopf.ist-aktiv {
  color: #c8ebff; border-color: var(--wir); background: rgba(32, 133, 235, .12); box-shadow: var(--glow-wir);
}
.modusfilter-knopf.ist-aktiv .modus-icon { color: #b969ff; }

.mapvorschau { display: flex; flex-direction: column; overflow: hidden; padding: 7px; text-align: left; }
.mapvorschau-bild {
  position: relative; flex: 1; min-height: 98px; display: grid; place-items: center; overflow: hidden;
  border-radius: 6px; border: 1px solid rgba(46, 108, 151, .72);
  background:
    linear-gradient(90deg, rgba(31, 111, 156, .06) 1px, transparent 1px),
    linear-gradient(rgba(31, 111, 156, .06) 1px, transparent 1px), #061829;
  background-size: 18px 18px;
}
.mapvorschau-bild::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 28px rgba(0,0,0,.38); pointer-events: none; }
.mapvorschau-medium, .mapvorschau-medium img { width: 100%; height: 100%; object-fit: contain; }
.mapvorschau-leer { max-width: 180px; padding: 8px; color: #5f8199; font-size: 9px; line-height: 1.35; text-align: center; }
.mapvorschau-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 5px 2px; }
.mapvorschau-fuss > span:first-child { font-family: var(--display); font-size: 16px; letter-spacing: .04em; }
.mapvorschau-fuss > span:last-child { color: #7397b1; font-size: 8px; }

.steuerpaar { gap: 0; padding: 11px; background: linear-gradient(145deg, rgba(7, 29, 49, .96), rgba(3, 20, 35, .96)); border-color: var(--rand); }
.schalter--karten { display: grid; gap: 7px; border: 0; background: transparent; overflow: visible; }
.schalter--karten button {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; justify-content: initial;
  min-height: 52px; padding: 8px 10px; text-align: left;
  color: #a8c8df; background: rgba(5, 24, 41, .8); border: 1px solid rgba(25, 72, 106, .9); border-radius: 7px;
}
.schalter--karten button svg { align-self: center; width: 30px; height: 30px; color: #74bdff; }
.schalter--karten button > span { display: flex; flex-direction: column; align-self: center; min-width: 0; line-height: 1.3; }
.schalter--karten button strong { font-size: 11px; color: #c8e4f6; }
.schalter--karten button small { color: #7f9fb7; font-size: 8px; white-space: normal; }
.schalter--karten button.ist-aktiv {
  color: #def4ff; background: linear-gradient(120deg, rgba(20, 108, 220, .28), rgba(8, 37, 64, .8));
  border-color: #299cff; box-shadow: inset 0 0 0 1px rgba(67,179,255,.22), var(--glow-wir);
}
.schalter--karten button.ist-aktiv strong { color: #76c5ff; }
.schalter--karten button.ist-aktiv svg { color: #4ab2ff; filter: drop-shadow(0 0 6px rgba(50,168,255,.44)); }
.schalter--karten button[data-firstpick="gegner"].ist-aktiv {
  background: linear-gradient(120deg, rgba(179, 38, 66, .24), rgba(48, 25, 38, .82));
  border-color: var(--gegner); box-shadow: inset 0 0 0 1px rgba(255,102,126,.16), 0 0 18px rgba(255,82,105,.12);
}
.schalter--karten button[data-firstpick="gegner"].ist-aktiv strong,
.schalter--karten button[data-firstpick="gegner"].ist-aktiv svg { color: #ff7186; }
.schalter--drafttyp button.ist-aktiv {
  background: linear-gradient(120deg, rgba(169, 77, 25, .28), rgba(44, 30, 27, .82));
  border-color: var(--akzent); box-shadow: inset 0 0 0 1px rgba(255,172,105,.18), var(--glow-akzent);
}
.schalter--drafttyp button.ist-aktiv strong, .schalter--drafttyp button.ist-aktiv svg { color: #ff9a5a; }
.drafttyp-hinweis { margin-top: 5px; text-align: center; }
.phaseanzeige {
  display: flex; align-items: flex-start; padding: 12px;
  background: linear-gradient(145deg, rgba(7, 29, 49, .96), rgba(3, 20, 35, .96));
  border-color: var(--rand); box-shadow: none;
}
.phaseanzeige strong { margin: auto 0; color: var(--akzent); font-size: clamp(24px, 2vw, 33px); white-space: normal; }
.phaseaktionen { width: 100%; display: flex; align-items: center; gap: 4px; margin-top: auto; border-top: 1px solid rgba(32, 89, 128, .4); padding-top: 5px; }
.phaseaktionen .statusdetails { flex: 1; min-width: 0; }
.phaseaktionen .statusdetails > summary { min-width: 0; padding: 5px 2px; }
.phaseaktionen .datenlage { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.phaseaktionen .statusdetails-inhalt { right: 0; bottom: calc(100% + 7px); top: auto; }
.phaseaktionen .knopf-zuruecksetzen { width: 30px; height: 30px; flex: 0 0 30px; }

/* Map-Dialog */
.mapwaehler { background: rgba(0, 7, 14, .76); backdrop-filter: blur(3px); }
.mapwaehler-kasten { width: min(520px, calc(100vw - 40px)); max-height: min(72vh, 680px); border-color: #23608b; }
.mapwaehler-gruppentitel { display: flex; align-items: center; gap: 7px; }
.mapwaehler-gruppentitel .modus-icon { width: 16px; height: 16px; }
.mapzeile-bild { display: grid; place-items: center; }
.mapzeile-bild .modus-icon { width: 25px; height: 25px; }
.mapzeile-medium, .mapzeile-medium img { width: 40px; height: 40px; }

/* Werkflaeche */
.drafter-raster { grid-template-columns: minmax(275px, 20fr) minmax(570px, 52fr) minmax(340px, 28fr); gap: 12px; padding: 0 20px 12px; }
.brett, .auswahl, .panel { border-color: rgba(27, 76, 111, .92); background: rgba(5, 23, 39, .9); }
.brett-kopf { align-items: center; }
.brett-kopf > div { display: flex; flex-direction: column; gap: 4px; }
.brett-kopf h1 { font-size: 21px; }
.brett-kopf .brett-status {
  padding: 3px 7px; color: var(--gut); border: 1px solid rgba(53,231,155,.25); border-radius: 99px;
  font-size: 7px; letter-spacing: .08em;
}
.brett-block h2 { letter-spacing: .09em; }
.brett-hinweis { color: #f8bd58; font-size: 10px; }
.slot { border-style: solid; background: rgba(8, 35, 56, .72); }
.slot.ist-ziel { box-shadow: 0 0 12px rgba(52,169,255,.14); }
.kachel { background: linear-gradient(145deg, rgba(11, 43, 68, .94), rgba(4, 23, 38, .96)); border-color: #174669; }
.kachel.ist-bester { box-shadow: 0 0 0 1px rgba(95,197,255,.38), 0 0 18px rgba(36,153,255,.25); }
.auswahl-kopf { gap: 7px; }
.sortierung select, #rollenfilter, #verfuegbarkeitsfilter {
  max-width: 150px; min-height: 43px; padding: 9px 29px 9px 11px;
  color: var(--text-leise); font-size: 10px; background: var(--bg-3);
  border: 1px solid var(--rand); border-radius: 7px;
}
.verfuegbarkeitsfilter { display: block; flex: 0 0 auto; }
.panel { border-left-color: #238ddf; box-shadow: inset 2px 0 14px rgba(30, 142, 230, .05); }
.panel h2 { color: #8bc9ff; font-size: 18px; }
.vorschlag--top { border-color: rgba(37, 143, 224, .72); box-shadow: 0 0 18px rgba(29,133,219,.1); }
.vorschlag-etikett { color: #82c7ff; }

/* Finaler Wert: exakt der Backend-Wert, als zwei klar orientierte Karten. */
.finalchance {
  min-height: 140px; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
  place-content: stretch; justify-items: stretch; gap: 8px; padding: 0;
  border: 0; background: transparent; box-shadow: none;
}
.finalchance-seite {
  display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 7px; padding: 14px;
  background: rgba(4, 28, 40, .78); border: 1px solid rgba(29, 102, 113, .9); border-radius: 8px;
}
.finalchance-seite--eigen { border-color: rgba(36, 190, 141, .6); }
.finalchance-label { color: #9bbad0; }
.finalchance-eigen { color: var(--gut); font-size: clamp(42px, 4vw, 62px); }
.finalchance-gegner { color: #f0f4ff; font-family: var(--display); font-size: clamp(28px, 2.8vw, 43px); line-height: 1; }
.finalchance-balken { display: block; width: 100%; height: 7px; overflow: hidden; background: #12324a; border-radius: 99px; }
.finalchance-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--gegner); }
.finalchance-seite--eigen .finalchance-balken > span { background: var(--gut); }
.analyse-zukunft { display: grid; gap: 8px; margin-top: 10px; }
.analyse-zukunft-karte { padding: 11px; border: 1px solid rgba(25, 70, 103, .75); border-radius: 7px; background: rgba(7, 28, 45, .6); }
.analyse-zukunft-karte h3 { color: #7bbdf1; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.analyse-zukunft-karte p { margin-top: 5px; color: #68889f; font-size: 9px; line-height: 1.45; }

@media (max-width: 1450px) and (min-width: 1101px) {
  .kopf-nav a, .kopf-nav-zukunft { padding: 0 9px; font-size: 10px; }
  .profilchip, .profilmenue > summary { min-width: 170px; }
  .aktionsleiste { grid-template-columns: minmax(285px, 1.45fr) minmax(215px, 1.05fr) minmax(225px, 1fr) minmax(240px, 1.06fr) minmax(160px, .7fr); gap: 8px; padding-left: 14px; padding-right: 14px; }
  .modusfilter-knopf span { display: none; }
  .modusfilter-knopf { min-height: 39px; }
  .schalter--karten button { grid-template-columns: 28px minmax(0, 1fr); gap: 7px; }
  .schalter--karten button svg { width: 25px; height: 25px; }
  .drafter-raster { grid-template-columns: minmax(245px, 21fr) minmax(500px, 51fr) minmax(315px, 28fr); padding-left: 14px; padding-right: 14px; }
  #verfuegbarkeitsfilter { max-width: 150px; }
}

@media (max-width: 1250px) and (min-width: 1101px) {
  .auswahl-kopf { flex-wrap: wrap; }
  .suchfeld { flex-basis: 100%; }
  .sortierung, .rollenfilter, .verfuegbarkeitsfilter { flex: 1; }
  .sortierung select, #rollenfilter, #verfuegbarkeitsfilter { width: 100%; max-width: none; }
}

@media (max-width: 1100px) {
  body.ist-draftseite { overflow-x: hidden; }
  .kopf { flex-wrap: wrap; padding: 7px 12px 0; gap: 0 10px; }
  .kopf-nav { order: 3; width: 100%; min-height: 40px; overflow-x: auto; justify-content: flex-start; }
  .kopf-konto { margin-left: auto; }
  .kopf-online { display: none; }
  .profilchip, .profilmenue > summary { min-width: 155px; }
  .aktionsleiste {
    position: static; grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none; overflow: visible; padding: 10px 12px;
  }
  .mapkontext { grid-column: 1; }
  .mapvorschau { grid-column: 2; }
  .firstpick, .drafttyp { grid-column: auto; }
  .phaseanzeige { grid-column: 1 / -1; min-height: 105px; }
  .drafter-raster { grid-template-columns: 1fr; }
  .auswahl-kopf { flex-wrap: wrap; }
  .panel { order: 2; }
  .auswahl { order: 3; }
}

@media (max-width: 680px) {
  .kopf-marke { font-size: 20px; }
  .kopf-titel .kopf-marke-stark { display: none; }
  .profilchip, .profilmenue > summary { min-width: 138px; }
  .kopf-nav a, .kopf-nav-zukunft { min-height: 38px; padding: 0 10px; }
  .aktionsleiste { grid-template-columns: 1fr; }
  .mapkontext, .mapvorschau, .firstpick, .drafttyp, .phaseanzeige { grid-column: 1; }
  .mapvorschau-bild { min-height: 150px; }
  .schalter--karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phaseanzeige { min-height: 100px; }
  .drafter-raster { padding-left: 8px; padding-right: 8px; }
  .brett { grid-template-columns: 1fr; }
  .brett-kopf, .brett-block--ban, .jetzt { grid-column: 1; }
  .brett-block--gegner, .brett-block--wir { grid-column: 1; }
  .sortierung, .rollenfilter, .verfuegbarkeitsfilter { flex: 1 1 30%; }
  .sortierung select, #rollenfilter, #verfuegbarkeitsfilter { width: 100%; max-width: none; }
  .finalchance { grid-template-columns: 1fr; }
}

/* Debug-Tafel im Detail-Modal: die fuenf Groessen einer Empfehlung.
   Bewusst eine schlichte Liste - sie erklaert, sie wirbt nicht. */
.erklaerung-zeile {
  display: grid;
  grid-template-columns: 11rem 5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rand);
}
.erklaerung-name { font-weight: 600; }
.erklaerung-wert { font-family: var(--mono); text-align: right; }
.erklaerung-hinweis { color: var(--text-leise); font-size: 0.85rem; }
@media (max-width: 640px) {
  .diagnose-familie { grid-template-columns: 1fr auto; }
  .diagnose-status { grid-column: 1 / -1; text-align: left; }
  .erklaerung-zeile { grid-template-columns: 1fr auto; }
  .erklaerung-hinweis { grid-column: 1 / -1; }
}

/* ─── 13. Minimale Produktansicht ─────────────────────────── */
/* Die Arbeitsflaeche hat bewusst nur noch vier visuell gewichtete
   Kopfaktionen. Daten- und Engine-Details bleiben erreichbar, nehmen
   aber erst nach ausdruecklichem Oeffnen Platz ein. */
.aktionsleiste {
  grid-template-columns: minmax(210px, 1.25fr) minmax(220px, 1fr)
    minmax(245px, 1.1fr) minmax(140px, .62fr) auto 44px;
  gap: 10px; padding: 9px 22px 11px;
  background: rgba(5, 16, 24, .82);
}
.steuerpaar {
  gap: 5px; padding: 8px 12px;
  background: rgba(10, 27, 38, .72);
  border-color: rgba(40, 86, 107, .58);
  box-shadow: none;
}
.steuerpaar::after, .phaseanzeige::after, .mapknopf::after { display: none; }
.schalter { border-color: rgba(40, 86, 107, .72); }
.schalter button { min-height: 36px; padding: 7px 9px; }
.mapknopf {
  gap: 3px; padding: 8px 14px;
  background: rgba(10, 27, 38, .72);
  border-color: rgba(40, 86, 107, .58);
  box-shadow: none;
}
.mapknopf:hover { border-color: rgba(32, 213, 245, .72); box-shadow: none; }
.mapknopf.hat-bild { padding-left: 66px; }
.mapknopf-bild { left: 11px; width: 43px; height: 38px; }
.phaseanzeige {
  padding: 8px 15px;
  background: rgba(255, 122, 47, .055);
  border-color: rgba(255, 122, 47, .5);
  box-shadow: none;
}
.phaseanzeige strong { font-size: 24px; }

.statusdetails {
  position: relative; align-self: center; min-width: 0; z-index: 42;
  color: var(--text-leise);
}
.statusdetails > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px; border-radius: 5px; list-style: none;
  white-space: nowrap; cursor: pointer;
  transition: color .12s, background .12s;
}
.statusdetails > summary::-webkit-details-marker { display: none; }
.statusdetails > summary:hover,
.statusdetails[open] > summary { color: var(--text); background: rgba(255, 255, 255, .035); }
.statusdetails-pfeil { color: var(--text-sehr-leise); transition: transform .12s; }
.statusdetails[open] .statusdetails-pfeil { transform: rotate(180deg); }
.datenkarte-punkt { width: 7px; height: 7px; flex-basis: 7px; }
.datenlage { font-size: 10px; color: currentColor; }
.statusdetails-inhalt {
  position: absolute; top: calc(100% + 7px); right: 0;
  width: min(360px, calc(100vw - 24px)); padding: 12px;
  background: rgba(8, 24, 34, .98); border: 1px solid var(--rand-hell);
  border-radius: 7px; box-shadow: var(--schatten);
}
.statusdetails-inhalt p {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rand);
  color: var(--text-leise); font-size: 10px; line-height: 1.5;
}
.engine-status {
  position: static; max-width: none;
  font-size: 9px; gap: 6px;
}
.engine-status strong { font-size: 9px; }
.knopf-zuruecksetzen {
  align-self: center; width: 40px; height: 40px; min-height: 0; padding: 0;
  color: var(--text-leise); background: transparent;
  border-color: transparent; border-radius: 50%;
  transition: color .12s, background .12s, border-color .12s;
}
.knopf-zuruecksetzen span[aria-hidden] { font-size: 19px; }
.knopf-zuruecksetzen:hover {
  color: var(--gegner); background: rgba(255, 69, 100, .06);
  border-color: rgba(255, 69, 100, .28);
}

/* Verhaeltnis der drei Arbeitsbereiche: Draft 22 %, Auswahl 52 %,
   Empfehlungen 26 %. Die Fr-Einheiten teilen nur den nach Gaps noch
   freien Raum und verursachen deshalb keinen horizontalen Ueberlauf. */
.drafter-raster {
  grid-template-columns: minmax(250px, 22fr) minmax(500px, 52fr) minmax(310px, 26fr);
  gap: 14px; padding: 0 22px 14px;
}
.auswahl, .panel {
  background: rgba(8, 24, 34, .88);
  border-color: rgba(40, 86, 107, .58);
  box-shadow: none;
}

/* Ein zusammenhaengendes Draft-Board statt fuenf konkurrierender Karten. */
.brett {
  gap: 0; padding: 15px 16px 16px;
  background: rgba(8, 24, 34, .9);
  border: 1px solid rgba(40, 86, 107, .58);
  border-radius: var(--radius);
  box-shadow: none;
}
.brett-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px 11px; border-bottom: 1px solid rgba(40, 86, 107, .48);
}
.brett-kopf h1 {
  font-family: var(--display); font-size: 23px; line-height: 1;
  font-weight: 400; letter-spacing: .09em;
}
.brett-kopf span {
  color: var(--text-sehr-leise); font-size: 8px;
  letter-spacing: .08em; text-transform: uppercase;
}
.brett-block {
  padding: 14px 2px 15px; background: transparent;
  border: 0; border-bottom: 1px solid rgba(40, 86, 107, .38);
  border-radius: 0; box-shadow: none; overflow: visible;
}
.brett-block::after { display: none; }
.brett-block h2 {
  margin-bottom: 9px; padding: 0; border: 0;
  font-size: 16px; color: var(--text-leise);
}
.brett-block h2::before { font-size: 12px; }
.brett-block--gegner,
.brett-block--wir,
.brett-block--ban { border-left: 0; box-shadow: none; }
.brett-block--gegner h2 { color: var(--gegner); }
.brett-block--wir h2 { color: var(--wir); }
.brett-block--ban { padding-left: 2px; padding-right: 2px; }
.brett-block--ban h2 { color: var(--text-leise); }
.slots { gap: 9px; }
.slots--ban { gap: 5px; }
.slot {
  background: rgba(16, 42, 56, .62);
  border-color: rgba(40, 86, 107, .7);
}
.slot.ist-ziel { box-shadow: none; }
.slot-bild { width: min(76px, 84%); }
.slots--ban .slot { aspect-ratio: .86; }
.jetzt {
  margin-top: auto; padding: 11px 12px;
  background: rgba(11, 31, 42, .72);
  border-color: rgba(40, 86, 107, .55);
  box-shadow: none;
}
.jetzt-icon { width: 30px; height: 30px; flex-basis: 30px; }
.jetzt::after { font-size: 21px; }
.jetzt-text { font-size: 17px; }

/* Suche bleibt dominant. Sortierung und Rolle sind zwei gleichartige,
   kompakte native Controls; Analyse ist nur noch ein Icon-Schalter. */
.auswahl-kopf { flex-wrap: nowrap; }
.suchfeld { min-width: 180px; }
.sortierung select, #rollenfilter {
  min-height: 43px; padding: 9px 30px 9px 11px;
  color: var(--text-leise); font-size: 11px;
  background: var(--bg-3); border: 1px solid var(--rand);
  border-radius: 7px;
}
.rollenfilter {
  display: block; flex: 0 0 auto; min-height: 0;
}
#rollenfilter { max-width: 145px; }
.analyseschalter {
  width: 43px; min-width: 43px; padding: 0;
  font-size: 14px; border-color: var(--rand);
}

@media (max-width: 1280px) and (min-width: 1101px) {
  .aktionsleiste {
    grid-template-columns: minmax(185px, 1.1fr) minmax(190px, .9fr)
      minmax(220px, 1fr) minmax(125px, .6fr) auto 42px;
  }
  .drafter-raster {
    grid-template-columns: minmax(240px, 22fr) minmax(480px, 52fr) minmax(300px, 26fr);
  }
  #rollenfilter { max-width: 125px; }
}

@media (max-width: 1100px) {
  .aktionsleiste {
    position: sticky; top: 0; z-index: 30;
    grid-template-columns: minmax(180px, 1.1fr) minmax(190px, .9fr)
      minmax(220px, 1fr) minmax(130px, .6fr) auto 42px;
    gap: 7px; padding: 7px 12px;
    max-height: none; overflow: visible;
  }
  .mapknopf { grid-column: auto; }
  .phaseanzeige { min-height: 0; }
  .knopf-zuruecksetzen { grid-column: auto; min-height: 0; }
  .drafter-raster { grid-template-columns: 1fr; padding: 10px 12px 40px; }
  .brett {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px; padding: 13px 14px 14px;
  }
  .brett-kopf { grid-column: 1 / -1; }
  .brett-block { min-width: 0; }
  .brett-block--gegner { order: 1; }
  .brett-block--wir { order: 2; }
  .brett-block--ban { order: 3; grid-column: 1 / -1; }
  .jetzt { order: 4; grid-column: 1 / -1; margin-top: 12px; }
  .slot { aspect-ratio: auto; height: 62px; }
  .slot-bild { width: 46px; height: 46px; }
  .slots--ban .slot { height: 50px; }
}

@media (max-width: 760px) {
  .aktionsleiste {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  }
  .mapknopf { grid-column: 1 / 2; }
  .steuerpaar { grid-column: 2 / 3; }
  .drafttyp { grid-column: 1 / 3; }
  .phaseanzeige { grid-column: 3 / 4; grid-row: 1; }
  .statusdetails { grid-column: 1 / 3; }
  .knopf-zuruecksetzen { grid-column: 3 / 4; }
}

@media (max-width: 560px) {
  .aktionsleiste {
    grid-template-columns: minmax(0, 1fr) 112px 40px;
    gap: 6px; padding: 6px 10px;
  }
  .mapknopf { grid-column: 1 / -1; }
  .steuerpaar { grid-column: 1 / 2; }
  .drafttyp { grid-column: 1 / 4; }
  .phaseanzeige { grid-column: 2 / 4; min-height: 58px; }
  .statusdetails { grid-column: 1 / 3; }
  .knopf-zuruecksetzen { grid-column: 3 / 4; }
  .statusdetails-inhalt { left: 0; right: auto; }
  .brett { gap: 0 8px; padding: 11px 10px 12px; }
  .brett-kopf { padding-bottom: 9px; }
  .brett-kopf h1 { font-size: 20px; }
  .brett-kopf span { font-size: 7px; }
  .brett-block { padding: 10px 0 11px; }
  .brett-block h2 { font-size: 14px; }
  .slot { height: 50px; }
  .slot-bild { width: 34px; height: 34px; }
  .slots--ban .slot { height: 39px; }
  .jetzt { margin-top: 9px; }
  .auswahl-kopf { flex-wrap: wrap; }
  .suchfeld { flex-basis: 100%; }
  .sortierung, .rollenfilter { flex: 1; }
  .sortierung select, #rollenfilter { width: 100%; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   D2 · VERIFIED MAP PREVIEWS AND FINAL PRODUCT POLISH
   Images stay uncropped and unmodified; hierarchy changes only.
   ═══════════════════════════════════════════════════════════════ */
.mapvorschau {
  cursor: zoom-in;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.mapvorschau:hover:not(:disabled) {
  border-color: rgba(66, 174, 255, .78);
  box-shadow: 0 0 22px rgba(36, 153, 255, .12);
}
.mapvorschau:disabled { cursor: default; opacity: .72; }
.mapvorschau-fuss > span:first-child {
  display: flex; min-width: 0; flex-direction: column; line-height: 1.1;
}
.mapvorschau-fuss > span:first-child strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; font-weight: 400;
}
.mapvorschau-fuss > span:first-child small {
  margin-top: 2px; color: #7296b1; font: 8px var(--mono);
  letter-spacing: .02em; text-transform: uppercase;
}
.mapvorschau-fuss > span:last-child { white-space: nowrap; }
.mapvorschau-fuss b { color: #78c8ff; font-size: 11px; }

/* First Pick is one binary decision, presented as a compact segmented
   control. The active side remains unmistakable by fill, border and glow. */
.firstpick .schalter--karten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
}
.firstpick .schalter--karten button {
  grid-template-columns: 23px minmax(0, 1fr); gap: 6px;
  min-height: 50px; padding: 7px 8px;
}
.firstpick .schalter--karten button svg { width: 22px; height: 22px; }
.firstpick .schalter--karten button strong { font-size: 10px; }
.firstpick .schalter--karten button small { font-size: 7px; }

.mapwaehler-sektion {
  margin: 3px 0 9px; padding: 5px 5px 7px;
  border: 1px solid rgba(28, 78, 113, .52); border-radius: 7px;
  background: rgba(5, 23, 39, .54);
}
.mapwaehler-sektionstitel {
  padding: 4px 5px 7px !important; color: #8dc9f2 !important;
  border-bottom: 1px solid rgba(31, 86, 124, .5);
  font-size: 10px !important; font-weight: 500 !important;
}
.mapwaehler-sektion:first-of-type .mapwaehler-sektionstitel { color: var(--gut) !important; }
.mapwaehler-gruppentitel {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 5px 3px; color: var(--text-sehr-leise);
  font-size: 9px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase;
}
.mapwaehler-gruppentitel .modus-icon { width: 15px; height: 15px; }

.mapbild-modal {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  padding: 20px; background: rgba(0, 7, 14, .88); backdrop-filter: blur(5px);
}
.mapbild-modal[hidden] { display: none; }
.mapbild-modal-kasten {
  position: relative; width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  padding: 16px; background: linear-gradient(145deg, #082038, #041322);
  border: 1px solid #2b78aa; border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 32px rgba(36,153,255,.12);
}
.mapbild-modal-kopf {
  display: flex; align-items: center; gap: 11px; padding: 0 42px 12px 2px;
  border-bottom: 1px solid rgba(43, 120, 170, .45);
}
.mapbild-modal-kopf > span:first-child { display: grid; place-items: center; }
.mapbild-modal-kopf .modus-icon { width: 30px; height: 30px; color: #70c5ff; }
.mapbild-modal-kopf > span:last-child { display: flex; flex-direction: column; }
.mapbild-modal-kopf small {
  color: #7daac8; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}
.mapbild-modal-kopf strong {
  font: 25px/1.08 var(--display); font-weight: 400; letter-spacing: .05em;
}
.mapbild-modal-bild {
  min-height: 0; flex: 1; display: grid; place-items: center; padding: 14px 0 0;
  overflow: hidden;
}
.mapbild-modal-medium {
  width: min(100%, 460px); height: min(72dvh, 700px); aspect-ratio: 690 / 1050;
  border: 1px solid rgba(55, 139, 196, .55); border-radius: 7px;
  background: #061829 !important;
}
.mapbild-modal-medium img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1100px) {
  .mapvorschau { display: flex; grid-column: auto; }
}
@media (max-width: 760px) {
  .mapvorschau { grid-column: 1 / 3; grid-row: 2; }
  .firstpick { grid-column: 1 / 3; }
  .drafttyp { grid-column: 1 / 3; }
}
@media (max-width: 560px) {
  .mapvorschau { grid-column: 1 / -1; grid-row: auto; }
  .firstpick { grid-column: 1 / -1; }
  .mapbild-modal { padding: 8px; }
  .mapbild-modal-kasten { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .mapbild-modal-medium { height: min(70dvh, 620px); }
}

/* D4 final cascade: board above, setup rail left, selection center. */
.drafter-raster {
  grid-template-columns: minmax(270px, 24fr) minmax(500px, 50fr) minmax(310px, 26fr);
  grid-template-rows: auto minmax(0, 1fr); align-items: stretch;
}
.brett {
  grid-column: 1 / -1; grid-row: 1; display: grid;
  grid-template-columns: minmax(155px, .72fr) repeat(3, minmax(0, 1fr)) minmax(215px, 1.05fr);
  align-items: center; gap: 10px; padding: 10px 12px;
}
.brett-kopf { padding: 0 10px 0 2px; border: 0; }
.brett-block { min-width: 0; padding: 2px 10px; border: 0; border-left: 1px solid rgba(40,86,107,.38); }
.brett-block h2 { margin-bottom: 5px; font-size: 13px; }
.brett .slot { height: 54px; aspect-ratio: auto; }
.brett .slots--ban .slot { height: 44px; aspect-ratio: auto; }
.brett .slot-bild { width: 42px; height: 42px; }
.brett .slots--ban .slot-bild { width: 32px; height: 32px; }
.brett .jetzt { margin: 0; min-height: 54px; }
.aktionsleiste {
  grid-column: 1; grid-row: 2; position: static; z-index: 2; display: grid;
  grid-template-columns: 1fr; align-content: start; gap: 8px; min-width: 0; min-height: 0;
  padding: 10px; overflow: auto; border: 1px solid rgba(40,86,107,.58);
  border-radius: var(--radius); background: rgba(8,24,34,.88);
}
.aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
.aktionsleiste .firstpick, .aktionsleiste .drafttyp,
.aktionsleiste .phaseanzeige { grid-column: 1; grid-row: auto; }
.aktionsleiste .mapvorschau { display: flex; min-height: 162px; }
.aktionsleiste .mapvorschau-bild { min-height: 118px; }
.aktionsleiste .modusfilter { grid-template-columns: repeat(3, minmax(42px, 1fr)); }
.aktionsleiste .statusdetails-inhalt { left: 0; right: auto; }
.auswahl { grid-column: 2; grid-row: 2; }
.panel { grid-column: 3; grid-row: 2; }
.firstpick-muenzen { display: flex; justify-content: center; gap: 18px; padding: 9px; border: 0; background: transparent; }
.firstpick-muenzen button {
  display: grid; place-items: center; width: 58px; height: 58px; min-height: 58px; padding: 0;
  border: 3px solid rgba(97,149,179,.45); border-radius: 50%; color: #26dfff;
  background: #09273b; box-shadow: inset 0 0 0 3px rgba(2,10,18,.55); transform: rotate(-7deg);
}
.firstpick-muenzen button[data-firstpick="gegner"] { color: #ff526d; transform: rotate(7deg); }
.firstpick-muenzen button svg { width: 46px; height: 46px; }
.firstpick-muenzen button:hover { border-color: currentColor; transform: translateY(-2px) rotate(-7deg); }
.firstpick-muenzen button[data-firstpick="gegner"]:hover { transform: translateY(-2px) rotate(7deg); }
.firstpick-muenzen button.ist-aktiv {
  border-color: #fff; background: rgba(20,60,82,.95);
  box-shadow: 0 0 0 3px currentColor, 0 0 20px currentColor, inset 0 0 0 3px rgba(2,10,18,.55);
}
.auswahl-kopf { flex-wrap: wrap; }
.seltenheitsfilter { display: block; flex: 0 0 auto; min-height: 0; }
.sortierung select, #rollenfilter, #seltenheitsfilter, #verfuegbarkeitsfilter {
  min-height: 43px; padding: 9px 30px 9px 11px; color: var(--text-leise); font-size: 11px;
  background: var(--bg-3); border: 1px solid var(--rand); border-radius: 7px;
}
#rollenfilter, #seltenheitsfilter { max-width: 145px; }
@media (max-width: 1100px) {
  .drafter-raster { grid-template-columns: 1fr; grid-template-rows: auto; }
  .brett { grid-column: 1; grid-row: auto; order: 1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brett-kopf, .brett-block--ban, .brett .jetzt { grid-column: 1 / -1; }
  .aktionsleiste { grid-column: 1; grid-row: auto; order: 2; position: static; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; overflow: visible; }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau, .aktionsleiste .firstpick,
  .aktionsleiste .drafttyp, .aktionsleiste .phaseanzeige { grid-column: auto; grid-row: auto; }
  .aktionsleiste .phaseanzeige { grid-column: 1 / -1; }
  .auswahl { grid-column: 1; grid-row: auto; order: 3; }
  .panel { grid-column: 1; grid-row: auto; order: 4; }
}
@media (max-width: 680px) {
  .aktionsleiste { grid-template-columns: 1fr; }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau, .aktionsleiste .firstpick,
  .aktionsleiste .drafttyp, .aktionsleiste .phaseanzeige { grid-column: 1; }
  .brett { grid-template-columns: 1fr; }
  .brett-kopf, .brett-block--ban, .brett .jetzt { grid-column: 1; }
  .sortierung, .rollenfilter, .seltenheitsfilter, .verfuegbarkeitsfilter { flex: 1 1 42%; }
  .sortierung select, #rollenfilter, #seltenheitsfilter, #verfuegbarkeitsfilter { width: 100%; max-width: none; }
}

/* D5 final cascade: must remain after the historical D1-D4 layers. */
@media (min-width: 1101px) {
  main.drafter-raster {
    grid-template-columns: minmax(290px, 23fr) minmax(540px, 51fr) minmax(310px, 26fr);
  }
}
.drafter-raster > .brett {
  grid-template-columns: minmax(150px, .7fr) repeat(3, minmax(0, 1fr));
}
.brett.ist-banphase .brett-block--ban,
.brett.ist-banphase .brett-block--wir,
.brett .brett-block--gegner,
.brett .brett-block--ban,
.brett .brett-block--wir { grid-column: auto; }
.brett-kopf-aktionen { display: flex; align-items: center; gap: 7px; }
.brett-kopf .knopf-zuruecksetzen {
  width: 28px; height: 28px; min-height: 28px; flex: 0 0 28px; padding: 0;
  border: 1px solid rgba(50, 106, 141, .55); border-radius: 6px;
  background: rgba(10, 33, 48, .76);
}
.brett-kopf .knopf-zuruecksetzen span { font-size: 15px; line-height: 1; }
.bans-abschliessen.ist-rueckkehr {
  color: #ffc38a; border-color: rgba(255, 138, 69, .58);
  background: rgba(151, 70, 24, .14);
}
.bans-abschliessen.ist-rueckkehr:hover {
  color: #fff; border-color: var(--akzent); background: rgba(151, 70, 24, .26);
}
.drafter-raster > .aktionsleiste { gap: 9px; padding: 10px; }
.aktionsleiste .mapkontext { gap: 7px; padding: 10px; }
.aktionsleiste .mapknopf {
  min-height: 58px; padding: 8px 10px;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
}
.aktionsleiste .mapknopf-icon { width: 40px; height: 40px; }
.aktionsleiste .mapknopf-icon .modus-icon { width: 36px; height: 36px; }
.drafter-raster > .aktionsleiste .mapvorschau { min-height: 244px; padding: 9px; }
.drafter-raster > .aktionsleiste .mapvorschau-bild { min-height: 205px; }
.drafter-raster > .aktionsleiste .mapvorschau-medium { height: 205px; }
.mapvorschau-fuss { justify-content: space-between; padding-top: 6px; }
.mapvorschau-fuss > span:first-child {
  display: block; color: #6f96b1; font: 8px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase;
}
.firstpick > .steuer-etikett {
  display: block; width: 100%; margin-bottom: 2px; color: #cfeaff;
  font: 12px/1 var(--display); letter-spacing: .16em; text-align: center;
}
.firstpick .firstpick-schilde { gap: 16px; padding: 7px 5px 8px; }
.firstpick .firstpick-schilde button {
  width: 86px; height: 76px; min-height: 76px; padding: 3px;
  opacity: .56; filter: saturate(.72); transform: scale(.92);
}
.firstpick .firstpick-schilde button[data-firstpick="wir"] {
  background: radial-gradient(circle, rgba(32, 169, 255, .18), rgba(5, 24, 42, .72));
  border-color: rgba(52, 169, 255, .28);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"] {
  background: radial-gradient(circle, rgba(255, 67, 98, .16), rgba(41, 13, 25, .7));
  border-color: rgba(255, 82, 105, .26);
}
.firstpick .firstpick-schilde button img { width: 68px; height: 68px; }
.firstpick .firstpick-schilde button[data-firstpick="wir"]:hover,
.firstpick .firstpick-schilde button[data-firstpick="wir"].ist-aktiv {
  border-color: #69c8ff; background: rgba(15, 76, 119, .72);
  box-shadow: 0 0 0 2px rgba(62, 178, 255, .42), 0 0 28px rgba(41, 169, 255, .52);
}
.firstpick .firstpick-schilde button[data-firstpick="gegner"]:hover,
.firstpick .firstpick-schilde button[data-firstpick="gegner"].ist-aktiv {
  border-color: #ff7187; background: rgba(103, 23, 43, .7);
  box-shadow: 0 0 0 2px rgba(255, 82, 105, .4), 0 0 28px rgba(255, 55, 91, .48);
}
.mapwaehler-kasten { width: min(560px, calc(100vw - 32px)); }
.mapwaehler-suche { min-height: 42px; padding: 9px 12px; }
.mapwaehler-liste { padding: 7px; }
.mapzeile { min-height: 46px; gap: 11px; padding: 6px 9px; }
.mapzeile-bild {
  width: 34px; height: 34px; flex: 0 0 34px; background: rgba(9, 34, 54, .8);
}
.mapzeile-bild .modus-icon { width: 29px; height: 29px; }
.mapzeile-text { flex: 1; overflow: visible; }
.mapzeile-name {
  overflow: visible; color: #d8efff; font-size: 13px; line-height: 1.25;
  text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.mapzeile-modus { margin-top: 2px; font-size: 9px; text-transform: uppercase; }
.auswahl-kopf { display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 8px; }
.auswahl-kopf .suchfeld { min-width: 135px; }
.auswahl-kopf #suche {
  min-height: 34px; height: 34px; padding: 7px 29px 7px 35px; font-size: 11px;
}
.auswahl-kopf .suchfeld-symbol { left: 11px; width: 12px; height: 12px; }
.auswahl-kopf .suchfeld-taste { right: 6px; }
.auswahl-kopf .sortierung,
.auswahl-kopf .rollenfilter,
.auswahl-kopf .seltenheitsfilter,
.auswahl-kopf .verfuegbarkeitsfilter { flex: 0 1 auto; min-width: 0; }
.auswahl-kopf .sortierung select,
.auswahl-kopf #rollenfilter,
.auswahl-kopf #seltenheitsfilter,
.auswahl-kopf #verfuegbarkeitsfilter {
  width: auto; max-width: 122px; min-height: 34px; height: 34px;
  padding: 6px 23px 6px 8px; font-size: 9px; border-radius: 6px;
}
.auswahl-kopf .sortierung select { max-width: 72px; }
.auswahl-kopf #verfuegbarkeitsfilter { max-width: 108px; }
.auswahl-kopf .analyseschalter {
  width: 34px; min-width: 34px; min-height: 34px; height: 34px; padding: 0;
}
.kachel { gap: 5px; padding: 0 5px 7px; }
.kachel > .kachel-klasse {
  order: -1; align-self: stretch; width: auto; max-width: none;
  min-height: 22px; margin: 0 -5px; padding: 6px 4px 4px;
  overflow: hidden; color: #b8d9ed; background: rgba(19, 62, 88, .72);
  border-bottom: 1px solid rgba(57, 126, 166, .32);
  font: 600 8.5px/1.15 var(--mono); letter-spacing: .055em;
  text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}
.kachel-score, .kachel-rang { top: 29px; }
@media (max-width: 1100px) {
  .drafter-raster > .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brett-kopf, .brett-block--ban { grid-column: 1 / -1; }
  .aktionsleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
  .aktionsleiste .firstpick, .aktionsleiste .drafttyp { grid-column: auto; }
  .auswahl-kopf { flex-wrap: wrap; }
  .auswahl-kopf .suchfeld { flex: 1 1 100%; }
}
@media (max-width: 680px) {
  .drafter-raster > .brett { grid-template-columns: 1fr; }
  .brett-kopf, .brett-block--gegner, .brett-block--ban, .brett-block--wir { grid-column: 1; }
  .aktionsleiste { grid-template-columns: 1fr; }
  .aktionsleiste .mapkontext, .aktionsleiste .mapvorschau,
  .aktionsleiste .firstpick, .aktionsleiste .drafttyp { grid-column: 1; }
  .auswahl-kopf .sortierung,
  .auswahl-kopf .rollenfilter,
  .auswahl-kopf .seltenheitsfilter,
  .auswahl-kopf .verfuegbarkeitsfilter { flex: 1 1 calc(50% - 4px); }
  .auswahl-kopf .sortierung select,
  .auswahl-kopf #rollenfilter,
  .auswahl-kopf #seltenheitsfilter,
  .auswahl-kopf #verfuegbarkeitsfilter { width: 100%; max-width: none; }
}