/* ============================================================
   Buden Empire – app.css
   Design-System „Wirtshaus". Tokens 1:1 aus
   doc/ui-drafts/wirtshaus/style.css, ergaenzt um die im SPEC
   beschlossenen Tokens und Komponenten. Keine Build-Pipeline,
   keine externen Abhaengigkeiten: Cinzel ist lokal vendored,
   HTMX/Alpine werden per {% static %} eingebunden.
   ============================================================ */

/* ---------- 0. Vendored Display-Schrift (Cinzel) ---------- */
/* woff2 liegen unter game/static/game/vendor/cinzel/ (OFL).
   Pro Gewicht latin + latin-ext Subset; unicode-range haelt die
   deutschen Umlaute (U+00DF/E4/F6/FC) und das Mittelpunkt-Zeichen
   (U+00B7) im latin-Subset. Pfade relativ zu dieser Datei. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/cinzel/cinzel-500.38ed5e8510f6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/cinzel/cinzel-500-ext.80c523b8dc7a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/cinzel/cinzel-600.bd1fede05376.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/cinzel/cinzel-600-ext.6b4308cd2346.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/cinzel/cinzel-700.82175d611596.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/cinzel/cinzel-700-ext.24321b35fa60.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Design-Tokens (Custom Properties) ---------- */
:root {
  /* Farbpalette */
  --c-pergament:      #f4ead2;   /* heller Pergamenthintergrund */
  --c-pergament-tief: #e9dab6;   /* Karten auf Pergament */
  --c-holz-dunkel:    #3a2417;   /* dunkles Eichenholz */
  --c-holz:           #5a3825;   /* Holzbraun */
  --c-holz-hell:      #7a4e30;   /* helleres Holz, Linien */
  --c-bier:           #c8860d;   /* Bier-Gold */
  --c-bier-hell:      #f0b73c;   /* Schaumgold, Glanz */
  --c-bordeaux:       #6e1422;   /* Couleur-Rot, Banner */
  --c-bordeaux-hell:  #9a2236;
  --c-tanne:          #2f4a32;   /* Couleur-Gruen */
  --c-blau:           #1f3a5f;   /* Couleur-Blau */
  --c-tinte:          #2b1d12;   /* Textfarbe, fast schwarz */
  --c-tinte-weich:    #5c4631;   /* gedaempfter Text */
  --c-creme:          #fbf6e9;   /* hellste Flaeche, Text auf dunkel */
  --c-surface:        var(--c-pergament-tief);
  --c-surface-2:      var(--c-grau-bg);
  --c-border:         var(--c-holz-hell);

  /* Funktionsfarben */
  --c-erfolg:         #2f6e3b;
  --c-erfolg-bg:      #dcecd2;
  --c-gefahr:         #9a2236;
  --c-gefahr-bg:      #f3d7d2;
  --c-warnung:        #b9770c;
  --c-warnung-bg:     #f7e6c0;

  /* SPEC-Ergaenzung: gesperrte/inaktive Zustaende */
  --c-grau:           #8a8178;
  --c-grau-bg:        #e4ddd0;

  /* #69: Pill-Farbtokens (Cartell-Status/Rollen) — Single Source, damit alle
     Cartell-Seiten dieselben Farben teilen statt lokaler Hardcodes. */
  --pill-bg:           var(--c-grau-bg);
  --pill-fg:           var(--c-tinte);
  --pill-ok-bg:        var(--c-erfolg-bg);
  --pill-ok-fg:        var(--c-erfolg);
  --pill-warn-bg:      var(--c-warnung-bg);
  --pill-warn-fg:      var(--c-warnung);
  --pill-info-bg:      #d5e6ec;
  --pill-info-fg:      var(--c-blau);
  --pill-danger-bg:    var(--c-gefahr-bg);
  --pill-danger-fg:    var(--c-gefahr);
  --pill-senior-bg:    var(--c-bier-hell);
  --pill-senior-fg:    var(--c-holz-dunkel);
  --pill-consenior-bg: #cfc9bd;
  --pill-consenior-fg: var(--c-tinte);
  --pill-bursch-bg:    var(--c-holz);
  --pill-bursch-fg:    var(--c-creme);

  /* SPEC-Ergaenzung: Live-Dot (Couleur-Rot, kein Neon) */
  --c-live:           #9a2236;
  --c-live-glow:      rgba(154, 34, 54, 0.55);

  /* Ressourcen-Akzente */
  --r-bier:    #c8860d;
  --r-wissen:  #1f3a5f;
  --r-baumat:  #7a4e30;
  --r-segen:   #6e1422;
  --r-vp:      #2f4a32;
  --r-ehre:    #9c7a16;
  /* P0-16: Slot-Auslastung */
  --r-bau:     #5a4a3a;
  --r-forschung: #3a2a5f;

  /* Typografie */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  --font-body:    "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* Navigations-Links in System-Sans (Scanbarkeit, SPEC-Fix) */
  --font-nav:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.5rem;

  /* Abstaende (4px-Raster) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;

  /* Form */
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:        0 2px 6px rgba(43, 29, 18, 0.18);
  --shadow-tief:   0 8px 24px rgba(43, 29, 18, 0.28);
  --rand:          1px solid var(--c-holz-hell);
  --rand-stark:    2px solid var(--c-holz);

  /* Layout-Hoehen (Token statt Magic Number) */
  /* Statusleiste — reale Hoehe der fixed Footer-Leiste, gemessen 50px auf
     Desktop wie Mobile (Desktop: 32px Link-Zeile + 4/8px Links-Padding
     + 4px Leisten-Padding + 2px border-top; Mobile: 44px Toggle + 4px
     Padding + 2px Border). Ein Wert, drei Verbraucher: body padding-bottom,
     .statusbar min-height und das bottom der Desktop-Sidebar — wer die
     Footer-Hoehe aendert, muss nur dieses Token anfassen. */
  --status-h: 50px;
  --resbar-h: 88px;          /* Ressourcenleiste — konstante Hoehe (#153): der fruehere
                                Normal/Compact-Wechsel beim Scrollen liess Subnav und
                                Desktop-Sidebar springen und ist entfernt. Real ~88px
                                (44 res + ~30 padding + 2 border + Rest), aufgerundet. */
  --resbar-h-compact: var(--resbar-h);  /* Alias (historisch), identisch zu --resbar-h */

  /* Empire relaunch: dark heraldic shell around the parchment UI. */
  --shell-bg:          #130d0b;
  --shell-bg-deep:     #0c0807;
  --shell-bg-high:     #4b2d20;
  --shell-wood:        #2b1914;
  --shell-wood-mid:    #372219;
  --shell-wood-deep:   #150d0b;
  --shell-gold:        #caa45d;
  --shell-gold-bright: #f0cf87;
  --shell-red:         #7e1f2e;
  --shell-red-bright:  #a92d3c;
  --shell-text:        #fff1ce;
  --shell-text-muted:  #d9bd8e;
  --shell-overlay:     rgba(12, 8, 7, 0.82);
  --shell-gold-soft:   rgba(202, 164, 93, 0.32);
  --shell-gold-faint:  rgba(202, 164, 93, 0.14);
  --shell-red-soft:    rgba(126, 31, 46, 0.34);
  --shell-shadow:      0 18px 48px rgba(8, 5, 3, 0.5);
  --shell-bg-grad: radial-gradient(circle at 50% 0, var(--shell-bg-high) 0, var(--shell-bg) 48%, var(--shell-bg-deep) 100%);
  --surface-parchment: linear-gradient(145deg, var(--c-creme), var(--c-pergament-tief));
  --surface-inspector: linear-gradient(180deg, var(--c-pergament), var(--c-pergament-tief));
  --sidebar-w: 220px;
  --inspector-w: 350px;
  /* Sichtbare Inhaltshoehe der Topbar. --topbar-h ist der *belegte* Platz am
     oberen Rand und enthaelt seit viewport-fit=cover zusaetzlich die iOS-
     Safe-Area (Notch/Statusleiste), die die Navbar als padding-top ausgleicht.
     Dadurch stimmen alle davon abgeleiteten Sticky-Offsets (Ressourcenleiste,
     Subnav, Sidebar, Gebaeude-Layout) automatisch mit. */
  --safe-top: env(safe-area-inset-top, 0px);
  --topbar-content-h: 72px;
  --topbar-h: calc(var(--topbar-content-h) + var(--safe-top));
  --navbar-h: var(--topbar-h);
  /* Subnav-Hoehe fuer sticky-Offsets (#156): 2*var(--sp-2) Padding
     + ~25px Zeileninhalt (fs-sm + Link-Padding) + 1px border-bottom. */
  --subnav-h: 42px;
}

/* ---------- 2. Grundgeruest ---------- */
* { box-sizing: border-box; }

/* #49: Kein horizontales Seiten-Scrollen. ``overflow-x: clip`` klemmt den
   Ueberlauf, ohne (anders als ``hidden``) einen Scroll-Container zu bilden --
   so bleiben die sticky Navbar/Ressourcenleiste/Subnav funktionsfaehig.
   Aeltere Safari-Versionen ignorieren ``clip`` und verhalten sich wie bisher. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-tinte);
  /* Pergament-Hintergrund mit dezenter Holzmaserung ueber CSS-Gradienten */
  background-color: var(--c-pergament);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(122, 78, 48, 0.10), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(110, 20, 34, 0.06), transparent 45%),
    repeating-linear-gradient(
      0deg,
      rgba(90, 56, 37, 0.025) 0,
      rgba(90, 56, 37, 0.025) 2px,
      transparent 2px,
      transparent 6px
    );
  display: flex;
  flex-direction: column;
  /* #155: Statusleiste ist fixed am unteren Rand — Platz dafuer freihalten,
     inkl. iOS-Safe-Area (Home-Indikator), die die Leiste selbst auch hat. */
  padding-bottom: calc(var(--status-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-holz-dunkel);
  margin: 0 0 var(--sp-3);
}

a { color: var(--c-bordeaux); }

/* Sichtbarer Fokus fuer Tastatur-Bedienung */
:focus-visible {
  outline: 3px solid var(--c-bier);
  outline-offset: 2px;
}

/* visuell versteckt, aber fuer Screenreader lesbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Navbar (Topbar auf allen Geraeten) ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--navbar-h);
  /* iOS-Notch: Inhalt unter die Statusleiste schieben, die Balkenflaeche
     selbst reicht bis zum Displayrand (min-height rechnet den Inset mit). */
  padding: var(--safe-top) var(--sp-4) 0;
  color: var(--c-creme);
  background:
    linear-gradient(180deg, var(--c-holz) 0%, var(--c-holz-dunkel) 100%);
  border-bottom: 3px solid var(--c-bier);
  box-shadow: var(--shadow-tief);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Brand darf nicht den ganzen Balken sprengen: schrumpfbar + gedeckelt,
     damit ein langer Budenname den Burger-Button nicht aus dem Bild schiebt. */
  min-width: 0;
  max-width: 70vw;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--c-bier-hell);
  text-decoration: none;
}

/* Name + Status-Badge stapeln sich; ein langer Budenname bricht in die
   zweite Zeile, das „Philister"/„Bursch"/„Fuchs"-Badge sitzt darunter. */
.navbar__brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
}

.navbar__brand-name {
  /* #45: Langen Budennamen auf eine Zeile begrenzen (Ellipsis), damit die
     Navbar-Hoehe stabil bleibt und die sticky Ressourcenleiste nicht darunter
     rutscht. Voller Name via title-Attribut (siehe base.html). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Wappen als reines CSS/Inline-SVG-Element */
.crest {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  background: linear-gradient(150deg, var(--c-bordeaux) 0%, var(--c-bordeaux-hell) 50%, var(--c-bier) 100%);
  border: 2px solid var(--c-bier-hell);
  color: var(--c-creme);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.navbar__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: var(--rand);
  border-color: var(--c-bier);
  border-radius: var(--radius-sm);
  color: var(--c-bier-hell);
  font-size: var(--fs-lg);
  cursor: pointer;
}

/* Burger-Wrapper: Grid-Rows-Transition statt max-height (Review-Fix 3). */
.navbar__menu {
  display: grid;
  grid-template-rows: 1fr;   /* Desktop: immer offen */
}

.navbar__menu-inner {
  overflow: hidden;
  min-height: 0;             /* erlaubt das Kollabieren auf 0fr */
}

.navbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-1);
}

.navbar__links a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-creme);
  text-decoration: none;
  font-family: var(--font-nav);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  transition: background 0.18s ease, color 0.18s ease;
}

.navbar__links a:hover { background: rgba(240, 183, 60, 0.18); }

.navbar__links a[aria-current="page"] {
  background: var(--c-bier);
  color: var(--c-holz-dunkel);
  box-shadow: var(--shadow);
}

/* Mobile: Links als ausklappbares Burger-Menue
   (Review-Fix 3: grid-template-rows 0fr -> 1fr, keine Magic Number) */
@media (max-width: 1023px) {
  .navbar__menu {
    position: absolute;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    grid-template-rows: 0fr;
    background: var(--c-holz-dunkel);
    border-bottom: 3px solid var(--c-bier);
    box-shadow: var(--shadow-tief);
    transition: grid-template-rows 0.25s ease;
  }
  .navbar__links {
    flex-direction: column;
    gap: 0;
    padding: var(--sp-2);
  }
  .navbar__links a { padding: var(--sp-3); font-size: var(--fs-base); }
  /* Checkbox geprueft -> Reihe expandiert auf 1fr.
     .navbar__menu liegt INNERHALB von .navbar (dem Sibling der Checkbox),
     daher ueber das Sibling-.navbar absteigen (nicht direkt als Sibling). */
  #nav-toggle:checked ~ .navbar .navbar__menu { grid-template-rows: 1fr; }
}

@media (min-width: 1024px) {
  .navbar__toggle { display: none; }
  /* Konto + Abmelden sind zusammen in einem <li class="nav-right">-Block;
     auf Desktop richten wir sie vertikal aus und schieben den Block mit
     margin-top:auto an den unteren Rand der Sidebar. */
  .navbar__links .nav-right { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }
  .navbar__links .nav-right > a { display: flex; }
  /* Sidebar-Padding unten entfernen, damit der nav-right-Block bündig
     mit dem unteren Sidebar-Rand abschliesst (kein 24px-Streifen darunter). */
  .navbar__links { padding-bottom: 0 !important; }
}

/* unsichtbare Checkbox steuert das Burger-Menue ohne JS-Framework */
#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* ---------- 4. Layout ---------- */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
}

.page__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.page__title h1 { font-size: var(--fs-xl); margin: 0; }
.page__subtitle { color: var(--c-tinte-weich); font-style: italic; }

/* Banner-Trennlinie mit Couleur-Streifen. --cl1/--cl2/--cl3 kommen als
   per-Element Inline-Style-Hook aus base.html (einzige erlaubte
   Inline-Style-Ausnahme, T11: dynamische, RegexValidator-gesicherte
   Spielerfarben). Fallback = bisherige Bordeaux/Creme/Tanne-Palette
   (anonyme Besucher, fehlender Player). */
.banner-rule {
  height: 8px;
  margin: var(--sp-4) 0 var(--sp-6);
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--cl1, var(--c-bordeaux)) 0 33%,
    var(--cl2, var(--c-creme)) 33% 66%,
    var(--cl3, var(--c-tanne)) 66% 100%
  );
  box-shadow: var(--shadow);
}

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

/* Grid items default to min-width:auto and can therefore make the whole page
   wider than the viewport when they contain long text or no-wrap controls. */
.grid > * {
  min-width: 0;
  max-width: 100%;
}

/* P0-12: Dashboard mehrspaltig auf Desktop (1 Spalte mobil, 2 ab 1024px). */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mehrspaltiges Karten-Grid fuer Listen gleichartiger Karten (z.B. die
   acht Gebaeude unter /gebaeude/, spaetere Quest-/Forschungslisten):
   1 Spalte mobil, 2 ab 560px, 3 ab 1024px -- echtes Desktop-Layout statt
   einer einzelnen langen Spalte (SPEC "mehrspaltige Uebersicht"). */
.grid--cards {
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid--dashboard {
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
  }
  .col-span-full { grid-column: 1 / -1; }
}

/* Ganzbreite Karte (z. B. Alarm-Karte) ueber die volle Gridbreite */
.card.span-2 { grid-column: 1 / -1; }

.stack { display: grid; gap: var(--sp-5); }

/* .stack als <dl> (Kosten-/Status-Listen, z.B. buildings.html): Browser-
   Default-Einzug von <dd> (margin-inline-start) und <dl>-Aussenabstand
   zuruecksetzen, Label/Wert ruecken buendig untereinander statt eingerueckt. */
dl.stack { margin: 0; }
.stack dt,
.stack dd { margin: 0; }
.stack dd { margin-top: var(--sp-1); }

/* .stack als <ul> (z. B. Nachrichten-, Dashboard-Listen): Browser-Default-
   Einzug (padding-inline-start ~40px) und Aussenabstand zuruecksetzen, sonst
   sitzen die Karten auf schmalen Screens dezentriert nach rechts. Bewusst nur
   <ul> — <ol class="stack"> (z. B. cartell_fehde.html) behaelt Nummerierung. */
ul.stack { margin-block: 0; padding-inline-start: 0; list-style: none; }

/* ---------- 5. Ressourcenleiste ---------- */
/* Kompakte sticky Leiste unter der Navbar. Hoehe aus Token (--resbar-h),
   konstant — kein Schrumpfen beim Scrollen mehr (#153), damit alle
   Sticky-/Fixed-Offsets darunter (Subnav, Sidebar) stabil bleiben. */
