@layer grund, satz, bauteile, geraet, buehne, umbruch;

@layer grund {

  /* Die Marke ist monochrom. Spannung kommt aus Helligkeitsstufen,
     Größensprüngen und Haarlinien — nicht aus Farbe. */
  :root{
    --grund:      oklch(17.6% 0 0);   /* #111111, das Web-Schwarz der Marke */
    --grund-tief: oklch(11% 0 0);
    --text:       oklch(92% 0 0);
    --text-leise: oklch(66% 0 0);
    --text-still: oklch(46% 0 0);
    --signal:     oklch(100% 0 0);    /* reines Weiß ist die Signalfarbe */
    --signal-tief:oklch(80% 0 0);
    --haar:       color-mix(in oklch, var(--text) 15%, transparent);
    --haar-fein:  color-mix(in oklch, var(--text) 8%, transparent);

    --display: "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
    --satz:    "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
    --meta:    "SF Mono", "Menlo", ui-monospace, monospace;

    --kurve:      cubic-bezier(.19,.83,.26,1);
    --kurve-kurz: cubic-bezier(.32,.72,.24,1);

    --marke: 26px;
    --nav: 64px;
    --rand: clamp(1.1rem, 4vw, 4.5rem);
    --geraet-spalte: clamp(268px, 26vw, 372px);

    color-scheme: dark;
  }

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

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

  body{
    margin:0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--satz);
    font-size: clamp(1rem, .48vw + .9rem, 1.18rem);
    line-height: 1.55;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* feines Pixelraster im Grund — die Seite selbst ist ein Schirm */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image: radial-gradient(color-mix(in oklch, var(--text) 22%, transparent) .5px, transparent .5px);
    background-size: 3px 3px;
    opacity:.3;
  }

  img,svg{ max-width:100%; display:block; }

  /* Zeichenvorrat: nur Ablage, nichts davon wird selbst gezeigt */
  .zeichen{ position:absolute; inline-size:0; block-size:0; overflow:hidden; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  a{ color:inherit; text-decoration:none; }

  ::selection{ background: var(--signal); color: var(--grund-tief); }

  :focus-visible{
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
  }
}

@layer satz {

  h1,h2,h3,h4{ font-family: var(--display); font-weight:500; margin:0; text-wrap: balance; }

  p{ margin:0; text-wrap: pretty; }

  /* Gesperrte Versalien: die Sperrung bläht auch die Wortzwischenräume auf —
     word-spacing holt sie zurück, das nachlaufende Spatium am Zeilenende weg. */
  .rubrik, .monitor, .paket-marke, .paket-zusatz, .paket-dauer,
  .passung-kopf, .danach-marke{
    font-family: var(--meta);
    letter-spacing: .2em;
    word-spacing: -.09em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
  }

  .rubrik{
    font-size: .68rem;
    color: var(--signal);
    display:flex; align-items:center; gap:.75rem;
    margin-bottom: clamp(1.4rem, 3vw, 2.6rem);
  }
  /* das Spatium hinter der letzten Ziffer stammt aus der Sperrung — weg damit */
  .rubrik .nr{ color: var(--text-still); margin-inline-end: -.2em; }
  .rubrik::after{
    content:""; flex:1; height:1px; background: var(--haar-fein);
    min-width: 2rem;
  }

  /* Im Schaugrad wird auch der Wortzwischenraum zu groß — mit dem Grad
     wächst er mit, obwohl das Auge ihn dort kleiner braucht. */
  .gross{
    font-family: var(--display);
    font-size: clamp(2.9rem, 12.2cqi, 8.4rem);
    line-height: 1.06;
    letter-spacing: -.032em;
    word-spacing: -.045em;
    font-weight: 500;
  }

  .mittel{
    font-family: var(--display);
    font-size: clamp(2rem, 6cqi, 3.9rem);
    line-height: 1.18;
    letter-spacing: -.026em;
    word-spacing: -.025em;
  }

  /* Je größer der Grad, desto enger muss gesetzt werden — Futura läuft
     von Haus aus weit. Darum ein zweiter Wert erst ab großem Satzspiegel. */
  @media (min-width: 1180px){
    .gross{ letter-spacing: -.044em; }
    .mittel{ letter-spacing: -.032em; }
  }

  .lauf{
    color: var(--text-leise);
    max-width: 46ch;
    font-size: clamp(1.02rem, .5vw + .9rem, 1.24rem);
    line-height: 1.62;
  }

  .zahl{ font-variant-numeric: tabular-nums lining-nums; }
}

