/* ==========================================================================
   Agency Phone / Agency Pad, Landingpage-Schicht
   --------------------------------------------------------------------------
   Setzt auf /assets/tokens.css auf (dieselbe Datei wie agencyg.de). Hier steht
   ausschliesslich das, was die Landingpage zusaetzlich braucht: Kopfleiste,
   Startbereich, Abschnitte, Karten, Galerie, Demobereich, Fusszeile.

   Regeln fuer diese Datei:
   - keine eigenen Farben, Groessen oder Abstaende, nur die Tokens
   - keine !important ausser gegen Fremd-CSS des NUI (dort kommentiert)
   - alles fliesst; keine festen Breiten ausser der Demobuehne
   ========================================================================== */

/* --- Grundlage ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* tokens.css setzt am Wurzelelement nur `overflow-x: clip`. Steht die andere
   Achse dann auf `visible`, macht der Browser aus beiden `clip`: die Seite
   liesse sich nicht mehr scrollen. Beide Achsen werden deshalb benannt. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  font-weight: var(--fw-body);
  overflow-x: hidden;           /* Sicherung: nie horizontal scrollen */
}

/* Die Oberflaeche aus dem Spiel bringt `body{overflow:hidden}` mit, weil im
   Spiel nichts scrollen darf. Auf der Seite wuerde damit unterhalb des ersten
   Bildschirms nichts mehr erreichbar sein. Diese Datei wird nach dem Spiel-CSS
   geladen, das !important ist trotzdem noetig: die Regel dort steht ungelayert. */
@media (min-width: 768px) {
  body { overflow-y: auto !important; overflow-x: hidden !important; block-size: auto !important; }
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--brand-text); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Anker landen unter der festen Kopfleiste */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }

.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: -100px;
  z-index: 200; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  font-size: var(--fs-2); font-weight: var(--fw-head); text-decoration: none;
}
.skip-link:focus { inset-block-start: var(--sp-4); }

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Kopfleiste --------------------------------------------------------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  /* Die Oberflaeche der Demo bringt z-index 1000 mit. Die Kopfleiste muss
     darueber liegen, sonst schneidet das Geraet die Navigation ab. */
  z-index: 1200;
  transition: transform .25s ease, opacity .25s ease;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-block-end: 1px solid var(--line);
}
/* Masse nachgemessen an agencyg.de: 64px hoch, randlos ueber die volle Breite,
   32px Seitenabstand, Zeichen 40px. Die Kopfleiste sitzt dort nicht in der
   1200px-Spalte, sondern am Rand des Fensters. */
.site-header .wrap {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
}
.site-header-inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-block-size: 0;
  padding-block: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand img { inline-size: 40px; block-size: 40px; border-radius: var(--r-2); }
.brand-name {
  font-size: var(--fs-4); font-weight: var(--fw-max);
  letter-spacing: -0.01em; color: var(--tx); white-space: nowrap;
}
.brand-name b { color: var(--brand-text); font-weight: inherit; }

.site-nav { display: none; align-items: center; gap: 2px; margin-inline-start: auto; }
.site-nav a {
  display: inline-flex; align-items: center; block-size: var(--btn-h-sm);
  padding-inline: var(--sp-3); border-radius: var(--r-2);
  font-size: var(--fs-2); font-weight: var(--fw-ui); line-height: var(--lh-2);
  color: var(--tx-2); text-decoration: none; white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.site-nav a:hover { color: var(--tx); background: var(--surface-2); }
.site-nav a[aria-current="true"] { color: var(--tx); background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
/* tokens.css gibt jedem Knopf einen Abstand nach oben, gedacht fuer Knopfreihen
   im Fliesstext. In der Kopfleiste schiebt er den Kaufknopf 32px nach unten und
   macht die Leiste dadurch fast doppelt so hoch. */
.site-header .header-actions > .btn { margin: 0; }
.site-nav ~ .header-actions { margin-inline-start: 0; }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  block-size: var(--btn-h-sm); min-inline-size: var(--btn-h-sm); padding-inline: var(--sp-2);
  background: transparent; color: var(--tx-2);
  border: 1px solid var(--line); border-radius: var(--r-2);
  font-size: var(--fs-2); font-weight: var(--fw-ui); font-family: inherit;
  cursor: pointer; position: relative;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.icon-button:hover { color: var(--tx); border-color: var(--line-2); background: var(--surface-2); }

/* In der Demo tritt die Kopfleiste zurueck: das Geraet soll dort ungestoert
   stehen. Sie kommt zurueck, sobald der Abschnitt verlassen wird, und sofort
   bei Tastaturbedienung. */
body.demo-fokus .site-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
body.demo-fokus .site-header:focus-within {
  transform: none; opacity: 1; pointer-events: auto;
}

/* Sprachmenue, wird von landing-i18n.js befuellt */
.lang-wrap { position: relative; }
.lang-menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  min-inline-size: 176px; max-block-size: 60vh; overflow-y: auto;
  padding: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-3); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 2px; z-index: 120;
}
/* Das Uebersetzungsskript oeffnet das Menue ausschliesslich ueber das
   hidden-Attribut. Eine zusaetzliche Klassenbedingung hier hat es dauerhaft
   geschlossen gehalten. */
.lang-menu[hidden] { display: none; }
.lang-menu button, .lang-menu a {
  display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: 36px; padding-inline: var(--sp-3);
  background: transparent; border: 0; border-radius: var(--r-2);
  font: inherit; font-size: var(--fs-2); font-weight: var(--fw-ui);
  color: var(--tx-2); text-align: start; text-decoration: none; cursor: pointer;
}
.lang-menu button:hover, .lang-menu a:hover { background: var(--surface-2); color: var(--tx); }
.lang-menu button[aria-current="true"] { color: var(--brand-text); }

