/* Bierberg-Dashboard — gemeinsame Gestaltung fuer Cockpit und Anzeige.
   Farben und Materialien stammen vom Artwork: dunkles Holz, Messing,
   die lila Robe des Haendlers, Glut aus dem Drachenbild. */

:root {
  --nacht: #150f09;
  --holz: #221810;
  --holz-hell: #2f2216;
  --kante: #453324;
  --gold: #d2a03f;
  --gold-hell: #f0d18a;
  --lila: #7a4aa3;
  --glut: #e2622a;
  --pergament: #efe1c6;
  --matt: #a9977a;

  --rot: #c03c2c;
  --orange: #dc8226;
  --blau: #3670bb;
  --gruen: #46874d;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --r: 10px;
  --lucke: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(120% 90% at 50% 0%, #2a1d12 0%, var(--nacht) 65%),
    var(--nacht);
  color: var(--pergament);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .zahl {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--kante);
  background: var(--holz-hell);
  border-radius: var(--r);
  padding: 10px 14px;
  min-height: 44px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

button:hover { background: #3a2a1a; }
button:active { transform: translateY(1px); }

:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lucke);
  padding: 12px 20px;
  background: linear-gradient(#2c1f13, #1b130c);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 6px 20px rgb(0 0 0 / .5);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marke {
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: .06em;
  color: var(--gold-hell);
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}

.marke span {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--matt);
}

.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.uhr {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hell);
  min-width: 5.5ch;
  text-align: center;
}

.uhr.knapp { color: var(--glut); }
.uhr.aus { color: var(--matt); }

/* ------------------------------------------------------------ Teamraster */

.raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lucke);
  padding: var(--lucke) 20px;
  align-items: start;
}

.team {
  background: linear-gradient(#271b11, #1d140c);
  border: 1px solid var(--kante);
  border-top: 4px solid var(--farbe);
  border-radius: var(--r);
  overflow: hidden;
}

.team[data-farbe='rot'] { --farbe: var(--rot); }
.team[data-farbe='orange'] { --farbe: var(--orange); }
.team[data-farbe='blau'] { --farbe: var(--blau); }
.team[data-farbe='gruen'] { --farbe: var(--gruen); }

.team-kopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px 6px;
}

.team-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--farbe);
  filter: brightness(1.35);
}

.rang {
  margin-left: auto;
  font-size: .78rem;
  color: var(--matt);
}

.feld {
  padding: 0 14px 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.feld .zahl {
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.feld small { color: var(--matt); }

/* Der Fortschritt sieht aus wie eine Reihe Spielfelder, nicht wie ein Ladebalken. */
.bahn {
  height: 12px;
  margin: 0 14px 12px;
  border: 1px solid var(--kante);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #1a120b 0 5px, #241a10 5px 6px);
  overflow: hidden;
}

.bahn > i {
  display: block;
  height: 100%;
  background: var(--farbe);
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / .3) 0 5px, transparent 5px 6px);
  transition: width .35s ease;
}

.punkte,
.wuerfel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 12px;
}

.punkte .titel {
  margin-right: auto;
  color: var(--matt);
  font-size: .82rem;
}

.punkte button,
.w8-stand button {
  min-width: 46px;
  font-size: 1.1rem;
  padding: 6px 0;
  border-color: #5c4526;
}

.punkte b {
  min-width: 2.5ch;
  text-align: center;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hell);
}

.w8-knopf {
  flex: 1;
  font-size: .85rem;
  color: var(--matt);
}

/* Wer den Wuerfel hat, sieht es an der Karte, nicht nur am Fernseher. */
.w8-knopf[aria-pressed='true'] {
  background: var(--lila);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 12px rgb(122 74 163 / .55);
}

