/* noteit – ruhig und redaktionell (Richtung claude.com): warmes Off-White, dünne Serifen-Überschriften,
   sachliche Grotesk für Text, feine Linien statt Schatten, eine Akzentfarbe (Petrol).
   Wiederkehrendes Motiv: die Schallwelle aus dem Logo. Immer hell – bewusst kein Dunkelmodus. */
/* Schriften vom eigenen Server (kein Google Fonts – DSGVO). Lizenzen: SIL Open Font License, siehe fonts/ */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap;
             src: url(fonts/newsreader-latin-normal-v2.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap;
             src: url(fonts/newsreader-latin-italic-v2.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
             src: url(fonts/geist-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
             src: url(fonts/geist-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap;
             src: url(fonts/geist-mono-latin-400-normal.woff2) format("woff2"); }

:root {
  --papier: #faf9f5; --papier-2: #f0eee6; --weiss: #ffffff;
  --tinte: #141413; --tinte-2: #5e5d59; --tinte-3: #706f69;
  --linie: rgba(20,20,19,.12); --linie-2: rgba(20,20,19,.07);
  --akzent: #0f6a73; --akzent-weich: rgba(15,106,115,.08); --rot: #c8442f;
  --knopf-hover: #2b2b29; --nav: rgba(250,249,245,.86);
  /* Bühne hinter dem Produkt: gedämpftes Petrol/Salbei */
  --buehne: linear-gradient(160deg, #e3ece9 0%, #c9dcd8 48%, #a7c6c2 100%);
  --buehne-welle: rgba(255,255,255,.55);
  --petrol: linear-gradient(150deg, #0f5f67 0%, #0b4a51 100%); --petrol-text: #eef5f3;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --breite: 1160px;
  --kurve: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, .buehne iframe { color-scheme: light; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 16.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
       overflow-x: hidden; }
a { color: inherit; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 330; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.leise { color: var(--tinte-2); }

/* Knöpfe – eckig-weich wie bei Claude */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 15px/1 var(--sans);
         padding: 13px 20px; border-radius: 8px; border: 1px solid var(--tinte); background: var(--tinte); color: var(--papier);
         text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; }
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf:active { transform: scale(.98); }
.knopf.hell { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf.hell:hover { background: var(--weiss); border-color: var(--tinte-3); }
.knopf.klein { font-size: 14px; padding: 9px 14px; }
.knopf:disabled { opacity: .5; cursor: default; }

/* Navigation */
nav { position: sticky; top: 0; z-index: 20; background: var(--nav); backdrop-filter: blur(14px) saturate(1.4);
      border-bottom: 1px solid transparent; transition: border-color .3s; }
nav.gescrollt { border-bottom-color: var(--linie-2); }
nav .wrap { height: 68px; display: flex; align-items: center; gap: 36px; }
.wortmarke { display: flex; align-items: center; gap: 9px; font: 500 18px var(--sans); letter-spacing: -.02em; text-decoration: none; }
.wortmarke img { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 0 1px var(--linie), 0 1px 2px rgba(20,20,19,.06); }
nav .links { display: flex; gap: 28px; font-size: 14.5px; color: var(--tinte-2); }
nav .links a { text-decoration: none; transition: color .15s; }
nav .links a:hover { color: var(--tinte); }
nav .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.menue-knopf { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; border-radius: 8px; position: relative; color: var(--tinte); }
.menue-knopf span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; border-radius: 2px;
                    transition: transform .3s var(--kurve), top .3s var(--kurve); }
.menue-knopf span:first-child { top: 16px; } .menue-knopf span:last-child { top: 23px; }
nav.offen .menue-knopf span:first-child { top: 19.5px; transform: rotate(45deg); }
nav.offen .menue-knopf span:last-child { top: 19.5px; transform: rotate(-45deg); }

/* Hero */
.hero { padding: 92px 0 0; }
.hero .zeile { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: end; }
.hero h1 { font-size: clamp(46px, 6.2vw, 80px); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: var(--akzent); }
.hero .rechts p { font-size: 19px; line-height: 1.5; color: var(--tinte-2); }
.hero .knoepfe { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.hero .klein { font-size: 13.5px; color: var(--tinte-3); margin-top: 14px; }

/* Produkt auf farbiger Bühne – das Fenster schwebt und läuft unten aus dem Bild */
.produkt { margin-top: 64px; }
.flaeche { position: relative; overflow: hidden; border-radius: 28px; background: var(--buehne);
           padding: clamp(24px, 5.5vw, 72px) clamp(14px, 5.5vw, 72px); }
#heroWelle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fenster { position: relative; background: #fff; border-radius: 14px; overflow: hidden;
           box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 40px 80px -20px rgba(10,40,44,.35), 0 12px 24px -12px rgba(10,40,44,.25); }
.titelleiste { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(20,20,19,.07);
               font: 12.5px var(--sans); color: #706f69; background: #fcfcfa; }
.titelleiste img { width: 14px; height: 14px; border-radius: 3px; }
.titelleiste .fk { margin-left: auto; display: flex; gap: 20px; }
.buehne { position: relative; width: 100%; aspect-ratio: 1200 / 700; overflow: hidden; }
.buehne iframe { position: absolute; inset: 0 auto auto 0; width: 1200px; height: 700px; border: 0; transform-origin: 0 0; }
.unterschrift { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; font-size: 13.5px; color: var(--tinte-3); }

/* „Erkennt Calls in …“ */
.mit { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 44px; margin-top: 64px;
       font: 500 17px var(--sans); color: var(--tinte-3); letter-spacing: -.01em; }
.mit small { width: 100%; text-align: center; font: 400 13px var(--sans); letter-spacing: 0; margin-bottom: -2px; }

/* Schallwellen-Motiv (wird per Script gefüllt) */
.motiv { display: block; height: 28px; color: var(--akzent); opacity: .55; }
.motiv svg { display: block; height: 100%; width: auto; }
/* Die Welle „spricht“, solange sie sichtbar ist – jede Linie mit eigenem Takt */
.motiv rect { transform-box: fill-box; transform-origin: center; }
.motiv.spricht rect { animation: sprechen var(--d, .8s) ease-in-out var(--v, 0s) infinite alternate; }
@keyframes sprechen { from { transform: scaleY(var(--a, .4)); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .motiv.spricht rect { animation: none; } }

/* Abschnitte */
section { padding: 150px 0 0; }
.ueber { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid var(--linie); }
.ueber h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; }
.ueber p { font-size: 18px; color: var(--tinte-2); max-width: 470px; }
.marker { font: 500 13px var(--sans); letter-spacing: .02em; color: var(--tinte-3); text-transform: uppercase; margin-bottom: 18px; }

/* Drei Schritte mit großen Serifen-Ziffern */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); }
.schritt { padding: 40px 36px 0 0; }
.schritt + .schritt { padding-left: 36px; border-left: 1px solid var(--linie); }
.schritt .ziffer { font: 300 64px/1 var(--serif); color: var(--akzent); }
.schritt h3 { font: 500 19px var(--sans); letter-spacing: -.01em; margin: 26px 0 8px; }
.schritt p { color: var(--tinte-2); font-size: 16px; }

/* Funktionsreihen: Text + echtes Beispiel, abwechselnd */
.reihe { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; padding: 72px 0; border-bottom: 1px solid var(--linie); }
.reihe:last-child { border-bottom: none; }
.reihe.gedreht { grid-template-columns: 1.1fr .9fr; }
.reihe.gedreht > :first-child { order: 2; }
.reihe h3 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; }
.reihe p { font-size: 17.5px; color: var(--tinte-2); margin-top: 18px; max-width: 440px; }
.beispiel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 26px 28px; font-size: 14.5px; line-height: 1.55;
            min-height: 220px; }
.beispiel .kopf { display: flex; justify-content: space-between; font: 12.5px var(--sans); color: var(--tinte-3); padding-bottom: 14px;
                  margin-bottom: 16px; border-bottom: 1px solid var(--linie-2); }
.beispiel .k { font: 500 12px var(--sans); color: var(--tinte-3); margin: 16px 0 6px; }
.beispiel .k:first-of-type { margin-top: 0; }
.beispiel ul { list-style: none; margin: 0; padding: 0; }
.beispiel li { padding-left: 16px; position: relative; margin: 5px 0; }
.beispiel li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 1px; background: var(--tinte-3); }
.beispiel li.todo { padding-left: 26px; }
.beispiel li.todo::before { left: 0; top: .28em; width: 14px; height: 14px; border: 1.5px solid var(--tinte-3); border-radius: 50%; background: none; }
.satz { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 8px 0; }
.satz + .satz { border-top: 1px solid var(--linie-2); }
.satz .z { font: 12px/1.9 var(--mono); color: var(--tinte-3); }
.satz .w { font: 500 13px var(--sans); color: var(--akzent); }
.satz .w.du { color: var(--tinte); }
.frage-chat { display: grid; gap: 12px; align-content: start; }
.frage-chat .du { justify-self: end; background: var(--papier-2); border-radius: 12px; padding: 10px 14px; max-width: 80%; }
.frage-chat .antwort { font-family: var(--serif); font-size: 18px; line-height: 1.45; min-height: 3em; }
.frage-chat .antwort.tippt::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
                                     background: var(--akzent); animation: blinken 1s steps(2) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.frage-chat .quelle { font: 12.5px var(--sans); color: var(--tinte-3); }
.karten { display: grid; gap: 10px; align-content: start; }
.gkarte { border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 14px;
          align-items: center; background: var(--weiss); }
.gkarte small { display: block; font-size: 12px; color: var(--tinte-3); }
.gkarte .status { font: 500 12px var(--sans); color: var(--tinte-2); border: 1px solid var(--linie); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.gkarte .status.neu { color: var(--akzent); border-color: currentColor; }
.wort { font: 330 clamp(40px, 5vw, 64px)/1.1 var(--serif); padding: 30px 0 10px; display: flex; flex-wrap: wrap; gap: 0 .3em; align-items: baseline; }
.wort .falsch { position: relative; color: var(--tinte-3); }
.wort .falsch::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: 2px; background: var(--rot);
                       transform-origin: left; }
.bereit .wort .falsch::after { transform: scaleX(0); }
.bereit.spielt .wort .falsch::after { transform: scaleX(1); transition: transform .6s var(--kurve) .5s; }

/* Beispiele spielen beim Hineinscrollen kurz ab (nur mit Script; ohne ist alles sofort sichtbar) */
.bereit .st { opacity: 0; transform: translateY(8px); }
.bereit.spielt .st { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s var(--kurve);
                     transition-delay: calc(var(--i, 0) * 180ms + 150ms); }
.bereit .gkarte.st { transform: translateX(28px); }
.bereit.spielt .gkarte.st { transform: none; }
.wort .richtig { display: inline-block; }

/* Datenschutz: heller, warmer Abschnitt über die ganze Breite */
.nacht { background: var(--papier-2); margin-top: 150px; padding: 120px 0 110px; position: relative; overflow: hidden;
         border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); }
.nacht h2 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.06; max-width: 820px; }
.nacht .motiv { margin-bottom: 36px; }
.aussagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.aussage { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 30px 28px 32px; }
.aussage .gross { font: 330 34px/1.1 var(--serif); color: var(--akzent); margin-bottom: 18px; }
.aussage h3 { font: 500 17px var(--sans); }
.aussage p { color: var(--tinte-2); margin-top: 8px; font-size: 16px; }

/* Preise – Karten wie bei Claude, Pro als dunkle Karte */
.umschalter { display: flex; justify-content: flex-start; margin: 40px 0 28px; }
.segment { display: inline-flex; padding: 3px; border: 1px solid var(--linie); border-radius: 10px; background: var(--papier-2); }
.segment button { border: 0; background: none; font: 500 14px var(--sans); color: var(--tinte-2); padding: 7px 16px; border-radius: 7px; cursor: pointer; }
.segment button.aktiv { background: var(--weiss); color: var(--tinte); box-shadow: 0 1px 2px rgba(20,20,19,.08); }
.segment .spar { color: var(--akzent); margin-left: 6px; }
.pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.paket { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; }
.paket .name { display: flex; justify-content: space-between; align-items: baseline; }
.paket h3 { font-size: 32px; }
.paket .marke-e { font: 500 12px var(--sans); color: var(--akzent); }
.paket .beschr { color: var(--tinte-2); font-size: 15px; margin: 6px 0 24px; min-height: 46px; }
.paket .betrag { font: 330 46px/1 var(--serif); font-variant-numeric: tabular-nums; }
.paket .einheit { font-size: 13.5px; color: var(--tinte-3); margin-top: 8px; min-height: 40px; }
.paket .knopf { width: 100%; margin-top: 22px; }
.paket .liste { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linie-2); display: grid; gap: 10px; font-size: 15px; }
.paket .liste div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.paket .liste svg { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--tinte-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paket .liste .fett { font-weight: 500; color: var(--tinte); }
.paket.empfohlen { border: 1.5px solid var(--akzent); box-shadow: 0 30px 60px -32px rgba(15,106,115,.35); }
.paket.empfohlen .marke-e { background: var(--akzent-weich); border-radius: 99px; padding: 3px 10px; }
.paket.empfohlen .liste svg { stroke: var(--akzent); }
.plaetze { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--tinte-2); margin-top: 18px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--linie); border-radius: 8px; }
.stepper button { border: 0; background: none; width: 30px; height: 28px; font-size: 16px; cursor: pointer; color: var(--tinte); }
.stepper span { min-width: 24px; text-align: center; font-weight: 500; color: var(--tinte); }
.preis-fuss { font-size: 13.5px; color: var(--tinte-3); margin-top: 18px; }

/* FAQ */
.faq { margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font: 400 21px var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--tinte-3); transition: transform .25s var(--kurve); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--tinte-2); max-width: 720px; padding: 0 0 26px; font-size: 16.5px; }

/* Schluss auf der Akzentfarbe */
.schluss { padding: 150px 0 0; }
.schluss .flaeche { background: var(--petrol); color: var(--petrol-text); text-align: center; padding: 110px 32px 100px; }
.schluss .motiv { color: #9fdde2; opacity: .6; margin: 0 auto 34px; width: max-content; }
.schluss h2 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; }
.schluss p { color: rgba(238,245,243,.75); font-size: 18px; margin: 20px 0 32px; }
.schluss .knopf { background: var(--petrol-text); color: #0b4a51; border-color: var(--petrol-text); }
.schluss .knopf:hover { background: #fff; border-color: #fff; }

/* Fußbereich */
footer { margin-top: 110px; border-top: 1px solid var(--linie); padding: 64px 0 40px; font-size: 14.5px; color: var(--tinte-2); }
.fuss { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.3fr; gap: 32px; }
.fuss p { color: var(--tinte-3); margin-top: 14px; max-width: 300px; font-size: 14px; }
.fuss h4 { font: 500 13px var(--sans); color: var(--tinte); margin: 0 0 14px; }
.fuss a, .fuss span { display: block; text-decoration: none; color: var(--tinte-2); margin: 0 0 9px; }
.fuss a:hover { color: var(--tinte); }
.fuss a.wortmarke { display: flex; color: var(--tinte); margin: 0; }
.fuss-unten { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 56px; padding-top: 24px;
              border-top: 1px solid var(--linie-2); font-size: 13px; color: var(--tinte-3); }
.fuss-unten .motiv { height: 18px; opacity: .4; }

/* Dialog */
.dialog { position: fixed; inset: 0; background: rgba(20,20,19,.3); display: none; place-items: center; z-index: 50; padding: 20px; }
.dialog.offen { display: grid; }
.dialog .box { background: var(--papier); border: 1px solid var(--linie); border-radius: 16px; padding: 30px; max-width: 440px; }
.dialog h3 { font-size: 26px; margin-bottom: 10px; }
.dialog p { color: var(--tinte-2); font-size: 15.5px; }
.dialog code { font: 13px var(--mono); background: var(--papier-2); padding: 1px 6px; border-radius: 5px; }

/* sanftes Einblenden */
.js .ein { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s var(--kurve); }
.js .ein.da { opacity: 1; transform: none; }

/* Danke- und Rechtsseiten */
.einfach { max-width: 680px; margin: 0 auto; padding: 100px 32px 140px; }
.einfach h1 { font-size: 52px; line-height: 1.06; }
.einfach h2 { font-size: 30px; margin: 48px 0 10px; }
.einfach .gedaempft { color: var(--tinte-2); }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 6px 22px; margin-top: 30px; }
.karte .zeile-k { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; font-size: 15px; }
.karte .zeile-k + .zeile-k { border-top: 1px solid var(--linie-2); }
.karte .zeile-k span:first-child { color: var(--tinte-2); }
.platzhalter { background: #f6ecd2; border-radius: 10px; padding: 14px 16px; font-size: 14px; margin-top: 20px; color: #6b5300; }

/* Impressum */
.einfach h3.person { font: 500 17px var(--sans); margin: 36px 0 10px; letter-spacing: -.01em; }
.angaben { display: grid; grid-template-columns: 190px 1fr; margin: 0; border-top: 1px solid var(--linie); }
.angaben dt, .angaben dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--linie-2); font-size: 15.5px; }
.angaben dt { color: var(--tinte-3); }
.angaben a { color: var(--akzent); text-decoration: none; }

@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  nav .wrap { gap: 12px; }
  .menue-knopf { display: block; }
  nav .links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0;
               background: var(--papier); border-bottom: 1px solid var(--linie); padding: 8px 20px 18px; }
  nav.offen .links { display: flex; }
  nav .links a { padding: 13px 0; font-size: 18px; color: var(--tinte); border-bottom: 1px solid var(--linie-2); }
  .hero { padding-top: 56px; }
  .hero .zeile, .ueber, .reihe { grid-template-columns: 1fr; gap: 28px; }
  .reihe.gedreht { grid-template-columns: 1fr; }
  .reihe.gedreht > :first-child { order: 0; }
  .reihe { padding: 56px 0; }
  .schritte, .aussagen, .pakete { grid-template-columns: 1fr; }
  .schritt + .schritt { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); margin-top: 32px; }
  .flaeche { border-radius: 20px; }
  .mit { gap: 10px 26px; font-size: 15px; margin-top: 48px; }
  section { padding-top: 100px; }
  .nacht { margin-top: 100px; padding: 90px 0; }
  .schluss { padding-top: 100px; }
  .schluss .flaeche { padding: 80px 22px 72px; }
  .unterschrift { flex-direction: column; gap: 4px; }
  .fuss { grid-template-columns: 1fr 1fr; }
  .fuss > :first-child { grid-column: 1 / -1; }
  .fuss-unten { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) { .angaben { grid-template-columns: 1fr; } .angaben dt { padding-bottom: 0; border-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ein, .bereit .st, .bereit .gkarte.st { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Konto-Seiten: Registrieren, Bestätigt, Download, Konto, Passwort ----------
   Seite füllt genau den Bildschirm (Fuß unten, kein Scrollen bei kurzem Inhalt).
   Links der Inhalt, rechts die Bühne aus der Startseite mit einer schwebenden Karte. */
body.konto-seite { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.konto-seite > main { flex: 1; display: flex; flex-direction: column; }
body.konto-seite > main > * { flex: 1; }
body.konto-seite footer { margin-top: 0; padding: 18px 0 22px; border-top: 0; }

.geteilt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 24px 32px 8px;
           display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 72px; align-items: stretch; }
.geteilt-inhalt { display: flex; align-items: center; padding: 32px 0; }
.formular { width: 100%; max-width: 460px; padding: 0; }
.formular h1, .formular .h1 { font-size: clamp(36px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 16px; }
.formular .leise { font-size: 17px; }
.formular form { margin-top: 30px; display: grid; gap: 16px; }

/* Bühne rechts */
.geteilt-buehne { position: relative; overflow: hidden; border-radius: 28px; background: var(--buehne); min-height: 540px;
                  display: grid; place-items: center; padding: 48px 40px; isolation: isolate; }
.geteilt-buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.schwebe { position: relative; width: 100%; max-width: 380px; animation: schweben 7s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-8px); } }
.schwebe-karte { background: #fff; border-radius: 18px; padding: 24px 24px 22px; font-size: 14.5px;
                 box-shadow: 0 0 0 1px rgba(20,20,19,.06), 0 40px 80px -24px rgba(10,40,44,.35), 0 12px 24px -12px rgba(10,40,44,.2); }
.schwebe-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px;
                padding: 8px 14px 8px 10px; font: 500 13px var(--sans); white-space: nowrap;
                box-shadow: 0 0 0 1px rgba(20,20,19,.06), 0 16px 32px -12px rgba(10,40,44,.35); }
.schwebe-chip.oben { top: -18px; right: -14px; }
.schwebe-chip.unten { bottom: -18px; left: -18px; }
.schwebe-chip i { width: 20px; height: 20px; border-radius: 50%; background: var(--akzent); display: grid; place-items: center; }
.schwebe-chip i svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.schwebe-chip .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 4px rgba(200,68,47,.15);
                       margin-left: 4px; animation: pochen 1.6s ease-in-out infinite; }
