/*
 * 045 §3 — Übergangsseite zwischen Intro und Spiel.
 *
 * Die Endkarte des Films ist die Kulisse; darüber liegt ein echter Knopf. Bewusst sparsam:
 * das Bild trägt die Stimmung, die Oberfläche fügt nur das hinzu, was klickbar sein muss.
 */

.startkarte {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070a;
  overflow: hidden;
}
.startkarte[hidden] { display: none; }

/* `contain`, damit die Endkarte nie beschnitten wird — sie ist eine Komposition, kein Muster. */
.startkarte-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/**
 * 049 §17 — PRINZIP X STEHT UEBER DEM SCHRIFTZUG UND GEHOERT ZU IHM.
 *
 * Der Schriftzug „OVI INVASION" ist Teil der Endkarte und beginnt bei 13 % der Hoehe
 * (gemessen). Die Markenzeile sitzt darueber bei rund 6 % — nah genug, dass beides als
 * EIN Titel gelesen wird, weit genug, dass nichts ueberlappt.
 *
 * Gross genug, um Titel zu sein: vorher 0,72–0,9 rem als Etikett, jetzt bis 1,5 rem mit
 * weitem Sperrsatz — die uebliche Schreibweise einer Reihenzeile ueber einem Logo.
 */
.startkarte-marke {
  position: absolute;
  top: 6%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.startkarte-marke-text {
  font-size: clamp(0.95rem, 1.9vh, 1.5rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;              /* gleicht den Sperrsatz rechts aus, damit es mittig steht */
  color: #cfeaff;
  text-shadow: 0 0 18px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .95);
  font-weight: 500;
}

/**
 * 049 §20 — der Knopf steht frei, nicht in einem Kasten.
 *
 * Unter dem Schriftzug ist die Endkarte sehr dunkel (mittlere Helligkeit 18 von 255,
 * gemessen ueber 62–92 % der Hoehe). Ein Schleier ist dort schlicht ueberfluessig — er
 * hat nur den Hintergrund zugedeckt und die Seite wie ein Formular aussehen lassen.
 */
.startkarte-unten {
  position: absolute;
  top: 66%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 20px);
}

.startkarte-knopf {
  min-width: clamp(220px, 26vw, 340px);
  min-height: 60px;                       /* großzügig für Tablet */
  padding: 0.7em 1.6em;
  font-size: clamp(1.05rem, 2.4vh, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #eaf6ff;
  background: linear-gradient(180deg, rgba(32, 68, 92, 0.96), rgba(14, 30, 44, 0.96));
  border: 1px solid #7fd0ff;
  border-radius: 4px;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, transform 90ms ease;
}
.startkarte-knopf:hover {
  background: linear-gradient(180deg, rgba(46, 96, 126, 0.98), rgba(20, 42, 60, 0.98));
  border-color: #b6e6ff;
}
.startkarte-knopf:focus-visible { outline: 3px solid #b6e6ff; outline-offset: 3px; }
.startkarte-knopf:active { transform: translateY(1px); }

.startkarte-fuss {
  margin: 0;
  font-size: clamp(0.7rem, 1.3vh, 0.86rem);
  letter-spacing: 0.14em;
  color: #9dbacd;
}

@media (max-width: 820px) {
  .startkarte-knopf { min-width: min(86vw, 320px); }
}

/* ==========================================================================
 * 045 §18 — Zeitvorlauf-Sammeldialog.
 * Ein Fenster, drei Abschnitte. Farbe trägt die Bedeutung: rot = blockiert,
 * gelb = Empfehlung, grün = erledigt — zusätzlich zur Überschrift, damit es
 * nicht allein an der Farbe hängt.
 * ========================================================================== */

.zvd {
  position: fixed; inset: 0; z-index: 135;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vh, 32px);
  background: rgba(4, 8, 12, 0.82);
  overflow-y: auto;
}
.zvd[hidden] { display: none; }

.zvd-karte {
  width: min(720px, 100%);
  display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 18px);
  padding: clamp(16px, 2.6vh, 28px);
  background: linear-gradient(180deg, rgba(18, 32, 44, 0.98), rgba(10, 18, 26, 0.98));
  border: 1px solid rgba(111, 180, 216, 0.34);
  border-radius: 6px;
  color: #cfe3f2;
}

.zvd-marke { font-size: .74rem; letter-spacing: .24em; color: #6fb4d8; }
.zvd-kopf h2 { margin: .2em 0 0; font-size: clamp(1.2rem, 2.6vh, 1.6rem); letter-spacing: .05em; color: #eaf6ff; }

.zvd-block { border-left: 3px solid; padding-left: .8em; }
.zvd-block--hart   { border-color: #e0664f; }
.zvd-block--weich  { border-color: #d8b45a; }
.zvd-block--fertig { border-color: #6fae7c; opacity: .78; }

.zvd-block-titel { margin: 0 0 .35em; font-size: .78rem; letter-spacing: .2em; color: #9dbacd; }

.zvd-zeile {
  display: flex; align-items: center; gap: .8em;
  justify-content: space-between;
  padding: .35em 0;
  font-size: .95rem; line-height: 1.4;
}
.zvd-punkt { flex: 1 1 auto; }

.zvd-sprung {
  flex: 0 0 auto;
  min-height: 44px; min-width: 132px;      /* Tablet-taugliches Ziel */
  padding: .45em 1em;
  font-size: .88rem; letter-spacing: .06em;
  color: #eaf6ff;
  background: rgba(32, 68, 92, .92);
  border: 1px solid rgba(127, 208, 255, .5);
  border-radius: 3px; cursor: pointer;
}
.zvd-sprung:hover { background: rgba(46, 96, 126, .96); border-color: #b6e6ff; }
.zvd-sprung:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }

.zvd-fuss { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.zvd-fuss .kz-btn { min-height: 44px; min-width: 140px; }
.zvd-sperre { font-size: .86rem; color: #e0a08f; }

@media (max-width: 700px) {
  .zvd-zeile { flex-direction: column; align-items: flex-start; }
  .zvd-sprung { width: 100%; }
}

/*
 * ⚠️ DIE FUSSKNÖPFE DES ZEITVORLAUF-FENSTERS WAREN UNGESTALTET.
 *
 * Sie tragen die Klasse `kz-btn`, wie überall sonst im Spiel. Die zugehörigen Regeln stehen
 * aber unter `#scene-base .kz-btn` (kellerzentrale.css) — und dieses Fenster hängt bewusst
 * AUSSERHALB von `#scene-base`, damit es über jeder Szene liegen kann. Ergebnis: die Knöpfe
 * fielen auf die Browser-Standardgestaltung zurück.
 *
 * Gemessen: Hintergrund `rgb(107,107,107)` — das ist Chromes graues Standardgrau, in einem
 * ansonsten petrol-cyanen Terminal. Beide Knöpfe sahen zudem gleich aus, obwohl einer nur
 * zurückgeht und der andere die Handlung ausführt: die Gewichtung war schlicht nicht da.
 *
 * Statt `#scene-base` aufzuweichen (das würde die Kapselung der Szene aufheben) werden die
 * Knöpfe hier gestaltet — dort, wo auch der Rest des Fensters steht.
 */
.zvd .kz-btn {
  min-height: 44px;
  min-width: 140px;
  padding: .55em 1.3em;
  font: inherit;
  font-weight: 500;
  letter-spacing: .08em;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(16, 34, 44, .92), rgba(9, 18, 26, .92));
  border: 1px solid rgba(111, 180, 216, .38);
  border-radius: 0;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.zvd .kz-btn:hover { background: linear-gradient(180deg, rgba(26, 50, 64, .96), rgba(14, 28, 38, .96)); border-color: rgba(150, 210, 240, .6); }
.zvd .kz-btn:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }

/* Die Handlung, um die es geht, trägt den Akzent — „Zurück" bleibt ruhig. */
.zvd .kz-btn--primary {
  color: #eaf6ff;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(32, 68, 92, .96), rgba(14, 30, 44, .96));
  border-color: #7fd0ff;
}
.zvd .kz-btn--primary:hover {
  background: linear-gradient(180deg, rgba(46, 96, 126, .98), rgba(20, 42, 60, .98));
  border-color: #b6e6ff;
}