.resourcebar {
  position: sticky;
  top: var(--navbar-h);
  z-index: 45;
  /* v0.13.0: sieben sichtbare Einträge (inkl. gemeinsamer Fux-Pool)
     füllen die Leiste auf Mobile und Desktop vollständig aus. */
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(2px, 0.6vw, var(--sp-2));
  padding: clamp(4px, 1.2vw, var(--sp-3));
  background: linear-gradient(180deg, var(--c-holz-dunkel), var(--c-holz));
  border-radius: var(--radius);
  border: 2px solid var(--c-bier);
  box-shadow: var(--shadow-tief);
}

.res {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Abstand zwischen Icon (oben) und Wert (unten): grosszuegig genug,
     damit das Emoji nicht am Wert "klebt". War 1px — wirkt zusammen-
     gedrängt. 4px ist auf jeder Breakpoint-Stufe lesbar. */
  gap: 4px;
  min-width: 0;
  padding: clamp(2px, 0.8vw, var(--sp-2));
  border-radius: var(--radius-sm);
  background: rgba(251, 246, 233, 0.06);
  border-left: 3px solid var(--accent, var(--c-bier));
}
.res__icon { font-size: clamp(0.85rem, 3.4vw, var(--fs-lg)); line-height: 1; }
.res__body { display: flex; flex-direction: column; align-items: center; line-height: 1.05; min-width: 0; max-width: 100%; }
.res__value {
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 2.4vw, var(--fs-md));
  color: var(--c-creme);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ressourcen-Namen stehen im Tooltip (Hover/Fokus); die Inline-Labels sind
   ausgeblendet, damit die Leiste einreihig bleibt. */
.res__label { display: none; }

/* Resource tooltip (T10): keyboard focus remains available without making a
   coarse-pointer tap persist as focus. Hover is enabled separately only for
   devices whose primary pointer supports real hover. Touch-Geraete nutzen
   ``:focus-within`` (Tippen = Fokus auf das ``.res``-Element) — gleichzeitig
   sorgt ``inert``-Toggle bzw. Click-Outside dafuer, dass der Tooltip beim
   Tippen einer anderen Zelle oder auf den Body wieder verschwindet. */
.res__tooltip {
  position: absolute;
  /* Unterhalb der .res-Box (T10-Fix): Die Ressourcenleiste ist sticky direkt
     unter der Navbar und bildet als z-index-Insel (z-45) einen eigenen
     Stacking-Context; die Navbar (z-50) liegt darueber. Ein nach OBEN
     geoeffneter Tooltip verschwindet deshalb hinter der Navbar — nach UNTEN
     geoeffnet liegt er im Inhaltsbereich frei vor dem Seiteninhalt.
     ``max-width: calc(100vw - 2*var(--sp-3))`` haelt den Tooltip innerhalb
     des Page-Paddings, damit er an der ersten/letzten Zelle nicht
     abgeschnitten wird. */
  top: calc(100% + var(--sp-1));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 2 * var(--sp-3));
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--c-holz-dunkel);
  border: 1px solid var(--c-bier);
  color: var(--c-creme);
  font-size: var(--fs-xs);
  font-family: var(--font-nav);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.res:focus-visible .res__tooltip,
.res:focus-within .res__tooltip {
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .res:hover .res__tooltip {
    opacity: 1;
    visibility: visible;
  }
}

/* Touch: aktives Tooltip-Pendant. ``body.touch-resource-tip`` wird von einem
   winzigen Inline-Handler gesetzt, sobald der Spieler ein ``.res`` antippt
   — der Tooltip bleibt sichtbar, bis eine andere Zelle oder der Body
   angetippt wird. Stellt sicher, dass auf Phone/Tablet Lager + Rate/h
   ohne Tastatur lesbar sind. */
body.touch-resource-tip .res__tooltip { pointer-events: auto; }
body.touch-resource-tip .res[data-tip-open="true"] .res__tooltip {
  opacity: 1;
  visibility: visible;
}
/* Auf schmalen Phones reicht ``transform: translateX(-50%)`` aus, um den
   Tooltip mittig zur angetippten Zelle zu setzen. Die generelle 559px-
   Regel darunter erlaubt mit ``max-width: 160px`` einen Tooltip, der
   breiter als die ~52px schmale Zelle ist — der Tooltip wuerde links
   und rechts ueberstehen und am ersten/letzten Element abgeschnitten
   werden. Daher hier linksbuendig an die Zelle anlegen statt zu
   zentrieren. */
@media (max-width: 559px) {
  body.touch-resource-tip .res__tooltip {
    left: 0;
    transform: none;
  }
}

@media (max-width: 559px) {
  .res__tooltip { white-space: normal; max-width: 160px; }
}

.res--bier   { --accent: var(--r-bier); }
.res--wissen { --accent: var(--r-wissen); }
.res--baumat { --accent: var(--r-baumat); }
.res--segen  { --accent: var(--r-segen); }
.res--vp     { --accent: var(--r-vp); }
.res--ehre   { --accent: var(--r-ehre); }
/* P0-16: Slot-Auslastung */
.res--bau    { --accent: var(--r-bau); }
.res--forschung { --accent: var(--r-forschung); }

/* T12: Capacity-Indikatoren (Farb-Codierung nach current/cap-Verhältnis).
   Grün (<70%): gemütlich, Gelb (70–90%): Achtung, Rot (≥90%): Warnung.
   Visuelles Feedback via border-left-Farbe (wie .res, aber kapazitäts-sensitiv). */
.res--capacity-low {
  border-left-color: var(--c-erfolg);
}
.res--capacity-medium {
  border-left-color: var(--c-warnung);
}
.res--capacity-high {
  border-left-color: var(--c-gefahr);
}

/* ---------- 6. Karten ---------- */
.card {
  position: relative;
  background: var(--c-pergament-tief);
  border: var(--rand);
  border-top: 4px solid var(--c-holz);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
}

/* Direct card children must be allowed to shrink below their intrinsic
   content width. This keeps long copy, forms and nested layouts inside the
   card instead of merely clipping the page at html/body level. */
.card > * {
  min-width: 0;
  max-width: 100%;
}

.card :is(h1, h2, h3, h4, p, li, dt, dd) {
  overflow-wrap: anywhere;
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.card__head h2, .card__head h3 { margin: 0; font-size: var(--fs-lg); }
.card__head > :is(h1, h2, h3, h4) {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.card__head > .badge {
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
}

.card--accent  { border-top-color: var(--c-bier); }

/* Ganzflächig klickbare Navigations-Kachel (v0.9.0, Verbindungs-Übersicht). */
.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-top-color 0.12s ease;
}
.card--link:hover,
.card--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-tief);
  border-top-color: var(--c-bier);
}
.card--ornate::before {
  /* zarte Eck-Ornamente eines Banners */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(122, 78, 48, 0.35);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* gesperrte/inaktive Karte (SPEC: gesperrt -> --c-grau-bg) */
.card--locked {
  background: var(--c-grau-bg);
  border-top-color: var(--c-grau);
  color: var(--c-grau);
}

.muted { color: var(--c-tinte-weich); }
.tiny  { font-size: var(--fs-sm); }

/* Vorzeichen-Farben fuer Betraege (Kontobewegungen, Bierehre-Vorschau).
   Die Klassen waren im Markup bereits in Gebrauch, aber nie definiert. */
.text-success { color: var(--c-erfolg); }
.text-danger  { color: var(--c-gefahr); }

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--c-holz-dunkel);
  background: linear-gradient(180deg, var(--c-bier-hell), var(--c-bier));
  border: 2px solid var(--c-holz);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover  { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-tief); }
.btn:active { transform: translateY(1px); box-shadow: none; }

/* deaktiviert -> Grau (SPEC). Text in --c-tinte statt --c-creme: auf
   --c-grau liefert Creme nur ~3.5:1 Kontrast (WCAG-AA-Normaltext
   verfehlt); Tinte erreicht ~4.3:1. Faellt bei mehreren gesperrten
   "Ausbauen"-Buttons (z.B. /gebaeude/ bei belegtem Bau-Slot) auf. */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--c-tinte);
  background: var(--c-grau);
  border-color: var(--c-grau);
  box-shadow: none;
  filter: none;
  transform: none;
}

.btn--ghost {
  background: transparent;
  color: var(--c-holz);
  border-color: var(--c-holz-hell);
}
.btn--ghost:hover { background: rgba(122, 78, 48, 0.10); }

/* Abmelden-Button steht in der dunklen Navbar: dort liefert der Ghost-Default
   (--c-holz auf Holz) Braun-auf-Braun. In diesem Kontext helle Schrift/Rahmen
   (Kontrast-Fix). */
.navbar__logout .btn--ghost {
  color: var(--c-creme);
  border-color: rgba(251, 246, 233, 0.45);
}
.navbar__logout .btn--ghost:hover { background: rgba(251, 246, 233, 0.12); }

.btn--danger {
  color: var(--c-creme);
  background: linear-gradient(180deg, var(--c-bordeaux-hell), var(--c-bordeaux));
  border-color: var(--c-bordeaux);
}

.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }

/* #118: Kampfaktionen sichtbar staffeln — One-Tap bleibt primär, Filter und
   Einsatz-Konfiguration werden als klar antippbare sekundäre Aktionen gezeigt. */
.zielfilter,
.einsatz {
  border: 1px solid var(--c-holz-hell);
  border-radius: var(--radius-sm);
  background: var(--c-pergament);
}

.zielfilter__summary,
.einsatz__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-holz-dunkel);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  list-style: none;
}

.zielfilter__summary::-webkit-details-marker,
.einsatz__summary::-webkit-details-marker { display: none; }

.zielfilter__summary::after,
.einsatz__summary::after {
  content: "›";
  margin-left: auto;
  font-size: var(--fs-lg);
  transition: transform 0.12s ease;
}

.zielfilter[open] > .zielfilter__summary::after,
.einsatz[open] > .einsatz__summary::after { transform: rotate(90deg); }

.zielfilter > form,
.einsatz > form { padding: 0 var(--sp-3) var(--sp-3); }

.einsatz { background: rgba(214, 175, 74, 0.10); }
.einsatz__summary { min-height: 38px; font-size: var(--fs-sm); }

/* ---------- 8. Fortschrittsbalken + Countdown ---------- */
.timer { display: grid; gap: var(--sp-2); }
.timer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  align-items: baseline;
  gap: var(--sp-1);
}
.timer__label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--c-holz-dunkel);
  white-space: nowrap;
}
.timer__count {
  inline-size: 100%;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  color: var(--c-bordeaux);
  text-align: right;
  white-space: nowrap;
}

/* Elapsed/Total-Readout ("0:30:0 / 1:30:0") des wachsenden Balkens
   (_timer.html, T11) -- gleiche Numerik-Optik wie .timer__count, etwas
   kleiner, damit "verstrichen / gesamt" nicht mit dem Countdown anderer
   Karten konkurriert. */
.timer__total {
  inline-size: 100%;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--c-bordeaux);
  text-align: right;
  white-space: nowrap;
}

/* Schmale Screens (<= 480px): Label und Zahlenwert stapeln statt nebeneinander.
   Der „verstrichen / gesamt"-Readout wird bei mehrstuendigen Vorgaengen
   („7:59:59 / 8:00:00") breiter als jede vertretbare feste Spalte; in engen
   Karten (eingehender Angriff auf /verteidigung/) quetschte er das Label bis
   zur Unlesbarkeit. Gestapelt hat jede Zeile die volle Kartenbreite, der
   Readout darf zusaetzlich umbrechen — nichts ueberlappt, nichts wird
   abgeschnitten. Desktop-Layout (Label links, Zahl rechts) bleibt unveraendert. */
@media (max-width: 480px) {
  .timer__row { grid-template-columns: minmax(0, 1fr); }
  .timer__label { white-space: normal; overflow-wrap: anywhere; }
  .timer__count { text-align: left; }
  .timer__total { text-align: left; white-space: normal; }
}

.progress {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: var(--c-holz-dunkel);
  border: 1px solid var(--c-holz);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-bier), var(--c-bier-hell));
  /* --pct: serverseitig per pct_done berechnet oder clientseitig (Alpine)
     getickt. Statischer (mengenbasierter) Fortschritt — z. B. Missionen,
     Meilensteine, Tagesziele — bleibt RUHIG (kein Schimmer). */
  width: var(--pct, 100%);
  transition: width 1s linear;
}
/* Bierschaum-Schimmer NUR im laufenden Timer (``_timer.html`` wickelt den
   Balken in ``.timer``) — „läuft noch"-Verzierung, kein Informationsträger.
   Statische Fortschrittsbalken außerhalb eines Timers schimmern nicht. */
.timer .progress__fill {
  background-size: 200% 100%;
  animation: schaum 2.4s linear infinite;
}
/* Schimmer läuft von links nach rechts (invertiert): background-position
   von 200% -> 0% verschiebt das Muster nach rechts. */
@keyframes schaum {
  0%   { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}

/* Ausbau/Vorgang fertig (Rest 0): Balken steht voll, kein Schimmer mehr
   (SPEC-Fix 1 – Timer loopt nicht), Farbwechsel auf Erfolg-Gruen
   signalisiert "wartet auf naechsten Tick". */
.progress--done .progress__fill {
  width: 100%;
  background: linear-gradient(90deg, var(--c-erfolg), #4f9a5d);
  animation: none;
}

/* Pulsierende Angriffs-Warnung */
.pulse { animation: puls 1.4s ease-in-out infinite; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-live-glow); }
  50%      { box-shadow: 0 0 0 10px rgba(154, 34, 54, 0); }
}

/* ---------- 9. Live-Dot (laufende Timer / Alarme) ---------- */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-grau);
  vertical-align: middle;
}
.dot.live {
  background: var(--c-live);
  box-shadow: 0 0 0 0 var(--c-live-glow);
  animation: live-blink 1.4s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-live-glow); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(154, 34, 54, 0); opacity: 0.65; }
}

/* ---------- 10. Feedback-Zustaende ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border-left: 6px solid var(--c-holz);
  background: var(--c-pergament-tief);
}
.alert__icon {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.alert > div { flex: 1 1 auto; min-width: 0; }
.alert__title { font-family: var(--font-display); margin: 0 0 var(--sp-1); }
.alert p { margin: 0; }

.alert--success { border-left-color: var(--c-erfolg); background: var(--c-erfolg-bg); color: #20431f; }
.alert--danger  { border-left-color: var(--c-gefahr);  background: var(--c-gefahr-bg);  color: #5a1018; }
.alert--warn    { border-left-color: var(--c-warnung); background: var(--c-warnung-bg); color: #6e4708; }

/* P0-8: Infobox (details/summary) für Regelwerk-Erklärung (z.B. Angriff/Verteidigung). */
.infobox {
  border: 1px solid var(--c-border);
  border-radius: var(--br);
  padding: var(--sp-3);
  background: #f9f7f4;
  margin: var(--sp-3) 0;
}
.infobox__title {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--c-text);
  margin: 0;
  padding: 0;
}
.infobox__title:hover {
  color: var(--c-bier);
}
.infobox__body {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
}
.infobox__body p { margin: var(--sp-1) 0; }
.infobox__body ul { margin: var(--sp-1) 0 var(--sp-1) var(--sp-3); padding: 0; }
.infobox__body li { margin: var(--sp-1) 0; }

/* Helpcenter (hilfe.html) — mobile-first. Die Themenkarten nutzen das
   .infobox-Markup, aber ohne dessen zweite Rahmen/Hintergrund-Schicht:
   Karte + Box uebereinander wirkten auf kleinen Displays wie ein Formular-
   Dickicht. Gescoped auf .help-topic, damit die Infoboxen der Spielseiten
   (Angriff/Verteidigung) unveraendert bleiben. */
.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.help-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem; /* bequemes Tap-Ziel */
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-holz-hell);
  border-radius: 999px;
  background: var(--c-pergament);
  color: var(--c-holz-dunkel);
  font-family: var(--font-nav);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.help-toc a:hover,
.help-toc a:focus-visible {
  background: var(--c-holz-dunkel);
  border-color: var(--c-holz-dunkel);
  color: var(--c-bier-hell);
}

.help-topic {
  /* Anker-Sprungziel: sticky Navbar + Ressourcenleiste nicht ueberdecken. */
  scroll-margin-top: calc(var(--navbar-h) + var(--resbar-h) + var(--sp-3));
  /* Mobil etwas kompakter als das generische Karten-Padding (--sp-5). */
  padding: var(--sp-4);
}
@media (min-width: 560px) {
  .help-topic { padding: var(--sp-5); }
}
.help-topic .card__head {
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-bier);
}
.help-topic .infobox {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}
.help-topic .infobox__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 2.75rem; /* 44px Tap-Ziel fuer Auf-/Zuklappen */
  list-style: none;
}
.help-topic .infobox__title::-webkit-details-marker { display: none; }
.help-topic .infobox__title::after {
  content: "▾";
  flex: none;
  color: var(--c-bier);
  transition: transform 0.15s ease;
}
.help-topic details:not([open]) > .infobox__title::after {
  transform: rotate(-90deg);
}

/* Inline-Formularfehler (register/profile). Vorher als blasses .tiny kaum
   sichtbar — der Spieler sah „welcher Fehler" nicht (Fix 17.06.2026). */
.form-error { color: var(--c-gefahr); font-weight: 600; }

/* „Neues Feature"-Popup (#10, 17.06.2026). Modal-Overlay; ohne Alpine
   (x-show) bleibt es sichtbar und blockiert nichts Funktionales. */
