/* ═══════════════════════════════════════════════════════════════════════
* HAUT „BETON" — die dritte Oberfläche
*
* Alles hier hängt an `.haut-beton`. Ohne diese Klasse ist die Datei
* wirkungslos: die klassische Oberfläche bleibt Zeichen für Zeichen die
* alte. Das ist Absicht — stil.css wird NICHT angefasst.
*
* Zwei Dinge unterscheiden diese Haut grundsätzlich von der alten:
*
* 1. KEINE feste Bühne. Das Original rechnet mit 640x400 und skaliert
* ganzzahlig hoch; hier wird der Platz genommen, der da ist.
* 2. KEINE Datei aus orig/. Beton, Rasen, Rahmen und Kopfleiste sind
* Verläufe und Ränder. Das ist der eigentliche Zweck der Übung.
*
* Farben: heller Beton als Grund, Rasengrün trägt, Bernstein markiert,
* Rot ist ausschliesslich Warnung.
* ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
* FARBEN — jeder Wert nachgerechnet (WCAG 2.x, sRGB).
*
* Die Zahl hinter jedem Ton ist sein Kontrast gegen den Seitengrund
* #f2f0e8. Fliesstext braucht 4.5, grosse/fette Schrift und Bedienteile 3.0.
* Vorher fielen ZWEI Töne durch, und ausgerechnet die beiden meistbenutzten:
* --dunkelgrau (4.24) trug fast jede Nebenschrift, --gelb (3.09) fast jede
* Beschriftung. Deshalb las sich der Mangel als „stellenweise" statt als
* durchgehend — auf Zebrazeilen war er am schlimmsten (3.91).
*
* EIN Ton kann nicht fünf Aufgaben haben. Deshalb ist der alte --dunkelgrau
* in zwei Rollen geteilt: --text2 für alles, was man LIEST (Spaltenköpfe,
* Beschriftungen, Kleingedrucktes), --text3 nur für Gedämpftes (gesperrt,
* Platzhalter, Einheiten).
* ═══════════════════════════════════════════════════════════════════════ */
.haut-beton {
/* ── Text ────────────────────────────────────────────────────────── */
--text: #23241f; /* 14.8 — Namen, Zahlen, Überschriften */
--text2: #55564d; /* 7.1 — Spaltenköpfe, Beschriftungen, klein */
--text3: #6a6b61; /* 5.1 — gesperrt, Platzhalter, Einheiten */
/* ── Bedeutungsfarben ────────────────────────────────────────────── */
--akzent: #3d661b; /* 6.4 — genau EINE Hauptaktion je Schirm */
--akzentTief: #2f5213; /* 8.5 */
--akzentText: #ffffff; /* auf --akzent: 6.7 */
--positiv: #365c17; /* 7.4 */
--negativ: #b5341f; /* 5.7 — auch als Fläche: Weiss darauf 6.0 */
--bernsteinText: #7d5c0b; /* 5.9 — Bernstein, wenn er SCHRIFT ist */
--bernstein: #e0a51f; /* 2.1 — nur Fläche/Balken, NIE Schrift */
/* ── Flächen und Linien ──────────────────────────────────────────── */
--grund: #f2f0e8; /* Seitengrund — dunkler als vorher, damit */
--karte: #fffefb; /* die Karte als eigene Ebene lesbar wird */
--zebra: #f7f5ee;
--linieHaar: #cfcdc1; /* Zeilenlinien */
--linieKante: #b5b2a4; /* Kästen, Tabellenrand */
--linie: #23241f; /* NUR 1px, höchstens zweimal je Schirm */
/* ── Rückwärtskompatibilität ─────────────────────────────────────
* stil.css kennt nur die alten Namen. Sie zeigen hier auf die neuen
* Rollen, damit bestehende Regeln die Korrekturen mitbekommen, ohne
* dass jede einzeln angefasst werden muss. */
--schwarz: var(--text);
--blau: var(--karte);
--blauTief: var(--zebra);
--marmor: var(--grund); /* Seitengrund = Betonebene */
--steinHell: #ffffff;
--stein: var(--linieKante);
--steinDunkel: var(--text);
--gruen: var(--akzent);
--rot: var(--negativ);
--braun: #7a5c34;
--hellgrau: var(--text);
--dunkelgrau: var(--text2);
--hellgruen: var(--positiv);
--hellrot: var(--negativ);
/* --gelb bleibt die FLÄCHE. Fast alle Textstellen mit --gelb lagen im
* Original auf Navy (.titel, .reiter.aktiv, button.gewaehlt …); deren
* Grund ist jetzt hell, dort wird weiter unten auf --text umgestellt. */
--gelb: var(--bernstein);
--weiss: var(--text);
--papier: var(--karte);
--papierDunkel: var(--linieKante);
--linieSchwach: var(--linieHaar);
--flaecheHell: var(--grund);
/* ── Schrift ─────────────────────────────────────────────────────
* EINE Familie. Vorher liefen drei nebeneinander (Avenir Condensed für
* die Oberfläche, Menlo für Zahlen, Palatino für Fliesstext) — der
* Wechsel mitten in einer Tabellenzeile ist ein Hauptgrund dafür, dass
* die Schrift „hässlich" wirkte. Zahlen kommen jetzt über
* `tabular-nums` aus derselben Familie, nicht aus einer zweiten.
*
* Avenir Next Condensed gibt es zudem nur auf dem Mac; auf Windows fiel
* die ganze Haut auf Helvetica zurück und veränderte ihre Proportionen. */
--schrift: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--schriftZahl: var(--schrift);
--schriftText: Palatino, "Palatino Linotype", Georgia, serif; /* nur Zeitung */
background: #1a1a1c;
font-family: var(--schrift);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "zero" 1;
}
/* stil.css setzt die Schrift auf `html, body` — also direkt am body. Eine
* Regel am erbt da nicht durch, der body ueberschreibt sie wieder.
* Deshalb muss der body hier ausdruecklich genannt werden, sonst bleibt
* die ganze Oberflaeche Courier. */
.haut-beton body {
font-family: var(--schrift);
background: #1a1a1c;
}
/* ═══════════════════════════════════════════════════════════════════
* 1 — DIE BÜHNE LOSLASSEN
* Das Original hält 640x400 fest und skaliert ganzzahlig. Diese Haut
* nimmt den ganzen Platz und schaltet die Pixelrasterung ab: erst dadurch
* sehen Schrift und Kanten nach 32 Bit aus statt nach VGA.
* (Die Skalierung selbst wird in spiel.js übersprungen — sonst würde
* transform: scale() diese Regeln wieder überfahren.)
* ═══════════════════════════════════════════════════════════════════ */
.haut-beton #huelle {
position: absolute; inset: 0;
}
.haut-beton #buehne {
width: 100%; height: 100%;
max-width: 1440px; margin: 0 auto;
transform: none !important;
image-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 13px; line-height: 1.45;
color: var(--hellgrau);
display: flex; flex-direction: column;
overflow: hidden;
}
/* Zwischen Buehne und Kopfleiste liegt #spiel — DAS ist das Flex-Kind der
* Buehne, nicht #kopf. Ohne diese Regel bleibt #spiel inhaltshoch, und
* Inhalt samt Fusszeile enden auf halber Strecke mit Leere darunter. */
.haut-beton #spiel {
flex: 1 1 auto; min-height: 0;
flex-direction: column;
}
/* spiel.js schaltet #spiel per INLINE-Style zwischen none und block. Inline
* schlaegt JEDE Regel aus dem Stylesheet — auch die spezifischste; ein
* Attribut-Selektor waehlt zwar treffsicher aus, aendert an dieser Rangfolge
* aber nichts. Also braucht es `!important`.
*
* Pauschal waere das falsch: dann liesse sich das Spiel nicht mehr hinter dem
* Startbild verbergen. Der Selektor greift jedoch NUR, solange inline
* tatsaechlich `block` steht — bei `none` trifft er nicht zu und das
* Verbergen funktioniert unveraendert. */
.haut-beton #spiel[style*="display: block"],
.haut-beton #spiel[style*="display:block"] {
display: flex !important;
}
/* Beton statt Marmor: zwei sehr flache Verläufe, kein Bild. */
.haut-beton #buehne,
.haut-beton .marmor {
background-color: var(--marmor);
background-image:
linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 40%),
linear-gradient(92deg, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%);
background-size: auto;
}
/* .pix bleibt ABSICHTLICH pixelig.
*
* Hier stand `image-rendering: auto`, aus der falschen Annahme, „32 Bit"
* hiesse ueberall glatt. Was `.pix` traegt, ist aber echte Pixelgrafik in
* kleiner Aufloesung — Managerportraet, Wappen, Pokale. Glaettet man die beim
* Hochskalieren, wird daraus Brei, nicht Moderne. Scharfe Kanten sind bei
* Pixelbildern das Richtige; glatt gehoert nur, was nie gepixelt war (die
* echten Vereinslogos setzen dafuer selbst `.echt`). */
/* ═══════════════════════════════════════════════════════════════════
* 2 — KOPFLEISTE
* Im Original eine Rahmengrafik mit absolut gesetzten Slots. Hier eine
* Zeile aus Papier mit kräftiger Unterkante und dem Flutlichtschimmer.
* ═══════════════════════════════════════════════════════════════════ */
.haut-beton #kopf {
position: relative; inset: auto;
height: auto; min-height: 62px;
background: linear-gradient(180deg, #fdfcf8 0%, #efeee6 100%);
border-bottom: 1px solid var(--linie);
display: flex; align-items: center; gap: 14px;
padding: 9px 16px;
overflow: hidden;
flex: none;
}
/* Der Flutlichtkegel — reine Atmosphäre, keine Grafik. */
.haut-beton #kopf::after {
content: ""; position: absolute; top: -70%; right: 9%;
width: 300px; height: 260%;
background: linear-gradient(100deg, transparent, rgba(224,165,31,0.17), transparent);
transform: rotate(17deg); pointer-events: none;
}
/* Die Slots sind im Original absolut positioniert — hier fliessen sie. */
.haut-beton #kopf .slot {
position: relative; left: auto; top: auto; width: auto; height: auto;
overflow: visible; z-index: 1;
}
/* Portraet und Wappen stehen nebeneinander und tragen deshalb DIESELBE
* Kantenlaenge (--kopfBild). Wer sie aendert, aendert beide zugleich. */
.haut-beton #kopf { --kopfBild: 90px; }
.haut-beton #kopfPortrait { order: 1; flex: none; }
.haut-beton #kopfPortrait img {
width: var(--kopfBild); height: var(--kopfBild); object-fit: cover;
border: 1px solid var(--linie);
display: block;
}
.haut-beton #kopfWappen { order: 2; flex: none; }
/* Das echte Wappen kommt als aus spiel.js und traf hier frueher GAR
* keine Regel — es fiel auf stil.css zurueck (`#kopfWappen img`, max-width
* 90 %). Prozente laufen dort gegen einen Slot, den die Haut auf
* `width: auto` stellt, also entschied die natuerliche Bildgroesse: 90 px
* statt der gemeinten 46. Darum ausdruecklich setzen. */
.haut-beton #kopfWappen img {
width: var(--kopfBild); height: var(--kopfBild);
/* stil.css deckelt zusaetzlich auf 90 %/92 %. Ohne dieses Zuruecknehmen
* beschnitte der Deckel die Breite oben wieder auf 81 px. */
max-width: none; max-height: none;
object-fit: contain; display: block;
}
/* Fehlt ein Logo, schreibt spiel.js ein OHNE id — die frueher hier
* stehende Regel auf `#wappen` griff deshalb nur bis zur ersten
* Aktualisierung der Kopfleiste. Der Typselektor trifft beide Faelle. */
.haut-beton #kopfWappen span {
display: flex; align-items: center; justify-content: center;
width: var(--kopfBild); height: var(--kopfBild);
background: var(--linie); color: var(--bernstein);
border: none; font-size: calc(var(--kopfBild) * 0.31); font-weight: 700;
font-family: var(--schrift); letter-spacing: -0.02em;
}
/* Name und Zusatz sind KINDER von #kopfVerein (Spalte), keine Geschwister —
* deshalb wird hier der Kasten ausgerichtet und die Kinder einzeln gesetzt. */
.haut-beton #kopfVerein {
order: 3; flex: 1 1 auto; min-width: 0;
width: auto; height: auto;
align-items: flex-start; justify-content: center;
text-align: left; color: var(--linie);
}
.haut-beton #kopfVerein .kvName {
font-size: 21px; font-weight: 600; letter-spacing: 0.02em;
color: var(--linie);
}
.haut-beton #kopfVerein .kvUnter {
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--dunkelgrau); margin-top: 2px;
}
.haut-beton #kopfVerein .kvTrenn { color: var(--linieSchwach); }
/* Die Statuszeile im Kopf faerbt sich mit FESTEN Werten (#ccd3ec, #a6afd0,
* #ffffff) — gedacht fuer hellen Text auf dem Navy des Originals. Auf Papier
* ist das praktisch unsichtbar, und weil es keine Variablen sind, hilft die
* neue Palette hier nichts. Jede Stelle muss einzeln nachgezogen werden. */
.haut-beton #kopf #kopfUnter .kuName { color: var(--linie); font-weight: 600; }
.haut-beton #kopf #kopfUnter .kuLvl { color: var(--dunkelgrau); }
.haut-beton #kopf #kopfUnter .kuPaar i { color: var(--dunkelgrau); }
.haut-beton #kopf #kopfUnter .kuPaar b { color: var(--linie); }
.haut-beton #kopf #kopfUnter .kuPaar b.gut { color: var(--akzent); }
.haut-beton #kopf #kopfUnter .kuPaar b.warn { color: var(--rot); }
/* stil.css nennt diesen Slot mit ZWEI Ids (2,0,0) — eine Regel ueber
* `.haut-beton #kopf .slot` (1,2,0) verliert dagegen stillschweigend.
* Also hier ebenfalls zwei Ids plus Klasse (2,1,0). */
.haut-beton #kopf #kopfUnter {
order: 4; flex: none;
position: relative; inset: auto; width: auto; height: auto;
justify-content: flex-end; gap: 10px;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--dunkelgrau);
}
.haut-beton #kopfSpieltag {
order: 5; flex: none;
font-family: var(--schriftZahl); font-size: 15px; font-weight: 600;
color: var(--linie);
}
.haut-beton #kopfKalender {
order: 6; flex: none;
display: flex; align-items: baseline; gap: 5px;
font-family: var(--schriftZahl); color: var(--linie);
}
.haut-beton #kopfKalender .kWtag,
.haut-beton #kopfKalender .kRest {
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--dunkelgrau);
}
.haut-beton #kopfKalender .kTag { font-size: 19px; font-weight: 700; }
/* ── Statusgruppe rechts ────────────────────────────────────────────
* Ersetzt die drei alten Slots. Drei Zellen, EINE Grundlinie, getrennt
* durch Haarlinien statt durch Kästen. Beschriftung klein und versal,
* Wert gross und in Ziffern gleicher Breite — der Blick springt über die
* Werte, nicht über die Wörter. */
.haut-beton #kopf #kopfUnter,
.haut-beton #kopfSpieltag,
.haut-beton #kopfKalender { display: none; }
/* ZWEI Ids plus Klasse (2,1,0). In stil.css steht `#kopf #kopfStatus`
* (2,0,0) — das musste dort sein, um `#kopf .slot` zu schlagen, gewinnt
* damit aber auch gegen ein einfaches `.haut-beton #kopfStatus` (1,1,0).
* Beim Reparieren der klassischen Ansicht war die Gruppe hier verschwunden. */
.haut-beton #kopf #kopfStatus {
display: flex; order: 5; flex: none;
position: relative; inset: auto; width: auto; height: auto;
margin-left: auto; z-index: 1;
align-items: stretch;
}
.haut-beton .ksZelle {
display: flex; flex-direction: column; justify-content: center;
padding: 0 18px; min-width: 96px;
border-left: 1px solid var(--linieHaar);
}
.haut-beton .ksZelle:first-child { border-left: none; }
.haut-beton .ksZelle i {
font-style: normal; font-size: 10px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text2); margin-bottom: 3px;
}
.haut-beton .ksZelle b {
font-size: 19px; font-weight: 600; line-height: 1;
font-variant-numeric: tabular-nums; color: var(--text);
}
/* Der Zusatz (Datum, Ligagrösse) ist ein Beiwert, kein zweiter Wert. */
.haut-beton .ksZelle b em {
font-style: normal; font-size: 13px; font-weight: 400;
color: var(--text3); margin-left: 5px;
}
.haut-beton .ksZelle b.gut { color: var(--positiv); }
.haut-beton .ksZelle b.warn { color: var(--negativ); }
/* Der Flutlichtschimmer lag genau UNTER dieser Schrift und hob dort den
* Grund an — messbar schlechterer Kontrast an der dichtesten Stelle.
* Er wandert hinter Porträt und Wappen, wo nichts zu lesen ist. */
.haut-beton #kopf::after { right: auto; left: 12%; }
/* ═══════════════════════════════════════════════════════════════════
* 3 — NAVIGATION
* ═══════════════════════════════════════════════════════════════════ */
.haut-beton #reiter,
.haut-beton #unterreiter {
position: relative; inset: auto; height: auto;
display: flex; flex-wrap: wrap;
background: #fffefb;
border-bottom: 1px solid var(--linieSchwach);
flex: none;
}
.haut-beton #unterreiter {
background: var(--zebra);
border-bottom: 1px solid var(--linie);
}
.haut-beton #reiter > *,
.haut-beton #unterreiter > * {
position: relative; left: auto; top: auto; width: auto; height: auto;
padding: 8px 15px;
font-family: var(--schrift);
font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--dunkelgrau);
background: none; border: none;
border-right: 1px solid var(--linieSchwach);
cursor: pointer;
}
.haut-beton #reiter > *:hover,
.haut-beton #unterreiter > *:hover { color: var(--linie); background: var(--zebra); }
.haut-beton #reiter > .aktiv,
.haut-beton #reiter > .an,
.haut-beton #unterreiter > .aktiv,
.haut-beton #unterreiter > .an {
background: var(--akzent); color: var(--akzentText); font-weight: 600;
box-shadow: inset 0 -3px 0 var(--akzentTief);
}
/* ═══════════════════════════════════════════════════════════════════
* 4 — INHALT
* ═══════════════════════════════════════════════════════════════════ */
.haut-beton #inhalt {
position: relative; inset: auto;
flex: 1 1 auto; min-height: 0;
background: var(--flaecheHell);
overflow: auto;
padding: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
* SCHRIFTGRÖSSEN
*
* Hier stand `zoom: 1.35` auf #inhalt — als Abkürzung, um die für die
* 640x400-Bühne gedachten 9–11px lesbar zu machen. Das war aus vier Gründen
* falsch und ist ersatzlos weg:
*
* 1. `zoom` vergrössert Abstände genauso wie Schrift. Aus 5px Zellenpolster
* wurden 6,75px — man bezahlt eine bequeme Zeile und bekommt eine enge.
* 2. Es kann keine Rangfolge reparieren, sondern vergrössert auch eine
* falsche: Tabellendaten und Kleingedrucktes standen beide auf 11px, die
* Anmerkung also genauso gross wie das, was sie anmerkt.
* 3. Was ausserhalb von #inhalt liegt, wird NICHT mitskaliert. Das
* Spielerprofil hängt an #buehne (nachgemessen: `imInhalt: false`) und
* stand deshalb in echten 12,5px neben einer Oberfläche in 14,9px —
* ausgerechnet der dichteste Schirm war der kleinste.
* 4. Jede px-Angabe im Quelltext wurde zur Lüge: man muss im Kopf mit 1,35
* multiplizieren, um zu wissen, was man sieht.
*
* Stattdessen elf ausgeschriebene Grössen. Untergrenze 11px, und die nur für
* VERSALE Spaltenköpfe: Versalhöhe entspricht optisch etwa 13px Gemischt.
* Darunter bricht Deutsch zuerst — Umlautpunkte verschmelzen mit der
* Oberlänge, lange Zusammensetzungen sind nicht mehr auf einen Blick
* unterscheidbar.
* ═══════════════════════════════════════════════════════════════════════ */
.haut-beton #buehne { font-size: 14px; line-height: 1.45; }
.haut-beton .seite { padding: 16px 24px; }
/* Tabellen: Daten 13px, Kopf 11px versal. */
.haut-beton table { font-size: 13px; }
.haut-beton td {
font-size: 13px; line-height: 18px;
padding: 7px 9px;
color: var(--text);
}
.haut-beton th {
font-size: 11px; line-height: 14px;
letter-spacing: 0.06em; font-weight: 600;
padding: 8px 9px;
color: var(--text2);
}
/* Zahlen: gleiche Familie, nur Ziffern gleicher Breite. Ein Wechsel auf
* Menlo mitten in der Zeile war ein Hauptgrund für „hässliche Schrift". */
.haut-beton td.r, .haut-beton th.r, .haut-beton .zahl {
font-family: var(--schrift);
font-variant-numeric: tabular-nums;
font-weight: 500; letter-spacing: 0.01em;
}
/* Kleingedrucktes ist KLEINER als die Daten, nicht grösser. */
.haut-beton .klein { font-size: 12px; line-height: 16px; color: var(--text2); }
/* Namen dürfen ausgeschrieben werden. `td { max-width:150px }` in stil.css
* ist ein Rest der 640px-Bühne und schnitt Vereins- und Spielernamen auf
* einem 1440px-Schirm ohne Not ab. */
.haut-beton td { max-width: none; }
/* ABSTAND TRENNT BESSER ALS EINE LINIE. `.spalten { gap: 4px }` ist der
* Grund, warum die Kästen aneinandergeschweisst wirkten. */
.haut-beton .spalten { gap: 16px; }
/* BERNSTEIN ALS SCHRIFT. Im Original stand er auf Navy; diese Stellen haben
* jetzt hellen Grund, wo #e0a51f nur noch 2.1 erreicht — praktisch
* unsichtbar. Sie bekommen den dunklen Bernstein (5.4). */
.haut-beton .tvGruppe,
.haut-beton .bahn.an,
.haut-beton .bandeSlot .bsText,
.haut-beton .wtBranche {
color: var(--bernsteinText);
}
/* Kästen: im Original Navy mit Steinrahmen, hier Papier mit Haarlinie. */
.haut-beton .flaeche,
.haut-beton .kasten,
.haut-beton .box {
background: #fffefb;
border: 1px solid var(--linieKante);
color: var(--hellgrau);
padding: 10px 12px;
}
.haut-beton .gut { color: var(--gruen); }
.haut-beton .schlecht { color: var(--rot); }
/* Überschriften */
.haut-beton h1, .haut-beton h2, .haut-beton h3,
.haut-beton .titel, .haut-beton .ueberschrift {
font-family: var(--schrift);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--linie); font-weight: 600;
}
.haut-beton h1 { font-size: 17px; }
.haut-beton h2 { font-size: 13px; }
.haut-beton h3 { font-size: 12px; }
/* ── Tabellen ── */
.haut-beton table { border-collapse: collapse; width: 100%; }
/* Nur noch Ausrichtung und Linien — Groesse und Farbe kommen aus der
* Schriftstaffel weiter oben. Standen sie hier ein zweites Mal, gewann
* wegen gleicher Spezifitaet die SPAETERE Regel und die Staffel lief ins
* Leere: Zellen blieben 11px, Koepfe 10px. */
.haut-beton th {
text-align: left; text-transform: uppercase;
background: var(--zebra);
border-bottom: 1px solid var(--linie);
position: sticky; top: 0; z-index: 1;
}
.haut-beton td {
border-bottom: 1px solid var(--linieHaar);
}
.haut-beton tbody tr:nth-child(even) { background: var(--zebra); }
.haut-beton tbody tr.gewaehlt,
.haut-beton tbody tr.markiert,
.haut-beton tbody tr.eigen {
background: #f0ede0;
box-shadow: inset 3px 0 0 var(--bernstein);
}
.haut-beton tbody tr.gewaehlt td,
.haut-beton tbody tr.markiert td,
.haut-beton tbody tr.eigen td { color: var(--text); }
/* Zahlen gehören in eine Zifferbreite, sonst tanzen die Spalten. */
/* ── Knöpfe ── */
.haut-beton button {
font-family: var(--schrift);
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 600;
background: var(--akzent); color: var(--akzentText);
border: none;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.22);
padding: 7px 13px; cursor: pointer;
}
.haut-beton button:hover { background: var(--akzentTief); }
.haut-beton button.matt,
.haut-beton button.aus {
background: transparent; color: var(--linie);
border: 1px solid var(--linie);
}
.haut-beton button.gewaehlt {
background: var(--bernstein); color: var(--linie);
border-bottom-color: #a8760a;
}
.haut-beton button.gross { font-size: 14px; padding: 10px 20px; }
/* Eingaben */
.haut-beton input, .haut-beton select, .haut-beton textarea {
font-family: var(--schrift); font-size: 13px;
background: #fff; color: var(--linie);
border: 1px solid var(--linie); padding: 5px 7px;
}
/* ═══════════════════════════════════════════════════════════════════
* 5 — DIE VIER BILDSTELLEN AUS orig/ ERSETZEN
* ═══════════════════════════════════════════════════════════════════ */
/* Der Steinrahmen ist KEINE Datei, sondern ein eingebettetes SVG in
* stil.css — dieselbe Optik, nur als data:-URI. Er malt ÜBER border-color,
* also reicht es nicht, eine eigene Randfarbe zu setzen: die Quelle muss
* ausdruecklich weg, sonst steht der Stein weiter um jeden Kasten. */
.haut-beton .flaeche,
.haut-beton .versenkt,
.haut-beton #kopf,
.haut-beton #fuss,
.haut-beton .reiter,
.haut-beton button,
.haut-beton .kalender {
border-image: none;
border-style: solid;
}
/* DER DICKE SCHWARZE RAHMEN — mein eigener Fehler.
*
* `.versenkt` bringt `border-width: 5px` mit, weil dort die Steingrafik
* hineingespannt wurde: fünf Pixel Rahmen sind für ein BILD gedacht, nicht
* für eine Linie. Ich habe die Grafik entfernt und die Breite stehen lassen —
* seitdem malt der Rahmen fünf Pixel in der Randfarbe, also fast Schwarz.
* Ein Kasten trennt sich hier über eine Haarlinie und den Grundton, nicht
* über einen Balken. */
.haut-beton .versenkt {
border-width: 1px;
border-color: var(--linieSchwach);
background: var(--flaecheHell);
}
/* Fusszeile: im Original absolut an der Unterkante der festen Buehne.
* Hier laeuft sie im Fluss mit, sonst klebt sie ueber dem Inhalt. */
.haut-beton #fuss {
position: relative; inset: auto;
height: auto; flex: none;
border: none; border-top: 1px solid var(--linie);
background: var(--zebra);
display: flex; justify-content: space-between; align-items: center;
padding: 5px 16px;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--dunkelgrau);
}
/* Ikonennavigation: Rahmengrafik → einfacher Rand. */
.haut-beton .ikonNav .ikn {
border: 1px solid var(--linie);
border-image: none;
background: #fffefb;
}
.haut-beton .ikonNav .ikn:hover { background: var(--zebra); filter: none; }
/* Werbeszene: gekacheltes Rasenbild → gemähte Streifen als Verlauf. */
.haut-beton #werbeSzene {
background: repeating-linear-gradient(90deg, #dde5d2 0 32px, #d5dfc9 32px 64px);
background-size: auto;
image-rendering: auto;
border: 1px solid var(--linie);
}
/* Die Wortmarke des Originals hat in dieser Haut nichts verloren.
* `!important` ist hier kein Schmierfett, sondern notwendig: die beiden
* tragen ein INLINE `display:block`, und das schlaegt jede Regel
* aus dem Stylesheet. Ohne das Ausrufezeichen bliebe das Originalbanner
* stehen — also genau das, was diese Haut vermeiden soll. */
.haut-beton img[src*="banner"] { display: none !important; }
.haut-beton #wortmarke { display: block; }
#wortmarke { display: none; }
.haut-beton #wortmarke {
padding: 16px 14px 14px;
border-bottom: 1px solid var(--linie);
background: linear-gradient(180deg, #fdfcf8, #efeee6);
position: relative; overflow: hidden;
}
.haut-beton #wortmarke::after {
content: ""; position: absolute; top: -70%; right: 12%;
width: 260px; height: 260%;
background: linear-gradient(100deg, transparent, rgba(224,165,31,0.22), transparent);
transform: rotate(17deg);
}
.haut-beton #wortmarke .wm {
font-family: var(--schrift);
font-size: 34px; font-weight: 700; line-height: 1;
letter-spacing: 0.02em; color: var(--linie);
position: relative; z-index: 1;
}
.haut-beton #wortmarke .wm em {
font-style: normal; color: var(--akzent);
}
.haut-beton #wortmarke .wmUnter {
margin-top: 5px; position: relative; z-index: 1;
font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--dunkelgrau);
}
/* ═══════════════════════════════════════════════════════════════════
* 6 — DAS BANKHAUS
* Drei eigene Gebäude statt orig/bank.png. Sichtbar ist immer genau eines;
* welches, entscheidet waehleBankhaus() und schreibt es nach data-typ.
* ═══════════════════════════════════════════════════════════════════ */
#bankHaus { display: none; }
.haut-beton #bankBild { display: none; }
.haut-beton #bankHaus {
display: block; max-width: 282px; margin: 0 auto 6px;
border: 1px solid var(--linie); background: #eef0ea;
}
.haut-beton #bankHaus .bankBau { display: none; width: 100%; height: auto; }
.haut-beton #bankHaus[data-typ="altstadt"] .bankBau[data-bank="altstadt"],
.haut-beton #bankHaus[data-typ="jh20"] .bankBau[data-bank="jh20"],
.haut-beton #bankHaus[data-typ="jh21"] .bankBau[data-bank="jh21"] { display: block; }
/* ═══════════════════════════════════════════════════════════════════
* 7 — NACHBESSERUNGEN AUS DEM ERSTEN DURCHGANG
* ═══════════════════════════════════════════════════════════════════ */
/* Knöpfe IN Tabellenzeilen und in Listen waren grüne Wände: in jeder Zeile
* ein satter Block, im Stadion acht übereinander. Ein Knopf, den es pro
* Zeile gibt, ist kein Hauptweg — er wird ruhig und faerbt sich erst beim
* Zeigen. Ausserdem stand der Preis dunkelgruen auf gruen, also unlesbar. */
.haut-beton td button,
.haut-beton .seite[data-seite="stadion"] button,
.haut-beton #bankStaffel button {
background: transparent; color: var(--linie);
border: 1px solid var(--linieKante); border-bottom-width: 2px;
font-weight: 600;
}
.haut-beton td button:hover,
.haut-beton .seite[data-seite="stadion"] button:hover,
.haut-beton #bankStaffel button:hover {
background: var(--akzent); color: var(--akzentText);
border-color: var(--akzentTief);
}
/* Der Preis steht als IM Knopf und holte sich seine
* Farbe aus --dunkelgrau — auf dem gruenen Knopf war er praktisch
* unsichtbar. Er erbt jetzt die Farbe des Knopfes, in jedem Zustand. */
.haut-beton .seite[data-seite="stadion"] button .klein,
.haut-beton td button .klein { color: inherit; opacity: 0.7; }
/* Markierte Zeilen: die eigene Elf traegt die Klasse `ich` und wurde
* flaechig mit --gelb gefuellt — damit leuchtete die halbe Tabelle.
* Markierung heisst hier ruhiger Grundton plus eine kraeftige Kante. */
.haut-beton tr.ich,
.haut-beton .staffelZeile.gewaehlt {
background: #efeadb;
color: var(--linie);
box-shadow: inset 3px 0 0 var(--bernstein);
}
.haut-beton tr.ich td { color: var(--linie); }
/* Spielernamen (.profilLink) tragen ihre gepunktete Unterstreichung INLINE.
* Inline schlaegt jede Regel hier — ohne `!important` bliebe der Schmutz
* stehen. Beim Zeigen darf der Strich zurueckkommen, dann ist er Absicht. */
.haut-beton .profilLink {
text-decoration: none !important;
color: var(--linie);
}
.haut-beton .profilLink:hover {
text-decoration: underline !important;
color: var(--akzent);
}
/* Der Stadionriss ist ein