/* Klappmenue fuer schmale Fenster */
.burger { display: inline-flex; }
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  padding: var(--sp-5) 0 var(--sp-8);
  background: var(--bg); overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-nav a {
  display: flex; align-items: center; min-block-size: var(--tap-min);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2);
  font-size: var(--fs-4); font-weight: var(--fw-ui);
  color: var(--tx); text-decoration: none;
}
.mobile-nav a:hover { background: var(--surface-2); }
.mobile-nav .btn { margin: var(--sp-4) var(--sp-4) 0; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}

/* Auf schmalen Geraeten passt der Kaufknopf nicht neben Marke, Sprache, Design
   und Klappknopf. Er stand rechts ueber dem Rand und schob den Klappknopf aus
   dem Bild. Er steht weiterhin im Klappmenue und im Startbereich. */
@media (max-width: 620px) {
  .site-header-inner { gap: var(--sp-2); flex-wrap: nowrap; }
  .site-header .header-actions > .btn { display: none; }
  .brand { min-inline-size: 0; }
  .brand img { inline-size: 32px; block-size: 32px; }
  .brand-name { font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; }
}

/* --- Startbereich ------------------------------------------------------- */
.hero {
  padding-block-start: calc(var(--header-h) + var(--sp-7));
  padding-block-end: var(--section-y);
  background: linear-gradient(to bottom, var(--surface-2), var(--bg) 70%);
}
.hero-grid {
  display: grid; gap: var(--sp-7); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.hero h1 { margin-block: var(--sp-3) var(--sp-4); }
.hero h1 .accent { color: var(--brand-text); }
.hero-lead { color: var(--tx-2); max-inline-size: 46ch; }
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-block-start: var(--sp-5); color: var(--tx-3); font-size: var(--fs-2);
}
.price { font-size: var(--fs-5); font-weight: var(--fw-max); color: var(--tx); }
.hero-visual {
  border: 1px solid var(--line); border-radius: var(--r-4);
  background: var(--surface); padding: var(--sp-4);
}
.hero-visual img { display: block; inline-size: 100%; border-radius: var(--r-3); }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-8); }
}

/* tokens.css presst auf schmalen Geraeten jeden Abschnitt mit !important auf
   ein kleineres Mass. Fuer den Startbereich ist das falsch: dort muss oben die
   Hoehe der festen Kopfleiste frei bleiben, sonst liegt die erste Zeile
   darunter. Nur diese eine Kante wird zurueckgeholt. */
@media (max-width: 767px) {
  .hero { padding-block-start: calc(var(--header-h) + var(--sp-5)) !important; }
}

/* --- Abschnitte --------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section + .section { border-block-start: 1px solid var(--line); }
.section-head { max-inline-size: 62ch; margin-block-end: var(--sp-6); }
.section-head .kicker { display: block; margin-block-end: var(--sp-2); }
.section-head p { color: var(--tx-2); margin-block-start: var(--sp-3); }

/* --- Karten ------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  transition: border-color .18s ease, background-color .18s ease;
}
.card h3 { margin-block-end: var(--sp-2); }
.card p { color: var(--tx-2); font-size: var(--fs-2); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px; margin-block-end: var(--sp-4);
  border-radius: var(--r-2); background: var(--brand-soft); color: var(--brand-text);
  font-size: var(--fs-4);
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card-hover:hover { border-color: var(--brand-line); background: var(--surface-2); }

.step-list { counter-reset: step; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.step-list li {
  counter-increment: step; position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-7) + var(--sp-2));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  color: var(--tx-2); font-size: var(--fs-2);
}
.step-list li::before {
  content: counter(step); position: absolute;
  inset-block-start: var(--sp-5); inset-inline-start: var(--sp-5);
  inline-size: 28px; block-size: 28px; display: grid; place-items: center;
  border-radius: var(--r-2); background: var(--brand-soft); color: var(--brand-text);
  font-size: var(--fs-1); font-weight: var(--fw-max); font-variant-numeric: tabular-nums;
}
.step-list strong { display: block; color: var(--tx); font-weight: var(--fw-head); margin-block-end: 2px; }

/* --- Galerie ------------------------------------------------------------ */
.gallery-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gallery-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  cursor: zoom-in; text-align: start; font: inherit; color: inherit;
  transition: border-color .18s ease;
}
.gallery-card:hover { border-color: var(--brand-line); }
.gallery-card-img {
  display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--surface-2); padding: var(--sp-3);
}
.gallery-card-caption { padding: var(--sp-4); border-block-start: 1px solid var(--line); }
.gallery-card-caption h3 { font-size: var(--fs-3); font-weight: var(--fw-head); line-height: var(--lh-2); }
.gallery-card-caption p { color: var(--tx-3); font-size: var(--fs-2); margin-block-start: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in oklab, #000 82%, transparent);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { max-inline-size: min(1100px, 100%); max-block-size: 100%; overflow: auto; text-align: center; }
.lightbox-figure img { max-block-size: 78vh; border-radius: var(--r-3); }
.lightbox-figure figcaption { margin-block-start: var(--sp-4); color: var(--tx-2); font-size: var(--fs-2); }
.lightbox-close { position: absolute; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); }

/* --- Video -------------------------------------------------------------- */
.video-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3);
  cursor: pointer; inline-size: 100%; padding: 0;
}
.video-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.video-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.video-play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  inline-size: 64px; block-size: 64px; display: grid; place-items: center;
  border-radius: var(--r-dot); background: var(--brand); color: var(--brand-ink);
  font-size: var(--fs-5); pointer-events: none;
}

/* --- Demobereich -------------------------------------------------------- */
/* Die Oberflaeche stammt aus dem Spiel und ist dort fest am Bildschirm
   verankert (position:fixed, unten rechts). Auf einer Seite, durch die man
   scrollt, wandert sie damit ueber alles hinweg mit. Sie bekommt deshalb hier
   einen Bezugsrahmen und bleibt in ihrem Abschnitt stehen. */
