/* Stand 15.09.2026 (13): Fragezeichen-Wappen im Chat so gross wie die Volkswappen (chat.css). */
/* Stand 15.09.2026 (12): Fragezeichen-Wappen fuer Spieler ohne Volk (chat.js, spielerkarte.js). */
/* Stand 15.09.2026 (11): bis zu drei Marktpositionen je Ware (trade.js). */
/* Stand 15.09.2026 (10): Punkteliste in beide Richtungen sortierbar, Pfeile wie am Markt. */
/* Stand 15.09.2026 (9): Punkteliste sortierbar (points.css, points.js). */
/* Stand 15.09.2026 (8): Vorstellungstext der Allianz aenderbar (alliance.css). */
/* Stand 15.09.2026 (7): Chat bleibt beim Aufgehen der Tastatur unten (chat.js). */
/* Stand 15.09.2026 (6): Allianz-Chat am Handy ohne Allianzkopf. */
/* Stand 15.09.2026 (5): Allianz-Chat als Reiter der Allianzseite (alliance.css). */
/* Stand 15.09.2026 (4): Allianz-Reiter als Symbole (alliance.css). */
/* Stand 15.09.2026 (3): Allianz-Forschung zeigt Balken statt doppelter Prozentzahl. */
/* Stand 15.09.2026 (2): Allianz-Reiter Forschung (alliance.css, night.css). */
/* Stand 15.09.2026: Diplomatie im Nachtbild lesbar (night.css: Urkunden mit
   deckender Lasur, Abstimmungsreiter der Allianz bekommt eigene Regeln). */
/* Stand 13.09.2026 (8): der Forschungsbalken traegt jetzt die Punktezahl in
   sich (pages/research.css und die handgepflegte Nachtregel am Ende von
   night.css). Diese Zeile sorgt nur dafuer, dass beide Dateien ein neues
   ?v= bekommen.

   Stand 13.09.2026 (7): die Zuege-Spalte der PUNKTELISTE bleibt am Handy
   stehen (nachgemessen, die Tabelle passt mit ihren sechs Spalten). Nur
   die Allianz-Mitgliederliste blendet sie aus, dort sind es sieben.
   Die Zwischenloesung mit der Zahl unter dem Namen ist damit wieder weg.

   Stand 14.09.2026: TASTATUR AM HANDY WIEDER AUS DEM WEG. Der Liga-Fix vom
   13.09. (5) haengte an die Rahmenregel :not(.lg-public) und machte sie damit
   schwerer als die Hoehenregel "height: var(--kw-vvh)" weiter unten. Folge:
   height: 100 % gewann, der Rahmen blieb bei offener Tastatur schirmhoch, die
   .middle_bar konnte nicht bis zum Feld rollen (Spieler: "die Tastatur ist
   immer im Weg, es scrollt nicht mehr weiter"). Beide Regeln tragen jetzt
   dieselbe Kette. Dazu in layout/game.html interactive-widget=resizes-content
   fuer Android-Chrome und in assets/gameshell/js/viewport.js die Tastaturprobe, die
   damit umgehen kann (Kopf dort). Cache-Stempel ganz unten.

   Stand 13.09.2026 (6): in der Punkteliste stehen die beendeten Zuege am
   Handy jetzt in der Zeile unter dem Spielernamen (.pts-sub-zuege). Die
   eigene Spalte tritt dort weiterhin beiseite, sonst passt die Tabelle
   nicht auf den Schirm.

   Stand 13.09.2026 (5): die oeffentliche LIGASEITE liess sich am Handy
   nicht scrollen. Der Handy-Block machte auch ihren Koerper zum Rahmen
   mit overflow:hidden, obwohl sie keine .middle_bar hat, an die das
   Scrollen weitergereicht wird. Jetzt ist body.lg-public ausgenommen,
   wie homepage-body und manual-body es schon waren.

   Stand 13.09.2026 (4): KAPUTTER KOMMENTAR GEHEILT. In der Versionsmarke
   weiter unten stand ein Sternchen unmittelbar vor einem Schraegstrich.
   Diese zwei Zeichen beenden einen Kommentar, und zwar mitten im Satz.
   Alles danach war fuer den Browser kein gueltiges CSS mehr, also auch
   der @media-Block ganz am Dateiende: die Zuege-Spalte der Ranglisten
   sollte unter 900 px beiseitetreten (.rank-table .pts-col-zuege) und
   tat es nie. Nachgemessen im Browser: vorher 0 Treffer im CSSOM,
   nachher 1.

   Stand 13.09.2026 (3): das Sanktionsfeld der Diplomatie traegt sein
   Goldstueck jetzt IM Feld und sieht wie ein Eingabefeld aus
   (.dip-gold-wrap in pages/diplomacy.css, Vorbild .mkt-goldwrap).

   Stand 13.09.2026 (2): die Versorgungszeile der Gebaeudeseite nennt jetzt den
   Bedarf EINES Wohnhauses und daneben den eigenen Stand ("1,72 Farmen, du hast
   1,25"), dazu die Herleitung in einer Sprechblase (pages/buildings.css).

   Stand 13.09.2026: die VORSCHAU im Pool-Dauerauftrag — unter jedem
   Prozentfeld steht jetzt dieselbe Angabe als Menge, gerechnet mit den
   Zahlen des letzten Zuges, und beide Felder rechnen sich gegenseitig aus
   (pages/alliance.css, pages/alliance.js). Dazu tragen die Zahlenfelder im
   ganzen Spiel inputmode="numeric", damit am Handy der Ziffernblock
   aufgeht statt der Buchstabentastatur.

   Stand 12.09.2026: sichere Bereiche am iPhone (Statusleiste und Kerbe, siehe
   den Block "DER SICHERE BEREICH AM IPHONE" im 900px-Teil) und die
   Ereignistabelle der Diplomatie in pages/diplomacy.css und der
   Versorgungszeile in pages/buildings.css. Dazu der Allianz-Chat: er ist ein
   Chatraum wie jeder andere geworden, pages/chat.css und pages/chat.js
   bedienen ihn jetzt mit, die Regeln .al-chat-* / .al-msg-* sind entfallen.
   Zuletzt der POOL-DAUERAUFTRAG: .pool-warn* stehen weiter unten in dieser
   Datei (die Warnung haengt in der Seitenleiste und damit auf jeder Seite),
   die Eingabetabelle .al-auto-* in pages/alliance.css.
   Diese Zeile ist
   zugleich die VERSIONSMARKE: asset_v ist die Aenderungszeit dieser Datei,
   wer ein anderes Stilblatt oder ein Skript anfasst, muss sie mit anfassen.

   Stand 07.09.2026: zurueck zu Einzelgrafiken, dazu der schlanke Kopf der
   Rangliste und die Suche waehrend des Tippens (pages/points.css, points.js). Das Symbolblatt ist raus,
   ico() liefert wieder ein <img> auf die einzelne Datei — ein Spieler hatte
   gemeldet, dass die Grafiken bei ihm pixelig aussehen. Alle .ico-Regeln in
   dieser Datei greifen seitdem ins Leere: sie stehen absichtlich noch da,
   falls das Blatt je zurueckkommt, und kosten nichts, weil kein Element mehr
   die Klasse .ico traegt. Massgeblich sind wieder die Regeln mit img.
   Diese Datei ist der Taktgeber fuer ?v= (asset_v = ihre Aenderungszeit) —
   wer chat.css oder ein Skript aendert, muss sie mit anfassen, sonst holt
   kein Browser das Neue. */