@layer bauteile {

  /* ---------- Kopfleiste ---------- */
  .kopfleiste{
    position: fixed; inset-block-start: var(--marke); inset-inline:0; z-index: 80;
    height: var(--nav);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding-inline: var(--rand);
    background: var(--grund);
    border-block-end: 1px solid transparent;
    transition: border-color .4s var(--kurve);
  }
  .kopfleiste.gescrollt{ border-block-end-color: var(--haar-fein); }

  .wortmarke{
    font-family: var(--display);
    font-size: clamp(.95rem, 1.3vw, 1.12rem);
    letter-spacing: -.01em;
    font-weight: 400;
    white-space: nowrap;
  }
  .wortmarke b{ font-weight:700; }

  .menue{ display:flex; align-items:center; gap: clamp(1rem, 2.2vw, 2.2rem); }
  .menue a{
    font-size: .88rem;
    color: var(--text-leise);
    white-space: nowrap;
    transition: color .18s var(--kurve-kurz);
  }
  .menue a:hover{ color: var(--text); }

  /* ---------- Knöpfe ---------- */
  .knopf{
    display:inline-flex; align-items:center; gap:.6rem;
    padding: .82em 1.5em;
    border-radius: 2px;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .005em;
    white-space: nowrap;
    transition: transform .16s var(--kurve-kurz), background-color .2s var(--kurve-kurz),
                color .2s var(--kurve-kurz), border-color .2s var(--kurve-kurz);
  }
  .knopf-haupt{
    background: var(--signal);
    color: var(--grund-tief);
  }
  /* Weiß kann nicht heller werden — der Hinweis kommt aus dem Abdunkeln */
  .knopf-haupt:hover{ background: var(--signal-tief); transform: translateY(-1px); }
  .knopf-haupt:active{ transform: translateY(0) scale(.99); }

  .knopf-neben{
    border: 1px solid var(--haar);
    color: var(--text);
  }
  .knopf-neben:hover{ border-color: var(--text-leise); transform: translateY(-1px); }
  .knopf-neben:active{ transform: translateY(0) scale(.99); }

  .knopf-klein{ padding:.6em 1.05em; font-size:.82rem; }

  .knopf-pfeil::after{
    content:"";
    width:.62em; height:.62em;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: translate .2s var(--kurve-kurz);
  }
  .knopf-pfeil:hover::after{ translate: 3px 0; }

  /* ---------- Marken (Haken / Kreuz) ---------- */
  .haken, .kreuz{ position:relative; inline-size:.9em; block-size:.9em; flex:0 0 auto; margin-block-start:.42em; }
  .haken::after{
    content:""; position:absolute; inset-block-start:-.06em; inset-inline-start:.16em;
    inline-size:.42em; block-size:.72em;
    border-inline-end:2px solid var(--signal);
    border-block-end:2px solid var(--signal);
    transform: rotate(42deg);
  }
  .kreuz::before,.kreuz::after{
    content:""; position:absolute; inset-block-start:.4em; inset-inline-start:0;
    inline-size:.9em; block-size:1.5px; background: var(--text-still);
  }
  .kreuz::before{ transform: rotate(45deg); }
  .kreuz::after{ transform: rotate(-45deg); }
}

/* ============================================================
   DAS GERÄT
   ============================================================ */
