/*
 * Der Look von Bundesliga Manager Professional — als EIGENE Arbeit.
 *
 * Keine Originalpixel: der Marmor ist prozedural (SVG-feTurbulence), die
 * Steinrahmen sind ein selbstgezeichnetes 12x12-Bevel-Tile für border-image,
 * die Farben stammen aus der geknackten Originalpalette (tools/vga_decode.py).
 *
 * Die Designsprache des Originals, an der sich alles hier ausrichtet:
 *   - marmorierter Steinhintergrund über den GANZEN Schirm
 *   - Inhalte in dunkelblauen Kästen mit hellem Text
 *   - jede Fläche von einem klobigen, abgeschrägten Steinrahmen gefasst
 *   - Gold/Gelb für Überschriften, Cremeweiß für Werte
 *   - der Abreißkalender als Papier-Element im Kopf
 *
 * Feste 640x400-Bühne, hochskaliert — scharfe Kanten, keine Weichzeichnung.
 */

:root {
  /* Originalpalette (1.PAL) + Marmorabstufungen */
  --schwarz: #000000;
  --blau: #23235e;          /* Inhaltskästen — das Navy der Originalschirme */
  --blauTief: #1a1a4c;      /* Titelzeilen, Einsätze */
  --marmor: #6b6b88;        /* Steingrundton */
  --steinHell: #d8d8ea;
  --stein: #8f8fac;
  --steinDunkel: #3c3c58;
  --gruen: #618130;
  --rot: #e25555;
  --braun: #917150;
  --hellgrau: #d2d2e4;      /* Fließtext auf Navy */
  --dunkelgrau: #9a9ac2;    /* gedämpfter Text auf Navy */
  --hellgruen: #8fc65a;
  --hellrot: #ff7070;
  --gelb: #f2e23a;          /* Beschriftungsgold */
  --weiss: #f2f2f6;
  --papier: #e8dcbc;        /* Kalender */
  --papierDunkel: #b8a67e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #101018;
  overflow: hidden;
  font-family: "Courier New", monospace;
}

#huelle { position: absolute; top: 0; left: 0; }

/* ── Marmor ──
 * Zwei Rauschschichten: grobe dunkle Adern + feines helles Korn. */
#buehne, .marmor {
  /* Die ECHTE Marmorkachel des Originals (PIC/200.VGA, 104x105) — Pixelstruktur
   * original, Blaugrau-Rampe rekonstruiert (Indexbild ohne eigene Palette). */
  background-color: var(--marmor);
  background-image: url(orig/marmor.png);
  background-size: 104px 105px;
}

#buehne {
  width: 640px;
  height: 400px;
  position: relative;
  overflow: hidden;
  transform-origin: top left;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  color: var(--hellgrau);
  font-size: 11px;
  line-height: 12px;
}

/* ── Steinrahmen ──
 * Ein 12x12-Bevel-Tile: außen Licht oben/links, Schatten unten/rechts,
 * innen umgekehrt — der Bilderrahmen-Effekt der Originalflächen. */
.flaeche, .versenkt, #kopf, #fuss, .reiter, button, .kalender {
  border-style: solid;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%238f8fac'/%3E%3Cpath d='M0 0h12v1H1v11H0z' fill='%23d8d8ea'/%3E%3Cpath d='M12 0v12H0v-1h11V0z' fill='%233c3c58'/%3E%3Cpath d='M3 3h6v1H4v5H3z' fill='%23565678'/%3E%3Cpath d='M9 3v6H3v-1h5V3z' fill='%23c2c2d8'/%3E%3C/svg%3E");
  border-image-slice: 5;
  border-image-repeat: stretch;
}

/* Erhabene Navy-Fläche im Steinrahmen — die Grundform jedes Inhaltskastens. */
.flaeche {
  background: var(--blau);
  border-width: 5px;
}

/* Versenkte Fläche — Listen und Eingaben, dunkler. */
.versenkt {
  background: var(--blauTief);
  border-width: 5px;
}

.dunkel { background: var(--blauTief); color: var(--hellgrau); }

/* ── Kopfleiste: Steinplatte mit Wappen, Titel, Kalender, Kasse ── */
/* ── KOPFLEISTE: eine Stellschraube ──────────────────────────────────────────
 * `--kopfSkala` skaliert die GANZE Kopfleiste: Höhe, Slot-Positionen, Bilder und
 * Schriften hängen alle daran. 1 = Originalhöhe (130px), 0.8 = 80 %.
 * Zum Ändern GENÜGT diese eine Zahl — alles darunter (Ressorts, Seitenleiste,
 * Inhalt) rückt automatisch nach, weil es von --kopfH abgeleitet ist.
 * WAAGERECHT wird bewusst NICHT skaliert: die Rahmengrafik (kopf.png) wird per
 * background-size auf 100 % Breite gezogen, staucht also nur in der Höhe. */