@keyframes pochen { 50% { box-shadow: 0 0 0 7px rgba(200,68,47,0); } }
.sk-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--tinte-3); padding-bottom: 14px;
           margin-bottom: 16px; border-bottom: 1px solid var(--linie-2); }
.sk-kopf b { color: var(--tinte); font-weight: 500; }
.sk-k { font: 500 11.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-3); margin: 16px 0 7px; }
.sk-k:first-of-type { margin-top: 0; }
.sk-text { font: 400 17px/1.45 var(--serif); color: var(--tinte); }
.sk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; color: var(--tinte-2); }
.sk-liste li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
.sk-liste svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--akzent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk-liste .offen-kreis { width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid var(--tinte-3); border-radius: 50%; }
.sk-liste small { color: var(--tinte-3); font-size: 12.5px; }
.sk-gross { font: 330 54px/1 var(--serif); letter-spacing: -.02em; margin: 6px 0 4px; }
.sk-gross small { font: 400 15px var(--sans); color: var(--tinte-3); letter-spacing: 0; margin-left: 6px; }
.sk-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 16px 0 6px; }
.sk-tage span { height: 6px; border-radius: 99px; background: var(--akzent); }
.sk-tage span.vorbei { background: var(--papier-2); }
.sk-fuss { font-size: 12.5px; color: var(--tinte-3); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie-2); }

/* Abzeichen */
.abzeichen { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--sans); color: var(--akzent); background: var(--akzent-weich);
             border-radius: 99px; padding: 6px 11px; }
.abzeichen::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.abzeichen.grau { color: var(--tinte-2); background: var(--papier-2); }
.abzeichen.rot { color: var(--rot); background: rgba(200,68,47,.09); }
.erfolg { display: inline-flex; align-items: center; gap: 9px; font: 500 13.5px var(--sans); color: var(--akzent); margin-bottom: 22px; }
.erfolg i { width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); display: grid; place-items: center; }
.erfolg svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Formularfelder */
.feld { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.feld input { font: 400 16px var(--sans); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linie); background: var(--weiss);
              color: var(--tinte); outline: none; transition: border-color .15s, box-shadow .15s; }
.feld input:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.feld small { font-weight: 400; color: var(--tinte-3); font-size: 13px; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--tinte-2); cursor: pointer; }
.zustimmung input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--akzent); flex: none; }
.knopf.breit { width: 100%; padding: 15px 20px; margin-top: 4px; }
.fehlertext { color: var(--rot); font-size: 14.5px; min-height: 1.4em; }
.fehlertext:empty { min-height: 0; }
.klein-text { font-size: 14.5px; color: var(--tinte-3); margin-top: 22px; }
.klein-text a, .formular .leise a, .db-karte a:not(.knopf) { color: var(--akzent); }

/* Downloads: zwei Kacheln nebeneinander, das eigene System zuerst und hervorgehoben */
.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px 0 0; }
.dl-kachel { position: relative; display: grid; gap: 14px; align-content: start; padding: 18px 18px 16px; border-radius: 14px; background: var(--weiss);
             border: 1px solid var(--linie); text-decoration: none; color: var(--tinte); transition: border-color .15s, box-shadow .2s, transform .2s var(--kurve); }
.dl-kachel:hover { border-color: var(--tinte-3); transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(10,40,44,.35); }
.dl-kachel.empfohlen { border: 1.5px solid var(--akzent); box-shadow: 0 22px 44px -28px rgba(15,106,115,.45); }
.dl-oben { display: flex; justify-content: space-between; align-items: center; }
.dl-system { width: 30px; height: 30px; color: var(--tinte); }
.dl-pfeil { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--papier-2); color: var(--tinte);
            transition: background .15s, color .15s; }
.dl-kachel.empfohlen .dl-pfeil, .dl-kachel:hover .dl-pfeil { background: var(--akzent); color: #fff; }
.dl-pfeil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-kachel b { display: block; font: 500 16px var(--sans); }
.dl-kachel small { display: block; font-size: 12.5px; color: var(--tinte-3); margin-top: 3px; line-height: 1.35; }
.dl-kachel .dl-tipp { position: absolute; top: -10px; left: 14px; font: 500 11.5px/1 var(--sans); color: #fff; background: var(--akzent);
                      border-radius: 99px; padding: 5px 9px; }
.downloads .version { grid-column: 1 / -1; font-size: 12.5px; color: var(--tinte-3); margin-top: 2px; }
.downloads .gedaempft { grid-column: 1 / -1; color: var(--tinte-2); }
.erster-start { grid-column: 1 / -1; font-size: 13px; color: var(--tinte-2); margin-top: 2px; }
.erster-start summary { cursor: pointer; color: var(--tinte-3); width: max-content; }
.erster-start summary:hover { color: var(--tinte); }
.erster-start p { margin-top: 8px; line-height: 1.5; }

/* Drei Schritte nebeneinander */
.schritte-klein { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--linie); }
.schritte-klein div { padding-right: 18px; }
.schritte-klein div + div { padding-left: 18px; border-left: 1px solid var(--linie-2); }
.schritte-klein .ziffer { font: 300 30px/1 var(--serif); color: var(--akzent); }
.schritte-klein b { display: block; font: 500 14.5px var(--sans); margin: 12px 0 3px; }
.schritte-klein p { font-size: 13.5px; color: var(--tinte-3); line-height: 1.45; }

/* ---------- Mein Konto (angemeldet) ---------- */
.dashboard { width: 100%; max-width: 1040px; margin: 0 auto; padding: 44px 32px 64px; }
.banner { background: var(--akzent-weich); color: var(--akzent); border-radius: 12px; padding: 12px 16px; font-size: 15px; margin-bottom: 28px; }
.db-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.db-kopf .marker { margin-bottom: 12px; }
.db-kopf h1 { font-size: clamp(38px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.02em; }
.db-kopf p { font-size: 14.5px; color: var(--tinte-3); padding-bottom: 6px; }
.db-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.db-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 24px 24px 22px; display: flex; flex-direction: column; min-width: 0; }
.db-karte h3 { font: 500 14.5px var(--sans); color: var(--tinte-2); letter-spacing: 0; margin-bottom: 14px; }
.db-karte > .leise { font-size: 15px; }
.db-fuss { font-size: 13px; color: var(--tinte-3); margin-top: auto; padding-top: 16px; }
.db-paket { grid-column: span 2; position: relative; overflow: hidden; background: var(--buehne); border-color: transparent; isolation: isolate; }
.db-paket canvas { position: absolute; top: 0; bottom: 0; right: 0; left: 58%; width: 42%; height: 100%; z-index: -1; pointer-events: none;
                   -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.db-paket .abzeichen { background: rgba(255,255,255,.72); align-self: flex-start; }
.db-paket h2 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin: 18px 0 10px; }
.db-paket .leise { color: #3d4f4d; max-width: 460px; font-size: 15.5px; }
.db-paket .tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 22px; max-width: 420px; }
.db-paket .tage span { height: 6px; border-radius: 99px; background: var(--akzent); }
.db-paket .tage span.vorbei { background: rgba(255,255,255,.6); }
.db-paket .db-fuss { color: #4d605e; }
.db-paket .knopf.hell { background: rgba(255,255,255,.8); border-color: transparent; }
.abo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.db-paket .knopf.hell:hover { background: #fff; }
.ring { position: relative; width: 132px; height: 132px; margin: 4px auto 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .spur { stroke: var(--papier-2); }
.ring .wert { stroke: var(--akzent); stroke-linecap: round; transition: stroke-dashoffset .9s var(--kurve); }
.ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring b { font: 330 34px/1 var(--serif); font-variant-numeric: tabular-nums; }
.ring small { font-size: 12.5px; color: var(--tinte-3); margin-top: 4px; }
.db-nutzung .db-fuss { text-align: center; }
.db-liste { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; font-size: 14.5px; }
.db-liste dt, .db-liste dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--linie-2); }
.db-liste dt { color: var(--tinte-3); }
.db-liste dd { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-liste a { text-decoration: none; }
.db-karte .knopf.klein { align-self: flex-start; margin-top: 18px; }
.dl-mini { display: grid; gap: 8px; margin-top: 16px; }
.dl-mini a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; text-decoration: none;
             color: var(--tinte); font: 500 14px var(--sans); transition: border-color .15s, background .15s; }
.dl-mini a:hover { border-color: var(--tinte-3); background: var(--papier); }
.dl-mini a.empfohlen { border-color: var(--akzent); }
.dl-mini svg { width: 18px; height: 18px; flex: none; }
.dl-mini small { margin-left: auto; color: var(--tinte-3); font: 400 12.5px var(--sans); }
.dl-mini .version { font-size: 12.5px; color: var(--tinte-3); }

.db-upgrade { padding: 0; margin-top: 56px; }
.hilfe-knopf { align-self: flex-start; margin-top: 16px; }
.hilfe-knopf svg, .chat-eingabe svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }


.db-team { padding: 0; margin: 0 0 14px; }
.team-start { padding: 30px 32px; background: var(--buehne); border-color: transparent; }
.team-start .abzeichen { background: rgba(255,255,255,.72); align-self: flex-start; }
.team-start h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.06; margin: 16px 0 10px; }
.team-start > .leise { max-width: 620px; color: #3d4f4d; font-size: 15.5px; }
.team-vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 20px; }
.team-vorteile div { background: rgba(255,255,255,.78); border-radius: 12px; padding: 14px 16px; }
.team-vorteile b { display: block; font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.team-vorteile span { font-size: 13.5px; color: var(--tinte-2); line-height: 1.45; }
.team-schritte { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: #3d4f4d; }
.team-schritte b { color: var(--tinte); font-weight: 500; }
.team-start .zeilen-form input { background: #fff; border-color: transparent; }
.team-karte { padding: 26px 28px; }
.team-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.team-kopf .marker { margin-bottom: 8px; }
.team-kopf h2 { font-size: 32px; line-height: 1.1; }
.team-karte > .leise { margin: 8px 0 18px; font-size: 15px; }
.team-karte h3 { font: 500 14.5px var(--sans); color: var(--tinte); margin: 22px 0 0; }
.team-meldung { font-size: 14px; margin-top: 10px; min-height: 0; }
.team-meldung.gut { color: var(--akzent); }
.team-meldung.schlecht { color: var(--rot); }
.mitglied .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--akzent-weich); color: var(--akzent); display: grid;
                    place-items: center; font: 500 14px var(--sans); flex: none; }
.mitglied .wer { flex: 1; min-width: 0; }
.mitglied .wer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mitglied .rolle { font: 500 11px var(--sans); color: var(--akzent); background: var(--akzent-weich); border-radius: 99px; padding: 2px 8px; margin-left: 6px; }
.mitglied .rolle.offen { color: var(--tinte-2); background: var(--papier-2); }
.knoepfe-klein { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zeilen-form { display: flex; gap: 10px; margin-top: 16px; }
.zeilen-form input { flex: 1; min-width: 0; font: 400 15px var(--sans); padding: 11px 14px; border-radius: 10px; border: 1px solid var(--linie);
                     background: var(--weiss); color: var(--tinte); outline: none; }
.zeilen-form input:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.mitglieder { display: grid; }
.mitglied { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie-2); }
.mitglied:first-child { padding-top: 0; }
.mitglied b { display: block; font-weight: 500; font-size: 15px; }
.mitglied small { color: var(--tinte-3); font-size: 13px; }
.banner.einladung { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--tinte); }
.banner.einladung .knoepfe { display: flex; gap: 8px; flex: none; }
.db-upgrade-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.db-upgrade-kopf h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
.db-upgrade-kopf .leise { margin-top: 8px; font-size: 15.5px; }
.db-pakete { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.db-pakete .paket { padding: 26px 26px 24px; }
.db-pakete .paket h3 { font-size: 28px; }
.db-pakete .paket .beschr { min-height: 0; margin-bottom: 18px; }
.db-pakete .paket .betrag { font-size: 40px; }
.db-pakete .paket .einheit { min-height: 0; }
.db-pakete .paket .liste { margin-top: 20px; padding-top: 18px; }
.db-pakete .paket .knopf { margin-top: auto; }
.db-pakete .paket .liste { margin-bottom: 22px; }
.db-pakete .paket.empfohlen .knopf { background: var(--akzent); border-color: var(--akzent); }
.db-pakete .paket.empfohlen .knopf:hover { background: #0b565e; border-color: #0b565e; }

@media (max-width: 960px) {
  .geteilt { grid-template-columns: 1fr; gap: 8px; padding: 8px 20px 24px; }
  .geteilt-buehne { min-height: 0; padding: 48px 24px 56px; }
  .schwebe-chip.oben { right: -6px; } .schwebe-chip.unten { left: -6px; }
  .dashboard { padding: 32px 20px 48px; }
  .db-raster { grid-template-columns: 1fr 1fr; }
  .db-paket { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .downloads, .db-raster, .db-pakete { grid-template-columns: 1fr; }
  .zeilen-form, .banner.einladung { flex-direction: column; align-items: stretch; }
  .team-vorteile { grid-template-columns: 1fr; }
  .team-start, .team-karte { padding: 22px 20px; }
  .schritte-klein { grid-template-columns: 1fr; gap: 14px; }
  .schritte-klein div, .schritte-klein div + div { padding: 0; border: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; }
  .schritte-klein .ziffer { grid-row: span 2; font-size: 26px; }
  .schritte-klein b { margin: 0 0 2px; }
  .db-kopf, .db-upgrade-kopf { flex-direction: column; align-items: flex-start; }
  .geteilt-buehne .schwebe-chip.unten { display: none; }
}
@media (prefers-reduced-motion: reduce) { .schwebe, .schwebe-chip .punkt { animation: none; } }
footer .fuss-unten a { color: var(--tinte-2); text-decoration: none; }
footer > .fuss-unten:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 900px) { .nur-gross { display: none; } }
[hidden] { display: none !important; }

/* =====================================================================
   Mehrseitige Website: Unterseiten, Bewegung, Kontakt-Fenster
   ===================================================================== */

/* weiche Seitenwechsel zwischen den Unterseiten (Chrome/Edge; andere Browser wechseln normal) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

nav .links a[aria-current="page"] { color: var(--tinte); }
nav .links a { position: relative; }
nav .links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--akzent); border-radius: 2px; }
.fuss p a.pipeline { display: inline; margin: 0; color: var(--tinte-2); text-decoration: underline; text-underline-offset: 2px; }
.fuss-unten a { color: inherit; text-decoration: none; }
.fuss-unten a:hover { color: var(--tinte); }

/* Kopf der Unterseiten */
.seiten-kopf { padding: 96px 0 24px; }
.seiten-kopf h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -.02em; max-width: 900px; margin-bottom: 22px; }
.seiten-kopf p { font-size: 19px; line-height: 1.5; color: var(--tinte-2); max-width: 660px; }
.seiten-kopf p a { color: var(--akzent); }
.seiten-kopf .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.funktionen-seite { padding-top: 40px; }
.reihe .marker { margin-bottom: 14px; }

/* Überschrift baut sich Wort für Wort auf */
.wort-ein { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(4px);
            transition: opacity .7s ease, transform .8s var(--kurve), filter .7s ease; transition-delay: calc(var(--w) * 55ms + 80ms); }
h1.los .wort-ein { opacity: 1; transform: none; filter: none; }

/* App-Fenster kippt beim Scrollen gerade */
.kipp { --kipp: 0; perspective: 1600px; }
.kipp > .flaeche { transform: rotateX(calc(var(--kipp) * 14deg)) scale(calc(1 - var(--kipp) * .06)); transform-origin: 50% 0;
                   transition: transform .12s linear; will-change: transform; }

/* Kennzahlen */
.zahlen-band { padding: 110px 0 0; }
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.zahlen > div { padding: 30px 26px 30px 0; }
.zahlen > div + div { padding-left: 26px; border-left: 1px solid var(--linie-2); }
.zahlen b { display: block; font: 330 48px/1 var(--serif); color: var(--akzent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahlen > div > span { display: block; font-size: 14.5px; color: var(--tinte-2); margin-top: 10px; line-height: 1.45; }

/* „So geht’s“ als Scroll-Geschichte: links Schritte, rechts mitlaufende Szene */
.geschichte { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; margin-top: 30px; }
.schritt-texte { display: grid; gap: 0; }
.g-schritt { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0;
             opacity: .35; transition: opacity .45s ease; }
.g-schritt.aktiv { opacity: 1; }
.g-schritt .ziffer { font: 300 56px/1 var(--serif); color: var(--akzent); }
.g-schritt h3 { font: 500 22px var(--sans); letter-spacing: -.01em; margin: 18px 0 8px; }
.g-schritt p { color: var(--tinte-2); font-size: 16.5px; max-width: 420px; }
.szene-halter { position: relative; }
.szene { position: sticky; top: calc(50vh - 200px); height: 400px; border-radius: 22px; background: var(--buehne); padding: 26px;
         overflow: hidden; box-shadow: 0 30px 60px -36px rgba(10,40,44,.45); }
.szene-kopf { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.85); border-radius: 12px; padding: 10px 14px;
              font-size: 14px; }
.szene-kopf b { font-weight: 500; }
.szene-kopf .k1, .szene-kopf .k2 { display: none; }
.szene[data-aktiv="1"] .k0, .szene[data-aktiv="2"] .k0 { display: none; }
.szene[data-aktiv="1"] .k1, .szene[data-aktiv="2"] .k2 { display: inline; }
.szene:not([data-aktiv="0"]) .szene-zeit { visibility: hidden; }
.szene-zeit { margin-left: auto; font: 13px var(--mono); color: var(--tinte-2); }
.punkt-rot { width: 9px; height: 9px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 4px rgba(200,68,47,.18);
             animation: pochen 1.6s ease-in-out infinite; }
.szene[data-aktiv="1"] .punkt-rot, .szene[data-aktiv="2"] .punkt-rot { background: var(--akzent); box-shadow: none; animation: none; }
.ebene { position: absolute; left: 26px; right: 26px; top: 92px; bottom: 26px; background: #fff; border-radius: 14px; padding: 20px 22px;
         opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s ease, transform .6s var(--kurve); pointer-events: none;
         box-shadow: 0 0 0 1px rgba(20,20,19,.05); overflow: hidden; }
.szene[data-aktiv="0"] .e0, .szene[data-aktiv="1"] .e1, .szene[data-aktiv="2"] .e2 { opacity: 1; transform: none; }
.spuren { display: grid; gap: 22px; height: 100%; align-content: center; }
.spur small { display: block; font: 500 12px var(--sans); color: var(--tinte-3); margin-bottom: 8px; }
.balken { display: flex; align-items: center; gap: 4px; height: 54px; }
.balken i { flex: 1; height: 100%; border-radius: 3px; background: var(--akzent); transform-origin: center; transform: scaleY(.15);
            animation: sprechen var(--d) ease-in-out var(--v) infinite alternate; --a: .12; }
.spur.ich-nicht .balken i { background: #5b8fb5; animation-delay: calc(var(--v) - .4s); }
.szene:not([data-aktiv="0"]) .balken i { animation-play-state: paused; }
.zeile-t { display: grid; grid-template-columns: 44px auto 1fr; gap: 10px; font-size: 14px; padding: 8px 0; align-items: baseline;
           opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .5s var(--kurve); }
.zeile-t + .zeile-t { border-top: 1px solid var(--linie-2); }
.zeile-t span { font: 12px var(--mono); color: var(--tinte-3); }
.zeile-t span.t { font: 400 14px/1.45 var(--sans); color: var(--tinte); }
.zeile-t b { font: 500 13px var(--sans); color: #5b8fb5; } .zeile-t b.du { color: var(--akzent); }
.szene[data-aktiv="1"] .zeile-t { opacity: 1; transform: none; }
.szene[data-aktiv="1"] .zeile-t:nth-child(2) { transition-delay: .25s; }
.szene[data-aktiv="1"] .zeile-t:nth-child(3) { transition-delay: .5s; }
.szene[data-aktiv="1"] .zeile-t:nth-child(4) { transition-delay: .75s; }
.sz-titel { font: 400 20px var(--serif); margin-bottom: 4px; }
.sz-k { font: 500 11.5px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-3); margin: 14px 0 6px; }
.ebene ul { margin: 0; padding-left: 18px; font-size: 14.5px; display: grid; gap: 4px; }
.ebene ul.todos { list-style: none; padding: 0; }
.ebene ul.todos li { padding-left: 24px; position: relative; }
.ebene ul.todos li::before { content: ""; position: absolute; left: 0; top: .3em; width: 13px; height: 13px; border: 1.5px solid var(--tinte-3); border-radius: 50%; }
.sz-marke { position: absolute; right: 18px; bottom: 16px; font: 500 12px var(--sans); color: var(--akzent); background: var(--akzent-weich);
            border-radius: 99px; padding: 4px 10px; }

/* Kacheln zu den Unterseiten */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.kachel { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 28px 26px 24px;
          text-decoration: none; transition: transform .35s var(--kurve), box-shadow .35s, border-color .2s; transition-delay: var(--v, 0s); }
.kachel:hover { transform: translateY(-4px); border-color: var(--tinte-3); box-shadow: 0 26px 50px -30px rgba(10,40,44,.35); }
.k-symbol { width: 44px; height: 44px; border-radius: 12px; background: var(--akzent-weich); display: grid; place-items: center; }
.k-symbol svg { width: 22px; height: 22px; fill: none; stroke: var(--akzent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kachel h3 { font-size: 28px; margin: 20px 0 8px; }
.kachel p { color: var(--tinte-2); font-size: 15.5px; flex: 1; }
.k-mehr { margin-top: 20px; font: 500 14.5px var(--sans); color: var(--akzent); transition: transform .3s var(--kurve); display: inline-block; }
.kachel:hover .k-mehr { transform: translateX(4px); }

/* Preise kurz (Startseite) */
.preise-kurz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.preis-kurz { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; background: var(--weiss);
              border: 1px solid var(--linie); border-radius: 16px; text-decoration: none; transition: border-color .2s, transform .3s var(--kurve); }
.preis-kurz:hover { border-color: var(--tinte-3); transform: translateY(-2px); }
.preis-kurz.empfohlen { border: 1.5px solid var(--akzent); }
.preis-kurz b { display: block; font: 400 26px var(--serif); }
.preis-kurz span { font-size: 13.5px; color: var(--tinte-3); }
.pk-preis { text-align: right; font: 330 28px/1 var(--serif); white-space: nowrap; }
.pk-preis small { display: block; font: 400 12px var(--sans); color: var(--tinte-3); margin-top: 4px; }
.preis-fuss a { color: var(--akzent); text-decoration: none; font-weight: 500; }

/* Funktionen: kleine Dinge */
.ordner-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ordner-chips span { font: 500 12.5px var(--sans); padding: 5px 11px; border-radius: 99px; background: var(--papier-2); color: var(--tinte-2); }
.ordner-chips span.aktiv { background: var(--tinte); color: var(--papier); }
.mini-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--linie); }
.mini-raster div { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--linie-2); }
.mini-raster div:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px solid var(--linie-2); }
.mini-raster b { display: block; font: 500 16.5px var(--sans); margin-bottom: 6px; }
.mini-raster span { color: var(--tinte-2); font-size: 15px; }

/* Team-Seite */
.verbrauch { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; font-size: 14px; }
.verbrauch + .verbrauch { border-top: 1px solid var(--linie-2); }
.verbrauch div { height: 8px; border-radius: 99px; background: var(--papier-2); overflow: hidden; }
.verbrauch i { display: block; height: 100%; width: var(--w); background: var(--akzent); border-radius: 99px; }
.bereit .verbrauch i { width: 0; }
.bereit.spielt .verbrauch i { width: var(--w); transition: width 1.2s var(--kurve) .3s; }
.verbrauch b { font-weight: 500; font-variant-numeric: tabular-nums; }
.schritte-abschnitt .schritte { margin-top: 10px; }
.preis-box-abschnitt { padding-top: 110px; }
.preis-box { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding: 36px 40px;
             border-radius: 22px; background: var(--buehne); }
.preis-box .marker { margin-bottom: 10px; }
.gross-preis { font: 330 64px/1 var(--serif); letter-spacing: -.02em; }
.gross-preis small { font: 400 15px var(--sans); color: #3d4f4d; margin-left: 10px; letter-spacing: 0; }
.preis-box p { color: #3d4f4d; max-width: 560px; margin-top: 12px; }
.preis-box .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.preis-box .knopf.hell { background: rgba(255,255,255,.75); border-color: transparent; }

/* Sicherheit: Datenweg */
.sicherheit-aussagen { padding-top: 60px; }
.sicherheit-aussagen .aussagen { margin-top: 0; }
.datenweg { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 0; counter-reset: weg; position: relative; }
.datenweg::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--akzent), rgba(15,106,115,.15)); }
.datenweg li { display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding: 16px 0; position: relative; }
.dw-nr { width: 44px; height: 44px; border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--akzent); color: var(--akzent);
         display: grid; place-items: center; font: 400 20px var(--serif); position: relative; z-index: 1; }
