/* CHRIVO Seite, gemeinsames Stylesheet. Aus index.astro herausgeloest am 25.09.2026, als die
   Seite in mehrere Seiten aufgeteilt wurde; die Regeln darin sind unveraendert. */
  :root {
    --night: #071527;
    --night-2: #0a1e38;
    --surface: rgba(255, 255, 255, 0.045);
    --line: rgba(255, 255, 255, 0.10);
    --aurora: #63d2bc;
    --aurora-2: #8f7ce8;
    --moon: #ebd6a3;
    --accent: #ff7a3d;
    --text: #f4f7fb;
    --muted: #8ea3bd;
    --pad: clamp(20px, 5vw, 64px);
  }

  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--night);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; height: auto; display: block; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }

  /* ---------- Typografie ---------- */
  .eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--aurora);
  }
  .eyebrow.center { text-align: center; }

  .giant {
    margin: 0;
    font-family: Roboto, Inter, sans-serif;
    font-weight: 900;
    font-size: clamp(3.4rem, 13vw, 8.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
  }

  .giant-sub {
    margin: 22px auto 0;
    max-width: 30ch;
    font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
    color: var(--muted);
  }

  .big {
    margin: 0;
    font-family: Roboto, Inter, sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 7.5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }
  .big em { font-style: normal; color: var(--moon); }
  .big.center, .mid.center { text-align: center; }

  .mid {
    margin: 0;
    font-family: Roboto, Inter, sans-serif;
    font-weight: 900;
    font-size: clamp(1.75rem, 4.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.028em;
  }

  .lede {
    margin: 26px 0 0;
    max-width: 58ch;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: var(--muted);
  }
  .lede strong { color: var(--text); font-weight: 600; }
  .lede.center { margin-left: auto; margin-right: auto; text-align: center; }

  /* Grundstil fuer Links im Fliesstext (30.09.2026). Ohne ihn faellt ein Link in einem
     Absatz auf die Browservorgabe zurueck, also Blau und nach dem Besuch Lila, dazu die
     dicke Standard-Unterstreichung. Auf dem Nachthimmel sieht das kaputt aus, und genau das
     war Philipps Befund auf /sicherheit/. Bewusst nur `p > a` und `li > a`: Navigation,
     Fusszeile und Bildkacheln tragen eigene Klassen, die staerker wiegen, und ein
     bildschirmfuellender Link soll keine Unterkante bekommen. */
  p > a, li > a {
    color: var(--aurora);
    text-decoration: none;
    border-bottom: 1px solid rgba(99, 210, 188, 0.35);
    transition: border-color 0.2s ease;
  }
  p > a:hover, li > a:hover { border-bottom-color: var(--aurora); }

  /* ---------- Polarlicht ---------- */
  .aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  .veil {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
  }
  .v1 {
    width: 70vw; height: 55vh; left: -10vw; top: -8vh;
    background: radial-gradient(circle, rgba(99, 210, 188, 0.55), transparent 68%);
    animation: drift1 26s ease-in-out infinite alternate;
  }
  .v2 {
    width: 60vw; height: 50vh; right: -12vw; top: 12vh;
    background: radial-gradient(circle, rgba(143, 124, 232, 0.48), transparent 68%);
    animation: drift2 32s ease-in-out infinite alternate;
  }
  .v3 {
    width: 80vw; height: 45vh; left: 10vw; bottom: -12vh;
    background: radial-gradient(circle, rgba(235, 214, 163, 0.20), transparent 70%);
    animation: drift1 38s ease-in-out infinite alternate-reverse;
  }
  .aurora.soft .veil { opacity: 0.32; }

  @keyframes drift1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 4vh, 0) scale(1.12); }
  }
  @keyframes drift2 {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to   { transform: translate3d(-5vw, 6vh, 0) scale(1); }
  }

  /* ---------- 1. Bühne ---------- */
  .stagelight {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 12vh var(--pad) 14vh;
    background: linear-gradient(180deg, #0a1e38 0%, var(--night) 74%);
    overflow: hidden;
  }
  .stagelight-in { position: relative; z-index: 1; }

  .mark {
    width: clamp(220px, 40vw, 380px);
    height: auto;
    margin: 0 auto 22px;
    /* Ellipse statt Kreis (27.09.2026): der Kreis reichte oben und unten nicht bis zum
       Bildrand, dort stand der Ring mit harter Kante. Die Ellipse laeuft zu allen vier
       Raendern weich aus, Motiv und Groesse bleiben wie vorher. */
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 68%, transparent 100%);
    filter: drop-shadow(0 18px 70px rgba(99, 210, 188, 0.26));
  }
  .mark.small { width: 150px; margin-bottom: 18px; opacity: 0.85; }

  .scrollhint {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 22px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    z-index: 1;
  }
  .scrollhint span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--aurora);
    animation: wheel 2s ease-in-out 6;
  }
  @keyframes wheel {
    0%, 100% { transform: translateY(0); opacity: 1; }
    60% { transform: translateY(12px); opacity: 0; }
  }

  /* ---------- Abschnitte ---------- */
  section { position: relative; }
  .statement, .arrange, .privacy, .ear, .gallery, .bento-sec, .setup, .faq {
    padding: clamp(80px, 12vh, 152px) 0;
  }
  .faq { padding-top: clamp(56px, 8vh, 104px); }
  .statement { text-align: center; }
  .privacy { padding-bottom: clamp(56px, 8vh, 104px); }
  .ear { padding-top: clamp(56px, 8vh, 104px); }
  .gallery { padding-top: clamp(56px, 8vh, 104px); }
  .bento-sec { padding-top: clamp(64px, 9vh, 120px); }
  .statement .lede { margin-left: auto; margin-right: auto; }

  /* ---------- Das Ohr: die Geräuscherkennung ----------
     Vier Karten in zwei Spalten, damit die vier Gedanken nebeneinander stehen und nicht
     als lange Liste untereinander. Die Karten sind bewusst zurückhaltend: hier zählt der
     Text, und ein Rahmen pro Karte reicht, um sie voneinander zu trennen. */
  .ear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(16px, 2.2vw, 26px);
    margin-top: clamp(36px, 5vh, 64px);
  }
  .ear-card {
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(27, 53, 96, 0.34), rgba(19, 41, 74, 0.16));
  }
  .ear-card h3 {
    margin: 0 0 12px;
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--moon);
    text-wrap: balance;
  }
  .ear-card p {
    margin: 0;
    font-size: clamp(0.95rem, 1.1vw, 1.04rem);
    line-height: 1.66;
    color: var(--muted);
  }
  .ear-note {
    max-width: 62ch;
    margin: clamp(32px, 4.5vh, 56px) 0 0;
    padding-left: clamp(16px, 2vw, 22px);
    border-left: 2px solid var(--accent);
    font-size: clamp(0.95rem, 1.1vw, 1.04rem);
    line-height: 1.7;
    color: var(--muted);
  }
  .ear-note strong { color: var(--text); font-weight: 600; }

  /* ---------- Geräte-Fächer ---------- */
  .fan {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: clamp(48px, 8vh, 90px) auto 0;
    perspective: 1400px;
  }
  .phone {
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 34px;
    /* Fester Grund unter dem Glanz: sonst scheint der Mond durch den Rahmen (Befund 25.09.2026). */
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)), #0a1728;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  }
  .phone img { border-radius: 28px; }
  .p-left, .p-right { width: clamp(150px, 20vw, 232px); }
  .p-mid { width: clamp(186px, 25vw, 286px); position: relative; z-index: 2; }
  .p-left  { transform: translateX(14%) rotateY(16deg) scale(0.94); opacity: 0.85; }
  .p-right { transform: translateX(-14%) rotateY(-16deg) scale(0.94); opacity: 0.85; }

  /* ---------- Sticky-Bühne ---------- */
  .stage { padding: clamp(60px, 10vh, 120px) 0; }
  .stage-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
  }
  .stage-visual { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
  .phone-lg { position: relative; width: clamp(190px, 24vw, 268px); aspect-ratio: 480 / 1044; }
  .phone-lg .frame {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: contain;
    object-position: center;
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .phone-lg .frame.is-on { opacity: 1; }

  .stage-steps { padding: 26vh 0 30vh; }
  .step {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.28;
    transition: opacity 0.5s ease;
  }
  .step.is-on { opacity: 1; }
  .step-shot { display: none; }
  .stage.no-motion .step { opacity: 1; min-height: 0; margin-bottom: 56px; }
  .stage.no-motion .stage-visual { position: static; height: auto; }

  /* ---------- Datenschutz ---------- */
  .privacy { text-align: center; }
  .zeros {
    display: flex;
    justify-content: center;
    gap: clamp(28px, 8vw, 96px);
    margin: clamp(44px, 7vh, 76px) 0 0;
  }
  .zero { display: grid; gap: 6px; }
  .num {
    font-family: Roboto, Inter, sans-serif;
    font-weight: 900;
    font-size: clamp(3.4rem, 11vw, 7rem);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--aurora);
  }
  @media (min-width: 901px) {
    .num {
      background: linear-gradient(170deg, #ffffff 18%, var(--aurora) 92%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
  .lbl { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

  /* ---------- Galerie ---------- */
  .rail {
    display: flex;
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(40px, 6vh, 70px);
    padding: 0 var(--pad) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad);
    scroll-padding-right: var(--pad);
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  @media (hover: none) {
    .rail { scroll-snap-type: x proximity; }
    .tile img { -webkit-user-drag: none; -webkit-touch-callout: none; }
  }
  .tile {
    flex: 0 0 auto;
    width: clamp(248px, 30vw, 360px);
    margin: 0;
    scroll-snap-align: start;
    -webkit-user-drag: none;
    user-select: none;
  }
  .tile-art {
    border-radius: 26px;
    padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px) 0;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(99, 210, 188, 0.20), transparent 62%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .tile-art img {
    border-radius: 20px 20px 0 0;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  }
  .tile figcaption {
    margin-top: 18px;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
  }
  .tile figcaption strong { color: var(--text); font-weight: 600; }

  /* ---------- Bento ---------- */
  .bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(40px, 6vh, 70px);
  }
  .cell {
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
  }
  .cell-wide { grid-column: span 2; }
  .cell h3 {
    margin: 0 0 10px;
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  .cell p { margin: 0; color: var(--muted); font-size: 15px; }
  /* Nachtlicht-Tipp auf der Einrichtung (27.09.2026), Anzeige sichtbar gekennzeichnet */
  #licht .lede { max-width: 640px; margin: 18px 0 32px; }
  .licht-tipp { grid-column: 1 / -1; }
  .licht-tipp { border-color: rgba(235, 214, 163, 0.28); }
  .cell p.licht-hinweis { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--moon); margin-bottom: 10px; }
  .licht-link { display: inline-block; margin-top: 16px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(235, 214, 163, 0.4); color: var(--moon); font-weight: 600; font-size: 15px; text-decoration: none; }
  .licht-link:hover { background: rgba(235, 214, 163, 0.08); }
  /* Plus-Marke (26.09.2026): kennzeichnet Funktionen von CHRIVO Plus, dezent in der Mondfarbe. */
  /* „+" als Zeichen für CHRIVO+ (27.09.2026): ein kleiner Kreis mit Polarlicht-Rand, dasselbe
     Zeichen wie in den Apps. Vorher die Textpille „PLUS". */
  .plus-marke {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; margin-left: 8px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--moon, #EBD6A3) 60%, transparent);
    background: color-mix(in srgb, var(--moon, #EBD6A3) 12%, transparent);
    color: var(--moon, #EBD6A3);
    font: 800 14px/1 Roboto, Inter, sans-serif;
    vertical-align: 0.15em;
  }
  .plus-hinweis { margin: 16px 0 26px; color: var(--muted); font-size: 14px; }
  .plus-hinweis .plus-marke { margin: 0 2px; }
  .plus-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Installation ---------- */
  .steps {
    list-style: none;
    margin: clamp(40px, 6vh, 70px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
  }
  .steps li { padding-top: 20px; border-top: 1px solid var(--line); }
  .snum {
    display: block;
    margin-bottom: 14px;
    font-family: Roboto, Inter, sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--accent);
  }
  .steps h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; }
  .steps p { margin: 0; color: var(--muted); font-size: 15px; }

  /* ---------- Finale ---------- */
  .finale {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(110px, 18vh, 210px) 0 clamp(60px, 10vh, 100px);
    background: linear-gradient(180deg, var(--night) 0%, #0a1e38 100%);
  }
  .finale .wrap { position: relative; z-index: 1; }

  .stores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 14px;
    justify-content: center;
    margin: clamp(34px, 5vh, 54px) auto 0;
  }
  .store {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
    text-align: left;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .store.ready {
    background: #c23b0e;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 40px rgba(194, 59, 14, 0.38);
  }
  .store.soon { color: var(--muted); }
  .store.direkt { color: var(--text); }
  .stores:has(> :only-child) { grid-template-columns: minmax(0, 260px); }
  .badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 20px;
    margin: clamp(34px, 5vh, 54px) auto 0;
  }
  .badges + .stores { margin-top: 18px; }
  .badge-hinweis { margin: 10px auto 0; text-align: center; }
  .badge-hinweis + .stores { margin-top: 18px; }
  .badge { display: block; line-height: 0; border-radius: 10px; }
  .badge img { display: block; height: 53px; width: auto; }
  /* Googles Vorlage hat einen eigenen Schutzrand, die schwarze Fläche ist so hoch wie Apples. */
  .badge img[src*="google-play"] { height: 70px; }
  .store-icon { flex: none; display: grid; place-items: center; }
  .store-text { display: grid; gap: 2px; }
  .store-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
  .store-label { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
  .store-meta { font-size: 12px; font-weight: 500; opacity: 0.8; }
  .fineprint {
    margin: 26px auto 0;
    max-width: 48ch;
    font-size: 13px;
    color: var(--muted);
  }
  /* Signatur: keine Pille, kein Kasten. Eine feine Linie, das Markenmotiv, der Name,
     dann zwei ruhige Zeilen. Die Pille sah aus wie ein Knopf, der nichts tut. */
  .sig {
    margin: clamp(44px, 7vh, 76px) auto 0;
    padding-top: clamp(26px, 4vh, 40px);
    max-width: 44ch;
    border-top: 1px solid var(--line);
  }
  .sig-mark {
    display: block;
    margin: 0 auto 12px;
    border-radius: 50%;
    opacity: 0.9;
  }
  .sig-name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--text);
  }
  /* Beide Sätze auf eigenen Zeilen. Zusammen brachen sie mitten im zweiten Satz um. */
  .sig-claim {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
  }
  .sig-claim span { display: block; }
  .sig-by {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--muted);
  }
  .sig-by .dot { margin: 0 6px; }
  .made { display: inline-flex; align-items: center; gap: 4px; }
  /* Herz als Zeichnung, nicht als Emoji: so sieht es auf jedem System gleich aus. */
  .heart { color: var(--accent); display: block; }
  .legal {
    margin: 18px 0 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
  }
  .legal a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(142, 163, 189, 0.45); }

  /* ---------- Wofuer: drei kurze Beispiele unter den Rollen (01.10.2026) ---------- */
  .wofuer {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 18px);
    margin: clamp(28px, 4vh, 48px) 0 0;
    padding: 0;
    text-align: left;
  }
  .wofuer li {
    padding: clamp(16px, 1.8vw, 22px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  .wofuer h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--moon); }
  .wofuer p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }

  /* ---------- Fragen ---------- */
  .stage-head { margin-bottom: clamp(28px, 5vh, 56px); }
  .qa {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 2vw, 24px);
    margin: clamp(40px, 6vh, 72px) 0 0;
    text-align: left;
  }
  .qa-item {
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
  }
  .qa dt { margin: 0 0 10px; font-size: 1.0625rem; font-weight: 600; color: var(--text); }
  .qa dd { margin: 0; font-size: 0.9375rem; line-height: 1.68; color: var(--muted); }

  .fineprint.contact { margin-top: 10px; }
  .pr-klein { max-width: 680px; margin: 22px auto 0; font-size: 13px; line-height: 1.6; }
  .fineprint.contact a { color: var(--aurora); text-decoration: none; border-bottom: 1px solid rgba(99, 210, 188, 0.35); }

  /* ---------- Tastaturbedienung ----------
     Ohne sichtbaren Fokus ist auf dieser dunklen Fläche nicht zu erkennen, wo man steht. */
  a:focus-visible,
  .store:focus-visible,
  .rail:focus-visible {
    outline: 2px solid var(--aurora);
    outline-offset: 3px;
    border-radius: 8px;
  }

  @media (hover: hover) {
    .store.ready:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(194, 59, 14, 0.5); }
    .store.soon:hover { border-color: rgba(255, 255, 255, 0.18); }
  }

  /* ---------- Reveal ---------- */
  .chrivo-js [data-rise] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .chrivo-js [data-rise].is-in { opacity: 1; transform: none; }
  /* Grosse Bildbausteine ruhiger: weniger Weg, laengere Dauer, sanftes
     Standard-Easing. 30px/0,8s wirken bei grossen Bildern wie Hineinspringen
     (dieselbe Erkenntnis wie bei der Galerie auf kuljkin.de). */
  .chrivo-js .fan[data-rise], .chrivo-js .zeros[data-rise] {
    transform: translate3d(0, 12px, 0);
    transition-duration: 1.2s, 1.2s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1), cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* ---------- Schmal ---------- */
  @media (max-width: 900px) {
    .stage-grid { grid-template-columns: 1fr; gap: 0; }
    .stage-visual { display: none; }
    .stage-steps { padding: 0; }
    .step { min-height: 0; opacity: 1; margin-bottom: clamp(70px, 12vh, 120px); }
    .step-shot {
      display: block;
      margin: 0 auto 30px;
      padding: 6px;
      width: min(64vw, 260px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 30px;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
    }
    .step-shot img { border-radius: 24px; }
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cell-wide { grid-column: span 2; }
    .steps { grid-template-columns: 1fr; gap: 26px; }
    .fan { gap: 0; }
    .p-left, .p-right { display: none; }
    .p-mid { width: min(62vw, 280px); }
  }

  @media (max-width: 900px) {
    .aurora { display: none; }
    .stagelight {
      background:
        radial-gradient(92% 58% at 16% 6%, rgba(99, 210, 188, 0.22), transparent 62%),
        radial-gradient(88% 54% at 90% 24%, rgba(143, 124, 232, 0.20), transparent 64%),
        radial-gradient(130% 46% at 50% 100%, rgba(235, 214, 163, 0.07), transparent 72%),
        linear-gradient(180deg, #0a1e38 0%, var(--night) 74%);
    }
    .finale {
      background:
        radial-gradient(92% 48% at 14% 12%, rgba(99, 210, 188, 0.16), transparent 64%),
        radial-gradient(84% 44% at 88% 30%, rgba(143, 124, 232, 0.14), transparent 66%),
        linear-gradient(180deg, var(--night) 0%, #0a1e38 100%);
    }
    .mark { filter: none; }
    .fan { perspective: none; }
    .phone { box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45); }
    .tile-art img { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42); }
    .stores { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 320px; }
    .store.ready { box-shadow: 0 12px 26px rgba(194, 59, 14, 0.34); }
  }

  @media (max-width: 760px) {
    .wofuer, .qa { grid-template-columns: 1fr; }
  }

  @media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .cell-wide { grid-column: span 1; }
    .zeros { gap: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .veil, .scrollhint span { animation: none !important; }
    .chrivo-js [data-rise] { opacity: 1; transform: none; transition: none; }
    .phone-lg .frame { transition: none; }
  }

  /* ---------- Seitenrahmen seit dem Umbau auf mehrere Seiten (25.09.2026) ---------- */
  .topnav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(7, 21, 39, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .topnav-in {
    max-width: 1120px; margin: 0 auto; padding: 0 var(--pad);
    height: 56px; display: flex; align-items: center; gap: 22px;
  }
  .topnav-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: Roboto, Inter, sans-serif; font-weight: 900; letter-spacing: 0.16em; font-size: 15px; }
  .topnav-brand img { width: 26px; height: 26px; }
  .topnav-links { display: flex; gap: 22px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
  .topnav-links::-webkit-scrollbar { display: none; }
  .topnav-links a { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; padding: 6px 0; }
  .topnav-links a:hover, .topnav-links a[aria-current="page"] { color: var(--text); }
  @media (max-width: 640px) {
    .topnav-in { gap: 14px; }
    .topnav-brand span { display: none; }
    .topnav-links { gap: 16px; }
    .topnav-links a { font-size: 13.5px; }
  }

  .pagehead { position: relative; overflow: hidden; padding: clamp(120px, 18vh, 190px) 0 clamp(40px, 7vh, 80px); text-align: center; }
  .pagehead .big { margin: 0 auto; max-width: 18ch; }
  .pagehead .lede { margin-left: auto; margin-right: auto; }

  .links4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  @media (max-width: 720px) { .links4 { grid-template-columns: 1fr; } }
  .linkcard { display: block; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
  .linkcard:hover { border-color: rgba(99, 210, 188, 0.45); transform: translateY(-2px); }
  .linkcard h3 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 700; }
  .linkcard p { margin: 0; color: var(--muted); font-size: 15px; }
  .linkcard .more { display: inline-block; margin-top: 12px; color: var(--aurora); font-size: 14px; font-weight: 600; }

  .prose { max-width: 720px; margin: 0 auto; }
  .prose h2 { font-family: Roboto, Inter, sans-serif; font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.02em; margin: 56px 0 14px; }
  .prose h3 { font-size: 1.125rem; margin: 28px 0 8px; }
  .prose p, .prose li { color: var(--muted); }
  .prose strong { color: var(--text); }
  .prose ul, .prose ol { padding-left: 1.2em; }
  .prose li { margin: 6px 0; }
  .facts { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
  .facts th, .facts td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .facts th { color: var(--text); font-weight: 600; width: 38%; }
  .facts td { color: var(--muted); }
  .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
  @media (max-width: 640px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .shots a { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .section-pad { padding: clamp(48px, 8vh, 110px) 0; }

  /* =====================================================================
     Inszenierung der Startseite (25.09.2026): schwebende Navigation,
     Eroeffnung mit Kamerafahrt ins Handy, die Nacht als Zeitraffer.
     Alle Bewegungen haengen an --p und --t, die wow.js beim Scrollen setzt.
     ===================================================================== */

  /* ---------- Navigation: eine schwebende Glaspille ---------- */
  .glassnav {
    position: fixed; z-index: 60; top: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    padding: 6px 6px 6px 14px;
    border-radius: 999px;
    background: rgba(10, 30, 56, 0.55);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    backdrop-filter: saturate(170%) blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: padding .35s ease, top .35s ease, background .35s ease, box-shadow .35s ease;
  }
  .glassnav::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(120deg, rgba(99, 210, 188, 0.55), rgba(143, 124, 232, 0.35) 45%, rgba(255, 255, 255, 0.06) 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .7;
  }
  .glassnav.is-small { top: 8px; background: rgba(7, 21, 39, 0.72); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }
  .glassnav-brand { display: flex; align-items: center; gap: 9px; margin-right: 8px; color: var(--text); text-decoration: none; font-family: Roboto, Inter, sans-serif; font-weight: 900; letter-spacing: .18em; font-size: 13px; }
  .glassnav-brand img { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(99, 210, 188, .45)); }
  .glassnav-links { display: flex; gap: 2px; }
  .glassnav-links a {
    position: relative; padding: 9px 14px; border-radius: 999px;
    color: var(--muted); text-decoration: none; font-size: 14px; letter-spacing: .01em;
    transition: color .2s ease, background .2s ease;
  }
  .glassnav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
  .glassnav-links a[aria-current="page"] { color: var(--text); background: rgba(99, 210, 188, 0.14); box-shadow: inset 0 0 0 1px rgba(99, 210, 188, 0.35), 0 0 18px rgba(99, 210, 188, 0.18); }
  .menu-btn { display: none; }

  @media (max-width: 760px) {
    .glassnav { left: 16px; right: 16px; transform: none; justify-content: space-between; padding: 6px 6px 6px 14px; }
    .glassnav-links { display: none; }
    .menu-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      height: 38px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
      background: rgba(255, 255, 255, 0.08); color: var(--text); font: 500 14px Inter, sans-serif;
    }
    .menu-btn .bars { position: relative; width: 16px; height: 10px; }
    .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s ease, top .3s ease; }
    .menu-btn .bars::before { top: 1px; } .menu-btn .bars::after { top: 7px; }
    .menu-btn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
    .menu-btn[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }
  }

  .menu-sheet {
    position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center;
    padding: 90px 28px 40px; background: rgba(5, 14, 28, 0.92);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
  }
  .menu-sheet.is-open { opacity: 1; pointer-events: auto; }
  .menu-sheet .aurora { opacity: .5; }
  .menu-sheet a {
    position: relative; display: block; padding: 10px 0; color: var(--text); text-decoration: none;
    font-family: Roboto, Inter, sans-serif; font-weight: 900; font-size: clamp(2.2rem, 11vw, 3.2rem); letter-spacing: -0.03em;
    transform: translateY(14px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
  }
  .menu-sheet.is-open a { transform: none; opacity: 1; }
  .menu-sheet.is-open a:nth-child(2) { transition-delay: .04s; } .menu-sheet.is-open a:nth-child(3) { transition-delay: .08s; }
  .menu-sheet.is-open a:nth-child(4) { transition-delay: .12s; } .menu-sheet.is-open a:nth-child(5) { transition-delay: .16s; }
  .menu-sheet a[aria-current="page"] { color: var(--aurora); }
  html.menu-open { overflow: hidden; }

  /* ---------- Sternenhimmel, von beiden Szenen genutzt ---------- */
  .stars {
    position: absolute; inset: -10%; pointer-events: none;
    background-image:
      radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(1.4px 1.4px at 44% 34%, rgba(235,214,163,.85), transparent 60%),
      radial-gradient(1px 1px at 63% 12%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(1.2px 1.2px at 78% 58%, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(1px 1px at 90% 26%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1.1px 1.1px at 8% 88%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1.3px 1.3px at 55% 84%, rgba(235,214,163,.6), transparent 60%),
      radial-gradient(1px 1px at 36% 8%, rgba(255,255,255,.45), transparent 60%),
      radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,.35), transparent 60%);
    background-size: 520px 520px;
    animation: funkeln 7s ease-in-out infinite alternate;
  }
  @keyframes funkeln { from { opacity: .55; } to { opacity: 1; } }

  /* ---------- Eroeffnung: Kamerafahrt ins Handy ---------- */
  .opening { position: relative; height: 230vh; --p: 0; }
  .opening-stick { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
  .opening-mark {
    position: relative; z-index: 2; text-align: center; padding: 64px var(--pad) 0;
    transform: translate3d(0, calc(var(--p) * -14vh), 0) scale(calc(1 - var(--p) * 0.38));
    opacity: calc(1 - var(--p) * 1.7);
    will-change: transform, opacity;
  }
  /* Auch nach der Fensterhöhe begrenzt (27.09.2026): auf niedrigen Fenstern lief der Kopf über den
     Bildschirm und die Marke unter die schwebende Navigation. Das Wippen 6 s statt 7 s
     (Philipp: „minimal schneller, dass man das wippen besser sieht"). */
  .opening-mark .mark { width: min(62vw, 380px, 38vh); margin: 0 auto 10px; filter: drop-shadow(0 0 60px rgba(99, 210, 188, 0.25)); animation: schweben 6s ease-in-out infinite; }
  @keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .opening-phone {
    position: absolute; z-index: 3; left: 50%; top: 50%;
    width: clamp(210px, 26vw, 300px);
    transform: translate3d(-50%, calc(-50% + (1 - var(--p)) * 62vh), 0) perspective(1200px) rotateX(calc((1 - var(--p)) * 24deg)) scale(calc(0.82 + var(--p) * 0.18));
    opacity: calc(var(--p) * 2.2 - 0.25);
    will-change: transform, opacity;
  }
  /* Fester Schein statt eines, der mit dem Scrollen waechst: sonst zeichnet Safari das Handy bei
     jedem Bild neu (Befund 25.09.2026, erstes Scrollen ruckelte). */
  .opening-phone .phone { box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 70px rgba(99, 210, 188, 0.16); }
  .opening-caption {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 7vh; text-align: center; padding: 0 var(--pad);
    opacity: calc((var(--p) - 0.62) * 3.2);
    transform: translate3d(0, calc((1 - var(--p)) * 30px), 0);
  }
  .opening-caption .mid { margin: 0; }
  .opening-caption p { margin: 8px 0 0; color: var(--muted); }
  @media (max-width: 760px) {
    .opening-phone { width: min(58vw, 250px); }
    .opening-caption { bottom: 4vh; }
  }

  /* ---------- Die Nacht als Zeitraffer ---------- */
  /* Der Himmel liegt in der Buehne und endet mit ihr. Kennt ein Browser `dvh` nicht und faellt
     auf `100vh` zurueck, kann darunter ein Streifen bleiben; der traegt dann wenigstens
     dieselbe Farbe wie der Nachthimmel und nicht den helleren Seitengrund. */
  .night { position: relative; height: 420vh; --t: 0; background: #050d1a; }
  /* `dvh` statt `svh` (30.09.2026, Philipps Befund auf dem iPhone): `svh` bemisst die Buehne
     nach dem kleinen Viewport, also dem Zustand mit ausgeklappten Safari-Leisten. Klappt Safari
     sie beim Scrollen ein, waechst der sichtbare Bereich um rund 90 px, die Buehne bleibt aber
     stehen, und unten blieb ein Streifen, in dem Text und Fortschrittslinie zu hoch sassen.
     `dvh` folgt dem Leistenzustand. Der Preis ist ein einmaliger Sprung beim Ein- und
     Ausklappen, kein Zittern waehrend der Leistenanimation. `100vh` davor bleibt Rueckfall. */
  .night-stick { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
  .sky { position: absolute; inset: 0; }
  .sky-night { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, #0d2548 0%, #071527 60%, #050d1a 100%); }
  .sky-dawn {
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 50% 110%, rgba(255, 170, 110, 0.55) 0%, rgba(143, 124, 232, 0.28) 38%, rgba(10, 30, 56, 0) 70%);
    opacity: clamp(0, calc((var(--t) - 0.82) * 5.5), 1);
  }
  .night .stars { opacity: clamp(0, calc(1 - (var(--t) - 0.82) * 5), 1); }
  .moon-orb {
    position: absolute; width: 64px; height: 64px; border-radius: 50%; left: 8%; top: 26%;
    transform: translate3d(calc(var(--t) * 80vw), calc(sin(calc(var(--t) * 180deg)) * -16vh), 0);
    will-change: transform;
    background: radial-gradient(circle at 35% 35%, #fff7df, #ebd6a3 55%, rgba(235,214,163,.2) 72%, transparent 74%);
    box-shadow: 0 0 60px rgba(235, 214, 163, 0.35);
    opacity: clamp(0, calc(1 - (var(--t) - 0.86) * 6), 0.9);
  }
  .night-grid {
    position: relative; z-index: 2; height: 100%;
    max-width: 1120px; margin: 0 auto; padding: 90px var(--pad) 40px;
    display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(24px, 5vw, 80px);
  }
  .night-clock {
    font-family: Roboto, Inter, sans-serif; font-weight: 100; font-size: clamp(3.4rem, 9vw, 7rem);
    letter-spacing: -0.02em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 40px rgba(99, 210, 188, 0.18);
  }
  /* Alle Momente liegen in derselben Rasterzelle uebereinander. Dadurch ist der Kasten
     genau so hoch wie der laengste Text, ohne dass jemand eine Hoehe raten muss.
     Vorher stand hier `min-height` plus absolut positionierte Kinder: absolute Kinder
     tragen nichts zur Hoehe bei, also schnitt die Buehne (`overflow: hidden`) jeden Text
     ab, der laenger war als der geratene Wert. Auf Philipps iPhone fehlte am 30.09.2026
     die letzte Zeile mitten im Satz, und die Fortschrittslinie lag quer darueber.
     Bei 390x664 waren es 33 Pixel. Gemessen, nicht geschaetzt. */
  .night-moments { position: relative; display: grid; margin-top: 22px; }
  .moment { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .moment.is-on { opacity: 1; transform: none; }
  .moment .eyebrow { margin-bottom: 10px; }
  .moment h3 { margin: 0 0 10px; font-family: Roboto, Inter, sans-serif; font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -0.025em; line-height: 1.08; }
  .moment p { margin: 0; color: var(--muted); max-width: 34ch; }
  .moment-alarm .eyebrow { color: var(--accent); }

  .night-phone { justify-self: center; position: relative; width: clamp(210px, 25vw, 290px); transition: filter .6s ease; }
  .night-phone .phone { position: relative; transition: box-shadow .6s ease; }
  .night-phone .screen { position: relative; border-radius: 28px; overflow: hidden; }
  .night-phone .screen img { border-radius: 0; }
  .night-phone .screen .shot-morning { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
  .night-phone[data-state="morgen"] .shot-morning { opacity: 1; }
  /* Die Zustände sind echte Bildschirmfotos der App (27.09.2026): der lebende Ring wird im
     Hinweis mondfarben, im Alarm orange mit Schweif, genau wie in CHRIVO. */
  .night-phone .screen .shot-hinweis, .night-phone .screen .shot-alarm { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
  .night-phone[data-state="hinweis"] .shot-hinweis, .night-phone[data-state="gespraech"] .shot-hinweis,
  .night-phone[data-state="alarm"] .shot-alarm { opacity: 1; }
  .dimmer { position: absolute; inset: 0; background: #000; opacity: .55; transition: opacity .7s ease; pointer-events: none; }
  .night-phone[data-state="alarm"] .dimmer, .night-phone[data-state="sprechen"] .dimmer, .night-phone[data-state="morgen"] .dimmer { opacity: 0; }
  .chip {
    position: absolute; left: 50%; top: 21%; transform: translateX(-50%);
    padding: 6px 14px; border-radius: 999px; white-space: nowrap;
    font: 600 12px Inter, sans-serif; letter-spacing: .04em;
    background: rgba(10, 30, 56, 0.85); color: var(--muted); border: 1px solid rgba(255,255,255,.12);
    transition: color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  .chip span { display: none; }
  .night-phone[data-state="ruhig"] .chip .c-ruhig,
  .night-phone[data-state="gespraech"] .chip .c-ruhig,
  .night-phone[data-state="hinweis"] .chip .c-hinweis,
  .night-phone[data-state="alarm"] .chip .c-alarm,
  .night-phone[data-state="sprechen"] .chip .c-sprechen,
  .night-phone[data-state="morgen"] .chip .c-morgen { display: inline; }
  .night-phone[data-state="hinweis"] .chip { color: var(--moon); border-color: rgba(235,214,163,.4); }
  .night-phone[data-state="alarm"] .chip { color: #fff; background: rgba(194, 59, 14, 0.9); border-color: rgba(255,122,61,.7); box-shadow: 0 0 24px rgba(255,122,61,.55); }
  .night-phone[data-state="sprechen"] .chip { color: #062a24; background: var(--aurora); border-color: transparent; }
  .night-phone .phone::after {
    content: ""; position: absolute; inset: -2px; border-radius: 36px; pointer-events: none;
    box-shadow: 0 0 0 2px rgba(255,122,61,.6), 0 0 80px rgba(255,122,61,.4); opacity: 0; transition: opacity .5s ease;
  }
  .night-phone[data-state="alarm"] .phone::after { opacity: 1; animation: alarmpuls 1.6s ease-in-out infinite; }
  @keyframes alarmpuls { 50% { opacity: .35; } }
  .night-phone[data-state="morgen"] .chip { display: none; }

  .wave { position: absolute; left: 10%; right: 10%; bottom: 20%; height: 40px; display: flex; align-items: center; gap: 3px; }
  .wave i { flex: 1; height: 8%; border-radius: 3px; background: var(--aurora); opacity: .8; transform-origin: center; animation: welle 1.2s ease-in-out infinite; }
  .wave i:nth-child(3n) { animation-delay: -.3s; } .wave i:nth-child(3n+1) { animation-delay: -.7s; } .wave i:nth-child(4n) { animation-delay: -.5s; }
  @keyframes welle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2.2); } }
  .night-phone[data-state="hinweis"] .wave i { background: var(--moon); height: 30%; }
  .night-phone[data-state="gespraech"] .wave i { background: var(--moon); height: 22%; opacity: .55; }
  .night-phone[data-state="alarm"] .wave i { background: var(--accent); height: 60%; animation-duration: .7s; }
  .night-phone[data-state="sprechen"] .wave i { height: 34%; }
  .night-phone[data-state="morgen"] .wave { display: none; }

  .night-progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; z-index: 3; }
  .night-progress::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--t) * 100%); background: linear-gradient(90deg, var(--aurora), var(--moon)); border-radius: 2px; }

  @media (max-width: 760px) {
    /* max-content fuer Uhr und Text, damit das Raster sie bei Platzmangel nicht
       zusammenschiebt; minmax(0,1fr) laesst allein das Handy nachgeben. */
    .night-grid { grid-template-columns: 1fr; grid-template-rows: max-content minmax(0, 1fr) max-content; align-items: start; padding-top: 78px; gap: 10px; text-align: center; }
    /* Die Breite ist die einzige Quelle der Groesse, die Hoehe folgt dem Seitenverhaeltnis
       des Bildes. Sie steht in `--handy-breite`, weil es weiter unten einen zweiten
       760er-Block gibt, der sie frueher noch einmal gesetzt und alles hier ueberstimmt hat.
       ACHTUNG: Derselbe spaetere Block ueberschreibt auch `padding` und `gap` von
       `.night-grid` und die Groesse von `.night-clock`. Wer diese drei hier aendert, sieht
       keine Wirkung, sie gehoeren dort geaendert.
       Nach Schirmhoehe gestaffelt weiter unten. */
    .night-phone { grid-row: 2; align-self: center; --handy-breite: min(44vw, 200px); width: var(--handy-breite); }
    .night-text { display: contents; }
    .night-clock { grid-row: 1; font-size: clamp(2.8rem, 15vw, 4rem); }
    .night-moments { grid-row: 3; margin-top: 0; }
    .moment p { margin: 0 auto; }
  }

  /* ---------- Bewegung reduzieren: alles steht und ist lesbar ---------- */
  html.wow-still .opening { height: auto; }
  html.wow-still .opening-stick { position: relative; height: auto; padding: 120px 0 60px; display: block; }
  html.wow-still .opening-mark { transform: none; opacity: 1; }
  html.wow-still .opening-phone { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin: 40px auto 0; }
  html.wow-still .opening-caption { position: relative; bottom: auto; opacity: 1; transform: none; margin-top: 24px; }
  html.wow-still .night { height: auto; }
  html.wow-still .night-stick { position: relative; height: auto; }
  html.wow-still .night-grid { height: auto; }
  html.wow-still .night-moments { min-height: 0; }
  html.wow-still .night-moments { display: block; }
  html.wow-still .moment { grid-area: auto; position: relative; opacity: 1; transform: none; margin-bottom: 26px; }
  html.wow-still .stars, html.wow-still .opening-mark .mark, html.wow-still .wave i { animation: none; }
  @media (prefers-reduced-motion: reduce) { .glassnav, .menu-sheet, .menu-sheet a { transition: none; } }
  /* Feinschliff nach den ersten Aufnahmen (25.09.2026): der Scroll-Hinweis verschwindet mit
     der Kamerafahrt, und der Mond laeuft auf dem Handy unterhalb der Uhr statt durch sie. */
  .opening .scrollhint { opacity: calc(1 - var(--p) * 6); }
  /* Im Fluss unter der Vertrauenszeile statt am Bildschirmrand (27.09.2026): unten fest
     verankert lag er auf niedrigen Fenstern auf der Zeile. */
  .opening-mark .scrollhint { position: relative; left: auto; bottom: auto; transform: none; margin: 30px auto 0; display: block; }
  @media (max-width: 760px) {
    .moon-orb { width: 42px; height: 42px; top: 46%; left: 4%; z-index: 1; }
  }
  /* Desktop: das Handy der Eroeffnung richtet sich nach der Hoehe, damit die Ueberschrift
     darunter frei bleibt. */
  @media (min-width: 761px) {
    .opening-phone { width: min(26vw, 290px, 30vh); top: 45%; }
  }

  /* ---------- Szene 4: die Stimme ---------- */
  .voice { padding: clamp(80px, 14vh, 170px) 0 clamp(40px, 8vh, 90px); }
  .voice-stage { margin: clamp(40px, 7vh, 80px) auto 0; max-width: 900px; }
  .voice-bars { height: 180px; display: flex; align-items: center; gap: clamp(2px, .5vw, 5px); }
  .voice-bars i {
    flex: 1; height: 10%; border-radius: 4px; background: var(--moon); opacity: .75;
    transform-origin: center; transition: height 1.2s cubic-bezier(.2,.7,.2,1), background .6s ease, opacity .6s ease, box-shadow .6s ease;
  }
  /* erste Haelfte: Gespraech, flach und ruhig; zweite Haelfte: Kind, hoch und orange */
  .voice.is-in .voice-bars i { animation: stimme 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); }
  .voice.is-in .voice-bars i:nth-child(n+29) { background: var(--accent); opacity: 1; box-shadow: 0 0 16px rgba(255,122,61,.45); animation-name: schrei; animation-duration: 1.1s; }
  @keyframes stimme { 0%,100% { height: 12%; } 50% { height: 30%; } }
  @keyframes schrei { 0%,100% { height: 35%; } 50% { height: 95%; } }
  .voice-labels { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 14px; color: var(--muted); }
  .voice-labels b { display: block; color: var(--text); font-weight: 600; }
  .vl-adult b { color: var(--moon); } .vl-child { text-align: right; } .vl-child b { color: var(--accent); }

  /* ---------- Szene 5: zwei Handys ---------- */
  .link2 { padding: clamp(60px, 10vh, 130px) 0; }
  .link2-stage { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 820px; margin: clamp(40px, 7vh, 80px) auto; }
  .link2-stage .phone { width: clamp(120px, 20vw, 220px); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1s ease; opacity: 0; }
  .link2-a { transform: translateX(-40px) rotate(-6deg); }
  .link2-b { transform: translateX(40px) rotate(6deg); }
  .link2.is-in .link2-stage .phone { opacity: 1; }
  .link2.is-in .link2-a { transform: rotate(-4deg); } .link2.is-in .link2-b { transform: rotate(4deg); }
  .link2-line { position: absolute; left: 22%; right: 22%; top: 50%; width: 56%; height: 60px; transform: translateY(-50%); overflow: visible; }
  .link2-line path { fill: none; stroke: var(--aurora); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 12; filter: drop-shadow(0 0 8px rgba(99,210,188,.8)); opacity: 0; transition: opacity 1s ease .6s; }
  .link2.is-in .link2-line path { opacity: 1; animation: fluss 1.4s linear infinite; }
  @keyframes fluss { to { stroke-dashoffset: -36; } }

  /* ---------- Szene 7: Finale als Sonnenaufgang ---------- */
  .finale::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 70%; pointer-events: none; z-index: 0;
    background: radial-gradient(90% 100% at 50% 100%, rgba(255, 170, 110, 0.32) 0%, rgba(143, 124, 232, 0.16) 40%, transparent 72%);
    opacity: 0; transition: opacity 2.4s ease;
  }
  .finale.is-in::after { opacity: 1; }

  html.wow-still .voice-bars i { animation: none !important; height: 30%; }
  html.wow-still .voice-bars i:nth-child(n+29) { height: 70%; background: var(--accent); }
  html.wow-still .link2-stage .phone, html.wow-still .link2-line path { opacity: 1; transform: none; animation: none; }
  html.wow-still .finale::after { opacity: 1; }
  @media (max-width: 640px) {
    .voice-bars { height: 130px; }
    .voice-labels { font-size: 12.5px; }
    .link2-line { left: 26%; right: 26%; width: 48%; }
  }
  @media (max-width: 640px) {
    .link2-stage { padding: 0 6px; }
    .link2-stage .phone { width: 33vw; }
  }

  /* ===== Unterseiten mit Auftritt (25.09.2026, Philipp: „schau dir alles nochmal an, was man
     noch mega geiler machen kann") ===== */
  /* Der Kopf und der erste Abschnitt brachten beide ihren vollen Abstand mit, dazwischen klaffte
     ein Loch. */
  .pagehead + section, .pagehead + .privacy { padding-top: clamp(8px, 2vh, 28px); }

  .pagehead { isolation: isolate; }
  .pagehead::before {
    content: ""; position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(40% 55% at 22% 30%, rgba(99, 210, 188, 0.16), transparent 70%),
      radial-gradient(45% 60% at 80% 20%, rgba(143, 124, 232, 0.16), transparent 70%);
    animation: kopflicht 14s ease-in-out infinite alternate;
  }
  .pagehead::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
    background-image:
      radial-gradient(1.2px 1.2px at 14% 24%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(1px 1px at 32% 70%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1.3px 1.3px at 58% 18%, rgba(235,214,163,.8), transparent 60%),
      radial-gradient(1px 1px at 76% 62%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(1.1px 1.1px at 90% 30%, rgba(255,255,255,.5), transparent 60%);
    background-size: 460px 300px;
    animation: funkeln 6s ease-in-out infinite alternate;
  }
  @keyframes kopflicht { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(3%, 2%, 0); } }
  .pagehead .big {
    background: linear-gradient(175deg, #ffffff 30%, #cfe9e3 70%, var(--moon) 120%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* Karten folgen dem Finger oder der Maus mit einem weichen Lichtkegel. */
  .cell, .linkcard, .ear-card, .qa-item { position: relative; overflow: hidden; }
  .cell::before, .linkcard::before, .ear-card::before, .qa-item::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 210, 188, 0.14), transparent 60%);
  }
  .cell:hover::before, .linkcard:hover::before, .ear-card:hover::before, .qa-item:hover::before { opacity: 1; }
  .cell > *, .linkcard > *, .ear-card > *, .qa-item > * { position: relative; }

  /* Fragen als Aufklapper: die Antworten stehen weiter im Quelltext, fuer die Suche. */
  .qa details { border-bottom: 1px solid var(--line); }
  .qa summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 20px 4px; font-size: 1.0625rem; font-weight: 600; color: var(--text);
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--aurora); border-bottom: 2px solid var(--aurora);
    transform: rotate(45deg) translateY(-3px); transition: transform .3s ease;
  }
  .qa details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .qa details[open] summary { color: var(--aurora); }
  .qa details p { margin: 0 4px 22px; color: var(--muted); line-height: 1.68; font-size: 0.9375rem; animation: aufklappen .35s ease; }
  @keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* Einrichtung: die Schritte bekommen leuchtende Nummern. */
  .steps .snum { text-shadow: 0 0 22px rgba(99, 210, 188, 0.55); }

  html.wow-still .pagehead::before, html.wow-still .pagehead::after { animation: none; }
  .qa.qa-list { display: block; max-width: 820px; margin: 0 auto; }

  /* ===== Ueberleitung zwischen den Seiten (25.09.2026) ===== */
  /* Weicher Wechsel zwischen den Seiten, die Navigation bleibt dabei stehen. Browser ohne
     Unterstuetzung wechseln wie bisher. */
  @view-transition { navigation: auto; }
  .glassnav { view-transition-name: navpille; }
  ::view-transition-old(root) { animation: seite-raus .38s cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root) { animation: seite-rein .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes seite-raus { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(4px); } }
  @keyframes seite-rein { from { opacity: 0; transform: translateY(18px) scale(1.01); filter: blur(4px); } }
  @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

  .nextpage { padding: clamp(30px, 6vh, 70px) 0 clamp(50px, 8vh, 100px); }
  .nextcard {
    position: relative; overflow: hidden; display: grid; gap: 6px;
    padding: clamp(28px, 5vw, 56px); border-radius: 30px; text-decoration: none; color: var(--text);
    background: linear-gradient(140deg, rgba(99,210,188,.12), rgba(143,124,232,.10) 50%, rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    transform: translateY(24px); opacity: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease, border-color .3s ease;
  }
  .nextpage.is-in .nextcard { transform: none; opacity: 1; }
  .nextcard::after {
    content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 180%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(99,210,188,.22), transparent);
    transition: transform .6s ease;
  }
  .nextcard:hover { border-color: rgba(99,210,188,.45); }
  .nextcard:hover::after { transform: translateX(-12%); }
  .nextcard .eyebrow { margin: 0; }
  .nextcard-title { font-family: Roboto, Inter, sans-serif; font-weight: 900; font-size: clamp(2.4rem, 7vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; }
  .nextcard-text { color: var(--muted); max-width: 44ch; }
  .nextcard-arrow {
    position: absolute; right: clamp(24px, 4vw, 48px); bottom: clamp(24px, 4vw, 48px);
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: var(--aurora); color: #062a24; box-shadow: 0 0 30px rgba(99,210,188,.45);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .nextcard:hover .nextcard-arrow { transform: translateX(6px); }
  @media (max-width: 640px) { .nextcard { padding-bottom: 96px; } }
  html.wow-still .nextcard { transform: none; opacity: 1; }

  /* ---------- Funktionen: der Faecher oeffnet sich ---------- */
  .fanhead { margin-top: clamp(36px, 6vh, 70px); }
  .fanhead .phone { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity 1s ease; }
  .fanhead .p-left { transform: translateX(64%) rotateY(0) scale(.86); opacity: 0; }
  .fanhead .p-right { transform: translateX(-64%) rotateY(0) scale(.86); opacity: 0; }
  .fanhead .p-mid { transform: translateY(30px) scale(.96); opacity: .0; }
  .fanhead.is-in .p-mid { transform: none; opacity: 1; }
  .fanhead.is-in .p-left { transform: translateX(14%) rotateY(16deg) scale(.94); opacity: .85; transition-delay: .15s; }
  .fanhead.is-in .p-right { transform: translateX(-14%) rotateY(-16deg) scale(.94); opacity: .85; transition-delay: .15s; }
  .fanhead .p-mid { box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 70px rgba(99,210,188,.18); }

  /* ---------- Sicherheit: Schutzschild in der Verbindung ---------- */
  .shield { padding-top: 0; }
  .shield-orb {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
    width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; color: #062a24;
    background: radial-gradient(circle at 35% 30%, #b6f1e4, var(--aurora) 60%, #3aa892);
    box-shadow: 0 0 0 10px rgba(99,210,188,.12), 0 0 60px rgba(99,210,188,.55);
    transition: transform .9s cubic-bezier(.2,.9,.2,1.2) .5s, opacity .6s ease .5s;
  }
  .shield.is-in .shield-orb { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: schild 3s ease-in-out 1.4s infinite; }
  @keyframes schild { 50% { box-shadow: 0 0 0 18px rgba(99,210,188,.05), 0 0 90px rgba(99,210,188,.65); } }

  /* ---------- Einrichtung: die Schritte verbinden sich ---------- */
  .setup-line .steps li { position: relative; border-top-color: rgba(255,255,255,.06); }
  .setup-line .steps li::before {
    content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--aurora), var(--moon)); box-shadow: 0 0 14px rgba(99,210,188,.6);
    transition: width 1s cubic-bezier(.2,.7,.2,1);
  }
  .setup-line.is-in .steps li::before { width: 100%; }
  .setup-line.is-in .steps li:nth-child(2)::before { transition-delay: .5s; }
  .setup-line.is-in .steps li:nth-child(3)::before { transition-delay: 1s; }

  html.wow-still .fanhead .phone { transition: none; }
  html.wow-still .fanhead .p-mid { transform: none; opacity: 1; }
  html.wow-still .fanhead .p-left { transform: translateX(14%) rotateY(16deg) scale(.94); opacity: .85; }
  html.wow-still .fanhead .p-right { transform: translateX(-14%) rotateY(-16deg) scale(.94); opacity: .85; }
  html.wow-still .shield-orb { transform: translate(-50%, -50%); opacity: 1; animation: none; }
  html.wow-still .setup-line .steps li::before { width: 100%; transition: none; }

  /* ---------- Sicherheit: vier Schutzkarten ---------- */
  .guard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 10px 0 20px; }
  @media (max-width: 980px) { .guard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .guard-grid { grid-template-columns: 1fr; } }
  .guard { padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
  .guard h3 { margin: 14px 0 8px; font-size: 1.125rem; }
  .guard p { margin: 0; color: var(--muted); font-size: 15px; }
  .guard-icon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--aurora);
    background: rgba(99,210,188,.10); box-shadow: inset 0 0 0 1px rgba(99,210,188,.3), 0 0 26px rgba(99,210,188,.18);
  }

  /* ---------- Einrichtung: Koppeln mit Scan-Linie ---------- */
  .scan { padding: clamp(70px, 11vh, 140px) 0; }
  .scan-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(28px, 6vw, 90px); }
  @media (max-width: 760px) { .scan-grid { grid-template-columns: 1fr; text-align: center; } .scan .lede { margin-left: auto; margin-right: auto; } }
  .scan-phone { position: relative; justify-self: center; width: clamp(200px, 24vw, 280px); }
  .scan-frame { position: absolute; left: 22%; right: 22%; top: 30%; aspect-ratio: 1; }
  .scan-frame i { position: absolute; width: 22%; height: 22%; border: 3px solid var(--aurora); filter: drop-shadow(0 0 6px rgba(99,210,188,.8)); opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; transform: translate(-12px,-12px); }
  .scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; transform: translate(12px,-12px); }
  .scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; transform: translate(-12px,12px); }
  .scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; transform: translate(12px,12px); }
  .scan.is-in .scan-frame i { opacity: 1; transform: none; }
  .scan-line { position: absolute; left: 22%; right: 22%; top: 30%; height: 2px; background: var(--aurora); box-shadow: 0 0 16px 2px rgba(99,210,188,.8); opacity: 0; }
  .scan.is-in .scan-line { animation: scannen 2.2s ease-in-out .6s 2 both; }
  @keyframes scannen { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 50% { transform: translateY(calc(var(--scanh, 150px))); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
  .scan-ok {
    position: absolute; left: 50%; bottom: 62%; transform: translate(-50%, 10px); opacity: 0;
    padding: 8px 18px; border-radius: 999px; background: var(--aurora); color: #062a24; font: 700 13px Inter, sans-serif; letter-spacing: .04em;
    box-shadow: 0 0 30px rgba(99,210,188,.6); transition: opacity .5s ease 5.2s, transform .6s cubic-bezier(.2,.9,.2,1.2) 5.2s;
  }
  .scan.is-in .scan-ok { opacity: 1; transform: translate(-50%, 0); }
  html.wow-still .scan-frame i, html.wow-still .scan-ok { opacity: 1; transform: none; transition: none; }
  html.wow-still .scan-ok { transform: translate(-50%, 0); }

  /* ---------- Presse: Bilder heben sich beim Zeigen ---------- */
  .shots a { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .shots a:hover { transform: translateY(-4px); border-color: rgba(99,210,188,.45); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
  /* Der Rahmen sitzt genau auf dem QR-Code des Bildschirmfotos vom 27.09.2026 (Kind-Ansicht im
     neuen Stil: der Code steht oben mittig in einer Glaskarte). Die Linie läuft über seine Höhe. */
  .scan-frame { left: 21.8%; right: auto; width: 56.6%; top: 22.8%; }
  .scan-line { left: 21.8%; right: auto; width: 56.6%; top: 22.8%; --scanh: calc(clamp(200px, 24vw, 280px) * 0.56); }
  /* Handy: der Faecher zeigt alle drei Handys, kleiner und ueberlappend, statt nur das mittlere
     (Philipp 25.09.2026: auf dem Handy soll derselbe Wow-Effekt ankommen). */
  @media (max-width: 640px) {
    .fan { perspective: 900px; }
    .fan .p-left, .fan .p-right { display: block; width: 30vw; }
    .fan .p-mid { width: 42vw; }
    .fan .p-left { transform: translateX(34%) rotateY(18deg) scale(.9); }
    .fan .p-right { transform: translateX(-34%) rotateY(-18deg) scale(.9); }
    .fanhead .p-left { transform: translateX(80%) scale(.8); }
    .fanhead .p-right { transform: translateX(-80%) scale(.8); }
    .fanhead.is-in .p-left { transform: translateX(34%) rotateY(18deg) scale(.9); }
    .fanhead.is-in .p-right { transform: translateX(-34%) rotateY(-18deg) scale(.9); }
    html.wow-still .fanhead .p-left { transform: translateX(34%) rotateY(18deg) scale(.9); }
    html.wow-still .fanhead .p-right { transform: translateX(-34%) rotateY(-18deg) scale(.9); }
  }

  /* ===== iPhone: fluessig statt schoen-teuer (25.09.2026, Philipp: „auf dem iPhone 17 sehr sehr
     ruckelig ... das Scrollen zu 6 Uhr dauert zu lang") =====
     Safari auf dem Handy zeichnet grosse weichgezeichnete Flaechen und Weichzeichner hinter der
     Navigation bei jedem Bild neu. Die Verlaeufe sind ohne Weichzeichner schon weich genug. */
  @media (max-width: 900px), (hover: none) {
    .veil { filter: none; animation: none !important; will-change: auto; opacity: .55; }
    .v1 { background: radial-gradient(closest-side, rgba(99, 210, 188, 0.42), transparent); }
    .v2 { background: radial-gradient(closest-side, rgba(143, 124, 232, 0.36), transparent); }
    .v3 { background: radial-gradient(closest-side, rgba(235, 214, 163, 0.16), transparent); }
    .stars, .pagehead::before, .pagehead::after { animation: none !important; }
    .glassnav, .glassnav.is-small { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 22, 42, 0.94); }
    .menu-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 14, 28, 0.98); }
    .opening-mark .mark { animation: none; filter: none; }
    .opening { height: 175vh; }
    .night { height: 330vh; }
  }
  @media (max-width: 760px) {
    /* Eroeffnung: die Zeile kommt oben unter der Navigation, das Handy darunter, nichts liegt
       uebereinander. */
    .opening-caption { top: 124px; bottom: auto; }
    .opening-caption .mid { font-size: clamp(1.5rem, 7vw, 2rem); }
    .opening-phone { top: 60%; width: min(50vw, 210px); }
    /* Nacht: kleineres Handy, Text sauber ueber der Fortschrittslinie */
    .night-grid { padding: 76px var(--pad) 44px; gap: 6px; }
    .night-phone { --handy-breite: min(40vw, 176px); }
    .night-clock { font-size: clamp(2.6rem, 13vw, 3.6rem); }
    .moment h3 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
    .moment p { font-size: 15px; }
    .night-progress { bottom: 14px; }
    .moon-orb { transform: translate3d(calc(var(--t) * 82vw), calc(sin(calc(var(--t) * 180deg)) * -8vh), 0); }
  }

  /* Kurze Schirme: das Handy gibt Platz ab, damit der Text vollstaendig bleibt (30.09.2026).
     Nach Hoehe gestaffelt, nicht nach `svh`: Einheiten mit Bezug zur Browserleiste lassen
     sich in keinem Pruefrahmen zuverlaessig messen, eine Hoehen-Abfrage schon. Die Zahlen
     sind gemessen, nicht geschaetzt, siehe die Tabelle im Commit. */
  @media (max-width: 760px) and (max-height: 780px) {
    .night-grid { padding-top: 70px; padding-bottom: 34px; }
    .night-phone { --handy-breite: min(34vw, 140px); }
    .night-clock { font-size: clamp(2.2rem, 11vw, 3rem); }
  }
  @media (max-width: 760px) and (max-height: 690px) {
    .night-grid { padding-top: 64px; padding-bottom: 28px; gap: 6px; }
    .night-phone { --handy-breite: min(36vw, 134px); }
    .night-clock { font-size: clamp(1.9rem, 9vw, 2.4rem); }
    .moment h3 { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
    .moment p { font-size: 14px; }
    .night-progress { bottom: 10px; }
  }
  @media (max-width: 760px) and (max-height: 640px) {
    .night-phone { --handy-breite: min(28vw, 108px); }
  }
  @media (max-width: 760px) and (max-height: 570px) {
    .night-phone { --handy-breite: min(22vw, 86px); }
    .night-clock { font-size: 1.7rem; }
  }
  /* Sehr flache Fenster, etwa ein Handy quer oder ein kleines Browserfenster. Hier stiess
     das Handy sonst nach oben in die Uhr und die Welle nach unten in die Ueberschrift. */
  @media (max-width: 760px) and (max-height: 500px) {
    .night-grid { padding-top: 56px; padding-bottom: 20px; gap: 4px; }
    .night-phone { --handy-breite: min(16vw, 62px); }
    .night-clock { font-size: 1.4rem; }
  }
  /* Noch flacher, etwa ein kleines Handy quer (667x375). Hier ist fuer die Inszenierung kein
     Platz mehr: Pille und Welle fallen weg, das sind genau die zwei Teile, die sonst in Uhr
     und Ueberschrift laufen. Die Geschichte bleibt lesbar, sie wird nur nuechtern. */
  @media (max-width: 760px) and (max-height: 470px) {
    .night-grid { padding-top: 52px; padding-bottom: 16px; }
    .night-phone { --handy-breite: min(13vw, 48px); }
    .night-phone .chip, .night-phone .wave { display: none; }
    .night-clock { font-size: 1.2rem; }
  }

  /* ===== Eroeffnung auf dem Handy: als fertige Animation statt am Finger (25.09.2026) =====
     Sobald gescrollt wird, setzt wow.js .is-open; den Rest macht die Grafikkarte mit einer
     Transition. Das laeuft immer weich, egal wie Safari das Scrollen gerade taktet. */
  html.opening-timed .opening { height: 150vh; }
  html.opening-timed .opening-mark,
  html.opening-timed .opening-phone,
  html.opening-timed .opening-caption,
  html.opening-timed .opening .scrollhint {
    transition: transform 1.1s cubic-bezier(.2,.75,.2,1), opacity .9s ease;
  }
  html.opening-timed .opening-mark { transform: none; opacity: 1; }
  html.opening-timed .opening-phone { transform: translate3d(-50%, calc(-50% + 70vh), 0) scale(.86); opacity: 0; }
  html.opening-timed .opening-caption { transform: translate3d(0, 24px, 0); opacity: 0; }
  html.opening-timed .opening .scrollhint { opacity: 1; }
  html.opening-timed .opening.is-open .opening-mark { transform: translate3d(0, -12vh, 0) scale(.62); opacity: 0; }
  html.opening-timed .opening.is-open .opening-phone { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; transition-delay: .08s; }
  html.opening-timed .opening.is-open .opening-caption { transform: none; opacity: 1; transition-delay: .35s; }
  html.opening-timed .opening.is-open .scrollhint { opacity: 0; }
  /* Handy: das Geraet sitzt unten am Rand und richtet sich nach der sichtbaren Hoehe, damit es nie
     unter die Zeile rutscht (Safari blendet oben und unten Leisten ein). */
  html.opening-timed .opening-phone { top: auto; bottom: 3svh; width: min(46vw, 200px, 28svh); transform: translate3d(-50%, 60vh, 0) scale(.9); }
  html.opening-timed .opening.is-open .opening-phone { transform: translate3d(-50%, 0, 0) scale(1); }
  @media (max-width: 760px) {
    .opening-caption p { display: none; }
    .opening-caption { top: 118px; }
  }

  /* ===== Eroeffnung am Finger, vom Browser selbst gekoppelt (25.09.2026, zweiter Anlauf) =====
     Philipp wollte die Kamerafahrt zurueck, nur ohne Ruckeln. Die Ursache war nicht die Fahrt,
     sondern der Weg: wow.js las bei jedem Bild die Scrollposition und setzte --p, und Safari
     zeichnete dem Finger hinterher. Mit einer Scroll-Zeitleiste (Safari 26, Chrome 115) rechnet
     der Browser Handy, Marke und Zeile direkt aus der Scrollposition, auf der Grafikkarte und
     ohne JavaScript. Aeltere Browser behalten die fertige Animation (opening-timed). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .opening { view-timeline: --eroeffnung block; }
      .opening-mark, .opening-phone, .opening-caption, .opening .scrollhint {
        animation-timing-function: linear; animation-fill-mode: both;
        animation-timeline: --eroeffnung; animation-range: contain 0% contain 100%;
      }
      .opening-mark { animation-name: er-marke; }
      .opening-phone { animation-name: er-handy; }
      .opening-caption { animation-name: er-zeile; }
      .opening .scrollhint { animation-name: er-hinweis; }
      @media (max-width: 760px) {
        /* Handy unten verankert, wie bei der fertigen Animation: nie unter der Zeile. */
        .opening-phone { top: auto; bottom: 3svh; width: min(46vw, 200px, 28svh); animation-name: er-handy-m; }
      }
    }
  }
  @keyframes er-marke {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    59% { opacity: 0; }
    100% { transform: translate3d(0, -14vh, 0) scale(.62); opacity: 0; }
  }
  @keyframes er-handy {
    0% { transform: translate3d(-50%, calc(-50% + 62vh), 0) perspective(1200px) rotateX(24deg) scale(.82); opacity: 0; }
    11% { opacity: 0; }
    57% { opacity: 1; }
    100% { transform: translate3d(-50%, -50%, 0) perspective(1200px) rotateX(0deg) scale(1); opacity: 1; }
  }
  @keyframes er-handy-m {
    0% { transform: translate3d(-50%, 62vh, 0) perspective(1200px) rotateX(24deg) scale(.84); opacity: 0; }
    11% { opacity: 0; }
    57% { opacity: 1; }
    100% { transform: translate3d(-50%, 0, 0) perspective(1200px) rotateX(0deg) scale(1); opacity: 1; }
  }
  @keyframes er-zeile {
    0% { transform: translate3d(0, 30px, 0); opacity: 0; }
    62% { opacity: 0; }
    94% { opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
  }
  @keyframes er-hinweis { 0% { opacity: 1; } 17% { opacity: 0; } 100% { opacity: 0; } }

  /* ===== Preise (26.09.2026, neu gestaltet) =====
     Nur Verschiebung und Transparenz werden animiert, keine Weichzeichner: auf dem iPhone
     flüssig (Befund der Startseite). Der umlaufende Rand der Plus-Karte dreht ein großes
     Verlaufsfeld hinter einer Maske, per transform. */
  .pr-hero { position: relative; overflow: hidden; padding: clamp(130px, 18vh, 190px) 0 clamp(40px, 6vh, 70px); text-align: center; }
  .pr-hero .wrap { position: relative; z-index: 1; }
  .pr-hero .big { max-width: 16ch; margin: 0 auto; }
  .pr-null { display: flex; justify-content: center; align-items: flex-start; margin: clamp(28px, 5vh, 48px) 0 0; line-height: .85; }
  .pr-null-zahl, .pr-null-euro {
    font-family: Roboto, Inter, sans-serif; font-weight: 900; letter-spacing: -0.06em;
    background: linear-gradient(170deg, #ffffff 12%, var(--aurora) 58%, var(--aurora-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-right: .1em; margin-right: -.1em; /* engere Schrift ragt aus dem Kasten, der Verlauf schnitt rechts ab (15.10.2026) */
  }
  .pr-null-zahl { font-size: clamp(9rem, 34vw, 17rem); }
  .pr-null-euro { font-size: clamp(3rem, 11vw, 5.6rem); margin: .35em -.1em 0 .08em; }
  .pr-hero .lede { max-width: 34ch; margin-top: 10px; }
  .pr-badge {
    display: inline-flex; align-items: center; gap: 10px; margin: 26px auto 0; padding: 10px 18px;
    border: 1px solid rgba(235, 214, 163, 0.35); border-radius: 999px; color: var(--moon);
    background: rgba(235, 214, 163, 0.07); font-size: 14px;
  }
  .pr-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--moon); animation: pr-puls 2.4s ease-in-out infinite; }
  @keyframes pr-puls { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

  .pr-plaene { padding: clamp(30px, 5vh, 60px) 0 clamp(60px, 9vh, 110px); }
  .pr-schalter {
    position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(440px, 100%);
    margin: 0 auto clamp(30px, 5vh, 48px); padding: 5px; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
  }
  .pr-schalter button {
    position: relative; z-index: 1; padding: 12px 6px; border: 0; background: none; color: var(--muted);
    font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; border-radius: 999px; transition: color .3s ease;
  }
  .pr-schalter button b { font-weight: 700; color: var(--aurora); font-size: 12px; margin-left: 4px; }
  .pr-schalter button[aria-selected="true"] { color: #061a1d; }
  .pr-schalter button[aria-selected="true"] b { color: #061a1d; }
  .pr-schieber {
    position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px;
    background: linear-gradient(135deg, #ffffff, var(--aurora)); transition: transform .45s cubic-bezier(.3,.8,.2,1);
    box-shadow: 0 8px 26px rgba(99, 210, 188, 0.28);
  }
  .pr-plaene[data-plan="jahr"] .pr-schieber { transform: translateX(100%); }
  .pr-plaene[data-plan="einmal"] .pr-schieber { transform: translateX(200%); }

  .pr-karten { display: grid; grid-template-columns: 1fr 1.12fr; gap: 18px; align-items: stretch; max-width: 960px; margin: 0 auto; }
  .pr-karte {
    position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  }
  .pr-karte > * { position: relative; }
  .pr-plus { border-color: transparent; background: #0a1a30; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(99, 210, 188, .10); }
  .pr-rand {
    position: absolute !important; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    overflow: hidden;
  }
  .pr-rand::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; margin: -100% 0 0 -100%;
    background: conic-gradient(from 0deg, var(--aurora), var(--aurora-2), var(--moon), var(--aurora));
    animation: pr-dreh 9s linear infinite;
  }
  @keyframes pr-dreh { to { transform: rotate(360deg); } }
  .pr-preis { position: relative; height: clamp(3.4rem, 8vw, 4.6rem); margin: 6px 0 4px; }
  .pr-betrag {
    position: absolute; left: 0; top: 0; font-family: Roboto, Inter, sans-serif; font-weight: 900;
    font-size: clamp(3rem, 7vw, 4.2rem); letter-spacing: -0.04em; line-height: 1; color: var(--text);
    transition: opacity .35s ease, transform .45s cubic-bezier(.3,.8,.2,1);
  }
  .pr-plus .pr-betrag {
    background: linear-gradient(170deg, #ffffff 30%, var(--aurora)); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .pr-zeile { position: relative; min-height: 1.5em; margin: 0 0 22px; color: var(--muted); font-size: 15px; }
  .pr-zeile span { position: absolute; left: 0; top: 0; transition: opacity .35s ease; }
  [data-zeige] { opacity: 0; transform: translateY(10px); pointer-events: none; }
  .pr-zeile [data-zeige] { transform: none; }
  .pr-plaene[data-plan="monat"] [data-zeige="monat"],
  .pr-plaene[data-plan="jahr"] [data-zeige="jahr"],
  .pr-plaene[data-plan="einmal"] [data-zeige="einmal"] { opacity: 1; transform: none; pointer-events: auto; }
  .pr-alles { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--aurora); }
  .pr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .pr-liste li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--text); }
  .pr-liste li::before {
    content: ""; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(142, 163, 189, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d6e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  }
  .pr-liste-plus li::before {
    background: linear-gradient(135deg, var(--aurora), var(--aurora-2)) ;
    -webkit-mask: none;
  }
  .pr-liste-plus li::after {
    content: ""; position: absolute; left: 0; top: .15em; width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061a1d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  }
  .pr-test { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--moon); font-weight: 600; font-size: 15px; }

  .pr-zeigen { padding: clamp(30px, 6vh, 80px) 0; text-align: center; }
  .pr-fan { margin-top: clamp(36px, 6vh, 60px); }

  .pr-versprechen { padding: clamp(40px, 7vh, 90px) 0 clamp(60px, 9vh, 110px); }
  .pr-vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .pr-v { padding: 24px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
  .pr-v svg { color: var(--aurora); }
  .pr-v h3 { margin: 12px 0 6px; font-size: 17px; letter-spacing: -.01em; }
  .pr-v p { margin: 0; color: var(--muted); font-size: 14.5px; }
  .pr-fragen { max-width: 760px; margin: clamp(40px, 7vh, 70px) auto 0; display: grid; gap: 10px; }

  @media (max-width: 900px) {
    .pr-karten { grid-template-columns: 1fr; }
    .pr-plus { order: -1; }
    .pr-vier { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .pr-vier { grid-template-columns: 1fr; }
    .pr-schalter button { font-size: 14px; padding: 12px 2px; }
    .pr-schalter button b { display: block; margin: 3px 0 0; }
  }
  html.wow-still .pr-rand::before, html.wow-still .pr-punkt { animation: none; }
  @media (prefers-reduced-motion: reduce) { .pr-rand::before, .pr-punkt { animation: none; } .pr-schieber, .pr-betrag { transition: none; } }
  .pr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--night)); }

  /* Pruefung 26.09.2026: die Handys der Szene .link2 standen vor dem Einblenden seitlich ueber, die Seite liess sich verschieben. */
  html, body { overflow-x: clip; }
  .link2 { overflow-x: clip; }
  .bento { grid-auto-flow: dense; }


  /* =====================================================================
     Verkaufsbausteine der Startseite (27.09.2026): Vertrauenszeile, zwei Stufen CHRIVO und
     CHRIVO+, „Wenn etwas nicht stimmt", Vergleich mit dem Geräte-Babyfon. Nur Verläufe und
     Transform, kein Weichzeichner, damit das iPhone flüssig bleibt.
     ===================================================================== */
  .trustline {
    display: inline-block; margin: 18px auto 0; padding: 8px 16px; border-radius: 999px;
    border: 1px solid rgba(99, 210, 188, .35); background: rgba(10, 30, 56, .55);
    color: var(--aurora); font: 600 13px/1.4 Inter, sans-serif; letter-spacing: .02em;
  }

  .stufen, .einwand, .vergleich { position: relative; padding: clamp(64px, 11vh, 130px) 0; }
  .stufen-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 18px; max-width: 900px; margin: 42px auto 0; }
  .stufe {
    position: relative; overflow: hidden; display: block; padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--line); border-radius: 28px; color: var(--text); text-decoration: none;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    transition: transform .25s ease, border-color .25s ease;
  }
  .stufe > * { position: relative; }
  .stufe:hover { transform: translateY(-3px); border-color: rgba(99, 210, 188, .45); }
  .stufe-plus { border-color: transparent; background: #0a1a30; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 60px rgba(99,210,188,.10); }
  .stufe-name { display: block; font: 900 clamp(1.6rem, 3.4vw, 2.2rem)/1 Roboto, Inter, sans-serif; letter-spacing: -0.03em; }
  .stufe-name b {
    background: linear-gradient(160deg, var(--moon), var(--aurora)); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stufe-preis { display: block; margin-top: 14px; font: 900 clamp(2.4rem, 6vw, 3.4rem)/1 Roboto, Inter, sans-serif; letter-spacing: -0.04em; }
  .stufe-plus .stufe-preis { background: linear-gradient(170deg, #fff 30%, var(--aurora)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stufe-satz { margin: 10px 0 18px; color: var(--moon); font-weight: 600; }
  .stufe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .stufe li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15px; }
  .stufe li::before {
    content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b6f1e4, var(--aurora) 60%, #3aa892);
    box-shadow: 0 0 10px rgba(99,210,188,.5);
  }
  .stufe-plus li::before { background: radial-gradient(circle at 35% 35%, #fff7df, var(--moon) 60%, #b89a5a); box-shadow: 0 0 10px rgba(235,214,163,.45); }
  .stufe-test {
    display: inline-block; margin-top: 20px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(235,214,163,.4); color: var(--moon); font: 600 12px Inter, sans-serif; letter-spacing: .04em;
  }

  .einwand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 42px auto 0; }
  .einwand-cell { text-align: left; }
  .leucht {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%;
    color: var(--accent); background: rgba(255,122,61,.12); border: 1px solid rgba(255,122,61,.45);
    box-shadow: 0 0 22px rgba(255,122,61,.28);
  }
  .einwand .lede { margin-top: 30px; }

  .vergleich-tab { max-width: 820px; margin: 42px auto 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); }
  .vz { display: grid; grid-template-columns: 1fr 1.2fr 1.3fr; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--line); font-size: 15px; }
  .vz:first-child { border-top: 0; }
  .vz span:first-child { color: var(--text); font-weight: 600; }
  .vz span:nth-child(2) { color: var(--muted); }
  .vz span:nth-child(3) { color: var(--aurora); font-weight: 600; }
  .vz-kopf { background: rgba(255,255,255,.035); }
  .vz-kopf span { font: 600 12px Inter, sans-serif !important; letter-spacing: .18em; text-transform: uppercase; color: var(--muted) !important; }
  .vz-kopf span:nth-child(3) { color: var(--aurora) !important; }

  .macher { margin: 18px auto 0; color: var(--muted); font-size: 14px; }

  @media (max-width: 760px) {
    .stufen-grid, .einwand-grid { grid-template-columns: 1fr; }
    .vz { grid-template-columns: 1fr 1fr; padding: 14px 16px; font-size: 14px; }
    .vz span:first-child { grid-column: 1 / -1; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
    .vz-kopf span:first-child { display: none; }
    .trustline { border: 0; background: none; padding: 0; font-size: 13px; max-width: 30ch; text-wrap: balance; }
  }

  /* Nacht-Szene mit echten Bildschirmfotos (27.09.2026): die Pille sitzt auf der Oberkante des
     Handys wie eine Mitteilung, die bewegten Pegelbalken (Philipp: „der Hammer") auf der
     Unterkante. Auf dem Bildschirm verdeckten sie Statuszeile, WLAN-Pille und Knöpfe. */
  .night-phone > .chip { top: -16px; z-index: 3; }
  /* Die Balken stehen 18 px unter dem Handy. Im Alarm wachsen sie auf 60 % × 2,2 der Höhe, also
     26 px je Richtung um ihre Mitte: das bleibt unter dem Handy. Das Handy selbst richtet sich
     auch nach der Fensterhöhe, damit Pille, Handy und Balken immer in die Szene passen. */
  .night-phone > .wave { left: 14%; right: 14%; bottom: -58px; height: 40px; z-index: 3; }
  .night-phone { margin-bottom: 72px; }
  @media (min-width: 901px) { .night-phone { width: max(160px, min(25vw, 290px, calc((100svh - 240px) * 0.46))); } }

/* Für Suchmaschinen und Bildschirmleser lesbar, sonst unsichtbar (08.10.2026, H1 der Startseite). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Kompakt (14.10.2026, Philipp: „sehr groß, wirkt überladen, zum Download muss man schnell
   kommen"). Kleinere Überschriften, weniger Luft, kürzere Scroll-Bühnen, die Inszenierung
   selbst bleibt. Dazu „Mehr" in der Navigation, der Knopf „Laden" und Abzeichen im Auftakt.
   ===================================================================== */
.giant { font-size: clamp(2.8rem, 10vw, 6.2rem); }
.big { font-size: clamp(2rem, 5.6vw, 3.6rem); }
.mid { font-size: clamp(1.55rem, 3.6vw, 2.4rem); }
.statement, .arrange, .privacy, .ear, .gallery, .bento-sec, .setup, .faq { padding: clamp(56px, 8vh, 100px) 0; }
.section-pad { padding: clamp(40px, 6vh, 80px) 0; }
.pagehead { padding: clamp(104px, 14vh, 150px) 0 clamp(28px, 5vh, 56px); }
.opening { height: 180vh; }
.night { height: 330vh; }
.opening-mark .mark { width: min(50vw, 300px, 30vh); }

/* Abzeichen im Auftakt; am Handy nur das passende */
.hero-badges { margin: 22px auto 0; gap: 10px 14px; }
.hero-badges .badge img { height: 44px; }
.hero-badges .badge img[src*="google-play"] { height: 58px; }
.hero-hinweis { margin: 8px auto 0; font-size: 12px; color: var(--muted); }
html.os-ios .badge[data-os="android"], html.os-android .badge[data-os="ios"] { display: none; }
.opening-mark .scrollhint { margin-top: 18px; }

/* Abschluss: Abzeichen und QR nebeneinander, am Handy ohne QR */
.finale { padding: clamp(64px, 10vh, 120px) 0 clamp(48px, 8vh, 80px); }
.finale-sub { margin: 12px auto 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.laden-box { display: flex; align-items: center; justify-content: center; gap: 28px; margin: clamp(26px, 4vh, 40px) auto 0; }
.laden-box .badges { margin: 0; flex-direction: column; }
.laden-qr { display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.laden-qr img { width: 96px; height: 96px; padding: 8px; background: #fff; border-radius: 12px; }
@media (max-width: 760px) {
  .laden-qr { display: none; }
  .laden-box .badges { flex-direction: row; }
}
.finale .fineprint a { color: var(--text); }

/* „Und wenn etwas ausfällt": drei Zeilen statt drei Karten */
.ausfall-kopf { margin-top: clamp(48px, 7vh, 80px); }
.ausfall { list-style: none; margin: 16px auto 0; padding: 0; max-width: 62ch; display: grid; gap: 12px; }
.ausfall li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
.ausfall b { color: var(--text); font-weight: 600; }
.ausfall .leucht { flex: none; color: var(--aurora); margin-top: 1px; }

/* Linkzeile am Ende der Startseite */
.linkzeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 8px var(--pad) clamp(40px, 6vh, 70px); }
.linkzeile a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; }
.linkzeile a:hover { color: var(--text); border-color: rgba(99, 210, 188, .45); }

/* Navigation: „Mehr" und „Laden" */
.navdrop { position: relative; }
.navdrop-btn { line-height: inherit; display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px 9px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--muted); font: 400 14px Inter, sans-serif; letter-spacing: .01em; }
.navdrop-btn:hover, .navdrop.is-open .navdrop-btn { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.navdrop-btn.aktiv { color: var(--text); }
.navdrop-btn svg { transition: transform .2s ease; }
.navdrop.is-open .navdrop-btn svg { transform: rotate(180deg); }
.navdrop-menu {
  position: absolute; top: calc(100% + 12px); right: -40px; min-width: 260px; padding: 8px;
  border-radius: 18px; background: rgba(9, 24, 45, 0.97); border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.navdrop.is-open .navdrop-menu { opacity: 1; transform: none; pointer-events: auto; }
.navdrop-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; font-size: 14px; }
.navdrop-menu a span { color: var(--muted); font-size: 12.5px; }
.navdrop-menu a:hover, .navdrop-menu a[aria-current="page"] { background: rgba(99, 210, 188, 0.10); }
.navdrop-menu a.klein { padding: 7px 12px; color: var(--muted); font-size: 13px; }
.navdrop-menu a.klein:hover { color: var(--text); }
.navdrop-kopf { margin: 8px 12px 2px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--aurora); }
.nav-laden {
  margin-left: 4px; padding: 9px 18px; border-radius: 999px; text-decoration: none;
  background: var(--accent); color: #fff; font: 600 14px Inter, sans-serif; letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(255, 122, 61, .35); transition: transform .2s ease, box-shadow .2s ease;
}
.nav-laden:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255, 122, 61, .45); }
@media (max-width: 760px) {
  .nav-laden { margin-left: auto; margin-right: 6px; padding: 0 16px; height: 38px; display: inline-flex; align-items: center; }
}

/* Handy-Menü etwas kleiner (Philipp 14.10.: „wirkt sehr groß"), „Mehr" als ruhige Liste */
.menu-sheet a { font-size: clamp(1.8rem, 8.5vw, 2.5rem); padding: 7px 0; }
.menu-kopf { margin: 22px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--aurora); opacity: 0; transition: opacity .5s ease .2s; }
.menu-sheet.is-open .menu-kopf { opacity: 1; }
.menu-mehr { display: grid; gap: 0; }
.menu-sheet .menu-mehr a { font-family: Inter, sans-serif; font-weight: 500; font-size: 1.02rem; letter-spacing: 0; padding: 6px 0; color: var(--muted); }
.menu-sheet .menu-mehr a[aria-current="page"] { color: var(--aurora); }
.voice { padding: clamp(56px, 9vh, 110px) 0 clamp(24px, 4vh, 48px); }
.stufen { padding: clamp(48px, 8vh, 96px) 0; }
/* „Gute Nacht." bleibt groß (Philipp 14.10.: „war schöner, als es größer war"), begrenzt nach
   der Fensterhöhe, damit die Abzeichen im ersten Bildschirm bleiben. */
