/* Erzeugt von skripte/lotse-einbetten.mjs — nicht von Hand aendern. */
/* ❗ Erzeugt von skripte/lotse-einbetten.mjs — der Block dazwischen auch.
   Von Hand geändert läuft es beim nächsten Lauf auseinander. */
.lotse { margin: 2rem auto; max-width: 22rem; }
.lotse__rahmen {
border: 10px solid var(--lotse-rahmen, #1b1f24);
border-radius: 2.2rem;
overflow: hidden;
background: #0b0e11;
box-shadow: 0 1.5rem 3rem rgba(0,0,0,.35);
}
.lotse__leiste {
display: flex; justify-content: space-between;
padding: .35rem .9rem;
font: 600 .72rem/1.4 system-ui, sans-serif;
color: #cbd5e1; background: #11161c;
}
/* ❗ 34rem, und das bleibt so. Am 13.08.2026 standen hier kurz 42rem, weil
   Aarons „wirkt von der Hoehe sehr, sehr klein, gerade auf dem PC" auf
   diese Stelle gelesen wurde. Seine Berichtigung eine Nachricht spaeter:
   „In erster Linie ging es mir um die Hoehe beim Grossaufmachen. Auf der
   Website war die Hoehe in Ordnung."

   Die Hoehe, um die es geht, steht weiter unten bei .lotse--gross

   ❗ Keine Backticks in diesem Block: Er steht in einem Template-String,
   und ein Backtick darin beendet ihn mitten im CSS. */
.lotse__fenster { display: block; width: 100%; height: 34rem; border: 0; background: #0b0e11; }
.lotse__bedienung {
display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
margin-top: .9rem;
}
.lotse__knopf {
border: 1px solid var(--lotse-kante, #cbd5e1);
border-radius: .8rem; padding: .55rem 1.1rem;
font: 600 .95rem/1 inherit; cursor: pointer;
background: transparent; color: inherit;
min-height: 44px;   /* dieselbe Untergrenze wie in der Anwendung */
}
.lotse__hinweis { font-size: .85rem; opacity: .75; }
/* ❗❗ Heller Kreis mit dunklem Zeichen — und das ist eine Reparatur.
   Aaron am 13.08.2026: „es fehlt ein x, um aus dem Grossaufmachen wieder
   rauszukommen. zumindest auf der Desktop-Variante."

   Das X war da. Es stand nur auf `rgba(0,0,0,.55)` mitten auf einem Overlay
   von `rgba(8,11,15,.92)` — ein fast schwarzer Kreis auf fast schwarzem
   Grund, Kontrast rund 1,2 : 1. Wer ihn nicht sucht, sieht ihn nicht, und wer
   ihn nicht sieht, sitzt im Vollbild fest.

   ❗ Der Fall zeigt, was eine Messung wert ist, die nur nachsieht, OB etwas
   da ist: Der erste Prüflauf meldete „X da" — sichtbar, im Bild, nicht
   `hidden`. Genau in diesem Zustand hat Aaron es nicht gefunden. Seither
   misst `lotse-hoehe-messen.mjs` auch den Kontrast. */
.lotse__zu {
position: absolute; top: 1rem; right: 1rem; z-index: 2;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(0,0,0,.25);
background: #f2f4f1; color: #14171c;
font-size: 1.35rem; line-height: 1; cursor: pointer;
box-shadow: 0 .35rem .9rem rgba(0,0,0,.5);
}
.lotse__zu:hover { background: #fff; }
.lotse__zu:focus-visible { outline: 3px solid #ffd400; outline-offset: 3px; }

/* ❗ Gross heisst: derselbe Rahmen, nur in der Bildmitte. Kein zweites
   Fenster, damit der Besucher dort weitermacht, wo er war. */
.lotse--gross {
position: fixed; inset: 0; z-index: 1000;
margin: 0; max-width: none;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 1rem; padding: 1.5rem;
background: rgba(8, 11, 15, .92);
}
/* ❗❗ **Gross aufgemacht war die Nachbildung KLEINER als in der Seite.**
   Gemessen am 13.08.2026 auf 1920x1080: in der Seite 332 x 544 px, gross
   396 x 480 px — der Knopf heisst „Gross aufmachen" und machte sie um
   64 px flacher. Aaron: „In erster Linie ging es mir um die Hoehe beim
   Grossaufmachen."

   Die Ursache steckte in einer Zeile: Der Rahmen hatte `max-height`, aber
   keine `height`. In einem Flex-Container ohne gesetzte Hoehe schrumpft er
   auf seinen Inhalt, und das war die `min-height: 30rem` des Fensters —
   exakt die gemessenen 480 px. Ein Deckel sagt, wie hoch etwas werden
   DARF; er sagt nicht, dass es das soll.

   Jetzt nimmt der Rahmen, was da ist — gedeckelt durch zweierlei:
   die Ansichtshoehe minus Platz fuer Knopf und Hinweis, und das
   Seitenverhaeltnis eines Telefons (2,1 : 1). Ohne den zweiten Deckel
   waere die Nachbildung auf einem hohen Bildschirm ein Streifen. */
.lotse--gross .lotse__rahmen {
width: min(26rem, 100%);
height: min(calc(100vh - 8rem), calc(min(26rem, 100%) * 2.1));
display: flex; flex-direction: column;
}
.lotse--gross .lotse__fenster { flex: 1; height: auto; min-height: 0; }
.lotse--gross .lotse__hinweis { color: #e2e8f0; }
.lotse--gross .lotse__knopf { color: #e2e8f0; border-color: rgba(255,255,255,.4); }

@media (max-width: 30rem) {
.lotse--gross { padding: .5rem; }
.lotse--gross .lotse__rahmen { max-height: calc(100vh - 6rem); }
}