:root {
  --kopfSkala: 0.8;
  --kopfH: calc(130px * var(--kopfSkala));
  /* EINE Bildzeile der Kopfgrafik auf dem Schirm. kopf.png ist 640×138 (nicht
   * 130!) — alle Slots waren auf ein 130er-Design gesetzt und rutschten dadurch
   * nach unten aus ihren gemalten Vertiefungen (Statuszeile hing auf der
   * Steinkante). Jetzt stehen alle Slots in BILDZEILEN × diese Einheit; damit
   * sitzen sie exakt auf der Grafik, egal wie --kopfSkala steht. */
  --kopfE: calc(var(--kopfH) / 138);
}
#kopf {
  position: absolute; top: 0; left: 0; right: 0; height: var(--kopfH);
  border: none;
  padding: 0;
}
#wappen {
  width: 34px; height: 34px; flex: none;
  background: var(--blauTief);
  border: 2px solid var(--steinDunkel);
  box-shadow: inset 1px 1px 0 var(--steinHell);
  display: flex; align-items: center; justify-content: center;
  color: var(--gelb); font-weight: bold; font-size: 13px;
}
#kopfText { flex: 1; overflow: hidden; }
#vereinName {
  font-weight: bold; font-size: 13px; line-height: 15px;
  color: var(--weiss); text-shadow: 1px 1px 0 var(--steinDunkel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kopfZeile2 { font-size: 9px; color: #2c2c48; font-weight: bold; }

/* Der Abreißkalender. */
.kalender {
  flex: none; width: 86px; height: 40px;
  border-width: 4px;
  background: var(--papier);
  color: #2c2410;
  text-align: center; line-height: 1;
  padding-top: 2px;
}
.kalender .kWtag { font-size: 8px; font-weight: bold; color: #23235e; }
.kalender .kTag { font-size: 15px; font-weight: bold; color: #8c1a10; line-height: 15px; }
.kalender .kRest { font-size: 8px; font-weight: bold; }

#kopfRechts {
  flex: none; text-align: right; font-size: 10px;
  background: var(--blauTief);
  border: 2px solid var(--steinDunkel);
  box-shadow: inset 1px 1px 0 var(--steinHell);
  padding: 3px 6px; color: var(--hellgrau);
}

/* ── Reiter: Steinkacheln ── */
/* ── Navigation Ebene 1: Ressorts (Abteilungen) ── */
#reiter {
  position: absolute; top: var(--kopfH); left: 0; right: 0; height: 26px;
  display: flex; gap: 3px; padding: 1px 2px 0;
}
.reiter {
  border-width: 3px;
  flex: 1 1 0; min-width: 0; justify-content: center;
  background: linear-gradient(180deg, #b6b6cc, var(--stein));
  padding: 2px 4px; font-size: 12px; font-weight: bold;
  color: #23233e; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px; position: relative;
  white-space: nowrap; overflow: hidden;
}
.reiter.klein { flex: 0 0 auto; }        /* Extras schmaler */
.reiter:hover { background: linear-gradient(180deg, #c8c8dc, #a2a2bc); }
.reiter.aktiv { background: var(--blauTief); color: var(--gelb); border-bottom-color: var(--blauTief); }
.reiter svg { width: 14px; height: 14px; flex: none; }

/* ── Navigation Ebene 2: Seiten des aktiven Ressorts ── */
#unterreiter {
  position: absolute; top: calc(var(--kopfH) + 28px); left: 0; right: 0; height: 24px;
  display: flex; gap: 0; padding: 0 4px; background: var(--blauTief);
  border-left: 2px solid var(--steinDunkel); border-right: 2px solid var(--steinDunkel);
  align-items: stretch;
}
.unterreiter {
  display: flex; align-items: center; gap: 5px; padding: 2px 15px; cursor: pointer;
  color: #c2cbe0; font-size: 11px; font-weight: bold; white-space: nowrap;
  border-bottom: 3px solid transparent; user-select: none; position: relative;
}
.unterreiter:hover { color: #fff; }
.unterreiter.aktiv { color: var(--gelb); border-bottom-color: var(--gelb); }
.unterreiter svg { width: 11px; height: 11px; flex: none; opacity: .9; }

/* Ungelesen-Zähler — an Ressort (Ebene 1) und an der Seite (Ebene 2). */
.navbadge { background: #ff5d6c; color: #fff; font: bold 7px sans-serif; border-radius: 999px;
  padding: 0 3px; line-height: 11px; height: 11px; }
.reiter .navbadge { position: absolute; top: -3px; right: -2px; }
.unterreiter .navbadge { margin-left: 4px; }

/* ── Inhalt ── */
#inhalt {
  position: absolute; top: calc(var(--kopfH) + 52px); left: 0; right: 0; bottom: 22px;
  padding: 3px;
  /* Seiten sind hoeher als die Buehne — der Inhalt scrollt, Kopf und Reiter stehen. */
  overflow-y: auto;
  overflow-x: hidden;
}
.seite { display: none; height: 100%; }
.seite.aktiv { display: block; }

/* ── Fusszeile ── */
#fuss {
  position: absolute; bottom: 0; left: 0; right: 0; height: 22px;
  border-width: 4px;
  background-color: var(--marmor);
  background-image: inherit;
  padding: 1px 6px;
  font-size: 10px; font-weight: bold;
  display: flex; align-items: center; justify-content: space-between;
  color: #23233e;
}
/* Eine Zeile, notfalls mit „…" abgeschnitten — sonst umbricht eine lange
   Meldung und überlappt mit der rechten Fußzeile (Ebene/Baustelle). */
#meldung { color: #1a1a4c; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#meldung.warnung { color: #8c1a10; }
#fussRechts { flex-shrink: 0; margin-left: 10px; white-space: nowrap; }

/* ── Tabellen auf Navy ── */
table { border-collapse: collapse; width: 100%; font-size: 10px; }
th {
  background: var(--blauTief); color: var(--gelb);
  text-align: left; padding: 1px 3px; font-weight: bold;
  border-bottom: 1px solid var(--steinDunkel);
}
td {
  padding: 1px 3px; color: var(--hellgrau);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
tr.ich { background: var(--gelb); font-weight: bold; }
tr.ich td { color: #1a1a10; }
tr.zebra { background: rgba(255, 255, 255, 0.055); }
.r { text-align: right; }
.z { text-align: center; }

/* Auf-/Abstiegsmarken — welcher Platz welche bekommt, entscheidet der Kern. */
.m-meister { background: #2e6b18; color: var(--weiss); }
.m-auf { background: var(--hellgruen); color: #10240a; }
.m-releg { background: var(--braun); color: var(--weiss); }
.m-ab { background: #8c1a10; color: var(--weiss); }

/* SEITE(N): drei Buchstaben L·M·R, die abgedeckten gold auf Tiefblau. */
.bahnZelle { white-space: nowrap; letter-spacing: 1px; }
.bahn {
  display: inline-block; width: 9px; text-align: center;
  color: #56567a; font-size: 9px;
}
.bahn.an { color: var(--gelb); background: var(--blauTief); font-weight: bold; }

/* ── Knöpfe: Stein, erhaben ── */
button {
  font-family: inherit; font-size: 10px; font-weight: bold;
  padding: 2px 8px; cursor: pointer;
  border-width: 4px;
  background: linear-gradient(180deg, #c2c2d6, var(--stein));
  color: #1c1c38;
}
button:active { background: linear-gradient(0deg, #c2c2d6, var(--stein)); }
button.gross { font-size: 12px; padding: 4px 12px; }
button.gewaehlt { background: var(--blauTief); color: var(--gelb); }
button:disabled { color: #6a6a84; cursor: default; }
/* Kaderknöpfe der Zweiten (▼ ▲ ✓): schmal, aber mit ordentlicher Klickfläche —
   in einer Liste, in der sie in JEDER Zeile stehen, entscheidet die Trefferfläche
   über die Bedienbarkeit. Der 4-px-Rahmen der Standardknöpfe frisst hier zu viel. */
button.zwKnopf {
  border-width: 2px; padding: 1px 6px; min-width: 22px; line-height: 1.25;
}
/* Vertrags-Knopf zuerst in der Zelle → gleiche linke Kante; der Status trailt.
   Kompaktes Padding, damit die Spalte schmal bleibt und nicht überläuft. */
.vertragBtn { padding: 2px 5px; }

input[type=number], input[type=text], select {
  font-family: inherit; font-size: 10px; padding: 1px 3px;
  background: var(--blauTief); color: var(--weiss);
  border: 2px solid var(--steinDunkel);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.5), 1px 1px 0 var(--steinHell);
}
input[type=number] { width: 70px; }

/* ── Ball-Regler (1–5 Bälle, wie das Original) ── */
.baelle { white-space: nowrap; cursor: pointer; }
.baelle svg { width: 13px; height: 13px; margin-right: 1px; vertical-align: middle; }
.baelle .leer { opacity: 0.22; }

/* ── Balken (Geduld, Auslastung) ── */
.balken {
  display: inline-block; width: 60px; height: 8px;
  background: var(--blauTief); border: 1px solid var(--steinDunkel);
  vertical-align: middle;
}
.balken > i { display: block; height: 100%; background: var(--hellgruen); }
.balken.mittel > i { background: var(--gelb); }
.balken.schlecht > i { background: var(--rot); }

/* ── Ticker ── */
#tickerListe { height: 100%; overflow-y: auto; padding: 3px; font-size: 10px; }
#tickerListe div { padding: 0 2px; }
.t-tor { background: var(--gelb); color: #1a1a10; font-weight: bold; }
.t-wichtig { color: var(--hellrot); font-weight: bold; }
.t-min { display: inline-block; width: 22px; color: var(--dunkelgrau); }

/* ── Vereinswahl ── */
#wahlListe { height: 100%; overflow-y: auto; }
.wahlZeile {
  padding: 1px 4px; cursor: pointer; font-size: 10px; display: flex; gap: 6px;
  white-space: nowrap; overflow: hidden; color: var(--hellgrau);
}
.wahlZeile > span { overflow: hidden; text-overflow: ellipsis; }
.wahlZeile:hover { background: var(--gelb); color: #1a1a10; }
.wahlZeile:hover * { color: #1a1a10; }
.wahlEbene {
  background: var(--blauTief); color: var(--gelb); font-weight: bold;
  padding: 2px 4px; font-size: 10px; margin-top: 2px;
  border-top: 1px solid var(--steinHell); border-bottom: 1px solid var(--steinDunkel);
}

.spalten { display: flex; gap: 4px; height: 100%; }
.spalte { flex: 1; overflow-y: auto; }
.titel {
  background: var(--blauTief); color: var(--gelb); font-weight: bold;
  padding: 2px 4px; font-size: 10px;
  border-top: 1px solid var(--steinHell); border-bottom: 1px solid var(--steinDunkel);
}
.zeile { display: flex; justify-content: space-between; padding: 1px 4px; font-size: 10px; }
.zeile.summe { border-top: 1px solid var(--stein); font-weight: bold; }
.gut { color: var(--hellgruen); }
.schlecht { color: var(--hellrot); }
.klein { font-size: 9px; color: var(--dunkelgrau); }

/* ── Bankschirm: Zinsstaffel ── */
.staffelZeile {
  display: flex; justify-content: space-between; padding: 1px 6px;
  font-size: 10px; cursor: pointer; color: var(--hellgrau);
}
.staffelZeile:hover { background: rgba(255,255,255,.08); }
.staffelZeile.gewaehlt { background: var(--gelb); color: #1a1a10; font-weight: bold; }

/* ── Start-Banner: Rasenstreifen mit Titel ── */
.banner {
  background-color: #3f6f1c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' seed='6'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0.5 0.5 0 -0.5'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 24px, rgba(0,0,0,0.08) 24px 48px);
  border: 3px solid var(--steinDunkel);
  box-shadow: inset 1px 1px 0 var(--steinHell);
  text-align: center;
  padding: 8px 0 6px;
}
.banner .bTitel {
  font-size: 26px; line-height: 26px; font-weight: bold; letter-spacing: 3px;
  color: #e8dcbc;
  text-shadow: 2px 2px 0 #1a2c08, -1px -1px 0 #6a9a3a;
}
.banner .bUnter {
  font-size: 13px; line-height: 15px; font-style: italic; font-weight: bold;
  color: #b02418; text-shadow: 1px 1px 0 #1a2c08;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--blauTief); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b6b6cc, var(--stein));
  border: 1px solid var(--steinDunkel);
}

/* ── Die Zeitung: Papier auf Marmor ── */
.zeitungsblatt {
  background: var(--papier);
  border: 4px solid var(--steinDunkel);
  box-shadow: inset 0 0 0 1px var(--papierDunkel), 2px 2px 0 rgba(0,0,0,.35);
  color: #241c08;
  padding: 8px 10px;
}
.zeitungsblatt .zKopf {
  font-size: 20px; font-weight: bold; letter-spacing: 4px; text-align: center;
  border-bottom: 3px double #241c08; padding-bottom: 2px;
}
.zeitungsblatt .zDatum { text-align: center; font-size: 9px; border-bottom: 1px solid #241c08; margin-bottom: 6px; }
.zeitungsblatt .zSchlag { font-size: 15px; line-height: 17px; font-weight: bold; margin: 4px 0 8px; }
.zeitungsblatt .zTitel { font-weight: bold; font-size: 11px; border-bottom: 1px solid #8a7a50; margin-top: 8px; }
.zeitungsblatt .zZeile { font-size: 10px; line-height: 13px; }

/* ── Editor ── */
#editorT input, #editorT select {
  width: 100%; min-width: 26px; font-size: 9px; padding: 0 2px;
  background: var(--blauTief); color: var(--weiss); border: 1px solid var(--steinDunkel);
  box-shadow: none;
}

/* ══════════ v19: ORIGINAL-ARTWORK-SKIN (PIC/*.VGA, privat dekodiert) ══════════ */

.pix { image-rendering: pixelated; }

/* Echter Marmor — aus der Original-Kopfleiste gekachelt, statt SVG-Turbulenz. */


/* Die Original-Kopfleiste: 640x130, Slots absolut positioniert. */
#kopf {
  background: url(orig/kopf.png);
  background-size: 100% 100%;
  image-rendering: pixelated;
  display: block;
}
#kopf .slot { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Alle SENKRECHTEN Maße und alle Schriften/Bilder hängen an --kopfSkala;
 * waagerecht bleibt es, damit die Slots zur gestauchten Rahmengrafik passen. */
/* Alle SENKRECHTEN Maße in BILDZEILEN der Grafik (× --kopfE, s. o.);
 * waagerecht ist die Grafik 1:1 (640 Bildspalten = 640 Bühnenpixel). */
#kopfPortrait { left: 28px; top: calc(36 * var(--kopfE)); width: 86px; height: calc(80 * var(--kopfE)); background: #000; }
/* `contain` statt `cover`: das Portraet wird proportional kleiner statt beschnitten. */
#kopfPortrait img { width: 100%; height: 100%; object-fit: contain; }
#kopfSpieltag { left: 148px; top: calc(17 * var(--kopfE)); width: 215px; height: calc(22 * var(--kopfE)); color: #d8dcf0; font-weight: bold; font-size: calc(13px * var(--kopfSkala)); letter-spacing: calc(2px * var(--kopfSkala)); }
#kopfVerein { left: 127px; top: calc(49 * var(--kopfE)); width: 243px; height: calc(38 * var(--kopfE)); color: #fff; font-weight: bold; font-size: calc(13px * var(--kopfSkala)); text-align: center; flex-direction: column; line-height: 1.25; }
/* Vereinsname darf nie umbrechen — lieber kürzen als die Kassette sprengen. */
#kopfVerein .kvName { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Untertitel war #9aa2c8 auf Dunkelblau — zu wenig Kontrast, und mit 6,4px zu
 * klein. Heller und größer; der Mittelpunkt bleibt gedämpft als reines Trennzeichen. */
#kopfVerein .kvUnter { color: #c3cdea; font-weight: normal; font-size: calc(9px * var(--kopfSkala)); margin-top: calc(2px * var(--kopfSkala)); }
#kopfVerein .kvTrenn { color: #7b86ab; margin: 0 calc(2px * var(--kopfSkala)); }

/* ── Statuszeile: links Kontext (Manager/Level), rechts die Kennzahlen ────────
 * LESBARKEITS-UNTERGRENZE: Die Bühne wird je nach Fenster skaliert (bei kleinem
 * Fenster auf ~0,56×!). Alles unter ~8 Bühnen-Pixeln zerfällt dann zu Matsch —
 * die alte Zeile stand bei 7px × 0,8 = 5,6px, also real ~3px. Deshalb hier
 * KEINE Schrift unter 8px (vor --kopfSkala) und kräftige Kontraste. */
/* ACHTUNG SPEZIFITÄT: `#kopf .slot` (1,1,0) zentriert alle Slots. Ein blosses
 * `#kopfUnter` (1,0,0) verliert dagegen — `space-between` wurde stillschweigend
 * ignoriert, der Inhalt klebte mittig mit toter Fläche links und rechts.
 * Deshalb hier `#kopf #kopfUnter` (2,0,0). */
#kopf #kopfUnter {
  /* Gemalte Vertiefung: Bildzeilen 96..119 — der Slot deckt sie jetzt exakt,
   * vorher hing der Text auf ihrer Unterkante und ragte auf den Stein. */
  left: 127px; top: calc(97 * var(--kopfE)); width: 243px; height: calc(22 * var(--kopfE));
  color: #cfd3e8; white-space: nowrap;
  /* EINE Schriftgröße für die ganze Zeile. In einem 15px hohen Streifen wirken
   * vier verschiedene Größen (6,4/7,2/8,8/…) zerfranst; unterschieden wird
   * ausschließlich über FARBE und Fettung — das bleibt ruhig und lesbar. */
  font-size: calc(10px * var(--kopfSkala));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(7px * var(--kopfSkala)); gap: calc(6px * var(--kopfSkala));
}
/* Der Vertiefungsgrund ist #505071 — gedämpfte Töne müssen trotzdem ~4:1
 * Kontrast halten (das alte #78829f lag bei ~1,9:1 und soff ab). */
#kopf #kopfUnter .kuName { color: #ccd3ec; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#kopf #kopfUnter .kuLvl { color: #a6afd0; margin-left: calc(5px * var(--kopfSkala)); }
#kopf #kopfUnter .kuWerte { display: flex; align-items: center; gap: calc(11px * var(--kopfSkala)); flex: none; }
#kopf #kopfUnter .kuPaar { display: inline-flex; align-items: center; gap: calc(3px * var(--kopfSkala)); }
#kopf #kopfUnter .kuPaar i { font-style: normal; color: #a6afd0; }
#kopf #kopfUnter .kuPaar b { color: #ffffff; font-weight: bold; }
#kopf #kopfUnter .kuPaar b.gut { color: var(--gelb); }   /* Aufstiegsplatz */
#kopf #kopfUnter .kuPaar b.warn { color: #ff7a7a; }      /* Abstiegsplatz / Konto negativ */
#kopfWappen { left: 373px; top: calc(36 * var(--kopfE)); width: 94px; height: calc(80 * var(--kopfE)); background: #fff; }
#kopfWappen img { max-width: 90%; max-height: 92%; object-fit: contain; image-rendering: pixelated; }
#kopfWappen img.echt { image-rendering: auto; object-fit: contain; } /* echte Logos glatt */
/* Mini-Wappen in Ligentabellen: glatt herunterskaliert, links vom Namen. */
.wappenMini { height: 15px; width: 15px; object-fit: contain; vertical-align: middle; margin-right: 5px; }
#kopfWappen span { font-weight: bold; font-size: calc(22px * var(--kopfSkala)); color: #223; }
/* Abreisskalender: blaue Schrift, roter Tag — wie das Original. */
#kopfKalender { left: 486px; top: calc(8 * var(--kopfE)); width: 135px; height: calc(112 * var(--kopfE)); flex-direction: column; justify-content: center; gap: 0; }
#kopfKalender .kWtag { color: #2a2a80; font-weight: bold; font-size: calc(12px * var(--kopfSkala)); }
#kopfKalender .kTag { color: #b02020; font-weight: bold; font-size: calc(26px * var(--kopfSkala)); line-height: 1.05; }
#kopfKalender .kRest { color: #2a2a80; font-weight: bold; font-size: calc(10px * var(--kopfSkala)); text-align: center; }

/* Ikonen-Navigation im Stil des Hauptmenues: Steinrahmen, blaue Kassette. */
.ikonNav { display: flex; gap: 6px; justify-content: center; margin: 2px 0 5px; }
.ikonNav .ikn {
  width: 58px; height: 48px;
  border: 10px solid transparent;
  border-image: url(orig/rahmen.png) 14 fill stretch;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: #101070;
}
.ikonNav .ikn img { max-width: 42px; max-height: 34px; }
.ikonNav .ikn:hover { filter: brightness(1.25); }

/* Portraetwahl auf dem Startschirm. */
.pwBild { width: 42px; height: 52px; object-fit: cover; cursor: pointer; border: 2px solid var(--dunkelgrau); vertical-align: middle; margin-right: 2px; }
.pwBild.gewaehltP { border-color: var(--gelb); }

/* Pokal-/Europa-Kopfbilder */
.pokalKopf { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.pokalKopf img { height: 52px; image-rendering: pixelated; }
.titelMinis img { height: 16px; image-rendering: pixelated; vertical-align: middle; margin-right: 2px; }

/* Bankfassade auf der Finanzseite */
#bankBild { display: block; width: 100%; max-width: 282px; image-rendering: pixelated; margin: 0 auto 4px; }

/* ══════════ v20: Der Werbeschirm (Original: Sponsorentafel + Schwarzboxen) ══════════ */

/* Sponsorentafel: braune Kacheln wie das Logo-Board des Originals. */
.werbeBoard { display: flex; gap: 4px; padding: 4px; }
.werbeTile {
  flex: 1; min-width: 0;
  background: linear-gradient(180deg, #b89d72, #a08557);
  border: 2px solid #6d5a39;
  box-shadow: inset 1px 1px 0 #d8c49a, inset -1px -1px 0 #7a6543;
  padding: 4px 5px;
  text-align: center;
  color: #2c1f0e;
}
.werbeTile .wtName { font-weight: bold; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werbeTile .wtBranche { font-size: 8px; color: #52401f; }
.werbeTile .wtBetrag { font-size: 10px; font-weight: bold; margin-top: 2px; }
.werbeTile button { margin-top: 3px; font-size: 8px; padding: 1px 4px; }
.werbeTile.vergeben { opacity: 0.55; }

/* Schwarzbox: die Wertekaesten des Originalschirms (VERTRAG: 2JAHRE / 33.180 DM). */
.schwarzZeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.schwarzZeile .szLabel { font-weight: bold; }
.schwarzBox {
  background: #000;
  border: 1px solid #43436a;
  box-shadow: inset 1px 1px 0 #1a1a30;
  color: #e8e8f8;
  font-weight: bold;
  padding: 2px 8px;
  min-width: 110px;
  text-align: right;
}
.werbeTrenner { border-top: 2px solid #fff; margin: 4px 0; }

/* ══════════ v21: Werbeszene — Trikot mit Brustlogo + Bande auf dem Rasen ══════════ */
#werbeSzene {
  /* Nahtlose Mähstreifen (vertikal gekachelt) — KEIN doppeltes Spielfeld mehr. */
  background: url(orig/rasen_szene.png) repeat-x;
  background-size: 64px 100%;
  image-rendering: pixelated;
  border: 2px solid #43436a;
  padding: 0 8px;                 /* Banden sitzen bündig oben und unten */
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
#szeneTrikot { position: relative; display: inline-block; margin: 6px 0; }
#szeneTrikot img { display: block; }
#szeneTrikotLogo {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 74px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#szeneTrikotLogo img { max-width: 100%; max-height: 100%; }
#szeneTrikotLogo .textlogo { font-weight: bold; font-size: 10px; color: #18182a; line-height: 1.05; }
/* Zwei Banden — je 3 Logos, oben und unten am Spielfeldrand (Platz für 6). */
.szeneBande {
  width: calc(100% + 16px); margin: 0 -8px;
  background: #f2f2f6;
  padding: 3px 0;
  flex: none;
}
.szeneBande.oben { border-bottom: 3px solid #18182a; }
.szeneBande.unten { border-top: 3px solid #18182a; }
#szeneBandeOben, #szeneBandeInhalt {
  display: flex; justify-content: space-around; align-items: center; height: 22px; gap: 4px;
}
#szeneBandeOben img, #szeneBandeInhalt img { max-height: 20px; max-width: 30%; }
#szeneBandeOben .textlogo, #szeneBandeInhalt .textlogo { font-weight: bold; font-size: 11px; color: #b02020; white-space: nowrap; }
#szeneBandeOben:empty::before, #szeneBandeInhalt:empty::before { content: ""; }
.werbeTile .wtLogo { height: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.werbeTile .wtLogo img { max-height: 24px; max-width: 90%; }

/* ══════════ v22: Bandenboard (6 Plätze) ══════════ */
.bandeBoard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; }
.bandeSlot {
  border: 2px solid #43436a; border-radius: 2px;
  min-height: 66px; padding: 3px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.bandeSlot.belegt { background: linear-gradient(180deg, #2a2a52, #1c1c3a); }
.bandeSlot.frei { background: repeating-linear-gradient(45deg, #1a1a2e, #1a1a2e 6px, #222240 6px, #222240 12px); }
.bandeSlot .bsLogo { height: 22px; display: flex; align-items: center; }
.bandeSlot .bsLogo img { max-height: 22px; max-width: 88px; }
.bandeSlot .bsText { font-weight: bold; font-size: 9px; color: var(--gelb); }
.bandeSlot .bsName { font-size: 9px; color: #cfd3e8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeSlot .bsBetrag { font-size: 9px; font-weight: bold; color: #fff; }
.bandeSlot button { font-size: 8px; padding: 1px 5px; margin-top: 2px; }
.bandeSlot .bsFrei { font-size: 9px; color: #6a6a90; }

/* ══════════ v25: Medienrechte-Aufschlüsselung ══════════ */
.tvGruppe { color: var(--gelb); font-size: 10px; font-weight: bold; margin: 5px 0 2px; }
.tvZeile { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 1px 0; }
.tvSender { color: #dfe2f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvKanal { color: #9aa2c8; font-size: 9px; }
.tvBetrag { font-weight: bold; color: #fff; min-width: 70px; text-align: right; }

/* ── Spielerprofil-Overlay ── */
#profilOverlay { position: fixed; inset: 0; display: none; z-index: 60;
  background: rgba(12,16,38,0.9); overflow-y: auto; padding: 8px; }
.profilKarte { position: relative; max-width: 760px; margin: 8px auto 20px;
  background: #212951; border: 2px solid var(--hellgrau);
  box-shadow: 0 0 0 1px #000, 5px 5px 12px #000a;
  padding: 0 10px 10px; color: var(--hellgrau); }
.profilX { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px;
  cursor: pointer; font-weight: bold; z-index: 2; background: var(--blau); }
.profilKopf { color: var(--gelb); font-weight: bold; font-size: 13px;
  margin: 0 30px 0 -10px; padding: 6px 10px; background: #131a3c;
  border-bottom: 1px solid var(--dunkelgrau); }
.profilGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.profilSpalte { background: rgba(10,14,36,0.45); padding: 5px 7px; }
.profilBox { background: rgba(10,14,36,0.45); padding: 4px 7px; margin-top: 6px; font-size: 11px; line-height: 1.5; }
.profilStat { width: 100%; border-collapse: collapse; font-size: 11px; }
.profilStat th, .profilStat td { padding: 0 4px; text-align: left; }
.profilStat th { color: var(--gelb); font-weight: normal; }
.profilLink:hover { color: var(--gelb); }

/* ── NACHRICHTEN-POSTFACH (modern): moderner Messenger im Marmorrahmen ────────
 * ACHTUNG MASSSTAB: Diese Seite lebt in der 640×400-Bühne. Alle Größen sind
 * BÜHNEN-Pixel, nicht Bildschirm-Pixel (Grundschrift dort 11px, .klein 9px).
 * Web-übliche 13-14px-Schriften wirken hier riesig — darum alles klein halten. */
#nxWrap { display:flex; flex-direction:column; height:100%;
  background:#0e1526; border:1px solid #243352; border-radius:5px; overflow:hidden; }
.nx-top { display:flex; align-items:center; gap:6px; padding:3px 6px; background:#141d33;
  border-bottom:1px solid #243352; }
.nx-top h2 { font-size:10px; font-weight:700; margin:0; color:#e7ecf6; letter-spacing:.2px; }
.nx-badge { background:#ff5d6c; color:#fff; font-size:8px; font-weight:700; border-radius:999px; padding:0 4px; }
.nx-spacer { flex:1; }
.nx-chip { font-size:8px; color:#8a97b4; background:#182238; border:1px solid #243352; padding:1px 5px; border-radius:999px; }
.nx-body { display:grid; grid-template-columns:196px 1fr; flex:1; min-height:0; }
.nx-list { border-right:1px solid #243352; overflow-y:auto; background:#0e1526; }
.nx-empty { padding:12px 8px; color:#8a97b4; font-size:8px; line-height:1.6; text-align:center; }
.nx-row { display:flex; gap:5px; padding:4px 5px; cursor:pointer; border-bottom:1px solid #1a2338;
  align-items:flex-start; position:relative; }
.nx-row:hover { background:#111a30; }
.nx-row.sel { background:#15233f; box-shadow:inset 2px 0 0 #39d98a; }
.nx-row.unread .nx-from, .nx-row.unread .nx-subj { font-weight:700; color:#fff; }
.nx-dot { position:absolute; left:1px; top:9px; width:4px; height:4px; border-radius:50%; background:#4aa3ff; }
.nx-av { width:19px; height:19px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:8px; color:#0b1020; }
.nx-rc { flex:1; min-width:0; }
.nx-line1 { display:flex; align-items:baseline; gap:4px; }
.nx-from { font-size:9px; color:#cdd6ea; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-when { font-size:7px; color:#8a97b4; white-space:nowrap; }
.nx-subj { font-size:8.5px; color:#c2cbe0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-prev { font-size:7.5px; color:#8a97b4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-tag { font-size:6.5px; font-weight:700; padding:0 3px; border-radius:3px; margin-left:4px; vertical-align:middle; }
.nx-tag.t-frust { background:#3a1a20; color:#ff5d6c; }
.nx-tag.t-geld { background:#153021; color:#39d98a; }
.nx-tag.t-info { background:#1b2640; color:#9db4e6; }
.nx-detail { overflow-y:auto; background:#182238; }
.nx-dhead { padding:5px 7px 4px; border-bottom:1px solid #243352; display:flex; gap:6px; align-items:center; }
.nx-dhead .nx-av { width:22px; height:22px; font-size:9px; }
.nx-dtitle { font-size:10px; font-weight:700; color:#e7ecf6; }
.nx-dsub { font-size:7.5px; color:#8a97b4; margin-top:1px; }
.nx-thread { padding:6px 7px; display:flex; flex-direction:column; gap:5px; }
.nx-bubble { max-width:82%; padding:4px 6px; border-radius:7px; font-size:9px; line-height:1.5;
  background:#1d2b47; border-top-left-radius:2px; align-self:flex-start; color:#e7ecf6; white-space:pre-wrap; }
.nx-mail { padding:6px 7px; font-size:9px; line-height:1.55; color:#dbe3f4; white-space:pre-wrap; }
.nx-mail .nx-big { font-size:14px; font-weight:800; color:#39d98a; margin:1px 0 4px; }
.nx-actions { display:flex; gap:4px; flex-wrap:wrap; padding:3px 7px 8px; }
.nx-btn { font:inherit; font-size:8.5px; font-weight:700; border:none; border-radius:4px; padding:3px 7px; cursor:pointer; }
.nx-btn.prim { background:#39d98a; color:#062013; } .nx-btn.prim:hover { background:#48e89a; }
.nx-btn.ghost { background:transparent; color:#8a97b4; border:1px solid #243352; }
.nx-none { padding:18px 10px; color:#5f6d8c; font-size:8px; text-align:center; }

/* Kader-Aktionen (Verkaufen + Auflösen): ZWEI Knöpfe müssen in die schmale
   Spalte der 640er-Bühne passen. Mit Normalpolsterung lief der zweite aus dem
   Panel heraus und wurde abgeschnitten — daher kleinere Schrift, enge Polsterung
   und eine Namensspalte, die notfalls kürzt statt zu drängeln. */
#verkaufT td.kaderAkt { white-space: nowrap; width: 1%; }
#verkaufT td.kaderAkt button { font-size: 9px; padding: 1px 3px; margin-left: 2px; }
#verkaufT td:nth-child(2) { max-width: 78px; overflow: hidden; text-overflow: ellipsis; }

/**
 * VEREINSNAME ALS LINK IN DIE FREMDEN KADER.
 *
 * Vorher stand hier nur ein `text-decoration: underline dotted` — der Nutzer
 * hat die Tür schlicht nicht gesehen („I still can not see where to look up
 * other teams player"). Ein Klickziel muss aussehen wie ein Klickziel: volle
 * Unterstreichung, Hand-Zeiger, und beim Überfahren hebt es sich ab.
 */
.klubLink {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--gelb);
}
.klubLink:hover { background: var(--gelb); color: #1a1a10; }
tr.ich .klubLink:hover { background: #1a1a10; color: var(--gelb); }

/* Hinweiszeile über der Tabelle — sagt einmal, was anklickbar ist. */
.ligaHinweis {
  padding: 3px 8px;
  font-size: 11px;
  opacity: 0.75;
}

/* ── WERBUNG UM EINEN SPIELER: Kacheln, Bildchen, Fortschritt ──────────────
 * Nutzerbefund: „This still feels like a stub feature. the UI is not charming
 * at all" — vorher eine Liste grauer Knöpfe mit Fliesstext daneben.
 */
.terminKachel {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 5px 6px; margin-top: 4px; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.terminKachel:hover { background: rgba(255,255,255,0.13); border-color: var(--gelb); }
.terminKachel.aus { opacity: 0.42; cursor: default; }
.terminKachel.aus:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.terminBild { width: 28px; height: 28px; flex: 0 0 28px; image-rendering: pixelated; }
.tkText { flex: 1 1 auto; min-width: 0; }

.terminStand { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }

/* Fortschrittsbalken: gefüllter Teil + der Zuwachs aus dem letzten Schritt. */
.fortschritt {
  display: inline-block; height: 8px; vertical-align: middle;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.18);
}
.fBalken, .fZuwachs { display: inline-block; height: 100%; vertical-align: top; }
.fBalken { background: var(--gelb); }
.fZuwachs { background: var(--hellgruen, #7ec87e); }   /* was der letzte Schritt brachte */

.weKopf { font-weight: bold; margin-bottom: 3px; }
.weHebel { margin: 2px 0 0 14px; padding: 0; }
.weHebel li { margin: 1px 0; }

/* ══════════ Empfangsseite (neu, gehoert zu KEINEM Originalschirm) ══════════
 *
 * Diese Regeln sind ZUSAETZLICH: sie betreffen ausschliesslich Markup, das es
 * im Original nie gab (die Anmeldung ist neu). Kein bestehender Schirm aendert
 * sich dadurch. Die Haut „Beton" gestaltet dieselbe Seite grosszuegiger; hier
 * steht nur, was sie auf der klassischen Buehne (640x400) lesbar macht. */
/* Auf der klassischen Buehne braucht der Empfang eine FLAECHE unter sich.
 * Ohne sie stand der Text nackt auf dem Marmor: hellgrau auf hellgrau, die
 * Kastentexte praktisch unsichtbar. Jeder Inhalt liegt hier auf Navy. */
#willkommen {
  background: var(--blau);
  color: var(--hellgrau);
  padding: 6px;
  margin-bottom: 3px;
}
.wilOben {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--stein); padding-bottom: 2px; margin-bottom: 4px;
}
.wilMarke { font-size: 13px; font-weight: bold; color: var(--weiss); }
.wilMarke em { font-style: normal; color: var(--gelb); }
.wilKlein { font-size: 9px; color: var(--dunkelgrau); }
/* ── Schluesselbild ──────────────────────────────────────────────────
 * Standardmaessig VERSTECKT: geladen wird es trotzdem (display:none
 * verhindert das Laden nicht), und erst `onload` setzt `mitFoto` am
 * Empfang. So gibt es kein kurz aufblitzendes kaputtes Bildsymbol, wenn
 * die Datei fehlt — dann bleibt einfach die gezeichnete Kulisse stehen. */
.wilFoto { display: none; }
/* Auf der 640x400-Buehne wuerde das Bild in voller Hoehe (640x357) fast den
 * ganzen Schirm fuellen — die Knoepfe laegen unsichtbar darunter. Deshalb
 * hier gedeckelt und mittig beschnitten; der Titel sitzt im oberen Drittel
 * und bleibt dabei stehen. Die Haut „Beton" hebt den Deckel wieder auf. */
.mitFoto .wilFoto {
  display: block; width: 100%; height: auto;
  max-height: 200px; object-fit: cover; object-position: center center;
}
.mitFoto .wilKulisse { display: none; }
/* Titel und Untertitel stehen IM Bild. Der Text bleibt fuer Vorleser und
 * Suchmaschinen erhalten, verschwindet aber optisch. */
.mitFoto .wilSchlag, .mitFoto .wilSatz {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Auf der 640er Buehne ist fuer die ganze Kulisse kein Platz — sie laeuft
 * hier als schmales Band ueber dem Text. `preserveAspectRatio="slice"` im
 * SVG schneidet dabei zu, statt zu stauchen. */
.wilBuehne { display: block; }
.wilKulisse {
  display: block; width: 100%; height: 74px;
  border: 1px solid var(--steinDunkel); margin-bottom: 4px;
}
/* Der Umbruch bleibt STEHEN. Er hier auszublenden hat „Dorfplatz" und „in"
 * zu „Dorfplatzin" verklebt — ein <br> traegt kein Leerzeichen, das man
 * beim Verstecken zurueckbekaeme. */
.wilSchlag { font-size: 14px; line-height: 1.15; margin: 0 0 3px; color: var(--gelb); }
.wilSatz { font-size: 10px; line-height: 1.35; margin: 0 0 5px; color: var(--hellgrau); }
.wilTaten { display: flex; gap: 4px; }
.wilHinweis { font-size: 9px; color: var(--dunkelgrau); margin-top: 4px; }
.wilPunkte {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
  margin-top: 5px; border-top: 1px solid var(--stein); padding-top: 4px;
}
.wilPunkt h3 { font-size: 10px; margin: 0; color: var(--weiss); }
.wilPunkt p { font-size: 9px; line-height: 1.3; margin: 0; color: var(--dunkelgrau); }
.wilFuss { display: none; }   /* auf 640x400 ist dafuer schlicht kein Platz */

/* ── Anmelde-Auflage ────────────────────────────────────────────────
 * Liegt ueber allem, bis ein Knopf sie oeffnet. `#anmeldeLade[hidden]`
 * ist spezifischer als `#anmeldeLade` und schlaegt daher das display:flex
 * — ohne diese Zeile waere die Auflage IMMER offen, weil eine
 * display-Regel das hidden-Attribut aushebelt. */
#anmeldeLade {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 10, 0.68);
  padding: 14px;
}
#anmeldeLade[hidden] { display: none; }
.alHuelle { position: relative; width: 100%; max-width: 430px; }
/* Die Spalten sind fuer die Seite gebaut: `height:100%` und `overflow-y:auto`.
 * In der Auflage erzeugte das eine Rollflaeche — sichtbar als heller Balken
 * (der Rollbalken) unter dem Formular. Hier waechst der Kasten einfach mit
 * seinem Inhalt. */
.alHuelle .spalten { height: auto; gap: 0; }
.alHuelle .spalte { overflow: visible; }
/* Der Schliesser sitzt IM Kasten, nicht daneben: aussen an der Ecke sah er
 * aus wie ein verrutschtes zweites Fenster. */
.alZu {
  position: absolute; top: 3px; right: 3px; z-index: 1;
  width: 24px; height: 24px; padding: 0; line-height: 1;
  font-size: 16px; font-family: inherit; cursor: pointer;
}
/* Immer nur die gemeinte Spalte zeigen. */
#anmeldeLade[data-zeige="an"] #feldNeuesKonto { display: none; }
#anmeldeLade[data-zeige="neu"] #feldAnmelden { display: none; }