.feature-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.55);
}
.feature-popup__box {
  max-width: 30rem;
  background: var(--c-pergament);
  border: 2px solid var(--c-bier);
  border-radius: var(--radius);
  box-shadow: var(--shadow-tief);
  padding: var(--sp-5);
  text-align: center;
  display: grid;
  gap: var(--sp-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
  /* Sans statt Cinzel: dünne Display-Serifen brechen bei fs-xs auf
     gesättigten Badge-Grundflächen optisch weg (Legibilität). */
  font-family: var(--font-nav);
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--c-holz);
  color: var(--c-creme);
}
.badge--gold   { background: var(--c-bier); color: var(--c-holz-dunkel); }
.badge--danger { background: var(--c-bordeaux); }
.badge--ok     { background: var(--c-erfolg); }
.badge--grau   { background: var(--c-grau); color: var(--c-creme); }

/* #69: Pill — Status-/Rollen-Chip der Cartell-Seiten (Single Source in app.css,
   Farben ueber --pill-*-Tokens). Ersetzt die frueher je Seite duplizierten
   .pill-Bloecke und die Fremdklassen .badge-open/.badge-application/… */
.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--pill-bg);
  color: var(--pill-fg);
}
.pill--ok        { background: var(--pill-ok-bg);        color: var(--pill-ok-fg); }
.pill--warn      { background: var(--pill-warn-bg);      color: var(--pill-warn-fg); }
.pill--info      { background: var(--pill-info-bg);      color: var(--pill-info-fg); }
.pill--danger    { background: var(--pill-danger-bg);    color: var(--pill-danger-fg); }
.pill--senior    { background: var(--pill-senior-bg);    color: var(--pill-senior-fg); }
.pill--consenior { background: var(--pill-consenior-bg); color: var(--pill-consenior-fg); }
.pill--bursch    { background: var(--pill-bursch-bg);    color: var(--pill-bursch-fg); }

/* ---------- 11. Listen (Missionen, Streak) ---------- */
.mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--c-holz-hell);
}
.mission:last-child { border-bottom: 0; }
.mission__reward { color: var(--c-tinte-weich); font-size: var(--fs-sm); }

/* Body-Spalte darf unter ihre intrinsische Breite schrumpfen, damit lange
   Gegner-/Couleur-/Bude-Namen den Timer-Block (mit eingebetteter .timer__row)
   nicht einquetschen und Label/Zahlenwert nicht überlappen. */
.mission > div:first-child { min-width: 0; }
/* Timer-Block darf nicht geschrumpft werden — seine 9rem-Spalte ist die
   Stabilitätsgarantie (v0.15.5 „Stabile Timerbreite"). */
.mission > div:last-child { flex-shrink: 0; }

/* Filterleiste (Nachrichten): umbrechende Buttonzeile mit Token-Gap.
   Touch-Ziele >= 44px, Beschriftung >= --fs-sm fuer mobile Lesbarkeit. */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-row .btn--sm { min-height: 44px; font-size: var(--fs-sm); }

/* Nachrichten-Cards: Badges -> Meldung -> Zeitstempel sauber gestapelt.
   Der Body darf unter seine intrinsische Breite schrumpfen (min-width: 0),
   der CTA bricht auf schmalen Screens rechtsbuendig unter den Text um,
   statt die Textspalte zu quetschen. */
.mission--notification { flex-wrap: wrap; }
.mission--notification .btn--sm { min-height: 44px; margin-left: auto; }
/* iOS Safari: ein Grid-Container als Flex-Item mit `flex-basis: auto` behaelt
   seine max-content-Breite, wenn er das einzige Item der Flexzeile ist (Karten
   OHNE CTA, z. B. „Bummelei …", „Kopfgeld kassiert …"). Die implizite
   auto-Spalte wird dann ebenfalls max-content breit -> der Text laeuft in einer
   Zeile aus der Karte. Karten MIT CTA brechen den Button um und bekommen dadurch
   eine definite Body-Breite — deshalb wirkten Text-Fixes (overflow-wrap,
   word-break) nie: es gab keine zu enge Zeile, an der umgebrochen werden musste.
   max-width kappt die Flex-Breite, minmax(0, 1fr) fixiert die Spalte. */
.mission__body { min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.mission__tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.mission__title { color: var(--c-tinte); overflow-wrap: anywhere; }
.mission__text { color: var(--c-tinte); opacity: 1; overflow-wrap: anywhere; white-space: pre-line; }
.mission__time { font-size: var(--fs-sm); color: var(--c-tinte-weich); opacity: 1; }

/* Duellseite mobil: Aktionsspalten (Countdown + Bericht) dürfen unter den
   Titel umbrechen. Kinder dürfen unter ihre intrinsische Breite schrumpfen,
   damit lange Budennamen nicht Seite und untere Statusleiste verschieben. */
.duels-page .mission { flex-wrap: wrap; }
.duels-page .mission > * { min-width: 0; }
.duels-page .mission strong { overflow-wrap: anywhere; }

/* Laufender Angriff: Die Aktionszeile (Timer + Erstattungstext + Rückzug-Button)
   in .flex darf auf schmalen Screens umbrechen, damit der Button nicht über den
   rechten Viewport-Rand läuft. Muster wie .mission--notification: Das Formular
   bricht deterministisch auf eine volle eigene Zeile um, Kinder dürfen
   schrumpfen, der lange Erstattungstext umbricht statt zu overflowen. */
.duels-page .mission .flex { flex-wrap: wrap; }
.duels-page .mission .flex > * { min-width: 0; }
.duels-page .mission .flex form { flex-basis: 100%; margin: 0; }
.duels-page .mission .flex .btn--sm { min-height: 44px; }

/* Aktionsspalte laufender Angriffe/Diebstähle (.mission__aktionen): Der
   Lauf-Timer samt Fortschrittsbalken bekommt eine eigene Zeile über die volle
   Spaltenbreite, die Aktion (Rückzug/Abbruch) steht darunter — vorher teilten
   sich Balken und Button eine Flexzeile, wodurch der Balken auf Mobile zu
   einem Streifen zusammengequetscht wurde. Die Spalte darf mitwachsen und auf
   schmalen Screens auf eine eigene Zeile umbrechen (deshalb `flex: 1 1 …`
   statt des `flex-shrink: 0` der generischen letzten .mission-Spalte). */
div.mission__aktionen {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  min-width: 0;
}
.mission__aktionen > form { margin: 0; align-self: flex-start; }
.mission__aktionen .btn { min-height: 44px; }

/* Incoming attacks need deterministic rows. Timer, status and report link used
   to compete in one flex row and compressed the progress bar on mobile. */
.incoming-attack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-3);
}
.incoming-attack__info,
.incoming-attack__actions {
  min-width: 0;
  max-width: 100%;
}
.incoming-attack__timer {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.incoming-attack__timer > .timer {
  width: 100%;
}
.incoming-attack__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.incoming-attack__actions .badge,
.incoming-attack__actions .btn {
  max-width: 100%;
  white-space: normal;
}
.incoming-attack__actions form { margin: 0; }

.streak {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.streak__day {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-family: var(--font-display);
  background: var(--c-pergament);
  border: 1px solid var(--c-holz-hell);
  color: var(--c-tinte-weich);
}
.streak__day--done {
  background: var(--c-bier);
  color: var(--c-holz-dunkel);
  border-color: var(--c-holz);
}
.streak__day--today {
  background: var(--c-bordeaux);
  color: var(--c-creme);
  border-color: var(--c-bier-hell);
}

/* ---------- 11b. Unter-Navigation (Sammel-Tabs Kampf/Verbindung) ---------- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-pergament-tief);
  border-bottom: var(--rand);
  font-family: var(--font-nav);
  font-size: var(--fs-sm);
}
.subnav a {
  color: var(--c-holz-dunkel);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.subnav a[aria-current="page"] {
  background: var(--c-holz-dunkel);
  color: var(--c-bier-hell);
}
.subnav a:hover { text-decoration: underline; }

/* ---------- 12. Statusleiste unten ---------- */
/* #155: fest am unteren Bildschirmrand (Mobile + Desktop); der Inhalt scrollt
   zwischen Topbar und Footer. Der Platz wird ueber padding-bottom am Body
   freigehalten (siehe Grundgeruest), damit nichts hinter der Leiste
   verschwindet.
   v0.16.51: position: fixed -> sticky (Owner-Report 22.08.2026): auf iOS
   Safari bricht fixed in Kombination mit overflow-x: clip am html/body —
   der Footer bleibt dann an seiner Dokumentposition und erscheint beim
   Scrollen MITTEN im Bild statt am unteren Rand. sticky bottom:0 klebt
   ebenfalls am Viewport-Rand, ist aber gegen diesen iOS-Bug unempfindlich
   (kein neuer Containing Block, kein Scroll-Container-Wechsel). Am
   Seitenende steht die Leiste naturgemaess an ihrem Dokumentplatz. */
.statusbar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: var(--status-h);
  /* Mobile-first: Brand-Zeile ueber der Linkzeile, beides zentriert —
     deterministisch statt zufaelligem flex-wrap-Umbruch mitten in der
     Linkliste. Ab 720px eine Zeile (siehe Media Query unten). */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--sp-1);
  text-align: center;
  padding: 2px var(--sp-2);
  /* Safe-Area rundum: Home-Indikator unten, Notch links/rechts im Querformat. */
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--sp-2), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-2), env(safe-area-inset-right, 0px));
  font-size: var(--fs-xs);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--c-creme);
  background: var(--c-holz-dunkel);
  border-top: 2px solid var(--c-bier);
  box-shadow: 0 -2px 8px rgba(43, 29, 18, 0.25);
}
.statusbar__brand {
  color: var(--c-bier-hell);
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.15;
}

/* #140/#141: Mobile legal links stay collapsed; brand and the 44px toggle now
   share one row so the closed bar no longer consumes two rows.
   When expanded, the <details> breaks to a new line at full width so the
   links wrap multi-line and stay readable on narrow screens. */
.statusbar__legal { width: auto; flex: 0 0 auto; text-align: center; }
/* Geöffnet löst sich nur der semantische details-Wrapper auf: Brand und
   gelber Toggle bleiben in Zeile 1, die weißen Links belegen Zeile 2. */
.statusbar__legal[open] { display: contents; }
.statusbar__legal[open] .statusbar__links {
  flex: 0 0 100%;
  width: 100%;
}
.statusbar__legal-label-full { display: none; }
.statusbar__legal-label-short { display: inline; }
.statusbar__legal-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  /* Tap-Ziel >= 44px (WCAG 2.5.5). */
  min-height: 44px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-bier-hell);
  font-weight: 600;
  cursor: pointer;
  /* Standard-Dreieck ersetzen wir durch einen eigenen Indikator. */
  list-style: none;
}
.statusbar__legal-toggle::-webkit-details-marker { display: none; }
.statusbar__legal-toggle::after {
  content: "▾";
  font-size: 0.85em;
  transition: transform 0.15s ease;
}
.statusbar__legal[open] .statusbar__legal-toggle::after { transform: rotate(180deg); }
.statusbar__legal[open] .statusbar__legal-toggle { margin-bottom: 0; }

.statusbar__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--sp-2);
  row-gap: var(--sp-1);
  padding: var(--sp-1) 0 var(--sp-2);
}
.statusbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--c-creme);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.8rem;
}
.statusbar__links a:hover { text-decoration: underline; color: var(--c-bier-hell); }

@media (min-width: 720px) {
  .statusbar {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--sp-4);
    padding-top: 2px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
  }
  /* #140: Aufklapper auf Desktop auflösen — <details> generiert keine eigene
     Box mehr (display:contents), sodass Brand und die Link-Nav wie zuvor als
     direkte Flex-Geschwister in einer Zeile liegen. Der Summary-Button
     entfällt, und die Links bleiben unabhängig vom open-Zustand sichtbar. */
  .statusbar__brand { font-size: inherit; white-space: nowrap; }
  .statusbar__legal { display: contents; }
  .statusbar__legal-toggle { display: none; }
  .statusbar__legal-label-full { display: inline; }
  .statusbar__legal-label-short { display: none; }
  .statusbar__legal::details-content { content-visibility: visible; }
  /* Punkt-Trenner (·) nur auf breiten Screens, wo die Zeile nicht umbricht. */
  .statusbar__links a + a::before {
    content: "·";
    margin-right: var(--sp-2);
    color: var(--c-bier);
  }
}

/* ---------- 12b. Couleurdiebstahl: Trophäenschrank, Rückholung, Chronik ---------- */
/* Semantische Badge-/Karten-Varianten: wurden in Templates (Couleur, Rangliste,
   Missionen, Auszeichnungen) bereits referenziert, waren aber nie definiert. */
.badge--success { background: var(--c-erfolg); }
.badge--warn    { background: var(--c-warnung); }
.card--success  { border-top-color: var(--c-erfolg); }
.card--warn     { border-top-color: var(--c-warnung); }

/* Abschnittsüberschrift der Chronik-Wertungen. */
.list-section > h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }

/* Set-Status im Trophäenschrank (vollständig / Teile beim Dieb). */
.couleur-hinweis {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.couleur-hinweis--ok   { background: var(--c-erfolg-bg);  color: var(--c-erfolg); }
.couleur-hinweis--warn { background: var(--c-warnung-bg); color: var(--c-warnung); }

/* #91: Trophäenschrank-Grid — mobil ein-/zweispaltig, wächst mit dem Viewport. */
.couleur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.couleur-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-align: center;
  background: var(--c-pergament);
}
.couleur-eigenbereich { border-top: 4px solid var(--c-erfolg); }
.couleur-grid--eigen { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.couleur-card--eigen {
  border-color: var(--c-erfolg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-erfolg) 18%, transparent);
}
.couleur-card--fehlend {
  border: 2px solid var(--c-warnung);
  background: var(--c-warnung-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-warnung) 22%, transparent);
}
.couleur-card--beute { border-color: var(--c-bier); }
.couleur-card__icon { font-size: 2rem; line-height: 1.2; }
.couleur-card__name { font-weight: 600; overflow-wrap: anywhere; }
.couleur-card__herkunft {
  font-size: var(--fs-xs);
  color: var(--c-tinte-weich);
  overflow-wrap: anywhere;
}

/* Rückhol-/Auslöseübersicht: eine Zeile pro fehlendem Teil — Infos links,
   Auslösen-Button rechts (mobil gestapelt, Button volle Breite = Tap-Ziel). */
.couleur-redeem { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.couleur-redeem__row {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-pergament);
}
.couleur-redeem__info { display: grid; gap: 2px; }
.couleur-redeem__row .progress { height: 10px; margin-top: var(--sp-1); }
.couleur-redeem__aktion { display: grid; }
.couleur-redeem__aktion .btn { width: 100%; }
@media (min-width: 560px) {
  .couleur-redeem__row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .couleur-redeem__aktion .btn { width: auto; }
}

/* Couleur-Chronik (Rangliste-Tab): genau zwei kompakte Wertungen, ab
   Tablet-Breite nebeneinander. */
.couleur-chronik { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 720px) {
  .couleur-chronik { grid-template-columns: 1fr 1fr; }
}

/* ---------- 12c. Couleurdiebstahl: Zielliste ---------- */
.diebstahl-ziele {
  display: grid;
  gap: var(--sp-3);
}

.diebstahl-ziel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-pergament);
}

.diebstahl-ziel--rache {
  border-color: var(--c-gefahr);
  background: var(--c-gefahr-bg);
}

.diebstahl-ziel--gesperrt {
  border-color: var(--c-grau);
  background: var(--c-grau-bg);
}

.diebstahl-ziel__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.diebstahl-ziel__kopf > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.diebstahl-ziel__kopf strong { overflow-wrap: anywhere; }

.diebstahl-ziel__items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-1);
}

.diebstahl-item {
  display: grid;
  place-items: center;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-2) var(--sp-1);
  border: 1px solid var(--c-holz-hell);
  border-radius: var(--radius-sm);
  background: var(--c-pergament-tief);
  font-size: var(--fs-sm);
  text-align: center;
}

.diebstahl-item > span {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diebstahl-item--selectable {
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.diebstahl-item--selectable:hover,
.diebstahl-item--selectable:focus-within {
  border-color: var(--c-bier);
  transform: translateY(-1px);
}

.diebstahl-item--selectable:has(input:checked) {
  border: 2px solid var(--c-bier);
  background: var(--c-bier-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-bier) 25%, transparent);
}

.diebstahl-ziel__auswahl {
  display: grid;
  gap: var(--sp-3);
}

.diebstahl-ziel__chance {
  flex-wrap: wrap;
}

.diebstahl-item--selectable:has(input:focus-visible) {
  outline: 3px solid var(--c-bier);
  outline-offset: 2px;
}

.diebstahl-item--meins {
  border-color: var(--c-gefahr);
  background: var(--c-gefahr-bg);
}

.diebstahl-item--fehlt {
  border-color: var(--c-grau);
  color: var(--c-grau);
  background: var(--c-grau-bg);
  opacity: 0.65;
}

.diebstahl-ziel__chance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
}

.diebstahl-ziel__chance strong {
  color: var(--c-bordeaux);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.diebstahl-ziel__aktion { margin-top: auto; }
.diebstahl-ziel__aktion > p { margin: 0; }

/* ---------- 12d. Coup-Wahl: Truppenstaerke + Segen-Verstaerkung ----------
   Owner-Feedback 20.08.2026: die nackten Number-Inputs waren unschoen. Statt
   dessen zwei Slider mit grosser Anzeige und ein Chancenband. Mobile-first:
   Slider ueber volle Breite, Anzeigen darueber. */
.coup-wahl {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--c-holz-hell);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--c-holz-dunkel), var(--c-holz));
  color: var(--c-creme);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-bier) 22%, transparent);
}

.coup-wahl .muted,
.coup-wahl .tiny.muted { color: color-mix(in srgb, var(--c-creme) 72%, transparent); }

.coup-wahl__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--c-bier) 35%, transparent);
}

.coup-wahl__titel {
  color: var(--c-bier-hell);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
}

.coup-wahl__regler { display: grid; gap: var(--sp-2); }