@font-face {
    font-family: 'Kaiser';
    src: url('/fonts/kaiser.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-style-normal: "Arial", sans-serif;
    --font-style-logo: "Kaiser", Times, serif;
    --font-style-kaiser: "Times New Roman", Times, serif;
    --font-color-base: #5e463a;
    --font-size-small: 1.2rem;
    --font-size-base: 1.4rem;
    --font-size-medium: 1.6rem;
    --font-size-large: 2.0rem;
    --font-size-huge: 2.6rem;

    --background-color-white: #f4efe4;
    --background-color-beige: #efe3ca;

    --color-bg-light: #e8f0e1;
    --color-primary: #5d8c41;
    --color-primary-dark: #4a6735;
    --color-border-subtle: #d8d8d8;

    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-success-border: #c3e6cb;

    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-error-border: #f5c6cb;
}

* { box-sizing: border-box; padding: 0; margin: 0; border: none; outline: none; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

html { font-size: 62.5%; font-family: var(--font-style-normal); color: var(--font-color-base); overflow-y: auto; scrollbar-color: #939a7b #4e5927; }

body { font-size: var(--font-size-base); background-image: url("/images/background.jpg"), linear-gradient(180deg, #4292cf 0%, #79980b 100%); background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; margin: 0; }
body.homepage-body { display: flex; flex-direction: column; align-items: center; }

input { background: transparent; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; width: auto; }
textarea, select { color: inherit; }

/* KAESTCHEN ZUM ANKREUZEN  (03.09.2026)
   ---------------------------------------------------------------------
   Pascal: "das mit dem Eingeloggt bleiben is nur text. man weiss garnicht
   was man da machen muss. da ist nichtmal ein haken oder so."

   Der Stern ganz oben (Zeile 40) nimmt ALLEM appearance UND border weg.
   Fuer Knoepfe und Felder ist das gewollt — bei einem Ankreuzkaestchen
   loescht es aber das Kaestchen selbst: der Browser zeichnet nichts mehr,
   und die Regel darunter macht den Hintergrund durchsichtig. Uebrig bleibt
   ein unsichtbares Quadrat, das man anklicken kann, wenn man weiss, dass es
   da ist. accent-color hilft nicht — die Farbe gilt fuer ein Bedienelement,
   das gar nicht mehr gezeichnet wird.

   Also wird es hier von Hand gezeichnet. Das betraf nicht nur die Anmeldung:
   im Kampfsimulator steht dasselbe unsichtbare Kaestchen ("Verteidiger ist
   Oesterreicher").

   NICHT betroffen sind die Schiebeschalter (Tag/Nacht, Neuigkeiten): dort
   ist das Kaestchen mit Absicht versteckt und ein <span> davor gezeichnet.
   Deren Regeln stehen weiter unten (.theme-switch input) bzw. in news.css
   und gewinnen deshalb gegen diese hier — DIESER BLOCK MUSS DAVOR BLEIBEN. */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 1.8rem; height: 1.8rem; flex-shrink: 0;
    display: inline-block; vertical-align: -0.35rem;
    background: #fdfaf3; border: 1px solid #8c7f6e; border-radius: 0.3rem;
    box-shadow: inset 0 0.15rem 0.35rem rgba(0,0,0,0.15);
    cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
input[type="checkbox"]:hover { border-color: #6c7a2e; }
input[type="checkbox"]:checked {
    background-color: #6c7a2e; border-color: #4c561d; box-shadow: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23f4ead2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M3 8.5l3.5 3.5L13 4.5"/></svg>');
    background-repeat: no-repeat; background-position: center; background-size: 1.3rem 1.3rem;
}
/* Der Stern loescht auch outline. Wer mit der Tastatur unterwegs ist, saehe
   sonst nicht, wo er steht. */
input[type="checkbox"]:focus-visible { outline: 2px solid #6c7a2e; outline-offset: 2px; }
.mainBorder {
    position: relative; margin: 1.0rem; border-radius: 0.9rem; background: var(--background-color-beige);
    box-shadow: 0 -0.1rem 0 0.05rem #aa9986, 0 0 0 0.1rem #aa9986, 0 0 0 0.15rem #564837, 0 0 0 0.2rem #615141, 0 0 0 0.25rem #615141, 0 0 0 0.3rem #796958, 0 0 0 0.35rem #c2b19d, 0 0 0 0.4rem #c2b19d, 0 0 0 0.45rem #c2b19d, 0 0 0 0.5rem #c2b19d, 0 0 0 0.55rem #ccbda9, 0 0 0 0.6rem #e0d5c2, 0 0 0 0.65rem #ebe2d0, 0 0 0 0.7rem #ebe2d0, 0 0 0 0.75rem #ebe2d0, 0 0 0 0.8rem #ebe2d0, 0 0 0 0.85rem #beb6a3, 0 0 0 0.9rem #615944, 0 0 0 0.95rem #332a15, inset 0 -0.2rem 0.8rem rgba(121,105,88,0.66), 0 0 0.5rem 0.9rem rgba(0,0,0,0.66);
}

.sidebox { width: 30.0rem; margin-bottom: 3.0rem; }
.mainbox { width: 65.0rem; background: #ccb99e; padding: 0.4rem; display: flex; flex-direction: column; max-height: calc(100vh - 18.0rem); overflow: hidden; }
.mainbox.wide { width: 110.0rem; }
.mainbox .title { background: #9b8975; border-left: 3px solid #605443; border-right: 3px solid #605443; border-top: 3px solid #5f4e40; border-bottom: 3px solid #c0ac93; text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a; padding: 1.0rem; color: #f2f2f2; border-radius: 1.0rem 1.0rem 0 0; font-size: var(--font-size-large); font-family: var(--font-style-kaiser); font-weight: bold; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }

.mainbox-scroll-wrapper { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mainbox .content { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; color: #444; background: #fdfaf3; padding: 2.0rem; border-left: 3px solid #716050; border-right: 3px solid #716050; border-top: 3px solid #c0ac93; border-bottom: 3px solid #716050; font-size: var(--font-size-base); }
.mainbox .content::-webkit-scrollbar { display: none; }

.custom-scrollbar { position: absolute; top: 0.4rem; right: 0.4rem; bottom: 0.4rem; width: 0.6rem; background: rgba(0,0,0,0.1); border-radius: 0.3rem; z-index: 100; display: none; }
.custom-scrollbar-thumb { position: absolute; top: 0; right: 0; width: 100%; background: #6c7a2e; border-radius: 0.3rem; cursor: pointer; }
.kw-scroll-wrap { position: relative; }
.icon-inline { height: 2.4rem; width: 2.4rem; vertical-align: middle; margin-top: -0.4rem; margin-right: 0.6rem; object-fit: contain; }

table.turn-summary-table { width: 100%; border-collapse: collapse; }
table.turn-summary-table th { border-bottom: 2px solid #bbaea0; padding: 1.0rem 0.5rem; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); }
table.turn-summary-table td { padding: 1.5rem 0.5rem; border-bottom: 1px solid #e6decb; vertical-align: middle; color: var(--font-color-base); }
table.turn-summary-table tr:last-child td { border-bottom: none; }

.col-icon { width: 4.0rem; text-align: center; }
.col-icon img { max-height: 2.4rem; width: auto; display: block; margin: 0 auto; }
.col-icon .ico { height: 2.4rem; width: 2.4rem; display: block; margin: 0 auto; }
.col-sign { width: 3.0rem; text-align: center; }
.col-sign img { max-height: 1.6rem; width: auto; vertical-align: middle; display: inline-block; }
.col-sign .ico { height: 1.6rem; width: 1.6rem; vertical-align: middle; display: inline-block; }
.col-sign.positive { color: var(--color-primary); }
.col-sign.negative { color: #a83232; }

.col-value { width: 8.0rem; text-align: right; font-weight: bold; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); padding-right: 2.0rem !important; }
.col-reason { text-align: left; color: #555; }

.land-title { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); color: var(--color-primary-dark); display: flex; align-items: center; }
.land-desc { color: #73655a; margin-top: 0.2rem; margin-left: 3.0rem; display: block; font-size: var(--font-size-small); font-family: var(--font-style-normal); }
.land-val { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); font-weight: bold; color: var(--font-color-base); }

.detail-toggle-wrapper { display: flex; align-items: center; gap: 1.0rem; font-size: var(--font-size-base); font-weight: normal; text-shadow: none; font-family: var(--font-style-normal); }
.toggle-text { color: #e9e3d7; }
.theme-switch-wrap { display: inline-flex; align-items: center; gap: 0.6rem; }
.theme-switch-label { font-family: var(--font-style-kaiser); font-size: 1.25rem; color: #73655a; letter-spacing: 0.03rem; min-width: 3.6rem; }
.theme-switch { position: relative; display: inline-block; width: 4.4rem; height: 2.2rem; margin: 0; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #5f4e40; transition: .3s; border-radius: 2.2rem; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border: 1px solid #332a15; }
.theme-slider:before { position: absolute; content: ""; height: 1.6rem; width: 1.6rem; left: 0.2rem; bottom: 0.2rem; background-color: #f7d977; transition: background-color .3s, box-shadow .3s, transform .3s; border-radius: 50%; box-shadow: 0 0 0.5rem rgba(247,217,119,0.75), 0 1px 3px rgba(0,0,0,0.5); }
input:checked + .theme-slider { background-color: #46608f; }
input:checked + .theme-slider:before { transform: translateX(2.2rem); background-color: #eee7d2; box-shadow: inset -0.5rem 0.15rem 0 -0.05rem #46608f, 0 1px 3px rgba(0,0,0,0.5); }

.summary-row td { border-top: 1px solid #c7b9a6; background-color: #f6f3eb; padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
.resource-group { border-bottom: 1.5rem solid transparent; }
.compact-view .detail-row { display: none; }
.compact-view .summary-row td { border-top: none; background-color: transparent; padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
.compact-view .resource-group { border-bottom: 2px solid #e6decb; }
.compact-view .resource-group:last-child { border-bottom: none; }
.action-group { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }
.form-item { height: 2.8rem; box-sizing: border-box; margin: 0; border-radius: 0.3rem; font-family: var(--font-style-normal); font-size: var(--font-size-small); line-height: 2.6rem; outline: none; }

/* Alle Select-Felder im Spiel: gleicher Stil wie die Bau-Auswahl. Ohne das
   faellt der Browser auf seinen haesslichen Grau-Blau-Default zurueck. */
select.form-item { padding: 0 2.5rem 0 0.8rem; border: 1px solid #8c7f6e; background: #e4d8c1; color: var(--font-color-base); cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 5L0 0h4z"/></svg>'); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.8rem 1.0rem; box-shadow: inset 0 0.2rem 0.5rem rgba(0,0,0,0.15); transition: background 0.2s, border-color 0.2s; }
select.form-item:focus, select.form-item:hover { background-color: #fdfaf3; border-color: #6c7a2e; }

.max-btn { background: #e6d9bd; color: #4a3720; border: 1px solid #b6a17e; border-radius: 2px; padding: 0 1.0rem; min-width: 7.0rem; width: auto; white-space: nowrap; text-align: center; font-family: var(--font-style-kaiser); cursor: pointer; box-shadow: inset 0 1px 0 #f7efdb; transition: all 0.12s; }
.max-btn:hover { background: #efe6cd; color: #4a3720; border-color: #9a865f; }
.max-btn:active { box-shadow: inset 0 2px 3px rgba(90,70,30,0.2); }
.max-btn-count { font-weight: normal; }

.amount-input { width: 6.5rem; padding: 0 0.8rem; border: 1px solid #8c7f6e; background: #e4d8c1; text-align: right; font-family: var(--font-style-kaiser); font-size: var(--font-size-base); font-weight: bold; color: #333; box-shadow: inset 0 2px 5px rgba(0,0,0,0.15); transition: background 0.2s, border-color 0.2s; }
.amount-input:focus { background: #fdfaf3; border-color: #6c7a2e; }
.action-btn { background: #6c7a2e; color: #f4ead2; width: 6.5rem; text-align: center; padding: 0; border: 1px solid #4c561d; border-radius: 2px; box-shadow: inset 0 -0.15rem 0 rgba(0,0,0,0.16); font-family: var(--font-style-kaiser); cursor: pointer; transition: background 0.12s; }
.action-btn:hover { background: #7b8a36; border-color: #4c561d; }
.action-btn:active { box-shadow: inset 0 0.15rem 0.25rem rgba(0,0,0,0.28); }

.action-btn-danger { background: #a83232; color: #f4ead2; border-color: #7a1f24; box-shadow: inset 0 -0.15rem 0 rgba(0,0,0,0.2); }
.action-btn-danger:hover { background: #b84040; border-color: #7a1f24; }
.action-btn-danger:active { box-shadow: inset 0 0.15rem 0.25rem rgba(0,0,0,0.3); }
/* Dritte Knopffarbe (14.09.2026): TAUSCHEN im Allianzpool, Ware gegen Gold.
   Goldbraun, damit er sich von Einlagern (gruen) und Auslagern (rot) abhebt.
   Nachtregel steht von Hand am Ende der night.css. */
.action-btn-tausch { background: #9a7a2a; color: #f4ead2; border-color: #6d5518; box-shadow: inset 0 -0.15rem 0 rgba(0,0,0,0.2); }
.action-btn-tausch:hover { background: #ab8a33; border-color: #6d5518; }
.top_bar { width: 100%; height: 11.5rem; background: linear-gradient(to bottom, #e9e3d7 0%, #e9e3d7 33%, #c7b9a6 calc(33% + 1px), rgba(0,0,0,0.3) 33%, rgba(0,0,0,0) calc(33% + 6px), transparent 100%); }
.top_bar_content { margin: 0 auto; width: 144.0rem; height: 100%; display: flex; justify-content: space-around; align-items: flex-start; }
.top_bar_left { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-right: 1.0rem; height: 100%; }

.server_time { display: flex; align-items: center; height: 3.8rem; }
.server_time p { background: #c7b9a6; padding: 0.2rem 3.6rem; border-radius: 1.3rem; color: #73655a; font-weight: bold; font-size: var(--font-size-small); box-shadow: inset 0 0 0.5rem 0 rgba(0,0,0,.66); }

.logo { display: flex; gap: 1.0rem; position: relative; top: 1.2rem; border: solid 1px #615944; border-radius: 0.6rem; background-color: #dacebb; padding: 0.5rem 1.2rem; box-shadow: inset 0.1rem 0 0.1rem rgba(0,0,0,.35), inset -0.1rem 0 0.1rem rgba(0,0,0,.35), inset 0 -0.2rem 0.1rem rgba(0,0,0,.4), inset 0 0.2rem 0.1rem rgba(255,255,255,.3), 0 0 0.5rem 0 rgba(0,0,0,0.66); }
.logo img { height: 4.4rem; width: 4.4rem; }
.logo .ico { height: 4.4rem; width: 4.4rem; }
.logo_image, .logo_description { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.logo_description p { text-shadow: -0.1rem -0.1rem 0rem #ebe2d0; }
.logo_description p:first-child { font-family: var(--font-style-logo); font-size: var(--font-size-huge); letter-spacing: 0.5rem; line-height: 2.6rem; font-weight: bold; }
.logo_description > div { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; }
.logo_description > div > p:first-child { font-family: var(--font-style-normal); font-size: var(--font-size-base); letter-spacing: 0.2rem; line-height: 1.4rem; font-weight: normal; }
.logo_description > div > p:last-child { font-family: var(--font-style-normal); font-size: 1.0rem; line-height: 1.0rem; text-shadow: none; }

.alpha-badge { color: #a83232; font-weight: bold; background: #fdf3f3; padding: 0.1rem 0.4rem; border: 1px solid #a83232; border-radius: 0.3rem; border-bottom: 2px solid #a83232; }
.version-badge { display: inline-block; font-weight: bold; font-size: 1.0rem; line-height: 1.0rem; letter-spacing: 0.04rem; color: #4a3720; background: rgba(255,255,255,0.30); padding: 0.1rem 0.4rem; border: 1px solid #a9926f; border-radius: 0.3rem; border-bottom: 2px solid #9c8763; text-decoration: none; cursor: pointer; transition: background 0.12s; }
.version-badge:hover, .version-badge:focus { background: rgba(255,255,255,0.55); outline: none; }

.top_bar_center { margin-top: 1.0rem; border-radius: 0 0 0.3rem 0.3rem; background: #e9e3d7; box-shadow: 0 0 0 0.1rem #e9e3d7, 0 0 0 0.2rem #e9e3d7, 0 0 0 0.3rem #e5ded2, 0 0 0 0.4rem #e1d9cd, 0 0 0 0.5rem #e0d6ca, 0 0 0 0.6rem #d5c9b5, 0 0 0 0.7rem #c7b9a6, 0 0 0 0.8rem #f4f3f0, 0 0 0 0.9rem #efeeec, 0 0 0 1.0rem #beb2a4, 0 0 1.1rem 0.8rem rgba(0,0,0,1); }
.ressource_box { display: grid; grid-template-columns: repeat(8, 12.0rem); border: 1px solid #c7b9a6; border-bottom: 0; border-right: 0; }
.ressource { position: relative; transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out; user-select: none; cursor: pointer; height: 2.8rem; display: flex; align-items: center; justify-content: space-between; font-weight: bold; font-size: var(--font-size-base); font-family: var(--font-style-normal); color: #73594d; border-top: 1px solid #f4f3f0; border-right: 1px solid #d5c9b5; border-bottom: 1px solid #c7b9a6; border-left: 1px solid #f4f3f0; background: #e9e3d7; }
.res-tt { display: none; position: absolute; top: calc(100% + 0.7rem); left: 50%; transform: translateX(-50%); z-index: 3000; width: 24rem; background: #faf3e2; border: 1px solid #a9926f; border-radius: 0.3rem; box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.35), inset 0 0 0 1px #e8dcc0; padding: 0.8rem 1.0rem; font-size: 1.25rem; font-weight: normal; font-family: var(--font-style-normal); color: #4a3720; line-height: 1.45; text-align: left; white-space: normal; cursor: default; pointer-events: none; }
.res-tt strong { display: block; font-family: var(--font-style-kaiser); font-size: 1.4rem; color: var(--color-primary-dark); margin-bottom: 0.3rem; border-bottom: 1px solid #e6decb; padding-bottom: 0.3rem; }
.res-tt::before { content: ""; position: absolute; top: -0.5rem; left: 50%; transform: translateX(-50%) rotate(45deg); width: 0.9rem; height: 0.9rem; background: #faf3e2; border-left: 1px solid #a9926f; border-top: 1px solid #a9926f; }
.ressource:hover .res-tt { display: block; }
.res-tt-warn { display: block; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e6decb; color: #a83232; font-weight: bold; }
.ressource:nth-child(8n+1) .res-tt { left: 0; transform: none; }
.ressource:nth-child(8n+1) .res-tt::before { left: 3.5rem; }
.ressource:nth-child(8n) .res-tt { left: auto; right: 0; transform: none; }
.ressource:nth-child(8n) .res-tt::before { left: auto; right: 3.5rem; }
.ressource > span { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); letter-spacing: 0.05rem; }
.ressource:hover { background: #efeeec; }
.ressource:active { background: #efeeec; border-bottom: 1px solid #f4f3f0; border-left: 1px solid #d5c9b5; border-top: 1px solid #c7b9a6; border-right: 1px solid #f4f3f0; }
.ressource > :first-child { margin-left: 0.5rem; }
.ressource > :last-child { margin-right: 0.5rem; }
.ressource > img { height: 2.4rem; }
.ressource > .ico { height: 2.4rem; width: 2.4rem; }

.top_bar_right { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; margin-left: 1.0rem; height: 100%; }
.top_bar_actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; height: 3.8rem; }
.reich_info { display: flex; flex-direction: column; gap: 0.1rem; position: relative; top: 1.2rem; min-width: 18.0rem; border: solid 1px #615944; border-radius: 0.6rem; background-color: #dacebb; padding: 0.4rem 1.2rem; box-shadow: inset 0.1rem 0 0.1rem rgba(0,0,0,.35), inset -0.1rem 0 0.1rem rgba(0,0,0,.35), inset 0 -0.2rem 0.1rem rgba(0,0,0,.4), inset 0 0.2rem 0.1rem rgba(255,255,255,.3), 0 0 0.5rem 0 rgba(0,0,0,0.66); }
.reich_row { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: 0.6rem; font-family: var(--font-style-normal); font-size: var(--font-size-small); line-height: 1.5rem; color: #4a3720; }
.reich_row img { height: 1.5rem; width: 1.5rem; }
.reich_row .ico { height: 1.5rem; width: 1.5rem; }
.reich_row .ri-label { letter-spacing: 0.05rem; text-shadow: -0.1rem -0.1rem 0rem #ebe2d0; }
.reich_row .ri-value { font-weight: bold; font-variant-numeric: tabular-nums; text-shadow: -0.1rem -0.1rem 0rem #ebe2d0; }
.reich_row .ri-sub { font-weight: normal; font-size: 1.0rem; color: #73655a; }
.reich_row.ri-online .ri-value { color: var(--color-primary-dark); }
.w2-phase { background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; }
.w2-act { color: #4a3720; font-family: var(--font-style-kaiser); }
.w2-title.is-win { color: #55701f; }
.w2-title.is-draw { color: #7a6a52; }
.w2-title.is-loss { color: #a83232; }
.buttonFramed { position: relative; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: inline-grid; place-items: center; z-index: 0; background-image: linear-gradient(to bottom, #b9a479 5%, #f3e2ae 13%, #e4c189 32%, #a4824e 48%, #866435 72%, #ab9154 93%, #c1b07f 100%); border: 1px solid #34220d; color: #fff; cursor: pointer; }
.buttonFramed > img { height: 2.2rem; width: 2.2rem; }
.buttonFramed > .ico { height: 2.2rem; width: 2.2rem; }
.buttonFramed::before { content: ""; position: absolute; inset: 0.2rem; border-radius: inherit; border: 1px solid #34220d; box-shadow: inset 0 -0.2rem 0.1rem 0.1rem #a1a1a1, inset 0.2rem -0.1rem 0.1rem 0 #e0e0e0, inset -0.2rem -0.1rem 0.1rem 0 #e0e0e0, inset 0 0.2rem 0.1rem 0.1rem #f0f0f0; z-index: -2; }
.buttonFramed::after { content: ""; position: absolute; top: 0.3rem; right: 0.3rem; bottom: 0.3rem; left: 0.3rem; border-radius: inherit; background-image: linear-gradient(to bottom, #e6e6e6, #999); z-index: -1; }
.buttonFramed:hover::after { background-image: linear-gradient(to bottom, #fff, #d0d0d0); }
.buttonFramed:active::after { background-image: linear-gradient(to bottom, #e6e6e6, #666); }
.middle_bar { margin: 0 auto; width: 144.0rem; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 1.0rem; height: calc(100vh - 11.5rem); overflow: hidden; }
/* Die Spalten werden ueber ihre Klasse angesprochen und ueber "order"
   angeordnet — NICHT ueber ihre Reihenfolge im HTML. Dort steht die rechte
   Leiste absichtlich vor dem Hauptinhalt (siehe layout/game.html). */
.col-nav { order: 1; }
.col-main { order: 2; }
.col-side { order: 3; }
.col-nav, .col-side { height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.col-nav::-webkit-scrollbar, .col-side::-webkit-scrollbar { display: none; }

.userdata { display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 1.0rem; padding: 1.5rem; }
.userdata > span > img { width: 5.5rem; }
.userdata > span > .ico { width: 5.5rem; height: 5.5rem; }
.userdata .name { font-size: var(--font-size-medium); font-family: var(--font-style-kaiser); font-weight: bold; }
.pointsbox { display: flex; justify-content: space-around; align-items: center; flex-direction: row; gap: 1.0rem; }
.pointsbox > span > img { width: 3.0rem; }
.pointsbox > span > .ico { width: 3.0rem; height: 3.0rem; }
.pointsbox > span { font-weight: thin; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); letter-spacing: 0.1rem; display: flex; justify-content: space-around; align-items: center; }

.navigation { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 1.5rem; width: 100%; }
.hr { width: 100%; height: 1px; background: linear-gradient(to right, transparent 0, #baae98 2%, transparent, #baae98 4%, #baae98 6%, transparent, #baae98 7%, #baae98 8%, transparent, #baae98 9%, #baae98 50%, transparent 50%, transparent 100%), linear-gradient(to left, transparent 0, #baae98 2%, transparent, #baae98 4%, #baae98 6%, transparent, #baae98 7%, #baae98 8%, transparent, #baae98 9%, #baae98 50%, transparent 50%, transparent 100%); }
.navigation > a { display: flex; justify-content: flex-start; align-items: center; flex-direction: row; gap: 0.5rem; width: 100%; font-weight: bold; }
.navigation > a:hover { background: #fff9eb; }
.navigation > a > img { width: 3.0rem; padding: 0.2rem; }
.navigation > a > .ico { width: 3.0rem; padding: 0.2rem; height: 3.0rem; }
.navigation > a > span { display: flex; align-items: center; height: 2.5rem; font-weight: thin; font-family: var(--font-style-kaiser); font-size: var(--font-size-base); color: var(--font-color-base); }

.zug { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 2.5rem 1.5rem; width: 100%; gap: 1.0rem; }
.zug img { width: 2.4rem; height: 2.4rem; }
.zug .ico { width: 2.4rem; height: 2.4rem; }
.zug .title { font-family: var(--font-style-kaiser); font-size: var(--font-size-large); letter-spacing: 0.1rem; font-weight: bold; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 0.5rem; }
.endedturns { font-family: var(--font-style-normal); font-size: var(--font-size-small); color: #555; border-top: 1px solid #c7b9a6; padding-top: 0.5rem; width: 100%; text-align: center; }
.zug .balken { width: 100%; background: #5f4e40; padding: 0.1rem; border-radius: 0.4rem; }
.percento { height: 1.0rem; background: #6f8b34; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12); border-radius: 2px; }
.transition-width { transition: width 0.5s ease-in-out; }
.zug .text { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 0.5rem; font-family: var(--font-style-kaiser); font-size: var(--font-size-base); }

.zug form { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 0.6rem; margin-top: 0.5rem; }
.zug select { background: #d5c9b5; color: #444; border: 1px solid #8c7f6e; height: 3.2rem; width: 4.5rem; padding: 0; border-radius: 0.4rem; font-size: var(--font-size-medium); font-family: var(--font-style-normal); font-weight: bold; text-align: center; box-shadow: inset 0 1px 0 #f4f3f0; cursor: pointer; outline: none !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.zug select::-ms-expand { display: none; }
.zug select:hover, .zug select:focus, .zug select:active { background: #d5c9b5; color: #444; border: 1px solid #8c7f6e; outline: none !important; box-shadow: inset 0 1px 0 #f4f3f0 !important; }
.zug button { height: 3.2rem; background: #6c7a2e; color: #fff; padding: 0 2.0rem; border: 1px solid #2b3709; box-shadow: inset 0px 2px 1px 0px #6c7a2e, inset 0px -2px 1px 0px #3e5f13; border-radius: 0.4rem; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); font-weight: bold; text-shadow: 1px 1px 0 #3e5f13; cursor: pointer; transition: all 0.1s; display: inline-flex; align-items: center; justify-content: center; }
.zug button:hover { background: #7b8a36; border-color: #4b5728; }
.zug button:active { background: #7b8a36; box-shadow: inset 0px -2px 1px 0px #6c7a2e, inset 0px 2px 1px 0px #3e5f13; }
.faction-select-layout { margin-top: 5.0rem; margin-bottom: 5.0rem; }
.middle_bar.faction-select-layout { height: auto; min-height: calc(100vh - 11.5rem); overflow-y: visible; }
.faction-select-layout .mainbox { max-height: none; margin-bottom: 5.0rem; }
.faction-select-layout .mainbox .content { overflow-y: visible; max-height: none; }
/* auto-fit statt fester vier Spalten (30.08.2026): bei fuenf waehlbaren
   Voelkern stand sonst eines allein in einer zweiten Reihe. So fuellt die
   Reihe sich nach Platz, und die Zahl der Voelker darf sich aendern, ohne
   dass hier jemand nachzaehlen muss. */
.faction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19.0rem, 1fr)); gap: 2.0rem; margin-top: 2.0rem; padding-bottom: 2.0rem; }
.faction-card { display: flex; flex-direction: column; align-items: center; padding: 1.3rem; text-align: center; cursor: pointer; transition: all 0.15s ease-in-out; height: 100%; margin: 0 !important; background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; box-shadow: inset 0 0 0 1px #e8dcc0; }
.faction-card:hover { background: #f7efdc; transform: translateY(-0.3rem); border-color: #4a3b32; }
.faction-card img.faction-crest { max-width: 8.0rem; height: auto; margin-bottom: 1.0rem; }
.faction-card .ico.faction-crest { width: 8.0rem; height: auto; margin-bottom: 1.0rem; }
.faction-card h4 { margin: 0.5rem 0 1.0rem 0; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); color: #4a3720; border-bottom: 1px solid #c3ad86; width: 100%; padding-bottom: 0.5rem; }
/* Wie viele Spieler dieses Volk fuehren — steht in der Karte unter dem Namen.
   Die Regel gehoert HIERHER und nicht in pages/factions.css: die Volkswahl am
   Rundenanfang (faction_select.html) ist eine eigene Seite ausserhalb des
   Spielrahmens und laedt gar keine Seiten-CSS, sondern nur die game.css. */
.faction-players { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: -0.4rem 0 1.0rem; font-size: var(--font-size-small); color: #7a6a4c; }
.faction-players img { width: 1.8rem; height: 1.8rem; }
.faction-players .ico { width: 1.8rem; height: 1.8rem; }
/* Strategietext auf den Volkskarten (30.08.2026). Linksbuendig, obwohl die
   Karte sonst zentriert ist: es sind drei bis vier Zeilen Fliesstext, und
   zentrierter Fliesstext liest sich schlecht. */
.faction-strategy { width: 100%; margin: 0 0 1.0rem; padding: 0 0.2rem;
                    text-align: left; font-size: 1.25rem; line-height: 1.5;
                    color: #6b5a45; }
.faction-bonus-container { margin-top: auto; width: 100%; }
.bonus-label { font-family: var(--font-style-kaiser); color: #6c7a2e; font-weight: bold; font-size: var(--font-size-small); margin-bottom: 0.5rem; text-align: left; padding-left: 1.0rem; text-transform: uppercase; letter-spacing: 0.03rem; }
.bonus-details { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.0rem; font-family: var(--font-style-kaiser); font-size: 1.25rem; color: #4a3720; text-align: left; padding-left: 1.0rem; padding-right: 0.5rem; }
.bonus-details span { flex: 1; line-height: 1.3; }
.bonus-icon { width: 3.2rem; height: 3.2rem; object-fit: contain; flex-shrink: 0; margin-top: -0.2rem; }
.faction-card input[type="radio"] { display: none; }
.faction-card:has(input[type="radio"]:checked) { background: #eef0dd; border-color: #6c7a2e; box-shadow: inset 0 0 0 1px #cfd8a8, 0 1px 3px rgba(70,80,20,0.18); }
.faction-base { width: 100%; margin-top: 1.0rem; padding: 0.7rem 0.9rem; background: #efe6cf; border: 1px solid #c3ad86; border-radius: 2px; text-align: center; }
.fb-head { font-family: var(--font-style-kaiser); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03rem; color: #7a6a4a; margin-bottom: 0.3rem; }
.fb-row { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.3rem 0; font-size: 1.4rem; color: #4a3720; }
.fb-row + .fb-row { border-top: 1px dotted #cfc0a2; }
.fb-val { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; font-family: var(--font-style-kaiser); }
.fb-base, .fb-arrow { color: #8a7a5c; }
.fb-val strong { color: #6c7a2e; }
.fb-icon { width: 2.0rem; height: 2.0rem; object-fit: contain; margin: 0; align-self: center; }
.fb-box { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.fb-box .bonus-label { margin: 0; padding: 0; text-align: center; }
.fb-box .bonus-details { justify-content: center; padding: 0; text-align: center; }
.fb-box .fb-icon { width: 3.6rem; height: 3.6rem; image-rendering: pixelated; }
.fb-wert { color: #6c7a2e; font-weight: bold; }
/* Nachtfarbe gleich hier, damit night.css nicht mit hoch muss. */
html.theme-night .fb-wert { color: #e2eead; }
.fb-pct { color: #6c7a2e; font-weight: bold; font-family: var(--font-style-kaiser); }

.submit-btn { display: block; width: 100%; margin-top: 3.0rem; padding: 1.2rem; background: #6c7a2e; color: #f4ead2; font-size: var(--font-size-medium); font-family: var(--font-style-kaiser); letter-spacing: 0.05rem; border: 1px solid #4c561d; box-shadow: inset 0 -0.2rem 0 rgba(0,0,0,0.16); border-radius: 2px; cursor: pointer; transition: background 0.12s; }
.submit-btn:hover { background: #7b8a36; border-color: #4c561d; }
.submit-btn:active { box-shadow: inset 0 0.2rem 0.3rem rgba(0,0,0,0.26); }
/* Zweitrangiger Knopf ("Ich waehle spaeter"): dieselbe Form, aber in
   Pergament statt Gruen — er soll da sein, ohne dem eigentlichen Ziel der
   Seite die Aufmerksamkeit zu nehmen. */
.submit-btn.secondary { background: #efe6cf; color: #5b4a2e; border-color: #a9926f; box-shadow: inset 0 -0.2rem 0 rgba(0,0,0,0.08); }
.submit-btn.secondary:hover { background: #f7efdc; border-color: #7a6a4c; }
/* Die beiden Knoepfe der Volkswahl nebeneinander. Der gruene traegt mehr
   Gewicht, deshalb 3fr zu 2fr statt halbe-halbe. */
.faction-actions { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; align-items: stretch; }
.faction-actions .submit-btn { margin-top: 3.0rem; }
.faction-later-hint { margin: 1.2rem 0 0; text-align: center; font-size: var(--font-size-small); color: #7a6a4c; line-height: 1.4; }
.homepage-main, .homepage-content { font-family: var(--font-style-normal); color: #333; }
.homepage-main { width: min(96.0rem, calc(100% - 2.0rem)); margin: 2.0rem auto; position: relative; }
.homepage-header { display: flex; justify-content: space-between; align-items: flex-end; }
.homepage-content { display: flex; flex-direction: column; border-radius: 1.0rem; box-shadow: 0 0 1.0rem rgba(0, 0, 0, 0.3); overflow: hidden; background: #fff; }
.content-wrapper { padding: 2.5rem 3.0rem; background: #ffffff; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); overflow: hidden; }
.homepage-banner { display: flex; align-items: center; gap: 2.0rem; padding: 1.0rem 2.0rem; font-family: var(--font-style-kaiser); letter-spacing: 0.5rem; color: #333; }
.homepage-banner img { max-width: 8.0rem; height: auto; display: block; }
.homepage-banner .ico { width: 8.0rem; height: auto; display: block; }
.homepage-banner > div:last-of-type { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; }
.homepage-banner span:first-child { font-size: 3.1rem; line-height: 3.1rem; }
.homepage-banner span:last-child { font-size: 2rem; line-height: 2rem; }
.homepage-charakter { display: flex; align-items: flex-end; }
.homepage-charakter img { max-width: 5.0rem; height: auto; display: block; position: relative; top: 0.6rem; }
.homepage-charakter .ico { width: 5.0rem; height: auto; display: block; position: relative; top: 0.6rem; }
.login { padding: 1.0rem; background: var(--color-bg-light); display: flex; justify-content: flex-end; }
.login form { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
#login-form { position: relative; }
.login input[type="text"], .login input[type="password"], .login input[type="submit"] { height: 3.2rem; box-sizing: border-box; font-size: var(--font-size-base); border-radius: 0.3rem; margin: 0; }
.login input[type="text"], .login input[type="password"] { padding: 0 0.8rem; background: #fff !important; border: 1px solid #b8b8b8 !important; color: #333; }
.login input[type="submit"] { padding: 0 1.5rem; background-color: var(--color-primary) !important; color: white !important; border: none !important; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s; }
.login input[type="submit"]:hover { background-color: var(--color-primary-dark) !important; }
/* "EINGELOGGT BLEIBEN" (03.09.2026). Sitzt als weiteres Glied in derselben
   Flex-Zeile zwischen Passwort und Knopf. Das ganze Label ist klickbar, nicht
   nur das Kaestchen — das sind an einer 3,2rem hohen Leiste ein paar Pixel
   Unterschied, die man auf dem Handy deutlich merkt. white-space:nowrap, damit
   "Eingeloggt bleiben" nicht mitten im Wort umbricht und die Leiste hoeher
   macht. */
.login-merker { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 1.3rem; color: #4a3720; cursor: pointer; user-select: none; padding: 0 0.2rem; }
/* Auch der Text faerbt beim Ueberfahren mit — so sieht man, dass das ganze
   Label anklickbar ist und nicht nur das Kaestchen. */
.login-merker:hover { color: var(--color-primary-dark, #4c561d); }
.login-merker:hover input[type="checkbox"] { border-color: #6c7a2e; }
.registration-container { float: left; width: 30.0rem; margin-right: 3.0rem; margin-bottom: 2.0rem; padding: 2.0rem; background-color: var(--color-bg-light); border-radius: 0.8rem; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); }
.registration-container p { margin-bottom: 1.2rem; font-size: var(--font-size-base); }
.registration-form div { margin-bottom: 1.5rem; }
.registration-form label { display: block; margin-bottom: 0.5rem; font-weight: bold; font-family: var(--font-style-normal); font-size: var(--font-size-base); }
.registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="password"] { width: 100%; padding: 1.0rem; border: 1px solid #ccc !important; border-radius: 0.4rem; background-color: #fff !important; font-family: var(--font-style-normal); color: #333; font-size: var(--font-size-base); }
.registration-form input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 0.2rem rgba(93, 140, 65, 0.2); }
.registration-form button[type="submit"] { width: 100%; background-color: var(--color-primary); color: white; padding: 1.2rem 2.0rem; border: none; border-radius: 0.5rem; font-size: var(--font-size-medium); font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease; cursor: pointer; font-family: var(--font-style-normal); }
.registration-form button[type="submit"]:hover { background-color: var(--color-primary-dark); }

.captcha-wrapper { display: flex; gap: 1.0rem; align-items: center; }
#captcha-image { border: 1px solid var(--color-border-subtle); border-radius: 0.4rem; cursor: pointer; height: 4.0rem; background-color: #fff; image-rendering: pixelated; }
#captcha-image:hover { box-shadow: 0 0 0 0.2rem rgba(93, 140, 65, 0.2); }
.captcha-wrapper input[type="text"] { flex: 1; }
.league-schedule-container { float: left; width: 30.0rem; clear: left; margin-right: 3.0rem; margin-bottom: 2.0rem; padding: 2.0rem; background-color: var(--color-bg-light); border-radius: 0.8rem; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); }
.schedule-list { list-style: none; padding: 0; margin: 0; }
.schedule-list li { padding: 1.0rem; margin-bottom: 1.0rem; border-radius: 0.5rem; background: #fff; border: 1px solid var(--color-border-subtle); font-size: var(--font-size-base); }
.schedule-list li:last-child { margin-bottom: 0; }
.round-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; font-family: var(--font-style-normal); }
.schedule-list li.past, .schedule-list li.future { opacity: 0.6; background: #fdfdfd; }
.schedule-list li.current { background-color: var(--color-primary); border-color: var(--color-primary-dark); box-shadow: none; color: white; }
.schedule-list li.current .round-dates { color: white; font-weight: bold; }
.schedule-list li.current .round-title strong { color: white; }
.schedule-list li.current .badge { background-color: white; color: var(--color-primary-dark); box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.2); }
.badge { background-color: var(--color-primary); color: white; padding: 0.2rem 0.6rem; border-radius: 0.3rem; font-size: var(--font-size-small); text-transform: uppercase; font-weight: bold; }
.main-text-content { overflow: hidden; }
.main-text-content h1, .main-text-content h2, .main-text-content h3, .registration-container h2, .league-schedule-container h2 { font-family: var(--font-style-kaiser); color: var(--color-primary-dark); margin-bottom: 1.5rem; }
.main-text-content h1, .main-text-content h2, .main-text-content h3 { margin-top: 2.5rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--color-bg-light); }
.main-text-content h1:first-child, .main-text-content h2:first-child, .main-text-content h3:first-child { margin-top: 0; }
.main-text-content h1 { font-size: 2.2em; }
.main-text-content h2 { font-size: 1.9em; }
.main-text-content h3 { font-size: 1.6em; }
.registration-container h2, .league-schedule-container h2 { font-size: 1.8em; text-align: center; margin-top: 0; }
.main-text-content p { margin-bottom: 1.2rem; line-height: 1.6; font-size: var(--font-size-base); }
.intro-text p:last-child { margin-bottom: 0; }
.intro-text ul { list-style-type: disc; padding-left: 2.5rem; margin-top: 1.0rem; margin-bottom: 2.0rem; }
.intro-text li { margin-bottom: 1.0rem; line-height: 1.6; font-size: var(--font-size-base); }
.content-image-right { float: right; max-width: 10.0rem; margin: 0 0 1.5rem 2.0rem; border-radius: 0.8rem; background: var(--color-bg-light); }
.features-list { list-style: none; column-count: 2; column-gap: 3.0rem; font-size: var(--font-size-base); }
.features-list li { display: flex; align-items: center; margin-bottom: 1.2rem; break-inside: avoid-column; }
.list-icon { height: 3.0rem; width: auto; margin-right: 1.2rem; flex-shrink: 0; }
/* Am Symbolblatt gibt es keine Eigengroesse: width:auto waere Breite null.
   Die Felder sind quadratisch, also ist die Breite gleich der Hoehe. */
.ico.list-icon { width: 3.0rem; height: 3.0rem; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-soft { color: #7a6a52; }
.text-leaf { color: #55701f; }
.text-gold { color: #8a6d1b; }
.text-bronze { color: #9a6b2e; }
.text-copper { color: #8a4f34; }
.text-dim { color: #aaa; }
.panel-parchment { border: 1px solid #a9926f; border-radius: 2px; box-shadow: inset 0 0 0 1px #e8dcc0; }
.row-head-soft { background: #e9e3d7; }
.row-head-warm { background: #efe6cd; }
.row-own { background-color: #f4faed; }
.detail-head-row { background-color: #e9e3d7; border-top: 2px solid #c7b9a6; }
.report-table { width: 100%; border-collapse: collapse; text-align: center; border: 1px solid #b6a17e; }
.report-cell { padding: 0.4rem; border-bottom: 1px solid #d8c7a6; }
.loot-box { background: #eef0dd; border: 1px solid #6c7a2e; border-radius: 2px; }
.loot-note { color: #5e4a20; }
.bar-track { background: #e0d2b2; padding: 1px; border: 1px solid #b6a17e; border-radius: 2px; width: 100%; }
.bar-fill { background: #6f8b34; border-radius: 2px; }

.text-success { color: #6c7a2e !important; }
.text-danger { color: #a83232 !important; }
.text-muted { color: #aaa !important; }
.font-bold { font-weight: bold !important; }
.font-kaiser { font-family: var(--font-style-kaiser) !important; }
.font-lg { font-size: var(--font-size-large) !important; }
.font-md { font-size: var(--font-size-medium) !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-inline-block { display: inline-block !important; }
.flex-col { flex-direction: column !important; }
.j-center { justify-content: center !important; }
.j-between { justify-content: space-between !important; }
.j-end { justify-content: flex-end !important; }
.a-center { align-items: center !important; }
.gap-05 { gap: 0.5rem !important; }
.gap-10 { gap: 1.0rem !important; }
.gap-15 { gap: 1.5rem !important; }
.m-0 { margin: 0 !important; }
.m-auto { margin: 0 auto !important; }
.mr-0 { margin-right: 0 !important; }
.ml-03 { margin-left: 0.3rem !important; }
.ml-05 { margin-left: 0.5rem !important; }
.mt-15 { margin-top: 1.5rem !important; }
.mt-20 { margin-top: 2.0rem !important; }
.mb-10 { margin-bottom: 1.0rem !important; }
.mb-15 { margin-bottom: 1.5rem !important; }
.mb-20 { margin-bottom: 2.0rem !important; }
.mb-30 { margin-bottom: 3.0rem !important; }
.p-0 { padding: 0 !important; }
.p-10 { padding: 1.0rem !important; }
.p-15 { padding: 1.5rem !important; }
.pl-05 { padding-left: 0.5rem !important; }
.pb-05 { padding-bottom: 0.5rem !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.w-60 { width: 6.0rem !important; }
.w-38 { width: 3.8rem !important; }
.h-40 { height: 4.0rem !important; }
.bg-light-alt { background-color: #f4ead2 !important; }
.border-bottom-thick { border-bottom: 2px solid #c7b9a6 !important; }
.border-bottom-dashed { border-bottom: 1px dashed #c7b9a6 !important; }
.op-30 { opacity: 0.3 !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.list-unstyled { list-style: none !important; padding: 0 !important; }
.cols-2 { column-count: 2 !important; }
.btn-auto-px { width: auto !important; padding: 0 1.5rem !important; }
.form-container-sm { max-width: 45.0rem; margin: 0 auto; }
.form-container-md { max-width: 50.0rem; margin: 0 auto; }
.title-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 1.0rem 2.0rem !important; }
.lang-switcher { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; display: flex; gap: 0.8rem; }
.lang-flag { width: 2.4rem; height: auto; border: 1px solid #333; border-radius: 0.3rem; transition: opacity 0.2s; }
.lang-flag.active { opacity: 1; }
.lang-flag.inactive { opacity: 0.4; }
.alpha-warning-box { background: #fdf3f3; border-bottom: 2px solid #a83232; padding: 1.5rem 2.0rem; text-align: center; color: #8a2727; }
.alpha-warning-title { font-family: var(--font-style-kaiser); font-size: 2.0rem; display: block; margin-bottom: 0.5rem; }
.alpha-warning-text { font-size: 1.4rem; line-height: 1.5; }
.homepage-footer { background: #f0f4ec; padding: 1.0rem; border-top: 1px solid #d8d8d8; font-size: var(--font-size-small); text-align: center; }
.wip-content { padding: 4.0rem 2.0rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.messages-box { padding: 0.3rem; border-radius: 0.5rem; font-size: var(--font-size-base); }
.messages-box p { margin: 0; }
.messages-box.success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.messages-box.error { background-color: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
#registration-messages.messages-box { margin-top: 1.5rem; }
#login-form .messages-box { position: absolute; top: 100%; right: 0; margin-top: 0.8rem; z-index: 10; width: 32.0rem; box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1); text-align: left; }
.error-text { color: var(--color-error-text); font-size: var(--font-size-small); display: block; margin-top: 0.2rem; }
.error-page-body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh; font-family: var(--font-style-normal); background-color: var(--background-color-beige); color: var(--font-color-base); }
.error-page-body h1 { font-size: 10.0rem; margin: 0; font-family: var(--font-style-kaiser); color: var(--color-primary-dark); }
.error-page-body a { padding: 1.0rem 2.0rem; background-color: var(--color-primary); color: #fff; text-decoration: none; border-radius: 0.5rem; font-weight: bold; }
.error-page-body a:hover { background-color: var(--color-primary-dark); }
.buildings-table th { padding: 0.6rem 0.5rem !important; }
.buildings-table td { padding: 0.5rem 0.5rem !important; transition: background-color 0.1s ease-in-out; }
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background-color: #efe6cf !important; }
.details-row { display: none; background-color: #f6f3eb; }
.details-row.open { display: table-row; }
.details-box { background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; padding: 1.5rem; margin: 0.5rem 1.0rem 1.5rem 1.0rem; box-shadow: inset 0 0 0 1px #e8dcc0; display: flex; align-items: flex-start; gap: 2.0rem; }
.building-detail-img { width: 12.0rem; height: 12.0rem; object-fit: contain; background-color: #faf3e2; border: 1px solid #b6a17e; padding: 0.8rem; border-radius: 2px; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(90,70,30,0.1); }
.details-desc { flex: 2; font-style: italic; color: #555; line-height: 1.6; border-right: 1px solid #c7b9a6; padding-right: 1.5rem; font-size: 1.4rem; }
.details-stats { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.stat-line { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #d5c9b5; padding: 0.8rem 0; }
.stat-line:last-child { border-bottom: none; padding-bottom: 0; }
.stat-label { font-weight: bold; color: var(--color-primary-dark); font-size: 1.4rem; }
.stat-value { font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.8rem; display: flex; align-items: center; gap: 0.6rem; }
.summary-box { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; padding: 1.0rem 2.0rem; margin-top: 1.5rem; display: flex; justify-content: space-around; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); box-shadow: inset 0 0 0 1px #e8dcc0; }
.summary-item { display: flex; flex-direction: column; align-items: center; color: #555; }
.summary-val { font-size: 1.3em; font-weight: bold; color: var(--font-color-base); margin-top: 0.2rem; }
.val-negative { color: #a83232; }
.val-positive { color: #6c7a2e; }
.action-panel { background: #e9e3d7; border: 2px solid #c7b9a6; border-radius: 0.8rem; padding: 1.2rem; margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 1.0rem; }
.build-select { padding: 0 2.5rem 0 1.0rem; border: 1px solid #8c7f6e; background: #e4d8c1; font-family: var(--font-style-normal); font-size: var(--font-size-base); font-weight: bold; color: var(--font-color-base); outline: none; cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 5L0 0h4z"/></svg>'); background-repeat: no-repeat; background-position: right 1.0rem center; background-size: 0.8rem 1.0rem; box-shadow: inset 0 0.2rem 0.5rem rgba(0,0,0,0.15); transition: background 0.2s, border-color 0.2s; }
.build-select:focus, .build-select:hover { background-color: #fdfaf3; border-color: #6c7a2e; }
body.manual-body { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.manual-layout { display: flex; width: 130.0rem; max-width: 95vw; height: calc(100vh - 10.0rem); align-items: flex-start; justify-content: center; }

.manual-sidebar-wrapper { width: 28.0rem; margin: 1.5rem !important; display: flex; flex-direction: column; align-self: flex-start; max-height: 100%; }
.manual-sidebar-content { flex: 1; background: #e9e3d7; border-left: 3px solid #716050; border-right: 3px solid #716050; border-bottom: 3px solid #716050; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; border-radius: 0 0 0.5rem 0.5rem; scrollbar-width: thin; scrollbar-color: #6c7a2e rgba(0,0,0,0.1); }
.manual-sidebar-content::-webkit-scrollbar { width: 0.6rem; }
.manual-sidebar-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 0.3rem; margin: 0.4rem; }
.manual-sidebar-content::-webkit-scrollbar-thumb { background: #6c7a2e; border-radius: 0.3rem; }
.manual-sidebar-content .navigation { display: block; padding: 1.0rem; }
.manual-sidebar-content .navigation > a { display: flex; padding: 0.6rem 1.0rem; border-radius: 0.3rem; flex-shrink: 0; }
.manual-sidebar-content .navigation > a > span { width: auto !important; height: auto !important; min-height: 2.5rem; white-space: normal; line-height: 1.4; padding-left: 0.5rem; }
.manual-sidebar-content .navigation > a > img { width: 2.8rem !important; height: 2.8rem !important; padding: 0 !important; object-fit: contain; }
.manual-sidebar-content .navigation > a > .ico { width: 2.8rem !important; height: 2.8rem !important; padding: 0 !important; object-fit: contain; }

.manual-mainbox-wrapper { flex: 1; margin: 1.5rem !important; display: flex; flex-direction: column; height: 100%; max-height: 100% !important; }
.manual-content { padding: 3.0rem 4.0rem !important; border-radius: 0 0 0.5rem 0.5rem; }

.manual-section { padding-top: 1.0rem; margin-bottom: 4.0rem; }
.manual-section h2 { font-family: var(--font-style-kaiser); color: var(--color-primary-dark); font-size: var(--font-size-large); margin-top: 0; margin-bottom: 1.5rem; border-bottom: 2px solid #e6decb; padding-bottom: 0.5rem; display: flex; align-items: center; }
.manual-section h2 img { height: 2.8rem; margin-right: 1.0rem; }
.manual-section h2 .ico { height: 2.8rem; margin-right: 1.0rem; width: 2.8rem; }
.manual-section p { margin-bottom: 1.5rem; }
.manual-section ul, .manual-section ol { margin-left: 2.0rem; margin-bottom: 2.0rem; }
.manual-section li { margin-bottom: 0.8rem; }

.val-hl { color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.1em; background: #e8f0e1; padding: 0.1rem 0.5rem; border-radius: 0.3rem; border: 1px solid #c3e6cb; display: inline-block; }
.info-box { background: #f4efe4; border: 1px solid #c7b9a6; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2.0rem; }
.info-box.danger { border-color: #a83232; background: #fdf3f3; }

.manual-faction-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.0rem; margin-bottom: 3.0rem; }
.manual-faction-card { background: #efe3ca; border: 1px solid #c7b9a6; border-radius: 0.5rem; padding: 1.0rem; display: flex; align-items: center; gap: 1.5rem; }
.manual-faction-card img.crest { width: 5.0rem; height: auto; }
.manual-faction-card .ico.crest { width: 5.0rem; height: auto; }
.manual-faction-card .details { flex: 1; }
.manual-faction-card h4 { margin: 0 0 0.5rem 0; font-family: var(--font-style-kaiser); font-size: 1.1em; color: var(--color-primary-dark); border-bottom: 1px solid #c7b9a6; }
.manual-faction-card p { margin: 0; font-size: 0.85em; color: #555; line-height: 1.3; }
.msg-list { display: flex; flex-direction: column; gap: 0.8rem; }
.msg-item { background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px #e8dcc0; }

.msg-item.unread .msg-header { background: #fbf5e6; }
.msg-item.read .msg-header { background: #e9e3d7; }

.msg-sender { font-family: var(--font-style-kaiser); font-size: 1.7rem; }
.msg-item.unread .msg-sender { font-weight: bold; color: var(--color-primary-dark); }
.msg-item.read .msg-sender { font-weight: normal; color: #73655a; }

.msg-item.sys-trade .msg-header { border-left: 0.4rem solid #6c7a2e; }
.msg-item.sys-info .msg-header { border-left: 0.4rem solid #4292cf; }
.msg-item.player-msg .msg-header { border-left: 0.4rem solid #b68363; }

.msg-header { display: flex; padding: 1.0rem 1.5rem; cursor: pointer; transition: background-color 0.2s; align-items: center;}
.msg-header:hover { background-color: #efe6cf !important; }

.msg-icon { height: 3.2rem; width: 3.2rem; object-fit: contain; flex-shrink: 0; }
.msg-snippet { font-family: var(--font-style-normal); font-size: 1.3rem; color: #8c7f6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.3rem; font-weight: normal; }
.msg-time { font-size: 1.2rem; color: #8c7f6e; font-family: var(--font-style-normal); font-weight: normal; white-space: nowrap; margin-left: 1.0rem; }
.unread-dot { height: 0.8rem; width: 0.8rem; background-color: #a83232; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.chat-body { display: none; background: #c7b9a6; border-top: 1px solid #c7b9a6; }
.msg-item.open .chat-body { display: block; }
.btn-new-msg { width: auto; padding: 0.4rem 1.5rem; font-size: 1.3rem; height: 2.6rem; line-height: normal; border-radius: 0.3rem; }

.custom-scroll-wrapper { position: relative; max-height: 40.0rem; overflow: hidden; background: #c7b9a6; }
.chat-history { max-height: 40.0rem; overflow-y: scroll; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.0rem; scrollbar-width: none; -ms-overflow-style: none; }
.chat-history::-webkit-scrollbar { display: none; }
/* ABGERUNDETE SPRECHBLASEN (03.09.2026, Pascal). Vorher 2px — praktisch
   eckig. Die eine SCHARFE Ecke bleibt trotzdem: sie zeigt, wer spricht
   (oben links = die anderen, oben rechts = du). Ganz spitz wirkt sie neben
   den weichen Ecken aber wie ein Fehler, deshalb bekommt sie 0.3rem statt 0. */
.chat-bubble { max-width: 85%; padding: 1.0rem 1.5rem; border-radius: 0.9rem; font-size: 1.4rem; line-height: 1.5; position: relative; background-color: #faf3e2; border: 1px solid #b6a17e; box-shadow: inset 0 0 0 1px #e8dcc0; color: #4a3720; }
.chat-time { display: block; font-size: 1.1rem; color: #8c7f6e; margin-top: 0.5rem; text-align: right; }
/* Lesehaken hinter der Uhrzeit: ein Haken = zugestellt, zwei = gelesen.
   Steht hier und nicht in pages/chat.css, weil die Sprechblasen selbst hier
   wohnen und das Postfach auch ausserhalb des Stadtplatzes eingebunden wird. */
.chat-haken { letter-spacing: -0.2rem; padding-right: 0.2rem; }
.chat-haken.gelesen { color: #6c7a2e; font-weight: bold; }
.msg-snippet .chat-haken { color: #8c7f6e; margin-left: 0.3rem; }
.msg-snippet .chat-haken.gelesen { color: #6c7a2e; }
.bubble-them { align-self: flex-start; border-top-left-radius: 0.3rem; }
.bubble-me { align-self: flex-end; border-top-right-radius: 0.3rem; background-color: #e4eedb; }

.reply-box { padding: 1.2rem 1.5rem; background: #d5c9b5; border-top: 1px solid #c7b9a6; display: flex; gap: 1.0rem; align-items: stretch; }
.reply-input { flex: 1; padding: 1.0rem; border: 1px solid #8c7f6e; border-radius: 0.4rem; background: #fdfaf3; font-family: var(--font-style-normal); font-size: 1.5rem; outline: none; resize: none; height: 6.5rem; box-sizing: border-box; }
.reply-input:focus { border-color: #6c7a2e; }

.new-chat-box { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; padding: 2.0rem; display: none; margin-bottom: 2.5rem; }
.new-chat-box.active { display: block; }

.autocomplete-wrapper { position: relative; flex: 1; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #8c7f6e; border-top: none; list-style: none; margin: 0; padding: 0; z-index: 100; max-height: 15.0rem; overflow-y: auto; display: none; }
.autocomplete-list li { padding: 0.8rem 1.0rem; cursor: pointer; border-bottom: 1px solid #eee; }
.autocomplete-list li:hover { background: #efe6cf; }
:where(.mainbox .content) thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fdfaf3;
    box-shadow: inset 0 -2px 0 #bbaea0;
}
.mainbox .content:has(thead th) { padding-top: 0 !important; }
.mainbox .content:has(thead th)::before { content: ''; display: block; height: 2.0rem; }
.mainbox .content.p-15:has(thead th)::before { height: 1.5rem; }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th { border-bottom: 2px solid #bbaea0; padding: 1.0rem 0.5rem; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); text-align: left; }
.rank-table td { padding: 1.0rem 0.5rem; border-bottom: 1px solid #e6decb; vertical-align: middle; color: var(--font-color-base); font-size: 1.5rem; }
.rank-crest { height: 2.4rem; object-fit: contain; }

.row-me td { background-color: #e4eedb !important; font-weight: bold; border-top: 1px solid #6c7a2e; border-bottom: 1px solid #6c7a2e; }
.row-me td:first-child { border-left: 3px solid #6c7a2e; }

.top-rank-1 { color: #d4af37; font-size: 2.0rem; text-shadow: 0.1rem 0.1rem 0px #000; }
.top-rank-2 { color: #a8a9ad; font-size: 1.8rem; text-shadow: 0.1rem 0.1rem 0px #444; }
.top-rank-3 { color: #cd7f32; font-size: 1.8rem; text-shadow: 0.1rem 0.1rem 0px #555; }

.pagination-bar { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 1.5rem; background: #e9e3d7; border-bottom: 2px solid #c7b9a6; border-radius: 0.4rem; margin-bottom: 1.5rem; }
.page-btn { padding: 0.6rem 1.5rem; background: #fdfaf3; border: 1px solid #c7b9a6; border-radius: 0.3rem; font-weight: bold; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); text-decoration: none; transition: background 0.2s; cursor: pointer; }
.page-btn:hover { background: #efe6cf; border-color: #6c7a2e; }
.page-btn.active { background: #6c7a2e; color: white; border-color: #2b3709; }
.page-info { font-family: var(--font-style-kaiser); font-size: 1.6rem; font-weight: bold; color: #5e463a; }
.rank-header { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; padding: 1.5rem 2.0rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.0rem; box-shadow: inset 0 0 0 1px #e8dcc0; }
.rank-badge { display: flex; align-items: center; gap: 1.5rem; }
.rank-badge img { height: 5.0rem; width: 5.0rem; }
.rank-badge .ico { height: 5.0rem; width: 5.0rem; }
.rank-badge small { font-size: 1.3rem; color: #73655a; display: block; text-transform: uppercase; letter-spacing: 0.1rem; }
.rank-badge strong { font-family: var(--font-style-kaiser); font-size: 2.0rem; color: #4a3720; }

.rank-progress { flex: 1; margin-left: 3.0rem; }
.progress-labels { display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: bold; color: #7a6a52; margin-bottom: 0.5rem; }

.special-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.special-card { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; display: flex; flex-direction: column; padding: 1.5rem; position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: inset 0 0 0 1px #e8dcc0; }
.special-card:hover { box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08); border-color: #a69477; }

.special-card.built { background: #e4eedb; border-color: #6c7a2e; }
.special-card.built::after { content: attr(data-label-built); position: absolute; left: -3.5rem; top: 1.5rem; background: #6c7a2e; color: #fff; padding: 0.5rem 3.5rem; transform: rotate(-45deg); font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.4rem; box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.3); }

.special-top { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px dashed #c7b9a6; padding-bottom: 1.0rem; }
.special-img { width: 8.0rem; height: 8.0rem; background-color: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; padding: 0.5rem; object-fit: contain; box-shadow: inset 0 0 0 1px #e8dcc0; }
.special-card.built .special-img { background-color: #faf3e2; border-color: #6c7a2e; }

.special-title { font-family: var(--font-style-kaiser); font-size: 1.8rem; font-weight: bold; color: var(--color-primary-dark); margin-bottom: 0.5rem; }
.special-effect { font-size: 1.3rem; color: #6c7a2e; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; }

.special-costs { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 1.4rem; font-family: var(--font-style-kaiser); font-weight: bold; color: #5e463a; margin-bottom: 1.5rem; }
.special-card .cost-item { display: flex; align-items: center; gap: 0.3rem; background: #faf3e2; padding: 0.2rem 0.6rem; border-radius: 2px; border: 1px solid #b6a17e; }
.special-card.built .cost-item { border-color: #6c7a2e; }

.btn-built { width: 100%; background: transparent; color: #55701f; box-shadow: none; border-color: #6c7a2e; cursor: default; }
.btn-locked { width: 100%; background: #c7b9a6; color: #fff; box-shadow: none; border-color: #a69477; cursor: not-allowed; }
.slider-container { margin: 4.0rem auto 2.0rem auto; max-width: 35.0rem; position: relative; }
.slider-container input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
.slider-container input[type=range]:focus { outline: none; }
.slider-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 1.2rem; cursor: pointer; background: #e6decb; border-radius: 0.6rem; border: 1px solid #c7b9a6; box-shadow: inset 0 0.2rem 0.4rem rgba(0,0,0,0.1); }
.slider-container input[type=range]::-webkit-slider-thumb { height: 2.8rem; width: 2.8rem; border-radius: 50%; background: #6c7a2e; cursor: pointer; -webkit-appearance: none; margin-top: -0.9rem; box-shadow: inset 0 0.2rem 0.2rem rgba(255,255,255,0.4), inset 0 -0.2rem 0.2rem rgba(0,0,0,0.2), 0 0.2rem 0.5rem rgba(0,0,0,0.4); border: 2px solid #3e5f13; transition: transform 0.1s, background 0.1s; }
.slider-container input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); background: #7b8a36; }
.slider-container input[type=range]::-moz-range-track { width: 100%; height: 1.2rem; cursor: pointer; background: #e6decb; border-radius: 0.6rem; border: 1px solid #c7b9a6; box-shadow: inset 0 0.2rem 0.4rem rgba(0,0,0,0.1); }
.slider-container input[type=range]::-moz-range-thumb { height: 2.8rem; width: 2.8rem; border-radius: 50%; background: #6c7a2e; cursor: pointer; box-shadow: inset 0 0.2rem 0.2rem rgba(255,255,255,0.4), inset 0 -0.2rem 0.2rem rgba(0,0,0,0.2), 0 0.2rem 0.5rem rgba(0,0,0,0.4); border: 2px solid #3e5f13; }
.slider-labels { display: flex; justify-content: space-between; margin-top: 0.8rem; color: #8c7f6e; font-size: 1.2rem; font-weight: bold; }

.tax-display { font-family: var(--font-style-kaiser); font-size: 4.0em; font-weight: bold; color: var(--color-primary-dark); text-align: center; margin-bottom: 1.0rem; text-shadow: 0.2rem 0.2rem 0 #fff; }
.tax-effect-box { background: #fdfaf3; border: 2px solid #e6decb; padding: 1.5rem; border-radius: 0.8rem; margin: 2.0rem auto; max-width: 35.0rem; text-align: center; transition: border-color 0.3s, background-color 0.3s; }
.tax-effect-title { font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.2em; display: block; margin-bottom: 0.5rem; }
.tax-effect-desc { color: #555; font-size: var(--font-size-small); }

.status-good { border-color: #6c7a2e; background: #f4faed; }
.status-good .tax-effect-title { color: #4a6735; }
.status-neutral { border-color: #c7b9a6; }
.status-neutral .tax-effect-title { color: #73594d; }
.status-bad { border-color: #a83232; background: #fdf3f3; }
.status-bad .tax-effect-title { color: #8a2727; }
.market-table { width: 100%; border-collapse: collapse; margin-bottom: 2.0rem; }
.market-table th { border-bottom: 2px solid #bbaea0; padding: 1.0rem 0.5rem; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); text-align: center; cursor: pointer; user-select: none; }
.market-table th:hover { background: #efe6cf; }
.market-table td { padding: 0.8rem 0.5rem; border-bottom: 1px solid #e6decb; vertical-align: middle; color: var(--font-color-base); transition: background-color 0.1s ease-in-out; }

.col-val { text-align: right; padding-right: 0.4rem !important; border-right: none !important; font-family: var(--font-style-kaiser); font-size: 1.6rem; font-weight: bold; }
.col-icn { text-align: left; padding-left: 0 !important; width: 2.8rem; border-left: none !important; }

.tab-btn-inline { background: #d5c9b5; border: 1px solid #8c7f6e; color: #444; box-shadow: inset 0 0.1rem 0 #f4f3f0; margin: 0 0.5rem; padding: 0.8rem 2.5rem; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); border-radius: 0.4rem; cursor: pointer; transition: all 0.1s; }
.tab-btn-inline:hover { background: #e0d6ca; color: #222; }
.tab-btn-inline.active { background: #6c7a2e; border-color: #2b3709; color: white; box-shadow: inset 0px 0.2rem 0.1rem 0px #6c7a2e, inset 0px -0.2rem 0.1rem 0px #3e5f13; text-shadow: 0.1rem 0.1rem 0 #3e5f13; }
.tab-header-container { text-align: center; margin-bottom: 2.0rem; border-bottom: 2px solid #e6decb; padding-bottom: 1.5rem; }
.market-stats-bar { text-align: center; font-size: 1.1rem; color: #73655a; margin-bottom: 1.5rem; background: #e9e3d7; padding: 0.8rem; border-radius: 0.4rem; }

.res-nav { display: flex; justify-content: center; gap: 0.8rem; margin-bottom: 2.0rem; flex-wrap: nowrap; }
.res-btn { display: flex; align-items: center; justify-content: center; padding: 0.6rem; background: #e9e3d7; border: 1px solid #c7b9a6; border-radius: 0.4rem; cursor: pointer; transition: all 0.1s; }
.res-btn img { height: 2.4rem; width: 2.4rem; }
.res-btn .ico { height: 2.4rem; width: 2.4rem; }
.res-btn:hover { background: #efe6cf; border-color: #6c7a2e; }
.res-btn.active { background: #6c7a2e; border-color: #2b3709; box-shadow: inset 0 0.2rem 0.4rem rgba(0,0,0,0.3); }

.create-offer-box { background: #f6f3eb; border: 2px solid #e6decb; border-radius: 0.4rem; padding: 1.5rem 2.5rem; margin-bottom: 2.0rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: inset 0 0.1rem 0.3rem rgba(0,0,0,0.05); }
.offer-header-row { width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.8rem; padding-bottom: 1.2rem; border-bottom: 1px dashed #d5c9b5; }
.offer-input-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: flex-end; }
.offer-column { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.offer-label { font-family: var(--font-style-kaiser); font-size: 1.5rem; color: #73655a; text-transform: uppercase; font-weight: bold; }

.input-with-icon { position: relative; display: inline-block; }
.input-with-icon input { padding-right: 3.2rem !important; text-align: center; }
.input-with-icon img { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); height: 2.0rem; width: 2.0rem; pointer-events: none; }
.input-with-icon .ico { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); height: 2.0rem; width: 2.0rem; pointer-events: none; }
.radio-hidden { display: none; }
.selection-box { display: block; background: #fcfbf8; border: 2px solid #e6decb; padding: 2.5rem 2.0rem; margin-bottom: 2.0rem; border-radius: 0.8rem; cursor: pointer; transition: all 0.2s ease-in-out; text-align: center; box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.05); }
.selection-box:hover { background: #fefdfa; border-color: #c7b9a6; transform: translateY(-0.2rem); box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.1); }
.radio-hidden:checked + .selection-box { background: #f4faed; border-color: #6c7a2e; box-shadow: 0 0 0 0.3rem rgba(108, 153, 36, 0.2); }
.selection-title { font-family: var(--font-style-kaiser); font-size: 1.8rem; font-weight: bold; color: var(--color-primary-dark); margin-bottom: 1.5rem; display: block; }
.selection-desc { font-size: var(--font-size-base); color: #555; line-height: 1.6; }
.mil-cap-box { flex: 1; }
.mil-stats-box { flex: 2; }
.mil-stats-table { width: 100%; height: 100%; border-collapse: collapse; }
.mil-stats-td { width: 33.33%; text-align: center; }
.mil-icon-sm { height: 2.0rem; width: auto; display: inline-block; }
.mil-icon-md { height: 2.2rem; width: auto; display: inline-block; }
.mil-icon-lg { height: 4.2rem; width: auto; object-fit: contain; display: inline-block; }
.ico.mil-icon-lg { width: 4.2rem; height: 4.2rem; }
.mil-th-main { background: #e9e3d7; }
.mil-th-sub { background: #fdfaf3; font-size: 1.2rem; }
.border-right-dark { border-right: 1px solid #c7b9a6 !important; }
.border-right-light { border-right: 1px solid #e6decb !important; }
.mil-action-td { padding: 0.8rem 0.5rem !important; }
.mil-input-amount { width: 5.5rem !important; text-align: center !important; font-size: 1.6rem !important; }
.mil-btn-max { min-width: 0 !important; padding: 0 0.8rem !important; }
.mil-queue-heading { color: var(--color-primary-dark); border-bottom: 2px solid #e6decb; }
.cursor-default { cursor: default !important; }
.font-11 { font-size: 1.1rem !important; }
.font-12 { font-size: 1.2rem !important; }
.text-uppercase { text-transform: uppercase !important; }
@media screen and (max-width: 1480px) {
    html {
        font-size: 55%;
    }
}
@media screen and (max-width: 1300px) {
    html {
        font-size: 50%;
    }
}
@media screen and (min-width: 2000px) and (min-height: 1000px) {
    html {
        font-size: 75%;
    }
}
@media screen and (min-width: 2400px) and (min-height: 1300px) {
    html {
        font-size: 85%;
    }
}
@media screen and (min-width: 3200px) and (min-height: 1300px) {
    html {
        font-size: 100%;
    }
}
@media screen and (min-width: 3800px) and (min-height: 1800px) {
    html {
        font-size: 125%;
    }
}

@media screen and (max-width: 900px) {
    html { font-size: 62.5%; }
    .homepage-main { width: 100%; margin: 0 auto; padding: 0; }
    .homepage-content { border-radius: 1.6rem 1.6rem 0 0; box-shadow: none; }
    .homepage-header { flex-direction: column; align-items: center; gap: 0.5rem; }
    .homepage-banner { padding: 0.6rem 1.0rem; gap: 1.2rem; flex-wrap: wrap; justify-content: center; letter-spacing: 0.3rem; }
    .homepage-banner img { max-width: 6.0rem; }
    .homepage-banner .ico { width: 6.0rem; height: 6.0rem; }
    .homepage-charakter img { max-width: 4.4rem; }
    .homepage-charakter .ico { width: 4.4rem; height: 4.4rem; }
    .lang-switcher { top: 0.8rem; right: 0.8rem; }
    .content-wrapper { padding: 1.6rem 1.4rem; }
    .registration-container, .league-schedule-container { float: none; width: 100%; margin-right: 0; }
    .features-list { column-count: 1; }
    .content-image-right { max-width: 7.0rem; margin: 0 0 1.0rem 1.5rem; }
    .login form { width: 100%; flex-wrap: wrap; }
    .login input[type="text"], .login input[type="password"] { flex: 1 1 12.0rem; min-width: 0; height: 4.0rem; font-size: 1.6rem; }
    .login input[type="submit"] { flex: 1 1 100%; height: 4.0rem; font-size: 1.6rem; }
    /* Am Handy bekommt das Haekchen eine eigene Zeile ueber dem Knopf: in der
       umbrechenden Zeile neben den Feldern wuerde es sonst als schmaler Rest
       zwischen zwei Eingaben klemmen. Groesseres Kaestchen fuer den Finger. */
    .login-merker { flex: 1 1 100%; font-size: 1.5rem; padding: 0.2rem 0; }
    .login-merker input[type="checkbox"] { width: 2.2rem; height: 2.2rem; }
    .login .messages-box, #login-form .messages-box { position: static; flex: 1 1 100%; width: 100%; margin-top: 0; }
    .registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="password"], .captcha-wrapper input[type="text"] { font-size: 1.6rem; }
}
.mobile-bar, .res-toggle, .nav-backdrop, .col-nav .nav-head, .col-nav .nav-identity, .col-nav .nav-round, .col-nav .nav-reich, .col-nav .nav-fuss { display: none; }
.stat-line.mobile-only { display: none; }
.land-mobile-panel { display: none; }
.manual-mobile-nav { display: none; }

@media screen and (max-width: 900px) {
    body:not(.homepage-body) { background: #fdfaf3; }
    body.nav-open { overflow: hidden; }
    .middle_bar { width: 100%; height: auto; overflow: visible; display: block; padding: 0 0 9.5rem; }
    .col-nav, .col-side { height: auto; overflow: visible; }

    .col-side { display: none; }
    .mainBorder { margin: 0; border-radius: 0; box-shadow: none; }
    .sidebox { width: 100%; margin: 0; }
    .mainbox, .mainbox.wide { width: 100%; max-height: none; margin: 0 0 1.0rem; padding: 0; overflow: visible; }
    .mainbox .title { border-radius: 0; border-left: none; border-right: none; }
    .mainbox .content { overflow: visible; max-height: none; padding: 0.8rem !important; border-left: none; border-right: none; border-bottom: none; }
    .mainbox .content:has(thead th) { padding-top: 0.8rem !important; }
    .mainbox .content:has(thead th)::before { display: none; }
    .mainbox:last-child { margin-bottom: 0; }
    .mainbox-scroll-wrapper { overflow: visible; }
    .custom-scrollbar { display: none !important; }
    .top_bar { position: sticky; top: 0; z-index: 1500; height: auto; background: #e9e3d7; border-bottom: 2px solid #a69477; box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.3); }
    .top_bar_content { width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 0.8rem 0.6rem; gap: 0.5rem; }

    .top_bar_left { flex: 0 0 auto; margin: 0; height: auto; flex-direction: row; align-items: center; }
    .server_time { display: none; }
    .logo { top: 0; padding: 0.2rem 0.8rem; gap: 0.6rem; }
    .logo img { height: 3.2rem; width: 3.2rem; }
    .logo .ico { height: 3.2rem; width: 3.2rem; }
    .logo_description p:first-child { font-size: 1.9rem; line-height: 1.9rem; letter-spacing: 0.2rem; }
    .logo_description > div > p:first-child { font-size: 1.1rem; letter-spacing: 0.1rem; line-height: 1.1rem; }

    .top_bar_right { flex: 0 0 auto; margin: 0; height: auto; flex-direction: row; align-items: center; }
    .top_bar_actions { height: auto; }
    .theme-switch-label { display: none; }
    .reich_info { display: none; }
    .buttonFramed { width: 3.0rem; height: 3.0rem; }
    .buttonFramed > img { height: 2.0rem; width: 2.0rem; }
    .buttonFramed > .ico { height: 2.0rem; width: 2.0rem; }
    .flagBtn > svg { width: 2.0rem; height: 2.0rem; }
    .top_bar_center { order: 3; flex: 1 1 100%; margin: 0; display: flex; align-items: stretch; background: transparent; box-shadow: none; border-radius: 0; }
    .ressource_box { flex: 1; display: flex; flex-wrap: wrap; grid-template-columns: none; border: 1px solid #c7b9a6; border-radius: 0.4rem; overflow: hidden; background: #e9e3d7; }
    .ressource { display: none; height: 3.4rem; flex: 1 1 20%; min-width: 6.6rem; justify-content: center; gap: 0.5rem; border-left: none; border-top: 1px solid #f4f3f0; }
    .ressource > span { font-size: 1.3rem; }
    .ressource > img { height: 1.9rem; }
    .ressource > .ico { height: 1.9rem; width: 1.9rem; }
    .ressource > :first-child { margin-left: 0; }
    .ressource > :last-child { margin-right: 0; }
    .ressource.res-fav { display: flex; }
    .ressource_box.expanded .ressource { display: flex; }

    .res-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 3.6rem; margin-left: 0.5rem; border: 1px solid #c7b9a6; border-radius: 0.4rem; background: #e9e3d7; color: #73594d; font-size: 1.5rem; cursor: pointer; }
    .res-tt { display: none !important; }
    .res-toggle .arr { transition: transform 0.25s; display: inline-block; }
    .res-toggle.open .arr { transform: rotate(180deg); }
    /* DAS MENUE AM HANDY — Kopf, Karten, Fuss.
       Kein Scroll-Kasten mehr, sondern eine SPALTE aus drei Teilen: Kopf und
       Fuss so hoch wie ihr Inhalt, die Karten dazwischen bekommen den ganzen
       Rest. Wie viel das ist, weiss erst der Browser — mobile_layout.js misst
       es und rechnet daraus Spaltenzahl und Kartenbreite aus.
       Der Sinn: alle Menuepunkte auf EINEM Schirm. Frueher lief die Liste
       unten aus dem Bild heraus, und auf schmalen Geraeten fanden Spieler die
       letzten Punkte gar nicht. */
    .col-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 2600; transform: translateX(-105%); transition: transform 0.28s ease; background: #efe3ca; box-shadow: 0.5rem 0 1.5rem rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden; }
    body.nav-open .col-nav { transform: translateX(0); }
    .col-nav .mainBorder { margin: 0; border-radius: 0; box-shadow: none; background: transparent; }
    /* flex-basis 0 statt auto: nur so ist die Hoehe fuer das Raster darin
       eine FESTE Zahl — mit "auto" behandelt der Browser 1fr wie auto, und
       die Karten blieben so flach wie ihr Inhalt statt den Platz zu fuellen. */
    .col-nav .sidebox { margin: 0; width: 100%; flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }

    /* Die Karten. Die Spaltenzahl steht NICHT hier — sie kommt aus dem Skript
       (60 Untereinheiten, eine Karte nimmt 60/Spalten davon). Ohne Skript
       bleibt es ein brauchbares Vierspaltenraster. */
    /* KEIN Spaltenabstand: das Raster hat sechzig Spalten, und ein Abstand
       zwischen ihnen waere neunundfuenfzig Mal da — er frisst die ganze
       Breite. Die Luft zwischen den Karten kommt deshalb aus ihrem eigenen
       Seitenrand, der Aussenrand aus dem Innenabstand hier. */
    .col-nav .navigation { flex: 1 1 0%; min-height: 0; display: grid;
                           grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
                           column-gap: 0; row-gap: 0.5rem;
                           padding: 0.6rem calc(0.35rem + env(safe-area-inset-right, 0px)) 0.8rem calc(0.35rem + env(safe-area-inset-left, 0px));
                           align-content: stretch;
                           /* Muss sein: die Spaltenfassung setzt align-items auf
                              center, und zentrierte Karten fuellen ihre Zeile nicht
                              aus — sie blieben so flach wie ihr Inhalt. */
                           align-items: stretch; justify-items: stretch; }
    .col-nav .navigation.nav-scrollt { overflow-y: auto; grid-auto-rows: minmax(5.2rem, auto); }
    .col-nav .navigation .hr { display: none; }

    /* Jeder Punkt ist eine Karte: eigener Grund, eigener Rand, leicht
       erhaben — damit man sieht, wo man hindrueckt. */
    /* width:auto hebt die 100% aus der Spaltenfassung auf. Mit ihnen war die
       Karte so breit wie ihre Rasterzelle UND trug den Seitenrand zusaetzlich
       — sie ragte darueber hinaus, und waagerecht war deshalb kein Abstand zu
       sehen, obwohl einer gesetzt war. */
    .col-nav .navigation > a { flex-direction: column; justify-content: center; align-items: center;
                               gap: 0.4rem; padding: 0.4rem 0.3rem; position: relative; min-width: 0;
                               width: auto; margin: 0 0.25rem;
                               background: #faf3e2; border: 1px solid #c7b9a6; border-radius: 0.8rem;
                               box-shadow: inset 0 0.1rem 0 #fffaf0, 0 0.1rem 0.2rem rgba(70,52,26,0.14); }
    .col-nav .navigation > a:active { background: #f1e8d2; box-shadow: inset 0 0.1rem 0.3rem rgba(70,52,26,0.22); }
    /* Bild- und Schriftgroesse haengen an der Kartenhoehe, die erst beim
       Rechnen feststeht (mobile_layout.js setzt die beiden Werte). Auf einem
       kleinen Schirm mit vielen Punkten werden die Karten flach — dann muss
       auch das Bild kleiner werden, sonst draengt es die Beschriftung hinaus. */
    .col-nav .navigation > a > img { width: var(--kachel-bild, 2.6rem); padding: 0; }
    .col-nav .navigation > a > .ico { width: var(--kachel-bild, 2.6rem); height: var(--kachel-bild, 2.6rem); padding: 0; }
    .col-nav .navigation > a > span { height: auto; font-size: var(--kachel-schrift, 1.15rem); text-align: center;
                                      line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
    .col-nav .nav-badge { position: absolute; top: 0.3rem; right: 0.3rem; margin: 0 !important; }
    .nav-backdrop { display: none !important; }
    /* EINE Zeile fuer den ganzen Kopf: Logo links, Wappen und Name daneben,
       das Kreuz rechts. Zwei Zeilen kosteten hier vierzig Pixel, die den
       Karten fehlten — und zu sagen hat der Kopf nicht so viel. */
    /* ==================================================================
       DER SICHERE BEREICH AM IPHONE  (12.09.2026)

       Wer die Seite ueber "Zum Home-Bildschirm" ablegt, bekommt am iPhone
       kein Safari-Fenster mehr, sondern eine App ohne Browserleisten. Die
       Seite fuellt dann den GANZEN Schirm, und das heisst: die Statusleiste
       mit Uhr und Batterie (auf neueren Geraeten die Dynamic Island) liegt
       UEBER den obersten Bildpunkten der Seite. Weil im Kopf der Vorlage
       viewport-fit=cover steht, raeumt iOS diesen Platz nicht von selbst
       frei, es meldet ihn nur als env(safe-area-inset-top).

       GEMESSEN (iPhone-Mass 393x852, Statusleiste 59 Punkte, ohne die
       Zuschlaege hier):
         Vorratsleiste      41 Punkte hoch, zu 100 % verdeckt
         Menuekopf          44 Punkte hoch, zu 100 % verdeckt, und mit ihm
                            das Schliessen-Kreuz, Sprache und Tag/Nacht
         erste Kachelzeile   9 Punkte angeschnitten
       Was unter der Statusleiste liegt, nimmt auch keinen Tipp mehr an:
       genau die Meldung "man sieht nichts und kann nichts anklicken".

       Unten war das nie ein Problem, Fussleiste und Zug-Leiste rechnen den
       Home-Indikator seit jeher mit. Quer liegt die Kerbe links oder
       rechts, deshalb sind diese beiden Seiten hier ebenfalls dabei.

       IN SAFARI SIND ALLE VIER WERTE NULL, dort aendert das hier also gar
       nichts. Das ist der Grund, warum es so lange niemand bemerkt hat:
       die Browserleiste deckt den Platz selbst ab. Die Regeln stehen
       bewusst als calc() in den Vorgaben und nicht als eigener Block, damit
       niemand sie beim naechsten Umbau uebersieht. Der zweite Wert in
       env(...) ist der Rueckfall fuer Browser ohne sichere Bereiche. */
    .col-nav .nav-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.8rem; background: #e9e3d7; border-bottom: 2px solid #c7b9a6;
                         padding: calc(0.4rem + env(safe-area-inset-top, 0px)) calc(0.8rem + env(safe-area-inset-right, 0px)) 0.4rem calc(0.8rem + env(safe-area-inset-left, 0px)); }
    /* Drei Felder statt einer Flex-Reihe: die beiden aeusseren sind gleich
       breit (1fr), also sitzt das mittlere WIRKLICH in der Mitte der Zeile —
       nicht bloss mittig zwischen Logo und Kreuz, die ja verschieden breit
       sind. Das mittlere Feld darf schrumpfen (minmax mit 0), damit ein
       langer Name sich kuerzt, statt die aeusseren zu verdraengen. */
    .col-nav .nav-topline { display: grid; width: 100%; grid-template-columns: 1fr minmax(0, auto) 1fr;
                            align-items: center; gap: 0.8rem; min-height: 3.4rem; }
    .col-nav .nav-schliessen { justify-self: end;
                               width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center;
                               background: #e6d9bd; border: 1px solid #b6a17e; border-radius: 50%;
                               color: #5e463a; font-size: 2.4rem; line-height: 1; cursor: pointer;
                               box-shadow: inset 0 0.1rem 0 #f7efdb; }
    .col-nav .nav-schliessen:active { background: #d9cbab; }
    .col-nav .nav-identity { justify-self: center; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.6rem; padding: 0; background: none; border-bottom: none; }
    .col-nav .nav-identity .sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Die Punktzahl gehoert in die Seitenleiste, nicht in den Menuekopf —
       hier kostet sie nur die Zeile, die den Karten fehlt. */
    .col-nav .nav-identity .sb-points { display: none; }
    .col-nav .nav-identity .sb-crest img { width: 2.8rem; }
    .col-nav .nav-identity .sb-crest .ico { width: 2.8rem; height: 2.8rem; }
    .col-nav .nav-identity .sb-name { font-size: 1.4rem; }
    .col-nav .nav-identity .sb-points { font-size: 1.3rem; gap: 0.4rem; }
    .col-nav .nav-identity .sb-points img { width: 1.4rem; height: 1.4rem; }
    .col-nav .nav-identity .sb-points .ico { width: 1.4rem; height: 1.4rem; }
    .col-nav .nav-round { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 0.8rem; margin: 0; padding: 0; }
    .col-nav .nav-round .sb-round-head { font-size: 1.2rem; gap: 0.3rem; }
    .col-nav .nav-round .sb-round-head img { width: 1.4rem; height: 1.4rem; }
    .col-nav .nav-round .sb-round-head .ico { width: 1.4rem; height: 1.4rem; }
    .col-nav .nav-round .sb-round-span { font-size: 1.2rem; }
    .col-nav .nav-round .sb-round-next { font-size: 1.2rem; width: auto; text-align: center; }
    .col-nav .nav-reich { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 1.2rem; min-width: 0; top: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
    .col-nav .nav-reich .reich_row { grid-template-columns: 1.4rem auto auto; gap: 0.4rem; font-size: 1.2rem; line-height: 1.4rem; }
    .col-nav .nav-reich .reich_row img { height: 1.4rem; width: 1.4rem; }
    .col-nav .nav-reich .reich_row .ico { height: 1.4rem; width: 1.4rem; }

    /* DIE FUSSLEISTE. Alles, was man selten braucht und nie sucht: Runde,
       Reichszahlen, Sprache, Tag/Nacht, Fassungsnummer, die Stimme. Oben
       kostete das drei Zeilen, die den Menuepunkten fehlten. */
    .col-nav .nav-fuss { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
                         gap: 0.4rem; padding: 0.6rem calc(0.8rem + env(safe-area-inset-right, 0px)) calc(0.8rem + env(safe-area-inset-bottom, 0px)) calc(0.8rem + env(safe-area-inset-left, 0px));
                         background: #e9e3d7; border-top: 2px solid #c7b9a6; }
    .col-nav .nav-fuss .nav-round,
    .col-nav .nav-fuss .nav-reich { width: 100%; }
    .col-nav .nav-einstellungen { display: flex; align-items: center; justify-content: center; gap: 0.8rem;
                                  width: 100%; padding-top: 0.4rem; border-top: 1px solid #d5c9b5; }
    .col-nav .nav-einstellungen .version-badge { position: static; margin: 0; }
    .col-nav .nav-fuss .nav-vote { padding: 0.2rem 0 0; }
    .col-nav .nav-fuss .nav-vote-text { font-size: 1.2rem; }
    .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; display: flex; align-items: center; gap: 0.8rem;
                  padding: 0.7rem calc(1.0rem + env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) calc(1.0rem + env(safe-area-inset-left, 0px)); background: linear-gradient(#6b5847, #57463a); border-top: 2px solid #332a15; box-shadow: 0 -0.3rem 1.0rem rgba(0,0,0,0.35); }
    .mb-menu { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; background: none; border: none; color: #e9e3d7; font-size: 1.1rem; font-weight: bold; cursor: pointer; padding: 0.2rem 0.6rem; font-family: var(--font-style-normal); }
    .mb-burger { font-size: 2.0rem; line-height: 2.2rem; }
    .mb-turninfo { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; color: #e9e3d7; font-family: var(--font-style-kaiser); margin-right: auto; }
    .mb-count { display: flex; align-items: center; gap: 0.4rem; font-size: 1.5rem; font-weight: bold; }
    .mb-count img { height: 1.6rem; }
    .mb-count .ico { height: 1.6rem; width: 1.6rem; }
    .mb-timer { font-size: 1.2rem; color: #cbbfa8; }
    .mb-full { font-size: 1rem; color: #cbbfa8; white-space: nowrap; }
    .mb-full:empty { display: none; }
    .mb-form { display: flex; align-items: center; gap: 0.6rem; }
    .mb-select { height: 4.4rem; width: 5.4rem; text-align: center; background: #efe6cd; color: #4a3720; border: 1px solid #332a15; border-radius: 0.5rem; font-family: var(--font-style-kaiser); font-size: 1.7rem; font-weight: bold; cursor: pointer; }
    .mb-endbtn { height: 4.4rem; padding: 0 1.8rem; background: #6c7a2e; color: #f4ead2; border: 1px solid #2b3709; border-radius: 0.5rem; font-family: var(--font-style-kaiser); font-size: 1.7rem; font-weight: bold; box-shadow: inset 0 -0.2rem 0 rgba(0,0,0,0.2); cursor: pointer; white-space: nowrap; }
    .mb-endbtn:active { box-shadow: inset 0 0.2rem 0.3rem rgba(0,0,0,0.3); }
    table.turn-summary-table th, table.turn-summary-table td { padding: 0.7rem 0.3rem; font-size: 1.3rem; }
    .col-value { width: auto; font-size: 1.4rem; padding-right: 0.5rem !important; }
    .col-icon { width: 3.0rem; }
    .icon-inline { height: 2.0rem; width: 2.0rem; margin-right: 0.3rem; }
    .land-desc { margin-left: 2.4rem; }
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .title-header { flex-wrap: wrap; gap: 0.5rem; }
    .land-table th:last-child, .land-table td:last-child { display: none; }
    .land-mobile-panel { display: flex; }
    .buildings-table th:nth-child(n+4), .buildings-table td:nth-child(n+4) { display: none; }
    .stat-line.mobile-only { display: flex; }
    .buildings-table .land-title { white-space: normal; }
    .details-box { flex-direction: column; align-items: stretch; gap: 1.2rem; margin: 0; padding: 1.0rem; }
    .building-detail-img { width: 8.0rem; height: 8.0rem; }
    .details-desc { border-right: none; padding-right: 0; }
    .details-stats { width: 100%; }
    .stat-value { flex-wrap: wrap; justify-content: flex-end; }
    .summary-box { flex-direction: column; gap: 0; padding: 0.2rem 1.0rem; margin-top: 0.8rem; }
    .summary-item { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 0.5rem 0; border-bottom: 1px dashed #d5c9b5; font-size: 1.3rem; }
    .summary-item:last-child { border-bottom: none; }
    .summary-val { margin-top: 0; font-size: 1.1em; }
    .action-panel { flex-wrap: wrap; padding: 0.8rem; gap: 0.6rem; margin-top: 0.8rem; }
    .action-panel .build-select { flex: 1 1 100%; height: 3.4rem; padding-top: 0; padding-bottom: 0; }
    .action-panel .form-item { height: 3.2rem; min-height: 3.2rem; line-height: 3.0rem; }
    .action-panel .amount-input { flex: 1; }
    .action-panel .max-btn, .action-panel .action-btn { font-size: 1.4rem; padding-top: 0; padding-bottom: 0; }
    .content .mil-summary { grid-template-columns: 1fr; }
    .content .mil-cards { grid-template-columns: 1fr; }
    .content .mil-tiles { padding: 0.5rem 0; }
    .special-grid { grid-template-columns: 1fr; }
    .faction-grid { grid-template-columns: repeat(2, 1fr); gap: 1.0rem; }
    .middle_bar.faction-select-layout { margin: 0; min-height: 100vh; padding-bottom: 2.0rem; }
    .faction-select-layout .mainbox { margin-bottom: 0; }
    .faction-card { padding: 1.0rem 0.8rem; }
    .faction-card img.faction-crest { max-width: 6.0rem; }
    .faction-card .ico.faction-crest { width: 6.0rem; }
    /* Am Handy passen "Volk waehlen" und "Ich waehle spaeter" nicht in eine
       Zeile, ohne dass beide Beschriftungen umbrechen. */
    .faction-actions { grid-template-columns: 1fr; gap: 1.0rem; }
    .faction-actions .submit-btn { margin-top: 0; }
    .faction-actions .submit-btn:first-child { margin-top: 2.0rem; }
    .faction-base { padding: 0.5rem 0.6rem; margin-top: 0.7rem; }
    .offer-input-row { grid-template-columns: 1fr; gap: 1.2rem; }
    .res-nav { flex-wrap: wrap; }
    .tab-header-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
    .tab-header-container .tab-btn-inline { margin: 0; }
    .content .sim-grid { grid-template-columns: 1fr; gap: 1.0rem; }
    .content .sim-col input { font-size: 1.6rem; height: 3.2rem; }
    .content .sim-points { flex-direction: column; }
    .amount-input, .build-select, .form-item, .reply-input, .sb-select { font-size: 1.6rem; }
    .form-item { min-height: 3.6rem; }
    .action-group { flex-wrap: wrap; }
    body.manual-body { overflow: visible; height: auto; display: block; }
    .manual-layout { display: block; width: 100%; max-width: 100%; height: auto; }
    .manual-sidebar-wrapper { display: none; }
    .manual-mainbox-wrapper { margin: 0 !important; display: block; height: auto; max-height: none !important; }
    .mainbox .content.manual-content { padding: 1.4rem 1.6rem 2.0rem !important; overflow: visible; max-height: none; border-radius: 0; }
    /* Auch diese Leiste klebt oben am Schirm und braucht deshalb den Platz
       unter der Statusleiste, sonst laesst sich das Kapitelfeld am iPhone
       vom Startbildschirm aus nicht antippen (siehe "DER SICHERE BEREICH AM
       IPHONE" weiter oben). Die Anleitung hat ihr eigenes Grundgeruest, die
       Regeln fuer das Spielgeruest greifen hier also nicht. */
    .manual-mobile-nav { display: flex; align-items: center; gap: 0.8rem; position: sticky; top: 0; z-index: 1500; background: #e9e3d7; border-bottom: 2px solid #a69477; box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.25);
                         padding: calc(0.7rem + env(safe-area-inset-top, 0px)) calc(0.8rem + env(safe-area-inset-right, 0px)) 0.7rem calc(0.8rem + env(safe-area-inset-left, 0px)); }
    .manual-mobile-nav img { height: 2.4rem; width: 2.4rem; }
    .manual-mobile-nav .ico { height: 2.4rem; width: 2.4rem; }
    .manual-mobile-nav select { flex: 1; height: 3.8rem; font-size: 1.6rem; background: #efe6cd; color: #4a3720; border: 1px solid #b6a17e; border-radius: 0.4rem; padding: 0 1.0rem; font-family: var(--font-style-kaiser); cursor: pointer; }
    /* Waechst die Leiste um die Statusleiste, muss der Sprung zu einem
       Kapitel um denselben Betrag tiefer halten. */
    .manual-section { scroll-margin-top: calc(7.0rem + env(safe-area-inset-top, 0px)); }
    /* ANLEITUNG AUF DEM HANDY: jede Tabelle bekommt ihren eigenen Schieber.
       Hier stand bis zum 30.08.2026 '.manual-content .nerd-table'. Die Klasse
       gibt es im Markup seit einer Umbenennung nicht mehr — die Tabellen der
       Anleitung heissen .daten-tabelle. Die Regel lief also ins Leere, und
       weil die Anleitung ihr eigenes Grundgeruest hat und mobile_layout.js
       gar nicht laedt, gab es fuer sie auch keinen gemessenen Schiebekasten:
       sechs von sechzehn Tabellen waren breiter als der Schirm und haben die
       GANZE Seite mitgezogen. Nachgemessen auf der Liveseite bei 375 px:
       Dokumentbreite 706 statt 375, also 331 px, die sich seitlich schieben
       liessen; mit dieser Regel exakt 375.
       DESHALB JETZT 'table' UND KEINE KLASSE: an genau einer Umbenennung ist
       die Regel schon einmal gestorben, und still — eine tote Regel meldet
       sich nicht. Ein Elementname kann nicht umbenannt werden.
       WICHTIG, falls jemand das auf die Spielseiten ausweiten will: dort
       macht mobile_layout.js dasselbe, aber NUR fuer wirklich zu breite
       Tabellen — und das mit gutem Grund. Ein Schiebekasten ist fuer den
       Browser ein Scrollbereich, und daran zerbricht die klebende Kopfzeile
       (position: sticky). In der Anleitung gibt es keine klebenden Koepfe,
       hier ist die pauschale Regel deshalb unschaedlich. */
    .manual-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .manual-faction-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 380px) {
    .mobile-bar { gap: 0.5rem;
                  padding-left:  calc(0.6rem + env(safe-area-inset-left, 0px));
                  padding-right: calc(0.6rem + env(safe-area-inset-right, 0px)); }
    .mb-menu { padding: 0.2rem 0.3rem; }
    .mb-menu-label { display: none; }
    .mb-count { font-size: 1.3rem; }
    .mb-timer { font-size: 1.1rem; }
    .mb-select { width: 4.6rem; height: 4.0rem; font-size: 1.5rem; }
    .mb-endbtn { padding: 0 1.1rem; height: 4.0rem; font-size: 1.5rem; }
}
.tut-auflage { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.tut-maske { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; }
#tutDunkel { transition: fill-opacity 0.18s ease; }
.tut-rahmen { position: fixed; border: 0.3rem solid #e8c46a; border-radius: 0.4rem;
              box-shadow: 0 0 0 0.3rem rgba(232, 196, 106, 0.35), 0 0 1.2rem rgba(232, 196, 106, 0.55);
              pointer-events: none; animation: tut-puls 1.6s ease-in-out infinite; }
.tut-rahmen-stups { animation: tut-stups 0.42s ease-in-out 2; }
@keyframes tut-stups {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-0.5rem); }
    75%      { transform: translateX(0.5rem); }
}
@keyframes tut-puls {
    0%, 100% { box-shadow: 0 0 0 0.3rem rgba(232, 196, 106, 0.35), 0 0 1.2rem rgba(232, 196, 106, 0.55); }
    50%      { box-shadow: 0 0 0 0.6rem rgba(232, 196, 106, 0.15), 0 0 2.0rem rgba(232, 196, 106, 0.85); }
}
.tut-finger { position: fixed; width: 4.4rem; height: 4.4rem; z-index: 3002; pointer-events: none;
              filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.5)); }
.tut-finger svg { width: 100%; height: 100%; display: block; }
.tut-finger-oben   { animation: tut-tippen-hoch 1.2s ease-in-out infinite; }
.tut-finger-unten  { transform: rotate(180deg); animation: tut-tippen-runter 1.2s ease-in-out infinite; }
.tut-finger-links  { transform: rotate(-90deg); animation: tut-tippen-links 1.2s ease-in-out infinite; }
.tut-finger-rechts { transform: rotate(90deg);  animation: tut-tippen-rechts 1.2s ease-in-out infinite; }
@keyframes tut-tippen-hoch   { 0%, 100% { margin-top: 0; }  50% { margin-top: -0.6rem; } }
@keyframes tut-tippen-runter { 0%, 100% { margin-top: 0; }  50% { margin-top: 0.6rem; } }
@keyframes tut-tippen-links  { 0%, 100% { margin-left: 0; } 50% { margin-left: -0.6rem; } }
@keyframes tut-tippen-rechts { 0%, 100% { margin-left: 0; } 50% { margin-left: 0.6rem; } }

.tut-blase { position: fixed; z-index: 3003; width: 34rem; max-width: calc(100vw - 1.6rem);
             background: #fdfaf3; border: 1px solid #a9926f; border-radius: 0.4rem;
             box-shadow: 0 0.5rem 1.6rem rgba(30, 22, 10, 0.5); padding: 1.0rem 1.2rem 1.2rem;
             font-family: var(--font-style-normal); color: #5e463a; }
.kw-ds-bubble { display: none; position: fixed; z-index: 4000; max-width: 32rem;
                background: #fdfaf3; border: 1px solid #a9926f; border-radius: 0.3rem;
                box-shadow: 0 0.3rem 0.8rem rgba(60, 45, 25, 0.35);
                padding: 0.7rem 0.9rem;
                font-family: var(--font-style-normal); font-size: 1.25rem; line-height: 1.5;
                color: #5e463a; }
.kw-ds-bubble.open { display: block; }
.kw-defschutz, .kw-help { cursor: pointer; }
.tut-blase-volk { width: 42rem; padding: 0; overflow: hidden;
                  border: 0.2rem solid #c9a227;
                  box-shadow: 0 0.6rem 2.2rem rgba(30, 22, 10, 0.55),
                              0 0 0 0.4rem rgba(201, 162, 39, 0.18); }
.tut-blase-volk .tut-kopf,
.tut-blase-volk .tut-titel,
.tut-blase-volk .tut-text,
.tut-blase-volk .tut-weiter-form { padding-left: 1.4rem; padding-right: 1.4rem; }
.tut-blase-volk .tut-kopf { margin-top: 0.8rem; }
.tut-blase-volk .tut-weiter-form { padding-bottom: 1.2rem; }

.tut-volk-kopf { display: flex; align-items: center; gap: 1.4rem;
                 padding: 1.4rem; background: linear-gradient(180deg, #f3e7c6 0%, #e8d7ac 100%);
                 border-bottom: 0.1rem solid #c9a227; }
.tut-volk-wappen { width: 6.4rem; height: 6.4rem; object-fit: contain;
                   filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.35)); }
.tut-volk-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tut-volk-ueber { font-size: 1.15rem; letter-spacing: 0.12rem; text-transform: uppercase; color: #8a7a5f; }
.tut-volk-name { font-family: var(--font-style-kaiser); font-size: 2.6rem; line-height: 1.1; color: #4a3720; }
.tut-volk-bonus { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem;
                  align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 0.3rem;
                  background: #fdfaf3; border: 1px solid #c9a227;
                  font-size: 1.3rem; color: #5e463a; }
.tut-volk-bonus img { height: 1.8rem; width: 1.8rem; }
.tut-volk-bonus .ico { height: 1.8rem; width: 1.8rem; }
.tut-volk-bonus b { color: #6c7a2e; font-size: 1.5rem; }

.tut-blase-mitte { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tut-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.tut-zaehler { font-size: 1.15rem; letter-spacing: 0.05rem; color: #8a7a5f; text-transform: uppercase; margin-right: auto; }
.tut-klapp { display: none; align-items: center; justify-content: center; width: 3.2rem; height: 2.6rem;
             background: none; border: 1px solid #cbb98f; border-radius: 0.3rem; color: #8a7a5f;
             font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; }
.tut-abbruch { margin: 0; }
.tut-x { background: none; border: none; font-size: 2.2rem; line-height: 1; color: #a9926f; cursor: pointer; padding: 0 0.2rem; }
.tut-x:hover { color: #a83232; }
.tut-titel { font-family: var(--font-style-kaiser); font-size: 1.9rem; color: #4a3720; margin: 0 0 0.5rem; }
.tut-text { font-size: 1.35rem; line-height: 1.55; margin: 0; }
.tut-weiter-form { margin: 1.0rem 0 0; text-align: right; }
.tut-btn { font-family: var(--font-style-kaiser); font-size: 1.5rem; color: #4a3720; background: #efe6cd;
           border: 1px solid #b6a17e; border-radius: 0.3rem; padding: 0.5rem 1.6rem; cursor: pointer; }
.tut-btn:hover { background: #e6d9bd; }
.tut-btn-ja { background: #6c7a2e; border-color: #4c561d; color: #f4ead2; }
.tut-btn-ja:hover { background: #7b8a36; }
.tut-frage-huelle { position: fixed; inset: 0; z-index: 3100; background: rgba(30, 22, 10, 0.7);
                    display: flex; align-items: center; justify-content: center; padding: 1.6rem; }
.tut-frage { width: 46rem; max-width: 100%; background: #fdfaf3; border: 1px solid #a9926f;
             border-radius: 0.5rem; box-shadow: 0 0.6rem 2.0rem rgba(0, 0, 0, 0.5); padding: 2.0rem;
             font-family: var(--font-style-normal); color: #5e463a; }
.tut-frage h2 { font-family: var(--font-style-kaiser); font-size: 2.4rem; color: #4a3720; margin: 0 0 0.8rem; }
.tut-frage p { font-size: 1.4rem; line-height: 1.6; margin: 0 0 1.6rem; }
.tut-frage-knoepfe { display: flex; gap: 0.8rem; justify-content: flex-end; flex-wrap: wrap; }
.tut-frage-knoepfe form { margin: 0; }
@media screen and (max-width: 900px) {
    .tut-blase { left: 0 !important; right: 0; top: auto !important; bottom: var(--tut-leiste, 0px);
                 width: 100%; max-width: 100%; border-radius: 0.5rem 0.5rem 0 0;
                 padding: 0.7rem 1.0rem 0.9rem; transform: none !important;
                 box-shadow: 0 -0.4rem 1.4rem rgba(30, 22, 10, 0.45); }
    .tut-blase.tut-blase-oben { top: 0 !important; bottom: auto; border-radius: 0 0 0.5rem 0.5rem;
                 box-shadow: 0 0.4rem 1.4rem rgba(30, 22, 10, 0.45); }
    .tut-blase-mitte { top: auto !important; }
    .tut-blase-volk { width: auto; }
    .tut-text { max-height: 20vh; overflow-y: auto; font-size: 1.3rem; }
    .tut-titel { font-size: 1.7rem; margin-bottom: 0.3rem; }
    .tut-weiter-form { margin-top: 0.6rem; }
    .tut-klapp { display: inline-flex; }
    .tut-blase.tut-zu .tut-text,
    .tut-blase.tut-zu .tut-volk-kopf { display: none; }
    .tut-volk-wappen { width: 4.8rem; height: 4.8rem; }
    .tut-volk-name { font-size: 2.1rem; }
    .tut-finger { width: 3.6rem; height: 3.6rem; }
}
.tut-text-handy { display: none; }
@media screen and (max-width: 900px) {
    .tut-hat-handy .tut-text-desktop { display: none; }
    .tut-hat-handy .tut-text-handy { display: inline; }
}
.ressource.res-leer.tut-zeigen { display: flex; }
.market_ticker.tut-zeigen { display: flex; }
@media screen and (max-width: 900px) {
    .market_ticker.tut-zeigen { display: grid; }
}
@media screen and (max-width: 900px) {
    html { height: 100%; }
    /* DIE LIGASEITE IST AUSGENOMMEN (13.09.2026). Dieser Block macht den
       Koerper zum Rahmen in Fensterhoehe und gibt das Scrollen an
       > .middle_bar weiter — das ist die Spiel-Oberflaeche mit ihren beiden
       festen Leisten. Die oeffentliche Ligaseite (body.lg-public) hat aber
       gar keine .middle_bar: dort blieb der Koerper auf overflow:hidden
       stehen, und NICHTS darin konnte scrollen. Die Seite war am Handy
       eingefroren, sichtbar war nur der oberste Bildschirm.
       WER HIER EINE WEITERE EIGENSTAENDIGE SEITE ANLEGT (eigenes <body>,
       keine .middle_bar), muss sie ebenfalls ausnehmen. */
    body:not(.homepage-body):not(.manual-body):not(.lg-public) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    body:not(.homepage-body):not(.manual-body) > .top_bar {
        position: static;
        flex: 0 0 auto;
        z-index: 1500;
    }
    body:not(.homepage-body):not(.manual-body) > .middle_bar {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 0 0.8rem;
    }
    body:not(.homepage-body):not(.manual-body) > .mobile-bar {
        position: static;
        flex: 0 0 auto;
    }
    body.nav-open:not(.homepage-body):not(.manual-body) > .top_bar,
    body.nav-open:not(.homepage-body):not(.manual-body) > .mobile-bar { display: none; }
    body.nav-open:not(.homepage-body):not(.manual-body) > .middle_bar { overflow: hidden; }
    /* Der Rahmen ist genau so hoch wie das SICHTBARE Fenster — und sitzt bei
       stehender Tastatur um --kw-vvt tiefer. Beides setzt assets/gameshell/js/viewport.js;
       das Warum steht ausfuehrlich im Kopf jener Datei. Kurz: iPhone-Safari
       schiebt den sichtbaren Ausschnitt nach unten, um Platz fuer die Tastatur
       zu machen, der Rahmen bliebe sonst zur Haelfte ausserhalb des Schirms.
       RELATIV verschoben und nicht fest positioniert: sonst wuerde der Koerper
       zum Bezugsrahmen jedes position:fixed darin (Menue, Tutorial-Maske,
       Kursfenster) und die saessen alle falsch.
       ACHTUNG SPEZIFITAET (14.09.2026): diese Regel MUSS dieselbe :not()-Kette
       tragen wie die Rahmenregel oben. Als dort am 13.09. :not(.lg-public)
       dazukam, wog "height: 100%" ploetzlich mehr als diese Zeile — der
       Rahmen blieb schirmhoch, schrumpfte bei der Tastatur nicht mehr mit,
       und am Handy stand die Tastatur ueber dem Eingabefeld ("es scrollt
       nicht mehr weiter"). Wer die Kette oben erweitert, erweitert sie hier. */
    body:not(.homepage-body):not(.manual-body):not(.lg-public) { height: 100dvh; height: var(--kw-vvh, 100dvh); position: relative; top: var(--kw-vvt, 0px); }

    /* Steht die Tastatur, bleibt vom Schirm kaum ein Drittel uebrig. Die
       Vorratsleiste (Waren + Kursleiste) ist der groesste Block darauf und
       tritt so lange beiseite — sonst sieht man von dem, was man tippt, so
       gut wie nichts. Sobald die Tastatur zugeht, ist sie wieder da. */
    body.kw-tastatur:not(.homepage-body):not(.manual-body) > .top_bar { display: none; }
    /* Ist sie weg, beginnt der Rollkasten selbst an der Oberkante und
       braucht den Platz unter der Statusleiste nun seinerseits. */
    body.kw-tastatur:not(.homepage-body):not(.manual-body) > .middle_bar { padding-top: env(safe-area-inset-top, 0px); }
    #colNav { top: 0; bottom: auto; height: 100vh; height: 100dvh; height: var(--kw-vvh, 100dvh); }
    body:not(.homepage-body) > .middle_bar.faction-select-layout { min-height: 0; padding-bottom: 2.0rem; }
    .top_bar_left,
    .top_bar_right { display: none; }
    /* Siehe den Block "DER SICHERE BEREICH AM IPHONE" weiter oben. */
    .top_bar_content { padding: calc(0.4rem + env(safe-area-inset-top, 0px)) calc(0.6rem + env(safe-area-inset-right, 0px)) 0.5rem calc(0.6rem + env(safe-area-inset-left, 0px)); gap: 0; }
    .top_bar_center { order: 0; }
    .col-nav .nav-brand { justify-self: start; display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; padding: 0; }
    .col-nav .nav-brand .logo { position: static; padding: 0; background: none; box-shadow: none; border: none; gap: 0.5rem; }
    .col-nav .nav-brand .logo img { height: 2.6rem; width: 2.6rem; }
    .col-nav .nav-brand .logo .ico { height: 2.6rem; width: 2.6rem; }
    .col-nav .nav-brand .logo_description p:first-child { font-size: 1.5rem; line-height: 1.5rem; letter-spacing: 0.15rem; }
    .col-nav .nav-brand .logo_description > div > p:first-child { font-size: 0.9rem; line-height: 0.9rem; letter-spacing: 0.08rem; }
    .col-nav .nav-actions { display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0; }
    /* Hier ist Platz — die Beschriftung des Schalters darf mit. */
    .col-nav .nav-einstellungen .theme-switch-label { display: inline; font-size: 1.2rem; min-width: 0; }
    .col-nav .nav-actions .theme-switch-label { display: none; }
    .col-nav .nav-actions .buttonFramed { width: 3.0rem; height: 3.0rem; }
    .col-nav .nav-actions .buttonFramed > img { height: 2.0rem; width: 2.0rem; }
    .col-nav .nav-actions .buttonFramed > .ico { height: 2.0rem; width: 2.0rem; }
    .col-nav .nav-actions .flagBtn > svg { width: 2.0rem; height: 2.0rem; }
    .col-main > .mainBorder > .title,
    .col-main > .mainbox > .title { display: none; }
    .col-main > .mainBorder > .title-header:not(:has(button)),
    .col-main > .mainbox > .title-header:not(:has(button)) { display: none !important; }
    .col-main > .mainBorder > .title-header > span:first-child,
    .col-main > .mainbox > .title-header > span:first-child { display: none; }
    .col-main > .mainBorder > .title-header,
    .col-main > .mainbox > .title-header { justify-content: flex-start !important; padding: 0.6rem 0.8rem !important; }
    .ressource { display: flex; flex: 1 1 25%; min-width: 5.6rem; height: 3.0rem; gap: 0.35rem; }
    .ressource.res-leer { display: none; }
    .ressource > span { font-size: 1.2rem; }
    .ressource > img { height: 1.7rem; }
    .ressource > .ico { height: 1.7rem; width: 1.7rem; }
    .ressource_box { border-radius: 0.4rem; }
    .top_bar_center { flex-wrap: wrap; }
    .ressource_box { flex: 1 1 0; min-width: 0; }

    /* VERSORGUNG UNTEREINANDER (Handy).
       Am Rechner steht der Vorrat in Zeile 1 und sein Verbrauch DIREKT
       darunter in Zeile 2 — Korn ueber Korn-Verbrauch, Bier ueber
       Bier-Verbrauch, alles auf einen Blick. Am Handy brach das auseinander:
       dort umbricht die Leiste nach vier Kacheln, und zwischen Vorrat und
       Verbrauch lagen zwei Zeilen.

       Hier steht nur das Raster; WER worin sitzt, rechnet resources.js aus
       (order) — denn welche Kacheln ueberhaupt erscheinen, entscheidet sich
       erst im Browser: was auf 0 steht, wird am schmalen Schirm ausgeblendet.

       ZWOELF Spalten statt vier, und eine Kachel nimmt drei davon. Vier
       Kacheln je Zeile wie bisher — aber 12 laesst sich durch 1, 2, 3 und 4
       teilen, und deshalb kann resources.js eine unvollstaendige letzte Zeile
       glatt auffuellen: bei drei Kacheln je vier Spalten, bei zweien je sechs,
       bei einer alle zwoelf. Keine Luecke, keine halbe Zeile. */
    .ressource_box { display: grid; grid-template-columns: repeat(12, 1fr); }
    .ressource { flex: none; min-width: 0; grid-column: span 3; }

    /* Wird Bier gebraucht, gehoert es in die Leiste — auch und gerade mit
       Bestand 0: leere Faesser sind die Nachricht, nicht ihr Fehlen. Ohne das
       hier bliebe die Kachel als "leer" ausgeblendet, und das Paar risse genau
       dann auf, wenn es am wichtigsten ist. */
    .ressource_box.bier-an .ressource[data-res-key="beer"],
    .ressource_box.bier-an .ressource[data-res-key="beer_use"] { display: flex; }
    .res-toggle { flex: 0 0 3.2rem; margin-left: 0.4rem; align-self: stretch; }
    body.kurse-offen .res-toggle .arr { transform: rotate(180deg); }
    .chat-history { max-height: 24.0rem; }
    .res-info { display: none; flex: 1 1 100%; width: 100%; order: 4; margin-top: 0.4rem;
                background: #faf3e2; border: 1px solid #a9926f; border-radius: 0.4rem;
                box-shadow: inset 0 0 0 1px #e8dcc0; padding: 0.7rem 0.9rem;
                font-size: 1.2rem; font-weight: normal; font-family: var(--font-style-normal);
                color: #4a3720; line-height: 1.45; text-align: left; }
    .res-info.on { display: block; }
    .res-info strong { display: block; font-family: var(--font-style-kaiser); font-size: 1.35rem;
                       color: var(--color-primary-dark); margin-bottom: 0.3rem;
                       border-bottom: 1px solid #e6decb; padding-bottom: 0.3rem; }
    .res-info .res-tt-warn { display: block; margin-top: 0.5rem; padding-top: 0.5rem;
                             border-top: 1px solid #e6decb; color: #a83232; font-weight: bold; }
    .ressource.res-an { background: #f6f1e4; }
}
.ressource .res-plus  { color: #2f7d32 !important; }
.ressource .res-minus { color: #a83232 !important; }
/* Cache-Stempel: asset_v ist die Aenderungszeit DIESER Datei — Seiten-CSS
   unter public/css/pages/ bekommt sonst keine neue URL. 26.08.2026: Sortierung
   der Spielerliste im Adminbereich (admin.css, admin.js, night.css) und der
   Hoehenfix fuer .adm-send (admin.css). Ebenfalls 26.08.2026: mmofacts-
   Stimme im Menue (navigation.css, night.css), danach vote.js nachgebessert.
   26.08.2026 abends: Marktseite — Normalpreis-Zeile mit aufklappbarem
   Kursverlauf (trade.css, night.css neu erzeugt). Das Nachladen ohne
   Seitenwechsel wurde noch am selben Abend wieder verworfen; das Aufleuchten
   neuer Zeilen ist damit ersatzlos entfallen. Danach: Spielerzahl je Volk in
   der Volkskarte (.faction-players, steht hier statt in pages/factions.css,
   weil die Volkswahl gar keine Seiten-CSS laedt).
   28.08.2026: neue Seite Tipps & Tricks (pages/tips.css) und die
   Tippverwaltung im Adminbereich (admin.css), night.css neu erzeugt.
   30.08.2026: Volkswahl aufschiebbar — zweiter Knopf "Ich waehle spaeter"
   (.faction-actions, .submit-btn.secondary, .faction-later-hint hier, weil
   faction_select.html keine Seiten-CSS laedt), Nachwahl auf der Voelkerseite
   (pages/factions.css) und der Strich statt Wappen in der Punkteliste
   (pages/points.css). night.css neu erzeugt. */

/* DIE LANDSEITE GIBT ES NICHT MEHR (03.09.2026): Land wird auf der
   Infrastrukturseite gekauft. Die Regeln dafuer heissen .bld-land-* und
   stehen in pages/buildings.css, wo die Seite auch sonst wohnt. Die alten
   .land-preis-* und .land-ico* sind hier ersatzlos entfallen — sie hatten
   keine Vorlage mehr. .land-title und .land-val BLEIBEN (weiter unten), die
   benutzt die Gebaeudetabelle. */
/* .bld-uebersicht entfiel am 31.08.2026. Die Uebersicht der Gebaeudeseite
   heisst .bld-kennzahlen (pages/buildings.css) und ist seit dem 05.09.2026
   eine kleine Zeile plus drei grosse Kacheln (Arbeitslose, Wohnraum, Land). */

/* Rangliste: Rang, Name und Allianz stehen seit dem 27.08.2026 in EINER
   Spalte. Die Unterzeile traegt Rangtitel und Allianzkuerzel.
   28.08.2026: overflow-wrap ist kein Schoenheitsfehler, sondern der Grund,
   warum die Tabelle auf ein Handy passt. Ein langer Spielername ist EIN Wort;
   ohne Umbrucherlaubnis ist er die Mindestbreite der Spalte, und die Tabelle
   liesse sich nicht mehr schmaler rechnen. Sie bekaeme dann den seitlich
   schiebbaren Kasten aus mobile_layout.js — und mit ihm waere die klebende
   Kopfzeile wieder weg. */
.pts-spieler { display: inline-flex; flex-direction: column; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
.pts-sub { font-size: 1.3rem; color: #7a6a52; display: flex; align-items: center; gap: 0.6rem; }

/* ===================================================================
   WARNUNGEN DES POOL-DAUERAUFTRAGS  (12.09.2026)

   [stated] Pascal: "Die Entnahme soll fehlschlagen duerfen mit einem
   Hinweis der am besten bei 'Letzter Zug' und auf der Uebersichtsseite
   angezeigt wird. Als Warnung!"

   WARUM HIER UND NICHT IN pages/overview.css: dieselbe Vorlage
   (layout/pool_warnung.html) haengt auch in der Seitenleiste, und die
   steht auf JEDER Seite. Ein Stilblatt, das nur die Uebersicht laedt,
   wuerde die Warnung ueberall sonst nackt lassen.

   Die kleine Form (.pool-warn-klein) sitzt in der Ergebnisbox und
   verzichtet auf Rahmen und Ueberschrift: dort ist der Platz schmal,
   und die rote Schrift sagt schon genug.
   =================================================================== */
.pool-warn { background: #fdf3f3; border: 1px solid #a83232; border-left: 4px solid #a83232;
    border-radius: .3rem; padding: 1rem 1.4rem; margin-bottom: 2rem;
    font-size: 1.25rem; line-height: 1.7; color: #6e2222; }
.pool-warn > strong { display: block; color: #a83232; font-family: var(--font-style-kaiser);
    font-size: 1.45rem; margin-bottom: .4rem; }
.pool-warn-zeile { display: block; }
.pool-warn-zuege { color: #8a5a5a; font-size: 0.92em; }

.pool-warn-klein { background: none; border: 0; border-radius: 0; padding: 0.5rem 0 0;
    margin: 0.3rem 0 0; border-top: 1px solid #d8c7a6; font-size: 1.15rem; line-height: 1.5;
    color: #8a2b2b; }
.pool-warn-klein .pool-warn-zeile + .pool-warn-zeile { margin-top: 0.25rem; }

/* VERSIONSMARKE — bitte stehen lassen.

   asset_v (das ?v= hinter JEDER CSS- und JS-Adresse) ist die Aenderungszeit
   DIESER Datei, siehe Core/Application.php. Die .htaccess laesst Browser CSS
   und JS ein Jahr lang cachen, ohne beim Server nachzufragen — wer also eine
   andere Datei unter public/ aendert, muss hier eine Kleinigkeit mitaendern,
   sonst bekommt niemand die Neufassung zu sehen.

   KEINE Reihe aus Gleichheitszeichen in diesen Kommentar: tools/nightcss.php
   haelt solche Kommentare fuer Abschnittsueberschriften und schreibt sie in
   die erzeugte night.css mit hinein.

   Stand: 03.09.2026 (7) — DIPLOMATIE: die Chronik ist ganz raus, die Seite
   zeigt nur noch Urkunden. GEAENDERT WURDE DABEI live.js (die Marke, an der
   es die Seite erkennt, heisst jetzt .dip-seite statt .dip-chronik) — ohne
   diese Zeile hier bliebe die alte Fassung im Browser und der rote Punkt
   leuchtete weiter, waehrend man auf der Seite steht.

   03.09.2026 (6) — DIPLOMATIE: die Ueberschrift "Vertraege im Reich"
   ist weg, die Urkunden stehen direkt unter dem Hinweissatz.

   03.09.2026 (5) — DIPLOMATIE: genau zwei Urkunden nebeneinander ab
   901px, im gewohnten 65rem-Kasten. (Ich hatte dort kurz 'mainbox wide'
   stehen — das schob sich ueber die Seitenleiste und ist zurueckgenommen:
   die Kastenbreite bleibt, wie sie auf allen Seiten ist.)

   03.09.2026 (4) — DIPLOMATIE, zweiter Teil: GEBROCHENE Vertraege
   stehen jetzt als eigener Abschnitt darunter, mit rotem Eckband
   ("Gebrochen"), Namen des Brechers und faelliger Sanktion. Das Eckband ist
   dasselbe Bauteil wie .special-card.built, nur rot statt gruen.

   03.09.2026 (3) — DIPLOMATIE: die Vertragstabelle ist eine Reihe von
   Urkunden auf Pergament geworden, mit Klausel, Sanktion und Siegel
   (pages/diplomacy.css, night.css, neu: images/pergament.webp mit 41 KB
   statt der 2,43 MB des PNG). Geaendert wurden diplomacy.css UND night.css —
   beide haengen an asset_v, das die Aenderungszeit DIESER Datei ist; ohne
   diese Zeile bekaeme niemand das neue Aussehen zu sehen.

   03.09.2026 (2) — ANKREUZKAESTCHEN: der Stern in Zeile 40 nahm
   input[type=checkbox] das Kaestchen weg, es war ueberall unsichtbar
   (Anmeldung, Kampfsimulator). Wird jetzt von Hand gezeichnet, Nachtfarben
   in night.css.

   03.09.2026 — INFRASTRUKTUR: der Landkauf ist von der eigenen Seite
   auf die Gebaeudeseite gewandert, die jetzt "Infrastruktur" heisst. Neu sind
   .bld-land-* in buildings.css und ihre Nachtfarben in night.css; die toten
   .land-preis- und .land-ico- sind hier entfallen. (NIE ein Sternchen
   direkt vor einen Schraegstrich schreiben: diese zwei Zeichen beenden
   den Kommentar mitten im Satz. Genau das stand hier bis zum
   13.09.2026 und hat alle Regeln am Dateiende gekostet.) Geaendert wurden
   buildings.css UND night.css, und land.js laeuft jetzt auf einer anderen
   Seite — ohne diese Zeile hier bliebe alles ein Jahr im Browsercache.

   02.09.2026 abends (2) — Pool-Verlauf: eingelagert/entnommen sind
   jetzt Plus- und Minussymbol, die Ware nur noch ihr Symbol (alliance.css).

   02.09.2026 abends — DAUERAUFTRAEGE am lokalen Markt: neuer Reiter
   DIREKT hinter "Lokaler Markt" (trade.css, trade.js) mit Kartenliste am Handy. Geaendert wurden
   trade.css UND trade.js — ohne diese Zeile hier bekaeme niemand die neue
   Fassung zu sehen.

   02.09.2026 — Handy-Durchgang: Allianzpool wird unter 700 px zur
   Kartenliste (alliance.css), die Anfuehrer-Spalte der Allianzliste tritt
   beiseite, die Markttabelle bekommt ein zweizeiliges Kaufformular und
   kuerzere Spaltenkoepfe (trade.css, de/en). Geaendert wurden alliance.css
   und trade.css — ohne diese Zeile hier bliebe beides ein Jahr lang
   ungesehen im Browsercache.

   31.08.2026 abends — mobile_layout.js: Tabellen-Kaesten nur noch
   bei Breitenwechsel neu messen (Tastatur-Bug am Markt)
   (.land-preis-wert), Gebaeudeuebersicht nach oben (.bld-uebersicht),
   Rangliste von neun auf sechs Spalten (.pts-spieler, .pts-sub).
   WICHTIG: land.js wurde dabei ebenfalls geaendert; ohne diese Zeile hier
   bekaeme niemand die neue Fassung zu sehen.

   28.08.2026 — klebende Tabellenkoepfe auf dem Handy. mobile_layout.js legte
   um JEDE Tabelle einen Kasten mit .table-scroll; dessen overflow-x: auto
   machte ihn zum Scrollbereich, und position: sticky richtet sich nach dem
   naechsten Scrollbereich. Weil der Kasten genau so hoch ist wie die Tabelle,
   scrollte er senkrecht nie — die Kopfzeile hatte nichts zum Kleben und
   rutschte mit hinaus. Jetzt wird gemessen: nur eine wirklich zu breite
   Tabelle bekommt den Kasten. Auch hier gilt: geaendert wurde eine JS-Datei,
   ohne diese Zeile bliebe sie im Cache. */

/* HANDY: die Rangliste soll PASSEN, nicht geschoben werden (28.08.2026).
   Der Zusammenhang ist nicht offensichtlich, deshalb ausgeschrieben:
   mobile_layout.js legt um jede zu breite Tabelle einen Kasten mit
   overflow-x: auto. Dieser Kasten ist fuer den Browser ein Scrollbereich,
   und position: sticky richtet sich nach dem naechsten Scrollbereich — der
   aber genau so hoch ist wie die Tabelle und senkrecht nie scrollt. Ergebnis:
   die Kopfzeile klebte am Rechner, auf dem Handy nicht.
   Die Loesung liegt deshalb NICHT beim sticky, sondern bei der Breite. Zwei
   Griffe reichen: engere Zellen und die Zuege-Spalte tritt beiseite. Damit
   bleibt die Tabelle unter der Schirmbreite, der Kasten entfaellt, und die
   Seite als Ganzes scrollt — daran klebt die Kopfzeile dann sauber.
   Nachgemessen bei 320, 360, 390 und 430 Pixeln: passt ueberall, ohne dass
   sich die Seite seitlich schieben laesst.
   WER HIER SPALTEN ZURUECKHOLT, prueft das nach — eine Spalte zu viel, und
   die klebende Kopfzeile ist wieder weg. */
@media screen and (max-width: 900px) {
    .rank-table th,
    .rank-table td { padding: 0.7rem 0.3rem; }
    /* NUR DIE ALLIANZ-MITGLIEDERLISTE gibt ihre Zuege-Spalte am Handy auf.
       Sie hat beim Anfuehrer sieben Spalten, darunter zwei Knoepfe, und laeuft
       damit seitlich aus. Die PUNKTELISTE behaelt ihre Spalte: sie hat nur
       sechs, und nachgemessen bei 320 bis 430 px passt sie. */
    .rank-table .al-col-zuege { display: none; }
}

/* Cache-Stempel 31.08.2026: Diplomatie-Umzug in die Allianz (live.js, navigation, alliance/diplomacy) — asset_v haengt an dieser Datei. */
/* Cache-Stempel 04.09.2026: Spielerkarte hinter den Spielernamen (Punkteliste, Stadtplatz) — asset_v haengt an dieser Datei. */
/* Cache-Stempel 04.09.2026 (2): Online-Anzeige in der Allianz-Mitgliederliste + "Zuletzt da" in der Spielerkarte — asset_v haengt an dieser Datei. */
/* Cache-Stempel 04.09.2026 (3): Diplomatie-Vertraege in zwei Stapel (eigene zuerst) — asset_v haengt an dieser Datei. */
/* Cache-Stempel 07.09.2026: Rangtitel vor dem Namen im Reichs-Chat, dazu die Kriegsberichte-Seite (kriegsberichte.css/js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 08.09.2026: Groessenausgleich nennt im Bericht und in der Vorschau das Vielfache (war.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 08.09.2026 (2): Rache nach Landverlust - Kasten mit Uhr auf der Kriegsseite (war.js, war.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 12.09.2026: Pool-Dauerauftrag der Allianzen - Eingabetabelle (alliance.css) und Warnungen (.pool-warn hier) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 12.09.2026 (2): Pool-Dauerauftrag ohne Spalte Mindestbestand, kurze Spaltenkoepfe in der Pooltabelle (alliance.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 12.09.2026 (3): Pool-Dauerauftrag schuetzt jetzt auch Bier und das Korn der Brauereien, neuer Erklaertext - asset_v haengt an dieser Datei. */
/* Cache-Stempel 12.09.2026 (4): Pool-Entnahme rechnet mit dem Erloes des Zuges statt mit dem Kontostand, Erklaertext angepasst - asset_v haengt an dieser Datei. */
/* Cache-Stempel 12.09.2026 (5): Poolguthaben als Spalte in der Allianz-Mitgliederliste (alliance.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 12.09.2026 (6): Erklaertext des Pool-Dauerauftrags praezisiert (Produktionskette statt Pauschalversprechen) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026: Tastatur am Handy - Hoehenregel des Rahmens repariert, resizes-content in game.html, neue Tastaturprobe in viewport.js - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (2): Pool-Dauerauftrag in Stueck je Zug statt Prozent (alliance.css, alliance.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (3): Tauschen-Knopf im Allianzpool (alliance.html, .action-btn-tausch) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (4): Allianzpool-Bewegungen im Zugergebnis (turn.html, overview.html, sidebar.css) und Netto-0-Waren bleiben sichtbar - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (5): Allianz-Wappen im Zugergebnis verkleinert (sidebar.css, overview.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (6): Zahlen im Forschungsbalken lesbar - zwei deckungsgleiche Textzeilen statt einer mit Schein, Fuellung gedunkelt (pages/research.css, Nachtregel am Ende von night.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (7): der Kaufknopf im Globalen Markt nennt den Preis und wird rot, wenn das Gold nicht reicht (pages/trade.css, pages/trade.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (8): leeres Mengenfeld zeigt im Kaufknopf wieder nur "Kaufen" (pages/trade.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (9): auch der Verkaufsknopf bei den Kaufgesuchen nennt den Erloes (pages/trade.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (10): Goldsummen in den Handelsknoepfen gekuerzt, 1,23k statt 1.230 (pages/trade.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (11): leeres Mengenfeld kauft und verkauft nichts mehr, der Knopf ist dann abgeschaltet (pages/trade.js, pages/trade.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 14.09.2026 (12): Neulingsschutz gilt in beide Richtungen, wer selbst unter der Grenze steht greift nicht an (pages/war.js, war.html) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 15.09.2026: Allianzpool nachts dunkel (Nachtregeln von Hand am Ende der night.css) — asset_v haengt an dieser Datei. */
/* Cache-Stempel 15.09.2026 (2): Volkswahl-Hinweis auf der Voelkerseite nachts dunkel (night.css von Hand) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026: Gluecksburg-Seite neu (pages/slot.css, pages/slot.js, Nachtregeln von Hand am Ende der night.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (2): Gluecksburg-Sounds per Web-Audio (pages/slot.js, Ton-Knopf in slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (3): Gluecksburg-Umbau auf Ressourcen-Symbole und Automaten-Optik im Canvas (pages/slot.js, pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (4): Gluecksburg Gewinntafel im Automaten + Linienwahl (pages/slot.js, pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (5): Gluecksburg kompakt - Auto-Dreh, Linienvorschau, Freispiel-Zaehler im Bild, gerade Konsole (pages/slot.js, pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (6): Gluecksburg Linienvorschau mit allen 10 nummerierten Linien, Freigabe fuer alle Spieler (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (7): Gluecksburg Auto-Modus dreht bei Verlust sofort weiter (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (8): Gluecksburg Einsatz/Linien als +/- Regler statt Auswahlfeld, Linienvorschau im Book-of-Ra-Stil mit Randfeldern (pages/slot.js, pages/slot.css, slot.html) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (9): Gluecksburg Freispielmusik (leiser Loop aus /audio/freispielmusik.mp3) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (10): Gluecksburg Burg-Glocke je erscheinender Burg, nur solange Freispiele erreichbar (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (11): Gluecksburg Burg-Klang aus echten Floetentoenen der Musik (audio/burg1-3.mp3) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (12): Gluecksburg leuchtende Burgfelder + Spannungswalze (laenger drehen + Riser) ab 2 Burgen (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (13): Gluecksburg Handy-Fix - Muenz-Sound endet selbst (kein Endlos-Ton/Freeze mehr), Bildschleife gekapselt, mehr Abstand Einsatz/Linien (pages/slot.js, pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (14): Gluecksburg Pferd + Holz entfernt (10 statt 12 Symbole), Walzen neu, Gewinntabelle nachgezogen -> RTP ~0.91, Trefferquote 30%->36% (config/game.php, pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (15): Gluecksburg Bonus-Symbol groesser sichtbar in den Freispielen + eigene Auswahl-Szene beim Ausloesen (Symbole gross in der Mitte, werden langsamer, rasten ein) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (16): Gluecksburg Freispiele lohnen sich - ausgedehntes Symbol fuellt die ganze Walze, zahlt ab 2 (hohe Symbole), 2x-Multiplikator auf alle Freispiel-Gewinne; Gewinntabelle neu gegengerechnet -> RTP ~0.90, Freispiel-Anteil 24%->43% (config/game.php, SlotController.php, pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (17): Gluecksburg am Desktop ohne Rahmen (mehr Platz), Live-Liste "wer zockt gerade" unter dem Automaten nur fuer den Admin (SlotController.php, SlotRepository.php, templates/slot.html, pages/slot.css, pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (18): Gluecksburg Desktop-Feinschliff - nur Optik weg, Maschine behaelt alte Container-Breite (65rem) und bleibt scrollbar (pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (19): Gluecksburg Rahmen jetzt WIRKLICH weg auf jeder Breite - die Media-Query-Luecke zwischen 900 und 901px hatte den .mainBorder-Rahmen stehen lassen (pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 22.09.2026 (20): Gluecksburg Flammenwalze in den Freispielen (Burg auf Mittelwalze -> Walze brennt und zeigt ab naechstem Spin das Bonussymbol; Burgen zaehlen weiter, max 1 je Runde), Gewinnlinien auch in Freispielen nacheinander gezeigt, Freispiele 10->6 fuer die Balance (config/game.php, SlotController.php, pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (21): Gluecksburg wieder 10 Freispiele mit Flammenwalzen; die heisse Walze brennt jetzt AUCH waehrend der Drehung und steht dann fest auf dem Bonussymbol (man sieht jederzeit, welche Walze heiss ist); Balance auf ~95% Ausschuettung gebracht (nur noch 6 Burgen, staerkerer Burg-Scatter 5/20/100) (config/game.php, SlotController.php, pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (22): Gluecksburg heisse Walze dreht waehrend der Drehung wieder ganz normal mit (nur die Flammen liegen darueber, kein Einfrieren mehr) - erst im Stillstand zeigt sie ausgefuellt das Bonussymbol (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (23): Gluecksburg Walzentempo halbiert (langsamere Drehung) und die Burg bekommt einen kraeftig roten Leuchthintergrund, damit man die Burgen durch die Walzen laufen sieht (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (24): Gluecksburg besondere Symbole (Bevoelkerung, Militaer, Land, Wohnraum) mit blaeulichem Schimmer und blauem Rand auf den Walzen, damit man die hohen Symbole gut erkennt (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (25): Gluecksburg besondere Symbole leuchten jetzt an der Grafik selbst (nicht mehr die ganze Kachel) und jedes in eigener Farbe: Bevoelkerung gold, Militaer rot, Land gruen, Wohnraum blau (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (26): Gluecksburg Walzen-Kacheln mit abgerundeten Ecken (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (27): Gluecksburg Militaer-Symbol leuchtet jetzt violett statt rot (rot war zu nah an den roten Burgen) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (28): Gluecksburg Walzen-Rollgeraeusch (Surren) lauter und heller - vorher zu leise und zu dumpf (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (29): Gluecksburg Walzen-Rollgeraeusch Lautstaerke von 0.20 auf 0.11 gesenkt (war zu laut), Helligkeit bleibt (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (30): Gluecksburg Spin-Sound organischer - drei Schichten (gefiltertes Rauschen + Motorbrummen + rhythmisches Pulsen per LFO) statt flachem Rauschen (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (31): Gluecksburg Walzentempo weiter gesenkt (0.275 -> 0.14), die Walzen rollen noch gemaechlicher (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (32): Gluecksburg Walzen landen ohne Ueberschwingen (kein kurzes Zurueckdrehen mehr) und das tiefe Motorbrummen im Spin-Sound ist raus (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (33): Gluecksburg Walzenrauschen tiefer und weicher (sanfter Tiefpass statt Bandpass, ruhigeres Pulsen) - angenehmer, sticht nicht mehr heraus (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (34): Gluecksburg Landen umgebaut - Walze dreht mit konstantem Tempo (unter 1 Symbol/Bild) und gleitet nur die letzten Felder sanft aus, kein Beschleunigen/Abbremsen mehr, dadurch keine Rueckwaerts-Taeuschung am Ende (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (35): Gluecksburg Walze behaelt beim Landen ihr Dreh-Tempo (wird NIE schneller) und bremst nur linear bis zum Stillstand ab; Walzen laufen parallel-gestaffelt aus statt in einer Kette (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (36): Gluecksburg Walzen halten wieder strikt der Reihe nach an (Walze 1 bis 5 nacheinander), behalten beim Landen ihr Tempo (kein Beschleunigen) und bremsen nur ab; Grundtempo auf ruhiges Mittel angehoben, damit der Durchlauf nicht zu lange dauert (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (37): Gluecksburg Landen exakt gleich getaktet - die Zielsymbole werden vorab an eine feste Stelle voraus ins Anzeige-Band gesetzt, so rollt jede Walze schoen langsam GENAU dieselbe Strecke und haelt im selben Abstand an (kein Beschleunigen, keine Rueckwaerts-Taeuschung, feste Reihenfolge) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (38): Gluecksburg Stopp-Sequenz doppelt so schnell (kuerzere feste Rollstrecke + kleinere Pausen, ~5.2s auf ~2.6s), Rotationstempo dabei nochmal 20% langsamer (0.16 -> 0.128); Abstand zwischen den Stopps exakt gleich (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (39): Gluecksburg Ruckler beim Einrasten weg - keine Positions-Ausrichtung per Sprung mehr; stattdessen bekommen alle Walzen gleichzeitig gestaffelte Ziele (sie drehen synchron, gleiche Nachkomma-Position), rollen stetig und halten ohne Ruck der Reihe nach in gleichem Abstand (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (40): Gluecksburg sichtbarer Symbol-Austausch behoben - die Zielsymbole werden jetzt UNTERHALB des sichtbaren Fensters ins Band geschrieben (Rollstrecke min. 4), sie rollen also von unten herein statt im Fenster zu wechseln (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (41): Gluecksburg winziger Ruckler beim Einrasten weg - beim Uebergang vom Rollen zum Abbremsen gab es einen einzelnen Stillstands-Frame; das Abbremsen setzt jetzt einen Frame frueher an, sodass die Walze sich durchgehend bewegt (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (42): Gluecksburg Pergament-Hintergrund nur noch unter der Burg; alle anderen Felder bekommen den schlichten dunklen Fensterhintergrund (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (43): Gluecksburg Kachel-Umrandung entfernt, Burg-Leuchten auf die Kachel begrenzt (laeuft nicht mehr darueber hinaus), Burg-Pergament deutlich abgedunkelt (sticht nicht mehr so heraus) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (44): Gluecksburg Burg-Rahmen und Kachel-Leuchten weg - die Burg leuchtet jetzt rot an der Grafik selbst, genau wie die besonderen Symbole in ihren Farben (ruhiger fuers Auge) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (45): Gluecksburg Burg ohne Pergament-Hintergrund; Leuchten darf jetzt ueber die Felder hinausstrahlen (gemeinsamer Fenster-Clip statt engem Feld-Clip, kein Feld-Hintergrund mehr) - kein hartes Abschneiden mehr bei breiten Grafiken wie Land (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (46): Gluecksburg Leucht-Symbole per Pre-Rendering - der farbige Schein (shadowBlur) wird je Symbol EINMAL in einen Offscreen-Canvas gebrannt und gecacht; im Frame nur noch ein drawImage plus scharfe Grafik statt dreimal Blur - deutlich mehr FPS auf dem Handy (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (47): Gluecksburg Regler "Einsatz je Linie" und "Linien" 16px tiefer gesetzt, damit die Beschriftung nicht mehr direkt unter den Anzeige-Boxen klebt; unsichtbare Klickflaechen mitgezogen (pages/slot.js, pages/slot.css) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (48): Gluecksburg grosse Abschluss-Feier NACH den Freispielen - der gesamte Rundengewinn zaehlt von 0 gross ueber den Walzen hoch, mit Fanfare, rasselndem Muenzticken und Schluss-Akzent; danach laeuft (Auto) erst nach der Feier der naechste Dreh (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (49): Gluecksburg Gewinnlinien liegen jetzt OBEN (auch in den Freispielen, vorher von der ausgefuellten Bonus-Walze verdeckt); und der Gewinn zaehlt pro Trefferlinie schrittweise hoch statt auf einen Schlag (3 Linien = 3 Stufen) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (50): Gluecksburg drei Verbesserungen - (1) beim neuen Spin rollen die alten Symbole erst sauber nach oben raus statt umzuspringen; (2) Nervenkitzel: liegen 2 Burgen, drehen die restlichen Walzen wilder/schneller/laenger, leuchten rot und ein Riser steigt an; (3) in den Freispielen zaehlen gleiche Symbole auf einer Linie an JEDER Position (any position, viele Linien-Gewinne), Expand-Teiler dafuer auf 5 gesetzt (RTP bleibt ~94-95%) (pages/slot.js, SlotController.php, config/game.php) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (51): Gluecksburg Drehrichtung jetzt von OBEN nach UNTEN; und beim neuen Spin bleiben die alten sichtbaren Symbole im Band, sodass man sie unten herauslaufen sieht, bevor die frischen Symbole von oben hereinkommen (kein direkter Austausch mehr) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (52): Gluecksburg Nervenkitzel bei 2 Scattern jetzt ZWINGEND sichtbar - liegen 2 Burgen, werden ALLE noch drehenden Walzen (auch schon abbremsende) schlagartig wieder schneller und deutlich laenger gedreht, leuchten rot, zittern und der Spannungs-Riser laeuft (die dritte Burg koennte die Freispiele bringen); vorher wurde der Effekt uebersprungen, weil die Walzen zu dicht nacheinander stoppten (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (53): Gluecksburg Burg bekommt wieder einen dezenten Pergament-Hintergrund (sanft eingeblendet, ~40% plus leichter warmer Schimmer), damit man sofort erkennt "das ist das Symbol, das ich brauche" - aber ohne grell zu wirken (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (54): Gluecksburg Nervenkitzel jetzt als KETTE - bei 2 Burgen dreht IMMER NUR DIE NAECHSTE Walze heiss/rot/lang, die dahinter drehen ruhig weiter und warten, bis sie dran sind; erst wenn die heisse Walze steht, wird die naechste heiss. So halten nicht mehr alle fast zeitgleich, das "jetzt koennte es passieren" bleibt bis zur letzten Walze (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 23.09.2026 (55): Gluecksburg Freispielmusik startet jetzt gleich am Anfang - die Datei wird schon beim Seitenaufbau vorgeladen (preload=auto), vorher begann der Download erst beim Abspielen und die Musik setzte erst mitten in den Freispielen ein (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (56): Gluecksburg auf ECHTES Book of Ra umgestellt - exakte BoR-Gewinntabelle (5000/2000/750/K-A/J-Q-10), Scatter 2/20/200, Burg ist REINER Scatter (kein Wild mehr, dafuer 3 je Walze = haeufiger, Trigger ~1zu84), links-buendig statt any-position, KEIN 2x-Multiplikator; Klebe-Walzen bleiben; 80-Feld-Walzen; kleine Einsaetze ab 1 Gold; ~95% RTP (config/game.php, SlotController.php, pages/slot.js, lang) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (57): Gluecksburg Turbo-/Direkt-Spin-Knopf (an-/ausschaltbar, gemerkt) - im Turbo laufen die Walzen NICHT, das Ergebnis erscheint sofort; vierter Nebenknopf rechts, Positionen der Knoepfe neu gestapelt (pages/slot.js, pages/slot.css, slot.html, lang) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (58): Gluecksburg fluessiger am Handy - das komplette statische Gehaeuse (Holzrahmen, Fenster, Konsole, Anzeige-Kaesten samt Beschriftung, Regler-Pillen) wird nur noch EINMAL je Farbschema in einen Offscreen-Canvas vorgerendert und pro Bild als ein einziges drawImage geblittet statt jedes Mal neu gerechnet; am Handy zusaetzlich Bildrate auf ~33 fps gedrosselt (Walzenphysik ueber Zeitfaktor davon unabhaengig) (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (59): Gluecksburg drei Sachen - (1) Turbo rollt jetzt eine kurze, schnelle Rolle (alte 3 Symbole raus, neue rein) statt sofort umzuschalten; (2) dicke Treffer (4 oder 5 Gleiche) bekommen die grosse goldene Zahl-Feier wie am Freispiel-Ende, EINE je Trefferlinie nacheinander; (3) neues viertes Anzeige-Feld "Letzter Gewinn" (Gesamtbetrag aus dem letzten Bild), Anzeige-Felder auf vier neu verteilt, grosse Zahlen passen sich der Feldbreite an (pages/slot.js, slot.html, lang) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (60): Gluecksburg Ausdehnung in den Freispielen laeuft jetzt Feld fuer Feld (je Walze von oben nach unten, Walzen nacheinander) statt alles auf einen Schlag; jedes umgedrehte Feld macht ein kurzes "pling" mit leicht steigender Tonhoehe, ein noch nicht gefuelltes Feld zeigt weiter sein Originalsymbol; Wartezeit bis zum naechsten Freispiel-Dreh um die Ausdehnungsdauer verlaengert (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (61): Gluecksburg in den Freispielen laufen die Gewinnlinien jetzt schneller durch (rund 470 ms je Linie) und OHNE die grosse hochzaehlende Zahl - die grosse Zahl kommt dort nur noch am Ende der Freispiele als Abschluss-Feier. Im Grundspiel bleibt die grosse Zahl-Feier je dickem Treffer erhalten (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (62): Gluecksburg Freispiel-Reihenfolge - erst laeuft die Ausdehnung KOMPLETT durch (Symbole Feld fuer Feld getauscht, jedes mit hohem "pling"), ERST DANACH starten die Gewinnlinien und (am Rundenende) die grosse Abschluss-Feier; Warte-/Auto-Zeiten entsprechend um die Ausdehnungsdauer verlaengert, pling heller/hoeher (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 24.09.2026 (63): Gluecksburg Turbo bleibt als Einstellung an (localStorage/Knopf unveraendert), ist in den FREISPIELEN aber automatisch aus, damit Ausdehnung und Linien sichtbar sind; im Grundspiel greift der Turbo wieder von selbst. Der Spieler muss ihn also nicht nach jeder Freispielrunde neu aktivieren (pages/slot.js) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 25.09.2026 (1): Erntespiel komplett im Canvas - Seitenrahmen weg wie bei der Gluecksburg, Legende + Tafeln (direkt am Brett) + Tonschalter im Canvas, Symbole pixelig, dunkelbrauner Brettgrund, Hinweis nach 5 s ohne Dreier (pages/ernte.js, pages/ernte.css, ernte.html) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 28.09.2026 (1): Adminseite - neue sortierbare Tabelle "Forschung der Spieler" (Stufe je Bereich von Korn bis Militaer + Summe, Symbol im Kopf, Nachtmodus mitgemacht) (AdminController, admin.html, pages/admin.css, night.css, pages/admin.js, lang) - asset_v haengt an dieser Datei. */

/* Cache-Stempel 08.10.2026 (1): Kaserne /military neu gestaltet (Heerschau mit Ring, Einheitenkarten mit Balken, Max- und Schnellknoepfe, klebende Befehlsleiste, Container-Abfragen) (military.html, pages/military.css, pages/military.js, lang) - asset_v haengt an dieser Datei. */
/* Cache-Stempel 08.10.2026 (2): Kaserne - Hover-Bewegung der Einheitenkarten entfernt (pages/military.css). */
/* Cache-Stempel 08.10.2026 (3): Kaserne - flacher Spielstil (Pergament, Ecken 2px, keine Verlaeufe), Aufteilung unveraendert (pages/military.css). */
/* Cache-Stempel 20.10.2026 (1): Adminseite - Uebersicht "Forschung der Spieler" entfernt (admin.html, AdminController, pages/admin.css, pages/admin.js, night.css, lang) - asset_v haengt an dieser Datei. */