/* Oswald (SIL OFL, app/fonts/OFL.txt) wird mitgeliefert und liegt im Offline-
   Speicher: eine schmale, plakative Grotesk — von Oskar am 16.9. ausgesucht.
   Eine Datei, Gewichte 200 bis 700. Nichts wird nachgeladen, nichts fehlt
   auf einem fremden Gerät. */
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

/* TE-Look (Oskar, 16.9.: „passe die font / appearance der app … Teenage Engineering
   … Univers"). Univers selbst ist lizenzpflichtig und würde offline fehlen. Ihr naher
   Verwandte Oswald liegt als Datei bei (siehe oben), von ExtraLight bis Bold.
   Hellgrauer Grund wie
   ein Gehäuse, Tasten statt Rahmen, große Zahlen in UltraLight, kleine Beschriftungen
   in Medium mit Laufweite, eine Signalfarbe: das tunited-Grün. */
:root {
  color-scheme: light;
  --tinte: #0e0e0e;
  --papier: #ececea;
  --flaeche: #f7f7f5;
  --taste: #d9d9d4;
  --akzent: #1f5d3a;
  --linie: #c8c8c2;
  --grau: #6b6b66;
  --feld: #e2e2de;
  --schrift: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte);
       font: 400 18px/1.45 var(--schrift); letter-spacing: 0;
       font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
/* Eine Stufe größer als bis zum 1.10. (Oskar: „die UI kann noch etwas hochskaliert werden --
   wir haben noch platz zum boden, den disclaimer unten reicht es per scrollen zu erreichen"). */
main { max-width: 520px; margin: 0 auto; padding: 0 20px 72px; }

.kopf { display: flex; justify-content: space-between; align-items: center; height: 48px;
        border-bottom: 1px solid var(--linie); font-size: 11px; font-weight: 500; letter-spacing: .12em;
        text-transform: uppercase; }
.kopf .punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent);
               margin-right: 8px; vertical-align: 1px; }
.bildschirm { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.etikett { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
           margin: 12px 0 4px; }
/* Hier stand -4px, um die Beschriftung an Fließtext heranzuziehen. Vor allem, was die Luft
   der Zeilenhöhe nicht hat -- Knöpfe, Regler, Felder, Kacheln und .hinweis (margin: 0) --
   lag sie dadurch 4 px AUF dem Element (Oskar, 30.9.: „button und text überlappen - darf
   generell nicht sein"). Jetzt positiv, und vor Bedienelementen etwas mehr. */
.etikett + .wahl, .etikett + .wahl-zwei, .etikett + .marken, .etikett + .leute-wahl,
.etikett + .regler, .etikett + .strahl, .etikett + .stand, .etikett + .geraete,
.etikett + .kategorien, .etikett + .ja-nein, .etikett + .zeile-feld,
.etikett + button, .etikett + input, .etikett + select, .etikett + textarea,
.etikett + a { margin-top: 10px; }

button, a.link {
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
  border: 0; border-radius: var(--radius); background: var(--taste); color: var(--tinte);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
  cursor: pointer; text-align: center; text-decoration: none; padding: 0 16px; min-height: 56px;
  display: flex; align-items: center; justify-content: center;
}
button:active, a.link:active { transform: translateY(1px); box-shadow: none; }
button:focus-visible, a.link:focus-visible, input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.gross { background: var(--tinte); color: var(--flaeche); min-height: 72px; font-size: 18px; }
.gross:disabled { background: var(--feld); color: var(--grau); box-shadow: none; cursor: default; }
.gross.laeuft { background: var(--akzent); }
.klein { min-height: 48px; font-size: 15px; }
.hinweis { color: var(--grau); font-size: 14px; min-height: 1.2em; margin: 0; }

video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #000; border-radius: var(--radius); }

.kategorie { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
             background: var(--flaeche); border-radius: var(--radius); padding: 16px; }
.kategorie span { font-size: 72px; font-weight: 200; line-height: 1; min-width: 88px; text-align: center;
                  border-right: 1px solid var(--linie); padding-right: 16px; letter-spacing: -.03em; }
.kategorie small { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }

#loesung { border-top: 1px solid var(--linie); padding-top: 14px; }
#loesung h2 { margin: 0 0 2px; font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
#loesung p { margin: 0; color: var(--grau); }
.jahr { font-size: 64px; font-weight: 200; color: var(--akzent) !important; margin: 8px 0 !important;
        letter-spacing: -.03em; line-height: 1; }
#loesung .monat { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
                  margin: -6px 0 6px; min-height: 0; }