#phone-showcase { position: relative; }
.demo-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  justify-content: center;
}
/* Eigener Stapelkontext: alles, was die Demo an z-index mitbringt, bleibt
   dadurch unter der Kopfleiste. */
#phone-mount { display: flex; justify-content: center; inline-size: 100%; position: relative; z-index: 0; }
#phone-mount iframe {
  max-inline-size: none;
  /* Der eingebettete Rahmen setzt seinen Hintergrund per Inline-Stil auf
     durchsichtig. Ein durchsichtiger Rahmen zeigt aber nicht die Seite
     dahinter, sondern die weisse Grundflaeche des Browsers. Im dunklen Modus
     stand deshalb ein weisses Feld um das Tablet. */
  background: var(--bg) !important;
}
.demo-note { color: var(--tx-3); font-size: var(--fs-2); text-align: center; }

@media (min-width: 768px) {
  /* Die Oberflaeche bringt fuer diesen Fall bereits alles mit: sie setzt sich
     auf 50/50 und zentriert sich per transform. Ihr fehlt nur ein Rahmen, auf
     den sie sich beziehen kann. Ohne ihn bezieht sie sich auf den Bildschirm
     und wandert beim Scrollen mit. Die Bedienknoepfe liegen als inset:0 im
     selben Rahmen und sitzen dadurch automatisch an den richtigen Kanten. */
  .phone-wrapper {
    position: relative;
    z-index: 1100;
    inline-size: 100%;
    block-size: min(100vh, 940px);
    min-block-size: 720px;
    display: flex; align-items: center; justify-content: center;
  }
  /* Die Oberflaeche bringt fuer diesen Fall alles mit: sie setzt sich auf 50/50
     und zentriert sich per transform. Ihr fehlt nur ein Rahmen, auf den sie
     sich beziehen kann, sonst bezieht sie sich auf den Bildschirm und wandert
     beim Scrollen mit. Mehr wird hier bewusst nicht angefasst: das Oeffnen und
     Schliessen des Geraets laeuft ueber dieselbe transform-Eigenschaft. */
  body.web-demo #phone-container { position: absolute !important; }
  /* Der Einblend-Uebergang des Geraets bleibt auf dieser Seite haengen und
     haelt den geschlossenen Zwischenwert fest. Ohne Uebergang steht das Geraet
     sofort mittig in seinem Rahmen. */
  /* Auch der Einrichtungsassistent wird eingeblendet und bleibt sonst auf dem
     Zwischenwert stehen. Auf der Seite gibt es keinen Grund fuer die Blende. */
  body.web-demo #setup-overlay { transition: none !important; }
  body.web-demo #setup-overlay.visible { opacity: 1 !important; pointer-events: auto !important; }
  body.web-demo #phone-container.visible {
    transform: translate3d(-50%, -50%, 0) scale(var(--phone-scale, 0.88)) !important;
    transition: none !important;
  }
  .demo-stage { min-block-size: 0; }
}

/* Unter 768px laeuft die Demo nicht. Alles, was dazu gehoert, bleibt aus, damit
   nichts halb geladen im Weg steht. */
@media (max-width: 767px) {
  #phone-mount, .phone-wrapper, #phone-container, .phone-demo-controls,
  #demo-controls, #demo-power-btn, #demo-buy-btn, #demo-reset-btn,
  #demo-config-btn, #demo-config-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .demo-stage { min-block-size: 0; }
}

.demo-fallback {
  display: grid; gap: var(--sp-5); justify-items: center; text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
}
.demo-fallback img { max-inline-size: 260px; border-radius: var(--r-3); }
.demo-fallback p { color: var(--tx-2); max-inline-size: 42ch; }
@media (min-width: 768px) { .demo-fallback { display: none; } }
@media (max-width: 767px) { .demo-stage { min-block-size: 0; } }

/* Die von der Demo erzeugten Bedienknoepfe folgen der Knopfkomponente. */
#demo-controls, .demo-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
#demo-reset-btn, #demo-buy-btn, #demo-config-btn, #demo-sound-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  block-size: var(--btn-h-md); padding-inline: var(--btn-pad-md);
  font-family: inherit; font-size: var(--fs-2); font-weight: var(--fw-head);
  border-radius: var(--r-2); border: 1px solid var(--line-2);
  background: transparent; color: var(--tx); text-decoration: none; cursor: pointer;
}
#demo-buy-btn { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
#demo-reset-btn:hover, #demo-config-btn:hover, #demo-sound-btn:hover { border-color: var(--brand-line); background: var(--brand-soft); }

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in oklab, #000 78%, transparent);
}
.modal[hidden], .modal[style*="display: none"] { display: none; }
.modal-card {
  inline-size: min(880px, 100%); max-block-size: 84vh; overflow: auto;
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-4); box-shadow: var(--shadow-2);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-4); }
.modal pre {
  margin: 0; padding: var(--sp-4); overflow: auto; max-block-size: 60vh;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2);
  font-size: var(--fs-2); line-height: var(--lh-3); tab-size: 2;
}

/* --- Vollbild der Demo ---------------------------------------------------
   Im Vollbild bleibt nur das Geraet auf ruhigem Grund. Die Bedienknoepfe der
   Demo wandern mit, weil sie im selben Rahmen liegen. */
.demo-fullscreen-btn { margin-inline: auto; }

/* Die Seite ersetzt den Zeiger durch einen eigenen, gezeichneten. Der liegt in
   body und damit ausserhalb des Vollbild-Baums: im Vollbild wird er nicht mehr
   gezeichnet, und weil der echte Zeiger ausgeblendet ist, sieht man gar keinen.
   Solange Vollbild laeuft, uebernimmt deshalb wieder der Zeiger des Systems. */