.coup-wahl__regler-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.coup-wahl__label {
  color: var(--c-creme);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
}

/* Runde Gold-Plakette mit dem aktuellen Wert — das ist die Hauptanzeige. */
.coup-wahl__kreis {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--c-bier);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--c-bier-hell), var(--c-bier));
  color: var(--c-holz-dunkel);
  line-height: 1;
  text-align: center;
}

.coup-wahl__kreis strong {
  font-family: var(--font-display);
  font-size: var(--fs-md);
}

.coup-wahl__kreis small { font-size: 0.55rem; letter-spacing: 0.04em; }

.coup-wahl__kreis--segen {
  border-color: var(--c-bordeaux-hell);
  background: radial-gradient(circle at 50% 35%, #c04a5c, var(--c-bordeaux));
  color: var(--c-creme);
}

.coup-wahl__slider {
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.coup-wahl__slider:focus-visible { outline: 3px solid var(--c-bier-hell); outline-offset: 2px; }

.coup-wahl__slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--c-bier) 45%, transparent);
  border-radius: 999px;
  background: var(--c-holz-dunkel);
}

.coup-wahl__slider::-moz-range-track {
  height: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--c-bier) 45%, transparent);
  border-radius: 999px;
  background: var(--c-holz-dunkel);
}

.coup-wahl__slider::-webkit-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.55rem;
  border: 2px solid var(--c-holz-dunkel);
  border-radius: 50%;
  background: var(--c-bier-hell);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  -webkit-appearance: none;
  appearance: none;
}

.coup-wahl__slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--c-holz-dunkel);
  border-radius: 50%;
  background: var(--c-bier-hell);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.coup-wahl__slider--segen::-webkit-slider-thumb { background: #c04a5c; }
.coup-wahl__slider--segen::-moz-range-thumb { background: #c04a5c; }

.coup-wahl__skala {
  display: flex;
  justify-content: space-between;
  color: color-mix(in srgb, var(--c-creme) 65%, transparent);
  font-size: var(--fs-xs);
}

.coup-wahl__regler > p { margin: 0; }

.coup-wahl__chance { display: grid; gap: var(--sp-1); }

.coup-wahl__chance-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.coup-wahl__chance-kopf .muted { color: color-mix(in srgb, var(--c-creme) 72%, transparent); }

.coup-wahl__chance-kopf strong {
  color: var(--c-bier-hell);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

/* Chancenband statt nackter Zahl — Farbstufen aus coup_chance_band_*. */
.coup-wahl__band {
  overflow: hidden;
  height: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--c-bier) 45%, transparent);
  border-radius: 999px;
  background: var(--c-holz-dunkel);
}

.coup-wahl__band-fuell {
  height: 100%;
  border-radius: 999px;
  transition: width 140ms ease, background 140ms ease;
}

.coup-wahl__band-fuell--gering { background: linear-gradient(90deg, #8a3b46, var(--c-gefahr)); }
.coup-wahl__band-fuell--mittel { background: linear-gradient(90deg, var(--c-warnung), var(--c-bier)); }
.coup-wahl__band-fuell--hoch   { background: linear-gradient(90deg, var(--c-bier), #4a8a54); }

.coup-wahl__kosten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

@media (min-width: 720px) {
  .diebstahl-ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 12e. Coup-Vorwarnung (Verteidiger-Sicht) ----------
   Owner-Feedback 21.08.2026 (Screenshot): der Info-Block („Coup auf dein …",
   Chancenband, Wache-Timer) wurde als `.mission`-Flexzeile mit
   `justify-content: space-between` LINKS neben das Regler-Formular gequetscht.
   Eigener Eintrags-Container statt `.mission`: Spalte, Info oben, Formular in
   voller Breite darunter. */
/* Die Vorwarnung ist eine helle Spielkarte wie im Duell-Modus — nur die
   Oberkante traegt den Warnton (`card--warn`). Explizit gesetzt, damit die
   Karte nicht doch als dunkles Warn-Panel gelesen wird (Owner 21.08.2026). */
.coup-warnung {
  background: var(--surface-parchment);
  color: var(--c-tinte);
}

.coup-warnung__eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--c-holz-hell);
}
.coup-warnung__eintrag:last-of-type { border-bottom: 0; }

.coup-warnung__info { display: grid; gap: var(--sp-1); min-width: 0; }
.coup-warnung__titel {
  margin: 0;
  color: var(--c-tinte);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}
.coup-warnung__chance { margin: 0; }
.coup-warnung__chance strong { color: var(--c-tinte); }
/* Spaeher-Meldung der Wartephase: bewusst etwas lauter als die tiny-Zeilen —
   sie ist die einzige Information, auf der die Wache-Entscheidung fusst
   (Owner-Feedback 22.08.2026: Geheimnis statt Stundenangabe). */
.coup-warnung__spaeher {
  margin: 0;
  color: var(--c-tinte-weich);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.coup-warnung__spaeher strong {
  color: var(--c-tinte);
  font-style: italic;
}
.coup-warnung__taktik { margin: 0; }
/* Vergleichsband „ohne deine Wache" haengt an derselben Zeile, bricht aber
   auf schmalen Screens sauber um. */
.coup-warnung__vergleich { white-space: nowrap; }
.coup-warnung__vergleich::before { content: " · "; }
.coup-warnung__status { margin: 0; }

/* Wache-Formular: gleiche Regler-Anatomie wie „Coup planen", aber in der
   Pergament-Optik der Seite statt als dunkles Warn-Panel — die Karte soll wie
   eine normale Spielkarte wirken (Owner-Feedback 21.08.2026). */
.coup-wahl--wache {
  margin-top: 0;
  border-color: color-mix(in srgb, var(--c-holz) 40%, transparent);
  background: var(--c-pergament);
  color: var(--c-tinte);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-bier) 18%, transparent);
}
.coup-wahl--wache .muted,
.coup-wahl--wache .tiny.muted,
.coup-wahl--wache .coup-wahl__chance-kopf .muted,
.coup-wahl--wache .coup-wahl__skala { color: var(--c-tinte-weich); }
.coup-wahl--wache .coup-wahl__label { color: var(--c-tinte); }
.coup-wahl--wache .coup-wahl__titel,
.coup-wahl--wache .coup-wahl__chance-kopf strong { color: var(--c-holz); }
.coup-wahl--wache .coup-wahl__kopf { border-bottom-color: color-mix(in srgb, var(--c-holz) 35%, transparent); }
.coup-wahl--wache .coup-wahl__band {
  border-color: color-mix(in srgb, var(--c-holz) 35%, transparent);
  background: var(--c-pergament-tief);
}
.coup-wahl--wache .coup-wahl__slider::-webkit-slider-runnable-track {
  border-color: color-mix(in srgb, var(--c-holz) 45%, transparent);
  background: var(--c-pergament-tief);
}
.coup-wahl--wache .coup-wahl__slider::-moz-range-track {
  border-color: color-mix(in srgb, var(--c-holz) 45%, transparent);
  background: var(--c-pergament-tief);
}
.coup-wahl--wache .coup-wahl__slider::-webkit-slider-thumb { border-color: var(--c-holz); background: var(--c-bier); }
.coup-wahl--wache .coup-wahl__slider::-moz-range-thumb { border-color: var(--c-holz); background: var(--c-bier); }
.coup-wahl--wache .coup-wahl__slider:focus-visible { outline-color: var(--c-bier); }
/* Owner 21.08.2026: Der „Gebundener Segen"-Fuellbalken ist entfallen — er sah
   aus wie ein zweiter Regler, war aber nur Anzeige. Die ✝️-Kosten stehen im
   Kosten-Badge und im Button; darum gibt es hier kein `--segen`-Band mehr. */

/* ---------- 13. Utility-Klassen (aus Spacing-Tokens) ---------- */
/* keine Inline-Styles in Templates (Review-Fix 2) */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.full-width { width: 100%; }
/* Schmales Zahlenfeld für Angriffs-Formulare (Mitglieder / Bier-Einsatz).
   Ersetzt inline style="width:4rem" — Token-basiert (kein Magic Number
   außer der semantischen Breite 4rem für ein max. 4-stelliges Feld). */
.input--narrow { width: 4rem; }
.input--attack-beer { width: 6rem; }

/* Kopfgeld-Formular (Duelle): Ziel-Auswahl + Betrag + Button. Auf schmalen
   Screens umbrechen und die Ziel-Auswahl schrumpfen lassen, damit ein langer
   Budenname in der <select> die Zeile nicht über den Viewport hinaus zieht. */
.bounty-form select { flex: 1 1 8rem; min-width: 0; }

/* ---------- 15. Basar ---------- */
.basar-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.basar-card {
  min-width: 0;
  overflow: hidden;
}
.basar-card__heading {
  margin-bottom: var(--sp-3);
}
.basar-card__heading > * {
  margin-top: 0;
}
.basar-card__heading .eyebrow {
  margin-bottom: var(--sp-1);
}
.basar-form {
  margin-top: var(--sp-4);
}
.basar-form__trade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.8fr);
  gap: var(--sp-3);
}
.basar-field {
  min-width: 0;
}
.basar-field label,
.basar-form__duration label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--c-holz-dunkel);
}
.basar-field input,
.basar-field select,
.basar-form__duration select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.basar-field--arrow {
  display: none;
}
.basar-form__duration {
  display: grid;
  grid-template-columns: auto minmax(0, 12rem);
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}
.basar-form__duration .form-help {
  grid-column: 2;
  color: var(--c-tinte-weich);
  font-size: var(--fs-xs);
}
.basar-fee-note {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3);
  border-left: 3px solid var(--c-bier);
  color: var(--c-tinte-weich);
  background: rgba(196, 135, 18, 0.08);
  font-size: var(--fs-sm);
}
.basar-submit {
  width: 100%;
  margin-top: var(--sp-4);
}
.basar-offer-list,
.basar-market-list {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}
.basar-offer-card,
.basar-market-card {
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: rgba(251, 246, 233, 0.42);
}
.basar-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
}
.basar-offer-card__main,
.basar-market-card__trade {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}
.basar-offer-card__meta,
.basar-market-card__meta {
  color: var(--c-tinte-weich);
  font-size: var(--fs-xs);
}
.basar-offer-card__meta {
  grid-column: 1 / -1;
}
.basar-trade-arrow {
  color: var(--c-bordeaux);
  font-family: var(--font-display);
}
.basar-market {
  margin-top: var(--sp-5);
}
.basar-market-card {
  display: grid;
  grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1.4fr) minmax(9rem, 0.8fr);
  gap: var(--sp-3);
  align-items: center;
}
.basar-market-card__seller,
.basar-market-card__trade,
.basar-market-card__meta {
  min-width: 0;
}
.basar-market-card__seller {
  display: grid;
  gap: 2px;
}
.basar-market-card__seller .eyebrow,
.basar-market-card__trade small {
  display: block;
  margin: 0;
  color: var(--c-tinte-weich);
  font-size: var(--fs-xs);
}
.basar-market-card__trade > span:not(.basar-trade-arrow) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.basar-market-card__trade strong,
.basar-offer-card strong {
  overflow-wrap: anywhere;
}
.basar-market-card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-2);
  text-align: right;
}

@media (max-width: 719px) {
  .basar-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .basar-market-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .basar-market-card__meta {
    justify-content: space-between;
    text-align: left;
  }
}

@media (max-width: 559px) {
  .basar-page-header {
    margin-bottom: var(--sp-4);
  }
  .basar-page-header h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }
  .basar-card {
    padding: var(--sp-4);
  }
  .basar-card h2 {
    font-size: clamp(1.3rem, 6vw, 1.75rem);
  }
  .basar-form__trade {
    gap: var(--sp-2);
  }
  .basar-form__duration {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-1);
  }
  .basar-form__duration .form-help {
    grid-column: auto;
  }
  .basar-offer-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .basar-offer-card form,
  .basar-offer-card .btn,
  .basar-market-card .btn {
    width: 100%;
  }
  .basar-market-card__meta {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---------- 16. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. Forschungsbaum (Tech-Tree) ---------- */
/* Nur auf /forschung/ genutzt. Keine Magic-Number-Farben — ausschließlich
   var(--c-*)-Tokens. Neue Klassen: .rt-section, .rt-section__head,
   .rt-section__title, .rt-section__sub, .rt-blueprints, .rt-tree,
   .rt-track, .rt-track__head, .rt-track__icon, .rt-track__title,
   .rt-chain, .rt-rail, .rt-rail--lit, .rt-node, .rt-node--fertig,
   .rt-node--laeuft, .rt-node--gesperrt, .rt-node--verfuegbar,
   .rt-node--puls, .rt-node__head, .rt-node__name, .rt-node__flavor. */

/* Abschnitt-Wrapper (Baupläne + Skilltree) */
.rt-section {
  margin-top: var(--sp-5);
}

.rt-section__head {
  margin-bottom: var(--sp-4);
}

.rt-section__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}

.rt-section__sub {
  margin: 0;
}

/* Bauplan-Reihe: horizontales Grid, 1→2→3 Spalten */
.rt-blueprints {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .rt-blueprints { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .rt-blueprints { grid-template-columns: repeat(3, 1fr); }
}

/* Vier Schienen nebeneinander (Desktop), einspaltig mobil */
.rt-tree {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .rt-tree { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .rt-tree { grid-template-columns: repeat(4, 1fr); }
}

/* Schienen-Kopf: Icon + Zweigname */
.rt-track__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(180deg, var(--c-holz) 0%, var(--c-holz-dunkel) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
  border: var(--rand-stark);
  border-bottom: 2px solid var(--c-bier);
  margin-bottom: 0;
}

.rt-track__icon {
  font-size: var(--fs-lg);
  line-height: 1;
}

.rt-track__title {
  font-size: var(--fs-base);
  color: var(--c-bier-hell);
  margin: 0;
  letter-spacing: 0.05em;
}

/* Ketten-Container: stapelt Rail + Knoten vertikal */
.rt-chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-left: 2px solid var(--c-holz-hell);
  border-right: 2px solid var(--c-holz-hell);
  border-bottom: 2px solid var(--c-holz-hell);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--c-pergament);
  padding: var(--sp-4);
  gap: 0;
}

/* Vertikale Tech-Rail zwischen zwei Knoten.
   Gedämpft (offen/gesperrt) — wird durch .rt-rail--lit aktiviert (Gold). */
.rt-rail {
  align-self: center;
  width: 3px;
  height: var(--sp-5);
  border-radius: 2px;
  background: var(--c-grau-bg);
  margin: var(--sp-1) 0;
  position: relative;
}

/* Segment ist „durchflossen" (Vorgänger fertig) */
.rt-rail--lit {
  background: linear-gradient(180deg, var(--c-bier), var(--c-bier-hell));
  box-shadow: 0 0 6px rgba(200, 134, 13, 0.55);
}

/* ── Basis-Knoten-Karte ──────────────────────────────────────────── */
.rt-node {
  position: relative;
  background: var(--c-pergament-tief);
  border: 1px solid var(--c-holz-hell);
  border-left: 4px solid var(--c-holz);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.rt-node__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.rt-node__name {
  font-size: var(--fs-base);
  margin: 0;
}

.rt-node__flavor {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-tinte-weich);
  font-style: italic;
}

/* Effekt-Zeile: die eigentliche Nutzenaussage der Karte. Bewusst kräftiger
   als der dekorative Flavor (volle Tinte, Basisgröße, halbfett), damit der
   Bonus die primäre Information bleibt — auch im Fertig-Zustand. */
.rt-node__effekt {
  margin: 0;
  color: var(--c-tinte);
  font-size: var(--fs-base);
  font-weight: 600;
}

/* ── Zustandsvarianten ──────────────────────────────────────────── */

/* Fertig: Gold-Rahmen; der Status wird im Badge als Text angezeigt. */
.rt-node--fertig {
  border-left-color: var(--c-bier);
  background: var(--c-creme);
  color: var(--c-tinte);
  opacity: 1;
}

.rt-node--fertig :is(p, dt, dd, .rt-node__name) {
  color: var(--c-tinte);
  opacity: 1;
}

/* Nur Flavor + generische .muted-Nebentexte bleiben gedämpft; die
   Effekt-Zeile (.rt-node__effekt) behält bewusst ihre volle Tinte. */
.rt-node--fertig :is(.rt-node__flavor, .muted) {
  color: var(--c-tinte-weich);
  opacity: 1;
}

/* Läuft: Gold-Glühen + Puls (Gold, nicht Bordeaux wie .pulse) */
.rt-node--laeuft {
  border-left-color: var(--c-bier-hell);
  border-top: 2px solid var(--c-bier);
}

.rt-node--puls {
  animation: rt-glow 2.4s ease-in-out infinite;
}

@keyframes rt-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 134, 13, 0); }
  50%       { box-shadow: 0 0 10px 3px rgba(200, 134, 13, 0.35); }
}

/* Gesperrt: entsättigt, gedimmt */
.rt-node--gesperrt {
  background: var(--c-grau-bg);
  border-left-color: var(--c-grau);
  color: var(--c-grau);
  opacity: 0.75;
}

.rt-node--gesperrt .rt-node__name {
  color: var(--c-grau);
}

/* Verfügbar (Standard): klare Ansicht, subtiler Hover */
.rt-node--verfuegbar {
  border-left-color: var(--c-holz-hell);
}

.rt-node--verfuegbar:hover {
  border-left-color: var(--c-bier);
  box-shadow: var(--shadow);
}

/* prefers-reduced-motion: rt-glow zusätzlich explizit abschalten
   (der globale Block in Sektion 14 deckt animations ab, aber da
   wir .rt-node--puls animation selbst setzen, ist es defensiv
   sauber, es hier zu wiederholen). */
@media (prefers-reduced-motion: reduce) {
  .rt-node--puls { animation: none; }
  .rt-rail--lit  { box-shadow: none; }
}