#gaeste { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--linie); }
#gaeste li { padding: 9px 0; border-bottom: 1px solid var(--linie); display: flex;
             justify-content: space-between; align-items: baseline; }
#gaeste li .krone { color: var(--akzent); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

input[type="password"] { font: inherit; font-size: 20px; padding: 14px; border: 1px solid var(--linie);
                         border-radius: 8px; background: var(--flaeche); }
.geraete { display: flex; flex-direction: column; gap: 8px; }
.geraete button { justify-content: flex-start; text-align: left; font-weight: 400; }
.geraete button.gewaehlt { background: var(--akzent); color: var(--flaeche); }

/* ---- Partie ---- */
.block { display: flex; flex-direction: column; gap: 12px; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.eck { min-height: 30px; width: 30px; padding: 0; font-size: 14px; line-height: 1; border-radius: 8px; }
button.gewaehlt { background: var(--tinte); color: var(--flaeche); }
button:disabled { cursor: default; }

.stand { width: 100%; border-collapse: collapse; }
.stand td { padding: 10px 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.stand td.name { font-weight: 500; }
.stand td.name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
                         border: 1px solid var(--grau); vertical-align: 1px; }
.stand tr.zug td.name::before { background: var(--akzent); border-color: var(--akzent); }
.stand td.name small { color: var(--grau); font-weight: 400; font-size: 13px; margin-left: 8px; }
.stand td.token { color: var(--akzent); letter-spacing: 3px; font-size: 13px; width: 40px; }
.stand td.karten { color: var(--grau); font-size: 13px; text-align: right; width: 44px; }
.stand td.punkte { text-align: right; font-size: 32px; font-weight: 300; width: 64px; line-height: 1; letter-spacing: -.02em; }
.rueckfrage h2 { margin: 0 0 6px; font-size: 30px; font-weight: 300; line-height: 1.15; letter-spacing: -.02em; }
.rueckfrage .gross { margin-top: 18px; width: 100%; }
.rueckfrage .klein { margin-top: 10px; width: 100%; }
.gewinner h2 { margin: 0; font-size: 34px; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }

.spieler-zeile { display: grid; grid-template-columns: 1fr 118px 44px; gap: 8px; align-items: center; }
input[type="text"], input[type="tel"] { font: inherit; font-size: 17px; padding: 12px; min-width: 0; width: 100%;
                                        border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); }
.spieler-zeile .eck { width: 44px; min-height: 44px; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0;
         border-bottom: 1px solid var(--linie); font-size: 15px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; min-height: 40px; padding: 0; font-size: 20px; font-weight: 300; }
.stepper span { min-width: 36px; text-align: center; font-size: 22px; font-weight: 300; }
.wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.wahl button, .wahl a.link { flex: 1 1 40%; min-height: 44px; font-size: 14px; padding: 0 10px; }