html.has-custom-cursor :fullscreen,
html.has-custom-cursor :fullscreen *:not(input):not(textarea):not([contenteditable="true"]) {
  cursor: auto !important;
}
html.has-custom-cursor :fullscreen a,
html.has-custom-cursor :fullscreen button,
html.has-custom-cursor :fullscreen [role="button"],
html.has-custom-cursor :fullscreen .hw-btn {
  cursor: pointer !important;
}
.phone-wrapper:fullscreen {
  background: var(--bg);
  block-size: 100vh; inline-size: 100vw;
  display: flex; align-items: center; justify-content: center;
}
.phone-wrapper:fullscreen::backdrop { background: var(--bg); }

/* --- Kennzahlen --------------------------------------------------------- */
.stat-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); text-align: center; }
.stat-value { font-size: var(--fs-6); font-weight: var(--fw-max); line-height: var(--lh-2); color: var(--brand-text); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-block-start: var(--sp-1); color: var(--tx-3); font-size: var(--fs-2); }

/* --- Abschluss und Fusszeile ------------------------------------------- */
.cta-band { text-align: center; background: var(--surface-2); border-block: 1px solid var(--line); }
.cta-band .btn-row { justify-content: center; }
.cta-band p { color: var(--tx-2); margin-block-start: var(--sp-3); }

.site-footer {
  padding-block: var(--sp-7);
  background: var(--surface); border-block-start: 1px solid var(--line);
  color: var(--tx-3); font-size: var(--fs-2);
}
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.site-footer h2 { font-size: var(--fs-2); font-weight: var(--fw-head); color: var(--tx); text-transform: uppercase; letter-spacing: var(--ls-over); margin-block-end: var(--sp-3); }
.site-footer nav { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a { color: var(--tx-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand-text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
}

/* --- Hinweisleiste und Abschiedsfenster --------------------------------- */
#cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 150;
  padding: var(--sp-4) 0;
  background: var(--surface); border-block-start: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
}
#cookie-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; }
#cookie-banner p { color: var(--tx-2); font-size: var(--fs-2); max-inline-size: 70ch; }
#cookie-banner .btn-row { margin-block-start: 0; }

/* Das Abschiedsfenster und die Bildansicht kommen als fertige Bausteine aus der
   alten Seite. Ihre Gestaltung lag in der abgeloesten landing.css, deshalb hier
   noch einmal, auf den Tokens. Ohne das klebten sie als Block am Seitenende. */
.exit-discount-modal {
  position: fixed; inset: 0; z-index: 190;
  display: grid; place-items: center; padding: var(--gutter);
}
.exit-discount-modal[aria-hidden="true"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.exit-discount-modal {
  opacity: 1; visibility: visible;
  transition: opacity .28s ease, visibility 0s;
}
.exit-discount-modal[aria-hidden="true"] .exit-discount-card { translate: 0 8px; }
.exit-discount-card { translate: 0 0; transition: translate .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .exit-discount-modal, .exit-discount-modal[aria-hidden="true"],
  .exit-discount-card { transition: none; translate: 0 0; }
}
.exit-discount-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, #000 78%, transparent);
}
.exit-discount-card {
  position: relative; inline-size: min(520px, 100%);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-4); box-shadow: var(--shadow-2); text-align: center;
}
.exit-discount-close {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  inline-size: 36px; block-size: 36px; display: grid; place-items: center;
  background: transparent; color: var(--tx-3);
  border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer;
}
.exit-discount-close:hover { color: var(--tx); border-color: var(--line-2); }
.exit-discount-badge {
  display: inline-block; margin-block-end: var(--sp-4);
  padding: 6px var(--sp-3); border-radius: var(--r-dot);
  background: var(--brand-soft); color: var(--brand-text);
  font-size: var(--fs-1); font-weight: var(--fw-head);
  text-transform: uppercase; letter-spacing: var(--ls-over);
}
.exit-discount-title { font-size: var(--fs-5); font-weight: var(--fw-head); line-height: var(--lh-2); }
.exit-discount-copy { margin-block-start: var(--sp-3); color: var(--tx-2); font-size: var(--fs-2); }
.exit-discount-code-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: center; margin-block: var(--sp-5) var(--sp-4);
}
.exit-discount-code {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg); border: 1px dashed var(--brand-line); border-radius: var(--r-2);
  font-size: var(--fs-5); font-weight: var(--fw-max); letter-spacing: .04em; color: var(--brand-text);
}
.exit-discount-copy-btn {
  block-size: var(--btn-h-md); padding-inline: var(--btn-pad-md);
  background: transparent; color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  font: inherit; font-size: var(--fs-2); font-weight: var(--fw-head); cursor: pointer;
}
.exit-discount-copy-btn:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.exit-discount-redeem {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  block-size: var(--btn-h-lg); padding-inline: var(--btn-pad-lg);
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r-2); font-size: var(--fs-3); font-weight: var(--fw-head);
  text-decoration: none;
}
.exit-discount-redeem:hover { background: color-mix(in oklab, var(--brand) 88%, #fff); }

/* Bildansicht der Galerie (nur Pad) */
.pad-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in oklab, #000 82%, transparent);
}
.pad-lightbox[aria-hidden="true"] { display: none; }
.pad-lightbox-close {
  position: absolute; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4);
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  background: var(--surface); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r-2); cursor: pointer;
}
.pad-lightbox-inner { max-inline-size: min(1100px, 100%); text-align: center; }
.pad-lightbox-img { max-block-size: 78vh; border-radius: var(--r-3); }
.pad-lightbox-caption { margin-block-start: var(--sp-4); color: var(--tx-2); font-size: var(--fs-2); }
.pad-lightbox-caption strong { display: block; color: var(--tx); font-size: var(--fs-3); }

.exit-modal { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: var(--gutter); }
.exit-modal[hidden] { display: none; }
.exit-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, #000 78%, transparent); border: 0; }
.exit-card {
  position: relative; inline-size: min(520px, 100%); padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-4); box-shadow: var(--shadow-2); text-align: center;
}
.exit-card p { color: var(--tx-2); margin-block-start: var(--sp-3); }
.code-pill {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-block: var(--sp-5) var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--bg); border: 1px dashed var(--brand-line); border-radius: var(--r-2);
  font-size: var(--fs-5); font-weight: var(--fw-max); letter-spacing: .04em; color: var(--brand-text);
}

/* --- Einblendungen ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Randfaelle --------------------------------------------------------- */
/* Das NUI bringt einen eigenen globalen Reset mit, sobald phone.css/pad.css
   ab 768px greift. Diese beiden Zeilen halten die Landingseite davon frei. */
@media (min-width: 768px) {
  body > header.site-header, body > main, body > footer.site-footer { font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, sans-serif); }
}

/* --- Rechtsseiten --------------------------------------------------------
   Reiner Lesetext: eine Spalte, begrenzte Zeilenlaenge, klare Abstufung. */
.legal-content { max-inline-size: 74ch; }
.legal-content h1 { font-size: var(--fs-7); line-height: var(--lh-1); font-weight: var(--fw-max); letter-spacing: var(--ls-h1); }
.legal-content h2 {
  margin-block: var(--sp-7) var(--sp-3);
  font-size: var(--fs-5); line-height: var(--lh-2); font-weight: var(--fw-head);
  padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line);
}
.legal-content h1 + p, .legal-content h1 + .legal-updated { margin-block-start: var(--sp-4); color: var(--tx-3); font-size: var(--fs-2); }
.legal-content p, .legal-content li { color: var(--tx-2); line-height: var(--lh-3); }
.legal-content p + p { margin-block-start: var(--sp-4); }
.legal-content ul, .legal-content ol { margin-block: var(--sp-4); padding-inline-start: var(--sp-6); }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li + li { margin-block-start: var(--sp-2); }
.legal-content a { color: var(--brand-text); text-underline-offset: 3px; }
.legal-content strong { color: var(--tx); font-weight: var(--fw-head); }
.legal-content table { inline-size: 100%; border-collapse: collapse; margin-block: var(--sp-5); font-size: var(--fs-2); }
.legal-content th, .legal-content td { padding: var(--sp-3); border-block-end: 1px solid var(--line); text-align: start; }
.legal-content th { color: var(--tx); font-weight: var(--fw-head); }

/* Ausstieg aus dem Vollbild: liegt im Vollbild-Baum, sonst waere er unsichtbar. */
.demo-fullscreen-exit {
  position: absolute; inset-block-start: var(--sp-5); inset-inline-end: var(--sp-5);
  z-index: 10; display: inline-flex; align-items: center; gap: var(--sp-2);
  block-size: var(--btn-h-md); padding-inline: var(--btn-pad-md);
  background: var(--surface); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  font: inherit; font-size: var(--fs-2); font-weight: var(--fw-head);
  cursor: pointer !important;
}
.demo-fullscreen-exit:hover { border-color: var(--brand-line); background: var(--surface-2); }
.phone-wrapper:not(:fullscreen) .demo-fullscreen-exit { display: none; }

/* Der Zeiger im Vollbild, noch einmal ohne Umweg ueber die Klasse am html. */
:fullscreen, :fullscreen *:not(input):not(textarea):not([contenteditable="true"]) { cursor: auto !important; }
:fullscreen a, :fullscreen button, :fullscreen [role="button"], :fullscreen .hw-btn { cursor: pointer !important; }


/* ==========================================================================
   Abgleich mit den Gestaltungsvorlagen (linear.app und apple aus der
   DESIGN.md-Sammlung). Zwoelf Punkte, alle mit den vorhandenen Tokens.
   ========================================================================== */

/* 1. Die drei Schauabschnitte tragen die Seite und bekommen die Schau-Polsterung,
      die in tokens.css schon dafuer bereitliegt und bisher ungenutzt war. */
#phone-showcase,
#features-gallery,
#video-showcase { padding-block: var(--section-y-show); }

/* 2. Genau eine Grenze pro Kante: entweder Flaechenwechsel oder Haarlinie,
      nie beides. Der Hero wird eine flache Bande, sein Wechsel auf --bg ist
      die Grenze zum ersten Abschnitt. */
/* Der Kopfbereich liegt als dunkle Platte auf dem blauen Seitenhintergrund.
   Frueher stand hier eine flache Farbe, die unten hart abriss. Jetzt laeuft
   sie aus, der Hintergrund kommt allmaehlich durch. color-mix statt des
   Schluesselworts transparent: transparent ist rgba(0,0,0,0), ein Verlauf
   dorthin liefe in sRGB sichtbar durch ein schmutziges Grau. */
.hero {
  background: linear-gradient(to bottom,
    var(--surface-2) 0%,
    var(--surface-2) 55%,
    color-mix(in srgb, var(--surface-2) 78%, transparent) 76%,
    color-mix(in srgb, var(--surface-2) 34%, transparent) 90%,
    color-mix(in srgb, var(--surface-2) 0%, transparent) 100%);
}
/* Das Abschlussband hat dasselbe Problem an beiden Kanten: oben gegen den
   Abschnitt darueber, unten gegen die Fusszeile. Oben ausblenden, unten in
   der vollen Farbe bleiben, damit es sauber an die Fusszeile stoesst. */
.cta-band {
  border-block: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--surface-2) 0%, transparent) 0%,
    color-mix(in srgb, var(--surface-2) 45%, transparent) 22%,
    var(--surface-2) 55%,
    var(--surface-2) 100%);
}
.section + .cta-band { border-block-start: 0; }

/* 3. Der Vorspann bekommt seine eigene Stufe zwischen Fliesstext und h3. */
.hero-lead,
.section-head p,
.cta-band p { font-size: var(--fs-4); line-height: var(--lh-3); }