.w8-stand {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* display:flex sticht das hidden-Attribut aus, darum hier nochmal ausdruecklich. */
.w8-stand[hidden] { display: none; }

.w8-stand b {
  font-size: .85rem;
  color: var(--gold-hell);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.spieler {
  border-top: 1px solid var(--kante);
  padding: 10px 14px;
  display: grid;
  gap: 8px;
}

.spieler-reihe {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spieler-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  background: none;
  border: none;
  padding: 4px 0;
  min-height: 0;
  color: var(--pergament);
  font-size: .9rem;
}

.spieler-name:hover { color: var(--gold-hell); background: none; }

.zaehler {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  min-height: 40px;
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  background: #1a120b;
}

.zaehler b { font-weight: 600; color: var(--gold-hell); }

/* Ausfluege stehen neben den Glaesern, heben sich aber leicht ab. */
.zaehler.ort {
  background: #241a10;
  border-color: #5c4526;
}

/* -------------------------------------------------------------- Werkbank */

.werkbank {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--lucke);
  padding: 0 20px 28px;
  align-items: start;
}

.kasten {
  background: linear-gradient(#251a10, #1c1309);
  border: 1px solid var(--kante);
  border-radius: var(--r);
  padding: 14px 16px;
}

.kasten h2 {
  font-size: 1.05rem;
  color: var(--gold-hell);
  margin-bottom: 10px;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gefahr { border-color: #6b3020; color: #eba892; }

.ticker {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  scrollbar-width: thin;
  overflow-y: auto;
  font-size: .88rem;
}

.ticker li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #2a1e13;
}

.ticker li:last-child { border-bottom: none; }

.ticker time {
  color: var(--matt);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.ticker .punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: .45em;
  flex: none;
  background: var(--matt);
}

.leer {
  color: var(--matt);
  font-size: .9rem;
  padding: 6px 0;
}

/* ---------------------------------------------------------- Verbindung */

.draht {
  font-size: .8rem;
  color: var(--matt);
  display: flex;
  align-items: center;
  gap: 6px;
}

.draht::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gruen);
}

.draht[data-zustand='weg']::before { background: var(--glut); }
.draht[data-zustand='weg'] { color: var(--glut); }

/* ------------------------------------------------------------- Anzeige */

.tv { padding: 0; }

.tv-blatt {
  padding: 24px clamp(20px, 4vw, 56px) 32px;
}

.laeufer-liste {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  align-content: stretch;
  gap: clamp(8px, 1.5vh, 20px);
}

.tv-fuss {
  list-style: none;
  margin: 0;
  padding: clamp(10px, 1.6vh, 18px) 0 0;
  border-top: 1px solid var(--kante);
  display: grid;
  gap: 6px;
  font-size: clamp(.85rem, 1.4vw, 1.15rem);
  color: var(--matt);
}

.tv-fuss li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tv-fuss li:first-child { color: var(--pergament); }

.laeufer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px clamp(12px, 2vw, 28px);
}

.laeufer-name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.7rem);
  color: var(--farbe);
  filter: brightness(1.4);
  min-width: 7ch;
  white-space: nowrap;
}

.laeufer-name b {
  color: var(--matt);
  filter: none;
  font-weight: 400;
  margin-right: .4em;
}

.laeufer-bahn {
  position: relative;
  height: clamp(26px, 7vh, 70px);
  border: 1px solid var(--kante);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #1a120b 0 10px, #241a10 10px 12px);
  overflow: hidden;
}

.laeufer-bahn > i {
  display: block;
  height: 100%;
  background: var(--farbe);
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / .28) 0 10px, transparent 10px 12px);
  box-shadow: 0 0 22px var(--farbe);
  transition: width .5s cubic-bezier(.22, .8, .3, 1);
}

.laeufer-zahl {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 2.8rem);
  font-variant-numeric: tabular-nums;
  color: var(--gold-hell);
  min-width: 3.5ch;
  text-align: right;
}