.amzug { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
         font-size: 26px; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.kategorien { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kategorien button { flex-direction: column; gap: 8px; min-height: 88px; padding: 10px 6px; font-size: 11px;
                     font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.kategorien .pkt { font-size: 32px; font-weight: 200; color: var(--akzent); letter-spacing: -.02em; line-height: 1; text-transform: none; }
.kategorien button.gewaehlt .pkt { color: var(--flaeche); }
.gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gruppen button { flex-direction: column; gap: 2px; font-weight: 400; font-size: 15px; min-height: 64px;
                  padding: 10px 8px; line-height: 1.3; }
.urteil { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0;
          border-bottom: 1px solid var(--linie); font-size: 15px; }
.ja-nein { display: flex; gap: 6px; }
.ja-nein button { width: 52px; min-height: 44px; padding: 0; font-size: 20px; font-weight: 300; }
.ja-nein button.ja.gewaehlt { background: var(--akzent); }
#loesung .ergebnis { color: var(--tinte); font-size: 19px; font-weight: 500; margin: 4px 0 0; min-height: 1.3em; line-height: 1.3; }

/* ---- Transportfeld (app/spieler.js): Spotify wie ein Gerät bedienen ---- */
.spieler { display: grid; gap: 8px; }
.sp-feldgruppe { display: grid; gap: 8px; background: var(--flaeche); border-radius: var(--radius); padding: 14px; }
.sp-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sp-kopf .etikett { margin: 0; }
.sp-uhr { font-size: 15px; font-weight: 300; color: var(--grau); font-variant-numeric: tabular-nums; }
.sp-balken { position: relative; height: 56px; border-radius: 10px; background: var(--feld); overflow: visible; touch-action: none;
             cursor: pointer; touch-action: manipulation; }
.sp-fuell { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--taste); border-radius: 10px 0 0 10px; }
.spieler.laeuft .sp-fuell { background: var(--akzent); }
.sp-marke { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--paar, #b5533c); }
.sp-marke::after { content: "★"; position: absolute; top: -1px; left: 5px; font-size: 11px; line-height: 1; color: var(--paar, #b5533c); }
.sp-griff { position: absolute; top: 6px; bottom: 6px; width: 16px; margin-left: -8px; border-radius: 8px; background: var(--tinte);
            box-shadow: 0 0 0 2px var(--papier); pointer-events: none; }
.sp-blase { position: absolute; top: -34px; transform: translateX(-50%); background: var(--tinte); color: var(--papier);
            font-size: 14px; font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.spieler:not(.einfach) .sp-uhr { display: none; }   /* Nadel: keine Zeitangabe, der Balken sagt es (Oskar, 18.9.) */
.spieler.einfach .sp-griff, .spieler.einfach .sp-blase { display: none; }
.sp-cuereihe { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.sp-blende { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--grau); white-space: nowrap; }
.sp-blendefeld { width: 46px; font: inherit; font-size: 15px; text-align: center; padding: 6px 4px;
                 border: 1px solid var(--linie); border-radius: 6px; background: var(--papier); font-variant-numeric: tabular-nums; }
.sp-cuefeld { font: inherit; font-size: 22px; font-weight: 300; text-align: center; padding: 10px;
              border: 1px solid var(--linie); border-radius: 8px; background: var(--papier);
              font-variant-numeric: tabular-nums; width: 100%; }
.sp-cuefeld.eigen { border-color: var(--akzent); color: var(--akzent); }
.sp-feldgruppe .zeile { border-bottom: 0; padding: 0; font-size: 14px; }

.sp-laut { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.sp-laut-etikett { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.sp-laut input[type="range"] { width: 100%; accent-color: var(--akzent); }
.sp-laut b { font-weight: 400; color: var(--grau); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

/* Das Transportfeld im Kartenspiel (spieler.js, einfach): Balken mit dicker
   Marke, Start/Pause und Stop nebeneinander -- Cue, Länge, Lautstärke, Gerät
   bleiben dem Nadelspiel (Oskar, 18.9.: „etwas überladen"). */
.sp-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sp-reihe button { min-height: 54px; font-size: 14px; padding: 0 6px; }
@media (max-width: 520px) { .sp-reihe { grid-template-columns: repeat(3, 1fr); } }
.sp-seit { font-size: 13px; color: var(--grau); font-variant-numeric: tabular-nums; margin-left: auto; }
.spieler.einfach .sp-reihe { grid-template-columns: 1fr 1fr; }
.spieler.einfach [data-sp="play"], .spieler.einfach [data-sp="cue-hier"], .spieler.einfach [data-sp="ausblenden"], .spieler.einfach .sp-laut,
.spieler.einfach .sp-cuereihe, .spieler.einfach .sp-marke, .spieler.einfach .geraete, .spieler.einfach .sp-seit { display: none; }
.spieler.einfach .sp-balken { height: 46px; }
.spieler.einfach .sp-fuell { border-right: 6px solid var(--tinte); }

/* Karten, die nach dem Druck neue Namen bekommen haben (Oskar, 20.9.) */
.nachtrag { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
            background: var(--gelbfeld, #fdf1e3); border: 1px solid var(--akzent); }

/* Metadaten: die Punktwolke der Menschen, eingeklappt (Oskar, 22.9.). Nur hier im Kartenspiel --
   die Leitung hat ihre eigene, mit Gruppen und Plan. */
/* Tafel: ein beschriftetes Feld wie auf einem Gerät -- Rahmen, die Beschriftung in die
   obere Kante eingelassen, darin genau eine Sache und ihr Knopf. Ersetzt die Reihe
   loser Knöpfe am Seitenfuß (Oskar, 30.9.). */
.tafel { position: relative; display: grid; gap: 12px; margin: 22px 0; padding: 22px 14px 14px;
         border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.tafel > .marke { position: absolute; top: -8px; left: 12px; padding: 1px 7px;
                  background: var(--papier); border-radius: 999px;
                  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
                  color: var(--grau); }
.tafel > .hinweis { margin: 0; }
.tafel > .etikett { margin: 0; }
.tafel .gross { min-height: 60px; }
.tafel-deck b { font-size: 30px; font-weight: 300; letter-spacing: -.02em; }

/* Das Infofenster der Wolke. */
.wolke-info { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
              padding: 12px 14px; margin: 10px 0 0; display: grid; gap: 8px; }
.wolke-info-kopf { display: flex; align-items: center; gap: 10px; }
.wolke-info-kopf b { font-size: 17px; font-weight: 500; display: block; }
.wolke-info-kopf small { font-size: 12px; color: var(--grau); }
.wolke-info .etikett { margin: 2px 0 0; }
.wolke-nah { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wolke-nah li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
                font-size: 14px; }
.wolke-nah small { font-size: 11px; color: var(--grau); }
/* Linien zu den Nachbarn, hinter den Punkten. */
.meta-wolke line.naehe { stroke: var(--tinte); stroke-width: .35; opacity: .35; }
/* Der Ring um das Brautpaar. */
.meta-wolke circle.ring-aussen { stroke: var(--tinte); stroke-width: .45; opacity: .55; }
/* Kein Textmarkieren: sonst bietet das Handy beim Antippen „mit Google suchen" an. */
.meta-wolke { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
              touch-action: none; }
.meta-wolke text { pointer-events: auto; }

.fuss-rechts { display: flex; align-items: center; gap: 12px; }
.fuss a, .rechtliches a { color: var(--grau); font-size: 12px; letter-spacing: .06em; text-decoration: none;
                          border-bottom: 1px solid var(--linie); }
.rechtliches { margin-top: 14px; text-align: center; }
.meta { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 12px; }
/* Die Schatzkarte (app/karte.js): Nebel über allem, die Nachbarn der entdeckten Zellen etwas
   heller, entdeckte in ihrer Genre-Farbe. Die Korngrenzen bleiben überall sichtbar -- das
   ist das Kristallgefüge, auch unter der Wolke. */
.schatz-karte { display: block; width: 100%; aspect-ratio: 10 / 7; background: var(--feld);
                border-radius: var(--radius); touch-action: none; cursor: grab;
                -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.schatz-karte.zieht { cursor: grabbing; }
.schatz-karte .nebel { fill: var(--tinte); opacity: .07; }
.schatz-karte .nah { fill: var(--akzent); opacity: .22; }
.schatz-karte .kanten { fill: none; stroke: var(--flaeche); stroke-width: .18; opacity: .9; }
.schatz-karte .frei { stroke: var(--flaeche); stroke-width: .3; cursor: pointer; }
.schatz-karte .frei.gewaehlt { stroke: var(--tinte); stroke-width: .7; }
.wolke-info-kopf .fleck { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
.meta summary { cursor: pointer; list-style: none; padding: 6px 0; }
.meta summary::-webkit-details-marker { display: none; }
.meta summary::after { content: " ▾"; }
.meta[open] summary::after { content: " ▴"; }
.meta summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.meta-werkzeug { display: flex; gap: 6px; margin: 10px 0 8px; }
.meta-werkzeug button { min-width: 44px; }
.meta-wolke { width: 100%; aspect-ratio: 1; display: block; background: #fff;
              border: 1px solid var(--linie); border-radius: var(--radius); touch-action: none; cursor: grab; }
.meta-wolke.zieht { cursor: grabbing; }
.meta-wolke circle { stroke: transparent; stroke-width: .5; }
.meta-wolke circle.gewaehlt { stroke: var(--tinte); }
.meta-wolke text { font-size: 2.4px; fill: var(--tinte); }   /* in viewBox-Einheiten, zoomt also mit */
.meta-wolke text.gewaehlt { font-weight: 700; }
/* Legende wie in einer Karte: Marker links, kurze Erklärung rechts (Oskar, 23.9.). */
.meta-legende { margin-top: 10px; color: var(--grau); font-size: 12px; display: grid; gap: 4px; }
.meta-legende .leg-kopf { margin: 0 0 2px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.meta-legende .leg-zeile { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: center; }
.meta-legende b { color: var(--tinte); font-weight: 500; }
.meta-legende .leg-marke { color: var(--grau); display: block; }
.meta-legende .leg-farben { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.meta-legende .leg-farben i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }