/* TaxiQuit App-Demo — Bühne auf der Gastseite.
   Nur Telefonrahmen, Bildunterschrift und die Farb-Variablen des Displays.
   Alles im Inneren steht in sim.css und wird ausschließlich im Schatten-Baum
   geladen (siehe sim.js). Früher lag beides in einer Datei auf der Seite —
   dadurch griffen .btn und .disc der Simulation auf Seitenelemente über. */

.sim-stage{display:flex;flex-direction:column;align-items:center;margin-top:44px}

/* Feste Größe: das Telefon darf NIE mitwachsen — gescrollt wird innen.
   Die Höhe folgt dem echten iPhone-Display (720×1561 wie die Screenshots):
   Die 2,34 px ziehen den 1-px-Rand heraus, der sonst das Verhältnis kippt.
   Rahmen und Radien sind Anteile der Breite, damit die schmale Fassung auf
   kleinen Handys dieselbe Form behält. */
.sim-phone{--pw:304px;width:var(--pw);height:calc(var(--pw)*2.09876 - 2.34px);flex:0 0 auto;
  background:#000;border:1px solid #2c2b29;border-radius:calc(var(--pw)*.1316);
  padding:calc(var(--pw)*.0296);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);position:relative}
/* Dynamic Island und Home-Indikator wie bei den Screenshot-Rahmen auf der
   Startseite. Sie hängen am Rahmen, nicht am Display: Das Display ist der
   Wirt des Schatten-Baums, dessen ::before wird nicht gezeichnet. */
.sim-phone::before{content:"";position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  top:calc(var(--pw)*.0564 + 1px);width:calc(var(--pw)*.299);height:calc(var(--pw)*.0878);
  background:#000;border-radius:calc(var(--pw)*.0439)}
.sim-phone::after{content:"";position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:calc(var(--pw)*.0486 + 1px);width:calc(var(--pw)*.333);height:calc(var(--pw)*.012);
  background:rgba(0,0,0,.3);border-radius:99px}
@media(max-width:360px){.sim-phone{--pw:272px}}

/* Display = Wirt des Schatten-Baums. Die Variablen vererben sich hinein. */
.sim-screen{--a-bg:#F5F5F5;--a-sf:#FFFFFF;--a-sfa:#EFEFEF;--a-tx:#1A1A1A;--a-t2:#5C5C5C;--a-tm:#8A8A8A;
  --a-bd:#E4E4E4;--a-pr:#FFC107;--a-soft:#FFF3CD;--a-info:#1A4FA0;--a-infobg:#E7F0FE;
  --a-ok:#1E8E3E;--a-okbg:#E6F4EA;--a-err:#B3261E;--a-errbg:#F9DEDC;
  position:relative;width:100%;height:100%;min-height:0;border-radius:calc(var(--pw)*.102);overflow:hidden;
  background:var(--a-bg);color:var(--a-tx);display:flex;flex-direction:column;
  font-family:var(--sans);font-size:12px;line-height:1.4}

/* Bildunterschrift unter dem Telefon */
/* Bildunterschrift: immer einzeilig – Schrift skaliert mit der Breite */
.sim-cap{font-family:var(--mono);font-size:clamp(.64rem,2.45vw,.83rem);color:var(--ink2);
  margin-top:22px;text-align:center;white-space:nowrap;max-width:100%}
/* Der Hinweis darf umbrechen — anders als die Bildunterschrift, die bewusst
   einzeilig bleibt. Auf 320-px-Handys lief er sonst über den Rand. */
.sim-note{font-size:clamp(.66rem,2.2vw,.76rem);color:var(--ink3);margin-top:9px;text-align:center;
  max-width:100%;text-wrap:balance}
.sim-fallback{display:none}