/* 4. Das Maß gehoert an den Text, nicht an den Kasten: die Ueberschrift misst
      in ihrer eigenen Groesse, der Absatz in seiner. */
.section-head { max-inline-size: none; }
.section-head h2 { max-inline-size: 32ch; }
.section-head p,
.hero-lead { max-inline-size: 62ch; }

/* 5. Der globale Nullabstand an p ist fuer Karten gedacht. Wo zwei Absaetze in
      einer Spalte aufeinanderfolgen, braucht es eine Stufe aus dem Raster. */
.hero-copy > p + p { margin-block-start: var(--sp-3); }
.footer-grid > div > p + p { margin-block-start: var(--sp-3); }
.hero-meta + p { color: var(--tx-3); }

/* 6. Feste Spaltenzahlen statt auto-fit: neun Karten stehen als 3/3/3 statt
      4/4/1, sechs als 3/3 statt 4/2. */
@media (min-width: 640px) {
  .card-grid, .gallery-grid, .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid, .gallery-grid, .step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 7. Der Fokusring soll die Form der Komponente nachzeichnen, nicht ersetzen.
      Die globale Regel in tokens.css drueckt jedem fokussierten Element den
      kleinsten Radius auf. */
.btn:focus-visible,
.site-nav a:focus-visible,
.nav-trigger:focus-visible,
.nav-item:focus-visible,
.mobile-nav a:focus-visible,
.lang-menu a:focus-visible,
.lang-menu button:focus-visible,
.icon-button:focus-visible,
#demo-reset-btn:focus-visible,
#demo-buy-btn:focus-visible,
#demo-config-btn:focus-visible { border-radius: var(--r-2); }

.card:focus-visible,
a.card:focus-visible,
.gallery-card:focus-visible,
.video-frame:focus-visible { border-radius: var(--r-3); }

/* 8. Rueckmeldung auf den Druck. Bewusst ueber scale und nicht ueber transform:
      die Einblendung .reveal benutzt transform, beides wuerde sich loeschen. */
.btn, .icon-button, .gallery-card, a.card,
#demo-reset-btn, #demo-buy-btn, #demo-config-btn {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, scale .12s ease;
}
.btn:active, .icon-button:active, .gallery-card:active, a.card:active,
#demo-reset-btn:active, #demo-buy-btn:active, #demo-config-btn:active { scale: 0.97; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-button:active, .gallery-card:active, a.card:active,
  #demo-reset-btn:active, #demo-buy-btn:active, #demo-config-btn:active { scale: 1; }
}

/* 9. Hover an Inhaltskarten ist Flaechenwechsel plus staerkere neutrale Linie.
      Gold bleibt den Aktionen vorbehalten: Kauf, Link, Fokus, Wortmarke. */
a.card:hover, .card-hover:hover { border-color: var(--line-2); background: var(--surface-2); }
.gallery-card:hover { border-color: var(--line-2); background: var(--surface-2); }

/* 10. Zahlen sind Aussagen, keine Aktionen. */
.stat-value { color: var(--tx); }
.stat-label { color: var(--tx-2); }

/* 11. Ein Kartenradius fuer die ganze Seite; der innere Radius folgt aus
       aussen minus Polster. --r-4 bleibt den Fenstern vorbehalten. */
.hero-visual { border-radius: var(--r-3); padding: var(--sp-2); }
.hero-visual img { border-radius: var(--r-1); }

/* 12. Die Leiste auf ihr Token bringen statt das Token zu aendern. Die
       Polsterung steht bereits an der Leiste selbst (tokens.css, 8px oben und
       unten, mit !important). Die innere Reihe darf sie nicht ein zweites Mal
       setzen, sonst kommen 73 statt 57 Pixel heraus. */
/* Hoehe wie auf agencyg.de: dort misst die Leiste 64 Pixel. Die Polsterung
   steht bereits an der Leiste selbst (tokens.css, 8px oben und unten, mit
   !important), dazu die Trennlinie. Die innere Reihe legt genau die Differenz
   drauf statt die Polsterung ein zweites Mal zu setzen. */
.site-header-inner { padding-block: 0; min-block-size: 47px; }


/* ==========================================================================
   Zweiter Durchgang mit den Vorlagen, diesmal am gerenderten Bild:
   beide Seiten, jeder Abschnitt, hell und dunkel, 1440 / 1024 / 390.
   ========================================================================== */

/* 1. In der Testanleitung stand der Fettdruck auf Block: jeder Satz zerfiel in
      drei Teile und die Folgezeile begann mit einem Waisen-Punkt. */
.step-list li strong { display: inline; font-weight: var(--fw-head); color: var(--tx); }

/* 2. Doppelte Schrittnummern: die Liste zeigte den Browser-Marker UND das
      goldene Abzeichen. Auf dem Handy frass der Marker 47 von 390 Pixeln. */
.step-list { list-style: none; padding-inline-start: 0; }
.step-list > li { list-style: none; }

/* 3. Das Netzwerk-Feld lag auf dem Handy ueber dem Dokumentations-Knopf des
      Abschlussbereichs und fing dort die Beruehrungen ab. */
@media (max-width: 720px) {
  .agency-network-dock {
    position: fixed; inset-block-start: auto; inset-inline-end: auto;
    inset-block-end: var(--sp-4); inset-inline-start: var(--sp-3);
  }
  #cta { padding-block-end: calc(var(--section-y) + var(--sp-8)); }
}

/* 4. Zwischen 900 und 1150 Pixeln rutschte der dritte Knopf des Startbereichs
      allein in eine zweite Zeile, daneben blieben 290 Pixel leer. */
@media (min-width: 900px) and (max-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-6); }
}

/* 5. Im hellen Modus lag der Nebentext auf den hellen Baendern bei 4,3 zu 1 und
      damit unter der Lesbarkeitsschwelle von 4,5. */