/* Der Drache: die eine laute Stelle im ganzen Dashboard. */
.drache {
  min-height: calc(100vh - 92px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: stretch;
  gap: clamp(10px, 2vh, 26px);
  padding: clamp(16px, 3vw, 48px);
  background:
    radial-gradient(70% 55% at 50% 42%, #47180a 0%, transparent 70%),
    var(--nacht);
}

.drache h2 {
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  color: var(--glut);
  letter-spacing: .04em;
  text-shadow: 0 0 34px rgb(226 98 42 / .6);
}

.hp-balken {
  height: clamp(28px, 6vh, 70px);
  border: 2px solid #6e3c1c;
  border-radius: 6px;
  background: #120a05;
  overflow: hidden;
}

.hp-balken > i {
  display: block;
  height: 100%;
  background: linear-gradient(#ffb74a, var(--glut) 45%, #8d2508);
  box-shadow: 0 0 40px rgb(226 98 42 / .8);
  transition: width .6s cubic-bezier(.22, .8, .3, 1);
}

.hp-zahl {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hp-zahl small {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.6vw, 1.1rem);
  color: var(--matt);
  margin-top: 8px;
}

.besiegt {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 6vw, 4.5rem);
  color: var(--gold-hell);
  text-shadow: 0 0 40px rgb(210 160 63 / .7);
}

/* Die Bierpunkte stehen in der Chronik als eigene Tafel, ein Feld pro Team. */
.tafel-titel {
  color: var(--matt);
  font-size: clamp(.85rem, 1.3vw, 1.05rem);
  margin-bottom: 8px;
}

.punkte-tafel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lucke);
}

.punkte-team {
  text-align: center;
  padding: clamp(10px, 2vh, 20px);
  border: 1px solid var(--kante);
  border-top: 4px solid var(--farbe);
  border-radius: var(--r);
  background: linear-gradient(#271b11, #1b130c);
}

.punkte-team .zahl {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}

.punkte-team span {
  color: var(--matt);
  font-size: clamp(.8rem, 1.2vw, 1rem);
}

/* Chronik */

.chronik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--lucke);
}

.rekord {
  padding: clamp(14px, 2vh, 22px);
  border: 1px solid var(--kante);
  border-radius: var(--r);
  background: linear-gradient(#271b11, #1b130c);
}

.rekord h3 {
  font-size: .95rem;
  color: var(--matt);
  font-family: var(--sans);
  font-weight: 500;
  margin-bottom: 8px;
}

.rekord p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  color: var(--gold-hell);
}

.rekord small { display: block; color: var(--matt); font-family: var(--sans); font-size: .82rem; margin-top: 4px; }

/* ------------------------------------------------------------- Kleinkram */

.abstand { height: 8px; }

@media (max-width: 1100px) {
  .raster { grid-template-columns: repeat(2, 1fr); }
  .werkbank { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .raster { grid-template-columns: 1fr; padding: var(--lucke) 12px; }
  .werkbank { padding: 0 12px 24px; }
  .kopf { padding: 10px 12px; }
  .marke { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Der Ticker darf auf dem Fernseher mehr zeigen als im Cockpit. */
.tv .ticker { max-height: 38vh; font-size: clamp(.9rem, 1.3vw, 1.15rem); }

/* ------------------------------------------------------- Einstellungsseite */

.bild-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 6px;
}

.kasten .bild-zeile { padding: 0 0 10px; }

.team .bild-feld { border-radius: 50%; }

.bild-feld {
  width: 88px;
  height: 88px;
  flex: none;
  border: 1px solid var(--kante);
  border-radius: 12px;
  background: #1a120b;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bild-feld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bild-feld span {
  color: var(--matt);
  font-size: .76rem;
}

.knopf-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--kante);
  border-radius: var(--r);
  background: var(--holz-hell);
  cursor: pointer;
}

.knopf-label:hover { background: #3a2a1a; }
.knopf-label:focus-within { outline: 2px solid var(--gold-hell); outline-offset: 2px; }

.feld-zeile {
  display: grid;
  gap: 5px;
  padding: 8px 14px;
  font-size: .82rem;
  color: var(--matt);
}

.kasten .feld-zeile { padding: 8px 0; }

.feld-zeile input {
  font: inherit;
  font-size: 1rem;
  color: var(--pergament);
  background: #1a120b;
  border: 1px solid var(--kante);
  border-radius: var(--r);
  padding: 11px 12px;
  min-height: 44px;
}

.feld-zeile input:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 1px;
}