@layer geraet {

  .geraet-halter{
    grid-column: 2; grid-row: 1;
    position: sticky;
    inset-block-start: calc(var(--marke) + var(--nav) + 2.2vh);
    z-index: 5;
    display:flex; flex-direction:column; align-items:center;
    gap: .9rem;
    padding-block-start: 1vh;
  }

  /* Lichtfeld — das Gerät leuchtet in den Raum */
  .licht{
    position:absolute; inset-block-start: 4%; inset-inline-start:50%;
    inline-size: 158%; aspect-ratio: 1/1.35;
    translate: -50% 0;
    z-index:-1;
    pointer-events:none;
    /* Weißes Licht trägt weiter als gelbes — darum deutlich schwächer dosiert */
    background: radial-gradient(closest-side,
        color-mix(in oklch, var(--signal) 15%, transparent) 0%,
        color-mix(in oklch, var(--signal) 7%, transparent) 40%,
        color-mix(in oklch, var(--signal) 2.5%, transparent) 62%,
        transparent 80%);
    filter: blur(34px);
    opacity: var(--licht, .5);
    transition: opacity 1.1s var(--kurve);
  }
  .pfuetze{
    position:absolute; inset-block-end: -3%; inset-inline-start:50%;
    inline-size: 138%; block-size: 15%;
    translate: -50% 0;
    z-index:-1; pointer-events:none;
    background: radial-gradient(closest-side, color-mix(in oklch, var(--signal) 9%, transparent), transparent 70%);
    filter: blur(16px);
    opacity: calc(var(--licht, .5) * .8);
    transition: opacity 1.1s var(--kurve);
  }

  /* Monitorzeile */
  .monitor{
    inline-size: 100%; max-inline-size: 22rem;
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    font-size: .6rem; letter-spacing: .18em;
    color: var(--text-still);
  }
  .monitor b{ color: var(--signal); font-weight:400; }
  .monitor-name{
    color: var(--text-leise);
    overflow:hidden; text-overflow: ellipsis;
    max-inline-size: 60%;
  }
  .monitor-schiene{
    inline-size:100%; max-inline-size:22rem; block-size:1px;
    background: var(--haar-fein); position:relative; overflow:hidden;
  }
  .monitor-schiene i{
    position:absolute; inset:0;
    background: var(--signal);
    transform-origin: left center;
    scale: var(--fortschritt, 0) 1;
    transition: scale .12s linear;
  }

  /* Rahmen */
  .geraet{
    position: relative;
    block-size: min(64vh, 700px);
    aspect-ratio: 9 / 19.3;
    inline-size: auto;
    container-type: inline-size;
    border-radius: 13.5% / 6.3%;
    padding: 1.9%;
    /* Das Gerät verschmilzt fast mit der Bühne — getrennt wird es von der
       Haarlinie am Rand, nicht von einem hellen Metallrahmen. */
    background:
      linear-gradient(148deg,
        oklch(30% 0 0) 0%,
        oklch(15% 0 0) 20%,
        oklch(20% 0 0) 52%,
        oklch(13% 0 0) 78%,
        oklch(27% 0 0) 100%);
    box-shadow:
      0 0 0 1px oklch(100% 0 0 / .16),
      0 1px 1px oklch(100% 0 0 / .18) inset,
      0 -1px 1px oklch(0% 0 0 / .6) inset,
      0 40px 90px -30px oklch(0% 0 0 / .9),
      0 8px 24px -8px oklch(0% 0 0 / .65),
      0 0 110px -18px color-mix(in oklch, var(--signal) 22%, transparent);
    z-index: 2;
  }
  /* Seitentasten */
  .geraet::before, .geraet::after, .taste-leise{
    content:""; position:absolute;
    inline-size: 2px; border-radius: 2px;
    background: linear-gradient(oklch(42% 0 0), oklch(20% 0 0));
  }
  .geraet::before{ inset-inline-start:-2px; inset-block-start:22%; block-size:7%; }
  .geraet::after{ inset-inline-end:-2px; inset-block-start:26%; block-size:11%; }
  .taste-leise{ inset-inline-start:-2px; inset-block-start:14%; block-size:3.4%; }
  .taste-leise::after{
    content:""; position:absolute; inset-inline:0; inset-block-start:calc(100% + 9px);
    block-size:100%; border-radius:2px;
    background: linear-gradient(oklch(42% 0 0), oklch(20% 0 0));
  }

  /* Schirm — die App ist selbst dunkel. Flächen unterscheiden sich
     nur durch Helligkeitsstufen, der einzige helle Akzent ist reines Weiß.
     1em = 16 px auf einem 390 px breiten Telefon; alle App-Maße in em,
     damit die Oberfläche mit dem Gerät mitskaliert. */
  .schirm{
    position: relative;
    block-size: 100%;
    border-radius: 11.8% / 5.5%;
    overflow: hidden;
    font-size: 3.95cqi;
    font-family: var(--satz);
    line-height: 1.4;

    --f0: oklch(13.5% 0 0);   /* Bildschirmgrund, tiefes Anthrazit */
    --f1: oklch(19% 0 0);     /* Fläche Stufe 1 */
    --f2: oklch(25% 0 0);     /* Fläche Stufe 2 */
    --f3: oklch(31% 0 0);     /* Fläche Stufe 3 */
    --s1: oklch(96.5% 0 0);   /* gebrochenes Weiß */
    --s2: oklch(68% 0 0);
    --s3: oklch(50% 0 0);
    --linie: oklch(100% 0 0 / .09);

    background: var(--f0);
    color: var(--s1);
  }
  /* Glasreflex */
  .schirm::after{
    content:""; position:absolute; inset:0; z-index:9; pointer-events:none;
    background: linear-gradient(122deg,
        oklch(100% 0 0 / .12) 0%,
        oklch(100% 0 0 / .03) 16%,
        transparent 34%,
        transparent 82%,
        oklch(100% 0 0 / .04) 100%);
    mix-blend-mode: screen;
  }

  .insel{
    position:absolute; inset-block-start:1.6%; inset-inline-start:50%;
    translate:-50% 0;
    inline-size: 30%; aspect-ratio: 125/37;
    background:#000; border-radius: 99px; z-index:7;
  }

  /* Statusleiste */
  .statusleiste{
    position:absolute; inset-block-start:0; inset-inline:0; z-index:6;
    block-size: 3.375em;
    display:flex; align-items:center; justify-content:space-between;
    padding-inline: 2.05em;
    font-size: .875em; font-weight:600;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--s1);
  }
  .status-rechts{ display:flex; align-items:center; gap:.42em; }

  .funk{ display:flex; align-items:flex-end; gap:.11em; block-size:.72em; }
  .funk i{ inline-size:.16em; background: currentColor; border-radius:.5px; }
  .funk i:nth-child(1){ block-size:34%; }
  .funk i:nth-child(2){ block-size:56%; }
  .funk i:nth-child(3){ block-size:78%; }
  .funk i:nth-child(4){ block-size:100%; }

  .wlan{ position:relative; inline-size:1em; block-size:.72em; }
  .wlan i{
    position:absolute; inset-block-end:0; inset-inline-start:50%;
    translate:-50% 0;
    border: .1em solid currentColor;
    border-block-end-color: transparent;
    border-inline-color: transparent;
    border-start-start-radius: 60%; border-start-end-radius: 60%;
  }
  .wlan i:nth-child(1){ inline-size:1em; block-size:.5em; }
  .wlan i:nth-child(2){ inline-size:.62em; block-size:.33em; }
  .wlan i:nth-child(3){ inline-size:.24em; block-size:.16em; border-width:.09em; }

  .akku{
    position:relative; inline-size:1.55em; block-size:.74em;
    border:.09em solid color-mix(in oklch, currentColor 45%, transparent);
    border-radius:.24em;
    display:flex; align-items:center; padding:.08em;
  }
  .akku::after{
    content:""; position:absolute; inset-inline-end:-.16em;
    inline-size:.08em; block-size:.26em; border-radius:0 .1em .1em 0;
    background: color-mix(in oklch, currentColor 45%, transparent);
  }
  .akku i{ inline-size:74%; block-size:100%; background: currentColor; border-radius:.12em; }

  /* ============================================================
     APP-BAUKASTEN — dunkle App. Alle Maße in em: 1em = 16 px auf
     einem 390 px breiten Telefon, dadurch skaliert die Oberfläche
     mit dem Gerät. Abstände in 8er-Schritten (.5em / 1em / 1.5em).
     Flächen unterscheiden sich nur durch Helligkeitsstufen,
     der einzige helle Akzent ist reines Weiß.
     ============================================================ */
  .schirm-buehne{ position:absolute; inset:0; }

  .app-schirm{
    position:absolute; inset:0;
    background: var(--f0);
    /* oben frei für die Statusleiste, unten 6em (96 px) für die Insel */
    padding: 3.5em 1em 6em;
    display:flex; flex-direction:column; gap:1em;
    opacity:0;
    transform: translateY(1.1em) scale(.99);
    pointer-events:none;
    transition: opacity .5s var(--kurve), transform .62s var(--kurve);
    overflow:hidden;
  }
  .app-schirm.aktiv{ opacity:1; transform:none; }
  /* Wer nicht angemeldet ist, sieht keine Navigation — dort fällt die Insel
     weg, und mit ihr der Platz, den sie unten frei hält. */
  .app-schirm.ohne-insel{ padding-block-end: 2.25em; }

  .a-ikon{
    fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
    flex:0 0 auto;
  }

  /* ---------- Satz ---------- */
  .a-kopf{ display:flex; flex-direction:column; gap:.25em; }
  .a-meta{
    font-size:.6875em; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color: var(--s3);
  }
  .a-titel{
    font-size:1.75em; font-weight:700;
    letter-spacing:-.028em; line-height:1.08;
    color: var(--s1);
  }
  .a-lauf{ font-size:.875em; color: var(--s2); line-height:1.45; }
  .a-abschnitt{
    font-size:.75em; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase;
    color: var(--s3);
  }
  .a-gruppe{ display:flex; flex-direction:column; gap:.625em; }
  .a-mitte{ text-align:center; }
  /* Der Block nimmt den freien Raum und setzt sich mittig hinein. Mit
     auto-Rändern teilte er ihn stattdessen mit dem Fußhinweis — das Feld
     stand dann im oberen Drittel statt in der Mitte. */
  .a-block{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:1em; }
  .a-strich{
    display:flex; align-items:center; gap:.75em;
    font-size:.75em; color: var(--s3);
  }
  .a-strich::before, .a-strich::after{
    content:""; flex:1; block-size:1px; background: var(--linie);
  }
  .a-fuss{ margin-block-start:auto; }

  /* ---------- Flächen ---------- */
  .a-karte{
    background: var(--f1);
    border-radius:.875em;
    padding:1em;
    display:flex; flex-direction:column; gap:.25em;
  }
  .a-karte.luft{ gap:.5em; padding:1em 1em 1.125em; }
  .a-duo{ display:grid; grid-template-columns:1fr 1fr; gap:.5em; }
  .a-zahl{
    font-size:2.5em; font-weight:600; line-height:1; letter-spacing:-.045em;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .a-zahl-2{
    font-size:1.625em; font-weight:600; line-height:1.05; letter-spacing:-.035em;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .a-unter{ font-size:.8125em; color: var(--s2); }

  /* ---------- Listen ---------- */
  .a-liste{ list-style:none; margin:0; padding:0; }
  .a-zeile{
    display:flex; align-items:center; gap:.75em;
    padding-block:.75em;
    border-block-start:1px solid var(--linie);
  }
  .a-zeile:first-child{ border-block-start:0; padding-block-start:0; }
  .a-wachs{ flex:1; min-inline-size:0; display:flex; flex-direction:column; gap:.125em; }
  .a-wachs b{ font-size:.9375em; font-weight:600; letter-spacing:-.012em; }
  .a-wachs em{ font-style:normal; font-size:.8125em; color: var(--s2); }
  .a-rechts{
    font-size:.8125em; color: var(--s3); white-space:nowrap;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .a-sym{
    inline-size:2.25em; block-size:2.25em; flex:0 0 auto;
    border-radius:.625em;
    background: var(--f2);
    display:grid; place-items:center;
    color: var(--s1);
  }
  .a-sym svg{ inline-size:1.125em; block-size:1.125em; }
  .a-zeile .a-pille{ align-self:center; }
  .a-pfeil{ inline-size:1.1em; block-size:1.1em; color: var(--s3); }

  /* ---------- Knöpfe, Felder, Marken ---------- */
  .a-knopf{
    background: var(--signal); color: oklch(12% 0 0);
    font-size:.9375em; font-weight:700; letter-spacing:-.005em;
    text-align:center; padding:.9em;
    border-radius:.75em;
  }
  .a-knopf.leise{ background: var(--f2); color: var(--s1); font-weight:600; }

  .a-feld{
    background: var(--f1); border-radius:.75em;
    padding:.625em .875em;
    display:flex; flex-direction:column; gap:.125em;
  }
  .a-feld-wert{ font-size:.9375em; }
  .a-punkte{ display:flex; align-items:center; gap:.3em; block-size:1.35em; }
  .a-punkte i{ inline-size:.4em; block-size:.4em; border-radius:50%; background: var(--s1); }

  .a-pille{
    align-self:flex-start;
    font-size:.6875em; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:.35em .7em; border-radius:99px;
    background: var(--signal); color: oklch(12% 0 0);
  }
  .a-pille.leise{ background: var(--f3); color: var(--s2); }

  .a-seg{
    display:flex; gap:.25em; padding:.25em;
    background: var(--f1); border-radius:99px;
    font-size:.8125em; font-weight:600;
  }
  .a-seg span{ flex:1; text-align:center; padding:.45em; border-radius:99px; color: var(--s2); }
  .a-seg span.an{ background: var(--f3); color: var(--s1); }

  .a-fort{ block-size:.25em; border-radius:99px; background: var(--f2); overflow:hidden; }
  .a-fort i{ display:block; block-size:100%; inline-size: var(--stand, 50%); background: var(--signal); }

  .a-suche{
    display:flex; align-items:center; gap:.5em;
    background: var(--f1); border-radius:.75em; padding:.7em .875em;
    color: var(--s3); font-size:.9375em;
  }
  .a-suche svg{ inline-size:1.05em; block-size:1.05em; }

  .a-hinweis{
    display:flex; align-items:center; gap:.5em;
    font-size:.75em; color: var(--s3);
  }
  .a-hinweis svg{ inline-size:1.1em; block-size:1.1em; }

  /* ---------- Termine ---------- */
  .a-woche{ display:grid; grid-template-columns:repeat(7,1fr); gap:.25em; }
  .a-tag{
    display:flex; flex-direction:column; align-items:center; gap:.25em;
    padding:.5em .1em; border-radius:.75em;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .a-tag em{
    font-style:normal; font-size:.625em; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color: var(--s3);
  }
  .a-tag b{ font-size:.9375em; font-weight:600; color: var(--s2); }
  .a-tag.an{ background: var(--signal); }
  .a-tag.an em{ color: oklch(38% 0 0); }
  .a-tag.an b{ color: oklch(12% 0 0); }

  .a-slot{
    display:flex; align-items:center; gap:.875em;
    padding:.75em .875em; border-radius:.75em;
    background: var(--f1);
  }
  .a-slot + .a-slot{ margin-block-start:.5em; }
  .a-slot svg{ inline-size:1.05em; block-size:1.05em; color: var(--s2); }
  .a-slot-zeit{
    font-size:.9375em; font-weight:600; white-space:nowrap; color: var(--s2);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .a-slot.gewaehlt{ background: var(--signal); }
  .a-slot.gewaehlt .a-slot-zeit,
  .a-slot.gewaehlt .a-wachs b,
  .a-slot.gewaehlt svg{ color: oklch(12% 0 0); }
  .a-slot.gewaehlt .a-rechts{ color: oklch(38% 0 0); }

  /* ---------- Ticket ---------- */
  .a-ticket{
    background: var(--f1); border-radius:1em;
    padding:1em; display:flex; flex-direction:column; gap:1em;
  }
  .a-ticket-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75em; }
  .a-ticket-zeit{
    display:block; font-size:1.375em; font-weight:600; letter-spacing:-.03em;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .a-ticket-daten{ display:grid; grid-template-columns:1fr 1fr; gap:.75em; }
  .a-ticket-daten b{ display:block; font-size:.9375em; font-weight:600; }
  /* Perforation — die Karte reißt zwischen Daten und Code */
  .a-riss{
    position:relative; block-size:1px; margin-inline:-1em;
    background: repeating-linear-gradient(90deg, var(--s3) 0 .28em, transparent .28em .56em);
    opacity:.5;
  }
  .a-riss::before, .a-riss::after{
    content:""; position:absolute; inset-block-start:50%; translate:0 -50%;
    inline-size:.75em; block-size:.75em; border-radius:50%;
    background: var(--f0);
  }
  .a-riss::before{ inset-inline-start:-.375em; }
  .a-riss::after{ inset-inline-end:-.375em; }

  /* Der Code ist die einzige helle Fläche im Schirm — er führt das Auge */
  .a-qr{
    align-self:center;
    inline-size:8.5em; block-size:8.5em;
    background:#fff; border-radius:.5em; padding:.5em;
  }
  .a-qr svg{ inline-size:100%; block-size:100%; }
  .a-code{
    text-align:center; font-family: var(--meta);
    font-size:.75em; letter-spacing:.14em; color: var(--s2);
  }

  /* ---------- Einlass-Scan ---------- */
  /* Das Kamerabild nimmt den Rest des Schirms ein. Fester Seitenwuchs hätte
     je nach Gerätehöhe eine leere Fläche über der Insel stehen lassen. */
  .a-sucher{
    position:relative; inline-size:100%;
    flex:1 1 auto; min-block-size:9em;
    border-radius:1em; background: oklch(8% 0 0);
    display:grid; place-items:center; overflow:hidden;
  }
  .a-code-feld{
    inline-size:44%; aspect-ratio:1;
    background:#fff; border-radius:.375em; padding:.375em;
    rotate:-4deg;
  }
  .a-code-feld svg{ inline-size:100%; block-size:100%; }
  .a-ecke{
    position:absolute; inline-size:1.75em; block-size:1.75em;
    border:2px solid var(--signal); border-radius:.375em;
  }
  .a-ecke:nth-of-type(1){ inset-block-start:1em; inset-inline-start:1em; border-block-end:0; border-inline-end:0; }
  .a-ecke:nth-of-type(2){ inset-block-start:1em; inset-inline-end:1em;  border-block-end:0; border-inline-start:0; }
  .a-ecke:nth-of-type(3){ inset-block-end:1em; inset-inline-start:1em; border-block-start:0; border-inline-end:0; }
  .a-ecke:nth-of-type(4){ inset-block-end:1em; inset-inline-end:1em;  border-block-start:0; border-inline-start:0; }
  .a-scanlinie{
    position:absolute; inset-inline:1em; inset-block-start:1.5em;
    block-size:2px;
    background: linear-gradient(90deg, transparent, var(--signal), transparent);
    animation: scannen 2.8s var(--kurve-kurz) infinite alternate;
  }
  @keyframes scannen{
    from{ inset-block-start:1.5em; }
    to  { inset-block-start: calc(100% - 1.5em); }
  }

  /* ---------- Gemeinde ---------- */
  .a-live-marke{
    display:inline-flex; align-items:center; gap:.45em;
    font-size:.6875em; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color: var(--s1);
  }
  .a-live-marke i{
    inline-size:.5em; block-size:.5em; border-radius:50%;
    background: var(--signal);
    animation: pulsen 2s ease-in-out infinite;
  }
  @keyframes pulsen{ 0%,100%{ opacity:1 } 50%{ opacity:.28 } }
  .a-live-titel{ font-size:1.125em; font-weight:600; letter-spacing:-.02em; }

  /* Die Kachelwand füllt den Rest des Schirms — sonst blieb unter der
     letzten Terminzeile eine leere Fläche über der Insel stehen. */
  .a-gitter{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5em; flex:1 1 auto; }
  .a-kachel{
    background: var(--f1); border-radius:.875em; padding:.875em;
    display:flex; flex-direction:column; justify-content:space-between; gap:1.25em;
    font-size:.875em; font-weight:600;
  }
  .a-kachel svg{ inline-size:1.5em; block-size:1.5em; color: var(--s1); }

  /* ---------- Insel statt Leiste am Bildschirmrand ---------- */
  .app-insel{
    position:absolute; inset-inline:.6875em; inset-block-end:.6875em; z-index:8;
    display:flex; align-items:stretch;
    padding:.4375em;
    border-radius:2em;
    background: rgba(14,14,16,.72);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  .i-punkt{
    flex:1; min-inline-size:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15em;
    padding-block:.4375em;
    border-radius:1.5em;
    color: rgba(255,255,255,.40);
  }
  .i-punkt.an{ background: rgba(255,255,255,.17); color:#fff; }
  .i-punkt svg{ inline-size:1.3125em; block-size:1.3125em; }
  .i-wort{ font-size:.625em; font-weight:600; letter-spacing:.005em; white-space:nowrap; }

  .griffleiste{
    position:absolute; inset-block-end:.28em; inset-inline-start:50%;
    translate:-50% 0;
    inline-size:34%; block-size:.3em; min-block-size:2px;
    border-radius:99px;
    background: rgba(255,255,255,.34);
    z-index:10;
  }

  /* Marken unter dem Gerät */
  .ticks{
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    margin-block-start:.4rem;
  }
  .tick{
    padding:.55rem .1rem;
    display:block;
  }
  .tick i{
    display:block;
    inline-size: 13px; block-size:2px;
    background: var(--haar);
    transition: inline-size .45s var(--kurve), background-color .35s var(--kurve);
  }
  .tick:hover i{ background: var(--text-leise); }
  .tick[aria-current="true"] i{ inline-size: 30px; background: var(--signal); }
}

/* ============================================================
   BÜHNE + TEXTSPALTE
   ============================================================ */
@layer buehne {

  main{ position:relative; z-index:1; }

  .buehne{
    --licht: .5;
    display:grid;
    grid-template-columns: minmax(0,1fr) var(--geraet-spalte);
    gap: clamp(1.6rem, 5vw, 6rem);
    align-items:start;
    max-inline-size: 1680px;
    margin-inline:auto;
    padding-inline: var(--rand);
    padding-block-start: calc(var(--marke) + var(--nav) + 7vh);
    padding-block-end: 10vh;
  }

  .spalte-text{
    grid-column:1; grid-row:1;
    container-type: inline-size;
    min-inline-size:0;
    /* Der Auslauf gehört in die Spalte, nicht in die Sektion: nur so bleibt
       das Gerät bis zum letzten Abschnitt stehen (Rasterfeld = Klebebereich) */
    padding-block-end: clamp(11rem, 32vh, 24rem);
  }

  .block{ scroll-margin-block-start: 32vh; }
  .block + .block{ margin-block-start: clamp(7rem, 17vh, 15rem); }
  #k-gemeinde{ margin-block-start: clamp(10rem, 26vh, 22rem); }
  #k-danach{ margin-block-start: clamp(4.5rem, 9vh, 8rem); }
  #k-fragen{ margin-block-start: clamp(6rem, 13vh, 11rem); }

  .anim{
    opacity:0;
    transform: translateY(20px);
    transition: opacity .8s var(--kurve), transform .8s var(--kurve);
  }
  .anim.sichtbar{ opacity:1; transform:none; }

  @supports (animation-timeline: view()){
    .anim{
      opacity:1; transform:none; transition:none;
      animation: einblenden linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
  @keyframes einblenden{
    from{ opacity:0; transform: translateY(24px); }
    to{ opacity:1; transform:none; }
  }

  /* --- Kopf --- */
  .kopf-unter{
    font-family: var(--display);
    font-size: clamp(1.3rem, 3.1cqi, 2.1rem);
    letter-spacing:-.02em;
    color: var(--signal);
    /* Zwei Sätze statt einem: unter ~405px Satzbreite passt die Zeile
       nicht mehr in einen Zug — dort darf sie zwischen den Sätzen brechen. */
    white-space:normal;
    margin-block-start: clamp(1rem, 2vw, 1.6rem);
  }
  .kopf-text{ margin-block-start: clamp(1.4rem, 2.6vw, 2.2rem); }
  .knopfreihe{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start: clamp(1.8rem, 3.4vw, 2.8rem); }

  /* --- Passt das --- */
  .passung{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr));
    gap: 1px;
    background: var(--haar-fein);
    border-block: 1px solid var(--haar-fein);
  }
  .passung-spalte{ background: var(--grund); padding: clamp(1.4rem,2.6vw,2.4rem) clamp(1.1rem,2vw,2rem); }
  .passung-kopf{
    font-size:.68rem;
    /* Die Spaltenköpfe sind ganze Halbsätze — gesperrt in einer Zeile
       liefen sie aus der Spalte. */
    white-space:normal;
    margin-block-end:1.4rem;
  }
  .passung-spalte.ja .passung-kopf{ color: var(--signal); }
  .passung-spalte.nein .passung-kopf{ color: var(--text-still); }
  .passung li{
    display:flex; gap:.85rem; align-items:flex-start;
    padding-block:.7rem;
    font-size: clamp(1.02rem, 1.9cqi, 1.3rem);
    line-height:1.35;
    letter-spacing:-.012em;
    font-family: var(--display);
  }
  .passung ul{ list-style:none; margin:0; padding:0; }
  .passung-spalte.nein li{ color: var(--text-still); }


  /* Der Lichtschein am Telefon ragte rechts über den Rand und machte die Seite seitlich scrollbar. */
  #buehne{ overflow-x: clip; }

  /* --- Was wir lösen: Problem → Lösung --- */
  .block > h2.mittel{ margin-block-end: clamp(1.4rem, 3vw, 2.6rem); }
  .loesungen{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--haar-fein); }
  .loesungen li{
    display:grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.35fr);
    gap: clamp(.8rem, 2vw, 1.8rem); align-items:baseline;
    padding-block: clamp(1rem, 2vw, 1.5rem); border-block-end:1px solid var(--haar-fein);
  }
  .loesungen .problem{ color: var(--text-leise); font-size: clamp(.95rem, 1.7cqi, 1.1rem); line-height:1.45; }
  .loesungen .pfeil{ color: var(--signal); font-family: var(--display); }
  .loesungen .loesung{ font-family: var(--display); font-size: clamp(1.15rem, 2.5cqi, 1.7rem); letter-spacing:-.02em; line-height:1.2; }
  @media (max-width: 640px){
    .loesungen li{ grid-template-columns: 1fr; gap:.35rem; }
    .loesungen .pfeil{ display:none; }
  }

  /* --- Was wir bauen --- */
  .bauliste{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--haar-fein); }
  .bauliste li{
    display:flex; align-items:baseline; gap: clamp(1rem, 2.5vw, 2.6rem);
    padding-block: clamp(1rem, 2vw, 1.6rem);
    border-block-end:1px solid var(--haar-fein);
    font-family: var(--display);
    font-size: clamp(1.25rem, 3cqi, 2.15rem);
    letter-spacing:-.026em;
    line-height:1.1;
    transition: padding-inline-start .35s var(--kurve), color .35s var(--kurve);
  }
  .bauliste li:hover{ padding-inline-start:.9rem; }
  .bauliste .nr{
    font-family: var(--meta); font-size:.66rem; letter-spacing:.16em;
    color: var(--text-still); flex:0 0 auto;
    transition: color .35s var(--kurve);
  }
  .bauliste li:hover .nr{ color: var(--signal); }

  /* --- Ablauf --- */
  .ablauf{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr));
    gap: clamp(1.6rem, 3vw, 3rem);
  }
  .ablauf-schritt{ border-block-start:1px solid var(--haar); padding-block-start:1.1rem; }
  .ablauf-nr{
    font-family: var(--display);
    font-size: clamp(2.6rem, 5cqi, 4.2rem);
    line-height:1; letter-spacing:-.04em;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-still);
    font-variant-numeric: tabular-nums lining-nums;
    /* die Kontur liegt zur Hälfte außerhalb der Glyphe — sonst steht
       die Ziffer einen halben Strich rechts von der Linie darüber */
    margin-inline-start: -1px;
    transition: -webkit-text-stroke-color .4s var(--kurve), color .4s var(--kurve);
  }
  .ablauf-schritt:hover .ablauf-nr{ -webkit-text-stroke-color: var(--signal); }
  .ablauf-titel{
    font-family: var(--display);
    font-size: clamp(1.1rem, 2cqi, 1.45rem);
    letter-spacing:-.02em;
    margin-block-start:.7rem;
  }
  .ablauf-text{ color: var(--text-leise); font-size:.98rem; margin-block-start:.35rem; max-inline-size: 30ch; }

  /* --- Pakete --- */
  .paket-reihe{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px,100%), 1fr));
    gap:1px;
    background: var(--haar-fein);
    border:1px solid var(--haar-fein);
  }
  .paket{
    background: var(--grund);
    padding: clamp(1.5rem,2.4vw,2.2rem) clamp(1.2rem,1.9vw,1.8rem);
    display:flex; flex-direction:column; gap:.75rem;
    border-block-start: 2px solid transparent;
    transition: background-color .4s var(--kurve);
  }
  .paket:hover{ background: color-mix(in oklch, var(--text) 3%, var(--grund)); }
  .paket.hervor{
    border-block-start-color: var(--signal);
    background: color-mix(in oklch, var(--signal) 5%, var(--grund));
  }
  .paket-marke{
    font-size:.63rem;
    color: var(--text-still);
  }
  .paket.hervor .paket-marke{ color: var(--signal); }
  .paket h3{ font-size: clamp(1.35rem, 2.4cqi, 1.75rem); letter-spacing:-.025em; }
  .paket-text{ color: var(--text-leise); font-size:.98rem; flex:1; }
  .paket-preis{
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.7cqi, 2rem);
    letter-spacing:-.03em;
    word-spacing:-.02em;
    font-variant-numeric: tabular-nums lining-nums;
    white-space:nowrap;
  }
  /* Die Zahl trägt, das "ab" ordnet sich unter — sonst wiegen beide gleich */
  .paket-preis .ab{
    font-size:.58em; color: var(--text-still);
    letter-spacing:0; margin-inline-end:.12em;
  }
  .paket.hervor .paket-preis{ color: var(--signal); }
  /* Zusatz und Dauer laufen als Fließtext, nicht als Signalzeile:
     enge Sperrung, gemischte Schreibung, damit die Preiszeile allein steht. */
  .paket-zusatz, .paket-dauer{
    font-size:.68rem; letter-spacing:.06em; word-spacing:normal;
    text-transform:none;
    /* Zusatz und Dauer sind jetzt halbe Sätze, keine Kürzel mehr —
       in der schmalen Paketspalte müssen sie umbrechen dürfen. */
    white-space:normal;
    color: var(--text-still);
  }
  .paket-dauer{ padding-block-start:.75rem; border-block-start:1px solid var(--haar-fein); }

  /* Preis, Zusatz und Dauer liegen in jeder Kartenreihe auf einer Linie.
     Ohne Breitengrenze: sonst standen die Preise genau dort schief, wo nur
     zwei Karten nebeneinander passen (Fenster um 560 px). */
  @supports (grid-template-rows: subgrid){
    .paket-reihe{ grid-template-rows: auto auto 1fr auto auto auto; }
    .paket{ display:grid; grid-template-rows: subgrid; grid-row: span 6; row-gap:.75rem; }
    .paket-text{ align-self:start; }
  }

  /* --- Angebot --- */
  /* 20ch statt 16ch: so bricht die Zeile zwischen den beiden Sätzen */
  .angebot h2{ max-inline-size: 20ch; }
  .angebot .lauf{ margin-block-start: clamp(1.2rem,2.4vw,2rem); }

  /* --- Danach --- */
  .danach{ border-block-start:1px solid var(--haar-fein); }
  .danach-zeile{
    display:grid;
    grid-template-columns: minmax(120px, 15%) 1fr;
    gap: clamp(1rem, 2.5vw, 3rem);
    padding-block: clamp(1.2rem,2.2vw,1.8rem);
    border-block-end:1px solid var(--haar-fein);
  }
  .danach-marke{
    font-size:.66rem;
    /* "Weg B · empfohlen" ist länger als die 120px-Spalte im mittleren
       Fenster — lieber umbrechen als in den Text laufen. */
    white-space:normal;
    color: var(--signal); padding-block-start:.45rem;
  }
  .danach-text{
    font-size: clamp(1.05rem, 1.9cqi, 1.28rem);
    color: var(--text); line-height:1.5;
    max-inline-size: 54ch;
  }

  /* --- Gemeinden --- */
  /* Zeile aus Satz und Handlung statt Text oben links im leeren Rahmen */
  .gemeinde-feld{
    border:1px solid color-mix(in oklch, var(--signal) 22%, transparent);
    background: color-mix(in oklch, var(--signal) 4%, transparent);
    padding: clamp(1.8rem, 3.4vw, 3.4rem);
    display:grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items:end;
    gap: clamp(1.2rem, 2.4vw, 2rem) clamp(1.6rem, 4vw, 4rem);
  }
  /* 26ch statt 15ch: die längere Überschrift bricht sonst in drei Stücke */
  .gemeinde-feld h2{ grid-column: 1 / -1; max-inline-size: 26ch; }
  .gemeinde-feld .lauf{ max-inline-size:38ch; }
  .gemeinde-feld .knopf{ align-self:end; }

  /* --- Fragen --- */
  .fragen{ border-block-start:1px solid var(--haar-fein); }
  .frage{
    display:grid;
    grid-template-columns: minmax(220px, 34%) 1fr;
    gap: clamp(1rem, 3vw, 3rem);
    padding-block: clamp(1.3rem, 2.4vw, 2rem);
    border-block-end:1px solid var(--haar-fein);
  }
  .frage h3{ font-size: clamp(1.15rem, 2.2cqi, 1.55rem); letter-spacing:-.024em; }
  .frage p{ color: var(--text-leise); max-inline-size: 52ch; }

  /* --- Abschluss --- */
  .abschluss{
    position:relative;
    max-inline-size: 1680px; margin-inline:auto;
    padding-inline: var(--rand);
    padding-block: clamp(8rem, 22vh, 18rem) 6rem;
    container-type: inline-size;
    border-block-start:1px solid var(--haar-fein);
  }
  .abschluss .gross{ font-size: clamp(2.9rem, 11cqi, 9rem); }
  .abschluss .knopfreihe{ margin-block-start: clamp(2rem,4vw,3.4rem); }

  .fusszeile{
    max-inline-size: 1680px; margin-inline:auto;
    padding-inline: var(--rand);
    padding-block: 2.4rem 3.4rem;
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem;
    border-block-start:1px solid var(--haar-fein);
    font-family: var(--meta);
    font-size:.72rem; letter-spacing:.08em;
    color: var(--text-still);
  }
  .fusszeile a{ transition: color .2s var(--kurve-kurz); white-space:nowrap; }
  .fusszeile a:hover{ color: var(--signal); }
  .fusszeile .trenn{ color: var(--haar); }
}

