/* =====================================================================
     Farben und Schriften folgen dem Auftritt der SH VermögensArchitekt GmbH.

     Das Navy stammt gemessen aus der Logodatei, nicht geschätzt. Das Blau
     ist die Akzentfarbe des Fördermittelpasses selbst — so steht die Seite
     neben dem Produkt, statt daneben. Die Schrift Jost nimmt die geometrische
     Anmutung des Logos auf; der Fließtext läuft in derselben Schrift wie im
     Pass, damit der Übergang nicht bricht.
     ===================================================================== */
  :root {
    /* CI SH VermögensArchitekt */
    --navy:       #232850;
    --navy-tief:  #171B39;
    --navy-hauch: #EDEEF4;

    /* Akzent des Produkts */
    --blau:       #1977B5;
    /* Derselbe Ton, abgedunkelt: als kleine Schrift kommt #1977B5 auf dem
       Sockel nur auf 4,18:1. Fuer Flaechen und grosse Zahlen bleibt --blau. */
    --blau-schrift: #15679C;
    --blau-tief:  #0E3F5F;
    --blau-hell:  #6FB6E2;
    --blau-hauch: #EAF3FA;

    --papier:  #F7F7F2;
    --flaeche: #FFFFFF;
    --sockel:  #EFEFE9;
    --tinte:   #1A1D33;
    --tinte-weich: #4C5168;
    --tinte-fein:  #666B80;
    --linie:      #DEDFD9;
    --linie-fein: #EAEBE5;

    /* Die dunkle Buehne von Kopfleiste und Auftakt — dieselbe Rolle wie die
       Kopfleiste im Pass, damit Seite und Produkt zusammengehoeren. */
    --buehne:       #1B2044;
    --buehne-tief:  #12162E;
    --buehne-tinte: #FFFFFF;
    --buehne-leise: #C3C8E4;
    --buehne-linie: rgba(255,255,255,0.16);

    --spalte: 68rem;
    --schmal: 40rem;

    --knopf-grund: #1977B5;
    --knopf-schrift: #FFFFFF;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --navy:       #B7BCE0;
      --navy-tief:  #D6D9EE;
      --navy-hauch: #1B1F3A;

      --blau:       #6FB6E2;
      --blau-schrift: #9BCDEC;
      --blau-tief:  #9BCDEC;
      --blau-hell:  #6FB6E2;
      --blau-hauch: #12293A;

      --papier:  #0C0E1A;
      --flaeche: #141829;
      --sockel:  #101426;
      --tinte:   #E8EAF3;
      --tinte-weich: #A6ABC2;
      --tinte-fein:  #8188A3;
      --linie:      #262B45;
      --linie-fein: #1C2138;

      --buehne:       #141830;
      --buehne-tief:  #0B0E1E;
      --buehne-tinte: #FFFFFF;
      --buehne-leise: #C3C8E4;
      --buehne-linie: rgba(255,255,255,0.14);
      --knopf-grund: #6FB6E2;
      --knopf-schrift: #0C0E1A;
    }
  }
  :root[data-theme="dark"] {
    --navy:       #B7BCE0;
    --navy-tief:  #D6D9EE;
    --navy-hauch: #1B1F3A;

    --blau:       #6FB6E2;
    --blau-schrift: #9BCDEC;
    --blau-tief:  #9BCDEC;
    --blau-hell:  #6FB6E2;
    --blau-hauch: #12293A;

    --papier:  #0C0E1A;
    --flaeche: #141829;
    --sockel:  #101426;
    --tinte:   #E8EAF3;
    --tinte-weich: #A6ABC2;
    --tinte-fein:  #8188A3;
    --linie:      #262B45;
    --linie-fein: #1C2138;

    --buehne:       #141830;
    --buehne-tief:  #0B0E1E;
    --buehne-tinte: #FFFFFF;
    --buehne-leise: #C3C8E4;
    --buehne-linie: rgba(255,255,255,0.14);
    --knopf-grund: #6FB6E2;
    --knopf-schrift: #0C0E1A;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  section > * { min-width: 0; }
  img { max-width: 100%; display: block; }

  h1, h2, h3 {
    font-family: Jost, "Avenir Next", Avenir, ui-sans-serif, sans-serif;
    line-height: 1.14; margin: 0; text-wrap: balance; color: var(--navy);
  }
  h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); font-weight: 500; letter-spacing: -0.012em; }
  h2 { font-size: clamp(1.55rem, 3.3vw, 2.3rem); font-weight: 500; letter-spacing: -0.008em; }
  h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: 0; }
  p  { margin: 0; }

  /* ---------- Bemaßung: die durchgehende Gestaltungsidee ----------
     VermögensArchitekt — deshalb liest sich die Seite wie eine Zeichnung:
     Maßlinien mit Endstrichen, Positionsnummern, Zahlen in der Mono. */
  .marke {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tinte-fein);
  }
  .masszahl {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }
  /* Zahlen mitten im Satz bleiben in der Textschrift — ein Wechsel auf Mono
     zerreisst die Zeile. Betont wird über Gewicht und Farbe. */
  .betrag { font-weight: 600; color: var(--blau-schrift); font-variant-numeric: tabular-nums; }
  .masslinie {
    position: relative; height: 1px; background: var(--linie);
    margin: 2.6rem 0;
  }
  .masslinie::before, .masslinie::after {
    content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--linie);
  }
  .masslinie::before { left: 0; }
  .masslinie::after  { right: 0; }

  /* ---------- Grundraster ---------- */
  .bahn { padding: clamp(3.2rem, 7vw, 6rem) 1.25rem; }
  .bahn.hell   { background: var(--flaeche); }
  .bahn.sockel { background: var(--sockel); }
  .innen { max-width: var(--spalte); margin: 0 auto; }

  .kopfzeile { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 2.4rem; }
  .kopfzeile .zahl {
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem;
    letter-spacing: 0.16em; color: var(--blau-schrift); font-weight: 500;
  }
  .kopfzeile p.lead { color: var(--tinte-weich); font-size: 1.08rem; max-width: var(--schmal); }

  /* ---------- Kopfleiste ----------
     Dunkel wie die Kopfleiste im Pass. Die Seite beginnt damit im selben Ton,
     in dem das Produkt dann weitermacht. */
  .navleiste {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--buehne) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--buehne-linie);
    color: var(--buehne-tinte);
  }
  .navinnen {
    max-width: var(--spalte); margin: 0 auto; padding: 0.6rem 1.25rem;
    display: flex; align-items: center; gap: 0.8rem; flex-wrap: nowrap;
  }
  /* Dieselbe Marke wie im Kopf des Passes: Dach über Prüfhaken, daneben der
     Produktname und darunter, wer ihn entwickelt hat. */
  .navmarke { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; flex: none;
              text-decoration: none; color: inherit; min-width: 0; }
  .navmarke .zeichen { width: 30px; height: 30px; flex: none; display: block; }
  .navmarke .zeichen svg { width: 100%; height: 100%; display: block; }
  .navmarke .wort { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .navmarke .n {
    font-family: Jost, "Avenir Next", sans-serif; font-weight: 500; font-size: 1.06rem;
    color: var(--buehne-tinte); letter-spacing: -0.004em; white-space: nowrap;
  }
  .navmarke .s {
    font-size: 0.63rem; color: var(--buehne-leise); white-space: nowrap;
  }
  .navlinks {
    display: flex; gap: 0.1rem; flex-wrap: nowrap; min-width: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .navlinks::-webkit-scrollbar { display: none; }
  @media (max-width: 58rem) {
    .navinnen { gap: 0.7rem; }
    .navmarke .wort { display: none; }
    .navlinks { margin-right: -1.25rem; padding-right: 1.25rem; }
  }
  .navlinks a {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    /* Eng gesetzt: Mit dem siebten Eintrag („Preis“, 21.09.2026) reicht die
       Zeile sonst nicht mehr — der letzte Eintrag rutschte hinter den Rand des
       Scrollbereichs und war nicht mehr zu sehen. */
    font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--buehne-leise); text-decoration: none;
    padding: 0.4rem 0.26rem; border-radius: 2px; white-space: nowrap;
    transition: color 140ms ease, background 140ms ease;
  }
  .navlinks a:hover { color: var(--buehne-tinte); background: var(--buehne-hover, rgba(255,255,255,0.10)); }
  .navlinks a.aktiv { color: var(--blau-hell); background: var(--buehne-aktiv, rgba(255,255,255,0.12)); }
  .navlinks a:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--blau-hell); outline-offset: 2px;
  }

  /* ---------- Knöpfe ---------- */
  .knopf {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none; padding: 0.72rem 1.15rem; border-radius: 2px;
    background: var(--knopf-grund); color: var(--knopf-schrift);
    border: 1px solid var(--knopf-grund); white-space: nowrap;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .knopf:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20,24,50,0.20); }
  .knopf:active { transform: none; box-shadow: none; }
  @media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:hover { transform: none; } }
  .knopf.gross { font-size: 0.78rem; padding: 0.95rem 1.6rem; }
  .knopf.rand { background: transparent; color: var(--blau); border-color: var(--blau); }
  .knopf .pfeilchen { font-size: 1em; }
  .navknopf { flex: none; }
  @media (max-width: 58rem) { .navknopf { display: none; } }
  .zeile { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
  .zeile .dazu { font-size: 0.86rem; color: var(--tinte-weich); }

  /* ---------- Auftakt: die dunkle Bühne ----------
     Links das Versprechen, rechts die Rechnung dazu. Die Zahl zählt sich beim
     Laden hoch und die Balken der Förderklasse wachsen — das ist das, was das
     Produkt tut, und es soll gleich zu sehen sein. */
  .auftakt {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--buehne); color: var(--buehne-tinte);
    padding: clamp(2.8rem, 6vw, 5rem) 1.25rem clamp(2.4rem, 5vw, 3.6rem);
  }
  .auftakt::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60rem 32rem at 78% 12%, var(--buehne-glanz, rgba(25,119,181,0.38)), transparent 62%),
      radial-gradient(44rem 28rem at 8% 96%, var(--buehne-glanz-leise, rgba(111,182,226,0.14)), transparent 60%),
      linear-gradient(180deg, var(--buehne) 0%, var(--buehne-tief) 100%);
  }
  .auftakt .innen { display: grid; gap: clamp(2rem, 4vw, 3rem); }
  @media (min-width: 62rem) {
    .auftaktoben { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 3rem; align-items: center; }
  }
  .auftaktwort { display: grid; gap: 1.15rem; align-content: start; }
  .auftakt .marke { color: var(--buehne-leise); }
  .auftakt h1 { color: var(--buehne-tinte); max-width: 15ch; }
  .auftakt .lead { font-size: clamp(1.05rem, 2.1vw, 1.24rem); color: var(--buehne-leise); max-width: 46ch; }
  .auftakt .betont { color: var(--buehne-tinte); font-weight: 600; }
  .auftakt .zeile .dazu { color: var(--buehne-leise); }
  .auftakt .knopf.rand { color: var(--buehne-tinte); border-color: var(--buehne-rand, rgba(255,255,255,0.42)); background: transparent; }
  .auftakt .knopf.rand:hover { border-color: var(--buehne-tinte); background: var(--buehne-hover, rgba(255,255,255,0.08)); }

  /* Die Rechenkarte — der Beispielfall, den der Pass wirklich rechnet */
  .rechenkarte {
    background: var(--buehne-karte, rgba(255,255,255,0.055)); border: 1px solid var(--buehne-linie);
    border-radius: 6px; padding: 1.5rem 1.6rem; display: grid; gap: 1rem;
    box-shadow: var(--buehne-schatten, 0 18px 44px rgba(6,9,24,0.34));
  }
  .rechenkarte .marke { color: var(--buehne-leise); }
  .grosszahl {
    font-family: Jost, "Avenir Next", sans-serif; font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--blau-hell);
    font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
  }
  .grossunter { font-size: 0.92rem; color: var(--buehne-leise); max-width: 34ch; }
  .teilung { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--buehne-linie);
             border: 1px solid var(--buehne-linie); border-radius: 3px; overflow: hidden; }
  .teilung > div { background: var(--buehne-feld, rgba(12,15,34,0.34)); padding: 0.75rem 0.85rem; display: grid; gap: 0.1rem; }
  .teilung b { font-family: Jost, "Avenir Next", sans-serif; font-weight: 500; font-size: 1.32rem;
               color: var(--buehne-tinte); font-variant-numeric: tabular-nums; line-height: 1.15; }
  .teilung span { font-size: 0.76rem; color: var(--buehne-leise); }
  .darlehenzeile { font-size: 0.8rem; color: var(--buehne-leise); border-top: 1px solid var(--buehne-linie);
                   padding-top: 0.85rem; }

  /* Förderklassen-Band, dem Produkt entnommen */
  .band { display: grid; gap: 0.5rem; }
  .bandreihe { display: flex; height: 30px; border-radius: 2px; overflow: hidden; }
  .bandreihe i { flex: 1; display: grid; place-items: center;
    font-family: "IBM Plex Mono", monospace; font-size: 0.62rem; font-style: normal; color: #12162B;
    transform: scaleX(0); transform-origin: left center;
    animation: balken 460ms cubic-bezier(.2,.75,.3,1) forwards; animation-delay: var(--takt, 0ms); }
  @keyframes balken { to { transform: scaleX(1); } }
  .bandreihe i.hier { flex: 1.5; font-weight: 500; position: relative; }
  .bandreihe i.hier::after {
    content: ""; position: absolute; inset: 0; border: 2px solid var(--buehne-tinte);
    opacity: 0; animation: markieren 320ms ease forwards; animation-delay: 900ms;
  }
  @keyframes markieren { to { opacity: 1; } }
  .bandtext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .bandtext .marke { color: var(--buehne-leise); }
  @media (prefers-reduced-motion: reduce) {
    .bandreihe i { transform: none; animation: none; }
    .bandreihe i.hier::after { opacity: 1; animation: none; }
  }

  .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
         background: var(--buehne-linie); border: 1px solid var(--buehne-linie);
         border-radius: 3px; overflow: hidden; }
  .kpi > div { background: var(--buehne-feld, rgba(12,15,34,0.30)); padding: 1rem 1.1rem; display: grid; gap: 0.15rem; }
  .kpi .wert { font-family: Jost, "Avenir Next", sans-serif; font-size: 1.9rem; font-weight: 500; line-height: 1;
               color: var(--blau-hell); font-variant-numeric: tabular-nums; }
  .kpi .was  { font-size: 0.8rem; color: var(--buehne-leise); }

  /* ---------- Laufband: was im Katalog steht ----------
     Zwölf Programmnamen, die langsam durchlaufen. Sie sagen ohne einen Satz,
     wie viel hinter der Zahl oben steckt. */
  .laufband {
    background: var(--buehne-tief); border-bottom: 1px solid var(--linie);
    overflow: hidden; padding: 0.7rem 0; position: relative;
  }
  .laufband::before, .laufband::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 2; pointer-events: none;
  }
  .laufband::before { left: 0; background: linear-gradient(90deg, var(--buehne-tief), transparent); }
  .laufband::after { right: 0; background: linear-gradient(270deg, var(--buehne-tief), transparent); }
  .laufspur { display: flex; width: max-content; animation: laufen 62s linear infinite; }
  .laufband:hover .laufspur, .laufband:focus-within .laufspur { animation-play-state: paused; }
  @keyframes laufen { to { transform: translateX(-50%); } }
  .laufspur span {
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem;
    letter-spacing: 0.08em; color: var(--buehne-leise); white-space: nowrap; padding: 0 1.15rem;
    display: inline-flex; align-items: center; gap: 1.15rem;
  }
  .laufspur span::after { content: "·"; color: var(--blau-hell); }
  @media (prefers-reduced-motion: reduce) {
    .laufspur { animation: none; }
    .laufband { overflow-x: auto; scrollbar-width: none; }
  }

  /* ---------- Auftreten beim Scrollen ---------- */
  .enthuellen { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms ease; }
  .enthuellen.da { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .enthuellen { opacity: 1; transform: none; transition: none; }
  }

  /* ---------- Karten ---------- */
  .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
  .karte {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
    padding: 1.3rem 1.35rem; display: grid; gap: 0.5rem; align-content: start;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
  .karte:hover {
    transform: translateY(-3px); border-color: var(--blau);
    box-shadow: 0 10px 26px rgba(20,24,50,0.10);
  }
  @media (prefers-reduced-motion: reduce) {
    .karte { transition: none; }
    .karte:hover { transform: none; }
  }
  .karte .marke { color: var(--blau-schrift); }
  .karte p { font-size: 0.92rem; color: var(--tinte-weich); }
  .karte.betont { border-left: 3px solid var(--blau); }
  .karte .form {
    font-family: Jost, "Avenir Next", sans-serif; font-size: 1.5rem; font-weight: 500;
    color: var(--navy); line-height: 1.1;
  }

  /* ---------- Zwei Regeln ---------- */
  .regeln { display: grid; gap: 1px; background: var(--linie);
            border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; }
  @media (min-width: 46rem) { .regeln { grid-template-columns: 1fr 1fr; } }
  .regel { background: var(--flaeche); padding: 1.3rem 1.35rem; display: grid; gap: 0.45rem; align-content: start; }
  .regel .marke { color: var(--blau-schrift); }
  .regel p { font-size: 0.93rem; color: var(--tinte-weich); }

  /* ---------- Bildstrecke ---------- */
  .buehne { display: grid; gap: 1rem; }
  .rahmen {
    position: relative; background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: 4px; overflow: hidden;
  }
  .fenster { overflow: hidden; }
  .schiene { display: flex; transition: transform 460ms cubic-bezier(.22,.61,.36,1); }
  @media (prefers-reduced-motion: reduce) { .schiene { transition: none; } }
  .folie { flex: 0 0 100%; min-width: 0; }
  .folie img { width: 100%; height: auto; background: var(--sockel); cursor: zoom-in; }
  .lupenhinweis {
    position: absolute; right: 0.7rem; bottom: 0.7rem; pointer-events: none; z-index: 2;
    background: var(--blau-tief); color: #FFF; border-radius: 2px; padding: 0.3rem 0.6rem;
    box-shadow: 0 1px 4px rgba(12,14,26,0.25);
  }

  /* ---------- Lupe ---------- */
  .lupe[hidden] { display: none; }
  .lupe {
    position: fixed; inset: 0; z-index: 100; background: #0A0C18;
    display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; padding: 0.7rem;
  }
  .lupe .kopf { display: flex; align-items: center; gap: 1rem; color: #E9EBF4; }
  .lupe .kopf b { font-family: Jost, "Avenir Next", sans-serif; font-weight: 500; font-size: 1.02rem; margin-right: auto; }
  .lupe .schliessen {
    background: transparent; border: 1px solid rgba(233,235,244,0.45); color: #E9EBF4;
    border-radius: 2px; padding: 0.35rem 0.7rem; cursor: pointer;
    font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .lupe .schliessen:hover { border-color: #FFF; }
  .lupe .schau { overflow: auto; border-radius: 3px; background: #FFF; }
  .lupe .schau img { width: 1440px; max-width: none; height: auto; }
  @media (min-width: 92rem) { .lupe .schau img { width: 100%; } }
  .lupe .fuss { color: rgba(233,235,244,0.72); font-size: 0.78rem; }

  .steuer { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
  .punkte { display: flex; gap: 0.3rem; margin-right: auto; flex-wrap: wrap; }
  .punkte button {
    border: 1px solid var(--linie); background: transparent; cursor: pointer;
    font-family: "IBM Plex Mono", monospace; font-size: 0.62rem; letter-spacing: 0.08em;
    color: var(--tinte-weich); padding: 0.32rem 0.6rem; border-radius: 2px;
    text-transform: uppercase; transition: background 140ms, color 140ms, border-color 140ms;
  }
  .punkte button:hover { border-color: var(--blau); color: var(--tinte); }
  .punkte button[aria-selected="true"] {
    background: var(--blau); border-color: var(--blau); color: #FFF; font-weight: 500;
  }
  :root[data-theme="dark"] .punkte button[aria-selected="true"],
  .lupe .schliessen { color: inherit; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .punkte button[aria-selected="true"] { color: #0C0E1A; }
  }
  :root[data-theme="dark"] .punkte button[aria-selected="true"] { color: #0C0E1A; }
  .pfeil {
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
    width: 2.1rem; height: 2.1rem; border-radius: 2px; cursor: pointer; display: grid; place-items: center;
    font-size: 0.95rem; line-height: 1;
  }
  .pfeil:hover { border-color: var(--blau); color: var(--blau-schrift); }
  .pfeil[disabled] { opacity: 0.35; cursor: default; }
  .bildtext { display: grid; gap: 0.3rem; min-height: 4.6rem; }
  .bildtext b { font-family: Jost, "Avenir Next", sans-serif; font-weight: 500; font-size: 1.06rem; color: var(--navy); }
  .bildtext span { font-size: 0.9rem; color: var(--tinte-weich); }

  /* ---------- Sichten-Reiter ---------- */
  .reiter { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
  .reiter button {
    font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.55rem 0.9rem; cursor: pointer;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-weich); border-radius: 2px;
  }
  .reiter button[aria-selected="true"] { border-color: var(--blau); background: var(--blau-hauch); color: var(--blau-schrift); font-weight: 500; }
  .sicht[hidden] { display: none; }
  .sicht { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 52rem) { .sicht.mitbild { grid-template-columns: 1fr 17rem; align-items: start; } }
  .satzliste { display: grid; gap: 0.9rem; max-width: 46rem; }
  .satzliste > div { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.7rem; align-items: start; }
  .satzliste .nr { font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--blau-schrift);
                   padding-top: 0.28rem; font-variant-numeric: tabular-nums; }
  .satzliste b { display: block; font-family: Jost, "Avenir Next", sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--navy); }
  .satzliste span { font-size: 0.93rem; color: var(--tinte-weich); }

  /* ---------- Telefonrahmen ---------- */
  .telefon {
    border: 8px solid var(--navy); border-radius: 22px; overflow: hidden;
    max-width: 15rem; background: var(--navy); justify-self: center;
  }
  .telefon img { border-radius: 14px; }

  /* ---------- Gegenüberstellung ---------- */
  .gegen { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; }
  .gegenreihe { display: grid; grid-template-columns: minmax(0,1fr); background: var(--flaeche); }
  @media (min-width: 46rem) { .gegenreihe { grid-template-columns: 1fr 1fr; } }
  .gegenreihe > div { padding: 1.05rem 1.2rem; display: grid; gap: 0.3rem; align-content: start; }
  .gegenreihe > div + div { border-top: 1px solid var(--linie); }
  @media (min-width: 46rem) { .gegenreihe > div + div { border-top: 0; border-left: 1px solid var(--linie); } }
  .gegenreihe .andere {
    background:
      repeating-linear-gradient(135deg, transparent 0 7px, var(--linie) 7px 8px),
      var(--sockel);
  }
  .gegenreihe .andere .marke { color: var(--tinte-fein); }
  .gegenreihe .unser .marke { color: var(--blau-schrift); }
  .gegenreihe p { font-size: 0.93rem; color: var(--tinte-weich); }
  .gegenreihe .unser p { color: var(--tinte); }

  /* ---------- Pipeline ---------- */
  .stufen { display: grid; gap: 0.7rem; }
  .stufe { border: 1px solid var(--linie); border-radius: 3px; background: var(--flaeche); overflow: hidden; }
  .stufe > button {
    width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
    padding: 1rem 1.2rem; display: flex; gap: 0.9rem; align-items: baseline; color: inherit; font: inherit;
    flex-wrap: wrap;
  }
  .stufe .stufennr { font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--blau-schrift); }
  .stufe .stufenname { font-family: Jost, "Avenir Next", sans-serif; font-weight: 600; font-size: 1.02rem;
                       color: var(--navy); margin-right: auto; }
  .stufe .modell { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; color: var(--tinte-fein); }
  .stufe .zeichen { color: var(--tinte-fein); font-size: 0.8rem; }
  .stufe .inhalt { padding: 0 1.2rem 1.15rem; display: grid; gap: 0.45rem; }
  .stufe .inhalt p { font-size: 0.93rem; color: var(--tinte-weich); }
  .stufe[data-offen="nein"] .inhalt { display: none; }
  .stufe[data-offen="ja"] { border-color: var(--blau); }

  /* ---------- Abschluss ---------- */
  .abschluss .innen { display: grid; gap: 1.3rem; justify-items: start; }
  .abschluss h2 { max-width: 20ch; }
  .abschluss p { color: var(--tinte-weich); max-width: 52ch; }

  .fussnote { max-width: var(--spalte); margin: 0 auto; padding: 2.2rem 1.25rem 3.5rem;
              border-top: 1px solid var(--linie); display: grid; gap: 1.1rem; }
  .fusslogo { height: 58px; width: auto; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fusslogo { background: #FFF; border-radius: 3px; padding: 4px 6px; }
  }
  :root[data-theme="dark"] .fusslogo { background: #FFF; border-radius: 3px; padding: 4px 6px; }
  .fussnote p { font-size: 0.82rem; color: var(--tinte-fein); max-width: 62ch; }

  /* Der bemaßte Rand — nur auf breiten Schirmen */
  @media (min-width: 78rem) {
    .bahn, .auftakt { position: relative; }
    .bahn::before, .auftakt::before {
      content: ""; position: absolute; left: max(1.25rem, calc(50% - var(--spalte) / 2 - 2.4rem));
      top: 2.6rem; bottom: 2.6rem; width: 1px; background: var(--linie-fein);
    }
    .auftakt::before { background: var(--buehne-linie-fein, rgba(255,255,255,0.13)); z-index: 1; }
  }

/* =====================================================================
   Aus Inline-Attributen herausgelöst (17.09.2026).

   Die Seite wird seit dem Umzug vom Backend ausgeliefert, und dessen
   Content-Security-Policy erlaubt kein 'unsafe-inline' — weder für
   <style>-Blöcke noch für style="…"-Attribute. Beides hätte der Browser
   verworfen, die Seite stand ohne Layout da. Die Regeln sind unverändert,
   nur ihr Ort ist ein anderer.
   ===================================================================== */

.blauhell   { color: var(--blau-hell); }
.kleinleise { font-size: 0.86rem; color: var(--buehne-leise); }
.relativ    { position: relative; }
.ohnerand   { margin: 0; }

/* Farbband der Förderklassen: Farbe und Einsatzversatz je Kachel. */
.kachel.k1 { background: #2E7D4F; color: #fff; --takt: 0ms; }
.kachel.k2 { background: #6FA33F; --takt: 110ms; }
.kachel.k3 { background: #B9AC33; --takt: 220ms; }
.kachel.k4 { background: #C98A2E; --takt: 330ms; }
.kachel.k5 { background: #B0503A; color: #fff; --takt: 440ms; }

  /* =====================================================================
     Preis. Ein Schild, daneben was drin ist — die Zahl steht allein, damit
     sie niemand suchen muss. Die Aufzaehlung nennt dieselben Merkmale wie
     das Produkt bei Stripe; geaendert wird sie dort und hier zugleich.
     ===================================================================== */
  .preistafel {
    display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: start; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  }
  @media (max-width: 46rem) { .preistafel { grid-template-columns: 1fr; } }

  .preisschild {
    background: var(--blau-hauch); border: 1px solid var(--blau-hell);
    border-radius: 14px; padding: clamp(1.4rem, 3vw, 1.9rem);
  }
  .preisschild .betrag { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
  .preisschild .betrag b {
    font-family: Jost, "Avenir Next", sans-serif; font-weight: 500; letter-spacing: -0.015em;
    font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--blau-tief);
    font-variant-numeric: tabular-nums;
  }
  .preisschild .betrag span { font-size: 0.95rem; color: var(--tinte-weich); }
  .preisschild .zusatz { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--tinte-fein); }
  .preisschild .frei { margin: 1.1rem 0 1.3rem; color: var(--tinte); }
  .preisschild .frei b { color: var(--blau-schrift); }
  .preisschild .knopf { width: 100%; justify-content: center; }
  .preisschild .kleingedruckt {
    margin: 1.1rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--tinte-fein);
  }

  .preisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
  .preisliste li {
    position: relative; padding-left: 1.7rem; color: var(--tinte-weich);
  }
  /* Der Haken ist der aus der Wortmarke — gezeichnet, nicht als Zeichen
     gesetzt, damit er in jeder Schrift gleich aussieht. */
  .preisliste li::before {
    content: ""; position: absolute; left: 0; top: 0.42em;
    width: 0.62rem; height: 0.34rem;
    border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau);
    transform: rotate(-45deg);
  }
  .preisliste .masszahl { font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums; }

  /* Pflichtseiten im Fuss. Sie muessen von jeder Seite aus in einem Klick
     erreichbar sein (§ 5 DDG), stehen aber bewusst leise. */
  .fussrecht { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; margin-top: 0.6rem; }
  .fussrecht a { color: var(--tinte-weich); text-decoration: none; border-bottom: 1px solid var(--linie); }
  .fussrecht a:hover { color: var(--blau-schrift); border-bottom-color: currentColor; }

  /* Marke des Verbandes neben der eigenen — wie im Kopf des Passes, durch
     eine feine Linie getrennt: Zwei Absender sollen nicht zu einem
     verschwimmen. Sichtbar wird sie erst in der Verbandsfassung
     (landingpage-ivd.css). */
  .verbandmarke { display: none; }

  /* =====================================================================
     Infomappe anfordern. Links steht, was man bekommt, rechts das Formular —
     drei Felder, von denen nur eines Pflicht ist. Jede weitere Zeile kostet
     Adressen.
     ===================================================================== */
  .infotafel {
    display: grid; gap: clamp(1.6rem, 3vw, 2.8rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
  }
  @media (max-width: 52rem) { .infotafel { grid-template-columns: 1fr; } }

  .infotext h2 { margin: 0.5rem 0 0.8rem; }
  .infotext p { margin: 0 0 0.8rem; color: var(--tinte-weich); max-width: 34rem; }
  .infotext .kleiner { font-size: 0.85rem; color: var(--tinte-fein); }

  .infoform {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px;
    padding: clamp(1.2rem, 2.5vw, 1.6rem); display: grid; gap: 0.3rem;
  }
  .infoform label {
    font-size: 0.8rem; font-weight: 600; color: var(--tinte-weich); margin-top: 0.5rem;
  }
  .infoform label:first-child { margin-top: 0; }
  .infoform input {
    font: inherit; font-size: 0.95rem; color: var(--tinte);
    padding: 0.62rem 0.75rem; border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); width: 100%;
  }
  .infoform input:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
  .infoform input::placeholder { color: var(--tinte-fein); opacity: 0.7; }
  .infoform .knopf { margin-top: 1rem; justify-content: center; }
  .infoform .knopf[disabled] { opacity: 0.6; cursor: default; }

  /* Unsichtbar, aber nicht display:none — manche Roboter fuellen nur, was
     im Baum steht und sichtbar scheint. */
  .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .infostatus { margin: 0.7rem 0 0; font-size: 0.88rem; min-height: 1.2em; color: var(--tinte-weich); }
  .infostatus.gut { color: var(--blau-schrift); font-weight: 600; }
  .infostatus.schlecht { color: #a6432f; }

  /* ---- Kurzform der Infomappe im Auftakt ----
     Ein Feld und ein Knopf, auf der dunklen Bühne. Bewusst schmal: Der
     Auftakt soll den Pass anbieten, nicht ein Formular. */
  .mappekurz { margin-top: 1.5rem; max-width: 27rem; }
  .mappekurz > label {
    display: block; font-size: 0.85rem; color: var(--buehne-leise); margin-bottom: 0.5rem;
  }
  .mappezeile { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .mappezeile input {
    flex: 1 1 12rem; min-width: 0;
    font: inherit; font-size: 0.92rem; color: var(--buehne-tinte);
    padding: 0.6rem 0.75rem; border-radius: 8px;
    border: 1px solid var(--buehne-linie); background: var(--buehne-eingabe, rgba(255,255,255,0.07));
  }
  .mappezeile input::placeholder { color: var(--buehne-leise); opacity: 0.75; }
  .mappezeile input:focus-visible {
    outline: 2px solid var(--blau-hell); outline-offset: 1px; border-color: var(--blau-hell);
  }
  /* Der Rahmenknopf ist für helle Flächen gedacht — auf der Bühne umgefärbt. */
  .mappezeile .knopf.rand {
    flex: none; color: var(--buehne-tinte); border-color: var(--buehne-linie);
  }
  .mappezeile .knopf.rand:hover { border-color: var(--blau-hell); color: var(--blau-hell); }
  .mappezeile .knopf[disabled] { opacity: 0.55; cursor: default; }
  .mappestatus { margin: 0.55rem 0 0; font-size: 0.85rem; min-height: 1.1em; color: var(--buehne-leise); }
  .mappestatus.gut { color: var(--blau-hell); font-weight: 600; }
  .mappestatus.schlecht { color: var(--buehne-fehler, #ffb4a2); }

  /* ---- Ladezeichen: der Prüfhaken zeichnet sich ----
     Dieselbe Bewegung wie in der Anwendung (apps/web/src/stile/bewegung.css):
     Das Dach steht, der Haken zieht durch und wieder hinaus. Kein Blinken.
     Warum aus der Marke und nicht ein Kreis: Der Pass prüft — das Zeichen
     dafür ist der Haken, den er ohnehin führt.

     Der Text daneben gehört dazu und ist nicht bloss Beiwerk: Bei
     `prefers-reduced-motion` steht das Zeichen still, und ohne Text wüsste
     dann niemand, dass etwas läuft. */
  .laeuft { display: inline-flex; align-items: center; gap: 0.45rem; }
  .laeuft-marke { width: 1.15em; height: 1.15em; flex: none; }
  .laeuft-haken {
    stroke-dasharray: 46; stroke-dashoffset: 46;
    animation: haken-ziehen 1600ms cubic-bezier(.65, 0, .35, 1) infinite;
  }
  @keyframes haken-ziehen {
    0%   { stroke-dashoffset: 46; }
    45%  { stroke-dashoffset: 0; }
    62%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -46; }
  }
  @media (prefers-reduced-motion: reduce) {
    .laeuft-haken { stroke-dashoffset: 0; animation: none; }
  }

  /* Auf der dunklen Bühne trägt der Haken die helle Akzentfarbe, damit er
     gegen das Navy steht; das Dach bleibt zurückgenommen. */
  .mappestatus .laeuft-dach  { stroke: var(--buehne-leise); }
  .mappestatus .laeuft-haken { stroke: var(--blau-hell); }
  .infostatus  .laeuft-dach  { stroke: var(--tinte-fein); }
  .infostatus  .laeuft-haken { stroke: var(--blau); }