/* ---------- 16. PvP / Status / Benachrichtigungen (Phase 4) ---------- */
/* Neue Klassen (P4-15): .badge--fuchs, .badge--bursch, .badge--philister,
   .card--sieg, .card--niederlage, .nav-bell, .nav-bell__counter,
   .ziel-table, .ziel-karte. Tokens statt Magic Numbers. */

/* Status-Badges: setzen auf .badge--grau/.badge--gold auf */
.badge--fuchs {
  background: var(--c-grau);
  color: var(--c-creme);
}

.badge--bursch {
  background: var(--c-bier);
  color: var(--c-holz-dunkel);
}

.badge--philister {
  background: linear-gradient(135deg, var(--c-bier) 0%, var(--c-bier-hell) 100%);
  color: var(--c-holz-dunkel);
  box-shadow: 0 0 6px rgba(200, 134, 13, 0.45);
}

/* Sieg-Karte: Gold-Rahmen + dezentes Gold-Glühen */
.card--sieg {
  border-top-color: var(--c-bier);
  background: linear-gradient(
    135deg,
    var(--c-pergament-tief) 0%,
    rgba(200, 134, 13, 0.08) 100%
  );
  box-shadow: var(--shadow), 0 0 12px rgba(200, 134, 13, 0.25);
}

/* Niederlage-Karte: gedämpfter Bordeaux-Ton */
.card--niederlage {
  border-top-color: var(--c-bordeaux);
  background: linear-gradient(
    135deg,
    var(--c-pergament-tief) 0%,
    rgba(110, 20, 34, 0.06) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .card--sieg { box-shadow: var(--shadow); }
}

/* Benachrichtigungs-Glocke in der Navbar */
.nav-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-creme);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
}
.nav-bell:hover { background: rgba(240, 183, 60, 0.18); }

.nav-bell__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: var(--c-bordeaux);
  color: var(--c-creme);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Zielliste: Tabelle auf Desktop, Karten auf Mobil */
.ziel-table {
  display: none;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.ziel-table th,
.ziel-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--c-holz-hell);
  vertical-align: middle;
}
.ziel-table th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-tinte-weich);
}
.ziel-table tbody tr:last-child td { border-bottom: 0; }

.ziel-karten {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

/* Ab Breakpoint 1024px: Tabelle zeigen, Karten verstecken */
@media (min-width: 1024px) {
  .ziel-table { display: table; }
  .ziel-karten { display: none; }
}

/* Auf mittlerer Breite (560–1023px) Karten zweispaltig */
@media (min-width: 560px) and (max-width: 1023px) {
  .ziel-karten { grid-template-columns: repeat(2, 1fr); }
}

/* #112: Gebäude-Stufentabelle — IMMER sichtbar (nicht wie .ziel-table nur ab
   1024px), da sie keinen Mobil-Karten-Fallback hat. Breite Inhalte scrollen
   im umschließenden .table-scroll-Container (overflow-x:auto). */
.stufen-tabelle {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.stufen-tabelle th,
.stufen-tabelle td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--c-holz-hell);
  vertical-align: middle;
  white-space: nowrap;
}
.stufen-tabelle th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-tinte-weich);
}
.stufen-tabelle tbody tr:last-child td { border-bottom: 0; }
.stufen-tabelle tr.is-current { background: rgba(240, 183, 60, 0.14); font-weight: 700; }

/* ============================================================
   Phase 10: Tabs & Rangliste
   ============================================================ */

/* Tab-Navigation Container */
.tabs {
  margin-bottom: var(--sp-4);
}

.tabs__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: 2px solid var(--c-holz-hell);
  margin-bottom: 0;
}

.tabs__button {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--c-tinte-weich);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  margin-bottom: -2px;
}

/* Mobile: show ranking tabs in two rows instead of clipping them. */
@media (max-width: 559px) {
  .tabs__button {
    flex: 1 1 44%;
    min-width: 0;
    padding: var(--sp-2);
    font-size: var(--fs-xs);
  }
}

.tabs__button:hover {
  color: var(--c-tinte);
  background: rgba(240, 183, 60, 0.08);
}

.tabs__button--active {
  color: var(--c-bier);
  border-bottom-color: var(--c-bier);
  font-weight: 600;
}

/* Radio-basierte Tabs (chat.html): reines CSS, kein JS. Die <input
   type="radio">-Geschwister steuern, welcher .tabs__content sichtbar ist
   und welches .tabs__label aktiv markiert wird. */
.tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tabs__nav {
  display: flex;
  gap: var(--sp-2);
  border-bottom: 2px solid var(--c-holz-hell);
  margin-bottom: var(--sp-4);
}

.tabs__label {
  flex: 1;
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;
  border-bottom: 3px solid transparent;
  color: var(--c-tinte-weich);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-bottom: -2px;
}

.tabs__label:hover {
  color: var(--c-tinte);
  background: rgba(240, 183, 60, 0.08);
}

/* Aktives Label, wenn sein Radio ausgewählt ist. */
#tab-global:checked ~ .tabs__nav label[for="tab-global"],
#tab-pm:checked ~ .tabs__nav label[for="tab-pm"] {
  color: var(--c-bier);
  border-bottom-color: var(--c-bier);
  font-weight: 600;
}

/* Inhalte: standardmäßig verborgen, nur der gewählte Tab sichtbar. */
.tabs__content { display: none; }
#tab-global:checked ~ .tabs__content:nth-of-type(1) { display: block; }
#tab-pm:checked ~ .tabs__content:nth-of-type(2) { display: block; }

/* ---------- Cartell ---------- */
.cartell-colors,
.cartell-hero__crest {
  display: flex;
  gap: var(--sp-2);
}

.cartell-hero__crest { margin-bottom: var(--sp-3); }

.color-dot {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
}

.cartell-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--sp-3);
}

.cartell-stat { text-align: center; }
.cartell-stat__num {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
}
.cartell-stat__lbl {
  display: block;
  color: var(--c-tinte-weich);
  font-size: var(--fs-xs);
}

.cartell-layout,
.cartell-sidebar {
  display: grid;
  gap: var(--sp-4);
}

.kasse-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-2) var(--sp-3);
}
.kasse-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--sp-1);
  min-width: 0;
  font-size: var(--fs-md);
}
.kasse-item > span[aria-hidden="true"] {
  grid-row: 1 / span 2;
  align-self: center;
}
.kasse-item > strong,
.kasse-item > .muted { grid-column: 2; }
.kasse-item > .muted { overflow-wrap: anywhere; }
.cartell-sidebar .kasse-row + .btn { margin-top: var(--sp-3); }

.member-list__name { font-weight: 600; }
.member-list.member-list--roster { gap: 0; }
.member-list--roster .member-list__item {
  align-items: stretch;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
}
.member-list__main,
.member-list__meta,
.member-list__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.member-contribution { white-space: nowrap; }
.member-actions { margin-top: var(--sp-1); }
.member-actions summary {
  min-height: 2.75rem;
  padding: var(--sp-2) 0;
  color: var(--c-bordeaux);
  font-weight: 700;
  cursor: pointer;
}
.member-actions[open] summary { margin-bottom: var(--sp-2); }
.member-list__actions form { margin: 0; }

.card--cartell-info { border-left: var(--sp-1) solid var(--c-bier); }

.quest-progress {
  display: block;
  width: 100%;
  height: var(--sp-5);
  overflow: hidden;
  appearance: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-pergament-tief);
}
.quest-progress::-webkit-progress-bar { background: var(--c-pergament-tief); }
.quest-progress::-webkit-progress-value {
  background: var(--c-holz);
  transition: width 0.4s ease;
}
.quest-progress::-moz-progress-bar {
  background: var(--c-holz);
  transition: width 0.4s ease;
}
.quest-progress--done::-webkit-progress-value { background: var(--c-erfolg); }
.quest-progress--done::-moz-progress-bar { background: var(--c-erfolg); }

.fehde-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}
.fehde-side { text-align: center; }
.fehde-side__name { font-weight: 600; }
.fehde-side__points { font-size: var(--fs-2xl); font-weight: 800; }
.fehde-vs { color: var(--c-grau); font-size: var(--fs-xl); font-weight: 800; }
.fehde-list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.fehde-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}
.fehde-list__actions,
.fehde-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.fehde-list__actions form { margin: 0; }
.fehde-form select { padding: var(--sp-1) var(--sp-2); }

.cartell-donate .stack input[type="number"] {
  display: block;
  width: 100%;
  max-width: 16rem;
  min-height: 2.75rem;
  margin: var(--sp-1) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-base);
}
.cartell-donate .stack label { font-weight: 600; }
.donate-dialog {
  width: min(92vw, 26rem);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: inherit;
}
.donate-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.donate-dialog__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  font-weight: 600;
}
.donate-dialog__betrag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.donate-dialog__betrag input[type="number"] {
  flex: 1;
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-base);
}
.donate-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

@media (min-width: 1024px) {
  .cartell-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
  }
  .cartell-hero__crest { margin-bottom: 0; }
  .cartell-hero > p {
    grid-column: 2;
    margin-top: 0;
  }
  .cartell-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
  .cartell-sidebar .kasse-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Chat-Nachrichten (global, PM, Cartell) ---------- */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}

.chat-message {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-pergament-tief);
  border-left: 3px solid var(--c-holz-hell);
}
.chat-message p { margin: var(--sp-1) 0 0; word-break: break-word; }

.chat-message__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}

/* Eigene Nachrichten farblich abheben und nach rechts rücken. */
.chat-message--own {
  border-left-color: var(--c-bier);
  background: rgba(240, 183, 60, 0.10);
}

/* Private Nachrichten: Konversations-Auswahl + Verlauf + Antwort. */
.chat-picker { margin-top: var(--sp-2); }
.chat-picker__row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.chat-picker__row select { flex: 1 1 auto; }

.chat-thread {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-3);
}
.chat-thread__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}
/* Verlauf: neueste oben, begrenzte Höhe mit eigenem Scroll. */
.chat-messages--thread {
  max-height: 22rem;
  overflow-y: auto;
}
.chat-reply__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

/* Mitgliederliste (Cartell-Chat-Seitenleiste). */
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.member-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.member-list li > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.member-list li > .badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Admin-Couleur-Besitz: Filter und bewusst horizontal scrollende Tabelle. */
.couleur-besitz-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.couleur-besitz-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.couleur-besitz-filter label {
  flex: 1 1 12rem;
  min-width: 12rem;
}
.couleur-besitz-filter select {
  min-width: 14rem;
}
.couleur-besitz-card .table-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: scroll;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}
/* Feste Spaltenaufteilung + Umbruch statt nowrap: lange Budennamen brechen
   innerhalb ihrer Zelle um, statt in Nachbarspalten zu laufen. table-layout:
   fixed gilt bewusst auf allen Viewports, damit die mobile Regel
   `.leaderboard__table { table-layout: fixed }` keine gleich breiten
   Spalten erzwingt. Die min-width erhält den inneren horizontalen Scroll. */
.couleur-besitz-table {
  min-width: 40rem;
  width: 100%;
  table-layout: fixed;
}
.couleur-besitz-table th,
.couleur-besitz-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.couleur-besitz-table th:nth-child(2),
.couleur-besitz-table td:nth-child(2),
.couleur-besitz-table th:nth-child(3),
.couleur-besitz-table td:nth-child(3) {
  min-width: 0;
  max-width: 14rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.couleur-besitz-table th:nth-child(1) { width: 20%; }
.couleur-besitz-table th:nth-child(2),
.couleur-besitz-table th:nth-child(3) { width: 27%; }
.couleur-besitz-table th:nth-child(4) {
  width: 26%;
  min-width: 11rem;
}
.couleur-besitz-table td:nth-child(4) .badge {
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.leaderboard {
  overflow-x: auto;
  margin: var(--sp-4) 0;
}

/* Genereller horizontaler Scroll-Container fuer breite Tabellen (alle Viewports). */
.table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Konto- und Auditbewegungen behalten lesbare Spalten. Der äußere Rahmen
   bleibt viewportbreit; auf schmalen Screens scrollt ausschließlich diese
   Tabelle horizontal. */
.bewegungen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
}

.bewegungen-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.bewegungen-card .table-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: scroll;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

.bewegungen-table {
  min-width: 52rem;
}

.bewegungen-table__nowrap {
  white-space: nowrap;
}

.bewegungen-table__beschreibung {
  min-width: 18rem;
}

.leaderboard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.leaderboard__table th,
.leaderboard__table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--c-holz-hell);
  vertical-align: middle;
}

.leaderboard__table th {
  background: rgba(240, 183, 60, 0.08);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--c-tinte);
  text-transform: uppercase;
}

.leaderboard__table tbody tr:last-child td {
  border-bottom: 0;
}

.leaderboard__rank {
  width: 60px;
  text-align: center;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.leaderboard__name {
  min-width: 200px;
  font-weight: 500;
}

.leaderboard__name a {
  color: var(--c-bier);
  text-decoration: none;
  transition: color 0.18s ease;
}

.leaderboard__name a:hover {
  color: var(--c-bordeaux);
  text-decoration: underline;
}

.leaderboard__title {
  min-width: 150px;
  font-size: var(--fs-xs);
}

.leaderboard__score {
  text-align: right;
  min-width: 80px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-bordeaux);
}

.leaderboard__secondary {
  text-align: right;
  min-width: 60px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-tinte-weich);
}

/* Highlight für Spieler */
.leaderboard__row--highlight {
  background: linear-gradient(
    90deg,
    rgba(240, 183, 60, 0.08) 0%,
    transparent 100%
  );
  font-weight: 500;
}

.leaderboard__row--highlight .leaderboard__rank {
  color: var(--c-bier);
  font-weight: 700;
}

.leaderboard__row--highlight .leaderboard__name a {
  color: var(--c-bier);
  font-weight: 600;
}

/* Titel-Badge in der Rangliste */
.title-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  background: linear-gradient(135deg, var(--c-bier) 0%, var(--c-bier-hell) 100%);
  color: var(--c-holz-dunkel);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(200, 134, 13, 0.25);
}

/* Card Footer für Platzierungen */
.card__footer {
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--c-holz-hell);
  background: rgba(240, 183, 60, 0.04);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Responsive: Tabelle wird auf mobil schmaler */
@media (max-width: 768px) {
  .leaderboard__table {
    font-size: var(--fs-xs);
    table-layout: fixed;
  }

  .leaderboard__table th,
  .leaderboard__table td {
    padding: var(--sp-2) var(--sp-2);
  }

  .leaderboard__name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .leaderboard__score {
    min-width: 0;
    white-space: nowrap;
  }

  .leaderboard__title {
    display: none;
  }

  .leaderboard__secondary {
    min-width: 40px;
  }
}

/* #103: Mobile Overflow-Schutz — verhindert, dass breite Inhalte (Tabellen,
   Karten, pre-Blöcke) die Seite über den Viewport hinaus verbreitern.
   Betroffene Container scrollen intern, statt die ganze Seite zu sprengen.
   Globales overflow-x:clip auf html/body klemmt nur ab; diese Regeln beheben
   die Ursache an den tragenden Komponenten. */
@media (max-width: 559px) {
  /* Alle Karten dürfen nicht breiter als ihr Container werden. */
  .card,
  .card__body,
  .card__head {
    min-width: 0;
    max-width: 100%;
  }
  /* Dynamic card titles get the full first row on narrow screens. Status
     badges stay inside the card on a separate, right-aligned row. */
  .card__head > :is(h1, h2, h3, h4) {
    flex-basis: 100%;
  }
  /* Tabellen-Container mit horizontalem Scroll innerhalb der Karte. */
  .table-scroll,
  .leaderboard {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Stufentabellen: Spalten dürfen schrumpfen. */
  .stufen-tabelle {
    table-layout: auto;
  }
  .stufen-tabelle th,
  .stufen-tabelle td {
    min-width: 0;
    padding: var(--sp-1) var(--sp-2);
  }
  /* Formulare: keine intrinsische Überbreite durch select/input. */
  select,
  input[type="text"],
  input[type="number"],
  input[type="search"],
  textarea {
    max-width: 100%;
  }
  /* pre/code-Blöcke scrollen intern. */
  pre,
  code {
    overflow-x: auto;
    max-width: 100%;
  }
  /* Bilder und Medien werden niemals breiter als der Viewport. */
  img,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }
}

/* #83: „Was ist neu"-Update-Fenster (Modal-Overlay). */
.release-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}
.release-modal__box {
  max-width: 32rem;
  width: 100%;
  margin: auto;
  box-shadow: var(--shadow-tief, 0 8px 30px rgba(0, 0, 0, 0.4));
}
.release-modal__box ul { list-style: none; padding-left: 0; }
/* Mehrere Releases am Stück: der Notizenblock scrollt, damit der
   „Verstanden"-Knopf auch bei langer Historie sichtbar bleibt. */
.release-modal__notes { max-height: 60vh; overflow-y: auto; }
.release-modal__release + .release-modal__release {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--shell-gold, rgba(0, 0, 0, 0.15));
}
.release-modal__release h3 { margin: 0; }

/* Willkommens-Fenster beim ersten Login — gleiche Overlay-Mechanik wie das
   Update-Fenster, aber eigene Klasse: Der Hinweis soll optisch klar von
   Tutorials und Release-Notes getrennt bleiben. */
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}
.welcome-modal__box {
  max-width: 34rem;
  width: 100%;
  margin: auto;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-tief, 0 8px 30px rgba(0, 0, 0, 0.4));
}
.welcome-modal__box ul { list-style: none; padding-left: 0; }
.welcome-modal__box li + li { margin-top: 0.6rem; }

/* Prestige warning: native modal with the same compact card language as the
   release dialog. The content scrolls inside the viewport on small screens. */
