/* ============================================================
   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 */

  /* 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;

  /* 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;

  /* 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) */
  --navbar-h: 60px;
  --status-h: 36px;
  --resbar-h: 88px;          /* Ressourcenleiste im Normalzustand */
  --resbar-h-compact: 52px;  /* beim Scrollen geschrumpft (Progressive Enhancement) */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  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
    );
  padding-bottom: var(--status-h);
}

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);
  padding: 0 var(--sp-4);
  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);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--c-bier-hell);
  text-decoration: none;
  white-space: nowrap;
}

/* 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 nach rechts schieben (Desktop): margin-left:auto auf
     dem ersten der beiden drückt es samt nachfolgendem Abmelden an den Rand. */
  .navbar__links .nav-right { margin-left: auto; }
}

/* 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: 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: start;
  }
  .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); }

/* ---------- 5. Ressourcenleiste ---------- */
/* Kompakte sticky Leiste unter der Navbar. Hoehe aus Token.
   Schrumpfen ist Progressive Enhancement: Alpine setzt
   .resourcebar--compact beim Scrollen; ohne JS bleibt die
   Leiste in Normalhoehe und voll funktional. */
.resourcebar {
  position: sticky;
  top: var(--navbar-h);
  z-index: 45;
  min-height: var(--resbar-h);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  padding: 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);
  transition: min-height 0.2s ease, padding 0.2s ease;
}

.resourcebar--compact {
  min-height: var(--resbar-h-compact);
  padding: var(--sp-1) var(--sp-3);
}

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

.res {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: rgba(251, 246, 233, 0.06);
  border-left: 4px solid var(--accent, var(--c-bier));
}
.res__icon { font-size: var(--fs-lg); line-height: 1; }
.res__body { display: flex; flex-direction: column; line-height: 1.1; }
.res__value { font-family: var(--font-display); font-size: var(--fs-md); color: var(--c-creme); font-variant-numeric: tabular-nums; }
.res__label { font-size: var(--fs-xs); color: var(--c-bier-hell); letter-spacing: 0.04em; }

/* Ressourcen-Tooltip (T10): Lager/Rate je Ressource, sichtbar bei
   Maus-Hover UND Tastatur-Fokus (.res ist tabindex="0"). Per Default
   unsichtbar (opacity/visibility statt display, damit Screenreader +
   Transition funktionieren); :focus-visible nutzt denselben Pfad wie
   :focus (Tastaturnutzer UND Touch-Tap auf .res). */
.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. */
  top: calc(100% + var(--sp-1));
  left: var(--sp-2);
  z-index: 60;
  max-width: 220px;
  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:hover .res__tooltip,
.res:focus .res__tooltip,
.res:focus-within .res__tooltip {
  opacity: 1;
  visibility: visible;
}

/* Im Compact-Zustand bleiben Tooltips an der gleichen Stelle (relativ zur
   .res-Box) -- kein zusaetzliches Offset noetig, da top: 100% relativ
   zur (kleineren) Box bleibt. */
@media (max-width: 559px) {
  .res__tooltip { white-space: normal; max-width: 160px; }
}

/* im Compact-Zustand Labels ausblenden, nur Werte zeigen */
.resourcebar--compact .res__label { display: none; }
.resourcebar--compact .res { padding: var(--sp-1) var(--sp-2); }

.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); }

/* ---------- 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);
}

.card__head {
  display: flex;
  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--accent  { 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); }

/* ---------- 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); }

/* ---------- 8. Fortschrittsbalken + Countdown ---------- */
.timer { display: grid; gap: var(--sp-2); }
.timer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.timer__label { font-family: var(--font-display); color: var(--c-holz-dunkel); }
.timer__count {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  color: var(--c-bordeaux);
}

/* 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 {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--c-bordeaux);
  white-space: nowrap;
}

.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 { font-size: var(--fs-lg); line-height: 1.2; }
.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; }

/* 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);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  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); }

/* ---------- 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); }

.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);
}

/* ---------- 12. Statusleiste unten ---------- */
.statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--status-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-bier-hell);
  background: var(--c-holz-dunkel);
  border-top: 2px solid var(--c-bier);
  z-index: 40;
}
.statusbar a { color: var(--c-bier-hell); text-decoration: none; }
.statusbar a:hover { text-decoration: underline; }

/* ---------- 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; }

/* ---------- 14. 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;
}

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

/* Fertig: Gold-Rahmen, dezentes Häkchen-Signal */
.rt-node--fertig {
  border-left-color: var(--c-bier);
  background: linear-gradient(
    135deg,
    var(--c-pergament-tief) 0%,
    rgba(200, 134, 13, 0.06) 100%
  );
}

.rt-node--fertig::after {
  content: "✓";
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  font-size: var(--fs-xl);
  color: var(--c-bier);
  opacity: 0.18;
  pointer-events: none;
  font-family: var(--font-display);
}

/* 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); }
}