/* Bauberater im Aufgaben-Fenster: ein Hinweis oben, wie Pergament mit Siegelkante. */
.fn_tipp {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 10px 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #8a6a3a;
  border-left: 4px solid #d8ab5c;
  background: rgba(255, 244, 214, 0.55);
  color: #2b1d0e;
  font-size: .9rem;
}
.fn_tipp_label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  color: #7a4a18;
  white-space: nowrap;
}
.fn_tipp_text { line-height: 1.35; }
/* HUD-Zeile fuer laufende Baustellen (nur sichtbar, solange gebaut wird). */
.fn_hud_baustellen_zeile .fn_hud_wert { color: #f0d284; }
/* Baustellen-Balken und "Antreiben" in der Info-Karte. */
.fn_info_bau_balken {
  height: 7px;
  margin: 8px 0 2px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6b5433;
  overflow: hidden;
}
.fn_info_bau_balken > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #d8ab5c, #f0d284);
  transition: width 0.25s linear;
}
.fn_info_beeilen {
  background: linear-gradient(180deg, #6c7a3a, #4d5926);
  border-color: #a8c05a;
  color: #f6f3cf;
}
.fn_info_beeilen:hover { background: linear-gradient(180deg, #7d8c44, #5a682c); }
/* Zufriedenheit im Aufgaben-Fenster: Zahl plus farbige Gründe. */
.fn_zufriedenheit { margin: 4px 0 14px; }
.fn_zufriedenheit_kopf {
  font-weight: 700;
  font-size: .95rem;
  margin: 0 0 6px;
  color: #f6e7c6;
}
.fn_zufriedenheit_kopf[data-stufe="gut"] { color: #a8e0a0; }
.fn_zufriedenheit_kopf[data-stufe="mittel"] { color: #f0d284; }
.fn_zufriedenheit_kopf[data-stufe="schlecht"] { color: #f0a08a; }
.fn_zufriedenheit_liste { display: flex; flex-wrap: wrap; gap: 6px; }
.fn_zufriedenheit_grund {
  font-size: .74rem;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #6b5433;
  background: rgba(0, 0, 0, 0.2);
  color: #e8d9b6;
}
.fn_zufriedenheit_plus { border-color: #5d7a45; color: #c7e6b0; }
.fn_zufriedenheit_minus { border-color: #8a4b3a; color: #f2b7a4; }
/* Bauteil-Suche im Baumenü (bei 73 Modellen der schnellste Weg). */
.fn_dock_suche {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 2px;
}
.fn_dock_suche .fn_suche_feld {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 1 320px;
  font: inherit;
  font-size: .86rem;
  color: #fbefcf;
  background: rgba(28, 20, 10, 0.55);
  border: 1px solid #8a6c3e;
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.fn_suche_feld::placeholder { color: #b7a381; }
.fn_suche_feld:focus {
  outline: 2px solid #d8ab5c;
  outline-offset: 1px;
}
.fn_suche_zu {
  font: inherit;
  line-height: 1;
  color: #f3e6c8;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #6b5433;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}
.fn_suche_zu:hover { border-color: #d8ab5c; }
.fn_suche_leer {
  grid-column: 1 / -1;
  color: #c9b48c;
  font-size: .84rem;
  padding: 4px 2px;
}
/* Info-Karte: Verschieben und Abreißen nebeneinander. */
/* Drei Knoepfe nebeneinander wurden abgeschnitten - sie duerfen umbrechen. */
/* ANBAUTEN am Wohngrundstueck (Ziel Z4): eigener Block in der Info-Karte.
   Er steht ueber den Knoepfen, damit die Knoepfe die Hauptaktion bleiben. */
.fn_info_anbauten {
  margin: 10px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--fn_linie, #c9b48a);
  border-radius: 8px;
  background: rgba(255, 250, 238, 0.72);
}
.fn_info_anbauten_titel {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--fn_text_leise, #6b5a3e);
  margin-bottom: 6px;
}
.fn_info_anbauten_reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fn_info_anbauten_reihe .fn_btn {
  font-size: 0.86rem;
  padding: 5px 10px;
}
.fn_info_anbauten_reihe .fn_btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.fn_info_knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fn_info_knoepfe .fn_btn { flex: 1 1 8rem; margin-top: 0; min-width: 0; }
.fn_info_ausbau { background: linear-gradient(180deg, #6f8f4a, #4e6c32); border-color: #b6d08a; color: #f3ffe4; }
.fn_info_ausbau:hover:not(:disabled) { background: linear-gradient(180deg, #7fa257, #5a7a3a); }
.fn_info_ausbau:disabled { background: #bdb39a; border-color: #9c927a; color: #6b6250; cursor: default; }
.fn_info_verschieben {
  background: linear-gradient(180deg, #7d6a3a, #5c4c26);
  border-color: #caa85a;
  color: #fbefcf;
}
.fn_info_verschieben:hover { background: linear-gradient(180deg, #8f7a44, #6a582c); }/* Lieferkette: was das letzte Jahr erzeugt und verbraucht hat. */
.fn_lager_fluss {
  grid-column: 1 / -1;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fn_lager_fluss_zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fn_lager_fluss_titel { color: #c9b48c; font-size: .74rem; margin-right: 2px; }
.fn_lager_chip {
  font-size: .72rem;
  padding: 1px 6px;
  border: 1px solid #6b5433;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #e8d9b6;
}
/* styles.css - Ferrum Noricum: eigene Oberflaeche
   Grundregel: die 3D-Welt fuellt den Bildschirm, alle Bedienelemente
   legen sich als schwebende Kacheln darueber. Das Baumenue liegt unten
   (Muster Neumark 1400), die Anzeige oben rechts. */

/* ------------------------------------------------------------------ */
/* Grundgeruest                                                         */
/* ------------------------------------------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.fn_body {
  background: #1d1a16;
  color: var(--blk-color);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Kopfleiste (3 Zonen wie im Plattform-Standard)                      */
/* ------------------------------------------------------------------ */
/* Die Hoehe steht als Variable, weil der Kopf am Handy zweizeilig wird
   (Sprachwahl + Roemisch/Keltisch passen sonst nicht ins Bild) und die
   Buehne darunter mitwandern muss. */
body.fn_body { --fn-kopf-hoehe: 56px; }

.fn_leiste {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--fn-kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: linear-gradient(180deg, #3b2f22 0%, #2a2219 100%);
  border-bottom: 2px solid #b98a3c;
  color: #f3e7d0;
  z-index: 30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.fn_leiste a { color: #f0d9a8; }
.fn_zone_links, .fn_werkzeuge { display: flex; align-items: center; gap: 10px; }
.fn_marke { display: flex; align-items: center; gap: 10px; }
.fn_titel {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #f6e7c6;
}
.fn_vermerk {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: #b98a3c;
  color: #241c12;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Buehne                                                              */
/* ------------------------------------------------------------------ */
.fn_buehne {
  position: fixed;
  inset: var(--fn-kopf-hoehe) 0 0 0;
}

.fn_canvas_wrap { position: absolute; inset: 0; }
.fn_canvas_wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* ------------------------------------------------------------------ */
/* Anzeige oben rechts: Bewohner, Vorrat, Jahr                          */
/* ------------------------------------------------------------------ */
.fn_hud {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  min-width: 148px;
  background: rgba(28, 23, 18, .90);
  border: 1px solid #6b5433;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  color: #f1e6d2;
  z-index: 20;
}
.fn_hud_zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: .84rem;
}
.fn_hud_wert { font-weight: 700; font-size: 1.02rem; color: #f6e7c6; }
/* Zufriedenheit: die Farbe sagt auf einen Blick, wie es den Leuten geht. */
.fn_hud_zeile[data-stufe="gut"] .fn_hud_wert { color: #a8e07a; }
.fn_hud_zeile[data-stufe="mittel"] .fn_hud_wert { color: #f0cf7a; }
.fn_hud_zeile[data-stufe="schlecht"] .fn_hud_wert { color: #f09a7a; }
.fn_hud_label { color: #c9b48c; font-size: .78rem; }
/* Jahreszeit und Zeitraffer: ein schmaler Balken zeigt, wie weit das Jahr ist. */
.fn_hud_jz { font-size: .8rem !important; }
.fn_hud_uhr {
  height: 4px;
  margin: 6px 0 2px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6b5433;
  border-radius: 3px;
  overflow: hidden;
}
.fn_hud_uhr span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #b98a3c, #e6c274);
  transition: width 0.3s linear;
}
.fn_hud_zeit {
  flex: 0 0 auto !important;
  min-width: 34px;
  padding: 0 8px !important;
}
.fn_hud_zeit[aria-pressed="false"] { opacity: 0.6; }
/* ---------------------------------------------------------------------------
   Layout nach Neumark 1400 (Nutzer-Wunsch 01.11.2026)
   - EINE Leiste oben: Werte als Chips links, Aktionen rechts
   - linke Spalte: "Naechster Schritt" und Warnungen
   - rechter Inspektor: das angeklickte Gebaeude
   - Mini-Karte unten links ueber dem Bau-Dock
   --------------------------------------------------------------------------- */
.fn_topbar {
  position: absolute;
  top: .45rem;
  left: .55rem;
  right: .55rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: .5rem;
  z-index: 12;
  pointer-events: none;
}
.fn_ressourcen_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .32rem;
  flex: 1 1 auto;
  min-width: 0;
  pointer-events: auto;
}
.fn_res_chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 34px;
  padding: .2rem .55rem;
  background: var(--ui-panel, #f2e7cd);
  border: 1px solid var(--ui-line-soft, #c9a15f);
  border-radius: .6rem;
  box-shadow: 0 2px 7px rgba(30, 20, 10, .22);
  white-space: nowrap;
}
.fn_res_chip b {
  font-family: var(--ui-serif, Georgia, serif);
  font-size: .98rem;
  line-height: 1.1;
  color: #3d2c19;
}
.fn_res_chip i {
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7d6644;
}
/* Die Zahl steht auf dem dunklen Holz der Anzeige - deshalb helle Toene.
   Vorher waren es dunkle Gruen-/Rottoene fuer eine helle Karte; auf dem
   braunen Chip kamen sie nur auf 1,9:1 (gemessen 05.11.2026). */
.fn_res_chip.fn_chip_laune[data-stufe="gut"] b { color: #a8e07a; }
.fn_res_chip.fn_chip_laune[data-stufe="mittel"] b { color: #f0cf7a; }
.fn_res_chip.fn_chip_laune[data-stufe="schlecht"] b { color: #f09a7a; }
.fn_res_chip.fn_chip_material { background: var(--ui-panel-2, #e5d3ac); }
/* Ohne Beschriftung (mittlere Fenster) zeigt ein Farbstreifen, welche Ware
   gemeint ist - wie die farbigen Kisten im Lager. */
/* Kerne: Bewohner, Vorrat, Zufriedenheit und Wehr behalten ihre Farbe,
   wenn nur die Zahl steht. */
.fn_farbe_bewohner { border-left: 4px solid #6b7f8f; }
.fn_farbe_vorrat   { border-left: 4px solid #d0a34a; }
.fn_chip_holz    { border-left: 4px solid #8a5a2b; }
.fn_chip_bretter { border-left: 4px solid #c08a4a; }
.fn_chip_stein   { border-left: 4px solid #8d8b84; }
.fn_chip_ton     { border-left: 4px solid #a9673f; }
.fn_chip_eisen   { border-left: 4px solid #6f7f96; }
.fn_res_chip.fn_chip_zeit { gap: .45rem; }
.fn_res_chip.fn_chip_zeit .fn_hud_jz { text-transform: none; letter-spacing: 0; font-size: .78rem; }
/* Das Kalenderzeichen erscheint erst, wenn die Jahreszeit wegfaellt (s. u.). */
.fn_res_chip .fn_chip_jahr_icon { display: none; }
.fn_res_chip .fn_hud_uhr {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 6px;
  border-radius: 3px;
  background: #cbb68c;
  overflow: hidden;
}
.fn_res_chip .fn_hud_uhr > span {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--ui-accent, #a83b2a);
  transition: width .25s linear;
}
.fn_hud_aktionen {
  display: flex;
  align-items: stretch;
  gap: .3rem;
  flex: 0 0 auto;
  pointer-events: auto;
}
.fn_hud_aktionen .fn_hud_knopf { flex: 0 0 auto; }
.fn_hud_knopf .fn_knopf_icon { display: none; }
/* display:inline-flex wuerde das hidden-Attribut aushebeln (Baustellen-Chip). */
.fn_res_chip[hidden], .fn_hud_aktionen [hidden] { display: none !important; }
/* Auf mittleren Fenstern werden Karte, Frei bauen und Pause zu Zeichen -
   dann bleibt die Leiste eine Zeile (Muster Neumark: Werkzeuge als Symbole). */
/* Gemessen (leiste-messen.cjs): ab 1700 px passen alle Beschriftungen,
   darunter braucht die Leiste die Zeichen - sonst bricht sie in zwei Zeilen
   um und deckt die halbe Szene zu. */
@media (max-width: 1700px) {
  .fn_hud_karte .fn_knopf_icon,
  .fn_hud_frei .fn_knopf_icon,
  .fn_hud_menue .fn_knopf_icon,
  .fn_hud_aufgaben .fn_knopf_icon,
  .fn_hud_neuesjahr .fn_knopf_icon { display: inline-block; }
  .fn_hud_karte .fn_knopf_text,
  .fn_hud_frei .fn_knopf_text,
  .fn_hud_menue .fn_knopf_text,
  .fn_hud_aufgaben .fn_knopf_text,
  .fn_hud_neuesjahr span[data-i18n] { display: none; }
}
@media (max-width: 640px) {
  .fn_hud_menue .fn_knopf_text { display: none; }
}

/* ===========================================================================
   ZEICHEN IN DER OBEREN LEISTE
   ===========================================================================
   Ein Knopf zeigt sein Zeichen ODER sein Zeichen mit Beschriftung:
     .fn_knopf_icon    Zeichen neben einer Beschriftung - auf mittleren
                       Fenstern faellt es weg, damit die Leiste eine Zeile
                       bleibt (die Beschriftung traegt dann die Bedeutung).
     .fn_knopf_zeichen Zeichen OHNE Beschriftung - wird NIE ausgeblendet.
   Vorher trugen auch die reinen Zeichen-Knoepfe (Hilfe, Einstellungen, Tempo)
   die Klasse .fn_knopf_icon und waren deshalb unsichtbar - leere Knoepfe in
   der Leiste.
   =========================================================================== */
/* .fn_knopf_icon wird weiter oben schon ausgeblendet - hier NICHT noch einmal
   setzen: eine spaetere Regel derselben Staerke haette die Medienabfrage
   ausgehebelt, die das Zeichen bei schmalen Fenstern einblendet. */
.fn_hud_knopf .fn_knopf_zeichen { display: inline-block; }
.fn_hud_knopf .fn_knopf_zeichen,
.fn_hud_knopf .fn_knopf_icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.15em;
}
/* "Neues Jahr" ist der laengste Knopf - auf mittleren Fenstern bleibt nur
   das Zeichen, damit die Leiste nicht umbricht. */
@media (max-width: 1000px) {
  .fn_hud_neuesjahr .fn_knopf_icon { display: inline-block; }
  .fn_hud_neuesjahr span[data-i18n] { display: none; }
}

/* ===========================================================================
   Obere Leiste bleibt EINE Zeile
   ===========================================================================
   Die gezeichneten Zeichen brauchen etwas mehr Platz als die Emojis vorher.
   Damit die Leiste auf 1280 px (Schul-Laptop) nicht umbricht und die Szene
   zudeckt, fallen hier die entbehrlichsten Chips weg - die Werte stehen
   weiter im Aufgaben-Fenster und im Tooltip.
   =========================================================================== */
@media (max-width: 1700px) {
  /* Wehr und der Durchgang sind Beiwerk - sie stehen im Aufgaben-Fenster. */
  .fn_chip_wehr, .fn_chip_lage { display: none; }
  .fn_ressourcen_leiste { flex-wrap: nowrap; }
  .fn_res_chip .fn_chip_icon svg { width: .92rem; height: .92rem; }
  .fn_hud_knopf .fn_knopf_zeichen,
  .fn_hud_knopf .fn_knopf_icon { width: .95rem; height: .95rem; }
}
@media (max-width: 1180px) {
  /* Dann zusaetzlich die Materialwerte, die man im Dock ohnehin vor sich hat. */
  .fn_chip_material { display: none; }
}

/* Linke Spalte: naechster Schritt + Warnungen */
.fn_links_stapel {
  position: absolute;
  top: calc(var(--fn-kopf-h, 70px) + .45rem);
  left: .55rem;
  width: 18.5rem;
  max-width: calc(100vw - 1.1rem);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  z-index: 11;
  pointer-events: none;
}
.fn_links_stapel > * { pointer-events: auto; }
.fn_links_stapel .fn_tipp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  padding: .55rem .8rem .58rem .7rem;
  /* Wachstafel mit Siegel (3.13.6: Meldungen sind Gegenstaende der Welt).
     Die Farben kommen aus der Gestaltung - vorher stand hier feste dunkle
     Schrift, die im Keltischen auf dem dunklen Grund unsichtbar war. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ui-panel) 90%, #fff 10%),
      var(--ui-panel)),
    var(--ui-panel, #f2e7cd);
  border: 1px solid var(--ui-line-soft, #c9a15f);
  border-left: 4px solid var(--ui-accent, #a83b2a);
  border-radius: .6rem;
  color: var(--ui-text, #2b1d0e);
  box-shadow: 0 4px 12px rgba(30, 20, 10, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* Das Siegel oben rechts: ein Tropfen Wachs mit heller Kante. */
.fn_links_stapel .fn_tipp::after {
  content: "";
  position: absolute;
  top: -.42rem;
  right: -.34rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%,
    var(--ui-accent-2, #c9973f),
    var(--ui-accent, #a83b2a) 58%,
    color-mix(in srgb, var(--ui-accent, #a83b2a) 62%, #000) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.fn_links_stapel .fn_tipp_label { color: var(--ui-accent, #7a4a18); }
/* Im Keltischen ist das Waidgruen auf dem dunklen Grund zu dunkel (4,39:1,
   gemessen 05.11.2026) - die Ueberschrift bekommt dort einen hellen Ton. */
html[data-ui="keltisch"] .fn_links_stapel .fn_tipp_label { color: #cfe0a8; }
.fn_links_stapel .fn_tipp_text { color: var(--ui-text, #2b1d0e); }
.fn_links_stapel .fn_warnung { position: static; margin: 0; max-width: none; }
.fn_links_stapel .fn_feind_banner { position: static; margin: 0; }

/* Rechter Inspektor: das angeklickte Gebaeude */
.fn_info {
  position: absolute;
  top: calc(var(--fn-kopf-h, 70px) + .45rem);
  right: .55rem;
  width: 19.5rem;
  max-width: calc(100vw - 1.1rem);
  max-height: calc(100% - var(--fn-kopf-h, 70px) - var(--fn-dock-hoehe, 210px) - 1.2rem);
  overflow-y: auto;
  z-index: 11;
}

/* Breite Werte: unter 1500 px fallen die Beschriftungen weg (wie Neumark),
   unter 1100 px zusaetzlich die Materialwerte (sonst bricht die Leiste um). */
@media (max-width: 1100px) {
  .fn_ressourcen_leiste .fn_res_chip:not(.fn_chip_zeit):not(.fn_chip_bau) i { display: none; }
}
/* Auf mittleren Fenstern verlieren nur die Materialwerte ihre Beschriftung -
   die Zahl bleibt, der Name steht im Tooltip. So bleibt die Leiste eine Zeile. */
@media (max-width: 1700px) {
  /* Auf mittleren Fenstern tragen die Zeichen die Bedeutung - die
     Beschriftungen fallen weg, damit die Leiste EINE Zeile bleibt.
     (Gemessen: erst ab 1700 px ist Platz fuer die Worte.) */
  .fn_ressourcen_leiste .fn_res_chip:not(.fn_chip_bau) i { display: none; }
}
@media (max-width: 1100px) {
  .fn_ressourcen_leiste .fn_chip_material { display: none; }
}
@media (max-width: 900px) {
  .fn_topbar { flex-wrap: wrap; }
  .fn_links_stapel { display: none; }
  .fn_karte_panel { width: 162px; }
  #fn_karte_canvas { width: 146px; height: 146px; }
  .fn_karte_fuss { display: none; }
}
/* Erst am Telefon wird der Inspektor ein Streifen ueber dem Bau-Dock -
   auf dem Tablet bleibt er die rechte Spalte (wie Neumark). */
@media (max-width: 640px) {
  .fn_info {
    top: auto;
    left: .55rem;
    right: .55rem;
    width: auto;
    bottom: calc(var(--fn-dock-hoehe, 210px) + .6rem);
    max-height: calc(100% - var(--fn-kopf-h, 70px) - var(--fn-dock-hoehe, 210px) - 1.4rem);
  }
}
/* Am Handy bleiben nur die wichtigsten Werte in der Leiste, das Bau-Dock
   bekommt eine eigene Bildlaufleiste (sonst bliebe keine Karte sichtbar). */
@media (max-width: 1000px) {
  /* Auf dem Tablet bleiben Zeichen: Jahresknopf und Jahreszeit werden kurz. */
  .fn_hud_neuesjahr span[data-i18n] { display: none; }
  .fn_hud_neuesjahr .fn_knopf_icon { display: inline; }
  .fn_chip_zeit .fn_hud_jz { display: none; }
  /* ... dann zeigt das Kalenderzeichen, dass die Zahl das Jahr ist. */
  .fn_res_chip .fn_chip_jahr_icon { display: inline-flex; }
}
@media (max-width: 640px) {
  .fn_ressourcen_leiste .fn_chip_material,
  .fn_ressourcen_leiste .fn_chip_brot { display: none; }
  .fn_topbar { gap: .3rem; }
  .fn_res_chip { min-height: 30px; padding: .12rem .38rem; gap: .2rem; }
  .fn_chip_brot, .fn_chip_bau { display: none; }
  .fn_chip_icon { display: none; }
  .fn_chip_delta { display: none; }
  .fn_tempo_gruppe .fn_hud_knopf { min-width: 26px; padding: 3px 4px; }
  /* Am Handy sind nur noch wenige Chips da - dann duerfen die Beschriftungen
     wieder stehen, sonst ratet man, was die Zahl bedeutet. */
  .fn_topbar .fn_ressourcen_leiste .fn_res_chip:not(.fn_chip_bau) i { display: inline; }
  /* Karte und Inspektor teilen sich den schmalen Bildschirm nicht: sobald ein
     Gebaeude gewaehlt ist, tritt die Mini-Karte zurueck. */
  .fn_buehne:has(#fn_info:not([hidden])) .fn_karte_panel { display: none; }
  .fn_res_chip b { font-size: .86rem; }
  .fn_res_chip i { font-size: .58rem; }
  .fn_hud_aktionen .fn_hud_knopf { font-size: .7rem; padding: 4px 6px; min-height: 32px; }
  .fn_dock { max-height: 46vh; overflow-y: auto; }
  /* Die Statuszeile bleibt beim Blaettern unten stehen (sonst haengt sie
     unter dem letzten Kartenrand). Der Grund muss DECKEND sein: "inherit"
     holte das Maanderband des Docks mit und zog eine rote Zackenlinie quer
     durch die Hinweiszeile (gesehen 05.11.2026 am Handy). */
  .fn_dock_status { position: sticky; bottom: 0; background: var(--ui-panel-2, #e5d3ac); }
  .fn_karte_fuss { display: none; }
}

/* Mini-Karte: kleines Uebersichtsbild unten links ueber dem Baumenue. */
.fn_hud_karte[aria-pressed="true"] {
  background: #3f5f7f;
  border-color: #2f4a63;
  color: #f6f2e4;
  font-weight: 700;
}
.fn_karte_panel {
  position: absolute;
  left: 14px;
  bottom: calc(var(--fn-dock-hoehe, 210px) + 12px);
  width: 220px;
  padding: 8px 8px 6px;
  background: var(--ui-panel, #f2e7cd);
  border: 2px solid var(--ui-line, #8f3f2c);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(30, 20, 10, .35);
  z-index: 30;
}
.fn_karte_panel[hidden] { display: none; }
.fn_karte_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ui-serif, Georgia, serif);
  font-weight: 700;
  color: var(--ui-line, #8f3f2c);
  padding: 0 2px 4px;
}
.fn_karte_zu {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
#fn_karte_canvas {
  display: block;
  width: 204px;
  height: 204px;
  border-radius: 8px;
  border: 1px solid var(--ui-line-soft, #c9a15f);
  cursor: crosshair;
  background: #6f9a52;
}
.fn_karte_fuss {
  font-size: .68rem;
  color: #5a4530;
  padding: 4px 2px 0;
  line-height: 1.25;
}
/* Frei-Bau-Modus: der Knopf leuchtet, solange er an ist. */
.fn_hud_frei[aria-pressed="true"] {
  background: #3f7f45;
  border-color: #2f6234;
  color: #f6f2e4;
  font-weight: 700;
}
.fn_hud_knoepfe { display: flex; gap: 6px; margin-top: 4px; }
.fn_hud_knopf {
  flex: 1;
  background: #3a2f21;
  border: 1px solid #6b5433;
  color: #f1e6d2;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: .76rem;
  cursor: pointer;
}
.fn_hud_knopf:hover { background: #4d3d29; border-color: #b98a3c; }

/* Warnung (z. B. Bauernhof ohne Fläche in der Nähe) */
.fn_warnung {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: 340px;
  padding: 9px 13px;
  background: rgba(94, 48, 22, .94);
  border: 1px solid #d08a3c;
  border-radius: 10px;
  color: #fbe3c0;
  font-size: .82rem;
  line-height: 1.45;
  z-index: 22;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

/* Überfall der Germanen: Band über der Welt, pulsiert in der Warnphase. */
.fn_feind_banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100% - 28px));
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid #b34a32;
  background: rgba(56, 18, 12, .95);
  color: #ffe4c9;
  font-size: .9rem;
  line-height: 1.35;
  z-index: 24;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.fn_feind_banner[hidden] { display: none; }
.fn_feind_icon { font-size: 1.2rem; }
.fn_feind_banner[data-phase="warnung"] { animation: fn_feind_puls 1.4s ease-in-out infinite; }
.fn_feind_banner[data-phase="ansturm"] {
  border-color: #e2633f;
  background: rgba(84, 22, 12, .96);
  font-weight: 700;
}
.fn_feind_banner[data-phase="abgewehrt"] { border-color: #6f9a3c; background: rgba(28, 46, 20, .95); color: #eef7dd; }
.fn_feind_banner[data-phase="teuer"] { border-color: #d08a3c; background: rgba(66, 32, 14, .95); }
.fn_feind_banner[data-phase="niederlage"] { border-color: #b5372e; background: rgba(64, 12, 10, .96); }
@keyframes fn_feind_puls {
  0%, 100% { box-shadow: 0 8px 26px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 8px 30px rgba(220, 90, 50, .55); }
}

/* Info-Karte eines angeklickten Gebäudes (Desktop-Bedienung) */
/* Farben und Innenabstand - die Lage setzt die Regel "Rechter Inspektor"
   weiter oben (Layout nach Neumark 1400). */
.fn_info {
  padding: 12px 14px 13px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f6ecd8 0%, #e9d9b6 100%);
  border: 2px solid #b98a3c;
  color: #3a2a17;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  z-index: 23;
}
.fn_info[hidden] { display: none; }
.fn_info_kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fn_info_kat {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7a5a2e;
  font-weight: 700;
}
.fn_info_zu {
  border: 1px solid #b98a3c;
  background: #f8f1de;
  color: #6b4f22;
  border-radius: 7px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  line-height: 1;
}
.fn_info_zu:hover { background: #efe0bd; }
.fn_info_name {
  margin: 4px 0 8px;
  font-size: 1.06rem;
  font-family: Georgia, "Palatino Linotype", serif;
  color: #33240f;
}
.fn_info_daten {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  margin: 0 0 10px;
  font-size: .82rem;
}
.fn_info_daten > div { display: contents; }
.fn_info_daten dt { color: #7a5a2e; }
.fn_info_daten dd { margin: 0; text-align: right; font-weight: 700; color: #3a2a17; }
.fn_info_weg {
  width: 100%;
  padding: 6px 10px;
  font-size: .84rem;
}


/* ------------------------------------------------------------------ */
/* Baumenue unten (Muster Neumark 1400)                               */
/* ------------------------------------------------------------------ */
.fn_dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(43, 34, 25, .96) 0%, rgba(28, 23, 18, .98) 100%);
  border-top: 2px solid #b98a3c;
  color: #f1e6d2;
  z-index: 24;
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .45);
  padding-bottom: 44px;              /* Platz fuer die Fusszeile */
}
.fn_dock_zu .fn_dock_kat_tabs,
.fn_dock_zu .fn_dock_karten,
.fn_dock_zu .fn_dock_optionen { display: none; }
.fn_dock_zu .fn_dock_pfeil { transform: rotate(-90deg); display: inline-block; }

.fn_dock_leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  flex-wrap: wrap;
}
.fn_dock_griff {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #3a2f21;
  border: 1px solid #6b5433;
  color: #f6e7c6;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.fn_dock_griff:hover { background: #4d3d29; }

.fn_dock_tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fn_dock_tab {
  min-height: 40px;
  background: #33291d;
  border: 1px solid #55432c;
  color: #e7d9c0;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .82rem;
  cursor: pointer;
}
.fn_dock_tab:hover { background: #40331f; }
.fn_dock_tab_aktiv {
  background: #b98a3c;
  border-color: #e2b869;
  color: #241c12;
  font-weight: 700;
}

.fn_dock_wkz { display: flex; gap: 5px; margin-left: auto; }
.fn_wkz {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid #55432c;
  background: #3a2f21;
  color: #f1e6d2;
  font-size: 1rem;
  cursor: pointer;
}
.fn_wkz:hover { background: #4d3d29; border-color: #8a6a3d; }
.fn_wkz_hilfe { background: #7a5a2e; border-color: #b98a3c; }

/* Optionenzeile (Zustand eines Ackers, Weideart ...) */
.fn_dock_optionen {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 6px;
  flex-wrap: wrap;
}
.fn_dock_optionen:empty { display: none; }
.fn_optionen_label { color: #c9b48c; font-size: .78rem; }
.fn_option {
  background: #2f2619;
  border: 1px solid #55432c;
  color: #e7d9c0;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .78rem;
  cursor: pointer;
}
.fn_option:hover { background: #3d3122; }
body.fn_body #fn_wasser_pruefen { min-height: 40px; }
.fn_option_aktiv {
  background: #b98a3c;
  border-color: #e2b869;
  color: #241c12;
  font-weight: 700;
}

/* Kategorien der Gebaeude */
.fn_dock_kat_tabs {
  display: flex;
  gap: 5px;
  padding: 0 12px 6px;
  flex-wrap: wrap;
}
.fn_dock_kat_tabs:empty { display: none; }
.fn_kat {
  background: #33291d;
  border: 1px solid #55432c;
  color: #e7d9c0;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .78rem;
  cursor: pointer;
}
.fn_kat:hover { background: #40331f; }
.fn_kat_aktiv {
  background: #b98a3c;
  border-color: #e2b869;
  color: #241c12;
  font-weight: 700;
}

/* Die Karten */
.fn_dock_karten {
  display: flex;
  gap: 7px;
  padding: 2px 12px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.fn_dock_karten:empty { display: none; }
.fn_karte {
  flex: 0 0 auto;
  width: 124px;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  text-align: left;
  background: rgba(52, 42, 30, .85);
  border: 1px solid #4d3c26;
  color: #efe3cd;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: .78rem;
  cursor: pointer;
}
.fn_karte:hover { background: #4a3a27; border-color: #7d6039; }
.fn_karte_aktiv {
  background: #b98a3c;
  border-color: #e2b869;
  color: #241c12;
  font-weight: 700;
}
.fn_karte_name { line-height: 1.25; }
/* Ziehen und Fallenlassen: die Baukarte laesst sich auf die Karte ziehen. */
.fn_karte_ziehbar { cursor: grab; touch-action: none; }
.fn_karte_ziehbar:active { cursor: grabbing; }
body.fn_zieht .fn_canvas_wrap { cursor: copy; }
body.fn_zieht .fn_dock { opacity: .92; }

.fn_karte_kosten {
  font-size: .68rem;
  color: #c9b48c;
  letter-spacing: .02em;
}
.fn_karte_aktiv .fn_karte_kosten { color: #4a3718; }
/* Karten, deren Material nicht im Lager liegt, sind blass und gesperrt. */
.fn_karte_teuer {
  opacity: .45;
  cursor: not-allowed;
}
.fn_karte_teuer .fn_karte_kosten { color: #f09a7a; }
.fn_hud_material { color: #d8c49a; }
.fn_karte_punkt {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #c9a06a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
/* Farbcode je Kategorie - verrät den Stil auf einen Blick */
.fn_karte_punkt[data-kat="wohnen"] { background: #d9b25a; }
.fn_karte_punkt[data-kat="wirtschaft"] { background: #8d5b36; }
.fn_karte_punkt[data-kat="handwerk"] { background: #7d838d; }
.fn_karte_punkt[data-kat="kult"] { background: #4f8a45; }
.fn_karte_punkt[data-kat="roemisch"] { background: #b85a34; }
.fn_karte_punkt[data-kat="legion"] { background: #b5372e; }
.fn_karte_punkt[data-kat="modul"] { background: #9c6b3c; }
.fn_karte_punkt[data-kat="acker"] { background: #b98a3c; }
.fn_karte_punkt[data-kat="weide"] { background: #7fae45; }
.fn_karte_punkt[data-kat="weinberg"] { background: #6a4b7a; }
.fn_karte_punkt[data-kat="obstgarten"] { background: #d97a3a; }
.fn_karte_punkt[data-kat="grundstueck"] { background: #4f8a45; }
.fn_karte_punkt[data-kat="pfad"] { background: #a97f4e; }
.fn_karte_punkt[data-kat="weg"] { background: #8b6743; }
.fn_karte_punkt[data-kat="rom"] { background: #d9ccb2; }
.fn_karte_punkt[data-kat="aquaedukt"] { background: #3f7fa6; }
.fn_karte_punkt[data-kat="werkzeug"] { background: #9c6b3c; }

/* Hinweiszeile im Baumenue */
.fn_dock_status {
  padding: 0 12px 8px;
  font-size: .82rem;
  color: #d8c6a4;
  min-height: 1.2em;
}

/* ------------------------------------------------------------------ */
/* Startmenue (Muster Neumark 1400)                                    */
/* ------------------------------------------------------------------ */
.fn_start_overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 32%, rgba(46, 34, 20, .55) 0%, rgba(14, 11, 8, .82) 78%);
  backdrop-filter: blur(1.5px);
  z-index: 45;
  overflow-y: auto;
}
.fn_start_overlay_weg { display: none; }
.fn_start_karte {
  width: min(760px, 100%);
  background: linear-gradient(180deg, #33281b 0%, #241c13 100%);
  border: 2px solid #b98a3c;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
  color: #f1e6d2;
  padding: 22px 26px 24px;
}
.fn_start_hero { display: flex; gap: 18px; align-items: flex-start; }
.fn_start_logo { flex: 0 0 auto; }
.fn_start_eyebrow {
  display: block;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d8ab5e;
  margin-bottom: 4px;
}
.fn_start_titel {
  margin: 0 0 8px;
  font-size: 1.9rem;
  color: #f6e7c6;
  letter-spacing: .02em;
}
.fn_start_unter { margin: 0 0 10px; line-height: 1.55; font-size: .95rem; color: #e4d5ba; }
.fn_lernsatz {
  margin: 0;
  padding: 9px 12px;
  background: rgba(185, 138, 60, .16);
  border-left: 3px solid #b98a3c;
  border-radius: 0 8px 8px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #ecdcbe;
}
.fn_start_knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.fn_haupt_btn {
  background: #b98a3c;
  border: 1px solid #e2b869;
  color: #241c12;
  font-weight: 700;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: .95rem;
  cursor: pointer;
}
.fn_haupt_btn:hover { background: #cfa054; }
.fn_menue_btn {
  background: #3a2f21;
  border: 1px solid #6b5433;
  color: #f1e6d2;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: .9rem;
  cursor: pointer;
}
.fn_menue_btn:hover { background: #4d3d29; border-color: #b98a3c; }
.fn_menue_btn[disabled] { opacity: .45; cursor: default; }

/* ------------------------------------------------------------------ */
/* Ladeanzeige                                                          */
/* ------------------------------------------------------------------ */
.fn_laden {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1d1a16;
  z-index: 50;
}
.fn_laden_karte {
  text-align: center;
  color: #f3e7d0;
  padding: 22px 28px;
}
.fn_laden_logo { image-rendering: auto; }
.fn_ladeschiene {
  width: 240px;
  height: 10px;
  background: #33291d;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px auto 6px;
}
.fn_ladebalken { height: 100%; width: 0; background: #b98a3c; transition: width .3s; }
.fn_laden_prozent { margin: 0; font-size: .85rem; color: #c9b48c; }

/* ------------------------------------------------------------------ */
/* Hilfefenster und Aufgabenfenster                                    */
/* ------------------------------------------------------------------ */
.fn_dialog {
  border: 1px solid #b98a3c;
  border-radius: 14px;
  background: #241d15;
  color: #f1e6d2;
  max-width: 640px;
  width: calc(100% - 32px);
  padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.fn_dialog::backdrop { background: rgba(10, 8, 5, .68); }
.fn_dialog h2 { margin-top: 0; color: #f6e7c6; }
.fn_dialog h3 { color: #e8c98a; }
.fn_dialog_lehrziel {
  background: rgba(185, 138, 60, .16);
  border-left: 3px solid #b98a3c;
  padding: 9px 12px;
  border-radius: 0 8px 8px 0;
}
.fn_dialog_liste { line-height: 1.6; padding-left: 20px; }
.fn_dialog_knoepfe { margin-top: 16px; text-align: right; }
.fn_btn {
  border: 1px solid #b98a3c;
  background: #b98a3c;
  color: #241c12;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
}
.fn_aufgaben_liste { list-style: none; padding-left: 0; }
.fn_aufgabe {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid #3f3122;
}
.fn_aufgabe_haken { flex: 0 0 auto; width: 22px; text-align: center; color: #c9b48c; }
.fn_aufgabe_erledigt .fn_aufgabe_haken { color: #7fae45; }
.fn_aufgabe_titel { font-weight: 700; color: #f6e7c6; }
.fn_aufgabe_text { font-size: .84rem; color: #d8c6a4; }
.fn_aufgabe_zahl { font-size: .8rem; color: #c9b48c; }
.fn_aufgabe_erledigt .fn_aufgabe_titel { color: #b6d68a; }

/* Öffentliche Dienste im Aufgabenfenster                                  */
.fn_dialog_hinweis { font-size: .86rem; color: #d8c6a4; line-height: 1.5; }

/* Lager & Lieferketten im Aufgabenfenster                                 */
.fn_lager_liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 5px;
  margin: 10px 0 14px;
}
.fn_lager_ware {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid #3f3122;
  font-size: .82rem;
}
.fn_lager_name { color: #d8c6a4; }
.fn_lager_menge { font-weight: 700; color: #f6e7c6; }
.fn_lager_engpass {
  color: #f0b98a;
  font-size: .8rem;
  grid-column: 1 / -1;
}
.fn_lager_leer { color: #c9b48c; font-size: .84rem; grid-column: 1 / -1; }
.fn_dienste_liste { display: grid; gap: 4px; margin: 10px 0 16px; }
.fn_dienst {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid #3f3122;
  font-size: .84rem;
}
.fn_dienst_punkt { text-align: center; color: #8b7a5e; }
.fn_dienst_name { color: #d8c6a4; }
.fn_dienst_stand { color: #b9a582; font-size: .8rem; text-align: right; }
.fn_dienst_aktiv { border-color: #6e7f3f; background: rgba(127, 174, 69, .12); }
.fn_dienst_aktiv .fn_dienst_punkt { color: #a8e07a; }
.fn_dienst_aktiv .fn_dienst_name { color: #f1e6d2; }

/* ------------------------------------------------------------------ */
/* Fusszeile                                                           */
/* ------------------------------------------------------------------ */
.fn_footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d1a16;
  color: #c9b48c;
  font-size: .78rem;
  z-index: 26;
  border-top: 1px solid #3f3122;
}
.fn_footer a { color: #d9b25a; }

/* ------------------------------------------------------------------ */
/* Dark Mode                                                           */
/* ------------------------------------------------------------------ */
[data-theme="dark"] .fn_dock {
  background: linear-gradient(180deg, rgba(30, 25, 19, .97) 0%, rgba(18, 15, 11, .99) 100%);
}
[data-theme="dark"] .fn_hud,
[data-theme="dark"] .fn_start_karte { background: #221b13; }
[data-theme="dark"] .fn_karte { background: rgba(38, 31, 23, .9); }

/* ------------------------------------------------------------------ */
/* Kleine Bildschirme: das Baumenue wird flacher                       */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body.fn_body { --fn-kopf-hoehe: 50px; }
  .fn_footer { height: 34px; }
  .fn_titel { font-size: .95rem; white-space: nowrap; }
  .fn_leiste a { white-space: nowrap; font-size: .82rem; }
  .fn_marke { gap: 6px; }
  .fn_hud { top: 8px; right: 8px; padding: 7px 9px; min-width: 124px; }
  .fn_hud_zeile { font-size: .78rem; }
  .fn_wkz { width: 32px; height: 32px; }
  .fn_dock { padding-bottom: 34px; }
  .fn_dock_leiste { padding: 5px 8px; gap: 7px; }
  .fn_dock_karten { padding: 2px 8px 6px; }
  .fn_karte { width: 106px; min-height: 54px; font-size: .74rem; }
  .fn_dock_status { padding: 0 8px 6px; font-size: .76rem; }
  .fn_start_hero { flex-direction: column; gap: 10px; }
  .fn_start_titel { font-size: 1.5rem; }
  .fn_warnung { top: 8px; left: 8px; right: 8px; max-width: none; font-size: .76rem; }
}

/* ================================================================== */
/* ZWEI GESTALTUNGEN: ROEMISCH UND KELTISCH                            */
/* ================================================================== */
/* Die Welt bleibt in beiden gleich - nur die Bedienoberflaeche        */
/* (Kopfleiste, Baumenue, Anzeige, Fenster) wechselt Marmor/Rot/Gold   */
/* (roemisch) oder Eiche/Bronze/Waidgruen (keltisch). Die Wahl steht in */
/* localStorage (jupi_ui_theme) und wird als data-ui am <html> gesetzt. */
/* Die Variablen halten die Palette an einer Stelle.                   */
:root,
html[data-ui="roman"] {
  --ui-panel: #f2e7cd;
  --ui-panel-2: #e5d3ac;
  --ui-panel-3: #f8f1de;
  --ui-line: #8f3f2c;
  --ui-line-soft: #c9a15f;
  --ui-accent: #a83b2a;
  --ui-accent-2: #c9973f;
  --ui-text: #3a2a17;
  --ui-text-soft: #6f5732;
  --ui-on-accent: #fbf3e0;
  --ui-shadow: rgba(52, 34, 14, .35);
  --ui-radius: 7px;
  --ui-font: Georgia, "Palatino Linotype", "Times New Roman", serif;
  /* Farbpaare des Startmenues (roemisch = Standard). Der reine --ui-accent
     taugt nicht als Grund fuer Schrift: im Keltischen ist er ein mittleres
     Gruen, auf dem dunkle Schrift nur 2,6:1 erreicht. */
  --fn-gewaehlt-grund: #8f3f2c;
  --fn-gewaehlt-text: #fdf6e8;
  --fn-feld-grund: #fffdf6;
  --fn-feld-text: #3a2a17;
  --fn-titel-farbe: #8f3f2c;
}
html[data-ui="keltisch"] {
  --ui-panel: #26311f;
  --ui-panel-2: #1c2517;
  --ui-panel-3: #31402a;
  --ui-line: #a58544;
  --ui-line-soft: #6f7f45;
  --ui-accent: #7f9c4e;
  --ui-accent-2: #a58544;
  --ui-text: #f0e8d2;
  --ui-text-soft: #c4bb9a;
  --ui-on-accent: #14210f;
  --ui-shadow: rgba(8, 14, 6, .45);
  --ui-radius: 13px;
  --ui-font: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  /* Eigene Paare fuer "gewaehlt" im Startmenue: heller Text auf dunklem
     Grund. Der reine --ui-accent taugt dafuer nicht - im Keltischen ist er
     ein mittleres Gruen, auf dem die dunkle Schrift nur 2,6:1 erreicht. */
  --fn-gewaehlt-grund: #3a4a26;
  --fn-gewaehlt-text: #f4efd8;
  --fn-feld-grund: #1c2517;
  --fn-feld-text: #f0e8d2;
  --fn-titel-farbe: #d8e6b4;
}

/* Kopfleiste ------------------------------------------------------- */
body.fn_body .fn_leiste {
  background: linear-gradient(180deg, var(--ui-panel-3) 0%, var(--ui-panel-2) 100%);
  border-bottom: 3px solid var(--ui-line);
  color: var(--ui-text);
  box-shadow: inset 0 -1px 0 var(--ui-line-soft), 0 2px 12px var(--ui-shadow);
}
body.fn_body .fn_leiste a { color: var(--ui-accent); }
body.fn_body .fn_titel {
  font-family: var(--ui-font);
  color: var(--ui-text);
  letter-spacing: .04em;
}
body.fn_body .fn_vermerk {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  font-family: var(--ui-font);
  letter-spacing: .16em;
}
html[data-ui="keltisch"] body.fn_body .fn_leiste {
  border-bottom-color: var(--ui-accent-2);
  /* Flechtband-Kante: zwei versetzte Punktreihen */
  box-shadow: inset 0 -1px 0 rgba(165, 133, 68, .7), 0 2px 12px var(--ui-shadow);
}
html[data-ui="roman"] body.fn_body .fn_leiste::after {
  /* Maeander-Streifen unter der Kopfleiste */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 4px;
  background-image:
    repeating-linear-gradient(90deg, var(--ui-line) 0 10px, transparent 10px 14px),
    repeating-linear-gradient(90deg, var(--ui-accent-2) 0 4px, transparent 4px 14px);
  opacity: .9;
  pointer-events: none;
}
html[data-ui="roman"] body.fn_body .fn_leiste { position: fixed; }

/* Umschalter Römisch / Keltisch ----------------------------------- */
.fn_ui_theme {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid var(--ui-line-soft);
}
.fn_ui_btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text-soft);
  font-family: var(--ui-font);
  font-size: .78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.fn_ui_btn:hover { color: var(--ui-text); border-color: var(--ui-line-soft); }
.fn_ui_btn[aria-pressed="true"] {
  background: var(--ui-accent);
  border-color: var(--ui-accent-2);
  color: var(--ui-on-accent);
  font-weight: 700;
}

/* Baumenue --------------------------------------------------------- */
body.fn_body .fn_dock {
  background: linear-gradient(180deg, var(--ui-panel-3) 0%, var(--ui-panel-2) 100%);
  border-top: 2px solid var(--ui-line);
  box-shadow: 0 -6px 22px var(--ui-shadow);
}
body.fn_body .fn_dock_griff,
body.fn_body .fn_dock_tab,
body.fn_body .fn_kat,
body.fn_body .fn_option,
body.fn_body .fn_wkz,
body.fn_body .fn_hud_knopf {
  background: var(--ui-panel-3);
  border-color: var(--ui-line-soft);
  color: var(--ui-text);
  font-family: var(--ui-font);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_dock_griff:hover,
body.fn_body .fn_dock_tab:hover,
body.fn_body .fn_kat:hover,
body.fn_body .fn_option:hover,
body.fn_body .fn_wkz:hover {
  background: var(--ui-panel);
  border-color: var(--ui-accent);
}
body.fn_body .fn_dock_tab,
body.fn_body .fn_kat,
body.fn_body .fn_option { border-radius: 999px; }
body.fn_body .fn_dock_tab_aktiv,
body.fn_body .fn_kat_aktiv,
body.fn_body .fn_option_aktiv {
  background: var(--ui-accent);
  border-color: var(--ui-accent-2);
  color: var(--ui-on-accent);
  font-weight: 700;
}
body.fn_body .fn_wkz_hilfe {
  background: var(--ui-accent-2);
  border-color: var(--ui-line);
  color: var(--ui-on-accent);
}
body.fn_body .fn_karte {
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  color: var(--ui-text);
  border-radius: var(--ui-radius);
  font-family: var(--ui-font);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
body.fn_body .fn_karte:hover { background: #fffaf0; border-color: var(--ui-line); }
html[data-ui="keltisch"] body.fn_body .fn_karte:hover { background: var(--ui-panel-3); border-color: var(--ui-accent); }
body.fn_body .fn_karte_aktiv {
  background: var(--ui-accent);
  border-color: var(--ui-accent-2);
  color: var(--ui-on-accent);
}
html[data-ui="roman"] body.fn_body .fn_karte_aktiv { background: var(--ui-line); color: var(--ui-on-accent); }
body.fn_body .fn_dock_status { color: var(--ui-text-soft); font-family: var(--ui-font); }
body.fn_body .fn_optionen_label { color: var(--ui-text-soft); }

/* Anzeige oben rechts --------------------------------------------- */
body.fn_body .fn_hud {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-top: 4px solid var(--ui-line);
  color: var(--ui-text);
  border-radius: var(--ui-radius);
  box-shadow: 0 6px 22px var(--ui-shadow);
  font-family: var(--ui-font);
}
body.fn_body .fn_hud_wert { color: var(--ui-text); }
body.fn_body .fn_hud_label { color: var(--ui-text-soft); }
body.fn_body .fn_hud_knopf {
  background: var(--ui-panel-3);
  border-color: var(--ui-line-soft);
  color: var(--ui-text);
}
body.fn_body .fn_hud_knopf:hover { background: var(--ui-panel); border-color: var(--ui-accent); }

/* Fenster, Knoepfe und Aufgaben ---------------------------------- */
body.fn_body .fn_dialog {
  background: var(--ui-panel-2);
  color: var(--ui-text);
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-radius);
  font-family: var(--ui-font);
}
body.fn_body .fn_dialog h2 { color: var(--ui-text); font-family: var(--ui-font); }
body.fn_body .fn_dialog h3 { color: var(--ui-accent); font-family: var(--ui-font); }
body.fn_body .fn_dialog_lehrziel {
  background: rgba(201, 151, 63, .18);
  border-left: 4px solid var(--ui-accent);
  color: var(--ui-text);
}
body.fn_body .fn_dialog_liste { color: var(--ui-text); }
body.fn_body .fn_dialog_hinweis { color: var(--ui-text-soft); }
body.fn_body .fn_btn {
  background: var(--ui-accent);
  border-color: var(--ui-accent-2);
  color: var(--ui-on-accent);
  font-family: var(--ui-font);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_btn:hover { filter: brightness(1.08); }
body.fn_body .fn_aufgabe { border-bottom-color: var(--ui-line-soft); }
body.fn_body .fn_aufgabe_titel { color: var(--ui-text); }
body.fn_body .fn_aufgabe_text { color: var(--ui-text-soft); }
body.fn_body .fn_aufgabe_zahl { color: var(--ui-text-soft); }
body.fn_body .fn_aufgabe_erledigt .fn_aufgabe_titel { color: #5f8a3a; }
body.fn_body .fn_aufgabe_haken { color: var(--ui-text-soft); }
body.fn_body .fn_dienst {
  background: rgba(0, 0, 0, .06);
  border-color: var(--ui-line-soft);
  color: var(--ui-text);
}
body.fn_body .fn_dienst_name { color: var(--ui-text); }
body.fn_body .fn_dienst_stand { color: var(--ui-text-soft); }
body.fn_body .fn_dienst_aktiv { border-color: #6e7f3f; background: rgba(127, 174, 69, .16); }
body.fn_body .fn_dienst_aktiv .fn_dienst_punkt { color: #4f7f27; }
html[data-theme="dark"] body.fn_body .fn_dienst_aktiv .fn_dienst_punkt { color: #a8e07a; }
body.fn_body .fn_warnung {
  background: var(--ui-panel-3);
  border: 2px solid var(--ui-line);
  color: var(--ui-text);
  border-radius: var(--ui-radius);
  font-family: var(--ui-font);
}
body.fn_body .fn_footer {
  background: var(--ui-panel-2);
  border-top: 1px solid var(--ui-line-soft);
  color: var(--ui-text-soft);
  font-family: var(--ui-font);
}
body.fn_body .fn_footer a { color: var(--ui-accent); }

/* Startmenue ------------------------------------------------------ */
body.fn_body .fn_start_karte {
  background: var(--ui-panel-2);
  border: 2px solid var(--ui-line);
  color: var(--ui-text);
  border-radius: calc(var(--ui-radius) + 4px);
  font-family: var(--ui-font);
}
body.fn_body .fn_start_karte h2,
body.fn_body .fn_start_titel { color: var(--ui-text); font-family: var(--ui-font); }

/* Dunkelmodus: die Gestaltungsfarben bleiben fuehrend, nur der      */
/* Untergrund der Karten wird etwas tiefer.                          */
[data-theme="dark"] body.fn_body .fn_karte { background: var(--ui-panel-2); }
[data-theme="dark"] body.fn_body .fn_start_karte,
[data-theme="dark"] body.fn_body .fn_dialog { background: var(--ui-panel-2); }

/* ------------------------------------------------------------------ */
/* Menüs: Kopf-Knopf, Pausenmenü, Einstellungen, Startmenü-Raster      */
/* ------------------------------------------------------------------ */
body.fn_body .fn_menue_knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ui-line-soft);
  background: var(--ui-panel-3);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
body.fn_body .fn_menue_knopf:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
body.fn_body .fn_menue_knopf .fn_menue_zeichen { font-size: .95rem; line-height: 1; }

/* Startmenü: drei Gruppen nebeneinander */
body.fn_body .fn_start_raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0 4px;
}
body.fn_body .fn_start_gruppe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_start_gruppe h3 {
  margin: 0 0 3px;
  font-family: var(--ui-font);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Eigene Farbe je Gestaltung: kleine Versalienschrift braucht mehr
     Kontrast als eine grosse Flaeche (Keltisch kam mit dem Akzent nur auf
     3,6:1, mit color-mix sogar nur 1,9:1). */
  color: var(--fn-titel-farbe);
}
body.fn_body .fn_start_gruppe .fn_haupt_btn,
body.fn_body .fn_start_gruppe .fn_menue_btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-family: var(--ui-font);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_start_gruppe .fn_haupt_btn {
  background: var(--ui-accent);
  border: 1px solid var(--ui-accent-2);
  color: var(--ui-on-accent);
}
body.fn_body .fn_start_gruppe .fn_haupt_btn:hover { background: var(--ui-accent-2); }
body.fn_body .fn_start_gruppe .fn_menue_btn {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line-soft);
  color: var(--ui-text);
}
body.fn_body .fn_start_gruppe .fn_menue_btn:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
body.fn_body .fn_start_gruppe .fn_menue_btn[disabled] {
  opacity: .65;
  cursor: default;
  border-style: dashed;
}
body.fn_body .fn_bald_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.fn_body .fn_bald_marke {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ui-accent-2);
  color: var(--ui-on-accent);
}
body.fn_body .fn_start_abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-line-soft);
}
body.fn_body .fn_start_stand {
  font-size: .74rem;
  color: var(--ui-text-soft);
  letter-spacing: .04em;
}
body.fn_body .fn_start_sprachen { display: inline-flex; gap: 6px; }
body.fn_body .fn_sprache_btn,
body.fn_body .fn_einst_btn {
  border: 1px solid var(--ui-line-soft);
  background: var(--ui-panel-3);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: .8rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
body.fn_body .fn_sprache_btn:hover,
body.fn_body .fn_einst_btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
body.fn_body .fn_sprache_btn.fn_einst_aktiv,
body.fn_body .fn_einst_btn.fn_einst_aktiv {
  background: var(--ui-accent);
  border-color: var(--ui-accent-2);
  color: var(--ui-on-accent);
  font-weight: 700;
}

/* Einstellungen */
body.fn_body .fn_einst { width: min(620px, 94vw); }
body.fn_body .fn_einst_liste { display: grid; gap: 10px; margin-top: 8px; }
body.fn_body .fn_einst_reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 9px 11px;
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_einst_name {
  font-family: var(--ui-font);
  font-size: .86rem;
  font-weight: 700;
  color: var(--ui-text);
}
body.fn_body .fn_einst_wahl { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Pausenmenü */
body.fn_body .fn_menue_dialog { width: min(420px, 92vw); }
body.fn_body .fn_menue_liste {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
body.fn_body .fn_menue_liste .fn_haupt_btn,
body.fn_body .fn_menue_liste .fn_menue_btn {
  width: 100%;
  text-align: left;
  font-family: var(--ui-font);
  padding: 10px 14px;
  border-radius: var(--ui-radius);
}
body.fn_body .fn_menue_liste .fn_haupt_btn {
  background: var(--ui-accent);
  border: 1px solid var(--ui-accent-2);
  color: var(--ui-on-accent);
}
body.fn_body .fn_menue_liste .fn_haupt_btn:hover { background: var(--ui-accent-2); }
body.fn_body .fn_menue_liste .fn_menue_btn {
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  color: var(--ui-text);
}
body.fn_body .fn_menue_liste .fn_menue_btn:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* Lesbarkeit im Startmenü: auf Pergament dunkle Schrift, nicht Creme */
body.fn_body .fn_start_unter { color: var(--ui-text-soft); }
body.fn_body .fn_start_eyebrow { color: var(--ui-accent); }
body.fn_body .fn_lernsatz {
  background: color-mix(in srgb, var(--ui-accent-2) 18%, transparent);
  border-left: 3px solid var(--ui-accent);
  color: var(--ui-text);
}

/* ------------------------------------------------------------------ */
/* Kartengroesse im Startmenue (Klein/Mittel/Gross/Riesig)            */
/* ------------------------------------------------------------------ */
body.fn_body .fn_karte {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-panel-2);
  margin-bottom: 4px;
}
body.fn_body .fn_karte_titel {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ui-text-soft);
  font-weight: 700;
}
body.fn_body .fn_karte_reihe { display: flex; gap: 5px; }
body.fn_body .fn_karte_btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 4px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ui-panel) 88%, #fff 12%);
  color: var(--ui-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
body.fn_body .fn_karte_btn small { font-size: .66rem; font-weight: 500; color: var(--ui-text-soft); }
body.fn_body .fn_karte_btn:hover { border-color: var(--ui-accent); }
body.fn_body .fn_karte_btn.fn_karte_aktiv {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff8ec;
}
body.fn_body .fn_karte_btn.fn_karte_aktiv small { color: #fff8ec; opacity: .85; }
body.fn_body .fn_karte_info { margin: 0; font-size: .72rem; color: var(--ui-text-soft); }
body.fn_body .fn_karte_neu { font-size: .78rem; padding: 5px 8px; }

@media (max-width: 640px) {
  body.fn_body .fn_start_raster { grid-template-columns: 1fr; }
  body.fn_body .fn_einst_reihe { flex-direction: column; align-items: flex-start; }

  /* Kopf am Handy: zwei Zeilen. Marke und Werkzeuge (Sprachwahl,
     Roemisch/Keltisch) passen sonst nicht nebeneinander - vorher schob
     der Umschalter die Marke aus dem Bild. */
  body.fn_body { --fn-kopf-hoehe: 86px; }
  body.fn_body .fn_leiste {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 5px 10px;
    align-content: center;
  }
  body.fn_body .fn_zone_links { order: 1; }
  body.fn_body .fn_marke { order: 2; flex: 0 1 auto; }
  body.fn_body .fn_werkzeuge {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-end;
    gap: 8px;
  }
  body.fn_body .fn_vermerk { display: none; }
  body.fn_body .fn_titel { font-size: .98rem; }
  body.fn_body .jupi_sprachen_select { max-width: 9.5rem; font-size: .74rem; }
  body.fn_body .fn_ui_btn { padding: 3px 8px; font-size: .72rem; }
  body.fn_body .fn_hud { top: 6px; right: 6px; }
}


/* ---------------------------------------------------------------------------
   GUI-Pass nach dem Referenzbild (01.11.2026)
   Dunkles Holz und Stein mit Gold - oben die Werteleiste, links die
   Symbol-Leiste, unten das Bau-Dock. Die Karten bleiben hell (Lesbarkeit).
   --------------------------------------------------------------------------- */
:root {
  --fn-chrome: #2b2116;
  --fn-chrome-2: #362a1c;
  --fn-chrome-3: #43331f;
  --fn-gold: #c9a15f;
  --fn-gold-hell: #e8cf95;
  --fn-chrome-text: #f0e3c6;
}
.fn_topbar {
  top: .35rem; left: .4rem; right: .4rem;
  padding: .3rem .5rem;
  background: linear-gradient(180deg, var(--fn-chrome-2), var(--fn-chrome));
  border: 1px solid #6b5433;
  border-radius: .7rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.fn_marke {
  display: flex; align-items: center; gap: .45rem;
  flex: 0 0 auto;
  padding-right: .6rem; margin-right: .1rem;
  border-right: 1px solid #6b5433;
  white-space: nowrap;
}
.fn_marke_wappen { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.fn_marke_text { display: flex; flex-direction: column; line-height: 1.05; }
.fn_marke_name {
  font-family: var(--ui-serif, Georgia, serif);
  font-size: .92rem; color: var(--fn-gold-hell); letter-spacing: .02em;
}
.fn_marke_unter {
  font-style: normal; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .09em; color: #b39468;
}
.fn_res_chip {
  background: var(--fn-chrome-3);
  border-color: #6b5433;
  color: var(--fn-chrome-text);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .08);
}
.fn_res_chip b { color: var(--fn-gold-hell); }
.fn_res_chip i { color: #b39468; }
.fn_res_chip .fn_chip_icon { font-style: normal; font-size: .86rem; opacity: .95; }
.fn_chip_delta { font-size: .68rem; font-weight: 700; color: #93d07a; }
.fn_chip_delta[data-richtung="minus"] { color: #e08b6a; }
.fn_chip_delta:empty { display: none; }
.fn_res_chip.fn_chip_material { background: #3a2c1c; }
.fn_hud_aktionen .fn_hud_knopf {
  background: var(--fn-chrome-3);
  border: 1px solid #6b5433;
  color: var(--fn-chrome-text);
}
.fn_hud_aktionen .fn_hud_knopf:hover:not(:disabled) { background: #4c3a23; }
.fn_tempo_gruppe { display: inline-flex; gap: 2px; }
.fn_tempo_gruppe .fn_tempo { min-width: 30px; }
.fn_tempo[aria-pressed="true"] {
  background: #6b5433; color: #fff3d6; border-color: var(--fn-gold);
}
/* Linke Symbol-Leiste */
.fn_seitenleiste {
  position: absolute;
  top: calc(var(--fn-kopf-h, 70px) + .45rem);
  left: .4rem;
  display: flex; flex-direction: column; gap: .2rem;
  padding: .3rem;
  background: linear-gradient(180deg, var(--fn-chrome-2), var(--fn-chrome));
  border: 1px solid #6b5433; border-radius: .6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  z-index: 11;
}
.fn_seiten_knopf {
  display: flex; align-items: center; gap: .35rem;
  min-width: 2.1rem; padding: .3rem .4rem;
  background: transparent; border: 1px solid transparent; border-radius: .4rem;
  color: var(--fn-chrome-text); font-size: .72rem; cursor: pointer;
  text-align: left;
}
.fn_seiten_knopf span { font-size: .95rem; line-height: 1; }
.fn_seiten_knopf b { font-weight: 600; color: var(--fn-gold-hell); }
/* Bis 1500 px ist die Leiste eine schmale Symbol-Leiste (Platz fuer die Karte). */
@media (max-width: 1500px) {
  .fn_seiten_knopf b { display: none; }
  .fn_seiten_knopf { justify-content: center; padding: .34rem .35rem; }
}
/* Nur die MARKE IM HUD faellt weg - die Kopfzeile behaelt ihre Mittelzone
   (Logo + Name), sonst waere Regel 3.13.2 am Handy/Tablet verletzt. Vorher
   traf diese Regel beide, weil sie dieselbe Klasse tragen. */
@media (max-width: 1250px) {
  .fn_topbar .fn_marke { display: none; }
}
/* Eine Zeile halten: unter 1400 px nur Wappen und Chips ohne Beiwerk. */
@media (max-width: 1400px) {
  .fn_marke_unter { display: none; }
  .fn_marke_name { font-size: .84rem; }
  .fn_chip_bau, .fn_chip_brot { display: none; }
  .fn_topbar { gap: .3rem; }
  .fn_res_chip { padding: .18rem .44rem; gap: .25rem; }
  .fn_hud_aktionen .fn_hud_knopf { padding: 4px 7px; font-size: .76rem; }
  .fn_chip_zeit .fn_hud_uhr { display: none; }
}
/* Unter 1350 px werden Menue und Aufgaben zu Zeichen. */
@media (max-width: 1350px) {
  .fn_hud_aufgaben span[data-i18n] { display: none; }
  .fn_hud_aufgaben svg { display: inline-block; }
}
.fn_seiten_knopf:hover { background: #4c3a23; border-color: #6b5433; }
/* Die Spalte mit dem naechsten Schritt rueckt neben die Leiste. */
.fn_links_stapel { left: calc(2.6rem + .55rem); }
/* Dock im dunklen Holz */
.fn_dock {
  background: linear-gradient(180deg, var(--fn-chrome-2), var(--fn-chrome));
  border: 1px solid #6b5433;
}
.fn_dock_tab {
  background: var(--fn-chrome-3); color: var(--fn-gold-hell);
  border: 1px solid #6b5433;
}
.fn_dock_tab[aria-selected="true"], .fn_dock_tab.fn_dock_tab_aktiv {
  background: #6b5433; color: #fff3d6; border-color: var(--fn-gold);
}
.fn_dock_griff, .fn_dock_status, .fn_dock_suche { color: #cbb48a; }
.fn_kat {
  background: var(--fn-chrome-3); color: var(--fn-gold-hell);
  border: 1px solid #6b5433;
}
.fn_kat.fn_kat_aktiv {
  background: #6b5433; color: #fff3d6; border-color: var(--fn-gold);
}
/* Mini-Karte im dunklen Rahmen */
.fn_karte_panel {
  background: linear-gradient(180deg, var(--fn-chrome-2), var(--fn-chrome));
  border: 1px solid #6b5433;
}
.fn_karte_kopf { color: var(--fn-gold-hell); }
.fn_karte_fuss { color: #cbb48a; }
.fn_karte_zu { color: var(--fn-gold-hell); }
/* Inspektor rechts im dunklen Panel */
.fn_info {
  background: linear-gradient(180deg, var(--fn-chrome-2), var(--fn-chrome));
  border: 1px solid #6b5433;
  color: var(--fn-chrome-text);
}
.fn_info_kat { color: #b39468; }
.fn_info_name { color: var(--fn-gold-hell); }
.fn_info_daten dt { color: #b39468; }
/* display:flex wuerde das hidden-Attribut aushebeln (Stufen-Zeile). */
.fn_info_daten > div[hidden] { display: none !important; }
.fn_info_daten dd { color: var(--fn-chrome-text); }
@media (max-width: 900px) {
  .fn_seitenleiste { display: none; }
  .fn_links_stapel { left: .55rem; }
}

/* ===========================================================================
   GEZEICHNETE ZEICHEN statt Emojis (Nutzer-Wunsch 01.11.2026)
   ===========================================================================
   Der Zeichen-Vorrat steht als <symbol>-Sammlung oben in index.html. Jedes
   Bild im Spiel ist ein <svg class="fn_i"><use href="#fn-i-..."></use></svg>.
   Vorteile gegenueber Emojis:
     - gleiche Form auf Windows, Android und iOS (Emojis sind je System anders)
     - sie nehmen die Textfarbe an (currentColor) und passen damit in beide
       Gestaltungen - heller Goldton auf dunklem Holz, dunkler Ton auf Papier
     - sie sind eine Linie, keine Farbflaeche - das wirkt wie eine Zeichnung
   Groesse: 1em in der Schriftgroesse des Elements, ueber --fn-i-gross feiner.
   =========================================================================== */
.fn_i,
.fn_sprite ~ * svg,
.fn_res_chip svg,
.fn_hud_knopf svg,
.fn_dock_tab svg,
.fn_kat svg,
.fn_seiten_knopf svg,
.fn_wkz svg,
.fn_feind_icon svg,
.fn_dock_pfeil svg,
.fn_karte_zu svg,
.fn_info_zu svg,
.fn_suche_zu svg,
.fn_marke_wappen svg,
.jupi_sprachen_icon svg {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
/* Der Vorrat selbst nimmt keinen Platz ein. */
.fn_sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -- Marke (Wappen und Name der Siedlung) -------------------------------- */
.fn_marke_wappen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .45rem;
  background: rgba(0, 0, 0, .22);
  border: 1px solid #6b5433;
  color: var(--fn-gold-hell, #f0d9a8);
}
.fn_marke_wappen svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.5; }

/* -- Waren-Chips: das Zeichen traegt die Ware, die Zahl steht daneben ----- */
.fn_res_chip .fn_chip_icon {
  display: inline-flex;
  align-items: center;
  color: var(--fn-gold-hell, #f0d9a8);
}
.fn_res_chip .fn_chip_icon svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }
/* Jede Ware bekommt ihre Zeichenfarbe - wie die farbigen Kisten im Lager. */
.fn_chip_bewohner .fn_chip_icon { color: #a9c4d8; }
.fn_chip_vorrat   .fn_chip_icon { color: #e3c069; }
.fn_chip_laune    .fn_chip_icon { color: #9fd18a; }
.fn_chip_brot     .fn_chip_icon { color: #e0b878; }
.fn_chip_holz     .fn_chip_icon { color: #c08a52; }
.fn_chip_bretter  .fn_chip_icon { color: #d9a869; }
.fn_chip_stein    .fn_chip_icon { color: #b9b6ac; }
.fn_chip_ton      .fn_chip_icon { color: #cf8b5e; }
.fn_chip_eisen    .fn_chip_icon { color: #9fb3cd; }
.fn_chip_wehr     .fn_chip_icon { color: #d8b06a; }

/* -- Knoepfe in der oberen Leiste ---------------------------------------- */
.fn_hud_knopf {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.fn_hud_knopf svg { width: 1rem; height: 1rem; }
/* Auf mittleren Fenstern tragen die Zeichen allein die Bedeutung - dann
   verschwindet die Beschriftung und das Zeichen kommt. */
@media (max-width: 1350px) {
  .fn_hud_menue .fn_knopf_text,
  .fn_hud_aufgaben .fn_knopf_text { display: none; }
  .fn_hud_menue .fn_knopf_icon,
  .fn_hud_aufgaben .fn_knopf_icon { display: inline-block; }
}
.fn_tempo_gruppe .fn_tempo svg { width: .95rem; height: .95rem; }
.fn_tempo[aria-pressed="true"] svg { stroke-width: 2; }

/* -- Linke Symbol-Leiste ------------------------------------------------- */
.fn_seiten_knopf svg { width: 1.1rem; height: 1.1rem; }

/* -- Bau-Dock ------------------------------------------------------------ */
.fn_dock_tab { display: inline-flex; align-items: center; gap: .32rem; }
.fn_dock_tab svg { width: 1.05rem; height: 1.05rem; }
.fn_kat { display: inline-flex; align-items: center; gap: .3rem; }
.fn_kat svg { width: .95rem; height: .95rem; }
.fn_wkz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fn_wkz svg { width: 1.05rem; height: 1.05rem; }
.fn_dock_pfeil svg { width: .9rem; height: .9rem; }
.fn_dock_griff[aria-expanded="false"] .fn_dock_pfeil svg { transform: rotate(180deg); }

/* -- Schliessen-Riegel --------------------------------------------------- */
.fn_karte_zu svg, .fn_info_zu svg { width: .95rem; height: .95rem; }
.fn_suche_zu svg { width: .85rem; height: .85rem; }

/* -- Feind-Banner -------------------------------------------------------- */
.fn_feind_icon svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }

/* -- Sprachwahl im Kopf --------------------------------------------------- */
.jupi_sprachen_icon { display: inline-flex; align-items: center; color: #fff; }
.jupi_sprachen_icon svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }


/* ===========================================================================
   STARTMENUE: Spielmodus, Schwierigkeit, Welt erstellen
   ===========================================================================
   Das Startmenue ist jetzt die eigentliche Spielvorbereitung (Nutzer-Wunsch
   01.11.2026): Modus waehlen, Schwierigkeit waehlen, Welt erstellen - erst
   dann gruenden. Bis dahin waren Modus und Schwierigkeit gar nicht vorhanden,
   "Frei bauen" war ein Knopf mitten im Spiel.

   FARBEN: das Startmenue folgt der Gestaltung (data-ui). Deshalb stehen hier
   NUR die Gestaltungs-Variablen (--ui-*) und keine festen Hexwerte - sonst
   waere die Schrift in der roemischen Fassung hell auf hell.
   Die Karten sind <button> mit role="radio" - sie funktionieren also auch
   ohne JavaScript als sichtbare Liste und mit der Tastatur.
   =========================================================================== */
body.fn_body .fn_start_karte { width: min(1000px, 100%); }
body.fn_body .fn_start_raster {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
/* Links Modus, rechts die Welt, darunter das Lernen ueber die volle Breite:
   so stehen die zwei grossen Entscheidungen nebeneinander und die kleinere
   Auswahl darunter - das Startmenue passt ohne Blaettern ins Bild. */
body.fn_body .fn_start_modi { grid-column: 1; grid-row: 1; }
body.fn_body .fn_start_welt { grid-column: 2; grid-row: 1; }
body.fn_body .fn_start_lernen {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem .45rem;
  align-items: start;
  margin-top: 0;
}
body.fn_body .fn_start_lernen .fn_menue_btn { padding: 6px 10px; font-size: .8rem; }
/* Die Ueberschriften laufen ueber die ganze Breite, die Knoepfe stehen im
   Raster darunter. */
body.fn_body .fn_start_lernen > h3 { grid-column: 1 / -1; }

/* -- Spielmodus: drei breite Karten -------------------------------------- */
body.fn_body .fn_modus_reihe { display: grid; gap: .4rem; margin-bottom: .3rem; }
body.fn_body .fn_modus_karte {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .55rem;
  align-items: center;
  text-align: left;
  padding: .55rem .65rem;
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  font-family: var(--ui-font);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
body.fn_body .fn_modus_karte > svg {
  grid-row: 1 / span 2;
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ui-accent);
}
body.fn_body .fn_modus_name { font-weight: 700; font-size: .92rem; color: var(--ui-text); }
body.fn_body .fn_modus_text { font-size: .76rem; line-height: 1.35; color: var(--ui-text-soft); }
body.fn_body .fn_modus_karte:hover {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-panel-3) 82%, var(--ui-accent) 18%);
}
body.fn_body .fn_modus_karte[aria-checked="true"] {
  background: var(--fn-gewaehlt-grund);
  border-color: var(--ui-accent-2);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--fn-gewaehlt-grund) 45%, transparent);
}
body.fn_body .fn_modus_karte[aria-checked="true"] > svg { color: var(--fn-gewaehlt-text); stroke-width: 1.9; }
body.fn_body .fn_modus_karte[aria-checked="true"] .fn_modus_name { color: var(--fn-gewaehlt-text); }
body.fn_body .fn_modus_karte[aria-checked="true"] .fn_modus_text {
  color: var(--fn-gewaehlt-text);
  opacity: .92;
}

/* -- Schwierigkeit: vier schmale Riegel ---------------------------------- */
body.fn_body .fn_start_zwischentitel { margin-top: .6rem !important; }
body.fn_body .fn_stufe_reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: .35rem;
}
body.fn_body .fn_stufe_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  min-height: 46px;
  padding: .4rem .25rem;
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
body.fn_body .fn_stufe_btn > svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ui-accent);
}
body.fn_body .fn_stufe_btn:hover {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-panel-3) 82%, var(--ui-accent) 18%);
}
body.fn_body .fn_stufe_btn[aria-checked="true"] {
  background: var(--fn-gewaehlt-grund);
  border-color: var(--ui-accent-2);
  color: var(--fn-gewaehlt-text);
}
body.fn_body .fn_stufe_btn[aria-checked="true"] > svg { color: var(--fn-gewaehlt-text); stroke-width: 1.9; }
body.fn_body .fn_lage_satz {
  margin: .4rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ui-text-soft);
}
body.fn_body .fn_lage_satz:empty { display: none; }

/* -- Welt erstellen: Karte + Startwert ---------------------------------- */
/* Die Kartenbox fuellt die rechte Spalte - sonst bleibt sie schmal und
   "Neuer Kartenwurf" bricht unmotiviert um. */
body.fn_body .fn_start_welt .fn_karte { width: 100%; margin-bottom: .55rem; }
body.fn_body .fn_seed_zeile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
}
body.fn_body .fn_seed_label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ui-text-soft);
}
body.fn_body .fn_seed_feld {
  flex: 1 1 4.5rem;
  min-width: 0;
  min-height: 34px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--fn-feld-text);
  background: var(--fn-feld-grund);
  border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
  padding: .28rem .5rem;
}
body.fn_body .fn_seed_feld:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
body.fn_body .fn_karte_neu { flex: 0 0 auto; min-height: 34px; padding: .3rem .55rem; font-size: .74rem; white-space: nowrap; }
/* Die Startgruppe setzt ihre Knoepfe auf 100 % Breite - in der Startwert-Zeile
   wuerde der Kartenwurf damit das Feld erdruecken. Hier gilt der Inhalt. */
body.fn_body .fn_start_welt .fn_seed_zeile .fn_karte_neu {
  width: auto;
  flex: 0 0 auto;
  text-align: center;
}

/* -- Der grosse Startknopf ---------------------------------------------- */
body.fn_body .fn_start_gross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 48px;
  margin-top: .5rem;
  padding: .8rem 1rem;
  font-family: var(--ui-font);
  font-size: 1rem;
  font-weight: 700;
  background: var(--fn-gewaehlt-grund);
  border: 1px solid var(--ui-accent-2);
  color: var(--fn-gewaehlt-text);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_start_gross:hover { background: var(--ui-accent-2); }
body.fn_body .fn_start_gross svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  stroke: none;
}
/* Die Knoepfe in den Startgruppen tragen links ein Zeichen. */
body.fn_body .fn_start_lernen .fn_menue_btn {
  display: flex;
  align-items: center;
  gap: .45rem;
}
body.fn_body .fn_start_lernen .fn_menue_btn > svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

/* Am schmalen Fenster steht alles untereinander (eine Spalte). */
@media (max-width: 900px) {
  body.fn_body .fn_start_karte { width: 100%; padding: 16px 16px 18px; }
  body.fn_body .fn_start_raster { grid-template-columns: 1fr; }
  body.fn_body .fn_start_modi,
  body.fn_body .fn_start_welt,
  body.fn_body .fn_start_lernen { grid-column: 1; grid-row: auto; }
  body.fn_body .fn_start_hero { gap: 12px; }
  body.fn_body .fn_start_logo { width: 56px; height: 56px; }
  body.fn_body .fn_start_titel { font-size: 1.5rem; }
}
@media (max-width: 560px) {
  body.fn_body .fn_start_overlay { padding: 8px; align-items: start; }
  body.fn_body .fn_start_karte { padding: 13px 12px 16px; border-radius: 12px; }
  body.fn_body .fn_start_hero { flex-direction: column; gap: 8px; }
  body.fn_body .fn_stufe_reihe { grid-template-columns: repeat(2, 1fr); }
  /* Startwert und Kartenwurf untereinander. Das Feld darf dabei NICHT
     mitwachsen - flex:1 in einer Spalte streckte sonst die Hoehe (96 px). */
  body.fn_body .fn_seed_zeile { flex-direction: column; align-items: stretch; gap: .25rem; }
  body.fn_body .fn_seed_feld { flex: 0 0 auto; width: 100%; }
  body.fn_body .fn_karte_neu { width: 100%; }
}

/* -- Kompakt: das ganze Startmenue soll ohne Blaettern ins Bild passen ------
   Auf 1280 x 900 (dem Schul-Laptop) bleibt unter dem Lernraster kein Platz
   fuer die Fusszeile, wenn Titel und Karten gross bleiben. Deshalb wird bei
   niedrigen Fenstern enger gesetzt - nicht kleiner, nur knapper. */
@media (max-height: 960px) {
  body.fn_body .fn_start_overlay { padding: 10px; }
  body.fn_body .fn_start_karte { padding: 14px 20px 16px; }
  body.fn_body .fn_start_logo { width: 60px; height: 60px; }
  body.fn_body .fn_start_titel { font-size: 1.6rem; margin-bottom: 5px; }
  body.fn_body .fn_start_unter { font-size: .86rem; line-height: 1.42; margin-bottom: 6px; }
  body.fn_body .fn_start_eyebrow { font-size: .7rem; margin-bottom: 2px; }
  body.fn_body .fn_start_raster { gap: 10px; margin: 10px 0 2px; }
  body.fn_body .fn_start_gruppe { padding: 9px 11px; gap: 5px; }
  body.fn_body .fn_modus_karte { padding: .42rem .55rem; }
  body.fn_body .fn_modus_name { font-size: .86rem; }
  body.fn_body .fn_modus_text { font-size: .72rem; }
  body.fn_body .fn_stufe_btn { min-height: 42px; padding: .3rem .22rem; }
  body.fn_body .fn_lage_satz { margin-top: .28rem; font-size: .7rem; }
  body.fn_body .fn_start_gross { min-height: 44px; padding: .65rem .9rem; margin-top: .35rem; }
  body.fn_body .fn_lernsatz { margin-top: 10px; padding: 7px 11px; font-size: .8rem; line-height: 1.4; }
  body.fn_body .fn_start_abschluss { margin-top: 10px; padding-top: 8px; }
}

/* -- Der Durchgang als Chip in der oberen Leiste ------------------------- */
.fn_chip_lage {
  border-left: 4px solid #7f6a44;
  background: #33281b;
}
.fn_chip_lage > svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: #d8ab5e;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fn_chip_lage b {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #e8d9b6;
  white-space: nowrap;
}
.fn_chip_lage[data-frei="1"] { background: #2c3a24; border-left-color: #7fae45; }
.fn_chip_lage[data-frei="1"] > svg { stroke: #b6d68a; }
@media (max-width: 1500px) { .fn_chip_lage { display: none; } }

/* ==================================================================== */
/* BAUMENUE: PORTIKUS MIT MODELLBILDERN (04.11.2026)                    */
/* ==================================================================== */
/* Nutzer-Wunsch: "kompakter, ein paar mehr Icons, eine Vorschau der    */
/* Gebaeude, die Kosten unter dem Bild und der Name darunter - und      */
/* vielleicht ein roemischer Look mit Saeulen, alles in Serifen-Kapiteln".*/
/*                                                                      */
/* Aufbau einer Karte (von oben nach unten, so misst es die Sichtprobe):*/
/*   .fn_karte_bild   - Bild des Modells (vorschau.js) oder ein Zeichen  */
/*   .fn_karte_kosten - je Ware ein Zeichen + Menge                      */
/*   .fn_karte_name   - Name, im Roemischen in Serif-KAPITAELCHEN        */
/*                                                                      */
/* Das Menue steht auf einem Portikus: zwei Saeulen rahmen die Karten,  */
/* oben laeuft ein Maaanderband. Alle Farben kommen aus den Variablen    */
/* der beiden Gestaltungen (--ui-*), damit "Roemisch" und "Keltisch"     */
/* dieselbe Ordnung mit eigenem Material zeigen.                        */
/* ==================================================================== */

body.fn_body .fn_dock {
  /* Masse an einer Stelle: Kartenbreite und Bildhoehe bestimmen die Hoehe
     des ganzen Menues. Kleiner = kompakter. */
  --dock-karte-breite: 112px;
  --dock-bild-hoehe: 56px;
  padding-bottom: 44px;              /* Platz fuer die Fusszeile */
  border-top: 2px solid var(--ui-line);
  background-color: var(--ui-panel-2);
  background-image: linear-gradient(180deg, var(--ui-panel-3) 0%, var(--ui-panel-2) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 -8px 26px var(--ui-shadow);
  isolation: isolate;
}

/* Maanderband an der Oberkante (nur roemische Gestaltung). */
html[data-ui="roman"] body.fn_body .fn_dock {
  background-image:
    repeating-linear-gradient(90deg, var(--ui-line) 0 9px, transparent 9px 13px),
    repeating-linear-gradient(90deg, var(--ui-accent-2) 0 4px, transparent 4px 13px),
    linear-gradient(180deg, var(--ui-panel-3) 0%, var(--ui-panel-2) 100%);
  background-size: 100% 4px, 100% 2px, 100% 100%;
  background-position: 0 0, 0 4px, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* -- Die zwei Saeulen rechts und links ---------------------------------- */
/* Abakus (Kapitell) und Fuss sind breiter als der kannelierte Schaft -
   genau daran erkennt das Auge eine Saeule und keine Bildlaufleiste. */
@media (min-width: 920px) {
  body.fn_body .fn_dock {
    padding-left: 42px;
    padding-right: 42px;
  }
  body.fn_body .fn_dock::before,
  body.fn_body .fn_dock::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 50px;
    width: 26px;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-image:
      /* Abakus */
      linear-gradient(180deg,
        color-mix(in srgb, var(--ui-panel-3) 55%, #fff),
        color-mix(in srgb, var(--ui-panel-3) 88%, #000 12%)),
      /* Fuss */
      linear-gradient(180deg,
        color-mix(in srgb, var(--ui-panel-3) 90%, #000 10%),
        color-mix(in srgb, var(--ui-panel-2) 82%, #000 18%)),
      /* Kanneluren */
      repeating-linear-gradient(90deg,
        rgba(0, 0, 0, .10) 0 1.4px,
        rgba(255, 255, 255, .30) 1.4px 4.4px,
        rgba(0, 0, 0, .05) 4.4px 5.8px),
      /* Schaft */
      linear-gradient(90deg,
        color-mix(in srgb, var(--ui-panel-2) 96%, #000 4%),
        color-mix(in srgb, var(--ui-panel-3) 98%, #fff 2%),
        color-mix(in srgb, var(--ui-panel-2) 96%, #000 4%));
    background-size: 26px 11px, 26px 10px, 18px calc(100% - 21px), 18px calc(100% - 21px);
    background-position: 50% 0, 50% 100%, 50% 11px, 50% 11px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
  }
  body.fn_body .fn_dock::before { left: 7px; }
  body.fn_body .fn_dock::after { right: 7px; }
  /* Ueber den Saeulen liegt nichts - die Leiste beginnt erst danach. */
  body.fn_body .fn_dock > * { position: relative; z-index: 1; }
}

/* -- Leiste: alles in einer Zeile --------------------------------------- */
body.fn_body .fn_dock_leiste {
  padding: 4px 10px;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
body.fn_body .fn_dock_griff {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: .73rem;
  font-weight: 700;
}
body.fn_body .fn_dock_griff_icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.fn_body .fn_dock_pfeil { display: inline-flex; transition: transform .16s ease; }
body.fn_body .fn_dock_griff[aria-expanded="false"] .fn_dock_pfeil { transform: rotate(180deg); }
body.fn_body .fn_dock_tab { padding: 4px 9px; font-size: .74rem; }
body.fn_body .fn_dock_tab svg { width: .98rem; height: .98rem; }
body.fn_body .fn_kat { padding: 3px 10px; font-size: .71rem; }
body.fn_body .fn_kat svg { width: .9rem; height: .9rem; }
body.fn_body .fn_dock_kat_tabs { padding: 1px 12px 5px; gap: 5px; }
body.fn_body .fn_wkz { width: 30px; height: 30px; border-radius: 7px; }
body.fn_body .fn_wkz svg { width: .98rem; height: .98rem; }

/* -- Suche jetzt IN der Leiste (spart eine ganze Zeile) ----------------- */
body.fn_body .fn_dock_suche {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0;
  flex: 0 1 190px;
  min-width: 120px;
}
body.fn_body .fn_suche_zeichen {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: .92rem;
  height: .92rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  color: var(--ui-text-soft);
  pointer-events: none;
}
body.fn_body .fn_dock_suche .fn_suche_feld {
  flex: 1 1 auto;
  width: 100%;
  height: 30px;
  padding: 3px 26px 3px 27px;
  font-size: .76rem;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel-3) 88%, #fff 12%);
  border: 1px solid var(--ui-line-soft);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}
body.fn_body .fn_dock_suche .fn_suche_feld::placeholder { color: var(--ui-text-soft); opacity: .85; }
html[data-ui="roman"] body.fn_body .fn_dock_suche .fn_suche_feld::placeholder {
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
}
body.fn_body .fn_dock_suche .fn_suche_feld:focus {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}
body.fn_body .fn_dock_suche .fn_suche_zu {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-soft);
  background: transparent;
}
body.fn_body .fn_dock_suche .fn_suche_zu:hover { color: var(--ui-accent); background: rgba(0, 0, 0, .07); }

/* Der Schliessen-Knopf am rechten Ende der Leiste. */
body.fn_body .fn_dock_zu_knopf {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--ui-line-soft);
  background: var(--ui-panel-3);
  color: var(--ui-text-soft);
  cursor: pointer;
}
body.fn_body .fn_dock_zu_knopf:hover {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
  background: var(--ui-panel);
}
body.fn_body .fn_dock_zu_knopf svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* -- Die Karten --------------------------------------------------------- */
body.fn_body .fn_dock_karten {
  gap: 6px;
  padding: 2px 12px 4px;
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-line-soft) 80%, transparent) transparent;
}
body.fn_body .fn_dock_karten::-webkit-scrollbar { height: 7px; }
body.fn_body .fn_dock_karten::-webkit-scrollbar-track { background: transparent; }
body.fn_body .fn_dock_karten::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-line-soft) 70%, transparent);
  border-radius: 4px;
}
body.fn_body .fn_dock_karten::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ui-line-soft) 100%, transparent);
}
body.fn_body .fn_karte {
  width: var(--dock-karte-breite, 112px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px 4px 3px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid var(--ui-line-soft);
  background: color-mix(in srgb, var(--ui-panel-3) 92%, #fff 8%);
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .16);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
body.fn_body .fn_karte:hover {
  transform: translateY(-2px);
  border-color: var(--ui-accent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .24);
}
body.fn_body .fn_karte:focus-visible {
  outline: 2px solid var(--ui-accent-2);
  outline-offset: 1px;
}
body.fn_body .fn_karte_bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--dock-bild-hoehe, 56px);
  border-radius: 4px;
  overflow: hidden;
  background-image:
    radial-gradient(120% 82% at 50% 106%, color-mix(in srgb, var(--ui-line-soft) 32%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-panel-3) 96%, #fff), var(--ui-panel-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-line-soft) 60%, transparent);
}
/* Bis das Modellbild fertig ist, steht das Zeichen der Kategorie da. */
body.fn_body .fn_karte_platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ui-line) 62%, var(--ui-text-soft) 38%);
  opacity: .3;
  transition: opacity .25s ease;
}
body.fn_body .fn_karte_platzhalter svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.fn_body .fn_karte_bild_fertig .fn_karte_platzhalter { opacity: 0; }
body.fn_body .fn_karte_malerei {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .22s ease;
}
body.fn_body .fn_karte_bild_fertig .fn_karte_malerei { opacity: 1; }
body.fn_body .fn_karte_bild_zeichen svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: color-mix(in srgb, var(--ui-line) 80%, var(--ui-text) 20%);
  opacity: .88;
}
body.fn_body .fn_karte_bild_zeichen svg:has(use[href^="#fn-i-acker"], use[href^="#fn-i-weide"], use[href^="#fn-i-weinberg"], use[href^="#fn-i-obstgarten"], use[href^="#fn-i-grundstueck"]) {
  opacity: 1; width: 62%; height: 62%;
}
html[data-ui="keltisch"] body.fn_body .fn_karte_bild_zeichen svg {
  color: color-mix(in srgb, var(--ui-line) 70%, var(--ui-text) 30%);
}

/* Kosten unter dem Bild - je Ware ein gezeichnetes Zeichen. */
body.fn_body .fn_karte_kosten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 15px;
  font-size: .66rem;
  line-height: 1;
  color: var(--ui-text-soft);
}
body.fn_body .fn_kosten {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
body.fn_body .fn_kosten svg {
  width: .8rem;
  height: .8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.fn_body .fn_kosten b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.fn_body .fn_kosten_holz { color: #8f5526; }
body.fn_body .fn_kosten_bretter { color: #9c6a2b; }
body.fn_body .fn_kosten_eisen { color: #55677e; }
/* Keltische Gestaltung: die Karten liegen auf dunklem Grund - die dunklen
   Braun-/Blautoene der hellen Karte waeren dort fast unsichtbar
   (gemessen 2,6:1 am 05.11.2026). */
html[data-ui="keltisch"] body.fn_body .fn_kosten_holz { color: #d9a05e; }
html[data-ui="keltisch"] body.fn_body .fn_kosten_bretter { color: #e2ba7c; }
html[data-ui="keltisch"] body.fn_body .fn_kosten_eisen { color: #a9bdd4; }
body.fn_body .fn_kosten_flaeche { color: var(--ui-text-soft); }
body.fn_body .fn_kosten_flaeche svg { stroke-width: 1.6; }
body.fn_body .fn_kosten_frei { font-size: .6rem; }

/* Der Name steht GANZ unten, im Roemischen in Serif-Kapitalen. */
body.fn_body .fn_karte_name {
  display: block;
  min-height: 2.1em;
  font-size: .68rem;
  line-height: 1.1;
  font-weight: 600;
  color: var(--ui-text);
  overflow: hidden;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
html[data-ui="roman"] body.fn_body .fn_karte_name {
  font-family: var(--ui-font);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ui-text) 90%, var(--ui-line) 10%);
}

/* Die gewaehlte Karte: dunkelrote Tafel mit Goldrand. */
html[data-ui="roman"] body.fn_body .fn_karte_aktiv,
html[data-ui="keltisch"] body.fn_body .fn_karte_aktiv {
  background: var(--ui-accent);
  border-color: var(--ui-accent-2);
  color: var(--ui-on-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent-2) 58%, transparent),
              0 4px 12px rgba(0, 0, 0, .3);
}
html[data-ui="roman"] body.fn_body .fn_karte_aktiv {
  background: linear-gradient(180deg, #a04a33, var(--ui-line));
}
html[data-ui="roman"] body.fn_body .fn_karte_aktiv .fn_karte_name,
html[data-ui="keltisch"] body.fn_body .fn_karte_aktiv .fn_karte_name {
  color: var(--ui-on-accent);
}
html[data-ui="roman"] body.fn_body .fn_karte_aktiv .fn_kosten,
html[data-ui="keltisch"] body.fn_body .fn_karte_aktiv .fn_kosten {
  color: color-mix(in srgb, var(--ui-on-accent) 84%, transparent);
}
html[data-ui="roman"] body.fn_body .fn_karte_aktiv .fn_karte_bild,
html[data-ui="keltisch"] body.fn_body .fn_karte_aktiv .fn_karte_bild {
  box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .55);
}

/* Nicht leistbar: blass und gesperrt. 0,42 war so blass, dass im Keltischen
   weder Name noch Kosten zu lesen waren - 0,55 bleibt "gesperrt", ist aber
   noch lesbar (Sichtprobe 05.11.2026). */
body.fn_body .fn_karte_teuer {
  opacity: .55;
  filter: saturate(.6);
}
body.fn_body .fn_karte_teuer:hover { transform: none; box-shadow: none; }

/* Ziehen und Fallenlassen: die Karte hebt sich beim Anfassen. */
body.fn_body .fn_karte_ziehbar:active { cursor: grabbing; }
body.fn_body .fn_karte_zieht {
  border-color: var(--ui-accent-2);
  box-shadow: 0 0 0 2px var(--ui-accent-2), 0 8px 18px rgba(0, 0, 0, .35);
}

/* -- Hinweiszeile: eine schmale Zeile, kein Kasten ---------------------- */
body.fn_body .fn_dock_status {
  padding: 0 12px 5px;
  font-size: .73rem;
  line-height: 1.28;
  min-height: 1.1em;
  color: var(--ui-text-soft);
}

/* -- Serifen-Kapitel (nur roemische Gestaltung) ------------------------- */
/* Die Beschriftungen stehen wie in Stein gehauen in Kapitaelchen. Die    */
/* Hinweiszeile bleibt in echten Kleinbuchstaben (Kapitaelchen), damit    */
/* ein ganzer Satz lesbar bleibt.                                        */
html[data-ui="roman"] body.fn_body .fn_dock_griff,
html[data-ui="roman"] body.fn_body .fn_dock_tab,
html[data-ui="roman"] body.fn_body .fn_kat {
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: .075em;
}
html[data-ui="roman"] body.fn_body .fn_dock_griff { letter-spacing: .08em; }
html[data-ui="roman"] body.fn_body .fn_dock_tab { font-size: .66rem; letter-spacing: .05em; padding: 4px 8px; }
html[data-ui="roman"] body.fn_body .fn_kat { font-size: .66rem; letter-spacing: .055em; }
html[data-ui="roman"] body.fn_body .fn_dock_status {
  font-family: var(--ui-font);
  font-variant-caps: all-small-caps;
  letter-spacing: .05em;
  font-size: .84rem;
}
html[data-ui="roman"] body.fn_body .fn_optionen_label,
html[data-ui="roman"] body.fn_body .fn_option {
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
}

/* -- Zu (Griff oder Schliessen): nur die Leiste bleibt ------------------ */
body.fn_body .fn_dock_zu { padding-bottom: 44px; }
body.fn_body .fn_dock_zu .fn_dock_suche,
body.fn_body .fn_dock_zu .fn_dock_status,
body.fn_body .fn_dock_zu .fn_dock_wkz { display: none; }
body.fn_body .fn_dock_zu::before,
body.fn_body .fn_dock_zu::after { display: none; }
body.fn_body .fn_dock_zu .fn_dock_tab { opacity: .74; }

/* -- Mittlere Fenster (1024): Suche und Werkzeuge enger ----------------- */
@media (min-width: 641px) and (max-width: 1180px) {
  body.fn_body .fn_dock_suche { flex: 0 1 130px; min-width: 104px; }
  body.fn_body .fn_dock_suche .fn_suche_feld { font-size: .7rem; }
  body.fn_body .fn_wkz { width: 28px; height: 28px; }
  body.fn_body .fn_wkz svg { width: .9rem; height: .9rem; }
  body.fn_body .fn_dock_zu_knopf { width: 28px; height: 28px; }
  html[data-ui="roman"] body.fn_body .fn_dock_tab { font-size: .62rem; letter-spacing: .04em; padding: 4px 7px; }
  html[data-ui="roman"] body.fn_body .fn_kat { font-size: .62rem; letter-spacing: .04em; }
}

/* -- Handy: Zeichen statt Beschriftung, alles in zwei Zeilen ------------ */
@media (max-width: 640px) {
  body.fn_body .fn_dock {
    --dock-karte-breite: 92px;
    --dock-bild-hoehe: 48px;
    padding-left: 0;
    padding-right: 0;
  }
  body.fn_body .fn_dock_leiste { padding: 3px 8px; gap: 5px; row-gap: 4px; }
  /* Die Beschriftung der Reiter kostet auf 390 px eine ganze Zeile -
     das Zeichen allein ist gross und eindeutig. */
  body.fn_body .fn_dock_tab > span { display: none; }
  body.fn_body .fn_dock_tab { padding: 6px 10px; }
  body.fn_body .fn_dock_griff > span:not(.fn_dock_pfeil) { display: none; }
  body.fn_body .fn_dock_griff { padding: 6px 9px; }
  body.fn_body .fn_dock_suche { order: 3; flex: 1 1 130px; min-width: 110px; }
  body.fn_body .fn_dock_wkz { order: 4; margin-left: 0; gap: 4px; }
  body.fn_body .fn_wkz { width: 30px; height: 30px; }
  body.fn_body .fn_dock_zu_knopf { order: 5; width: 30px; height: 30px; }
  body.fn_body .fn_kat { padding: 2px 8px; font-size: .64rem; }
  body.fn_body .fn_dock_kat_tabs { padding: 0 8px 4px; gap: 4px; }
  /* Neun Kategorien brachen auf 390 px in vier Zeilen um (gemessen 144 px)
     und nahmen der Karte den Platz. Jetzt EINE Zeile mit Bildlauf; die
     gewaehlte Kategorie holt spiel.js von selbst ins Bild. */
  body.fn_body .fn_dock_kat_tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.fn_body .fn_dock_kat_tabs::-webkit-scrollbar { display: none; }
  body.fn_body .fn_kat { flex: 0 0 auto; white-space: nowrap; }
  body.fn_body .fn_dock_karten { padding: 2px 8px 4px; gap: 5px; }
  body.fn_body .fn_karte_name,
  html[data-ui="roman"] body.fn_body .fn_karte_name { font-size: .53rem; min-height: 2.2em; letter-spacing: .02em; }
  body.fn_body .fn_dock_suche .fn_suche_feld { font-size: .68rem; }
  body.fn_body .fn_karte_kosten { font-size: .6rem; gap: 4px; min-height: 13px; }
  body.fn_body .fn_kosten svg { width: .72rem; height: .72rem; }
  body.fn_body .fn_dock_status { padding: 0 8px 4px; font-size: .68rem; }
  html[data-ui="roman"] body.fn_body .fn_dock_status { font-size: .76rem; }
}

/* -- Dunkel: dieselbe Tafel bei Abendlicht ------------------------------ */
[data-theme="dark"] body.fn_body .fn_karte {
  background: color-mix(in srgb, var(--ui-panel-2) 92%, #000 8%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
[data-theme="dark"] body.fn_body .fn_karte_bild {
  background-image:
    radial-gradient(120% 82% at 50% 106%, rgba(0, 0, 0, .38), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ui-panel-3) 78%, #000 22%),
      color-mix(in srgb, var(--ui-panel-2) 72%, #000 28%));
}
[data-theme="dark"] body.fn_body .fn_kosten_holz { color: #c98a4c; }
[data-theme="dark"] body.fn_body .fn_kosten_bretter { color: #d8a45c; }
[data-theme="dark"] body.fn_body .fn_kosten_eisen { color: #93a7bd; }
[data-theme="dark"] body.fn_body .fn_karte_platzhalter {
  color: color-mix(in srgb, var(--ui-line-soft) 70%, var(--ui-text) 30%);
  opacity: .35;
}

/* ==================================================================== */
/* RUNDE 2 (04.11.2026): KARTENVORSCHAU, STARTOPTIONEN, VOLLBILD        */
/* ==================================================================== */
/* Der Nutzer wollte im Startmenue "mehr Startoptionen, Karten-Preview".*/
/* Die Vorschau ist ein echtes Bild der Karte aus dem Weltgenerator -   */
/* Fluss, Ufer, Wiesen, Wald, Berge und die Lagerstaetten. Daneben      */
/* stehen die Zeichen der Legende, darunter zwei weitere Startoptionen  */
/* (Zeit und Landschaft), die dieselben Einstellungen sind wie im       */
/* Einstellungs-Fenster.                                                */
/* ==================================================================== */

body.fn_body .fn_vorschau {
  display: grid;
  grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  padding: .45rem;
  margin-bottom: .45rem;
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-line-soft) 45%, transparent);
}
body.fn_body .fn_vorschau_bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 1px solid var(--ui-line-soft);
  background: #6f9a52;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
body.fn_body .fn_vorschau_seite {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
body.fn_body .fn_vorschau_titel {
  font-family: var(--ui-font);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text);
}
body.fn_body .fn_vorschau_legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 6px;
  font-size: .66rem;
  line-height: 1.25;
  color: var(--ui-text-soft);
}
body.fn_body .fn_vorschau_legende li {
  display: flex;
  align-items: center;
  gap: .32rem;
}
body.fn_body .fn_punkt {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .38);
}
body.fn_body .fn_punkt_wasser { background: #3f7fa6; }
body.fn_body .fn_punkt_wald { background: #37582f; }
body.fn_body .fn_punkt_berg { background: #8a897c; }
body.fn_body .fn_punkt_eisen { background: #8fd0ff; }
body.fn_body .fn_punkt_stein { background: #ffe08a; }
body.fn_body .fn_punkt_ton { background: #c98b5a; }
body.fn_body .fn_punkt_lager { background: #f6e8c4; }

/* -- Die zwei Startoptionen (Zeit, Landschaft) -------------------------- */
body.fn_body .fn_start_fein {
  display: grid;
  gap: .3rem;
  margin-bottom: .5rem;
}
body.fn_body .fn_fein_reihe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
}
body.fn_body .fn_fein_label {
  min-width: 4.7rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ui-text-soft);
}
body.fn_body .fn_fein_btn {
  min-height: 30px;
  padding: .2rem .55rem;
  font-family: var(--ui-font);
  font-size: .72rem;
  color: var(--ui-text);
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
body.fn_body .fn_fein_btn:hover { border-color: var(--ui-accent); }
body.fn_body .fn_fein_btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
body.fn_body .fn_fein_aktiv {
  background: var(--fn-gewaehlt-grund);
  border-color: var(--ui-accent-2);
  color: var(--fn-gewaehlt-text);
  font-weight: 700;
}

/* -- Vollbild-Knopf im HUD ---------------------------------------------- */
body.fn_body .fn_hud_vollbild[aria-pressed="true"] {
  background: var(--ui-accent-2);
  border-color: var(--ui-line);
  color: var(--ui-on-accent);
}

/* -- Kleine Fenster ------------------------------------------------------ */
@media (max-width: 900px) {
  body.fn_body .fn_vorschau { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body.fn_body .fn_vorschau {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: left;
  }
  body.fn_body .fn_vorschau_bild { max-width: 200px; }
  body.fn_body .fn_vorschau_legende {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  body.fn_body .fn_fein_label { min-width: 100%; }
}

/* -- Startmenue ins Bild holen (04.11.2026, Runde 2) --------------------- */
/* Mit Kartenvorschau und zwei Startoptionen ist das Startmenue hoeher
   geworden als das Fenster (1002 px bei 844 px Platz). Diese Zeilen holen
   die fehlenden Zentimeter an Polstern und Rahmen - die Schrift bleibt so
   gross, dass man sie in der Klasse noch lesen kann. */
@media (min-height: 640px) {
  body.fn_body .fn_vorschau {
    grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
    padding: .4rem;
    gap: .45rem;
    margin-bottom: .35rem;
  }
  body.fn_body .fn_vorschau_titel { font-size: .69rem; }
  body.fn_body .fn_vorschau_legende { font-size: .62rem; gap: 0 5px; }
  body.fn_body .fn_start_welt .fn_karte { margin-bottom: .35rem; padding: .4rem .5rem .45rem; }
  body.fn_body .fn_start_welt .fn_karte_btn { min-height: 38px; padding: .28rem .18rem; }
  body.fn_body .fn_start_fein { gap: .22rem; margin-bottom: .35rem; }
  body.fn_body .fn_fein_btn { min-height: 27px; font-size: .69rem; }
  body.fn_body .fn_start_lernen { gap: .22rem .4rem; }
  body.fn_body .fn_lernsatz { margin-top: 6px; padding: 5px 9px; }
  body.fn_body .fn_start_abschluss { margin-top: 6px; padding-top: 6px; }
  body.fn_body .fn_start_hero { gap: 10px; }
  body.fn_body .fn_start_titel { margin-bottom: 2px; }
  body.fn_body .fn_start_unter { margin-bottom: 4px; }
  body.fn_body .fn_start_gross { margin-top: .35rem; }
}
@media (min-height: 640px) {
  body.fn_body .fn_start_zwischentitel { margin-top: .28rem !important; }
  body.fn_body .fn_start_gruppe { gap: 5px; }
  body.fn_body .fn_modus_karte { padding: .45rem .55rem; }
  body.fn_body .fn_lernsatz { font-size: .78rem; line-height: 1.3; }
  body.fn_body .fn_start_abschluss { font-size: .72rem; }
  body.fn_body .fn_start_lernen .fn_menue_btn { padding: 5px 9px; font-size: .76rem; }
}
@media (min-height: 640px) {
  body.fn_body .fn_start_karte { padding: 10px 18px 10px; }
  body.fn_body .fn_start_logo { width: 60px; height: 60px; }
  body.fn_body .fn_start_raster { margin: 8px 0 2px; }
}

/* -- Startmenue: zwei Spalten, links Modus + Lernen --------------------- */
/* Mit der Kartenvorschau braucht "Welt erstellen" die volle rechte Spalte.
   Links stehen Spielmodus, Schwierigkeit UND Lernen untereinander - so ist
   das Menue so hoch wie die rechte Spalte und passt ohne Blaettern. */
body.fn_body .fn_start_modi { grid-column: 1; grid-row: 1; }
body.fn_body .fn_start_links {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-self: start;
}
body.fn_body .fn_start_welt { grid-column: 2; grid-row: 1 / span 2; }
body.fn_body .fn_start_lernen {
  grid-column: auto;
  grid-row: auto;
  margin-top: 0;
}
@media (max-width: 900px) {
  body.fn_body .fn_start_links { grid-column: 1; grid-row: auto; }
  body.fn_body .fn_start_welt { grid-column: 1; grid-row: auto; }
}
@media (min-height: 640px) {
  body.fn_body .fn_vorschau { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); }
  body.fn_body .fn_vorschau_legende { font-size: .66rem; }
}

/* -- Griffigkeit: Bedienziele bleiben ueber 34 px (Plattform 3.13.5) ---- */
/* Beim Kompaktmachen waren die Werkzeugknoepfe auf 30 px gerutscht - das
   ist unter der Plattform-Grenze von 36 px. Hier wieder 34 px (Maus) und
   36 px (Handy). */
body.fn_body .fn_wkz { width: 34px; height: 34px; }
body.fn_body .fn_dock_zu_knopf { width: 34px; height: 34px; }
body.fn_body .fn_dock_tab { min-height: 40px; min-width: 40px; }
body.fn_body .fn_kat { min-height: 28px; }
@media (max-width: 640px) {
  body.fn_body .fn_wkz { width: 36px; height: 36px; }
  body.fn_body .fn_dock_zu_knopf { width: 36px; height: 36px; }
  body.fn_body .fn_dock_tab { min-height: 40px; padding: 7px 11px; }
  body.fn_body .fn_kat { min-height: 32px; }
}

/* Der Vollbild-Knopf traegt auf mittleren Fenstern nur sein Zeichen -
   sonst steht er breiter da als Menue und Karte (die dort auch nur das
   Zeichen zeigen). */
@media (max-width: 1350px) {
  body.fn_body .fn_hud_vollbild .fn_knopf_text { display: none; }
}

/* -- Handy: die Aktionsreihe bricht um, statt rechts herauszuragen -------- */
/* Gemessen 05.11.2026 bei 390 px: die Reihe war 403 px breit und der letzte
   Knopf (Aufgaben) lag 13 px ausserhalb des Bildes; die Knöpfe waren nur
   31 x 32 px gross (Plattform-Grenze 3.13.5: mindestens 36 px). Jetzt zwei
   Reihen mit 36 px - alle Aktionen bleiben sichtbar und antippbar. */
@media (max-width: 640px) {
  /* Die obere Leiste ist eine Spalte: Werte oben, Aktionen darunter.
     Ohne flex-wrap stand die Aktionsreihe 76 px ueber den Rand hinaus.
     Innenabstand und Zeilenabstand bleiben knapp, damit die Leiste unter
     der Grenze von 120 px bleibt (layout-probe). */
  body.fn_body .fn_topbar { flex-wrap: wrap; row-gap: 2px; padding: 3px 6px; }
  body.fn_body .fn_hud_aktionen {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 2px;
    justify-content: flex-start;
  }
  body.fn_body .fn_hud_aktionen .fn_hud_knopf {
    min-width: 36px;
    min-height: 36px;
    padding: 4px 6px;
  }
  body.fn_body .fn_tempo_gruppe .fn_hud_knopf { min-width: 34px; }
}

/* -- Kartennamen: ganze Woerter statt harter Brueche -------------------- */
/* "HOLZFÄLLERHÜTTE" wurde mitten im Wort getrennt (HOLZFÄLLERHÜT / TE).
   Jetzt bricht der Browser nur an Silben (hyphens) - dafuer ist lang="de"
   am <html> gesetzt. */
html[data-ui="roman"] body.fn_body .fn_karte_name { letter-spacing: .03em; }
body.fn_body .fn_karte_name {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* -- Kartennamen: eine Nummer kleiner, damit ganze Woerter passen ------ */
/* Gemessen: bei 112 px Kartenbreite braucht "HOLZFÄLLERHÜTTE" (15 Zeichen)
   rund 96 px - mit .58 rem und 0.045 em Abstand waren es ueber 104 px und
   das Wort wurde abgeschnitten. */
html[data-ui="roman"] body.fn_body .fn_karte_name {
  font-size: .56rem;
  letter-spacing: .02em;
  overflow-wrap: break-word;
}

/* -- Karten einen Hauch breiter: ganze Namen passen --------------------- */
/* "HOLZFÄLLERHÜTTE" brach noch das letzte E um. Vier Pixel mehr Innenbreite
   loesen das, ohne die Hoehe des Menues zu veraendern. */
@media (min-width: 641px) { body.fn_body .fn_dock { --dock-karte-breite: 116px; } }


/* Handy: ein Hauch kleiner, damit "RÖMERSTRASSE" ganz in die Karte passt. */
@media (max-width: 640px) {
  body.fn_body .fn_karte_name,
  html[data-ui="roman"] body.fn_body .fn_karte_name { font-size: .49rem; letter-spacing: 0; }
}


/* ===========================================================================
   GUI-RUNDE 4 (05.11.2026): Kopf, Tempo-Gruppe, Handy-Leiste
   ===========================================================================
   Gemessen an den Fotos aus gui-fotos.cjs:
   - Der Vollbild-Knopf war LEER: seine Beschriftung faellt unter 1700 px weg,
     sein Zeichen stand aber nicht in der Liste, die es dann einblendet.
     Er ist jetzt immer ein reiner Zeichen-Knopf.
   - Der Name stand doppelt (JUPI-Kopf UND HUD). Die HUD-Marke faellt weg -
     der Kopf traegt Logo und Name (Regel 3.13.2), die Leiste gewinnt Platz.
   - Die Trennlinie hinter "Alpha" im Kopf war die Regel der HUD-Marke, die
     ueber die gemeinsame Klasse .fn_marke auch den Kopf traf.
   - "Alle Spiele" war ein nackter unterstrichener Link auf weissem Kasten.
   - Das Siegel am Bauberater hing halb ueber der Kante und wurde von der
     Seitenleiste angeschnitten.
   =========================================================================== */

/* -- Vollbild: immer nur das Zeichen ---------------------------------- */
.fn_hud_knopf.fn_hud_vollbild .fn_knopf_icon { display: inline-block; }
.fn_hud_knopf.fn_hud_vollbild .fn_knopf_text { display: none; }

/* -- HUD-Marke weg, Kopf-Marke ohne Trennstrich ------------------------ */
.fn_topbar .fn_marke { display: none; }
.fn_leiste .fn_marke {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
  gap: .55rem;
}
.fn_leiste .fn_marke img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

/* -- Zurueck-Knopf als Schild im Spielmaterial ------------------------- */
body.fn_body .fn_leiste a.fn_zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .95rem;
  border-radius: 999px;
  border: 1px solid var(--ui-line, #b98a3c);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-panel, #f2e7cd) 88%, #fff 12%),
    var(--ui-panel, #f2e7cd));
  color: var(--ui-accent, #a83b2a);
  font-family: var(--ui-font, Georgia, serif);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.fn_body .fn_leiste a.fn_zurueck:hover,
body.fn_body .fn_leiste a.fn_zurueck:focus-visible {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(0, 0, 0, .3);
}
html[data-ui="keltisch"] body.fn_body .fn_leiste a.fn_zurueck {
  background: linear-gradient(180deg, #34412a, #26311f);
  color: var(--fn-titel-farbe, #d8e6b4);
  border-color: var(--ui-accent-2, #a58544);
}

/* -- Bauberater: Siegel innen auf der Tafel ---------------------------- */
.fn_links_stapel .fn_tipp { padding-right: 2.1rem; }
.fn_links_stapel .fn_tipp::after {
  top: .45rem;
  right: .5rem;
  width: 1.15rem;
  height: 1.15rem;
}

/* -- Tempo-Gruppe: Pause / Normal / Schnell sind drei klare Zustaende -- */
/* Gedrueckt ist genau EIN Knopf: Pause, wenn die Zeit steht, sonst das
   laufende Tempo. Vorher zeigte der Pause-Knopf im Stillstand ein Abspiel-
   Zeichen - dann standen zwei gleiche Dreiecke nebeneinander. */
.fn_tempo_gruppe {
  padding: 2px;
  border-radius: .5rem;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.fn_tempo_gruppe .fn_tempo { border-color: transparent; background: transparent; }
.fn_tempo[aria-pressed="true"] {
  background: linear-gradient(180deg, #7a5f36, #5d4626);
  color: #fff3d6;
  border-color: var(--fn-gold, #c9a15f);
}
#fn_hud_zeitraffer[aria-pressed="true"] {
  background: linear-gradient(180deg, #b3452e, #86301f);
  border-color: #e7a98f;
}

/* -- Handy: eine Aktionsreihe statt zwei -------------------------------- */
/* Hilfe, Einstellungen und Vollbild stehen im Pausenmenue (☰) - am Handy
   fallen sie in der Leiste weg, dann passen Jahr, Menue, Karte, Neues Jahr,
   Tempo und Aufgaben in eine Zeile (gemessen 390 px). */
@media (max-width: 640px) {
  .fn_hud_aktionen .fn_hud_hilfe,
  .fn_hud_aktionen .fn_hud_einst,
  .fn_hud_aktionen .fn_hud_vollbild { display: none !important; }
  body.fn_body .fn_leiste a.fn_zurueck { padding: 0 .7rem; font-size: .8rem; }
  .fn_leiste .fn_marke img { width: 32px; height: 32px; }
}


/* ===========================================================================
   GUI-RUNDE 5 (05.11.2026): schlanke Leiste rechts, Zeit-Konsole, Vollbild,
   farbige Waren-Zeichen
   ===========================================================================
   Oben rechts stehen nur noch zwei Dinge: die ZEIT-KONSOLE (Jahreszeit,
   Jahr, Pause/Normal/Schnell, Jahresbalken) und der MENUE-Knopf. Karte,
   Aufgaben und Hilfe hat die linke Seitenleiste; Neues Jahr, Frei bauen,
   Einstellungen & Grafik und Vollbild stehen im Pausenmenue.
   =========================================================================== */
.fn_hud_reserve { display: none !important; }

.fn_zeit_konsole {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .22rem .3rem .42rem .45rem;
  border-radius: .7rem;
  border: 1px solid var(--fn-gold, #c9a15f);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 226, 160, .14), transparent 60%),
    linear-gradient(180deg, #4a3822, #2f2416);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .18), 0 2px 8px rgba(0, 0, 0, .35);
  color: var(--fn-chrome-text, #f0e3c6);
}
/* Jahreszeit als farbige Muenze */
.fn_zeit_jz {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #e6cf9e 70%, #b8935a);
  border: 1px solid #8a6a3a;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .4);
}
.fn_zeit_jz svg { width: 1.45rem; height: 1.45rem; }
.fn_zeit_konsole[data-jz="winter"] .fn_zeit_jz { background: radial-gradient(circle at 35% 30%, #ffffff, #d6e6ee 70%, #8fb0c2); }
.fn_zeit_konsole[data-jz="herbst"] .fn_zeit_jz { background: radial-gradient(circle at 35% 30%, #fff1d8, #ebc794 70%, #b97a3c); }
.fn_zeit_konsole[data-jz="fruehling"] .fn_zeit_jz { background: radial-gradient(circle at 35% 30%, #fbfff0, #d9ebb4 70%, #8fae5a); }
.fn_zeit_text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 4.2rem;
}
.fn_zeit_jahr { font-family: var(--ui-serif, Georgia, serif); white-space: nowrap; }
.fn_zeit_jahr i {
  font-style: normal; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; color: #c9ab7c;
}
.fn_zeit_jahr b { font-size: 1.05rem; color: var(--fn-gold-hell, #e8cf95); }
.fn_zeit_text .fn_hud_jz {
  font-style: normal; font-size: .7rem; color: #d8c197; letter-spacing: .03em;
}
/* Jahresbalken als duenne Goldlinie unten in der Konsole */
.fn_zeit_konsole .fn_hud_uhr {
  position: absolute;
  left: .55rem; right: .55rem; bottom: .16rem;
  height: 3px;
  margin: 0;
  border-radius: 2px;
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
}
.fn_zeit_konsole .fn_hud_uhr span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #b98a3c, #f2d896);
}
/* Tempo-Gruppe in der Konsole: eingelassene Mulde */
.fn_zeit_konsole .fn_tempo_gruppe { background: rgba(0, 0, 0, .3); }
.fn_zeit_konsole .fn_tempo_gruppe .fn_tempo {
  min-width: 34px; min-height: 32px; padding: 0 6px;
  color: #e8d6b0;
}
.fn_zeit_konsole .fn_tempo_gruppe .fn_tempo:hover:not([aria-pressed="true"]) { background: rgba(255, 230, 180, .1); }
.fn_zeit_konsole .fn_tempo svg { width: 1rem; height: 1rem; }

/* Menue-Knopf: deutlicher, mit Beschriftung ab Tablet */
.fn_hud_aktionen .fn_hud_menue {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 .75rem;
  border-color: var(--fn-gold, #c9a15f);
  font-family: var(--ui-serif, Georgia, serif);
  font-weight: 700;
}
.fn_hud_aktionen .fn_hud_menue .fn_knopf_icon,
.fn_hud_aktionen .fn_hud_menue .fn_knopf_text { display: inline-block; }
@media (max-width: 640px) {
  .fn_hud_aktionen .fn_hud_menue .fn_knopf_text { display: none; }
  .fn_hud_aktionen .fn_hud_menue { padding: 0 .55rem; }
  .fn_zeit_text { min-width: 0; }
  .fn_zeit_text .fn_hud_jz { display: none; }
  .fn_zeit_jz { width: 1.8rem; height: 1.8rem; }
  .fn_zeit_jz svg { width: 1.2rem; height: 1.2rem; }
  .fn_zeit_konsole .fn_tempo_gruppe .fn_tempo { min-width: 36px; min-height: 36px; }
  /* Die farbigen Zeichen sagen genug - die Beschriftungen duerfen weg. */
  .fn_topbar .fn_res_chip .fn_chip_icon { display: inline-flex; }
  .fn_topbar .fn_ressourcen_leiste .fn_res_chip:not(.fn_chip_bau) i { display: none; }
}
@media (max-width: 1000px) {
  .fn_zeit_text .fn_hud_jz { display: none; }
}

/* Waren-Zeichen: jetzt farbig, also voll deckend */
.fn_res_chip .fn_chip_icon { opacity: 1; }
.fn_res_chip .fn_chip_icon svg { width: 1.05rem; height: 1.05rem; }

/* Pausenmenue: eingeschalteter Schalter (Frei bauen) */
.fn_menue_btn.fn_menue_an {
  border-color: var(--ui-accent, #a83b2a);
  box-shadow: inset 4px 0 0 var(--ui-accent, #a83b2a);
}
.fn_menue_btn.fn_menue_an::after { content: " ✓"; font-weight: 700; color: var(--ui-accent, #a83b2a); }
.fn_menue_btn[hidden] { display: none !important; }

/* Einstellungen: Abschnitt "Grafik" */
.fn_einst_abschnitt {
  margin: .9rem 0 .2rem;
  padding-top: .6rem;
  border-top: 1px solid var(--ui-line-soft, rgba(140, 100, 50, .35));
  font-family: var(--ui-font, Georgia, serif);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ui-accent, #a83b2a);
}

/* Vollbild: nur das Spiel - JUPI-Kopf und Fuss verschwinden */
html.fn_vollbild body.fn_body { --fn-kopf-hoehe: 0px; }
html.fn_vollbild .fn_leiste,
html.fn_vollbild .fn_footer { display: none !important; }
html.fn_vollbild .fn_buehne { inset: 0; }

/* Die Gestaltungsregel body.fn_body .fn_hud_knopf (helles Pergament) war
   staerker als die Konsole - Normal/Schnell standen als helle Kaesten in der
   dunklen Mulde. Hier mit derselben Staerke plus Konsole ueberschreiben. */
body.fn_body .fn_zeit_konsole .fn_tempo {
  background: transparent;
  border: 1px solid transparent;
  color: #e8d6b0;
  box-shadow: none;
}
body.fn_body .fn_zeit_konsole .fn_tempo:hover:not([aria-pressed="true"]) {
  background: rgba(255, 230, 180, .12);
  border-color: rgba(201, 161, 95, .5);
}
body.fn_body .fn_zeit_konsole .fn_tempo[aria-pressed="true"] {
  background: linear-gradient(180deg, #7a5f36, #5d4626);
  color: #fff3d6;
  border-color: var(--fn-gold, #c9a15f);
}
body.fn_body .fn_zeit_konsole #fn_hud_zeitraffer[aria-pressed="true"] {
  background: linear-gradient(180deg, #b3452e, #86301f);
  border-color: #e7a98f;
}
/* Menue-Knopf im selben Holz wie die Konsole, Goldkante */
body.fn_body .fn_hud_aktionen .fn_hud_menue {
  background: linear-gradient(180deg, #4a3822, #2f2416);
  border: 1px solid var(--fn-gold, #c9a15f);
  color: var(--fn-gold-hell, #e8cf95);
  min-height: 40px;
}
body.fn_body .fn_hud_aktionen .fn_hud_menue:hover { background: linear-gradient(180deg, #5a4429, #3a2c1b); }
/* Handy: Tempo-Knoepfe mindestens 36 px (eine aeltere Regel setzte 34). */
@media (max-width: 640px) {
  body.fn_body .fn_zeit_konsole .fn_tempo_gruppe .fn_tempo { min-width: 36px; min-height: 36px; }
}

/* =========================================================
   FERNHANDEL (07.11.2026) - Vertraege mit Orten ausserhalb
   der Karte. Nur Theme-Variablen: Roemisch und Keltisch.
   ========================================================= */
body.fn_body .fn_handel_dialog { width: min(980px, 96vw); max-height: 92vh; overflow-y: auto; }
body.fn_body .fn_handel_plaetze {
  margin: 6px 0 10px; padding: 6px 10px;
  background: var(--ui-panel-3, #f8f1de); border: 1px solid var(--ui-line-soft);
  border-radius: 8px; color: var(--ui-text); font-weight: 600;
}
body.fn_body .fn_handel_liste {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
body.fn_body .fn_handel_ort {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--ui-panel, #f2e7cd); color: var(--ui-text);
  border: 1px solid var(--ui-line-soft); border-left: 5px solid var(--ui-accent-2);
  border-radius: 10px;
}
body.fn_body .fn_handel_ort.fn_handel_mit { border-left-color: var(--ui-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 35%, transparent); }
body.fn_body .fn_handel_ort.fn_handel_zu { opacity: .82; border-left-style: dashed; }
body.fn_body .fn_handel_kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body.fn_body .fn_handel_name { font-size: 1.08rem; font-family: var(--ui-font); }
body.fn_body .fn_handel_meta { color: var(--ui-text-soft, var(--ui-text)); font-size: .86rem; }
body.fn_body .fn_handel_freund { margin-left: auto; color: var(--ui-accent-2); letter-spacing: 1px; }
body.fn_body .fn_handel_info { margin: 0; font-size: .88rem; color: var(--ui-text-soft, var(--ui-text)); }
body.fn_body .fn_handel_weg { margin: 0; font-size: .86rem; font-weight: 600; }
body.fn_body .fn_handel_zu .fn_handel_weg { color: var(--ui-accent); }
body.fn_body .fn_handel_preise { display: grid; gap: 4px; }
body.fn_body .fn_handel_preisreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
body.fn_body .fn_handel_preistitel { font-size: .8rem; font-weight: 700; min-width: 5.5em; }
body.fn_body .fn_handel_kauft .fn_lager_chip { border-color: #4f8a3c; }
body.fn_body .fn_handel_verkauft .fn_lager_chip { border-color: #3c6a8a; }
body.fn_body .fn_handel_form {
  display: grid; gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.fn_body .fn_handel_feld { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; font-weight: 600; }
body.fn_body .fn_handel_wahl {
  min-height: 40px; padding: 4px 6px;
  background: var(--ui-panel-3, #f8f1de); color: var(--ui-text);
  border: 1px solid var(--ui-line-soft); border-radius: 6px;
  font: inherit; font-weight: 400;
}
body.fn_body .fn_handel_rechnung {
  margin: 0; padding: 6px 8px; border-radius: 6px;
  background: color-mix(in srgb, #4f8a3c 16%, transparent);
  font-size: .86rem; font-variant-numeric: tabular-nums;
}
body.fn_body .fn_handel_rechnung.fn_handel_minus { background: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
body.fn_body .fn_handel_knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.fn_body .fn_handel_knoepfe .fn_btn { min-height: 40px; }
body.fn_body .fn_handel_status { font-size: .84rem; font-weight: 700; color: #4f8a3c; }
body.fn_body .fn_handel_status.fn_handel_ruht { color: var(--ui-accent); }
body.fn_body .fn_handel_bericht {
  margin-top: 10px; padding: 8px 10px;
  border-top: 2px solid var(--ui-line-soft);
}
body.fn_body .fn_handel_bericht h3 { margin: 0 0 4px; font-size: 1rem; }
body.fn_body .fn_handel_bericht p { margin: 2px 0; font-size: .88rem; }
html[data-ui="keltisch"] body.fn_body .fn_handel_status { color: #8fc06a; }
@media (max-width: 560px) {
  body.fn_body .fn_handel_form { grid-template-columns: 1fr; }
}
body.fn_body .fn_handel_dialog .fn_dialog_knoepfe .fn_btn { min-height: 40px; }
/* Preis-Chips im Handelsfenster: helles Papier, dunkle Schrift (der
   Lager-Chip ist fuer die dunkle Anzeige gebaut und waere hier grau). */
body.fn_body .fn_handel_preisreihe .fn_lager_chip {
  font-size: .8rem; padding: 2px 8px;
  background: var(--ui-panel-3, #f8f1de); color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}


/* Feldkarte (Feldbau 07.11.2026): Frucht bzw. Tierart waehlen.
   Sie teilt Lage und Rahmen mit der Info-Karte (.fn_info). */
.fn_feld { max-height: calc(100vh - 220px); overflow-y: auto; }
.fn_feld_text { margin: 0 0 8px; font-size: .78rem; line-height: 1.35; color: inherit; opacity: .82; }
.fn_feld_wahl_titel {
  margin: 6px 0 4px; font-family: Georgia, "Palatino Linotype", serif;
  font-size: .9rem; font-weight: 700; color: inherit;
}
/* Auswahl mit Symbolen (Dropdown, 08.11.2026) - Feldkarte und Bau-Dock.
   Knopf: Symbol + Name + Pfeil. Liste: Pergament, liegt fixed ueber allem. */
.fn_wahl { position: relative; display: inline-block; max-width: 100%; }
.fn_feld .fn_wahl { display: block; }
.fn_wahl_knopf {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 40px; padding: 4px 10px 4px 6px; border-radius: 9px;
  border: 1px solid #b98a3c; background: #f8f1de; color: #3a2a17;
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; text-align: left;
}
.fn_wahl_knopf:hover { background: #efe0bd; }
.fn_wahl_knopf:focus-visible { outline: 2px solid #8a2f1f; outline-offset: 2px; }
.fn_wahl_zeichen { width: 28px; height: 28px; flex: 0 0 28px; }
.fn_wahl_name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn_wahl_pfeil {
  flex: 0 0 auto; width: 0; height: 0; margin-left: 4px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #8a2f1f;
  transition: transform .15s ease;
}
.fn_wahl_offen .fn_wahl_pfeil { transform: rotate(180deg); }
.fn_dock_optionen .fn_wahl_knopf { min-width: 210px; }
.fn_wahl_liste {
  position: fixed; z-index: 2000; margin: 0; padding: 5px; list-style: none;
  max-width: min(320px, calc(100vw - 16px)); overflow-y: auto;
  background: #fbf5e6; color: #3a2a17; border: 1px solid #b98a3c; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(30, 18, 8, .38);
}
.fn_wahl_liste[hidden] { display: none; }
.fn_wahl_gruppe {
  padding: 7px 8px 3px; font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #8a6a3d;
}
.fn_wahl_option {
  display: flex; align-items: center; gap: 9px; min-height: 40px;
  padding: 4px 8px; border-radius: 7px; cursor: pointer; outline: none;
}
.fn_wahl_option:hover, .fn_wahl_option:focus { background: #efe0bd; }
.fn_wahl_option[aria-selected="true"] { background: #8a2f1f; color: #fff6e6; }
html[data-ui="keltisch"] .fn_wahl_option[aria-selected="true"] { background: #2f5a3a; }
.fn_wahl_option[aria-selected="true"] small { color: #f3dcc0; }
.fn_wahl_option .fn_wahl_zeichen {
  width: 30px; height: 30px; flex-basis: 30px; padding: 2px;
  background: #fffaf0; border-radius: 6px; box-shadow: inset 0 0 0 1px #e2cfa6;
}
.fn_wahl_text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fn_wahl_text b { font-size: .84rem; }
.fn_wahl_text small { font-size: .7rem; color: #7a6040; white-space: normal; }
.fn_wahl_text small:empty { display: none; }

/* ==========================================================================
   Startmenue neu, Fenster "Neue Siedlung" und "Spielstaende" (08.11.2026)
   Alles an body.fn_body und den --ui-/--fn-Werten der beiden Gestaltungen
   (Roemisch/Keltisch), damit Hell und Dunkel mitgehen.
   ========================================================================== */

/* -- Startmenue: zwei Spalten ---------------------------------------------- */
body.fn_body .fn_start_karte { width: min(980px, 100%); }
body.fn_body .fn_start_haupt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  margin: 18px 0 4px;
}
body.fn_body .fn_start_menue { display: flex; flex-direction: column; gap: 9px; }
body.fn_body .fn_start_menue .fn_start_gross {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 10px 16px;
  text-align: left;
  font-family: var(--ui-font);
  border-radius: var(--ui-radius);
  cursor: pointer;
}
body.fn_body .fn_start_menue .fn_haupt_btn.fn_start_gross {
  background: linear-gradient(180deg, var(--ui-accent) 0%, color-mix(in srgb, var(--ui-accent) 78%, #000 22%) 100%);
  border: 1px solid var(--ui-accent-2);
  color: var(--ui-on-accent);
  box-shadow: 0 4px 12px var(--ui-shadow);
}
body.fn_body .fn_start_menue .fn_haupt_btn.fn_start_gross:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.fn_body .fn_start_menue .fn_menue_btn.fn_start_gross {
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  color: var(--ui-text);
}
body.fn_body .fn_start_menue .fn_menue_btn.fn_start_gross:hover:not([disabled]) {
  border-color: var(--ui-accent);
  transform: translateY(-1px);
}
body.fn_body .fn_start_menue .fn_start_gross[disabled] { opacity: .6; cursor: default; border-style: dashed; }
body.fn_body .fn_start_gross > svg {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
body.fn_body .fn_menue_btn.fn_start_gross > svg { background: color-mix(in srgb, var(--ui-accent) 16%, transparent); color: var(--ui-accent); }
body.fn_body .fn_start_btn_text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.fn_body .fn_start_btn_text b { font-size: 1.02rem; line-height: 1.2; }
body.fn_body .fn_start_btn_text small {
  font-size: .76rem; opacity: .85; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.fn_body .fn_start_klein { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 3px; }
body.fn_body .fn_start_klein .fn_menue_btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 62px; padding: 8px 6px; text-align: center; font-size: .76rem; line-height: 1.2;
  background: var(--ui-panel-3); border: 1px solid var(--ui-line-soft); color: var(--ui-text);
  border-radius: var(--ui-radius); font-family: var(--ui-font); cursor: pointer;
}
body.fn_body .fn_start_klein .fn_menue_btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
body.fn_body .fn_start_klein svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* rechts: zuletzt gespielt */
body.fn_body .fn_start_letzte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_start_letzte h3 {
  margin: 0; font-family: var(--ui-font); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fn-titel-farbe);
}
body.fn_body .fn_zuletzt_karte {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 8px; background: var(--ui-panel-2); border: 1px solid var(--ui-line-soft);
  border-radius: var(--ui-radius);
}
body.fn_body .fn_zuletzt_karte[role="button"] { cursor: pointer; }
body.fn_body .fn_zuletzt_karte[role="button"]:hover,
body.fn_body .fn_zuletzt_karte[role="button"]:focus-visible { border-color: var(--ui-accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 40%, transparent); }
body.fn_body .fn_zuletzt_bild {
  width: 92px; height: 92px; border-radius: 8px; border: 2px solid var(--ui-line-soft);
  background: color-mix(in srgb, var(--ui-panel) 70%, #000 30%); display: block;
}
body.fn_body .fn_zuletzt_leer .fn_zuletzt_bild { opacity: .5; }
body.fn_body .fn_zuletzt_text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: .8rem; color: var(--ui-text-soft); }
body.fn_body .fn_zuletzt_text strong { font-size: 1.05rem; color: var(--ui-text); font-family: var(--ui-font); overflow-wrap: anywhere; }
body.fn_body .fn_zuletzt_zeit { font-size: .72rem; opacity: .85; }
body.fn_body .fn_zuletzt_liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
body.fn_body .fn_zuletzt_zeile_btn {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 40px; padding: 6px 12px; text-align: left;
  background: var(--ui-panel-2); border: 1px solid var(--ui-line-soft); color: var(--ui-text);
  border-radius: var(--ui-radius); font-family: var(--ui-font); cursor: pointer;
}
body.fn_body .fn_zuletzt_zeile_btn small { color: var(--ui-text-soft); white-space: nowrap; }
body.fn_body .fn_zuletzt_zeile_btn:hover { border-color: var(--ui-accent); }
body.fn_body .fn_bald_reihe { display: flex; flex-wrap: wrap; gap: 6px; }
body.fn_body .fn_bald_chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border: 1px dashed var(--ui-line-soft); border-radius: 999px;
  font-size: .76rem; color: var(--ui-text-soft);
}
body.fn_body .fn_bald_chip i {
  font-style: normal; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: var(--ui-accent-2); color: var(--ui-on-accent);
}

/* -- Gemeinsam: Kopf der grossen Fenster ------------------------------------ */
body.fn_body .fn_neu,
body.fn_body .fn_staende {
  width: min(1060px, 96vw);
  max-width: none;
  max-height: min(94vh, 980px);
  padding: 0;
  overflow: hidden;
}
body.fn_body .fn_neu[open] { display: flex; flex-direction: column; }
body.fn_body .fn_staende[open] { display: flex; flex-direction: column; }
body.fn_body .fn_staende { width: min(780px, 96vw); }
body.fn_body .fn_neu_kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, var(--ui-panel) 0%, var(--ui-panel-2) 100%);
  border-bottom: 2px solid var(--ui-line);
}
body.fn_body .fn_neu_kopf h2 { margin: 0; font-size: 1.25rem; }
body.fn_body .fn_neu_zu {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  background: var(--ui-panel-3); color: var(--ui-text);
  border: 1px solid var(--ui-line-soft); border-radius: 50%; cursor: pointer;
}
body.fn_body .fn_neu_zu:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
body.fn_body .fn_neu_zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* -- Fenster "Neue Siedlung" ----------------------------------------------- */
body.fn_body .fn_neu_raster {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px;
  padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
}
body.fn_body .fn_neu_spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body.fn_body .fn_neu_block {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--ui-panel-3); border: 1px solid var(--ui-line-soft); border-radius: var(--ui-radius);
}
body.fn_body .fn_neu_block h3 {
  margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fn-titel-farbe);
}
body.fn_body .fn_name_zeile { display: flex; gap: 8px; }
body.fn_body .fn_name_feld {
  flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 6px 12px;
  font-family: var(--ui-font); font-size: 1rem; font-weight: 600;
  color: var(--ui-text); background: var(--ui-panel-2);
  border: 1px solid var(--ui-line-soft); border-radius: var(--ui-radius);
}
body.fn_body .fn_name_feld:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
body.fn_body .fn_name_zeile .fn_menue_btn { width: 44px; min-height: 42px; padding: 0; display: grid; place-items: center; }
body.fn_body .fn_name_zeile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Feineinstellungen */
body.fn_body .fn_fein_kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
body.fn_body .fn_fein_schalter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px;
  background: transparent; color: var(--ui-text); font-family: var(--ui-font); font-size: .86rem; font-weight: 700;
  border: 1px dashed var(--ui-line-soft); border-radius: var(--ui-radius); cursor: pointer;
}
body.fn_body .fn_fein_schalter:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
body.fn_body .fn_fein_schalter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fn_body .fn_fein_schalter::after { content: "\25BE"; font-size: .8rem; transition: transform .15s; }
body.fn_body .fn_fein_schalter[aria-expanded="true"]::after { transform: rotate(180deg); }
body.fn_body .fn_fein_eigen {
  font-style: normal; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; background: var(--ui-accent-2); color: var(--ui-on-accent);
}
body.fn_body .fn_fein_zurueck { min-height: 40px; padding: 4px 12px; font-size: .78rem; }
body.fn_body .fn_fein_feld[hidden], body.fn_body .fn_fein_eigen[hidden], body.fn_body .fn_fein_zurueck[hidden] { display: none; }
body.fn_body .fn_fein_hinweis { margin: 0 0 4px; font-size: .74rem; line-height: 1.45; color: var(--ui-text-soft); }
body.fn_body .fn_fein_liste { display: grid; gap: 7px; }
body.fn_body .fn_fein_zeile {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 4px 10px; align-items: center;
  padding: 7px 9px; background: var(--ui-panel-2); border: 1px solid var(--ui-line-soft); border-radius: var(--ui-radius);
}
body.fn_body .fn_fein_name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.fn_body .fn_fein_name span { font-size: .84rem; font-weight: 700; color: var(--ui-text); }
body.fn_body .fn_fein_name small { font-size: .68rem; line-height: 1.3; color: var(--ui-text-soft); }
body.fn_body .fn_fein_werte { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
body.fn_body .fn_fein_wert {
  min-width: 38px; min-height: 40px; padding: 4px 7px;
  font-family: var(--ui-font); font-size: .74rem; font-weight: 600;
  color: var(--ui-text); background: var(--ui-panel-3);
  border: 1px solid var(--ui-line-soft); border-radius: 999px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.fn_body .fn_fein_wert:hover { border-color: var(--ui-accent); }
body.fn_body .fn_fein_wert:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
body.fn_body .fn_fein_wert.fn_fein_aktiv {
  background: var(--fn-gewaehlt-grund); border-color: var(--ui-accent-2); color: var(--fn-gewaehlt-text);
}

/* Fuss mit Zusammenfassung */
body.fn_body .fn_neu_fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 2px solid var(--ui-line);
  background: linear-gradient(0deg, var(--ui-panel) 0%, var(--ui-panel-2) 100%);
}
body.fn_body .fn_neu_zusammen { flex: 1 1 14rem; margin: 0; font-size: .82rem; font-weight: 600; color: var(--ui-text-soft); }
body.fn_body .fn_neu_fuss .fn_haupt_btn,
body.fn_body .fn_neu_fuss .fn_menue_btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  font-family: var(--ui-font); font-weight: 700; border-radius: var(--ui-radius); cursor: pointer;
}
body.fn_body .fn_neu_fuss .fn_haupt_btn { background: var(--ui-accent); border: 1px solid var(--ui-accent-2); color: var(--ui-on-accent); }
body.fn_body .fn_neu_fuss .fn_haupt_btn:hover { filter: brightness(1.1); }
body.fn_body .fn_neu_fuss .fn_menue_btn { background: var(--ui-panel-3); border: 1px solid var(--ui-line-soft); color: var(--ui-text); }
body.fn_body .fn_neu_fuss svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* -- Fenster "Spielstaende" ------------------------------------------------- */
body.fn_body .fn_staende > .fn_dialog_hinweis { margin: 12px 20px 0; font-size: .82rem; line-height: 1.5; }
body.fn_body .fn_staende_speichern {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 4px;
}
body.fn_body .fn_staende_speichern[hidden], body.fn_body .fn_staende_speichern > [hidden] { display: none; }
body.fn_body .fn_staende_speichern .fn_name_feld { flex: 1 1 12rem; }
body.fn_body .fn_staende_speichern .fn_haupt_btn,
body.fn_body .fn_staende_speichern .fn_menue_btn,
body.fn_body .fn_staende_fuss .fn_menue_btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px;
  font-family: var(--ui-font); font-weight: 700; font-size: .86rem; border-radius: var(--ui-radius); cursor: pointer;
}
body.fn_body .fn_staende_speichern .fn_haupt_btn { background: var(--ui-accent); border: 1px solid var(--ui-accent-2); color: var(--ui-on-accent); }
body.fn_body .fn_staende_speichern .fn_menue_btn,
body.fn_body .fn_staende_fuss .fn_menue_btn { background: var(--ui-panel-3); border: 1px solid var(--ui-line-soft); color: var(--ui-text); }
body.fn_body .fn_staende svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fn_body .fn_staende_liste {
  list-style: none; margin: 8px 0 0; padding: 4px 20px; display: grid; gap: 8px;
  overflow-y: auto; flex: 1 1 auto; min-height: 7rem;
}
body.fn_body .fn_stand {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px;
  background: var(--ui-panel-3); border: 1px solid var(--ui-line-soft); border-radius: var(--ui-radius);
}
body.fn_body .fn_stand_aktiv { border-color: var(--ui-accent); box-shadow: inset 4px 0 0 var(--ui-accent); }
body.fn_body .fn_stand_info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .82rem; color: var(--ui-text-soft); }
body.fn_body .fn_stand_info strong { font-size: 1.02rem; color: var(--ui-text); font-family: var(--ui-font); overflow-wrap: anywhere; }
body.fn_body .fn_stand_zeile2 { font-size: .72rem; opacity: .9; }
body.fn_body .fn_stand_aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
body.fn_body .fn_stand_btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 11px;
  font-family: var(--ui-font); font-size: .78rem; font-weight: 600;
  background: var(--ui-panel-2); color: var(--ui-text);
  border: 1px solid var(--ui-line-soft); border-radius: var(--ui-radius); cursor: pointer;
}
body.fn_body .fn_stand_btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
body.fn_body .fn_stand_btn.fn_stand_laden { background: var(--ui-accent); border-color: var(--ui-accent-2); color: var(--ui-on-accent); }
body.fn_body .fn_stand_btn.fn_stand_laden:hover { color: var(--ui-on-accent); filter: brightness(1.1); }
body.fn_body .fn_stand_btn.fn_stand_scharf { background: #a8322a; border-color: #d9665c; color: #fff6ee; }
body.fn_body .fn_stand_umbenennen { width: 100%; }
body.fn_body .fn_staende_leer { margin: 14px 20px; text-align: center; color: var(--ui-text-soft); font-size: .88rem; }
body.fn_body .fn_staende_leer[hidden] { display: none; }
body.fn_body .fn_staende_status { min-height: 1.4em; margin: 4px 20px 0; font-size: .8rem; font-weight: 600; color: var(--ui-accent); }
body.fn_body .fn_staende_status.fn_staende_fehler { color: #c0392b; }
html[data-theme="dark"] body.fn_body .fn_staende_status.fn_staende_fehler { color: #ff8a7a; }
body.fn_body .fn_staende_fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0; padding: 12px 20px; border-top: 2px solid var(--ui-line); text-align: left;
  background: linear-gradient(0deg, var(--ui-panel) 0%, var(--ui-panel-2) 100%);
}
body.fn_body .fn_import_feld { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.fn_body .fn_import_label:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
body.fn_body .fn_staende_fuss .fn_btn { min-height: 42px; }

@media (min-width: 640px) {
  body.fn_body .fn_stand { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  body.fn_body .fn_stand_aktionen { justify-content: flex-end; max-width: 25rem; }
}
@media (max-width: 860px) {
  body.fn_body .fn_start_haupt { grid-template-columns: 1fr; }
  body.fn_body .fn_neu_raster { grid-template-columns: 1fr; padding: 12px 12px; }
  body.fn_body .fn_neu_kopf, body.fn_body .fn_neu_fuss { padding-left: 12px; padding-right: 12px; }
  body.fn_body .fn_neu, body.fn_body .fn_staende { max-height: 96vh; width: 98vw; }
}
@media (max-width: 520px) {
  body.fn_body .fn_fein_zeile { grid-template-columns: 1fr; }
  body.fn_body .fn_fein_werte { justify-content: flex-start; }
  body.fn_body .fn_start_klein { grid-template-columns: 1fr; }
  body.fn_body .fn_start_klein .fn_menue_btn { flex-direction: row; justify-content: flex-start; min-height: 44px; padding: 8px 12px; }
  body.fn_body .fn_zuletzt_karte { grid-template-columns: 72px minmax(0, 1fr); }
  body.fn_body .fn_zuletzt_bild { width: 72px; height: 72px; }
  body.fn_body .fn_staende_liste, body.fn_body .fn_staende_speichern, body.fn_body .fn_staende_fuss { padding-left: 12px; padding-right: 12px; }
}
body.fn_body .fn_neu_raster { overflow-x: hidden; }

/* Kompaktes, freistehendes Baumenü; die Welt bleibt seitlich und darunter sichtbar. */
body.fn_body .fn_karte_kosten { flex-wrap: wrap; row-gap: 3px; }
body.fn_body .fn_karte_flaeche { font-size: .58rem; }
body.fn_body .fn_karte_hinweis {
  font: 600 .65rem/1.2 var(--ui-font); color: var(--ui-text);
  white-space: normal; padding: 3px 1px;
}
/* Gesperrte Villen erklären die Voraussetzung auch ohne Maus-Tooltip. */
body.fn_body .fn_karte[data-wohnart="villa"]:disabled { opacity: .78; }
.fn_buehne { top: var(--fn-leiste-gemessen, var(--fn-kopf-hoehe)); }
@media (max-width: 640px) {
  body.fn_body .fn_leiste { height: auto; min-height: var(--fn-kopf-hoehe); }
}
body.fn_body .fn_dock {
  left: 50%; right: auto; bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(1080px, calc(100% - 32px));
  box-sizing: border-box;
  padding-bottom: 6px;
  border: 1px solid var(--ui-line); border-top-width: 3px;
  border-radius: 10px;
  box-shadow: 0 8px 30px var(--ui-shadow);
}
body.fn_body .fn_dock::before, body.fn_body .fn_dock::after { bottom: 10px; }
body.fn_body .fn_dock_zu { padding-bottom: 0; }
body.fn_body .fn_dock_wkz { margin-left: auto; }
body.fn_body #fn_wkz_loeschen {
  width: auto; min-width: 38px; min-height: 36px; padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
body.fn_body #fn_wkz_loeschen[aria-pressed="true"] {
  background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent-2);
}
body.fn_body .fn_dock_zu .fn_dock_wkz { display: flex; }
@media (max-width: 640px) {
  body.fn_body .fn_dock { width: calc(100% - 12px); bottom: max(6px, env(safe-area-inset-bottom)); }
  body.fn_body #fn_wkz_loeschen span { display: none; }
  body.fn_body .fn_dock_wkz { order: 1; margin-left: auto; }
  body.fn_body .fn_dock_zu_knopf { order: 2; }
  body.fn_body .fn_dock_suche { order: 3; flex-basis: 100%; }
}

/* Beim Ziehen in der Spielwelt keine Texte markieren. Eingaben bleiben editierbar. */
#fn_buehne, #fn_buehne * { user-select: none; -webkit-user-select: none; }
#fn_buehne input, #fn_buehne textarea, #fn_buehne [contenteditable="true"] {
  user-select: text; -webkit-user-select: text;
}
.fn_ressourcen_info {
  position: absolute; z-index: 80; pointer-events: none;
  box-sizing: border-box; width: 280px; max-width: calc(100% - 16px);
  padding: 12px 14px; border: 1px solid #b78b45; border-radius: 6px;
  background: #fff1d1; color: #302211; box-shadow: 0 5px 18px #0008;
  font-size: 13px; line-height: 1.45;
}
.fn_ressourcen_info[hidden] { display: none; }
.fn_ressourcen_info strong, .fn_ressourcen_info span, .fn_ressourcen_info small { display: block; }
.fn_ressourcen_info strong { font-size: 15px; margin-bottom: 4px; }
.fn_ressourcen_info small { color: #72542c; }
.fn_res_chip[aria-describedby="fn_ressourcen_info"] { cursor: help; }
.fn_res_chip[aria-describedby="fn_ressourcen_info"]:focus-visible { outline: 2px solid #f5cd78; outline-offset: 3px; }