.hinweis {
  color: var(--matt);
  font-size: .82rem;
  line-height: 1.55;
  margin: 4px 0 0;
  max-width: 62ch;
}

.hinweis code {
  background: #1a120b;
  padding: 1px 5px;
  border-radius: 4px;
}

.gespeichert {
  font-size: .82rem;
  color: var(--gold-hell);
  min-width: 11ch;
  text-align: right;
}

.gespeichert.fehler { color: var(--glut); }

/* --------------------------------------------------------- Team- und Drachenbilder */

.wappen {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--farbe);
  flex: none;
}

.team-kopf { align-items: center; }

.laeufer-wappen {
  width: clamp(34px, 4vw, 62px);
  height: clamp(34px, 4vw, 62px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--farbe);
  vertical-align: middle;
  margin-right: .45em;
}

/* Das Drachenbild liegt hinter dem Kampf, abgedunkelt, damit der Balken lesbar bleibt. */
.drache {
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}

.drache::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 42%, rgb(71 24 10 / .3) 0%, transparent 70%),
    linear-gradient(rgb(21 15 9 / .1) 0%, rgb(21 15 9 / .45) 40%, rgb(21 15 9 / .85) 100%);
}

/* ---------------------------------------------------------- Teamseite (Handy) */

.team-blatt {
  display: grid;
  gap: var(--lucke);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--lucke) 16px calc(24px + env(safe-area-inset-bottom));
}

.team-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--lucke);
}

.team-kacheln .punkte-team span { display: block; margin-top: 6px; }

.team-drache .hp-balken { height: 26px; }
.team-drache .hp-zahl { font-size: 2.2rem; margin: 10px 0 0; }
.team-drache .hp-zahl small { font-size: .85rem; }

.team-spieler {
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-spieler li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px 0;
  border-bottom: 1px solid #2a1e13;
}

.team-spieler li:last-child { border-bottom: none; }
.team-spieler b { flex: 1 0 100%; color: var(--gold-hell); font-weight: 600; }
.matt { color: var(--matt); }

/* Am Handy scrollt die ganze Seite, nicht ein Kasten in der Seite. */
.teamseite .ticker { max-height: none; overflow: visible; }

.ticker .tag-zeile {
  display: block;
  padding: 10px 0 4px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .04em;
}


.team-links { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.team-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-left: 4px solid var(--farbe); padding-left: 10px; margin-bottom: 6px; }
.team-links b { min-width: 6ch; }
.team-links a { color: var(--gold-hell); word-break: break-all; }

/* Der Schalter fuer den Drachenkampf leuchtet, solange die Teams ihn sehen. */
#drache-aktiv { margin-bottom: 6px; }
#drache-aktiv[aria-pressed='true'] {
  background: #4a1d0c;
  border-color: var(--glut);
  color: #ffd9c4;
  box-shadow: 0 0 12px rgb(226 98 42 / .5);
}

/* Teamseitenbild: oben ueber die ganze Breite, unten in die Seite auslaufend. */
.team-banner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.team-banner[hidden] { display: none; }

.team-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 65%, var(--nacht));
}

@media (min-width: 720px) {
  .team-banner { margin-top: var(--lucke); border-radius: var(--r); }
}


