/* ═══════════════════════════════════════════════════════════════════════
* 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.
* ═══════════════════════════════════════════════════════════════════════ */
.haut-beton {
/* ── Grundfarben ───────────────────────────────────────────────── */
--schwarz: #23241f;
--blau: #fffefb; /* war das Navy der Kästen — jetzt Papier */
--blauTief: #f1f0e8; /* Titelzeilen */
--marmor: #eae8df; /* Steingrund → Beton */
--steinHell: #ffffff;
--stein: #d8d6cc;
--steinDunkel: #23241f;
--gruen: #46731f;
--rot: #c8402c;
--braun: #8a6b3f;
--hellgrau: #2e2f28; /* Fliesstext: auf Papier muss er DUNKEL sein */
--dunkelgrau: #77786e; /* gedämpfter Text */
--hellgruen: #5f9130;
--hellrot: #d9573f;
--gelb: #b8860b; /* Beschriftung: auf Hell darf es kein Neongelb sein */
--weiss: #23241f; /* „weisser" Text liegt hier auf Papier → dunkel */
--papier: #fbfaf4;
--papierDunkel: #d8d6cc;
/* ── Eigene Grössen dieser Haut ────────────────────────────────── */
--linie: #23241f;
--linieSchwach: #d8d6cc;
--akzent: #46731f;
--akzentTief: #2f5213;
--akzentText: #ffffff;
--bernstein: #e0a51f;
--zebra: #f1f0e8;
--flaecheHell: #faf9f4;
--schriftKopf: "Avenir Next Condensed", "HelveticaNeue-CondensedBold",
"Helvetica Neue", Helvetica, sans-serif;
--schriftZahl: Menlo, Consolas, "Courier New", monospace;
--schriftText: Palatino, "Palatino Linotype", Georgia, serif;
background: #1a1a1c;
font-family: var(--schriftKopf);
}
/* 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(--schriftKopf);
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: 3px 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;
}
.haut-beton #kopfPortrait { order: 1; flex: none; }
.haut-beton #kopfPortrait img {
width: 46px; height: 46px; object-fit: cover;
border: 1px solid var(--linie);
display: block;
}
.haut-beton #kopfWappen { order: 2; flex: none; }
.haut-beton #kopfWappen #wappen {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
background: var(--linie); color: var(--bernstein);
border: none; font-size: 15px; font-weight: 700;
font-family: var(--schriftKopf); 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; }
/* ═══════════════════════════════════════════════════════════════════
* 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(--schriftKopf);
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;
}
.haut-beton .seite { padding: 14px 17px; }
/* 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(--linieSchwach);
color: var(--hellgrau);
padding: 10px 12px;
}
.haut-beton .klein { font-size: 11px; color: var(--dunkelgrau); }
.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(--schriftKopf);
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%; }
.haut-beton th {
text-align: left; padding: 5px 7px;
font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--dunkelgrau); font-weight: 600;
background: none; border-bottom: 1px solid var(--linie);
}
.haut-beton td {
padding: 5px 7px;
border-bottom: 1px solid var(--linieSchwach);
color: var(--hellgrau);
}
.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: #23401c; color: #fff;
}
.haut-beton tbody tr.gewaehlt td,
.haut-beton tbody tr.markiert td,
.haut-beton tbody tr.eigen td { color: #fff; }
/* Zahlen gehören in eine Zifferbreite, sonst tanzen die Spalten. */
.haut-beton td.r, .haut-beton th.r,
.haut-beton .zahl, .haut-beton .r {
font-family: var(--schriftZahl); font-variant-numeric: tabular-nums;
}
/* ── Knöpfe ── */
.haut-beton button {
font-family: var(--schriftKopf);
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 600;
background: var(--akzent); color: var(--akzentText);
border: none; border-bottom: 3px solid var(--akzentTief);
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); border-bottom-width: 3px;
}
.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(--schriftKopf); 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;
}
/* 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: 3px 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(--schriftKopf);
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(--linieSchwach); 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