.confirm-dialog {
  width: min(92vw, 32rem);
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  overflow: auto;
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.confirm-dialog__card { margin: 0; }
.confirm-dialog__progress { font-weight: 700; }
.confirm-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.confirm-dialog__actions .btn { width: 100%; }
@media (min-width: 560px) {
  .confirm-dialog__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .confirm-dialog__actions .btn { width: auto; }
}

/* Glossary tooltips: readable on desktop and viewport-safe on mobile. */
.glossar-tooltip {
  display: inline-block;
  position: relative;
  max-width: 100%;
  cursor: help;
  vertical-align: middle;
}

.glossar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  margin-left: var(--sp-1);
  border: 1px solid var(--c-bier-hell);
  border-radius: 50%;
  background: var(--c-bordeaux);
  color: var(--c-creme);
  font-family: var(--font-nav);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.glossar-tooltip:focus-visible .glossar-icon,
body:not(.glossar-touch-js) .glossar-tooltip:focus-within .glossar-icon,
.glossar-tooltip[data-tip-open="true"] .glossar-icon {
  background: var(--c-bordeaux-hell);
  box-shadow: var(--shadow);
}

/* ``:hover`` nur fuer echte Zeigergeraete: auf Touch bleibt ein einmal
   ausgeloester Hover-Zustand nach dem Tippen haengen. */
@media (hover: hover) and (pointer: fine) {
  .glossar-tooltip:hover .glossar-icon {
    background: var(--c-bordeaux-hell);
    box-shadow: var(--shadow);
  }
}

.glossar-tooltip__body {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 50%;
  z-index: 100;
  width: min(20rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(20rem, calc(100vh - 2rem));
  overflow-y: auto;
  padding: var(--sp-3);
  transform: translateX(-50%);
  border: 1px solid var(--c-bier);
  border-radius: var(--radius-sm);
  background: var(--c-holz-dunkel);
  box-shadow: var(--shadow-tief);
  color: var(--c-creme);
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Sichtbarkeits-Pfade des Glossar-Tooltips:
   • Maus/Trackpad: ``:hover`` — bewusst nur unter (hover: hover) and
     (pointer: fine), sonst klebt der Hover-Zustand auf Touch fest.
   • Tastatur: ``:focus-visible``.
   • Touch OHNE JS: ``:focus-within`` als Fallback.
   • Touch MIT JS: ``data-tip-open``, gesetzt vom Handler in base.html.
   Sobald der Handler laeuft, markiert er den Body mit ``glossar-touch-js``
   und schaltet damit den :focus-within-Pfad ab. Grund: ein Tap setzt den
   Fokus auf das ``.glossar-tooltip``-Element, ein Tap auf nicht
   fokussierbaren Inhalt raeumt ihn (vor allem auf iOS) aber NICHT wieder
   ab — der Tooltip blieb dadurch dauerhaft als dunkle Box stehen. */
.glossar-tooltip:focus-visible .glossar-tooltip__body,
body:not(.glossar-touch-js) .glossar-tooltip:focus-within .glossar-tooltip__body,
.glossar-tooltip[data-tip-open="true"] .glossar-tooltip__body {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .glossar-tooltip:hover .glossar-tooltip__body {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }
}

/* Stacking-Falle in Karten (Touch-Pfad):
   ``.card > * { position: relative; z-index: 1 }`` macht JEDES direkte
   Karten-Kind zu einer eigenen Stacking-Insel. Der ``z-index: 100`` des
   Tooltips gilt damit nur INNERHALB dieser Insel — nach aussen liegt das
   Panel auf Ebene 1 und wurde von allem ueberlagert, was hoeher oder im
   DOM weiter hinten liegt: vom Text spaeterer Karten (ebenfalls Ebene 1,
   aber spaeter in der Baumreihenfolge — fremde Schrift lief ueber das
   dunkle Panel und liess es "halb transparent" wirken) und von der
   fixierten .statusbar (z-30) samt ihrem Schatten nach oben.
   Darum bekommt die Insel, in der gerade ein Tooltip offen ist, kurzzeitig
   eine hoehere Ebene — 35 liegt ueber der .statusbar (30) und unter Subnav
   (40), Ressourcenleiste (45) und Topbar (50), die weiter vorne bleiben.
   Bewusst nur die Touch-Pfade (``data-tip-open`` bzw. der No-JS-Fallback):
   die Desktop-Reihenfolge bleibt damit unveraendert. */
.card > *:has(.glossar-tooltip[data-tip-open="true"]),
.card > .glossar-tooltip[data-tip-open="true"],
body:not(.glossar-touch-js) .card > *:has(.glossar-tooltip:focus-within),
body:not(.glossar-touch-js) .card > .glossar-tooltip:focus-within {
  z-index: 35;
}

/* Viewport-Sicherheit ab Tablet-Breite: Der Tooltip oeffnet normalerweise
   nach OBEN. Ist ueber dem Icon zu wenig Platz (z. B. direkt unter der
   Kopfzeile), klappt ihn der Handler in base.html per
   ``data-tip-place="below"`` nach unten. Unter 560px ist der Tooltip ein
   fixiertes Panel am unteren Rand — dort greift die Umkehr nicht. */
@media (min-width: 560px) {
  .glossar-tooltip[data-tip-place="below"] .glossar-tooltip__body {
    top: calc(100% + var(--sp-2));
    bottom: auto;
  }
}

@media (max-width: 559px) {
  .glossar-tooltip {
    max-width: 100%;
  }

  /* Unter 560px ist der Tooltip ein fixiertes Blatt am unteren Rand. Es
     parkt ueber der fixierten .statusbar statt auf ``bottom: 1rem``: die
     Leiste (--status-h) plus ihr Schlagschatten nach oben verdeckte sonst
     die letzten Zeilen — das Panel wirkte unten "gequetscht" und der Text
     darunter durch den halbtransparenten Schatten verschleiert.
     Die Hoehe endet ausserdem unterhalb von Topbar + Ressourcenleiste,
     damit die beiden sticky Leisten nicht in das Panel hineinragen.
     ``dvh`` rechnet die ein-/ausfahrende Browserleiste mit (``vh`` nicht,
     daher die vorangestellte Fallback-Zeile), ``max()`` sichert eine
     lesbare Mindesthoehe auf sehr flachen Viewports — gescrollt wird im
     Panel selbst (``overflow-y: auto`` aus der Basisregel). */
  .glossar-tooltip__body {
    position: fixed;
    top: auto;
    right: 1rem;
    bottom: calc(var(--status-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    width: auto;
    max-width: calc(100vw - 2rem);
    max-height: max(9rem, calc(100vh - var(--topbar-h) - var(--resbar-h) - var(--status-h) - 3rem));
    max-height: max(9rem, calc(100dvh - var(--topbar-h) - var(--resbar-h) - var(--status-h) - 3rem));
    overscroll-behavior: contain;
    transform: none;
  }

  .glossar-tooltip__body::after {
    display: none;
  }
}

/* ============================================================
   Empire relaunch
   Dark app shell, heraldic navigation and shared parchment surfaces.
   Existing component contracts stay intact; this layer only changes
   presentation and responsive layout.
   ============================================================ */

body {
  color: var(--shell-text);
  background-color: var(--shell-bg);
  background-image: var(--shell-bg-grad);
  background-attachment: fixed;
}

body::before {
  content: "";
  /* Absolute statt fixed: die dekorative Holzverkleidung scrollt
     mit der Page mit, sodass sie bei langen Seiten (z. B. /gebaeude/
     mit 1288px+ Hoehe) nicht nur den Viewport abdeckt. Das vermeidet
     den sichtbaren "Rand" zwischen Dekoration-Ende und Page-Inhalt. */
  position: absolute;
  inset: 0;
  min-height: 100vh;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, var(--shell-gold-faint) 35px, transparent 36px),
    linear-gradient(180deg, transparent, var(--shell-overlay));
  opacity: 0.22;
}

.navbar {
  min-height: var(--topbar-h);
  padding-inline: clamp(var(--sp-3), 2vw, var(--sp-6));
  background: linear-gradient(180deg, var(--shell-wood-mid), var(--shell-wood-deep));
  border-bottom: 2px solid var(--shell-gold);
  box-shadow: 0 6px 20px var(--shell-overlay);
}

.navbar__brand {
  gap: var(--sp-3);
  color: var(--shell-text);
  letter-spacing: 0.07em;
}

.navbar__brand:hover { color: var(--shell-gold-bright); }

.navbar__brand-text { gap: var(--sp-1); }
.navbar__brand-name { font-size: clamp(var(--fs-base), 2vw, var(--fs-lg)); }

.crest {
  width: 50px;
  height: 50px;
  border: 1px solid var(--shell-gold);
  border-radius: 50%;
  background: var(--shell-wood-deep);
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--shell-gold-faint), inset 0 0 8px var(--shell-overlay);
}

.navbar__toggle {
  border-color: var(--shell-gold);
  color: var(--shell-gold-bright);
  background: var(--shell-overlay);
}

.navbar__toggle:hover { background: var(--shell-red); }

.navbar__links a {
  color: var(--shell-text-muted);
  border: 1px solid transparent;
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  color: var(--shell-text);
  border-color: var(--shell-gold-soft);
  background: var(--shell-red-soft);
  text-decoration: none;
}

.navbar__links a[aria-current="page"] {
  color: var(--shell-text);
  border-color: var(--shell-gold);
  background: linear-gradient(90deg, var(--shell-red), var(--shell-wood-mid));
  box-shadow: inset 3px 0 0 var(--shell-gold-bright), var(--shadow);
}

.nav-bell__counter {
  border: 1px solid var(--shell-gold-bright);
  background: var(--shell-red-bright);
  color: var(--shell-text);
}

.resourcebar {
  min-height: var(--resbar-h);
  gap: clamp(2px, 0.6vw, var(--sp-2));
  padding: clamp(var(--sp-1), 1vw, var(--sp-3));
  border: 0;
  border-bottom: 1px solid var(--shell-gold);
  border-radius: 0;
  background: linear-gradient(180deg, var(--shell-wood), var(--shell-wood-deep));
  box-shadow: 0 8px 24px var(--shell-overlay);
}

.res {
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--shell-gold-soft);
  border-left: 3px solid var(--accent, var(--shell-gold));
  background: var(--shell-overlay);
  box-shadow: inset 0 1px 0 var(--shell-gold-faint);
}

.res__value { color: var(--shell-text); }
.res__icon { filter: drop-shadow(0 1px 1px var(--shell-overlay)); }
.res__tooltip { border-color: var(--shell-gold); background: var(--shell-wood-deep); }

.subnav {
  position: sticky;
  /* #153: klebt exakt unter Topbar + Ressourcenleiste. Beide Hoehen sind
     konstant (kein Compact-Wechsel mehr), daher weder transition noch
     Zustands-Override — die Subnav springt nie. */
  top: calc(var(--topbar-h) + var(--resbar-h));
  z-index: 40;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--shell-gold);
  background: linear-gradient(90deg, var(--shell-wood-deep), var(--shell-wood));
  box-shadow: 0 5px 16px var(--shell-overlay);
}

.subnav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  color: var(--shell-text-muted);
}

.subnav a:hover,
.subnav a:focus-visible {
  color: var(--shell-text);
  border-color: var(--shell-gold-soft);
  text-decoration: none;
}

.subnav a[aria-current="page"] {
  border-color: var(--shell-gold);
  background: linear-gradient(180deg, var(--shell-red-bright), var(--shell-red));
  color: var(--shell-text);
  box-shadow: var(--shadow);
}

.page {
  width: 100%;
  max-width: 1440px;
  padding: clamp(var(--sp-4), 2.2vw, var(--sp-6)) clamp(var(--sp-3), 2.4vw, var(--sp-6)) var(--sp-8);
}

.page-shell { width: 100%; }

.page__title {
  display: block;
  margin-bottom: var(--sp-3);
}

.page__title h1 {
  color: var(--shell-text);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px var(--shell-overlay);
}

.page__subtitle,
.page__title > p {
  margin: var(--sp-1) 0 0;
  color: var(--shell-text-muted);
  font-size: var(--fs-sm);
  font-style: normal;
}

.banner-rule {
  height: 7px;
  margin: var(--sp-3) 0 var(--sp-5);
  border: 1px solid var(--shell-gold-soft);
  box-shadow: 0 4px 14px var(--shell-overlay);
}

.card,
.basar-offer-card,
.basar-market-card,
.rt-node,
.diebstahl-ziel,
.couleur-card,
.chat-message {
  color: var(--c-tinte);
}

.card {
  overflow: hidden;
  border: 1px solid var(--shell-gold-soft);
  border-top: 4px solid var(--c-holz);
  background: var(--surface-parchment);
  box-shadow: var(--shell-shadow);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 34px var(--shell-gold-faint);
}

.card > * { position: relative; z-index: 1; }
.card--nested { box-shadow: var(--shadow); }
.card--accent { border-top-color: var(--shell-gold); }
.card--gold-links { border-left: 4px solid var(--shell-gold); }
.card--danger-links { border-left: 4px solid var(--c-gefahr); }
.card--success-links { border-left: 4px solid var(--c-erfolg); }

.card--locked {
  color: var(--c-tinte-weich);
  background: linear-gradient(145deg, var(--c-grau-bg), var(--c-pergament-tief));
}

.card__head {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--shell-gold-soft);
}

.card__head h2,
.card__head h3 { color: var(--c-bordeaux); }

.btn,
.btn--primary,
.btn--accent {
  border-color: var(--shell-gold);
  background: linear-gradient(180deg, var(--shell-red-bright), var(--shell-red));
  color: var(--shell-text);
  box-shadow: 0 3px 0 var(--shell-wood-deep), var(--shadow);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--shell-gold-bright);
  filter: brightness(1.08);
}

.btn--ghost {
  border-color: var(--c-holz-hell);
  background: var(--c-pergament);
  color: var(--c-bordeaux);
  box-shadow: var(--shadow);
}

.btn--ghost:hover { background: var(--c-pergament-tief); }
.btn--danger { border-color: var(--c-gefahr); }

/* Aktiver Filter (Nachrichten): gold auf dunkler Schrift, klar unterscheidbar
   vom roten Standard-Button. */
.filter-row .btn--accent {
  border-color: var(--shell-gold-bright);
  background: linear-gradient(180deg, var(--shell-gold-bright), var(--shell-gold));
  color: var(--c-holz-dunkel);
}
.navbar__logout .btn--ghost { background: transparent; }

.badge,
.pill { box-shadow: inset 0 0 0 1px var(--shell-gold-faint); }
.badge--gold { background: var(--shell-gold); }
.badge--grau { color: var(--c-tinte); background: var(--c-grau-bg); }

.alert {
  color: var(--c-tinte);
  border: 1px solid var(--shell-gold-soft);
  border-left: 6px solid var(--c-holz);
  box-shadow: var(--shadow);
}
.alert--success { border-left-color: var(--c-erfolg); }
.alert--danger { border-left-color: var(--c-gefahr); }
.alert--warn { border-left-color: var(--c-warnung); }

.infobox {
  border-color: var(--shell-gold-soft);
  background: var(--c-pergament);
  color: var(--c-tinte);
}
.infobox__title { color: var(--c-tinte); }
.infobox__title:hover { color: var(--c-bier); }
.infobox__body { color: var(--c-tinte); }
.infobox__body li,
.infobox__body p { color: var(--c-tinte); }

.mission {
  color: var(--c-tinte);
  border-bottom-color: var(--shell-gold-soft);
}

.page > .mission,
.page > .stack > .mission,
.page > p.muted {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-pergament-tief);
  color: var(--c-tinte-weich);
  box-shadow: var(--shadow);
}

.page :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-holz-hell);
  border-radius: var(--radius-sm);
  background: var(--c-creme);
  color: var(--c-tinte);
  font: inherit;
  box-shadow: inset 0 1px 3px var(--shell-gold-faint);
}

.page textarea { min-height: 7.5rem; resize: vertical; }

/* Couleur-Farbwahl: <input type="color"> rendert nativ je nach Browser sehr
   unterschiedlich (Chrome: kleines Farbfeld in heller Box, Safari: weisse
   Box mit Pfeil) — auf dem Pergament-Untergrund wirkt das Feld leer.
   appearance:none + Swatch-Pseudoelemente lassen die gewaehlte Farbe die
   ganze Innenflaeche fuellen; der Holz-Rahmen mit Gold-Keyline bleibt als
   Fallback sichtbar, falls ein Browser die Pseudoelemente nicht kennt. */
.page input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-1);
  border: 2px solid var(--c-holz-dunkel);
  box-shadow: inset 0 0 0 1px var(--shell-gold);
  cursor: pointer;
}
.page input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.page input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 3px);
}
.page input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 3px);
}
.page label { color: inherit; font-weight: 600; }
.page form :is(input, select, textarea):focus-visible { outline-color: var(--c-bier); }

.leaderboard,
.table-scroll {
  border: 1px solid var(--shell-gold-soft);
  border-radius: var(--radius-sm);
  background: var(--c-pergament);
}

.leaderboard__table th,
.stufen-tabelle th {
  border-bottom-color: var(--shell-gold);
  background: linear-gradient(180deg, var(--shell-wood-mid), var(--shell-wood-deep));
  color: var(--shell-gold-bright);
}

.leaderboard__table tbody tr:nth-child(even),
.stufen-tabelle tbody tr:nth-child(even) { background: var(--shell-gold-faint); }
.leaderboard__table tbody tr:hover { background: var(--shell-gold-soft); }

.tabs,
.tabs__buttons,
.tabs__nav {
  color: var(--c-tinte);
  border-color: var(--shell-gold-soft);
}

.tabs__buttons,
.tabs__nav {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--c-pergament-tief);
}

