/* Fernseher / Bühne: Kartentisch mit Logbuch rechts. */
body.tv { overflow: hidden; font-size: clamp(14px, 1.15vw + .6vh, 30px); }

.tv-rahmen {
  height: 100vh; height: 100dvh; padding: 1.6vmin 2.2vmin;
  display: grid; gap: 1.2vmin 2.2vmin;
  grid-template: "kopf kopf" auto "buehne logbuch" 1fr / 1fr minmax(11em, 21%);
}
.kopf { grid-area: kopf; display: flex; align-items: baseline; gap: 1.2em; border-bottom: 2px solid var(--tinte); padding-bottom: .3em; box-shadow: 0 4px 0 -2px var(--papier), 0 5px 0 -2px var(--tinte); }
.marke { font-family: var(--titel); font-size: 1.7em; letter-spacing: .04em; }
.runde { font-style: italic; color: var(--tinte-leise); flex: 1; }
.raumecke { font-size: .95em; }
.raumecke b { font-family: var(--titel); font-weight: 400; letter-spacing: .15em; font-size: 1.2em; }

.buehne { grid-area: buehne; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.logbuch { grid-area: logbuch; min-height: 0; overflow: auto; border-left: 1px solid var(--rand); padding-left: 1.2em; }
.logbuch h2 { font-size: 1.3em; border-bottom: 1px solid var(--tinte); margin-bottom: .4em; }
.spieler { list-style: none; margin: 0; padding: 0; display: grid; gap: .1em; }
.spieler li { display: flex; align-items: center; gap: .5em; padding: .35em 0; border-bottom: 1px dashed var(--rand); font-size: 1.05em; }
.spieler li.weg { opacity: .45; }
.spieler .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieler .stand { font-family: var(--titel); font-size: 1.2em; min-width: 2.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.spieler .plus { color: var(--rot); font-family: var(--titel); animation: auf .5s both; }
.spieler .km { font-size: .8em; color: var(--tinte-leise); animation: auf .5s both; }
.spieler .feder { font-style: italic; color: var(--tinte-leise); font-size: .85em; }
.siegel-mini { width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c84a37, #8f2116 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); animation: stempel .35s both; }
@keyframes stempel { from { transform: scale(2.2); opacity: 0; } }

/* Lobby */
.lobby, .endstand, .reisekarte { display: flex; flex-direction: column; align-items: center; gap: 1.6em; max-width: 40em; text-align: center; }
.titelkarte h1 { font-size: 3.6em; line-height: 1; }
.titelkarte p { margin: .5em 0 0; font-size: 1.05em; line-height: 1.4; }
.beitritt { display: flex; align-items: center; gap: 1.4em; text-align: left; }
.beitritt p { margin: .1em 0; }
.qr { width: 9em; height: 9em; border: 2px solid var(--tinte); padding: .3em; background: #f4e8cc; }
.adresse { font-weight: 700; font-size: 1.1em; word-break: break-all; }
.code { font-family: var(--titel); font-size: 2.6em; letter-spacing: .25em; line-height: 1; }
.einstellung { font-style: italic; color: var(--tinte-leise); margin: 0; }

/* Peilen */
.reise { min-width: 22em; padding: 1.2em 2.5em; }
.reise p { margin: 0; }
.reise h2 { font-size: 2.8em; line-height: 1.05; }
.reise .land { font-style: italic; color: var(--tinte-leise); }
.trenner { display: flex; align-items: center; gap: .6em; margin: .7em 0; }
.trenner span { flex: 1; border-top: 2px dotted var(--tinte); }
.trenner svg { width: 2.2em; height: 2.2em; animation: drehen 9s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.anleitung { margin: 0; max-width: 30em; color: var(--tinte-leise); }
.uhr { position: relative; width: 4.5em; height: 4.5em; }
.uhr svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.uhr circle { fill: none; stroke-width: 7; }
.uhr-grund { stroke: rgba(58, 42, 24, .15); }
.uhr-rest { stroke: var(--tinte); stroke-dasharray: 100; transition: stroke-dashoffset .2s linear; }
.uhr.knapp .uhr-rest { stroke: var(--rot); }
.uhr span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titel); font-size: 1.6em; }
.uhr.knapp span { color: var(--rot); animation: puls .5s ease-in-out infinite alternate; }
@keyframes puls { to { transform: scale(1.15); } }

/* Karte */
.karte-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) 4.2em; gap: .5em; }
.fuss { display: flex; align-items: center; gap: 1.2em; min-width: 0; }
.karte { width: 100%; height: 100%; display: block; overflow: hidden; border: 1px solid var(--tinte); box-shadow: inset 0 0 40px rgba(110, 70, 20, .25); }
.grund { animation: auf .9s both; }
.gradnetz path { fill: none; stroke: #8a6a3a; stroke-width: .7; vector-effect: non-scaling-stroke; opacity: .45; }
.gradzahl text { fill: #7a5c30; font-family: var(--schrift); font-style: italic; }
.land-schatten path { fill: rgba(90, 60, 20, .35); transform: translate(3px, 4px); }
.aussengrenze path { fill: none; stroke: #4a3418; stroke-width: 4.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.laender path { opacity: .92; }
.meer { opacity: .75; }
.grenzen path { fill: none; stroke: #5b4426; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: .75; }
.staedte circle { fill: #4a3418; opacity: .55; }
.staedte text { fill: #5b4426; font-family: var(--schrift); font-style: italic; opacity: .7; }
.windrose .hell { fill: #efe0b9; stroke: #3a2a18; stroke-width: .8; vector-effect: non-scaling-stroke; }
.windrose .dunkel { fill: #3a2a18; }
.windrose .ring { fill: none; stroke: #3a2a18; stroke-width: .8; vector-effect: non-scaling-stroke; }
.windrose text { fill: var(--rot); font-family: var(--titel); }

.stadtmarke { animation: plopp .5s cubic-bezier(.3, 1.6, .6, 1) both; transform-box: fill-box; transform-origin: center; }
.stadtmarke circle { fill: var(--tinte); }
.stadtmarke .kranz { fill: none; stroke: var(--tinte); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.stadtmarke.ziel circle { fill: var(--rot); }
.stadtmarke.ziel .kranz { fill: none; stroke: var(--rot); animation: kranz 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.stadtmarke text { font-family: var(--titel); fill: var(--tinte); paint-order: stroke; stroke: rgba(246, 236, 210, .9); stroke-width: 5; vector-effect: non-scaling-stroke; }
.stadtmarke.ziel text { fill: var(--rot); }
@keyframes plopp { from { opacity: 0; transform: scale(2.5); } }
@keyframes kranz { 70%, 100% { transform: scale(2.4); opacity: 0; } }

.punktezone { fill: rgba(158, 42, 30, .05); stroke: var(--rot); stroke-width: 1.2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; opacity: .6; animation: auf 1s both; }
.wahr { fill: none; stroke: var(--rot); opacity: .8; animation: auf .8s both; }
.pfeil .schaft { fill: none; stroke-linejoin: round; stroke: var(--f); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen .55s ease-in both; }
.pfeil .kopf { fill: var(--f); animation: auf .2s both; }
.pfeilname { fill: var(--f); font-family: var(--titel); paint-order: stroke; stroke: rgba(246, 236, 210, .92); stroke-width: 5; vector-effect: non-scaling-stroke; animation: auf .3s both; }
.abstand { stroke: var(--f); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; stroke-width: 2; opacity: .85; animation: auf .6s both; }
.abstandzahl { fill: var(--f); font-family: var(--schrift); font-weight: 700; paint-order: stroke; stroke: rgba(246, 236, 210, .95); stroke-width: 4; vector-effect: non-scaling-stroke; animation: auf .5s both; }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes auf { from { opacity: 0; } }

.banner { flex: 1; min-width: 0; font-size: 1.3em; padding: .35em 1.2em; white-space: nowrap; text-align: center; background: var(--papier-hell); box-shadow: 0 6px 18px rgba(60, 35, 5, .3); animation: banner .6s cubic-bezier(.3, 1.4, .6, 1) both; }
.banner b { font-family: var(--titel); font-weight: 400; font-size: 1.15em; }
.banner span { color: var(--tinte-leise); margin-left: .4em; }
@keyframes banner { from { opacity: 0; transform: translateY(.8em) scale(.94); } }
.wahrwert { flex: none; line-height: 1.25; padding: .2em .8em; border-left: 3px solid var(--rot); color: var(--rot); font-size: .95em; animation: auf .6s both; }
.wahrwert b { font-family: var(--titel); font-weight: 400; }

/* Endstand */
.podest { list-style: none; margin: 0; padding: 0; width: min(28em, 100%); display: grid; gap: .3em; }
.podest li { display: flex; align-items: center; gap: .6em; padding: .45em .8em; border-bottom: 1px dashed var(--rand); font-size: 1.2em; animation: auf .5s both; }
.podest li:nth-child(n) { animation-delay: calc(var(--i, 0) * 1ms); }
.podest .rang { font-family: var(--titel); width: 2.2em; text-align: center; color: var(--tinte-leise); }
.podest .name { flex: 1; text-align: left; }
.podest .stand { font-family: var(--titel); font-size: 1.3em; }
.podest .platz1 { font-size: 1.7em; border: 2px solid var(--tinte); background: rgba(228, 199, 121, .35); }
.podest .platz1 .rang { color: var(--rot); }

/* Eingang */
.eingang { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6em; padding: 2em; text-align: center; background: inherit; background-color: var(--papier); transition: opacity .5s, visibility .5s; }
.eingang.weg { opacity: 0; visibility: hidden; pointer-events: none; }
.eingang-titel h1 { font-size: 4em; line-height: 1; }
.eingang-titel p { margin: .4em 0 0; font-style: italic; }
.heimweg, .zurueck { position: absolute; color: var(--tinte); }
.heimweg { top: 1em; left: 1.2em; }
.zurueck { position: static; }
.wahl { display: flex; gap: 1.2em; flex-wrap: wrap; justify-content: center; }
.wahlkarte { font: inherit; color: var(--tinte); text-decoration: none; cursor: pointer; width: 15em; padding: 1.1em 1.2em; text-align: left; border: 2px solid var(--tinte); border-radius: .4em; background: rgba(250, 243, 222, .6); box-shadow: 0 3px 0 var(--tinte); display: flex; flex-direction: column; gap: .4em; transition: transform .1s; }
.wahlkarte:hover, .wahlkarte:focus-visible { transform: translateY(-3px) rotate(-.5deg); }
.wahlkarte b { font-family: var(--titel); font-weight: 400; font-size: 1.5em; }
.wahlkarte span { font-size: .95em; color: var(--tinte-leise); }
.knopf.gross { font-size: 1.5em; }
.tischwahl { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; justify-content: center; }
.tischwahl .feld { width: 6em; text-align: center; letter-spacing: .3em; font-family: var(--titel); }
.eingangtext { margin: 0; font-style: italic; color: var(--tinte-leise); max-width: 30em; }

/* Online: Bühne links, eigenes Pult rechts */
.pult { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; border-left: 2px solid var(--tinte); box-shadow: -6px 0 18px rgba(60, 35, 5, .25); background: var(--papier); }
.pult iframe { width: 100%; height: 100%; border: 0; display: block; }
body.kombi .tv-rahmen { margin-right: 380px; }
body.kombi { font-size: clamp(13px, .9vw + .5vh, 24px); }
@media (max-width: 900px) {
  body.tv { overflow: auto; }
  .tv-rahmen { height: auto; min-height: 70vh; grid-template: "kopf" auto "buehne" minmax(60vh, 1fr) "logbuch" auto / 1fr; }
  .logbuch { border-left: 0; padding-left: 0; }
  body.kombi .tv-rahmen { margin-right: 0; }
  .pult { position: static; width: auto; height: 100dvh; border-left: 0; border-top: 2px solid var(--tinte); }
  .beitritt { flex-direction: column; text-align: center; }
  .reise { min-width: 0; padding: 1em 1.2em; }
  .reise h2 { font-size: 2em; }
  .banner { white-space: normal; font-size: 1.05em; }
  .karte-wrap { grid-template-rows: minmax(0, 1fr) auto; }
}

/* Sprache + Volltreffer */
.kopf .sprachwahl { align-self: center; font-size: .8em; }
.eingang-sprache { position: absolute; top: 1em; right: 1.2em; }
.bullseye { font-family: var(--titel); font-style: normal; color: var(--rot); margin-right: .3em; }