.kicker, .hero-meta span, .hero-copy .t-small { color: var(--tx-2); }

/* 6. Die drei Companion-Karten setzten ihre Knoepfe auf drei verschiedene
      Hoehen, weil die Karte ein Block war statt einer Spalte. */
#companion-app .card { display: flex; flex-direction: column; gap: var(--sp-3); }
#companion-app .card > .btn-row { margin-block-start: auto; }

/* 7. Die Links der Fusszeile waren auf dem Handy 22 Pixel hoch, die Vorlage
      verlangt 44 als Mindesttrefferflaeche. */
@media (max-width: 720px) {
  .site-footer nav a { display: flex; align-items: center; min-block-size: var(--btn-h-md); }
  .site-footer nav { gap: 0; }
}

/* 8. Die Galeriekacheln zeigten zu mehr als der Haelfte leere Flaeche, weil ein
      hochformatiges Motiv in ein 4:3-Fenster gestellt wurde. */
.gallery-card-img { aspect-ratio: 1 / 1; }

/* 9. Zwei Textbloecke liefen auf 130 bis 136 Zeichen Zeilenlaenge. Die
      Markenrechts-Zeile stand ausserdem in voller Textfarbe ohne Abstand. */
#companion-app .wrap > .t-small {
  margin-block-start: var(--sp-5); font-size: var(--fs-1);
  color: var(--tx-3); max-inline-size: 75ch;
}
#ecosystem .card > * { max-inline-size: 70ch; }

/* 10. Auf den Rechtsseiten blieben ueber der Ueberschrift nur 6 Pixel Luft,
       weil die feste Kopfleiste die Polsterung des Abschnitts verdeckte. */
main.section > .wrap.legal-content { padding-block-start: var(--header-h); }

/* Die Bedienknoepfe der Demo liegen ausserhalb des Vollbild-Elements und waeren
   dort unsichtbar. Sie werden beim Betreten hineingehaengt und sitzen dann am
   unteren Rand, der Ausstieg bleibt oben rechts. */
.phone-demo-controls.im-vollbild {
  position: absolute; inset-block-end: var(--sp-5); inset-inline-start: 50%;
  translate: -50% 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
  margin: 0 !important; max-inline-size: min(720px, 92vw);
}

/* --- Kopfleisten-Bedienelemente wie auf agencyg.de -------------------------
   Wortgleich von dort uebernommen. Die Farben kommen aus tokens.css, das
   beide Seiten ohnehin laden - deshalb sieht es hier genauso aus. */
.lang-wrap,.lang-menu-wrap{position:relative}
#landing-language-toggle.lang-menu-button{display:flex;align-items:center;gap:.6rem;height:44px;width:auto;padding:0 .95rem;border-radius:9999px;border:1px solid var(--glass-border,rgba(255,255,255,.08));background:var(--glass-bg,rgba(20,20,26,.8));color:var(--text-primary,#f5f5f5);box-shadow:var(--glass-shadow,0 8px 30px rgba(0,0,0,.35));transition:all .3s;cursor:pointer;font-family:inherit}
#landing-language-toggle.lang-menu-button:hover{transform:translateY(-1px);border-color:rgba(226,182,73,.24);box-shadow:var(--glass-shadow,0 8px 30px rgba(0,0,0,.35)),0 0 24px rgba(226,182,73,.12)}
#landing-language-toggle .fa-globe{font-size:.9rem;color:var(--highlight-start,#e2b649)}
#landing-language-toggle .lang-menu-code{font-size:.78rem;font-weight:800;letter-spacing:.12em}
#landing-language-toggle .fa-chevron-down{font-size:.7rem;color:var(--text-secondary,#a9b0ba);transition:transform .25s ease}
#landing-language-toggle.open .fa-chevron-down,
#landing-language-toggle[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)}

#landing-theme-toggle.control-button{background-color:var(--glass-bg,rgba(10,14,35,.6));border:1px solid var(--glass-border,rgba(255,255,255,.06));border-radius:9999px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s;position:relative;width:50px;height:26px;overflow:hidden;color:inherit;padding:0}
#landing-theme-toggle.control-button:hover{border-color:var(--highlight-start,#e2b649);transform:scale(1.1);box-shadow:0 0 15px rgba(226,182,73,.35)}
#landing-theme-toggle .control-icon{position:absolute;transition:transform .5s cubic-bezier(.25,1,.5,1),opacity .5s}
#landing-theme-toggle #sun-icon{font-size:16px;color:#facc15;opacity:0;transform:translateY(20px) scale(.5)}
#landing-theme-toggle #moon-icon{font-size:16px;color:#a5b4fc;opacity:1;transform:translateY(0) scale(1)}
html.light-mode #landing-theme-toggle #sun-icon{opacity:1;transform:translateY(0) scale(1)}
html.light-mode #landing-theme-toggle #moon-icon{opacity:0;transform:translateY(-20px) scale(.5)}
@media(max-width:767px){#landing-theme-toggle.control-button{width:40px;height:22px}}
html:not(.light-mode) #landing-language-toggle.lang-menu-button,
html:not(.light-mode) #landing-theme-toggle.control-button{background:#131316;border-color:rgba(255,255,255,.12)}
/* --- Fusszeile: Fokusrahmen um den Text statt um die ganze Spalte --------- */
.site-footer nav a { width: fit-content; max-width: 100%; }
/* --- Hero-Geraet: angewinkelt und schwebend ------------------------------
   Vorher stand das Bild frontal. Die Drehung kommt aus CSS, damit sie ohne
   neues Rendering nachjustierbar bleibt. Der Schatten macht das Schweben. */
.hero-visual { overflow: visible; }
.hero-visual > img {
  transform: perspective(2000px) rotateY(-18deg) rotateX(6deg) rotateZ(-4deg) scale(.74);
  filter: drop-shadow(0 55px 65px rgba(0, 0, 0, .45));
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (max-width: 900px) {
  .hero-visual > img {
    transform: perspective(2000px) rotateY(-12deg) rotateX(4deg) rotateZ(-3deg) scale(.85);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .4));
  }
}