.datenweg b { display: block; font: 500 18px var(--sans); margin: 8px 0 4px; }
.datenweg p { color: var(--tinte-2); max-width: 640px; }
.datenweg strong { color: var(--tinte); font-weight: 500; }
.einverstaendnis-abschnitt { padding-top: 80px; }

/* Preise: Vergleich */
.preise-seite { padding-top: 10px; }
.vergleich-halter { margin-top: 30px; overflow-x: auto; border: 1px solid var(--linie); border-radius: 18px; background: var(--weiss); }
.vergleich { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.vergleich th, .vergleich td { padding: 14px 20px; text-align: center; border-bottom: 1px solid var(--linie-2); }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }
.vergleich thead th { font: 400 22px var(--serif); padding-top: 22px; }
.vergleich tbody th { text-align: left; font-weight: 400; color: var(--tinte-2); }
.vergleich td { color: var(--tinte); font-weight: 500; }
.vergleich .hervor { background: var(--akzent-weich); }
.vergleich thead .hervor { color: var(--akzent); border-radius: 12px 12px 0 0; }

/* Über uns */
.personen-abschnitt { padding-top: 60px; }
.personen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.person-karte { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: start; background: var(--weiss);
                border: 1px solid var(--linie); border-radius: 22px; padding: 22px; transition-delay: var(--v, 0s); }