.opening-mark .giant { font-size: clamp(3.4rem, min(13vw, 15vh), 8.5rem); }

/* „Mehr" mit Auftritt (14.10.2026, Philipp: „kein wow?"). Undurchsichtig, weil Safari unter einem
   Eltern-Element mit backdrop-filter halbtransparente Hintergründe durchscheinen ließ. */
.navdrop-btn { font: 400 14px/1.6 Inter, sans-serif; padding: 9px 12px 9px 14px; }
.navdrop-menu {
  top: calc(100% + 14px); right: -70px; width: 330px; min-width: 0; padding: 10px; overflow: hidden;
  background: linear-gradient(180deg, #0F2547 0%, #0A1A33 100%);
  border: 0; border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(99, 210, 188, .10);
  transform: translateY(-8px) scale(.98); transform-origin: 70% 0;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.navdrop-menu::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(130deg, rgba(99, 210, 188, .7), rgba(143, 124, 232, .45) 45%, rgba(255, 255, 255, .06) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.nd-glow { position: absolute; left: -30%; right: -30%; top: -60px; height: 140px; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 50%, rgba(99, 210, 188, .22), transparent 70%), radial-gradient(40% 50% at 75% 40%, rgba(143, 124, 232, .18), transparent 70%); }
.navdrop.is-open .navdrop-menu { transform: none; }
.navdrop-menu a { position: relative; }
.navdrop-menu a.gross { display: flex; align-items: center; gap: 14px; padding: 11px 12px; }
.nd-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--aurora);
  background: rgba(99, 210, 188, .10); box-shadow: inset 0 0 0 1px rgba(99, 210, 188, .22); transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.nd-text { display: grid; gap: 2px; }
.nd-text b { font-weight: 600; font-size: 15px; color: var(--text); }
.nd-text span { color: #A9B8CC; font-size: 13px; }
.navdrop-menu a.gross:hover, .navdrop-menu a.gross[aria-current="page"] { background: rgba(255, 255, 255, .05); }
.navdrop-menu a.gross:hover .nd-icon { background: rgba(99, 210, 188, .2); box-shadow: inset 0 0 0 1px rgba(99, 210, 188, .5), 0 0 18px rgba(99, 210, 188, .35); transform: scale(1.05); }
.navdrop-kopf { margin: 6px 12px 6px; }
.nd-rat { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 6px; }
.navdrop-menu a.klein { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); color: #C3CFDE; font-size: 12.5px; }
.navdrop-menu a.klein:hover, .navdrop-menu a.klein[aria-current="page"] { color: var(--text); border-color: rgba(99, 210, 188, .5); background: rgba(99, 210, 188, .08); }
/* gestaffelt einblenden */
.navdrop-menu a.gross, .navdrop-kopf, .nd-rat { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.navdrop.is-open .navdrop-menu a.gross, .navdrop.is-open .navdrop-kopf, .navdrop.is-open .nd-rat { opacity: 1; transform: none; }
.navdrop.is-open .navdrop-menu a.gross:nth-of-type(2) { transition-delay: .05s; }
.navdrop.is-open .navdrop-menu a.gross:nth-of-type(3) { transition-delay: .1s; }
.navdrop.is-open .navdrop-kopf, .navdrop.is-open .nd-rat { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .navdrop-menu, .navdrop-menu a.gross, .navdrop-kopf, .nd-rat { transition: none; } }

/* ---------- /laden/: die Download-Seite (14.10.2026) ---------- */
.ld { position: relative; overflow: hidden; min-height: 100vh; padding: clamp(110px, 15vh, 160px) 0 clamp(40px, 6vh, 70px);
  background: radial-gradient(90% 70% at 75% 30%, #12305A 0%, #0A1E38 45%, var(--night) 100%); }
.ld .aurora .veil { opacity: .55; }
.ld-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.ld-titel { margin: 10px 0 0; font-family: Roboto, Inter, sans-serif; font-weight: 900; font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.04em; }
.ld-titel em { font-style: normal; background: linear-gradient(100deg, #63D2BC 0%, #EBD6A3 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-sub { margin: 20px 0 0; max-width: 40ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); }
.ld-laden { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); margin-top: clamp(28px, 4vh, 44px); }
.ld-laden .badges { margin: 0; flex-direction: column; align-items: flex-start; }
.ld-qr { position: relative; display: grid; justify-items: center; gap: 12px; }
.ld-qr img { position: relative; z-index: 1; width: 132px; height: 132px; padding: 11px; background: #fff; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.ld-qr-ring { position: absolute; top: -10px; left: 50%; width: 152px; height: 152px; margin-left: -76px; border-radius: 26px;
  background: conic-gradient(from 0deg, #63D2BC, #8F7CE8, #EBD6A3, #63D2BC); filter: blur(14px); opacity: .55; animation: ldring 6s linear infinite; }
@keyframes ldring { to { transform: rotate(360deg); } }
.ld-qr-text { font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
.ld-hinweis { margin: 16px 0 0; max-width: none; }
.ld-buehne { position: relative; height: clamp(380px, 56vh, 560px); }
.ld-buehne .phone { position: absolute; width: clamp(150px, 15vw, 220px); top: 50%; animation: ldschweben 7s ease-in-out infinite; }
.ld-p1 { left: 4%; transform: translateY(-46%) rotate(-7deg); }
.ld-p2 { right: 4%; transform: translateY(-54%) rotate(6deg); animation-delay: -3.5s !important; }
@keyframes ldschweben { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
.ld-band { position: absolute; left: 22%; right: 22%; top: 38%; width: 56%; height: 70px; overflow: visible; filter: drop-shadow(0 0 8px rgba(99, 210, 188, .6)); z-index: 2; }
.ld-tag { position: absolute; z-index: 3; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: rgba(10, 30, 56, .92); border: 1px solid rgba(99, 210, 188, .4); color: var(--text); }
.ld-tag1 { left: 2%; bottom: 6%; }
.ld-tag2 { right: 2%; top: 4%; border-color: rgba(235, 214, 163, .5); }
.ld-schritte { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 7vh, 80px); padding-left: var(--pad); padding-right: var(--pad); }
.ld-schritte li { display: grid; gap: 6px; padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.ld-schritte b { font-size: 1.05rem; color: var(--text); }
.ld-schritte li > span:last-child { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.ld-nr { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; font-weight: 700; font-size: 14px; color: #071527; background: linear-gradient(135deg, #63D2BC, #EBD6A3); }
.ld-fuss { position: relative; z-index: 1; margin-top: 26px; }
.ld-fuss a { color: var(--text); }
@media (max-width: 900px) {
  .ld-grid { grid-template-columns: 1fr; text-align: center; }
  .ld-sub { margin-left: auto; margin-right: auto; }
  .ld-laden { justify-content: center; }
  .ld-laden .badges { align-items: center; }
  .ld-qr { display: none; }
  .ld-buehne { height: 340px; max-width: 420px; margin: 0 auto; width: 100%; }
  .ld-schritte { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ld-qr-ring, .ld-buehne .phone { animation: none; } }
.ld-titel { font-size: clamp(2.6rem, 5.2vw, 4.7rem); }
.ld-titel br + em, .ld-titel { white-space: nowrap; }
.ld-p1 { left: 0; } .ld-p2 { right: 0; }
.finale.finale-kurz { padding-top: 10px; background: var(--night); }
.finale-kurz .sig { margin-top: 0; }
@media (max-width: 900px) { .ld-titel { white-space: normal; } }

/* Handy-Menü kompakt (14.10.2026, Philipp: „viel zu groß, man denkt, man kann scrollen"): oben
   statt mittig, passt auch aufs iPhone SE, scrollt sauber, falls doch zu lang. „Laden" als
   breiter Knopf am Ende, „Mehr" als zwei ruhige Spalten. */
.menu-sheet { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 92px) 28px calc(env(safe-area-inset-bottom, 0px) + 28px); }
.menu-sheet > a { font-size: clamp(1.6rem, 7.4vw, 2.1rem); padding: 5px 0; }
.menu-kopf { margin: 18px 0 4px; }
.menu-mehr { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.menu-sheet .menu-mehr a { font-size: .98rem; padding: 7px 0; line-height: 1.3; }
.menu-sheet a.menu-laden { margin-top: 22px; display: flex; justify-content: center; padding: 14px 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: 600 1.05rem Inter, sans-serif; letter-spacing: 0; box-shadow: 0 10px 28px rgba(255, 122, 61, .35); }
.menu-sheet { background: rgba(5, 14, 28, 0.975); }
.sig-claim .sig-widmung { display: block; opacity: .7; }
.sig-widmung em { font-style: normal; color: inherit; }

/* =====================================================================
   Chat „Frag CHRIVO" (14.10.2026)
   ===================================================================== */
.chat-knopf {
  position: fixed; z-index: 58; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #12305A, #0A1E38); color: var(--text); font: 600 14px Inter, sans-serif;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(99, 210, 188, .35), 0 0 26px rgba(99, 210, 188, .25);
  opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.chat-knopf.da { opacity: 1; transform: none; }
.chat-knopf:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(99, 210, 188, .6), 0 0 36px rgba(99, 210, 188, .4); }
.ck-mond { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #EBD6A3;
  background: radial-gradient(circle at 35% 30%, #1B4272, #0A1E38); }
.ck-mond::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #63D2BC, #8F7CE8, #EBD6A3, #63D2BC); filter: blur(5px); opacity: .8; animation: ldring 7s linear infinite; }
html.chat-offen .chat-knopf, html.menu-open .chat-knopf { opacity: 0; pointer-events: none; transform: translateY(16px) scale(.96); }
@media (max-width: 760px) {
  .chat-knopf { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); padding: 6px; }
  .ck-text { display: none; }
  .ck-mond { width: 44px; height: 44px; }
}

.chat {
  position: fixed; z-index: 70; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  width: min(400px, calc(100vw - 40px)); height: min(620px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  background: linear-gradient(180deg, #0F2547 0%, #0A1A33 55%, #071527 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(99, 210, 188, .12);
  opacity: 0; transform: translateY(20px) scale(.97); transform-origin: 90% 100%;
  transition: opacity .28s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.chat.offen { opacity: 1; transform: none; }
.chat[hidden] { display: none; }
.chat-rand { position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(140deg, rgba(99, 210, 188, .75), rgba(143, 124, 232, .45) 45%, rgba(255, 255, 255, .06) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.chat-glow { position: absolute; left: -30%; right: -30%; top: -90px; height: 220px; pointer-events: none;
  background: radial-gradient(45% 55% at 30% 50%, rgba(99, 210, 188, .25), transparent 70%), radial-gradient(40% 50% at 75% 45%, rgba(143, 124, 232, .2), transparent 70%);
  animation: chatglow 9s ease-in-out infinite alternate; }
@keyframes chatglow { to { transform: translateX(8%) scale(1.05); } }
.chat-kopf { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 18px; }
.chat-kopf img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 18px rgba(99, 210, 188, .35); }
.chat-titel { margin: 0; font-family: Roboto, Inter, sans-serif; font-weight: 900; font-size: 17px; letter-spacing: -.01em; }
.chat-sub { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chat-sub .punkt { width: 7px; height: 7px; border-radius: 50%; background: #63D2BC; box-shadow: 0 0 8px #63D2BC; animation: pulsieren 2.4s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: .35; } }
.chat-zu { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .06); }
.chat-zu:hover { color: var(--text); background: rgba(255, 255, 255, .12); }

.chat-log { position: relative; z-index: 1; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.cb { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; animation: cbrein .35s cubic-bezier(.2, .8, .2, 1); overflow-wrap: anywhere; }
@keyframes cbrein { from { opacity: 0; transform: translateY(8px); } }
.cb p { margin: 0; } .cb p + p, .cb p + ul, .cb ul + p { margin-top: 8px; }
.cb ul { margin: 4px 0 0; padding-left: 18px; }
.cb a { color: #8FE3D2; text-decoration: underline; text-underline-offset: 2px; }
.cb-bot { align-self: flex-start; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07); color: #DCE4EF; border-bottom-left-radius: 6px; }
.cb-nutzer { align-self: flex-end; background: linear-gradient(135deg, #2FA48F, #23806F); color: #fff; border-bottom-right-radius: 6px; white-space: pre-wrap; }
.cb-tippt { display: flex; gap: 5px; padding: 14px 16px; }
.cb-tippt i { width: 7px; height: 7px; border-radius: 50%; background: #EBD6A3; opacity: .35; animation: tippen 1.2s ease-in-out infinite; }
.cb-tippt i:nth-child(2) { animation-delay: .15s; } .cb-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 30% { opacity: 1; transform: translateY(-3px); } }
.cb-vorschlaege, .cb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; animation: cbrein .4s ease .1s both; }
.cb-knoepfe { justify-content: flex-start; }
.cb-pille, .cb-knopf { padding: 8px 13px; border-radius: 999px; cursor: pointer; font: 500 13px Inter, sans-serif; color: #C9D6E6;
  background: rgba(99, 210, 188, .07); border: 1px solid rgba(99, 210, 188, .35); transition: background .2s ease, color .2s ease, transform .2s ease; }
.cb-pille:hover, .cb-knopf:hover { color: #fff; background: rgba(99, 210, 188, .18); transform: translateY(-1px); }
.cb-knopf.haupt { color: #fff; border-color: transparent; background: var(--accent); box-shadow: 0 6px 18px rgba(255, 122, 61, .35); }
.cb-knopf.haupt:hover { background: #ff8c55; }
.cb-karte { position: relative; align-self: stretch; padding: 14px 16px; border-radius: 18px; background: rgba(235, 214, 163, .06); border: 1px solid rgba(235, 214, 163, .3); animation: cbrein .35s ease; }
.cb-karte.gesendet { border-color: rgba(99, 210, 188, .6); background: rgba(99, 210, 188, .08); }
.cbk-kopf { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #EBD6A3; }
.cbk-zeile { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 4px 0; font-size: 13.5px; }
.cbk-zeile span { color: var(--muted); } .cbk-zeile b { font-weight: 500; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.cbk-haken { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cbk-haken input { accent-color: #2FA48F; }
.cbk-hinweis { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); } .cbk-hinweis a { color: var(--muted); }
.cbk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cb-stern { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; border-radius: 50%; background: #EBD6A3; box-shadow: 0 0 10px #EBD6A3; pointer-events: none;
  animation: stern 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes stern { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }

.chat-form { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .2s ease, box-shadow .2s ease; }
.chat-form:focus-within { border-color: rgba(99, 210, 188, .55); box-shadow: 0 0 0 4px rgba(99, 210, 188, .12); }
.chat-form[hidden] { display: none; }
.chat-form textarea { flex: 1; min-height: 24px; max-height: 120px; padding: 8px 0; border: 0; outline: 0; resize: none; background: none; color: var(--text); font: 15px/1.45 Inter, sans-serif; }
.chat-form textarea::placeholder { color: #7F92AA; }
.chat-senden { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #2FA48F, #63D2BC); box-shadow: 0 6px 16px rgba(47, 164, 143, .4); transition: transform .2s ease; }
.chat-senden:hover { transform: scale(1.06); }
.chat-fuss { position: relative; z-index: 1; margin: 0; padding: 10px 18px 14px; font-size: 11px; line-height: 1.45; color: #7F92AA; }
.chat-fuss a, .chat-mensch { color: #A9B8CC; }
.chat-mensch { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .chat { inset: 0; width: auto; height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transform-origin: 50% 100%; }
  .chat-rand { display: none; }
  html.chat-offen { overflow: hidden; }
  .chat-form textarea { font-size: 16px; } /* sonst zoomt Safari beim Tippen */
}
@media (prefers-reduced-motion: reduce) { .chat, .chat-knopf, .cb, .chat-glow, .ck-mond::before { animation: none; transition: none; } }
/* Chat beenden und laufendes Gespräch am Knopf (14.10.2026) */
.chat-ende { margin-left: auto; padding: 7px 12px; white-space: nowrap; flex: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: none; cursor: pointer;
  color: var(--muted); font: 500 12.5px Inter, sans-serif; transition: color .2s ease, border-color .2s ease; }
.chat-ende:hover { color: var(--text); border-color: rgba(255, 122, 61, .6); }
.chat-ende[hidden] { display: none; }
.chat-ende:not([hidden]) + .chat-zu { margin-left: 8px; }
.chat-knopf.laeuft .ck-mond::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: #63D2BC; box-shadow: 0 0 0 2px #0A1E38, 0 0 8px #63D2BC; }
.chat-kopf > div { min-width: 0; } .chat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ruckeln beim Scrollen (14.10.2026, Philipp: „sehr zäh"): unscharfe Farbringe drehten sich
   dauerhaft (Chat-Knopf auf jeder Seite, QR auf /laden/), Safari rechnete den Filter bei jedem
   Bild neu. Jetzt stehender Schein ohne Filter. Die Handys auf /laden/ schweben über `translate`
   statt `margin-top`, das löste bei jedem Bild ein neues Layout aus. */
/* Chat-Knopf wieder wie zuerst (Philipp: „viel schöner“), der Ring dreht als eigene Ebene:
   der Browser zeichnet die Unschärfe einmal und dreht nur noch das fertige Bild. */
.ck-mond::before { will-change: transform; backface-visibility: hidden; }
.ld-qr-ring { animation: none; filter: none; opacity: .5; background: radial-gradient(closest-side, rgba(99, 210, 188, .7), rgba(143, 124, 232, .35) 60%, transparent); }
@keyframes ldschweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* =====================================================================
   Rechtliches und Fehlerseite im Seitengerüst (14.10.2026, Philipp: die schlichten Seiten
   „wirken sehr kalt und fehlerhaft“). Ruhig lesbar: kleinere Zwischenüberschriften als .prose,
   Anschrift als Glaskarte, Sprungmarken im Kopf der Datenschutzseite.
   ===================================================================== */
.recht-sec { padding-top: 0; }
.prose.recht { max-width: 68ch; line-height: 1.7; }
.prose.recht h2 { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin: 40px 0 10px; scroll-margin-top: 96px; }
.prose.recht h2:first-child { margin-top: 0; }
.prose.recht a { color: var(--aurora); }
.prose.recht .box { margin: 18px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.prose.recht .box p { color: var(--text); opacity: .9; }
.prose.recht .box p:first-child { margin-top: 0; }
.prose.recht .box p:last-child { margin-bottom: 0; }
.recht-inhalt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 640px; }
.recht-inhalt a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 14px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.recht-inhalt a:hover { border-color: rgba(99, 210, 188, 0.45); color: var(--text); }

.fehler-kopf { min-height: 72vh; display: flex; align-items: center; }
.fehler-kopf .wrap { width: 100%; }
.fehler-mark { display: block; width: min(46vw, 220px); height: auto; margin: 0 auto 18px; }
.fehler-text { max-width: 34ch; margin: 14px auto 0; color: var(--muted); text-align: center; }
.fehler-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.fehler-knopf { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; }
.fehler-knopf.haupt { background: var(--accent); border-color: var(--accent); color: #fff; }

/* =====================================================================
   Anleitung (14.10.2026): Kapitel mit Text links und Handybild rechts, am Handy untereinander.
   Für das PDF (scripts/anleitung-pdf.mjs) ein eigener Druckstil weiter unten: feste Farben,
   keine Schatten und keine halbtransparenten Verläufe, die Vorschau zeigt sonst graue Kästen.
   ===================================================================== */
.al-pdf { margin-top: 22px; }
.al-inhalt { max-width: 760px; }
.al-inhalt .al-hilfe-link { border-color: rgba(255, 122, 61, .45); color: var(--text); }
.al-sec { padding-top: 0; }
.al-kap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 64px); align-items: start;
  padding: clamp(36px, 6vw, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.al-kap:first-child { border-top: 0; }
.al-kap.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.al-text { max-width: 62ch; }
.al-text .eyebrow { display: flex; align-items: center; gap: 10px; }
.al-text h2 { margin: 6px 0 14px; }
.al-text p { color: var(--text); opacity: .88; line-height: 1.65; margin: 0 0 12px; }
.al-text a, .al-fall a { color: var(--aurora); }
.al-plus { padding: 2px 9px; border: 1px solid rgba(235, 214, 163, .45); border-radius: 999px; color: var(--moon); font-size: 11px; letter-spacing: .08em; }
.al-liste { margin: 16px 0 0; display: grid; gap: 2px; }
.al-liste > div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.al-liste dt { font-weight: 600; color: var(--text); }
.al-liste dd { margin: 0; color: var(--muted); line-height: 1.55; }
.al-bilder { display: flex; gap: 14px; }
.al-phone { width: clamp(170px, 20vw, 230px); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.al-bilder.zwei .al-phone { width: clamp(150px, 16vw, 200px); }
.al-hilfe { padding-top: clamp(30px, 5vw, 60px); }
.al-faelle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.al-fall { padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); scroll-margin-top: 80px; }
.al-fall h3 { margin: 0 0 10px; font-size: 1.08rem; }
.al-fall p { margin: 0 0 10px; color: var(--text); opacity: .86; line-height: 1.6; font-size: .97rem; }
.al-fall p:last-child { margin-bottom: 0; }
.al-sicher { max-width: 62ch; margin: 34px auto 0; text-align: center; color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) {
  .al-kap { grid-template-columns: minmax(0, 1fr); }
  .al-bilder { justify-content: center; }
  .al-phone { width: min(62vw, 240px); }
  .al-bilder.zwei .al-phone { width: min(42vw, 190px); }
  .al-faelle { grid-template-columns: minmax(0, 1fr); }
  .al-liste > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; background: #071527; }
  html, body { background: #071527 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(main), .chat, .chat-knopf, .nav, header.site, footer, .nextcard, .crumbs, .al-pdf, .al-inhalt { display: none !important; }
  main { display: block !important; }
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .pagehead { padding: 10mm 0 6mm !important; background: none !important; }
  .pagehead::before, .pagehead::after { display: none !important; }
  .pagehead h1, .pagehead h1 * { background: none !important; -webkit-text-fill-color: #f4f7fb !important; color: #f4f7fb !important; text-shadow: none !important; }
  @page { margin: 0; }
  body { padding: 12mm 14mm; }
  .al-kap { break-inside: avoid; page-break-inside: avoid; padding: 8mm 0; grid-template-columns: minmax(0, 1fr) 52mm; gap: 8mm; }
  .al-phone { width: 52mm !important; box-shadow: none !important; background: #0a1728 !important; }
  .al-bilder.zwei { flex-direction: column; }
  .al-bilder.zwei .al-phone { width: 40mm !important; }
  .al-kap:has(.zwei) { grid-template-columns: minmax(0, 1fr) 40mm; }
  .al-fall { background: #0d1f37 !important; break-inside: avoid; }
  .al-faelle { grid-template-columns: minmax(0, 1fr); }
  .al-hilfe { break-before: page; }
  .al-text p, .al-fall p { opacity: 1; color: #e6ecf3; }
}