.tabs__button--active,
#tab-global:checked ~ .tabs__nav label[for="tab-global"],
#tab-pm:checked ~ .tabs__nav label[for="tab-pm"] {
  color: var(--c-bordeaux);
  border-bottom-color: var(--c-bordeaux);
}

[x-cloak] { display: none !important; }
.stack--compact { gap: var(--sp-2); }
.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.interactive-summary { cursor: pointer; }
.chat-messages--scroll { max-height: 26rem; overflow-y: auto; }

/* Dashboard, combat, missions and research keep their existing structures
   while sharing the richer surface and status hierarchy. */
.incoming-attack,
.diebstahl-ziel,
.rt-node,
.mission {
  border-color: var(--shell-gold-soft);
}

.incoming-attack,
.diebstahl-ziel,
.rt-node { box-shadow: var(--shadow); }

.rt-section__head {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--shell-gold-soft);
  border-radius: var(--radius);
  background: var(--c-pergament-tief);
  color: var(--c-tinte);
}

.rt-track__head {
  border-color: var(--shell-gold);
  background: linear-gradient(180deg, var(--shell-wood-mid), var(--shell-wood-deep));
  color: var(--shell-text);
}

.forschungsprojekt,
.bauprojekt {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
}

.forschungsprojekt__feld,
.bauprojekt__feld { display: flex; flex-direction: column; gap: 2px; }
.bauprojekt__felder { margin-top: var(--sp-2); }
.forschungsprojekt__input,
.bauprojekt__input { width: 100%; max-width: 12rem; }

/* Achievements and shared project progress. */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-3);
}

.ach-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--shell-gold-soft);
  border-top: 3px solid var(--c-holz);
  border-radius: var(--radius);
  background: var(--surface-parchment);
  color: var(--c-tinte);
  box-shadow: var(--shadow);
}

.ach-card--locked { opacity: 0.68; filter: grayscale(0.55); }
.ach-card--unlocked { border-top-color: var(--shell-gold); }
.ach-card__icon { flex: 0 0 auto; font-size: 2.4rem; line-height: 1; }
.ach-card__body { min-width: 0; }
.ach-card__name { margin: 0 0 var(--sp-1); font-size: 1.05rem; }
.ach-card__desc { margin: 0 0 var(--sp-2); }
.ach-card__done { margin: 0; color: var(--c-erfolg); }
.ach-progress {
  height: var(--sp-2);
  overflow: hidden;
  margin: var(--sp-1) 0;
  border-radius: 999px;
  background: var(--c-grau-bg);
}
.ach-progress__bar {
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--shell-red), var(--shell-gold-bright));
}

/* Building floorplan: the concept canvas and the detail cards now belong to
   the same shell and use the global breakpoints. */
/* #156: Layout-Wrapper der Gebaeudeseite. Mobil ein einfacher Stapel
   (Hausplan, Status, Detailkarte); die Zweispalten-Aufteilung ab 1024px
   steht im Desktop-Media-Block weiter unten. */
.buildings-layout,
.buildings-layout__plan {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.building-concept {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--sp-4);
  padding: clamp(var(--sp-3), 2vw, var(--sp-6));
  overflow: hidden;
  border: 1px solid var(--shell-gold);
  border-radius: calc(var(--radius) + var(--sp-2));
  background: linear-gradient(135deg, var(--shell-wood-deep), var(--shell-wood), var(--shell-bg-deep));
  box-shadow: var(--shell-shadow), inset 0 0 0 1px var(--shell-gold-faint);
}

.building-concept::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 90% 10%, var(--shell-gold) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 90%, var(--shell-gold) 0 1px, transparent 2px);
  background-size: 22px 22px;
  opacity: 0.14;
}

.building-concept__toolbar {
  display: grid;
  /* Brand braucht Platz, Buttons klein. minmax(0, 1fr) verhindert,
     dass der Wahlspruch + Hausplan in die Button-Spalte rutschen.
     grid-auto-flow: row sorgt dafuer, dass die Buttons unter die
     Brand-Zeile umbrechen, wenn der Floorplan-Container schmal ist
     (Desktop mit Detail-Inspector daneben). */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-flow: row;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-3);
  color: var(--shell-text);
}
.building-concept__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex-wrap: wrap; grid-column: 1 / -1; }
.building-concept__brand > div { min-width: 0; flex: 1 1 200px; }
.building-concept__toolbar > .btn { justify-self: end; }
.building-concept__toolbar > .btn + .btn { justify-self: end; }
.building-concept__mark {
  width: 58px;
  height: 58px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--shell-gold);
  border-radius: 50%;
  background: var(--shell-bg-deep);
  box-shadow: 0 0 0 4px var(--shell-gold-faint);
}
.building-concept__eyebrow {
  margin: 0;
  color: var(--shell-gold-bright);
  font: 700 var(--fs-xs)/1.1 var(--font-nav);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* langer Wahlspruch darf umbrechen, statt in die Button-Spalte zu fliessen */
  overflow-wrap: anywhere;
}
.building-concept__title { margin: var(--sp-1) 0 0; color: var(--shell-text); font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.building-concept__hint { margin: var(--sp-1) 0 0; color: var(--shell-text-muted); font-size: var(--fs-sm); max-width: 50ch; }
.building-concept__toolbar .btn { border-color: var(--shell-gold); background: var(--shell-overlay); color: var(--shell-gold-bright); }
.building-concept__toolbar .btn:hover { background: var(--shell-red); color: var(--shell-text); }

.building-concept__board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Feste Raumhoehe: 4 Reihen passen auf 900px Bildschirm ohne Scroll,
     112px sind grosszuegig fuer Icon + Name + Status-Indikator. */
  grid-auto-rows: 112px;
  gap: clamp(var(--sp-2), 1.4vw, var(--sp-4));
  min-height: 0;
  overflow: hidden;
  padding: clamp(var(--sp-3), 3vw, var(--sp-6)) 5%;
  border: 1px solid var(--shell-gold);
  border-radius: calc(var(--radius) + var(--sp-2));
  background: radial-gradient(circle at 50% 42%, var(--c-holz), var(--shell-wood-deep) 70%);
  box-shadow: inset 0 0 0 8px var(--shell-gold-faint), inset 0 0 50px var(--shell-bg-deep);
}

.building-concept__board::before {
  content: "";
  position: absolute;
  inset: var(--sp-2);
  border: 1px solid var(--shell-gold-soft);
  border-radius: var(--radius);
  pointer-events: none;
}

.building-room {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: var(--sp-2);
  border: 2px solid var(--shell-gold);
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(145deg, var(--c-pergament), var(--c-bier));
  color: var(--c-tinte);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--c-holz), 0 10px 18px var(--shell-overlay);
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
  touch-action: manipulation;
}

.building-room:hover,
.building-room:focus-visible,
.building-room.is-selected {
  transform: translateY(-3px);
  filter: saturate(1.15);
  outline: 3px solid var(--shell-gold-bright);
  outline-offset: 2px;
}
.building-room.is-selected {
  background: linear-gradient(145deg, var(--shell-text), var(--c-bier));
  box-shadow: 0 5px 0 var(--shell-red), 0 0 0 2px var(--shell-gold-bright), 0 12px 22px var(--shell-overlay);
}
.building-room.is-locked { filter: grayscale(0.65); opacity: 0.7; }
.building-room.is-upgrading {
  border-color: var(--shell-red-bright);
  background: linear-gradient(145deg, var(--shell-gold-bright), var(--c-bier));
  box-shadow: 0 5px 0 var(--shell-red), 0 0 0 2px var(--shell-red-soft), 0 12px 24px var(--shell-overlay);
}
.building-room.is-dragging { z-index: 5; opacity: 0.78; cursor: grabbing; transform: scale(1.04); }
.building-room__icon { font-size: 1.5rem; line-height: 1; }
.building-room__name { font-size: var(--fs-sm); font-weight: 800; }
.building-room__meta { font-size: var(--fs-xs); opacity: 0.8; }

/* T18: kleines Action-Indikator-Symbol oben rechts auf jeder Raumkarte.
   Erscheint nur, wenn ein Status Handeln erfordert:
   - "jetzt"             ↑ gruener Pfeil, pulst (ausbaubar)
   - "fehlt_wenig"       halb-gefuelltes Quadrat, orange (es fehlt etwas)
   - "bauprojekt_laeuft" Sparschwein, gedämpft (Bauprojekt aktiv/startbar)
   Bei "max" und "gesperrt" kein Indikator. */
.building-room__action {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 800;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px var(--shell-overlay));
}
.building-room.is-actionable .building-room__action {
  color: var(--c-bier-hell);
  animation: building-action-pulse 1.6s ease-in-out infinite;
}
.building-room[data-action="fehlt_wenig"] .building-room__action,
.building-room[data-action="bauprojekt_laeuft"] .building-room__action {
  color: var(--c-warnung);
  animation: none;
}
.building-room.is-actionable {
  border-color: var(--shell-gold-bright);
  box-shadow: 0 5px 0 var(--shell-red), 0 0 0 2px var(--shell-gold-soft), 0 12px 22px var(--shell-overlay);
}
@keyframes building-action-pulse {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
  50% { transform: translateY(-2px) scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .building-room.is-actionable .building-room__action { animation: none; }
}
.building-room__live { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--shell-red); font-weight: 800; white-space: nowrap; }
.building-room__live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-live);
  box-shadow: 0 0 0 0.18rem var(--shell-red-soft);
  animation: building-live-pulse 1.7s ease-in-out infinite;
}
@keyframes building-live-pulse {
  0%, 100% { opacity: 0.65; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.building-concept__board.is-editing { touch-action: none; outline: 2px solid var(--shell-gold-bright); outline-offset: var(--sp-1); }
.building-concept__upgrade-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--shell-gold-soft);
  border-left: 4px solid var(--shell-red-bright);
  border-radius: var(--radius);
  background: var(--shell-overlay);
  color: var(--shell-text);
  font-size: var(--fs-sm);
}
.building-concept__upgrade-strip span {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--shell-gold-soft);
  border-radius: 999px;
  background: var(--shell-red-soft);
  font-weight: 700;
}
.building-detail { background: var(--surface-inspector); }
.building-detail.card--accent { border-color: var(--shell-red); box-shadow: 0 0 0 1px var(--shell-gold-soft), var(--shell-shadow); }

/* Cartell pages that predate the shared card structure are promoted to the
   same parchment panel without touching their forms or conditionals. */
.cartell-bewerbung-page,
.cartell-create-page,
.cartell-leave-page,
.cartell-list-page {
  width: min(100%, 72rem);
  margin-inline: auto;
  padding: clamp(var(--sp-4), 2.4vw, var(--sp-6));
  border: 1px solid var(--shell-gold-soft);
  border-top: 4px solid var(--shell-gold);
  border-radius: var(--radius);
  background: var(--surface-parchment);
  color: var(--c-tinte);
  box-shadow: var(--shell-shadow);
}
.cartell-bewerbung-page,
.cartell-create-page,
.cartell-leave-page { max-width: 42rem; }
.cartell-card,
.bewerbung-form,
.cartell-form,
.warning-box,
.consequences,
.empty-state {
  padding: var(--sp-4);
  border: 1px solid var(--shell-gold-soft);
  border-radius: var(--radius);
  background: var(--c-pergament);
  color: var(--c-tinte);
  box-shadow: var(--shadow);
}
.cartell-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.cartell-card h2,
.cartell-header h3 { margin: 0; }
.cartell-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.cartell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-4); }
.cartell-info { font-size: var(--fs-sm); line-height: 1.6; }
.cartell-info :is(p, div) { margin: var(--sp-1) 0; }
.cartell-card form { margin-top: auto; }
.cartell-colors { justify-content: center; margin-top: var(--sp-2); }
.kuerzel { margin: 0; color: var(--c-tinte-weich); font-weight: 700; }
.wahlspruch { margin: var(--sp-2) 0; color: var(--c-tinte-weich); font-style: italic; }
.bewerbung-form,
.cartell-form,
.cartell-settings-form,
.cartell-settings-search { display: grid; gap: var(--sp-4); }
.cartell-settings-form { max-width: 32rem; }
.form-group { display: grid; gap: var(--sp-1); }
.form-group small { color: var(--c-tinte-weich); }
.form-group .info { margin: 0; padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--c-creme); }
.form-info { padding: var(--sp-3); border-left: 4px solid var(--c-blau); border-radius: var(--radius-sm); background: var(--pill-info-bg); color: var(--c-blau); }
.form-info p { margin: 0; }
.form-actions,
.confirmation-form,
.cartell-bewerbung-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.form-actions form,
.cartell-bewerbung-actions form { margin: 0; }
.color-inputs,
.cartell-settings-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.color-input { display: grid; gap: var(--sp-1); }
.warning,
.warning-box { border-color: var(--c-warnung); background: var(--c-warnung-bg); }
.warning { margin: var(--sp-2) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm); color: var(--c-tinte); }
.consequences { margin: var(--sp-4) 0; background: var(--c-creme); }
.actions { margin: var(--sp-4) 0 var(--sp-5); }
.empty-state { text-align: center; color: var(--c-tinte-weich); }
.cartell-settings-results,
.cartell-settings-invitations { display: grid; gap: var(--sp-2); }
.cartell-settings-result,
.cartell-settings-invitations li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.cartell-settings-invitations { margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.cartell-settings-result form,
.cartell-settings-invitations form { margin: 0; }

/* Communication, marketplace and account surfaces. */
.chat-message {
  border: 1px solid var(--shell-gold-soft);
  border-left: 4px solid var(--c-holz-hell);
  background: var(--c-pergament);
  box-shadow: var(--shadow);
}
.chat-message--own { border-left-color: var(--shell-gold); background: var(--c-warnung-bg); }
.chat-thread,
.chat-picker { color: var(--c-tinte); }

.basar-page-header {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--shell-gold);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--shell-wood-deep), var(--shell-red));
  box-shadow: var(--shell-shadow);
}
.basar-page-header h1 { color: var(--shell-text); }
.basar-page-header .eyebrow { color: var(--shell-gold-bright); }
.basar-page-header .page-lead { color: var(--shell-text-muted); }
.basar-layout,
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.basar-market { margin-top: var(--sp-5); }
.basar-offer-card,
.basar-market-card {
  border-color: var(--shell-gold-soft);
  background: var(--c-pergament);
  box-shadow: var(--shadow);
}
.basar-fee-note { border-left-color: var(--shell-gold); background: var(--c-warnung-bg); }
.eyebrow { color: var(--c-bordeaux); font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }

.release-modal,
.welcome-modal,
.feature-popup { background: var(--shell-overlay); backdrop-filter: blur(3px); }
.confirm-dialog::backdrop,
.donate-dialog::backdrop { background: var(--shell-overlay); }
.confirm-dialog__card,
.donate-dialog { border-color: var(--shell-gold); background: var(--surface-inspector); }

.statusbar {
  color: var(--shell-text-muted);
  border-top-color: var(--shell-gold);
  background: linear-gradient(180deg, var(--shell-wood), var(--shell-wood-deep));
  box-shadow: 0 -5px 18px var(--shell-overlay);
}
.statusbar__brand,
.statusbar__legal-toggle { color: var(--shell-gold-bright); }
.statusbar__links a { color: var(--shell-text); }