.person-bild { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--buehne); display: grid; place-items: center; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--kurve); }
.person-karte:hover .person-bild img { transform: scale(1.04); }
.person-bild span { font: 330 44px var(--serif); color: #fff; }
.person-text h2 { font-size: 30px; margin-top: 6px; }
.person-text .rolle { font: 500 13px var(--sans); color: var(--akzent); margin: 6px 0 14px; }
.person-text p { color: var(--tinte-2); font-size: 15.5px; }
.person-text p a { color: var(--akzent); }
.linkedin { margin-top: 18px; }
.linkedin svg { width: 15px; height: 15px; fill: #0a66c2; }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--linie); }
.werte div { padding: 26px 26px 0 0; }
.werte div + div { padding-left: 26px; border-left: 1px solid var(--linie-2); }
.werte b { display: block; font: 330 28px var(--serif); color: var(--akzent); margin-bottom: 8px; }
.werte span { color: var(--tinte-2); }

/* Kontakt-Fenster rechts unten */
.kw-wurzel { position: fixed; right: 22px; bottom: 22px; z-index: 70; font-family: var(--sans); }
.kw-start { display: flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; border-radius: 99px; border: 0; cursor: pointer;
            background: var(--weiss); color: var(--tinte); font: 600 15.5px var(--sans);
            box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 18px 40px -16px rgba(10,40,44,.45); transition: transform .3s var(--kurve), box-shadow .3s;
            animation: kw-ein .6s var(--kurve) 1.2s both; }
.kw-start:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 24px 46px -16px rgba(10,40,44,.5); }
@keyframes kw-ein { from { opacity: 0; transform: translateY(14px); } }
.kw-bilder { display: inline-flex; position: relative; }
.kw-online { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid var(--weiss); }
.kw-bilder img, .kw-bilder i { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; border: 2px solid var(--weiss);
                               background: var(--buehne); display: grid; place-items: center; font: normal 500 13px var(--sans); color: #fff; }
.kw-bilder > * + * { margin-left: -10px; }
.kw { position: absolute; right: 0; bottom: 0; width: 380px; height: min(600px, calc(100vh - 44px)); display: flex; flex-direction: column;
      background: #f3f6f8; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 34px 80px -24px rgba(10,40,44,.45);
      animation: kw-auf .3s var(--kurve); }
@keyframes kw-auf { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.kw-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 16px 12px 18px; }
.kw-kopf .kw-bilder img, .kw-kopf .kw-bilder i { width: 44px; height: 44px; }
.kw-kopf .kw-online { border-color: #f3f6f8; }
.kw-kopf b { display: block; font-weight: 600; font-size: 16.5px; }
.kw-kopf small { display: block; font-size: 12.5px; color: var(--tinte-2); line-height: 1.35; }
.kw-zu { margin-left: auto; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: rgba(20,20,19,.06); cursor: pointer;
         font-size: 20px; line-height: 1; color: var(--tinte); }
.kw-zu:hover { background: rgba(20,20,19,.1); }
.kw-reiter { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 16px 6px; padding: 4px; border-radius: 99px; background: rgba(20,20,19,.06); }
.kw-reiter button { border: 0; background: none; padding: 9px; border-radius: 99px; font: 500 14px var(--sans); color: var(--tinte-2); cursor: pointer; }
.kw-reiter button.aktiv { background: var(--weiss); color: var(--tinte); box-shadow: 0 1px 3px rgba(20,20,19,.1); }
.kw-chat, .kw-nachricht { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kw-chat[hidden], .kw-nachricht[hidden] { display: none !important; }
.kw-verlauf { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.kw-blase { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.kw-blase p { margin: 0; } .kw-blase p + p, .kw-blase ul + p, .kw-blase p + ul { margin-top: 6px; }
.kw-blase ul { margin: 0; padding-left: 18px; } .kw-blase li + li { margin-top: 3px; }
.kw-blase a { color: var(--akzent); }
.kw-blase.assistent { background: var(--weiss); align-self: flex-start; box-shadow: 0 0 0 1px rgba(20,20,19,.06); }
.kw-blase.nutzer { background: var(--tinte); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.kw-blase.fehler { color: var(--rot); }
.kw-blase.tippt { display: flex; gap: 4px; padding: 14px; }
.kw-blase.tippt span { width: 6px; height: 6px; border-radius: 50%; background: var(--tinte-3); animation: kw-tippen 1s infinite ease-in-out; }
.kw-blase.tippt span:nth-child(2) { animation-delay: .15s; } .kw-blase.tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes kw-tippen { 50% { transform: translateY(-4px); opacity: .5; } }
.kw-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.kw-vorschlaege:empty { display: none; }
.kw-vorschlaege button { font: 400 13px var(--sans); padding: 6px 11px; border-radius: 99px; border: 1px solid var(--linie); background: var(--weiss);
                         color: var(--tinte); cursor: pointer; }
.kw-vorschlaege button:hover { border-color: var(--akzent); color: var(--akzent); }
.kw-eingabe { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px 6px; }
.kw-eingabe textarea { flex: 1; resize: none; font: 400 15px/1.4 var(--sans); padding: 11px 16px; border-radius: 22px; border: 1px solid var(--linie);
                       background: var(--weiss); outline: none; max-height: 110px; color: var(--tinte); }
.kw-eingabe textarea:focus { border-color: var(--akzent); }
.kw-senden { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--tinte); color: #fff; display: grid; place-items: center; cursor: pointer; }
.kw-senden:disabled { opacity: .5; }
.kw-senden svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kw-fuss { font-size: 11.5px; color: var(--tinte-3); padding: 4px 18px 14px; line-height: 1.45; }
.kw-fuss a { color: var(--tinte-2); }
.kw-formular { display: grid; gap: 10px; padding: 8px 16px 0; overflow-y: auto; }
.kw-formular input, .kw-formular textarea { font: 400 15px var(--sans); padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linie);
                                            background: var(--weiss); color: var(--tinte); outline: none; resize: vertical; }
.kw-formular input:focus, .kw-formular textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.kw-status { font-size: 13.5px; color: var(--rot); min-height: 0; }
.kw-danke { margin: 20px 16px 0; padding: 22px; border-radius: 16px; background: var(--weiss); }
.kw-danke b { font: 400 22px var(--serif); display: block; margin-bottom: 6px; }
.kw-danke p { color: var(--tinte-2); }
.kw-nachricht .kw-fuss { margin-top: auto; }
@media (max-width: 640px) {
  .kw-wurzel { right: 14px; bottom: 14px; }
  .kw { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; }
}

@media (max-width: 900px) {
  .seiten-kopf { padding-top: 56px; }
  .zahlen { grid-template-columns: 1fr 1fr; }
  .zahlen > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .zahlen > div:nth-child(n+3) { border-top: 1px solid var(--linie-2); }
  .geschichte { grid-template-columns: 1fr; gap: 0; }
  .szene-halter { order: -1; margin-bottom: 18px; }
  .szene { position: relative; top: 0; height: 330px; padding: 18px; }
  .ebene { top: 74px; left: 18px; right: 18px; bottom: 18px; padding: 14px 16px; }
  .zeile-t { grid-template-columns: auto 1fr; column-gap: 8px; font-size: 13.5px; padding: 7px 0; }
  .zeile-t .t { grid-column: 1 / -1; margin-top: 2px; }
  .e2 .sz-titel { font-size: 17px; }
  .e2 ul li:nth-child(n+2), .e2 .sz-marke { display: none; }
  .e2 .sz-k { margin-top: 10px; }
  .szene-kopf b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .szene-kopf .k0 { font-size: 0; } .szene-kopf .k0::before { content: "Aufnahme läuft"; font-size: 13px; }
  .zeile-t:nth-child(n+4) { display: none; }
  .szene-kopf { font-size: 13px; }
  .kacheln, .preise-kurz, .mini-raster, .personen, .werte { grid-template-columns: 1fr; }
  .mini-raster div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .werte div + div { padding-left: 0; border-left: 0; }
  .person-karte { grid-template-columns: 1fr; }
  .person-bild { max-width: 220px; }
  .zahlen-band { padding-top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .wort-ein { opacity: 1 !important; transform: none !important; filter: none !important; }
  .kipp > .flaeche { transform: none !important; }
  .balken i, .punkt-rot, .kw-start { animation: none !important; }
  .ebene, .zeile-t, .g-schritt { transition: none !important; }
  @view-transition { navigation: none; }
}

/* Navigation auf dem Handy: nichts bricht um, nichts wird abgeschnitten */
.knopf { white-space: nowrap; }
.nur-klein { display: none; }
@media (max-width: 900px) { nav.offen .links .nur-klein:not([hidden]) { display: block; } }
@media (max-width: 480px) {
  nav .wrap { padding: 0 14px; gap: 8px; }
  nav .rechts { gap: 6px; }
  nav .rechts .knopf.klein { font-size: 13.5px; padding: 8px 12px; }
  .wortmarke { font-size: 17px; }

}

/* Feinschliff für schmale Bildschirme */
@media (max-width: 640px) {
  .zahlen b { font-size: 38px; white-space: nowrap; }
  .zahlen > div { padding-right: 14px; }
  .zahlen > div + div { padding-left: 14px; }
  .schluss h2 br, .seiten-kopf h1 br { display: none; }
  .gross-preis small, .sk-gross small { display: block; margin: 8px 0 0; }

  .vergleich { min-width: 0; font-size: 13px; }
  .vergleich th, .vergleich td { padding: 11px 6px; }
  .vergleich tbody th { padding-left: 14px; }
  .vergleich thead th { font-size: 17px; }
  .person-bild { aspect-ratio: 4 / 3; max-width: none; }
  .person-bild img { object-position: 50% 22%; }
}
.plaetze.platzhalter { visibility: hidden; }
@media (max-width: 900px) {
  .paket .beschr, .paket .einheit { min-height: 0; }
  .plaetze.platzhalter { display: none; }
}

/* Handy: Schritte als kompakte Liste unter der Szene, aktiver Schritt mit Fortschrittsbalken */
@media (max-width: 900px) {
  .g-schritt { min-height: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 16px 0 16px; cursor: pointer;
               border-top: 1px solid var(--linie-2); position: relative; }
  .g-schritt .ziffer { font-size: 30px; grid-row: span 2; }
  .g-schritt h3 { font-size: 17px; margin: 4px 0 4px; }
  .g-schritt p { font-size: 14.5px; grid-column: 2; }
  .g-schritt:not(.aktiv) p { display: none; }
  .g-schritt.aktiv::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; background: var(--akzent);
                            animation: g-lauf 4.2s linear forwards; }
}
@keyframes g-lauf { from { width: 0; } to { width: 100%; } }

/* Handy-Vorschau der App im Hero */
.mini-app, .u-handy { display: none; }
@media (max-width: 700px) {
  .produkt .fenster { display: none; }
  .u-gross { display: none; }
  .u-handy { display: inline; }
  .produkt .flaeche { padding: 18px; }
  .mini-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; background: #fff; border-radius: 16px; padding: 14px;
              box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 30px 60px -24px rgba(10,40,44,.35); }
  .ma-kopf { display: flex; align-items: center; gap: 10px; background: var(--akzent-weich); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
  .ma-kopf b { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ma-zeit { font: 12.5px var(--mono, ui-monospace, monospace); color: var(--tinte-2); }
  .ma-titel { font: 400 22px var(--serif); margin: 8px 2px 2px; display: flex; align-items: baseline; justify-content: space-between; }
  .ma-titel small { font: 400 12px var(--sans); color: var(--tinte-3); }
  .ma-karte { border: 1px solid var(--linie); border-radius: 12px; padding: 11px 13px; display: grid; gap: 2px; }
  .ma-karte small { font-size: 12px; color: var(--tinte-3); }
  .ma-karte b { font-weight: 500; font-size: 15px; }
  .ma-karte span { font-size: 13px; color: var(--akzent); }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .g-schritt.aktiv::after { animation: none; width: 100%; } }

/* Kontakt-Fenster: Pipeflow-Stil */
.kw-start:hover .kw-online, .kw-online { animation: kw-puls 2.4s ease-in-out infinite; }
@keyframes kw-puls { 50% { box-shadow: 0 0 0 4px rgba(34,197,94,.18); } }
.kw-reiter { margin: 6px 16px 10px; padding: 5px; background: #e4e9ed; }
.kw-reiter button { padding: 10px; font-size: 15px; }
.kw-eingabe textarea { background: var(--weiss); padding: 13px 18px; border-radius: 26px; }
.kw-eingabe textarea:disabled { background: rgba(255,255,255,.6); cursor: not-allowed; }
.kw-senden { width: 48px; height: 48px; }
.kw-vorschlaege .kw-ziel { font: 400 13px var(--sans); padding: 6px 11px; border-radius: 99px; border: 1px solid var(--tinte); background: var(--tinte);
                           color: #fff; text-decoration: none; }
@media (max-width: 480px) {
  .kw-start { padding: 5px 16px 5px 5px; gap: 10px; font-size: 14.5px; }
  .kw-start .kw-bilder img, .kw-start .kw-bilder i { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .kw-online { animation: none; } }

/* ===================== Landingpages (seo/seiten.js) ===================== */
.brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tinte-3); margin-bottom: 26px; }
.brotkrumen a { color: var(--tinte-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); }
.brotkrumen span[aria-hidden] { color: var(--linie); }
.brotkrumen [aria-current] { color: var(--tinte-3); }

/* drei Alltagsprobleme */
.probleme-abschnitt { padding-top: 110px; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.drei > div { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 28px 26px; }
.drei-z { font: 300 34px/1 var(--serif); color: var(--akzent); }
.drei b { display: block; font: 500 18px var(--sans); margin: 18px 0 8px; letter-spacing: -.01em; }
.drei p { color: var(--tinte-2); font-size: 15.5px; }
.funktionen-seite .reihe p + p { margin-top: 12px; }

/* Hinweis-Fläche (Vertraulichkeit) */
.hinweis-abschnitt { padding-top: 110px; }
.hinweis-flaeche { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; background: var(--papier-2); border-radius: 24px; padding: 56px; }
.hinweis-flaeche h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.hinweis-flaeche p { color: var(--tinte-2); font-size: 17px; }
.hinweis-flaeche p + p { margin-top: 12px; }
.pfeil-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--akzent); font-weight: 500; text-decoration: none; }
.pfeil-link svg, .lk-mehr svg, .hub-karte i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--kurve); }
.pfeil-link:hover svg { transform: translateX(3px); }

/* Weiterlesen-Karten */
.weiter-abschnitt { padding-top: 110px; }
.link-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.link-karte { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; border: 1px solid var(--linie); border-radius: 16px; background: var(--weiss);
              text-decoration: none; color: var(--tinte); transition: transform .3s var(--kurve), border-color .3s, box-shadow .3s; }
.link-karte:hover { transform: translateY(-3px); border-color: var(--tinte-3); box-shadow: 0 22px 44px -30px rgba(10,40,44,.35); }
.link-karte small { font: 500 12px var(--sans); text-transform: uppercase; letter-spacing: .03em; color: var(--tinte-3); }
.link-karte b { font: 400 21px/1.2 var(--serif); flex: 1; }
.lk-mehr { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 14px var(--sans); color: var(--akzent); }
.link-karte:hover .lk-mehr svg { transform: translateX(3px); }

/* Übersichten (Hubs) */
.hub-abschnitt { padding-top: 40px; }
.hub-gruppe + .hub-gruppe { margin-top: 64px; }
.hub-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hub-karte { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 20px; border: 1px solid var(--linie); border-radius: 16px; background: var(--weiss);
             text-decoration: none; color: var(--tinte); transition: transform .3s var(--kurve), border-color .3s, box-shadow .3s; }
.hub-karte:hover { transform: translateY(-3px); border-color: var(--tinte-3); box-shadow: 0 22px 44px -30px rgba(10,40,44,.35); }
.hub-karte b { font: 400 23px/1.2 var(--serif); }
.hub-karte span { color: var(--tinte-2); font-size: 15px; flex: 1; }
.hub-karte i { font: normal 500 14px var(--sans); color: var(--akzent); display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.hub-karte:hover i svg { transform: translateX(3px); }

/* Ratgeber-Artikel */
.artikel-kopf h1 { max-width: 980px; }
.artikel-meta { margin-top: 22px; font-size: 14px; color: var(--tinte-3); }
.artikel-meta a { color: var(--tinte-2); }
.artikel-abschnitt { padding-top: 56px; }
.artikel-raster { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 72px; justify-content: start; }
.inhalt-nav { position: sticky; top: 100px; align-self: start; }
.inhalt-nav nav { display: grid; gap: 2px; border-left: 1px solid var(--linie); }
.inhalt-nav a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4;
                color: var(--tinte-3); text-decoration: none; transition: color .2s, border-color .2s; }
.inhalt-nav a:hover { color: var(--tinte); }
.inhalt-nav a.aktiv { color: var(--akzent); border-left-color: var(--akzent); }
.artikel { font-size: 18px; line-height: 1.7; color: #2b2b29; }
.artikel.breit { max-width: 780px; }
.artikel-teil { scroll-margin-top: 96px; padding: 0; }
.artikel-teil + .artikel-teil, .noted-box + .artikel-teil { margin-top: 48px; }
.artikel h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; margin-bottom: 16px; color: var(--tinte); }
.artikel p + p, .artikel ul + p, .artikel ol + p, .artikel .tabelle-halter + p { margin-top: 16px; }
.artikel ul, .artikel ol { margin: 16px 0 0; padding-left: 22px; }
.artikel li { margin: 8px 0; padding-left: 4px; }
.artikel li::marker { color: var(--akzent); }
.artikel a { color: var(--akzent); }
.artikel b { font-weight: 600; color: var(--tinte); }
.auf-einen-blick { background: var(--akzent-weich); border-radius: 18px; padding: 26px 30px; margin-bottom: 48px; font-size: 16.5px; }
.auf-einen-blick > b { font: 500 13px var(--sans); text-transform: uppercase; letter-spacing: .03em; color: var(--akzent); }
.auf-einen-blick ul { margin-top: 10px; }
.hinweis-box { margin-top: 20px; padding: 18px 22px; border-left: 3px solid var(--akzent); background: var(--weiss); border-radius: 0 12px 12px 0; font-size: 16.5px; color: var(--tinte-2); }
.tabelle-halter { margin-top: 18px; overflow-x: auto; border: 1px solid var(--linie); border-radius: 14px; background: var(--weiss); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tabelle th, .tabelle td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linie-2); vertical-align: top; }
.tabelle th { font: 500 13px var(--sans); color: var(--tinte-3); text-transform: uppercase; letter-spacing: .02em; background: var(--papier); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td:first-child { font-weight: 500; color: var(--tinte); }
.noted-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 48px 0; padding: 28px 30px; border-radius: 20px;
             background: var(--petrol); color: var(--petrol-text); }
.noted-box .motiv { color: #9fdde2; opacity: .7; display: block; margin-bottom: 12px; }
.noted-box b { font: 400 24px/1.2 var(--serif); display: block; color: var(--petrol-text); }
.noted-box p { color: rgba(238,245,243,.78); font-size: 15.5px; line-height: 1.5; margin-top: 6px; max-width: 460px; }
.noted-box .knopf { background: var(--petrol-text); color: #0b4a51; border-color: var(--petrol-text); flex: none; }
.noted-box.klein { flex-direction: column; align-items: flex-start; margin: 30px 0 0; }
.quellen { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 14.5px; }
.quellen b { font: 500 13px var(--sans); text-transform: uppercase; letter-spacing: .03em; color: var(--tinte-3); }
.quellen ul { padding-left: 18px; }
.quellen a { color: var(--tinte-2); word-break: break-word; }
.rechtshinweis { margin-top: 26px; font-size: 14px; color: var(--tinte-3); line-height: 1.55; }
.tabellen-fuss { font-size: 13px; color: var(--tinte-3); margin-top: 12px; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.pro-box { border: 1px solid var(--linie); border-radius: 16px; padding: 24px; background: var(--weiss); font-size: 16px; }
.pro-box.hervor { border-color: var(--akzent); background: var(--akzent-weich); }
.pro-box b { font: 500 16px var(--sans); }

/* Vorlagen */
.vorlage-abschnitt { padding-top: 64px; scroll-margin-top: 80px; }
.vorlage-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; }
.vorlage-box { border: 1px solid var(--linie); border-radius: 18px; background: var(--weiss); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(10,40,44,.35); }
.vorlage-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 22px;
                  border-bottom: 1px solid var(--linie-2); background: var(--papier); font: 500 14px var(--sans); }
.vorlage-leiste div { display: flex; gap: 8px; }
.vorlage-text { margin: 0; padding: 26px 28px 30px; font: 14.5px/1.75 var(--mono); color: var(--tinte); white-space: pre-wrap; word-break: break-word; }
.vorlage-seite { position: sticky; top: 100px; }
.haken-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.haken-liste li { position: relative; padding-left: 28px; color: var(--tinte-2); }
.haken-liste li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border: solid var(--akzent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.beispiel-abschnitt { padding-top: 120px; }
.dokument { margin-top: 40px; max-width: 760px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 48px 52px;
            box-shadow: 0 1px 0 var(--linie-2), 0 40px 70px -46px rgba(10,40,44,.4); }
.dok-titel { font: 400 26px/1.2 var(--serif); padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.dok-block { padding-top: 20px; }
.dok-block .k { font: 500 12px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-3); margin-bottom: 6px; }
.dok-block p { font-size: 16px; }
.dok-block p + p { margin-top: 4px; }
.tipps-abschnitt { padding-top: 120px; }
.fehler-liste { margin-top: 48px; }
.fehler-liste ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fehler-liste li { padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(200,68,47,.3); color: #9a3524; background: rgba(200,68,47,.05); font-size: 14.5px; }

@media (max-width: 900px) {
  .drei, .link-raster, .hub-raster, .zwei-spalten { grid-template-columns: 1fr; }
  .hinweis-flaeche { grid-template-columns: 1fr; gap: 20px; padding: 32px 24px; }
  .artikel-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .inhalt-nav { display: none; }
  .artikel { font-size: 17px; }
  .vorlage-raster { grid-template-columns: minmax(0, 1fr); }
  .vorlage-seite { position: static; }
  .noted-box { flex-direction: column; align-items: flex-start; }
  .dokument { padding: 30px 24px; }
  .probleme-abschnitt, .hinweis-abschnitt, .weiter-abschnitt, .beispiel-abschnitt, .tipps-abschnitt { padding-top: 80px; }
}
@media (max-width: 480px) {
  .vorlage-leiste { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
  .vorlage-text { padding: 20px 18px 24px; font-size: 13.5px; }
  .auf-einen-blick { padding: 22px 20px; }
}


/* Lange deutsche Wörter („Auftragsverarbeitungsvertrag“) dürfen am Handy trennen statt überzustehen */
h1, h2, h3, .marker, .artikel, .drei, .hub-karte b, .link-karte b { overflow-wrap: break-word; }
@media (max-width: 600px) { h1, h2, h3, .artikel, .drei { hyphens: auto; -webkit-hyphens: auto; } }
.wort-ein { max-width: 100%; }
.reihe > *, .ueber > *, .hinweis-flaeche > *, .vorlage-raster > *, .artikel-raster > * { min-width: 0; }
@media (max-width: 480px) {
  .seiten-kopf h1 { font-size: clamp(30px, 9.2vw, 42px); }
}

body { overflow-wrap: break-word; }

/* Startseite: Verzeichnis vor dem Abschluss – eigene, ruhige Fläche (kein zweiter Fuß) */
.verzeichnis { padding: 130px 0 0; }
.verzeichnis .wrap > .vz-flaeche { background: var(--papier-2); border-radius: 24px; padding: 40px 44px 44px; }
.vz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.vz-kopf span { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); letter-spacing: -.01em; }
.vz-kopf a { font-size: 14.5px; color: var(--akzent); text-decoration: none; font-weight: 500; white-space: nowrap; }
.vz-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 30px; }
.vz-raster .vz-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.vz-raster h3 { font: 500 12.5px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-3); margin: 0 0 6px; }
.vz-raster a { font-size: 15px; color: var(--tinte-2); text-decoration: none; line-height: 1.4; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
               transition: color .2s, background-size .3s var(--kurve); }
.vz-raster a:hover { color: var(--tinte); background-size: 100% 1px; }
.vz-raster a.alle { color: var(--akzent); font-weight: 500; margin-top: 4px; }
.vz-raster a.alle::after { content: " →"; }
@media (max-width: 900px) {
  .verzeichnis { padding-top: 90px; }
  .verzeichnis .wrap > .vz-flaeche { padding: 28px 22px 30px; border-radius: 20px; }
  .vz-kopf { flex-direction: column; gap: 8px; }
  .vz-raster { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
}

/* Mein Konto: Wörterbuch */
.db-woerterbuch { grid-column: 1 / -1; }
.wb-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.wb-kopf p { max-width: 640px; }
.wb-kopf .pro-marke { font: 600 11px var(--sans); color: var(--akzent); background: var(--akzent-weich); padding: 2px 8px; border-radius: 99px; vertical-align: 3px; margin-left: 6px; }
.wb-zahl { font-size: 13px; color: var(--tinte-3); white-space: nowrap; padding-top: 4px; }
.wb-form { display: flex; gap: 8px; margin-top: 16px; max-width: 620px; }
.wb-form input { flex: 1; min-width: 0; font: 400 15px var(--sans); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--linie); background: var(--papier); outline: none; }
.wb-form input:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.wb-form input:disabled { opacity: .55; }
.wb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.wb-chip { display: inline-flex; align-items: center; gap: 2px; padding: 5px 4px 5px 12px; border-radius: 99px; background: var(--papier-2); font-size: 14px; }
.wb-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--tinte-3); cursor: pointer; font-size: 15px; line-height: 1; }
.wb-chip button:hover { background: rgba(20,20,19,.08); color: var(--tinte); }
.wb-leer { font-size: 14px; color: var(--tinte-3); }
@media (max-width: 600px) { .wb-kopf { flex-direction: column; gap: 4px; } }
.wb-form .knopf { align-self: stretch; }

/* Mein Konto am Handy: oben nur „Im Browser öffnen“ und „Download“ – Abmelden steht in der Karte „Zugang“ */
@media (max-width: 600px) { .konto-seite nav #abmeldenKnopf { display: none; } }

/* ---------- Lexikon */
.definition { margin-top: 26px; max-width: 780px; background: var(--weiss); border: 1px solid var(--linie); border-left: 3px solid var(--akzent);
              border-radius: 4px 18px 18px 4px; padding: 22px 26px; }
.definition > b { font: 500 13px var(--sans); text-transform: uppercase; letter-spacing: .03em; color: var(--akzent); }
.definition p { font: 400 21px/1.45 var(--serif); color: var(--tinte); margin-top: 6px; }
.definition small { display: block; margin-top: 10px; font-size: 14px; color: var(--tinte-3); }
.lexikon-abschnitt { padding-top: 56px; }
.lex-beispiel { margin-top: 48px; padding: 24px 28px; border-radius: 18px; background: var(--papier-2); font-size: 16.5px; }
.lex-beispiel .marker { margin-bottom: 8px; }
.lex-beispiel > b { font: 400 22px/1.25 var(--serif); display: block; margin-bottom: 6px; }
.begriffe-abschnitt { padding-top: 90px; }
.begriff-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.begriff-chips a { padding: 9px 16px; border: 1px solid var(--linie); border-radius: 99px; background: var(--weiss); font-size: 15px; color: var(--tinte);
                   transition: border-color .2s, transform .2s var(--kurve); }
.begriff-chips a:hover { border-color: var(--tinte-3); transform: translateY(-2px); }

/* ---------- Übersichtsseiten: Sprungleiste, A–Z */
.hub-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--linie); }
.hub-sprung a { padding: 7px 14px; border-radius: 99px; background: var(--papier-2); font-size: 14.5px; color: var(--tinte-2); transition: background .2s, color .2s; }
.hub-sprung a:hover { background: var(--tinte); color: var(--papier); }
.hub-sprung.az a { min-width: 38px; text-align: center; padding: 7px 10px; font-weight: 500; }
.hub-gruppe { scroll-margin-top: 96px; }
.az-gruppe { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding-top: 34px; border-top: 1px solid var(--linie-2); }
.hub-gruppe.az-gruppe + .hub-gruppe.az-gruppe { margin-top: 34px; }
.az-buchstabe { font: 400 56px/1 var(--serif); color: var(--akzent); }
.az-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.az-liste a { display: block; padding: 12px 0; border-bottom: 1px solid var(--linie-2); }
.az-liste a b { display: block; font: 500 16.5px var(--sans); color: var(--tinte); }
.az-liste a span { display: block; font-size: 14.5px; color: var(--tinte-2); line-height: 1.45; margin-top: 2px;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.az-liste a:hover b { color: var(--akzent); }
@media (max-width: 760px) {
  .az-gruppe { grid-template-columns: 1fr; gap: 6px; }
  .az-buchstabe { font-size: 42px; }
  .az-liste { grid-template-columns: 1fr; }
  .definition p { font-size: 19px; }
  .hub-sprung { margin-bottom: 36px; }
}


/* noteit-Logo mit Schriftzug (Kopf, Fuß, Kontoseiten) */
.wortmarke img.logo { width: auto; height: 26px; border-radius: 0; box-shadow: none; display: block; }
.fuss a.wortmarke img.logo { height: 28px; }
@media (max-width: 600px) { .wortmarke img.logo { height: 24px; } }

/* Platz für die Paket-Karten reservieren, bis sie geladen sind (verhindert Sprünge) */
#pakete:empty { min-height: 708px; }
#preisFuss:empty { min-height: 42px; }
@media (max-width: 960px) { #pakete:empty { min-height: 1671px; } }
@media (max-width: 480px) { #pakete:empty { min-height: 1810px; } #preisFuss:empty { min-height: 84px; } }

/* lange Wörter in Überschriften der Textseiten sauber trennen */
.einfach h1 { font-size: clamp(32px, 4.4vw, 52px); hyphens: manual; overflow-wrap: break-word; }

/* Nur für Screenreader sichtbar (z. B. leere Tabellenköpfe) */
.nur-leser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Links im Fließtext nicht nur an der Farbe erkennbar */
.einfach p a, .einfach dd a, .einfach li a { text-decoration: underline; text-underline-offset: 2px; }