/* Das Teamseitenbild ist quer: Vorschau ueber die ganze Kartenbreite, Knoepfe darunter. */
.banner-zeile { flex-wrap: wrap; padding-top: 4px; }
.banner-feld { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.team .banner-feld { border-radius: 12px; }

.team-links button { min-height: 32px; padding: 4px 10px; font-size: .8rem; margin-left: auto; }

/* -------------------------------------------------------------- Anmeldung */

body.gesperrt > :not(.anmeldung) { display: none !important; }

.anmeldung {
  max-width: 340px;
  margin: 18vh auto 0;
  padding: 28px 24px;
  display: grid;
  gap: 12px;
  text-align: center;
  background: linear-gradient(#251a10, #1c1309);
  border: 1px solid var(--kante);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
}

.anmeldung h1 { color: var(--gold-hell); letter-spacing: .06em; }
.anmeldung p { margin: 0; color: var(--matt); font-size: .9rem; }
.anmeldung .fehler { color: var(--glut); }

.anmeldung input {
  font: inherit;
  color: inherit;
  padding: 12px;
  min-height: 44px;
  border: 1px solid var(--kante);
  border-radius: var(--r);
  background: #1a120b;
  text-align: center;
}

/* ------------------------------------------------------- Drachen-Tablet */

.drachen-tablet { min-height: 100vh; }

.dt {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 16px clamp(12px, 2vw, 28px) calc(16px + env(safe-area-inset-bottom));
}

.dt-kopf { display: grid; gap: 8px; }
.dt-kopf[hidden], .dt-teams[hidden] { display: none; }

.dt-kopf h1 {
  text-align: center;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  color: var(--glut);
  text-shadow: 0 0 30px rgb(226 98 42 / .55);
}

.dt-kopf .hp-balken { height: clamp(22px, 4vh, 44px); }

.dt-hp-zahl {
  margin: 0;
  text-align: center;
  color: var(--matt);
  font-size: 1rem;
}

.dt-hp-zahl b {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  color: var(--pergament);
  font-variant-numeric: tabular-nums;
}

.dt-teams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1000px) {
  .dt-teams { grid-template-columns: repeat(2, 1fr); }
}

.dt-team {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  border: 2px solid var(--kante);
  border-top: 6px solid var(--farbe);
  border-radius: var(--r);
  min-height: 300px;
}

.dt-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: 22% 30%; /* die Katze steht links im Bild */
}

.dt-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(21 15 9 / .25), rgb(21 15 9 / .78) 45%, rgb(21 15 9 / .95));
}

.dt-inhalt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 16px;
}

.dt-inhalt h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  color: var(--pergament);
  text-shadow: 0 2px 6px #000;
}

.dt-glas { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.dt-glas span { color: var(--matt); }
.dt-glas b {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}

/* 0,3 l ist der Bonus: das soll man von der Theke aus sehen. */
.dt-team.klein .dt-glas b { color: #9fe39a; text-shadow: 0 0 22px rgb(120 220 110 / .45); }

.dt-bonus { margin: 0; min-height: 1.3em; color: #c9eec5; font-size: .95rem; }
.dt-schaden { margin: 0; color: var(--matt); font-size: .9rem; text-align: center; }
.dt-schaden span { color: var(--pergament); font-weight: 600; }

.dt-knopf {
  min-height: 84px;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  background: linear-gradient(#a0381a, #6b2009);
  border: 2px solid var(--glut);
  color: #fff;
  box-shadow: 0 0 18px rgb(226 98 42 / .45);
}

.dt-knopf:hover { background: linear-gradient(#b4421f, #7a250b); }
.dt-knopf:disabled { opacity: .45; cursor: default; box-shadow: none; }

.dt-team.treffer { animation: dt-treffer .7s ease-out; }
@keyframes dt-treffer {
  0% { box-shadow: inset 0 0 0 9999px rgb(226 98 42 / .55); transform: scale(.98); }
  100% { box-shadow: inset 0 0 0 9999px rgb(226 98 42 / 0); transform: none; }
}

.dt-ruhe {
  align-self: center;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--matt);
}

.dt-draht { position: fixed; right: 12px; bottom: 10px; }

/* Cockpit: Bonus fuer den Drachenkampf */
.bonus-reihe { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex-wrap: wrap; }
.ziel-knopf { min-height: 32px; padding: 4px 10px; font-size: .8rem; color: var(--matt); }
.ziel-knopf[aria-pressed='true'] { background: #24401f; border-color: #6fbf63; color: #d6f5d0; }
.glas-anzeige { font-size: .85rem; color: var(--matt); }
.glas-anzeige.klein { color: #9fe39a; }