/* ============================================================
   UMBRUCH
   ============================================================ */
@layer umbruch {

  @media (max-width: 1080px){
    :root{ --geraet-spalte: clamp(230px, 25vw, 300px); }
    .geraet{ block-size: min(58vh, 560px); }
  }

  @media (max-width: 900px){
    :root{ --nav: 56px; }

    .buehne{
      display:block;
      padding-block-start: calc(var(--marke) + var(--nav) + 3vh);
      padding-block-end: 8vh;
    }
    .spalte-text{ padding-block-end: 0; }

    .geraet-halter{
      position: sticky;
      inset-block-start: calc(var(--marke) + var(--nav));
      padding-block: 2.2vh 1rem;
      margin-block-end: 5vh;
      gap:.6rem;
    }
    /* Vorhang, damit der Text sauber hinter dem Gerät verschwindet */
    .geraet-halter::before,
    .geraet-halter::after{
      content:"";
      position:absolute;
      inset-inline: calc(var(--rand) * -1);
      z-index:-2;
    }
    .geraet-halter::before{
      inset-block: -1px 0;
      background: var(--grund);
    }
    .geraet-halter::after{
      inset-block-start: 100%;
      block-size: 54px;
      background: linear-gradient(to bottom, var(--grund), transparent);
    }
    .geraet{ block-size: min(41vh, 400px); }
    .monitor, .monitor-schiene{ max-inline-size: 20rem; }
    .licht{ inline-size: min(82%, 460px); }
    .pfuetze{ inline-size: min(66%, 380px); block-size: 9%; }

    .block + .block{ margin-block-start: clamp(5rem, 12vh, 9rem); }
    #k-gemeinde{ margin-block-start: clamp(6rem, 16vh, 12rem); }
    /* das Gerät steht oben — ein angesprungener Abschnitt muss darunter landen */
    .block{ scroll-margin-block-start: 54vh; }

    .frage, .danach-zeile{ grid-template-columns: 1fr; gap:.5rem; }
    .gemeinde-feld{ grid-template-columns: 1fr; align-items:start; }
    .gemeinde-feld h2{ max-inline-size: none; }

    /* Fingergroße Marken statt Mausmarken */
    .ticks{ gap:.34rem; }
    .tick{ padding:.7rem .4rem; }
  }

  @media (max-width: 700px){
    .menue .nur-breit{ display:none; }
  }

  @media (max-width: 560px){
    :root{ --rand: 1.15rem; }
    .geraet{ block-size: min(40vh, 360px); }
    /* Zwei nowrap-Knöpfe passen unter 400px nicht nebeneinander —
       sie würden abgeschnitten, nicht umbrechen. Also untereinander. */
    .knopfreihe{ flex-direction:column; align-items:stretch; gap:.6rem; }
    .knopfreihe .knopf{ justify-content:center; }
    .ticks{ gap:.3rem; }
    .tick i{ inline-size:9px; }
    .tick[aria-current="true"] i{ inline-size:22px; }
    .wortmarke{ font-size:.92rem; }
    /* Die längeren Rubriken passen gesperrt nicht mehr in eine Zeile */
    .rubrik{ white-space:normal; }
    /* Deutsche Komposita brauchen im schmalen Satz die Trennung */
    .lauf, .paket-text, .frage p, .ablauf-text, .danach-text, .passung li span:last-child{
      hyphens:auto; -webkit-hyphens:auto;
    }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
    }
    .anim{ opacity:1 !important; transform:none !important; animation:none !important; }
  }

  @media print{
    .geraet-halter, }
}
  /* Eingebetteter Anfrage-Generator. Laeuft auf interactive.mediaandmerch.de
     und wird mit ?ton=dunkel in der dunklen Fassung ausgeliefert, damit er
     nicht als heller Fremdkoerper in der Buehne sitzt. */
  .generator{
    margin-top: clamp(28px, 4vw, 52px);
    border-block-start: 1px solid var(--linie);
    padding-block-start: clamp(24px, 3vw, 40px);
  }
  .generator-kopf{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
    margin-block-end: clamp(16px, 2vw, 26px);
  }
  .generator-kopf .wege{ color: var(--s2); font-size:.9375rem; }
  .generator-rahmen{
    border:1px solid var(--linie);
    background:#111113;
    overflow:hidden;
  }
  .generator-rahmen iframe{
    inline-size:100%; display:block; border:0; min-block-size:520px;
    color-scheme: dark;
  }

  /* 07.09.2026: „Wissen" bleibt auch auf dem Handy oben im Menü sichtbar */
  @media (max-width: 560px){
    .menue{ gap:.75rem; }
    .menue .knopf-klein{ padding-inline:.85em; }
  }
  @media (max-width: 400px){
    .menue a{ font-size:.8rem; }
    .menue .knopf-klein{ font-size:.78rem; }
  }