@media (max-width: 1023px) {
  .navbar__menu {
    top: var(--topbar-h);
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    border-bottom-color: var(--shell-gold);
    background: linear-gradient(180deg, var(--shell-wood-deep), var(--shell-wood));
  }
  .navbar__links { padding: var(--sp-2) var(--sp-3) var(--sp-4); }
  .navbar__links a { min-height: 44px; display: flex; align-items: center; }
  .resourcebar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .basar-layout,
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .navbar__menu {
    position: fixed;
    /* #154: Sidebar haengt direkt an der Topbar (deren goldene border-bottom
       bildet die Naht — kein eigener top-Rand, keine Luecke) und reicht bis
       zum linken Bildschirmrand. Ressourcenleiste + Subnav sitzen rechts
       daneben (margin-left: var(--sidebar-w), s. u.). Konstantes top ohne
       transition — die Sidebar springt beim Scrollen nie (#153). */
    top: var(--topbar-h);
    bottom: var(--status-h);
    left: 0;
    z-index: 44;
    width: var(--sidebar-w);
    border-right: 1px solid var(--shell-gold);
    /* Setzt farblich exakt dort an, wo die Topbar endet (--shell-wood-deep),
       und fuehrt deren Lichtrichtung fort: die Topbar dunkelt von oben nach
       unten ab (mid -> deep), die Sidebar dunkelt weiter ab (deep ->
       bg-deep). Kein gespiegelter Neustart an der Naht — Topbar + Sidebar
       lesen sich als ein durchgehendes, von oben beleuchtetes Brett. */
    background: linear-gradient(180deg, var(--shell-wood-deep), var(--shell-bg-deep));
    box-shadow: 8px 0 24px var(--shell-overlay);
  }
  .navbar__menu-inner { height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
  /* Liste der Top-Level-Links fuellt den verfuegbaren Platz, sodass
     .nav-right (Konto + Abmelden) mit margin-top:auto am unteren Rand
     der Sidebar klebt — kein leerer Streifen mehr darunter. */
  .navbar__links { flex: 1 1 auto; flex-direction: column; gap: var(--sp-1); }
  .navbar__links .nav-right { margin-top: auto; }
  .navbar__links {
    min-height: 100%;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-3);
  }
  .navbar__links::before {
    content: "Navigation";
    padding: 0 var(--sp-3) var(--sp-2);
    color: var(--shell-gold);
    font: 600 var(--fs-xs) var(--font-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .navbar__links li { width: 100%; }
  .navbar__links a { width: 100%; min-height: 44px; display: flex; align-items: center; }
  .navbar__links .nav-right { margin-top: auto; }
  .navbar__logout .btn { width: 100%; }

  /* #155: .statusbar bleibt bewusst draussen — sie ist fixed und laeuft
     ueber die volle Breite, die Sidebar endet an ihrer Oberkante. */
  .resourcebar,
  .subnav {
    width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
  }
  .page-shell {
    width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
  }
  .page { margin-inline: auto; }
  .resourcebar { padding-inline: var(--sp-4); }
  .subnav { justify-content: flex-start; padding-inline: clamp(var(--sp-4), 2.4vw, var(--sp-6)); }
}

/* Kurze Desktop-Viewports (z. B. 1280x627): die Sidebar hat zwischen Topbar
   (72px) und Footer (--status-h) nur ~505px — der Rail-Inhalt (11 Eintraege
   a 44px + Padding ~ 594px) wuerde scrollen und Abmelden hinter den Footer
   schieben. Verdichten, damit Konto + Abmelden sichtbar unten ankleben. */
@media (min-width: 1024px) and (max-height: 760px) {
  .navbar__links { padding-block: var(--sp-3); }
  /* padding-block sp-1: sonst haelt die natuerliche Hoehe (8px Padding
     + 24px Zeile = 40px) die Eintraege ueber der Zielhoehe. 32px = 4px
     Padding + 24px Zeile — Maus-Ziel auf Desktop, kein Touch-Target. */
  .navbar__links a { min-height: 32px; padding-block: var(--sp-1); }
}

/* #156: Gebaeudeseite ab 1024px zweispaltig — links der Hausplan (mittig in
   seiner Spalte, sticky unter der Subnav) samt Bauplatz-Status, rechts das
   Detailfenster: sticky oben rechts, so hoch wie sein Inhalt, ohne eigenen
   Scroll-Rahmen (der fruehere max-height/overflow-y-Subframe entfaellt). */
@media (min-width: 1024px) {
  .buildings-layout {
    grid-template-columns: minmax(0, 1fr) var(--inspector-w);
    gap: var(--sp-5);
  }
  .buildings-layout__plan,
  .buildings-layout > #building-details {
    position: sticky;
    top: calc(var(--topbar-h) + var(--resbar-h) + var(--subnav-h) + var(--sp-4));
    align-self: start;
    overflow: visible;
  }
  /* Hausplan + Statuszeile mittig in der linken Spalte halten. */
  .buildings-layout__plan > * {
    width: min(100%, 680px);
    justify-self: center;
  }
  /* Rechte Spalte zeigt genau eine Detailkarte — einspaltig statt
     .grid--cards-Mehrspalter. */
  .buildings-layout > #building-details { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
  /* #153: Auch auf Phones eine deterministische Leisten-Hoehe, damit die
     Subnav exakt darunter kleben kann. 56px = 42px .res + 2*4px Padding
     + 1px Border (51px), aufgerundet fuer Luft bei groesseren Systemfonts. */
  :root { --resbar-h: 56px; }
  .navbar { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .crest { width: 44px; height: 44px; }
  .navbar__brand { max-width: calc(100vw - 6.5rem); }
  .navbar__brand-name { font-size: var(--fs-sm); }
  .navbar__brand .badge { font-size: 0.62rem; }
  .resourcebar { padding: var(--sp-1); }
  .res { min-height: 42px; padding: var(--sp-1); }
  .res__value { font-size: clamp(0.72rem, 2.4vw, var(--fs-xs)); }
  /* #153: sticky wie auf Desktop (top aus der Shell-Regel, jetzt mit
     konstantem --resbar-h: 56px) statt position:relative — die Subnav
     klebt immer direkt unter der Ressourcenleiste, ohne zu springen. */
  .subnav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .subnav a { flex: 0 0 auto; }
  .page { padding-inline: var(--sp-3); }
  .building-concept { padding: var(--sp-3); }
  .building-concept__toolbar { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .building-concept__brand { grid-column: 1 / -1; }
  .building-concept__toolbar .btn { width: 100%; }
  .building-concept__board {
    min-height: 560px;
    grid-auto-rows: minmax(102px, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-2) var(--sp-4);
  }
  .building-room { padding: var(--sp-1); }
  .building-room__icon { font-size: 1.2rem; }
  .building-room__name { font-size: 0.68rem; }
  .building-room__meta { font-size: 0.58rem; }
  .building-room__action { top: 3px; right: 4px; font-size: 0.78rem; }
  .form-actions,
  .confirmation-form { flex-direction: column; }
  .form-actions .btn,
  .confirmation-form .btn { width: 100%; }
}

@media (max-width: 559px) {
  /* Einreihig auch auf schmalen Phones (≤559px): die 7 Spalten aus der
     Basisregel bleiben erhalten (kein Umbruch auf 4 Spalten). Statt zu
     brechen werden die Zellen gestrafft — Icon kleiner, Zell-/Wert-Padding
     minimiert. Current/Max auf zwei Zeilen, damit der volle Cap-Wert
     sichtbar bleibt (z. B. 995349/986 statt "995349/5…"). Zahlenwerte und
     Tooltip-Verhalten bleiben unverändert. */
  .res { padding: 2px 1px; }
  .res__icon { font-size: clamp(0.7rem, 3vw, 1rem); }
  .res__value {
    padding: 0;
    font-size: clamp(0.56rem, 2.1vw, var(--fs-xs));
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.0;
    text-align: center;
  }
  .card { padding: var(--sp-4); }
  .basar-page-header { padding: var(--sp-4); }
  .color-inputs,
  .cartell-settings-colors { grid-template-columns: minmax(0, 1fr); }
  .building-concept__mark { width: 48px; height: 48px; }
}

/* Konzept-Review Gebäudeansicht (19.07.2026): Anzeige-Dedup Detailkarten.
   Flavor + Effekt-Liste + Stufen-Tabelle in einem Container; Bauprojekt-
   Hinweis als kompakte Callout; Stufen-Pill bleibt auch mobil oben rechts. */
.building-detail__desc { margin-bottom: var(--sp-3); }
.building-detail__desc > p { margin: 0 0 var(--sp-2); }
.building-detail__effekte {
  margin: 0 0 var(--sp-2);
  padding-left: 1.25rem;
  font-size: var(--fs-sm);
}
.building-detail__effekte li { margin: 2px 0; }

.bauprojekt__hinweis {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  border-left-color: var(--c-bier);
}
.bauprojekt__hinweis .alert__icon {
  flex-basis: 1.75rem;
  width: 1.75rem;
  font-size: var(--fs-base);
}
.bauprojekt__hinweis p { margin: 0; }

@media (max-width: 559px) {
  /* Detailkarten: Titel + Stufen-Pill bleiben auf EINER Zeile (Pill oben
     rechts). Die globale flex-basis:100%-Regel ließ die Pill sonst als
     zweite „Label"-Zeile unter den Titel rutschen — das wirkte wie eine
     doppelte Stufen-Anzeige. */
  .building-detail .card__head > :is(h1, h2, h3, h4) {
    flex: 1 1 0;
    flex-basis: 0;
  }
}

/* Unterstuetzen-Seite (Fable 2026-07-19): CTA-Bereich, Spenden-Hinweis,
   Banner auf der Uebersicht, Ko-fi-iFrame-Container. Nutzt das bestehende
   --shell-gold/--c-bier Schema und die card/btn-Klassen. */
.donate-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--shell-gold-soft);
  border-radius: var(--radius-sm);
  background: var(--c-pergament-tief);
}

.donate-banner { margin-top: var(--sp-3); margin-bottom: var(--sp-5); }
.donate-banner p:last-child { margin-bottom: 0; }

/* Heraldik-Politur Hausplan + Übersicht (Fable 2026-07-20): größerer
   Cinzel-Titel und Gold-Divider im Hausplan-Kopf, tiefes Bordeaux für
   gewählte Raumkarten mit Gold-Keyline beim Hover, Ornament über den
   Inspector-Karten; Dashboard-Hero mit „Heute"-Block, Wachssiegel-CTA
   im Spenden-Banner und Folianten-Look für die Dashboard-Karten.
   Nur bestehende Tokens, keine neuen Assets. */

/* --- /gebaeude/: Hausplan-Titel & Gold-Divider --- */
.building-concept__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  letter-spacing: 0.06em;
  color: var(--shell-gold-bright);
  text-shadow: 0 2px 12px var(--shell-overlay);
}
.building-concept__toolbar::after {
  content: "";
  grid-column: 1 / -1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    var(--shell-gold) 22%,
    var(--shell-gold-bright) 50%,
    var(--shell-gold) 78%,
    transparent);
  opacity: 0.85;
}

/* --- /gebaeude/: Raumkarten — Gold-Keyline beim Hover, Bordeaux gewählt --- */
.building-room:hover,
.building-room:focus-visible {
  outline: 2px solid var(--shell-gold-bright);
  outline-offset: 3px;
  box-shadow: 0 5px 0 var(--c-holz), 0 0 0 1px var(--shell-gold), 0 12px 22px var(--shell-overlay);
}
.building-room.is-selected {
  outline: 2px solid var(--shell-gold-bright);
  outline-offset: 3px;
  border-color: var(--shell-gold-bright);
  background: linear-gradient(145deg, var(--c-bordeaux-hell), var(--c-bordeaux) 55%, var(--shell-red));
  color: var(--shell-text);
  box-shadow: 0 5px 0 var(--shell-wood-deep), 0 0 0 2px var(--shell-gold-bright), 0 12px 24px var(--shell-overlay);
}
.building-room.is-selected .building-room__meta { opacity: 0.92; }
.building-room.is-selected .building-room__live { color: var(--shell-gold-bright); }

/* --- /gebaeude/: Inspector-/Detailkarten — Ornament + Gold-Divider --- */
.building-detail .card__head { border-bottom: 0; }
.building-detail .card__head > :is(h1, h2, h3, h4)::before {
  content: "⚜";
  margin-right: var(--sp-2);
  color: var(--shell-gold);
  font-size: 0.8em;
}
.building-detail .card__head::after {
  content: "";
  flex: 1 1 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--shell-gold), var(--shell-gold-soft) 55%, transparent);
}

/* --- Übersicht: heraldischer Hero mit „Heute"-Block --- */
.dash-hero {
  position: relative;
  isolation: isolate;
  margin-bottom: var(--sp-5);
  padding: clamp(var(--sp-4), 2.6vw, var(--sp-6));
  border: 1px solid var(--shell-gold);
  border-radius: calc(var(--radius) + var(--sp-2));
  background:
    radial-gradient(circle at 50% -30%, var(--shell-bg-high), transparent 62%),
    linear-gradient(135deg, var(--shell-wood-deep), var(--shell-wood), var(--shell-bg-deep));
  box-shadow: var(--shell-shadow), inset 0 0 0 1px var(--shell-gold-faint);
  color: var(--shell-text);
  text-align: center;
}
.dash-hero::before {
  content: "";
  position: absolute;
  inset: var(--sp-2);
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--shell-gold-faint);
  border-radius: var(--radius);
}
.dash-hero__eyebrow {
  margin: 0;
  color: var(--shell-gold-bright);
  font: 700 var(--fs-xs)/1.2 var(--font-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.dash-hero__title {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0.05em;
  color: var(--shell-text);
  text-shadow: 0 2px 12px var(--shell-overlay);
}
.dash-hero__flourish {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 26rem;
  margin: var(--sp-3) auto;
  color: var(--shell-gold);
  font-size: var(--fs-md);
  line-height: 1;
}
.dash-hero__flourish::before,
.dash-hero__flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--shell-gold));
}
.dash-hero__flourish::after {
  background: linear-gradient(90deg, var(--shell-gold), transparent);
}
.dash-hero__today-label {
  margin: 0 0 var(--sp-2);
  color: var(--shell-text-muted);
  font: 600 var(--fs-xs)/1.2 var(--font-display);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.dash-hero__today {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
}
.dash-hero__stat {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--shell-gold-soft);
  border-radius: var(--radius-sm);
  background: var(--shell-overlay);
}
.dash-hero__stat dt {
  margin: 0;
  color: var(--shell-text-muted);
  font: 600 var(--fs-xs)/1.3 var(--font-nav);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-hero__stat dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--shell-gold-bright);
  overflow-wrap: anywhere;
}
@media (max-width: 559px) {
  .dash-hero__today { grid-template-columns: minmax(0, 1fr); }
  .dash-hero__stat { text-align: left; }
}

/* --- Übersicht: Wachssiegel-CTA im Spenden-Banner --- */
.donate-banner .btn--accent {
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--shell-gold);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, var(--c-bordeaux-hell), var(--c-bordeaux) 58%, var(--shell-wood-deep) 135%);
  color: var(--shell-text);
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  box-shadow:
    0 3px 0 var(--shell-wood-deep),
    0 8px 16px var(--shell-overlay),
    inset 0 1px 3px var(--shell-gold-soft),
    inset 0 -4px 8px var(--shell-overlay);
}
.donate-banner .btn--accent:hover,
.donate-banner .btn--accent:focus-visible {
  border-color: var(--shell-gold-bright);
  filter: brightness(1.1);
  box-shadow:
    0 0 0 3px var(--shell-gold-faint),
    0 3px 0 var(--shell-wood-deep),
    0 8px 16px var(--shell-overlay),
    inset 0 1px 3px var(--shell-gold-soft),
    inset 0 -4px 8px var(--shell-overlay);
}

/* --- Übersicht: Fuxenprüfung — Onboarding-Kette ganz oben (Owner
   23.08.2026). Pergament-Optik wie die übrigen Karten; der aktuelle Schritt
   bekommt eine Gold-Kante, erledigte Schritte treten zurück. --- */
.fuxenpruefung__schritte {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuxenpruefung__schritt {
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--shell-gold-soft);
  border-radius: var(--radius-sm);
  background: var(--shell-gold-faint);
}
.fuxenpruefung__schritt p {
  margin: 0;
}
.fuxenpruefung__schritt--aktuell {
  border-left-color: var(--shell-gold);
  box-shadow: inset 0 0 18px var(--shell-gold-faint);
}

/* --- Übersicht: Folianten-Look — dünner Goldrahmen + Pergament für die
   Dashboard-Karten (PvP-Bilanz, Schnellaktionen, Statuskarten). Alerts
   behalten ihre Warn-/Info-Färbung. --- */
.grid--dashboard > .card:not(.alert) {
  border: 1px solid var(--shell-gold);
  border-top-width: 4px;
  background: var(--surface-parchment);
  box-shadow: var(--shell-shadow), inset 0 0 28px var(--shell-gold-faint);
}

/* Motion is decorative only. Keep this as the final rule layer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .building-room { transition: none !important; }
  .building-room__live-dot { animation: none !important; }
}

/* --- Mitglieder-System (v0.17): Haltungs-Auswahl als drei Knöpfe.
   Radio-Inputs bleiben im DOM (Tastatur/Screenreader), die Beschriftung
   trägt den Knopf-Look. --- */
.haltung-wahl { border: 0; padding: 0; margin: 0; }
.haltung-wahl__optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.haltung-wahl__option {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--shell-gold, #b8963f);
  border-radius: 0.4rem;
  cursor: pointer;
  line-height: 1.25;
}
.haltung-wahl__option input { margin-right: 0.35rem; }
.haltung-wahl__name { font-weight: 600; }
.haltung-wahl__option:has(input:checked) {
  background: var(--shell-gold-faint, rgba(184, 150, 63, 0.18));
  border-width: 2px;
}
.haltung-wahl__option:has(input:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- „⏳ Läuft gerade": kompakte Auftrags-Übersicht ganz oben auf den
   Kampf-Seiten (_laufende_auftraege.html). Eine Zeile pro laufendem
   Auftrag — Ziel-Link links, Timer rechts, mobil umbrechend. Die Karte
   nutzt bewusst weniger Innenabstand als .card, damit sie den Seitenkopf
   nicht verdrängt (Zielhöhe <= 60px je Zeile). --- */
.laufend { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.laufend .card__head { margin-bottom: var(--sp-2); }
.laufend__liste { list-style: none; margin: 0; padding: 0; }
.laufend__zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-holz-hell);
}
.laufend__zeile:last-child { border-bottom: 0; }
.laufend__ziel {
  flex: 1 1 10rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* Timer-Spalte: feste Mindestbreite, damit Label und Restzeit nicht
   ineinanderlaufen (gleiche Garantie wie in .mission). */
.laufend__timer { flex: 1 1 9.5rem; min-width: 8.5rem; }
.laufend__timer .timer { gap: var(--sp-1); }

/* ---------- Tagesziel-Tausch (Reroll) ---------- */
/* Ein Knopf pro Tagesziel-Karte (game/_tagesziel_reroll.html), mobile-first:
   Label links, Preis rechtsbündig in derselben Zeile. Die Bestätigung ist ein
   <details> statt Modal/confirm(), damit sie ohne JavaScript funktioniert. */
.reroll__box { display: block; }

/* Keep the summary as a native list item; .btn otherwise makes it inline-flex.
   The inner line carries the shared two-column layout for both trigger types. */
.reroll__trigger {
  justify-content: space-between;
  padding-inline: var(--sp-3);
  list-style: none;
}
summary.reroll__trigger { display: list-item; }
.reroll__trigger::-webkit-details-marker { display: none; }

.reroll__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}

.reroll__preis {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reroll__frage { margin: var(--sp-2) 0; }

/* [ Ja, tauschen ] [ Abbrechen ] — je halbe Breite, nebeneinander; beide
   Kinder sind Block-Elemente mit .btn--block darin, daher 1fr/1fr. */
.reroll__aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  align-items: stretch;
}
.reroll__aktionen .reroll__form { margin: 0; }
.reroll__aktionen .btn { min-height: 44px; }

.reroll__grund { margin-top: var(--sp-1); }