/* --- Kopfbereich mit 3D-Geraet: kein Aufblitzen beim Neuladen -------------
   assets/hero3d.js raeumt erst bei DOMContentLoaded auf. Bis dahin waren das
   alte flache Bild und die graue Kachel sichtbar (gemessen rund 270 ms) - das
   war das kurze Aufblitzen des alten Rahmens. Hier stehen die Regeln schon
   vor dem ersten Malen. Das Attribut gibt es nur auf den Phone-Seiten, das
   Pad behaelt seine Kachel. Ohne JavaScript holt der noscript-Block im Kopf
   der Seite das alte Bild zurueck. */
.hero-visual[data-schirm-vorne] {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  /* Platz fuer das Geraet freihalten, sonst ist der Behaelter bis rund 790 ms
     null Pixel hoch und die Seite springt (gemessen CLS 0.691). Der Wert ist
     genau die min-height, die .hero3d spaeter selbst mitbringt. */
  min-height: clamp(380px, 46vw, 620px);
}
/* Das Pad liegt quer und ist damit deutlich flacher als ein Handy. Ohne
   eigenen Wert bliebe unter dem Geraet der Platz eines Hochformats leer.
   Gleiche Spezifitaet wie die Regel darueber, entscheidet also die
   Reihenfolge - deshalb steht sie hier danach. */
.hero-visual[data-schirm-quer] {
  min-height: clamp(260px, 30vw, 420px);
}
.hero-visual[data-schirm-vorne] > img { display: none; }

/* --- GTA-Hintergrund hinter dem 3D-Geraet ---------------------------------
   Haengt an der Buehne, die assets/hero3d.js baut - also nur auf den Seiten
   mit Geraet. Die weichen Kanten sind Absicht: ein hartes Rechteck hinter dem
   Geraet wirkt wie die alte graue Kachel. Der Verlauf laesst das Bild zum Rand
   hin verschwinden, das Geraet bleibt der Blickfang. */
.hero3d::before {
  content: "";
  position: absolute;
  /* groesser als der Behaelter, damit der weiche Rand Platz hat und der
     Kern des Bildes den Bereich hinter dem Geraet voll ausfuellt */
  inset: -16% -13%;
  z-index: 0;
  pointer-events: none;
  background: url("../img/hero-hintergrund-gta.webp") center center / cover no-repeat;
  opacity: .62;
  /* Weiche Kanten. Der Radius muss kleiner als der halbe Kasten sein, sonst
     liegt das Ende des Verlaufs ausserhalb und es bleibt ein hartes Rechteck.
     50% Breite heisst: genau am Rand ist der Verlauf durchsichtig. */
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 45%, #000 0%, #000 26%, rgba(0,0,0,.5) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 45%, #000 0%, #000 26%, rgba(0,0,0,.5) 66%, transparent 100%);
}
@media (max-width: 900px) {
  .hero3d::before { background-image: url("../img/hero-hintergrund-gta@800.webp"); }
}
@media (prefers-reduced-motion: no-preference) {
  /* sanftes Aufblenden, damit das Bild nicht hart einsetzt, wenn die Buehne kommt */
  .hero3d::before { animation: hero3d-hintergrund-auf .9s ease-out; }
}
@keyframes hero3d-hintergrund-auf { from { opacity: 0 } }

/* --- Bedienknoepfe der Demo: eine Reihe, mittig, gleiche Abstaende ---------
   Die Oberflaeche des Scripts setzt sie sonst absolut an die Ecken des
   Geraets. Im Spiel ist das richtig, auf einer Seite steht dann jeder Knopf
   woanders. Hier ist !important noetig: die Regeln der Oberflaeche haengen an
   body.web-demo und wiegen damit schwerer. */

/* Phone: die Reihe liegt im Rahmen, der ins Vollbild geht - sie muss dort
   bleiben, sonst waeren die Knoepfe im Vollbild verschwunden. Sie bleibt also
   absolut, wird aber unten angeschlagen und ausgerichtet. */
.phone-wrapper > .phone-demo-controls {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) !important;
  padding: 0 0 var(--sp-2) 0 !important;
  pointer-events: none;
}
.phone-wrapper > .phone-demo-controls > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  pointer-events: auto;
}

/* Pad: keine .phone-wrapper, die Reihe liegt in der Buehne und geht nicht mit
   ins Vollbild. Im Fluss mitlaufen lassen - dann stimmt der Abstand zum
   Vollbild-Knopf darunter von selbst, er kommt aus der Buehne. */
.demo-stage > .phone-demo-controls {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) !important;
  pointer-events: auto;
}
.demo-stage > .phone-demo-controls > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Gleiche Hoehe fuer alle vier Knoepfe. Vorher 54 auf der Phone-Seite, 44 auf
   der Pad-Seite, der Vollbild-Knopf ueberall 44 - in einer Reihe faellt das
   sofort auf. */
/* Die runde Form vergibt die Oberflaeche des Scripts ueber die einzelnen
   Kennungen. Der Ton-Knopf ist neu und steht dort nicht drin - ohne diese
   Zeile bliebe er als einziger eckig. */
.phone-demo-controls #demo-sound-btn {
  border-radius: 999px !important;
  border: 1px solid var(--line-2) !important;
  background: rgba(22, 26, 36, .8) !important;
}
.phone-demo-controls #demo-reset-btn,
.phone-demo-controls #demo-buy-btn,
.phone-demo-controls #demo-config-btn,
.phone-demo-controls #demo-sound-btn {
  block-size: var(--btn-h-md) !important;
  min-block-size: 0 !important;
  padding-block: 0 !important;
  padding-inline: var(--btn-pad-md) !important;
}