/* ============================================================
   thiedigital, gemeinsames Stylesheet
   Aufbau seit dem 06.09.2026: jede Sektion ist eine Kapsel auf
   dem Seitengrund, die Leiste schwebt als Pille darueber.
   Radius-System: Kapsel 32px · Cards 20px · Tiles 16px ·
   Inputs 12px · Buttons/Badges Pille (980px). Keine Ausnahmen.
   ============================================================ */

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-sunken: #ebebee;
  --ink: #1d1d1f;
  --ink-muted: #6e6e73;
  --ink-faint: #6e6e73;
  /* Auf --surface-sunken reicht #6e6e73 nicht fuer WCAG AA (4,26:1).
     Minimal abgedunkelt auf 4,66:1, optisch praktisch identisch. */
  --ink-muted-sunken: #68686d;
  --rule: rgba(0, 0, 0, 0.08);
  --accent: #0071e3;
  --accent-strong: #0058b0;
  --accent-tint: rgba(0, 113, 227, 0.1);
  --accent-fill: #0071e3;
  --accent-fill-hover: #0058b0;
  --accent-b: #8a5420;
  --accent-b-tint: rgba(255, 159, 10, 0.14);
  --rot: #c4161c;
  --rot-tint: rgba(255, 59, 48, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -14px rgba(0, 0, 0, 0.14);

  /* Kapseln */
  --radius-kapsel: 32px;
  --kapsel-gap: 12px;
  --kapsel-dunkel: #1d1d1f;
  --tint-blau: #e9f1fb;
  --tint-sand: #f3efe8;
  --tint-mint: #e8f0ec;

  /* Schwebende Leiste */
  --nav-bg-deckend: rgba(255, 255, 255, 0.94);
  --nav-rand: rgba(0, 0, 0, 0.06);
  --nav-schatten-gescrollt: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.10);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hover: ease;
  --dur-press: 120ms;   /* Druckfeedback, Band 100-160ms */
  --dur-hover: 150ms;   /* Farbwechsel bei Hover */
  --dur-ui: 200ms;      /* Zustandswechsel im Interface */
  --dur-enter: 300ms;   /* Eintritt beim Scrollen, Obergrenze */

  /* Startseite hell: Glas, Mulde, Raster. Werte aus dem Bau-Briefing. */
  --glas-bg: rgba(255, 255, 255, 0.52);
  --glas-rand: rgba(255, 255, 255, 0.75);
  --glas-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.10);
  --mulde: rgba(0, 0, 0, 0.06);
  --feld-bg: rgba(255, 255, 255, 0.82);
  --rand-stark: rgba(0, 0, 0, 0.16);
  --accent-rand: rgba(0, 113, 227, 0.26);
  /* Gedaempfter Text auf --accent-tint: #6e6e73 kommt dort nur auf 4,4:1. */
  --ink-muted-tint: #56565b;
  --schimmer: rgba(255, 255, 255, 0.75);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --menue-glas: rgba(28, 28, 30, 0.6);
    --surface: #1c1c1e;
    --surface-sunken: #2c2c2e;
    --ink: #f5f5f7;
    --ink-muted: #98989d;
    --ink-faint: #98989d;
    --ink-muted-sunken: #98989d;
    --rule: rgba(255, 255, 255, 0.12);
    --accent: #2997ff;
    --accent-strong: #2997ff;
    --accent-tint: rgba(41, 151, 255, 0.16);
    --accent-fill: #0071e3;
    --accent-fill-hover: #0058b0;
    --accent-b: #ffa42b;
    --accent-b-tint: rgba(255, 159, 10, 0.16);
  --rot: #ff6961;
  --rot-tint: rgba(255, 69, 58, 0.18);
    --rot: #ff6961;
    --rot-tint: rgba(255, 69, 58, 0.18);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
    --kapsel-dunkel: #1c1c1e;
    --tint-blau: #172230;
    --tint-sand: #26221c;
    --tint-mint: #1a2420;
    --nav-bg-deckend: rgba(28, 28, 30, 0.94);
    --nav-rand: rgba(255, 255, 255, 0.10);
    --nav-schatten-gescrollt: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
    --glas-bg: rgba(28, 28, 30, 0.55);
    --glas-rand: rgba(255, 255, 255, 0.12);
    --glas-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.5);
    --mulde: rgba(255, 255, 255, 0.08);
    --feld-bg: rgba(255, 255, 255, 0.04);
    --rand-stark: rgba(255, 255, 255, 0.22);
    --accent-rand: rgba(41, 151, 255, 0.34);
    --ink-muted-tint: #a1a1a6;
    --schimmer: rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --menue-glas: rgba(28, 28, 30, 0.6);
  --surface: #1c1c1e;
  --surface-sunken: #2c2c2e;
  --ink: #f5f5f7;
  --ink-muted: #98989d;
  --ink-faint: #98989d;
  --ink-muted-sunken: #98989d;
  --rule: rgba(255, 255, 255, 0.12);
  --accent: #2997ff;
  --accent-strong: #2997ff;
  --accent-tint: rgba(41, 151, 255, 0.16);
  --accent-fill: #0071e3;
  --accent-fill-hover: #0058b0;
  --accent-b: #ffa42b;
  --accent-b-tint: rgba(255, 159, 10, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  --kapsel-dunkel: #1c1c1e;
  --tint-blau: #172230;
  --tint-sand: #26221c;
  --tint-mint: #1a2420;
  --nav-bg-deckend: rgba(28, 28, 30, 0.94);
  --nav-rand: rgba(255, 255, 255, 0.10);
  --nav-schatten-gescrollt: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
  --glas-bg: rgba(28, 28, 30, 0.55);
  --glas-rand: rgba(255, 255, 255, 0.12);
  --glas-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.5);
  --mulde: rgba(255, 255, 255, 0.08);
  --feld-bg: rgba(255, 255, 255, 0.04);
  --rand-stark: rgba(255, 255, 255, 0.22);
  --accent-rand: rgba(41, 151, 255, 0.34);
  --ink-muted-tint: #a1a1a6;
  --schimmer: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
  :root { --radius-kapsel: 28px; --kapsel-gap: 8px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent-strong); text-decoration: none; }
/* Nur mit Maus: auf dem Handy bliebe der Strich nach dem Antippen stehen. */
@media (hover: hover) { a:hover { text-decoration: underline; } }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }
[hidden] { display: none; }

/* ---- Skip-Link ---- */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 980px;
  box-shadow: var(--shadow);
  z-index: 100;
}
.skip:focus { left: 16px; }

/* ============================================================
   Navigation: schwebende Pille
   Die Leiste ist nicht Teil der ersten Kapsel, sie schwebt
   darueber. Hoehe, Breite und Material aendern sich beim Scrollen
   nicht. Das Material ist das Glas aus dem Abschnitt Startseite hell.

   Das Material liegt auf einem Pseudo-Element hinter dem Inhalt,
   nicht auf .nav-inner selbst. Grund: backdrop-filter macht das
   Element zum Stapelkontext, und dann koennte das mobile
   Vollbildmenue nicht mehr hinter die Pille ruecken.
   ============================================================ */
.nav {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
/* Waehrend einer Vollbild-Animation auf der Startseite (initLeiste) faehrt
   die Leiste nach oben weg. Offenes Menue und Tastaturfokus holen sie zurueck.
   Nur verschieben, nie die Deckkraft aendern: Safari zeichnet die Glas-
   Unschaerfe nicht, solange ein Elternelement halb durchsichtig ist.
   Wegfahren 380ms, Wiederkommen 320ms, mit der weichen iOS-Schubladenkurve.
   Eigene Ebene (will-change), damit die Glas-Unschaerfe beim Fahren nicht
   in jedem Bild neu berechnet wird. */
.nav { transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; will-change: transform; }
/* Offenes Menue: keine eigene Ebene, sonst wird das fixierte Vollbild-Menue
   auf die Pille begrenzt und bleibt unsichtbar. */
.nav.nav-offen { will-change: auto; }
.nav.nav-weg:not(.nav-offen):not(:focus-within) {
  transform: translateY(-180%);
  visibility: hidden;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 380ms;
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav.nav-weg:not(.nav-offen):not(:focus-within) { transition: none; }
}
.nav-inner {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 56px;
  padding: 0 8px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
/* Schriftzug statt Bild: "thie" fett, "digital" leicht, einfarbig. */
.wortzug { font-size: 18px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.wortzug b { font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .wordmark { transition: opacity var(--dur-hover) var(--ease-hover); }
  .wordmark:hover { text-decoration: none; opacity: 0.7; }
}


/* Menuknopf. Nur mobil sichtbar, auf dem Desktop stehen die Links offen. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Drei Striche nach hyperfocus.cc: der mittlere ist das Element selbst,
   die aeusseren sind ::before und ::after. Beim Drueberfahren gehen sie
   leicht auseinander, offen werden die aeusseren zum X. */
.burger { position: relative; display: block; width: 20px; height: 1.5px; border-radius: 2px; background: var(--ink); }
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
}
.burger::before { transform: translateY(-5px); }
.burger::after { transform: translateY(5px); }
@media (hover: hover) {
  .nav-toggle:hover .burger::before { transform: translateY(-7px); }
  .nav-toggle:hover .burger::after { transform: translateY(7px); }
}
@media (prefers-reduced-motion: no-preference) {
  .burger, .burger::before, .burger::after {
    transition: transform 150ms ease-out, background-color 150ms ease-out;
  }
}
.nav-toggle[aria-expanded="true"] .burger { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { transform: rotate(-45deg); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links > li > a {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.82;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links > li > a { transition: opacity var(--dur-hover) var(--ease-hover); }
  .nav-links > li > a:hover { opacity: 1; text-decoration: none; }
}
.nav-links > li > a[aria-current="page"] { font-weight: 600; opacity: 1; }

/* ---- Aufklappfeld unter "Angebote" ----
   Nur am Rechner. Oeffnet sich per Hover und per Tastaturfokus
   (focus-within), ohne Skript. Die Flaeche verschmilzt mit der Pille:
   sie liegt als Kind des Listenpunkts hinter dem Leisteninhalt, deckt
   die Pille ab und waechst nach unten. Solange sie offen ist, blendet
   die Pillenflaeche aus (:has), sonst laegen zwei Glasschichten
   uebereinander und das obere Band waere sichtbar dichter. Ohne :has
   bleibt die Pille stehen, das Feld funktioniert trotzdem. */

@media (min-width: 761px) {
  /* Pille nur so breit wie ihr Inhalt, wie bei hyperfocus.cc. */
  .nav-inner { width: auto; gap: 48px; padding: 0 24px; }
  .nav-links > li { height: 56px; display: flex; align-items: center; }
  
  
  
  /* Fuenf Kacheln: drei oben, zwei unten mittig. Sechs Spalten, jede
     Kachel nimmt zwei, die vierte beginnt in Spalte zwei. */
  
  
  
  
  
  
  
  
  @media (prefers-reduced-motion: no-preference) {
    .nav-inner::before { transition: opacity var(--dur-ui) var(--ease-out); }
    
    
  }
}

/* Mobil: Vollbild-Menue nach Vorbild hyperfocus.cc.
   Milchglas ueber die ganze Seite, Links gross und mittig, die Pille
   bleibt oben stehen. Die Pille ist nur so breit wie Schriftzug und
   Menueknopf und steht mittig.
   Das Menue liegt hinter der Pille (z-index unter dem Pseudo-Element),
   der Zustand haengt an .nav-offen, das site.js zusammen mit
   aria-expanded setzt. Es blendet ein, danach erscheinen die Punkte
   gestaffelt. */
@media (max-width: 760px) {
  /* Hoehe im Verhaeltnis zur Schrift wie bei hyperfocus (etwa 2,8 x Versalhoehe),
     der Knopf behaelt seine 44px Tippflaeche. */
  .nav-inner { width: auto; height: 48px; padding: 0 2px 0 20px; gap: 8px; }
  .wordmark { min-height: 44px; }
  .wortzug { font-size: 21px; }
  .nav-toggle { display: flex; }
  /* Vorschaltseite: ohne Menueknopf rechts so viel Luft wie links. */
  .nav-inner.nur-marke { padding: 0 20px; }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 110px 20px 40px;
    /* hyperfocus nimmt rgba(183,183,183,0.32). Ueber den dunklen Kapseln
       waere dunkle Schrift darauf kaum lesbar, deshalb heller und dichter. */
    background: var(--menue-glas, rgba(214, 214, 216, 0.6));
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* geschlossen */
    visibility: hidden;
    opacity: 0;
  }
  .nav-offen .nav-links {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }

  .nav-links > li > a {
    display: block;
    padding: 12px 0;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: var(--ink);
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nav-links {
      transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
    }
    .nav-offen .nav-links {
      transition: opacity 250ms var(--ease-out), visibility 0s;
    }

    /* Beim Oeffnen versetzt herein, beim Schliessen alle zugleich und schnell weg. */
    .nav-links li {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 90ms linear, transform 90ms var(--ease-out);
    }
    .nav-offen .nav-links li {
      opacity: 1;
      transform: none;
      transition:
        opacity 220ms var(--ease-out) calc(110ms + var(--i) * 45ms),
        transform 220ms var(--ease-out) calc(110ms + var(--i) * 45ms);
    }
  }
}

/* ============================================================
   Layout: Kapseln
   Jede Sektion ist eine abgerundete Kapsel mit Abstand zum
   Fensterrand, auf dem Seitengrund. Keine Trennlinien, jede
   Kapsel ist ihre eigene Buehne. Drei Farben, nicht mehr:
   weiss als Regelfall, dunkel fuer die zwei Aussagen mit dem
   meisten Gewicht, blau genau einmal fuer den KI-Check.
   ============================================================ */
.kapseln {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--kapsel-gap);
  padding: var(--kapsel-gap) var(--kapsel-gap) 0;
}

.kapsel {
  background: var(--surface);
  color: var(--ink);
  border-radius: calc(var(--radius-kapsel) * var(--ecke, 1));
  padding: 110px clamp(24px, 8.4vw, 120px) 120px;
}
.kapsel-dunkel {
  background: var(--kapsel-dunkel);
  --ink: #f5f5f7;
  --ink-muted: #98989d;
  --ink-faint: #98989d;
  --ink-muted-sunken: #98989d;
  --accent: #2997ff;
  --accent-strong: #2997ff;
  --accent-tint: rgba(41, 151, 255, 0.16);
  --rule: rgba(255, 255, 255, 0.14);
}

/* Der Inhalt bleibt in .page zentriert, den Seitenabstand bringt die Kapsel mit. */
.page { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.kapsel .page { padding-left: 0; padding-right: 0; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Kopf einer Unterseite: Ueberschrift und Lede frei auf dem Seitengrund,
   mit Luft fuer die schwebende Pille. Der dunkle Grund bleibt der Startseite. */
.kopf { padding: 150px 0 40px; }
.kopf .lede { margin-bottom: 0; }
.kopf .page:not(.narrow) { text-align: center; }
.kopf .page:not(.narrow) .lede { margin-left: auto; margin-right: auto; }

/* Kontakt: links lesen, rechts tun. */
.kontakt { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; padding-top: 150px; }
.kontakt .lede { margin-bottom: 40px; max-width: 34ch; }
.kontakt .eyebrow { margin-bottom: 6px; }

.field-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Ueber mich: Portrait frei neben dem Text, Arbeitsweise als drei Karten. */
.ueber { display: grid; grid-template-columns: 1fr; gap: 72px; align-items: start; padding-top: 150px; width: 100%; }

.ueber h1 { font-size: clamp(40px, 5vw, 56px); }

/* Wechselzeile im Hero: vier Nutzen, alle 2,6 s ein neuer. Reines CSS:
   vier Spans in derselben Rasterzelle, versetzt animiert. Das alte Wort
   blendet in 150 ms mit Unschaerfe aus, das neue kommt in 600 ms aus 60 %
   Hoehe. Bei reduzierter Bewegung steht der ganze Satz, den auch Vorleser
   bekommen. Die Kurve im Keyframe ist --ease-out als Zahl, weil var()
   dort nicht ueberall greift. */
.wechsel { display: inline-grid; }
.wechsel > span { grid-area: 1 / 1; opacity: 0; animation: wechsel 10.4s infinite; }
.wechsel > span:nth-child(2) { animation-delay: 2.6s; }
.wechsel > span:nth-child(3) { animation-delay: 5.2s; }
.wechsel > span:nth-child(4) { animation-delay: 7.8s; }
.wechsel-statisch { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes wechsel {
  0% { opacity: 0; transform: translateY(60%); filter: blur(4px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  5.77%, 25% { opacity: 1; transform: none; filter: none; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  26.44%, 100% { opacity: 0; transform: none; filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .wechsel { display: none; }
  .wechsel-statisch { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

@media (max-width: 760px) {
  .kapsel { padding: 56px 24px; }
  .kopf { padding: 110px 0 24px; }
  .kontakt { grid-template-columns: 1fr; gap: 40px; padding-top: 110px; }
  
  .field-reihe { grid-template-columns: 1fr; gap: 0; }
  .ueber{ grid-template-columns: 1fr; gap: 36px; padding-top: 110px; }
  
  
  
}

/* ============================================================
   Typografie
   ============================================================ */
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
  margin: 0 0 16px;
}

h1 {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  text-wrap: balance;
}

h2 {
  font-weight: 700;
  font-size: clamp(30px, 3.9vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0 0 8px;
}

.lede {
  font-size: clamp(18px, 2.7vw, 26px);
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.42;
  margin: 0 0 32px;
  max-width: 40ch;
  text-wrap: pretty;
}

.section-head { margin-bottom: 40px; max-width: 56ch; }
.section-sub { color: var(--ink-muted); font-size: 19px; margin: 0; max-width: 54ch; }

p { text-wrap: pretty; }
.prose p { color: var(--ink-muted); margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Die grosse Aussage, frei auf dem Seitengrund. Der zweite Halbsatz gedaempft. */
.statement {
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--ink-muted); font-weight: 500; }

@media (max-width: 760px) {
  .statement { font-size: 30px; line-height: 1.12; letter-spacing: -0.03em; }
  .frei { padding: 72px 20px 60px; }
  .section-head { margin-bottom: 24px; }
  .section-sub { font-size: 16px; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 590;
  letter-spacing: -0.005em;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: 980px;
  white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-hover),
              transform var(--dur-press) var(--ease-out),
              opacity var(--dur-hover) var(--ease-hover);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.975); }

.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-fill-hover); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-secondary { background: transparent; color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.btn-secondary:hover { background: var(--accent-tint); }

/* Etwas groesser als der Standard: der eine Knopf im Hero und im Abschluss. */
.btn-gross { padding: 16px 30px; font-size: 18px; }

.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Am Telefon stapeln sich die Knoepfe, behalten aber ihre Inhaltsbreite.
   Randlos gezogene Pillen lesen sich als Banner, nicht als Knopf.
   .btn-block bleibt davon unberuehrt: Absendeknoepfe in Formularen
   sollen die volle Breite haben. */
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: flex-start; }
  .frei .btn-row { align-items: center; }
}
@media (max-width: 760px) {
  .btn-gross { padding: 15px 28px; font-size: 17px; }
}

/* ============================================================
   Cards und Kacheln
   Karten liegen in Kapseln und tragen deshalb keinen Schatten:
   Schatten in Schatten wirkt unruhig. Vertiefte Flaeche statt
   Erhoehung, Eingaben darin auf Weiss.
   ============================================================ */
.card {
  background: var(--bg);
  border-radius: calc(20px * var(--ecke, 1));
  padding: 30px 32px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 14px;
}

@media (max-width: 760px) {
  .card { padding: 26px 24px; }
}

/* ============================================================
   Formular
   ============================================================ */
.field { margin: 0 0 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 0 6px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface-sunken);
  border: 2px solid transparent;
  border-radius: calc(12px * var(--ecke, 1));
  padding: 12px 14px;
  line-height: 1.4;
}
.card .field input,
.card .field textarea,
.card .field select { background: var(--surface); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted-sunken); opacity: 1; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--accent); outline: none; }
.field textarea { resize: vertical; min-height: 110px; }
.field .hint { display: block; font-size: 13px; color: var(--ink-muted); margin: 6px 0 0; }
.field .error { display: none; font-size: 13px; color: #b3261e; margin: 6px 0 0; font-weight: 500; }
:root[data-theme="dark"] .field .error { color: #ff6961; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field .error { color: #ff6961; }
}
.field.invalid input,
.field.invalid textarea { border-color: #b3261e; }
.field.invalid .error { display: block; }

.form-note { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; }
/* Koederfeld gegen Bots: aus dem Bild geschoben, nicht display:none,
   damit einfache Bots es trotzdem ausfuellen. */
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Bestaetigung nach dem Senden, an der Stelle des Formulars. */
.form-danke { padding: 8px 0; outline: none; }
.form-danke-titel { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.form-danke p:not(.form-danke-titel) { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
/* Terminbuchung (Noah, 27.10.2026): dunkle Flaeche mit einem Knopf, der
   Cal.com in einem neuen Tab oeffnet. Farben wie .kapsel-dunkel, damit sie
   auch im Dunkelmodus dunkel bleibt. */
.termin-aufruf {
  --ink: #f5f5f7;
  --ink-muted: #98989d;
  padding: clamp(56px, 9vw, 96px) clamp(24px, 6vw, 64px);
  border-radius: 16px;
  background: var(--kapsel-dunkel);
  color: var(--ink);
  text-align: center;
}
.termin-titel { margin: 0; font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.termin-text { margin: 18px auto 0; max-width: 34em; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.termin-knopf { margin: 32px 0 0; }
.termin-hinweis { margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

/* ============================================================
   Footer: ausserhalb der Kapseln, direkt auf dem Seitengrund,
   schlicht und einzeilig.
   ============================================================ */
footer.site { padding: 28px 24px 20px; }
footer.site .page {
  max-width: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-muted);
}
footer.site p { margin: 0; }
footer.site ul { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; list-style: none; }
footer.site a { color: var(--ink-muted); }
footer.site a:hover { color: var(--ink); }

/* ============================================================
   Scroll-Reveal
   Jeder Block einer Kapsel kommt beim Hereinscrollen von unten
   aus der Deckkraft: Textblock, Fensterstapel, jede Karte, jede
   Spalte. Eine Geste, gleichmaessig auf allen Kapseln.

   Zwei Wege zum selben Bild. Kann der Browser scrollgekoppelte
   Animationen, haengt der Verlauf am Scrollweg (unten). Sonst setzt
   site.js pro Block die Klasse .in, sobald er ins Bild kommt, und
   der Uebergang hier laeuft einmal ab. Die Liste der Bloecke steht
   deshalb auch in site.js; beide Stellen gemeinsam pflegen.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal .section-head,
  .reveal .grid > *:not(.grid),
  .reveal .kontakt > *,
  .reveal .ueber > *,
  .reveal > .eyebrow,
  .reveal > .statement,
  .reveal > .section-sub,
  .reveal > .btn-row,
  .reveal .ablauf > *,
  .reveal > .page > .card,
  .reveal .hell-teil {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  }
  .reveal .in { opacity: 1; transform: none; }
  /* Nachbarn in einer Reihe kommen leicht versetzt. */
  .reveal .in:nth-child(2) { transition-delay: 70ms; }
  .reveal .in:nth-child(3) { transition-delay: 140ms; }
  .reveal .in:nth-child(4) { transition-delay: 210ms; }

  /* ---- Scrollgekoppelt nach Apple-Vorbild ----
     Die Deckkraft haengt am Scrollfortschritt: gedimmt, solange der
     Block unten im Bild steht, voll, sobald er die Lesezone erreicht,
     und beim Zurueckscrollen wieder zurueck. Laeuft ausserhalb des
     Hauptthreads, ohne Scroll-Listener. */
  @supports (animation-timeline: view()) {
  .reveal .section-head,
  .reveal .grid > *:not(.grid),
  .reveal .kontakt > *,
  .reveal .ueber > *,
  .reveal > .eyebrow,
  .reveal > .statement,
  .reveal > .section-sub,
  .reveal > .btn-row,
  .reveal .ablauf > *,
  .reveal > .page > .card,
  .reveal .hell-teil {
      opacity: 1;
      transform: none;
      transition: none;
      transition-delay: 0s;
      animation: scroll-fade linear both;
      animation-timeline: view();
      /* Fertig, sobald der Block zu 40 Prozent im Bild steht. Alles
         danach saehe aus, als sei die Seite unfertig statt gestaltet. */
      animation-range: entry 0% entry 40%;
    }
  }

  /* Ohne Unschaerfe: Safari blieb bei scrollgekoppeltem filter auf halbem
     Weg haengen, und Bloecke standen verschwommen da (24.10.2026). */
  @keyframes scroll-fade {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }

  /* Inhaltswechsel an Ort und Stelle, z. B. die Schritte des Checks.
     Fuer kuenftige Seiten mitverwenden statt neu zu bauen. */
  .swap { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
  .swap[data-anim="in"] { opacity: 0; transform: translateY(6px); }
}

/* Reduzierte Bewegung heisst weniger und sanfter, nicht gar nichts:
   Farb- und Deckkraftwechsel bleiben, Bewegung im Raum faellt weg. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .option:active { transform: none; }
}

/* ---- Rechtstexte ---- */
.legal { max-width: 720px; }
.legal h2 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; margin: 44px 0 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 17px; margin: 26px 0 6px; }
.legal p, .legal li { color: var(--ink-muted); font-size: 17px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 0 0 6px; }
.legal address { font-style: normal; color: var(--ink-muted); font-size: 17px; margin: 0 0 14px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .stand { font-size: 13px; color: var(--ink-faint); margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* ---- Auswertungsstufen des KI-Checks ---- */
:root {
  --tier-a: #8a5420; --tier-a-tint: rgba(255, 159, 10, 0.14);
  --tier-b: #6b5000; --tier-b-tint: rgba(255, 204, 0, 0.16);
  --tier-c: #136b28; --tier-c-tint: rgba(52, 199, 89, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tier-a: #ffa42b; --tier-a-tint: rgba(255, 159, 10, 0.16);
    --tier-b: #ffd60a; --tier-b-tint: rgba(255, 204, 0, 0.18);
    --tier-c: #30d158; --tier-c-tint: rgba(48, 209, 88, 0.18);
  }
}
:root[data-theme="dark"] {
  --tier-a: #ffa42b; --tier-a-tint: rgba(255, 159, 10, 0.16);
  --tier-b: #ffd60a; --tier-b-tint: rgba(255, 204, 0, 0.18);
  --tier-c: #30d158; --tier-c-tint: rgba(48, 209, 88, 0.18);
}

/* ============================================================
   Browser-Oberflaechen, die der Browser sonst selbst einfaerbt.
   ============================================================ */
::selection { background: var(--accent-tint); color: var(--ink); }
/* Die Seite laeuft fest im hellen Modus, siehe data-theme am html-Element. */
:root { accent-color: var(--accent); color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
input, textarea { caret-color: var(--accent); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }

@supports (scrollbar-color: auto) {
  :root { scrollbar-color: var(--ink-faint) transparent; }
}

/* ============================================================
   Editorial-Bausteine
   ============================================================ */

/* Ein Bild braucht keine Erhoehung, es ist selbst ein Objekt. */

/* ============================================================
   Startseite: Bausteine der Kapseln
   ============================================================ */

/* ---- Freie Abschnitte auf dem Seitengrund ----
   Aussagen stehen ohne Kapsel, zentriert, wie die Zwischentitel bei Craft. */
.frei {
  padding: 120px 24px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kapseln > .frei:only-child, .hell-seite > .frei:only-child { flex: 1; justify-content: center; }
/* Kleine Zeile ueber zentrierten Aussagen (Danke, 404), wie auf der Startseite. */
.frei > .seite-zeile { margin-bottom: 16px; }
.frei > .statement { margin-bottom: 22px; }
.frei > .section-sub { font-size: 19px; max-width: 52ch; margin: 0 auto; }
.frei > .ablauf { width: 100%; max-width: 1080px; text-align: left; margin-top: 56px; }
.frei > .ablauf-2 { max-width: 880px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.frei > .btn-row { justify-content: center; margin-top: 36px; }
.frei > .ablauf-2 h3 { font-size: 22px; }
.frei > .ablauf-2 p { font-size: 16px; }
.frei > .eyebrow { margin-bottom: 20px; }

/* ---- Leistungen im Brief-Layout ----
   Die vier Leistungen untereinander in der schmalen Spalte, jede mit Nummer
   ueber einer feinen Linie, Ueberschrift und kurzem Text. */
.leistungen-liste { margin: 56px 0 0; padding: 0; list-style: none; }
.leistung { padding: 28px 0 32px; border-top: 1px solid var(--rule); scroll-margin-top: 120px; }
.leistung-nr { margin: 0; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.leistung h2, .leistung h3 { margin: 10px 0 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.leistung p:not([class]) { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
/* "Mehr erfahren" fuehrt auf die Unterseite der Leistung. */
.leistung-mehr { margin: 18px 0 0; }
.mehr-pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 980px;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  transition: background-color var(--dur-hover) var(--ease-out);
}
.mehr-pille svg { width: 14px; height: 14px; transition: transform var(--dur-ui) var(--ease-out); }
.mehr-pille:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .mehr-pille:hover { background: var(--rand-stark); }
  .mehr-pille:hover svg { transform: translateX(3px); }
}

/* Unterseiten der Leistungen: Zwischenueberschriften, Listen, Knoepfe. */
.ueber-zeile a { color: inherit; }
.leistung-inhalt { margin-top: 24px; }
.leistung-unter { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.leistung-absatz { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.leistung-liste { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.leistung-liste li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
.leistung-liste li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.leistung-liste strong { font-weight: 600; color: var(--ink); }
/* Themenueberblick auf implementierung.html (Noah, 27.10.2026): zweispaltig. */
.themen-titel { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.seite-karte > .themen-liste { max-width: none; margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
@media (max-width: 760px) { .seite-karte > .themen-liste { grid-template-columns: 1fr; } }
.themen-fuss { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
.leistung-knoepfe { margin: 48px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.dienst-zusatz { margin: 14px 0 0; font-size: 14px; font-weight: 500; color: var(--accent-strong); text-wrap: balance; }
.dienst-zusatz span { white-space: nowrap; }

/* ---- Hairline-Figuren (assets/hairline) ----
   Feine Strichfiguren neben einer Liste der Leistungsseiten (Variante D,
   Noah 24.10.2026) und auf der 404-Seite.
   Groesse, Seitenverhaeltnis und Strichfarben setzt die Engine selbst, hier
   nur der Platz und die Flaechenfarbe: Die Platten
   sind mit der Farbe des Untergrunds gefuellt, damit sie verdecken, was
   hinter ihnen liegt. */
.figur { width: 100%; }
.figur-neben { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: center; margin-top: 4px; }
.figur-neben .figur { margin: -16px -24px -16px 0; }
@media (max-width: 760px) {
  .figur-neben { grid-template-columns: 1fr; }
  .figur-neben .figur { max-width: 320px; margin: 0 auto; }
}
.frei > .figur { max-width: 360px; margin: -40px auto 0; }
.figur[data-hairline] { --hl-plate: var(--surface); }
.frei > .figur[data-hairline] { --hl-plate: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .figur[data-hairline] { --hl-hi: #d0d6e0; --hl-edge: #5b5d64; --hl-mid: #3e3e44; --hl-lo: #29292d; }
}
:root[data-theme="dark"] .figur[data-hairline] { --hl-hi: #d0d6e0; --hl-edge: #5b5d64; --hl-mid: #3e3e44; --hl-lo: #29292d; }

/* ---- Ueber mich als kurzer Brief ----
   Weisse Kapsel mit schmaler Textspalte, unten ein Gruss mit Schriftzug,
   danach ein dunkler Aufruf mit zwei Knoepfen (Entwurf von Noah). */
.ueber-brief { padding-top: 120px; padding-bottom: 120px; }
.ueber-spalte { max-width: 600px; margin: 0 auto; }
.ueber-zeile { margin: 0; font-size: 15px; font-weight: 500; color: var(--accent-strong); }
.ueber-brief h1, .ueber-brief .ueber-titel { margin: 18px 0 0; font-size: clamp(40px, 5vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; }
.ueber-lead { margin: 24px 0 0; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; color: var(--ink); }
.ueber-prose { margin-top: 56px; }
.ueber-prose p { margin: 0 0 20px; font-size: 17px; line-height: 1.65; color: var(--ink-muted); }
.ueber-gruss { margin-top: 48px; }
.ueber-gruss p { margin: 0; font-size: 14px; color: var(--ink-muted); }
.ueber-gruss .ueber-marke { margin: 10px 0 8px; font-size: 26px; color: var(--ink); }
.ueber-direkt { margin: 14px 0 0; font-size: 16px; color: var(--ink-muted); }
.ueber-spalte .anfrage-form { margin-top: 56px; }
.ueber-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
.ueber-cta h2 { margin: 0; max-width: 24ch; font-size: clamp(26px, 2.8vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.ueber-cta p { margin: 14px 0 0; font-size: 16px; color: var(--ink-muted); }
.ueber-cta .ueber-cta-knoepfe { flex: none; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ueber-cta-zweit { justify-content: center; color: #f5f5f7; }
@media (max-width: 760px) {
  .ueber-brief { padding-top: 96px; padding-bottom: 80px; }
  .ueber-cta { flex-direction: column; align-items: flex-start; }
  .ueber-cta .ueber-cta-knoepfe { align-items: stretch; width: 100%; }
}

/* Anfrageformular (Leistungen und Kontakt): schlichte Felder mit nur einer
   Linie darunter (Vorlage von Noah). */
.anfrage-form .field { margin-bottom: 28px; }
.anfrage-form .field-reihe { gap: 24px; }
.anfrage-form .field label { margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.anfrage-form .field input,
.anfrage-form .field textarea,
.anfrage-form .field select { padding: 8px 0; border: 0; border-bottom: 1px solid var(--rand-stark); border-radius: 0; background: transparent; }
/* Fokus deutlich: Linie blau und doppelt so dick. Die zweite Haelfte ist ein
   Schatten, damit beim Fokussieren nichts um einen Pixel springt. */
.anfrage-form .field input:focus,
.anfrage-form .field textarea:focus,
.anfrage-form .field select:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.anfrage-form .field.invalid input { border-bottom-color: #b3261e; }
.anfrage-form .field textarea { min-height: 72px; }
.anfrage-form .field select { appearance: none; -webkit-appearance: none; padding-right: 24px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 2px center / 14px no-repeat; }
.anfrage-form .btn { margin-top: 4px; }

/* ---- Angebots-Kapseln: schmal, getoent, Bild und Text im Wechsel ----
   Drei leichte Toene neben Weiss, Dunkel und Blau, entschieden am
   06.09.2026 nach dem Vorbild craft.do. */
.kapsel-schmal { width: min(880px, 100%); margin-left: auto; margin-right: auto; padding: 56px; }

.kapsel-blau-hell { background: var(--tint-blau); }
.kapsel-sand { background: var(--tint-sand); }
.kapsel-mint { background: var(--tint-mint); }
/* Auf den Toenen reicht #6e6e73 nicht fuer WCAG AA (4,45:1), wie auf
   --surface-sunken. Gilt auch fuer die getoenten Karten im KI-Check. */
.kapsel-blau-hell,
.kapsel-sand,
.kapsel-mint,
.empfehlung { --ink-muted: var(--ink-muted-sunken); --ink-faint: var(--ink-muted-sunken); }

.btn-dunkel { background: var(--ink); color: var(--surface); }
.btn-dunkel:hover { opacity: 0.85; }

/* Feste Farben: Fenster und Karten bleiben hell, egal welche Kapsel. */

.karte {
  border-radius: calc(14px * var(--ecke, 1));
  overflow: hidden;
  background: #ffffff;
  color: #1d1d1f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 48px -16px rgba(0, 0, 0, 0.22);
}

/* Rechts derselbe Platz wie die Punkte links, damit der Titel mittig steht. */

/* Kundenseite im Fenster: Bild in Fensterbreite, am Telefon die Telefon-Ansicht. */

/* Karten: Google-Profil und kleine Zettel */
.karte { padding: 22px 22px 24px; }

.karte-sub { font-size: 13px; color: #6e6e73; margin: 0 0 12px; }

.karte-label-blau { color: #0058b0; }
.karte-text { font-size: 12px; line-height: 1.5; margin: 0; }

.karte-liste-icons { gap: 8px; font-size: 13px; }
.karte-liste-icons li { display: flex; align-items: center; gap: 10px; }
.karte-liste-icons svg { width: 16px; height: 16px; color: #6e6e73; }
.sterne { display: flex; align-items: center; gap: 2px; margin: 0 0 16px; font-size: 12px; color: #6e6e73; }
.sterne svg { width: 14px; height: 14px; }
.sterne span { margin-left: 8px; }

/* ---- Ablauf: vier Spalten unter einer Haarlinie ---- */
.ablauf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ablauf > li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 0 0;
  border-top: 1px solid var(--rule);
}
.ablauf-nr { font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.ablauf h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.ablauf p { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* ---- Fragen: Ueberschrift links, Liste rechts ----
   Natives details/summary: Tastatur und Screenreader kommen ohne
   Skript zurecht, der Fokusring steht bei der globalen Regel oben.
   Das Plus dreht sich zum Kreuz, die Antwort blendet ein. */

.faq { margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 18px 12px;
  border-radius: calc(12px * var(--ecke, 1));
  cursor: pointer;
  list-style: none;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:active { background: var(--surface-sunken); }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { background: var(--surface); }
}
.faq-icon { flex: none; width: 20px; height: 20px; color: var(--ink-muted); transition: transform 300ms var(--ease-out); }
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq .prose { padding: 0 12px 22px; }
.faq .prose p { font-size: 16px; line-height: 1.6; max-width: 620px; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .prose { animation: faq-auf 200ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
  .faq details[open] .prose { animation: panel-blende 150ms linear; }
}
@keyframes faq-auf { from { opacity: 0; transform: translateY(6px); } }

/* Bricht eine Ueberschrift um, starten die Texte der Nachbarn trotzdem
   auf derselben Hoehe: die drei Zeilen jeder Spalte haengen am Elternraster. */
@media (min-width: 1001px) {
  @supports (grid-template-rows: subgrid) {
    .ablauf { row-gap: 0; }
    .ablauf > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; }
  }
}
@media (max-width: 1000px) {
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kapsel-schmal { padding: 56px 24px; }
  /* Am Telefon erst der Text, dann der Stapel. */
  
  
  /* Stapel mittig: das hintere Objekt schmaler, das vordere breiter und so
     weit darunter, dass in Ruhe alle Zeilen des hinteren lesbar bleiben.
     Beim Scrollen klebt das hintere unter der Leiste, solange die Zelle
     reicht, und das vordere faehrt darueber. Zurueckgescrollt steht der
     Stapel wieder wie in Ruhe. Die Versaetze haengen an der Hoehe des
     hinteren Objekts bei 390 px, gemessen am 06.09.2026. */
  
  
  /* Website und Google: die vordere Karte ist viel kleiner als das Fenster
     dahinter, das Kleben liefe nur wenige Pixel und saehe nach Zucken aus.
     Diese zwei Stapel stehen deshalb ruhig, mit Einblenden. */
  
  
  
  
  
  
  
  
  
  
  
  .ablauf, .frei > .ablauf-2 { grid-template-columns: 1fr; }
}

/* Website und Betreuung laufen anders als das Schreibtisch-Paket: nicht
   einmalig, sondern monatlich weiter. Das steht als Satz im Kartenfluss,
   nicht als Status-Badge. */

/* Sprungziele aus dem Aufklappfeld: Luft fuer die schwebende Pille. */
.card[id]{ scroll-margin-top: 96px; }

/* ---- Formular fuer Paper und Unterlagen ---- */
.field-check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; }
.field-check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
.field-check label { font-size: 15px; color: var(--ink-muted); line-height: 1.45; }
.field-check.invalid label { color: #b3261e; }
:root[data-theme="dark"] .field-check.invalid label { color: #ff6961; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-check.invalid label { color: #ff6961; }
}

/* Der zweite Weg unter dem Formular. */
.lead-alt { font-size: 15px; color: var(--ink-muted); text-align: center; margin: 22px 0 0; }

/* ============================================================
   Buchungsseite (buchung.html)
   Unverlinkt, noindex, alle Preise netto. Dieselben Kapseln wie
   die uebrige Seite, dazu Preiskarten, Stufen, Listen und die
   eine blaue Kapsel am Ende. Nichts davon wird anderswo benutzt.
   ============================================================ */
/* Ankersprung landet nicht unter der schwebenden Pille. Gilt ueberall,
   schadet nirgends. */
html { scroll-padding-top: 96px; }

/* Reduzierte Leiste: Wortmarke links, ein Textlink rechts, kein Menue. */
.nav-frage { font-size: 15px; color: var(--ink-muted); white-space: nowrap; }
.nav-frage:hover { color: var(--ink); text-decoration: none; }

/* Flacher Hero, linksbuendig, keine Vollhoehe. */
.kapsel-flach { padding-top: 150px; padding-bottom: 80px; }
.kapsel-flach h1 { font-size: clamp(38px, 5vw, 56px); margin: 0 0 20px; max-width: 44ch; }
.kapsel-flach .lede { font-size: clamp(18px, 2vw, 21px); margin: 0 0 20px; max-width: 44ch; }
.hinweiszeile { font-size: 15px; color: var(--ink-muted); margin: 0 0 28px; max-width: 44ch; }
.ankerleiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anker-pille {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 980px;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-hover);
}
.anker-pille:hover { background: var(--bg); text-decoration: none; }

/* Angebotskapsel: Ueberschrift, Absatz, Preiskarte oder Stufen, Listen, Knopf. */
.buchung-angebot h2 { font-size: clamp(28px, 3vw, 34px); letter-spacing: -0.025em; margin: 0 0 16px; }
.beschreibung { font-size: 18px; line-height: 1.5; margin: 0 0 32px; max-width: 62ch; }
.preiskarte { background: var(--bg); border-radius: calc(20px * var(--ecke, 1)); padding: 26px 28px 24px; }
.preiskarte-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 19px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 14px; }
.preis { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.preis strong { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.preis-einheit { font-size: 15px; color: var(--ink-muted); }
.preis-netto { font-size: 13px; color: var(--ink-muted); margin: 0; }
.stufe .preis-netto { margin-bottom: 16px; }
.preis-zusatz { font-size: 15px; color: var(--ink-muted); margin: 14px 0 0; }
.stufen { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.stufen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stufen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Die einzige Pille der Seite: Regelfall an der Betreuungsstufe Basis. */
.pille {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 980px;
  background: var(--rule);
  color: var(--ink-muted-sunken);
}
.listen-titel { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); margin: 24px 0 10px; }
.leistungen { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.leistungen li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.leistungen li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-tint) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230058b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.leistungen-nicht li::before {
  background: var(--rule) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.hinweis { background: var(--bg); border-radius: calc(16px * var(--ecke, 1)); padding: 18px 20px; font-size: 16px; line-height: 1.5; margin: 24px 0 0; }
.hinweis-rand { background: transparent; border: 1px solid var(--rule); }
/* Buchungsseite: kommt jemand mit Anker aus dem Handout (#schreibtisch-paket,
   #betreuung usw.), sieht er nur sein Paket. Ohne Anker bleibt die ganze Seite.
   Reines CSS über :target; Browser ohne :has() zeigen wie bisher alles. */
main:has(.buchung-angebot:target, .buchung-angebot :target) .ankerleiste,
main:has(.buchung-angebot:target, .buchung-angebot :target) .buchung-angebot:not(:target):not(:has(:target)) { display: none; }
.buchung-cta { margin: 32px 0 0; }
.buchung-hinweis { font-size: 14px; color: var(--ink-muted); margin: 12px 0 0; }
.verweis { font-size: 15px; margin: 20px 0 0; }
.kapsel-teil { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rule); }
.ablauf-fuss { font-size: 15px; color: var(--ink-muted); margin: 40px 0 0; }

/* Was in jedem Fall gilt: vier Kaesten im Zweierraster. */
.kaesten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kasten { background: var(--bg); border-radius: calc(20px * var(--ecke, 1)); padding: 26px 28px; }
.kasten h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 10px; }
.kasten p { font-size: 16px; line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* Die eine blaue Kapsel am Seitenende. Knopftext fest, die Kapsel ist in
   beiden Modi dasselbe Blau. */
.kapsel-blau {
  background: var(--accent-fill);
  --ink: #ffffff;
  /* Volles Weiss: auf #0071e3 sind das 4,7:1, jede Transparenz faellt unter AA. */
  --ink-muted: #ffffff;
  --ink-faint: #ffffff;
  --accent: #ffffff;
  --accent-strong: #ffffff;
  --rule: rgba(255, 255, 255, 0.25);
}
.kapsel-mitte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kapsel-mitte h2 { font-size: clamp(32px, 4vw, 44px); margin: 0 0 16px; }
.kapsel-mitte .lede { font-size: 19px; margin: 0 0 32px; max-width: 44ch; }
.btn-weiss { background: #ffffff; color: #0058b0; }
.btn-weiss:hover { background: #f5f5f7; }

@media (max-width: 760px) {
  .nav-frage { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  .anker-pille { height: 44px; }
  footer.site ul { gap: 0 22px; }
  footer.site a { display: inline-block; padding: 12px 0; }
  .kapsel-flach { padding: 110px 24px 56px; }
  .stufen-2, .stufen-3, .kaesten { grid-template-columns: 1fr; }
  .preis strong { font-size: 34px; }
  .kapsel-teil { margin-top: 36px; padding-top: 36px; }
}

/* ============================================================
   Startseite hell (Bau-Briefing vom 10.10.2026)
   Alle Regeln ab hier haengen an Klassen, die nur index.html
   benutzt. Die anderen Seiten bleiben davon unberuehrt.
   ============================================================ */

/* ---- Glas: Leiste auf allen Seiten, Etikett im Hero, Demo-Fenster ----
   Nie Glas auf Glas. Ohne Blur, bei reduzierter Transparenz und bei
   erhoehtem Kontrast wird daraus eine feste Flaeche. */
.glas {
  background: var(--glas-bg);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schatten);
}
/* Leiste nach Vorbild hyperfocus.cc: duennes graues Glas, kein Rand,
   kein Schatten. Der Inhalt dahinter bleibt als Schemen sichtbar. */
.nav-inner::before {
  background: var(--nav-glas, rgba(198, 198, 198, 0.2));
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas, .nav-inner::before { background: var(--surface); }
}
@media (max-width: 760px) and (prefers-reduced-transparency: reduce), (max-width: 760px) and (prefers-contrast: more) {
  .nav-links { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glas, .nav-inner::before { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glas, .nav-inner::before { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--ink-muted); }
}

/* ---- Seitengeruest der Startseite ---- */
.hell-seite { flex: 1 0 auto; display: flex; flex-direction: column; overflow-x: clip; }
.mono { font-family: var(--mono); }

/* ---- Hero ---- */
.hero-hell { position: relative; padding: 172px 24px 0; text-align: center; }
.hero-inhalt { position: relative; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
/* Schlichte Textzeile ueber der Ueberschrift, keine Pille: oben gibt es
   nur eine Pille, die Leiste. */
.hero-etikett {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-muted);
  text-wrap: balance;
}
.hero-hell h1 {
  margin: 28px 0 0;
  font-size: clamp(46px, 8vw, 108px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-zeile {
  margin: 28px auto 0;
  height: 1.5em;
  overflow: hidden;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (prefers-reduced-motion: reduce) {
  .hero-zeile { height: auto; max-width: 34ch; }
}
.hero-knopf { margin-top: 36px; }
/* Zweiter Weg neben dem Check: direkt einen Termin buchen (Noah, 27.10.2026). */
.hero-termin { margin-left: 20px; }
@media (max-width: 760px) { .hero-termin { display: block; margin: 8px 0 0; } }
/* Vertrauenszeile unter dem einen Knopf, statt eines Ueber-mich-Blocks. */
.hero-vertrauen { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); text-wrap: balance; }
.btn-hero { height: 52px; padding: 0 26px; gap: 10px; font-size: 16px; font-weight: 600; }
.btn .pfeil { flex: none; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-hero:hover { transform: translateY(-1px); }
  .btn-hero:active { transform: scale(0.97); }
}

/* Seitenwechsel: die alte Seite blendet weich in die neue ueber, statt hart
   umzuspringen (wie hyperfocus.cc). Browser ohne View Transitions wechseln
   wie bisher. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
}

/* Eintritt beim Laden: Etikett, h1, Zeile, Knopf, Fenster nacheinander. */
@media (prefers-reduced-motion: no-preference) {
  .eintritt { animation: eintritt 600ms var(--ease-out) both; animation-delay: calc(var(--e, 0) * 60ms); }
}
@keyframes eintritt { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } }
/* Am Telefon ohne Unschaerfe: Safari muesste sie in jedem Bild neu berechnen,
   das ruckelt. Gleichnamige Keyframes spaeter im Blatt ersetzen die oberen. */
@media (max-width: 760px) {
  @keyframes eintritt { from { opacity: 0; transform: translateY(16px); } }
}

/* ---- Demo-Fenster ----
   Das Markup traegt den Endzustand. initDemo() setzt .laeuft und schaltet
   die Phasen ueber Klassen am Panel: ist-ab, ist-druck, ist-denkt,
   ist-schreibt, ist-fertig, ist-markiert, ist-bewertung. Alles, was
   erscheint, haelt seinen Platz schon vorher frei, damit nichts springt:
   der volle Text liegt unsichtbar unter dem getippten. */
.demo-rahmen { position: relative; width: 100%; max-width: 1120px; margin: 72px auto 0; }
.demo { position: relative; border-radius: calc(24px * var(--ecke, 1)); padding: 14px; text-align: left; }
.demo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 14px; }
.demo-ampel { flex: none; display: flex; gap: 8px; width: 72px; }
.demo-ampel i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.demo-ampel i:nth-child(1) { background: #ff5f57; }
.demo-ampel i:nth-child(2) { background: #febc2e; }
.demo-ampel i:nth-child(3) { background: #28c840; }
.demo-mitte { min-width: 0; flex-grow: 1; display: flex; align-items: center; justify-content: center; }

/* Tab-Leiste: kein Glas auf Glas, sondern eine eingelassene Mulde. */
.demo-mulde {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 520px;
  padding: 4px;
  border-radius: 980px;
  background: var(--mulde);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.demo-schieber {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 980px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 260ms var(--ease-out);
}
.ist-tab-1 .demo-schieber { transform: translateX(100%); }
.ist-tab-2 .demo-schieber { transform: translateX(200%); }
.demo-tab {
  position: relative;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.demo-tab[aria-selected="true"] { color: var(--ink); }
.demo-tab:active { transform: scale(0.95); }
.demo-titel { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.demo-mehr {
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-muted);
}
.demo-mehr svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .demo-tab:hover, .demo-mehr:hover { color: var(--ink); text-decoration: none; }
  .demo-mehr svg { transition: transform var(--dur-ui) var(--ease-out); }
  .demo-mehr:hover svg { transform: translateX(3px); }
}
.demo-balken { flex: none; width: 72px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--rule); }
.demo-balken span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.demo:not(.laeuft) .demo-balken span { visibility: hidden; }

/* Telefon: Name des Tabs und drei Punkte statt Mulde. */
.demo-name, .demo-punkte { display: none; }
.demo-punkt { width: 32px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.demo-punkt span {
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: var(--ink);
  opacity: 0.2;
  transform: scaleX(0.364);
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.demo-punkt[aria-selected="true"] span { opacity: 1; transform: none; }
.demo-punkt:active { transform: scale(0.95); }

/* Panels liegen in einer Rasterzelle: das Fenster ist so hoch wie das
   hoechste und aendert beim Tabwechsel seine Hoehe nicht. */
.demo-panele { display: grid; }
.demo-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; border-radius: calc(16px * var(--ecke, 1)); }
.demo-panel.ist-aktiv { visibility: visible; }
.demo-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .demo-panel.tritt-ein { animation: panel-ein 180ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-panel.tritt-ein { animation: panel-blende 150ms linear; }
  .demo-schieber, .demo-punkt span { transition: none; }
}
@keyframes panel-ein { from { opacity: 0; filter: blur(4px); } }
@keyframes panel-blende { from { opacity: 0; } }

.demo-spalten { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; min-height: 380px; }
.demo-eingabe { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: calc(16px * var(--ecke, 1)); background: var(--feld-bg); border: 1px solid var(--rule); }
.demo-ergebnis { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: calc(16px * var(--ecke, 1)); background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.demo-label { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* Getippter und gestreamter Text: voller Text unsichtbar darunter. */
.demo-getippt, .demo-text { margin: 0; display: grid; align-content: start; white-space: pre-line; }
.demo-getippt > *, .demo-text > * { grid-area: 1 / 1; }
.demo-lauf { display: none; }
.demo.laeuft .demo-lauf { display: block; }
.demo.laeuft .demo-voll { color: transparent; }
.demo-getippt { flex-grow: 1; font-family: var(--mono); font-size: 15px; line-height: 1.7; color: var(--ink); }
.ist-ab .demo-getippt { color: var(--ink-muted); }
.demo-marke { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--accent); }
.demo.laeuft .demo-panel:not(.ist-ab) .demo-marke { display: inline-block; animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }

.demo-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-stapel { display: grid; font-size: 13px; color: var(--ink-muted); }
.demo-stapel > * { grid-area: 1 / 1; }
.demo-nachher, .ist-ab .demo-vorher { opacity: 0; }
.ist-ab .demo-nachher { opacity: 1; }
/* Die Taste ist in der Systemschrift gesetzt wie eine Mac-Taste. */
.demo-taste {
  flex: none;
  height: 40px;
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink-muted);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--rule);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
/* Return-Pfeil als SVG: das Zeichen U+21A9 zeichnet iOS als blaues Emoji. */
.demo-enter { width: 14px; height: 14px; flex: none; }
.ist-druck .demo-taste { transform: scale(0.94); background: var(--accent-fill); color: #ffffff; box-shadow: 0 0 0 4px var(--accent-tint); }

.demo-ergebnis-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-schreibt { font-family: var(--mono); font-size: 12px; color: var(--accent); opacity: 0; }
.ist-denkt .demo-schreibt { opacity: 1; }
.demo-koerper { flex-grow: 1; display: grid; }
.demo-koerper > * { grid-area: 1 / 1; }
.demo-warten { margin: 0; place-self: center; font-size: 14px; color: var(--ink-muted); }
.ist-denkt .demo-warten, .ist-schreibt .demo-warten { opacity: 0; }
.demo-text { font-size: 15px; line-height: 1.6; color: var(--ink); opacity: 0; }
.ist-schreibt .demo-text { opacity: 1; }
/* Tab 1: das Ergebnis als Angebotsblatt. Kopfzeilen und Spalten erscheinen
   mit dem Text, die Bezeichnung steht fest, nur die Beschreibung wird getippt. */
.demo-blatt { align-self: start; font-variant-numeric: tabular-nums; }
.demo-blatt-brief, .demo-blatt-titel, .demo-blatt-kopf, .demo-blatt-nr, .demo-blatt-menge, .demo-blatt-name { opacity: 0; transition: opacity 0.4s ease-out; }
.ist-schreibt .demo-blatt-brief, .ist-schreibt .demo-blatt-titel, .ist-schreibt .demo-blatt-kopf, .ist-schreibt .demo-blatt-nr, .ist-schreibt .demo-blatt-name, .ist-schreibt .demo-blatt-menge { opacity: 1; }
.demo-blatt-brief { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ink); }
.demo-blatt-firma { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.demo-blatt-klein { margin: 2px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-muted); }
.demo-blatt-meta { display: grid; gap: 2px; margin: 0; font-size: 11px; line-height: 1.4; text-align: right; white-space: nowrap; }
.demo-blatt-meta div { display: flex; justify-content: flex-end; gap: 8px; }
.demo-blatt-meta dt { color: var(--ink-muted); }
.demo-blatt-meta dd { margin: 0; font-weight: 600; }
.demo-blatt-titel { margin: 0 0 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.demo-blatt-kopf, .demo-blatt-zeile { display: grid; grid-template-columns: 32px minmax(0, 1fr) 84px; gap: 12px; }
.demo-blatt-kopf { padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.demo-blatt-kopf span:last-child, .demo-blatt-menge { text-align: right; }
.demo-blatt-zeile { padding: 12px 0 14px; border-bottom: 1px solid var(--rule); font-size: 14px; }
/* Die Trennlinien erst mit dem Schreiben, vorher steht nur "Wartet auf deine Stichpunkte". */
.demo-blatt-zeile { border-bottom-color: transparent; transition: border-color 0.4s ease-out; }
.ist-schreibt .demo-blatt-zeile { border-bottom-color: var(--rule); }
.demo-blatt-nr, .demo-blatt-menge { font-size: 14px; line-height: 1.6; }
.demo-blatt-nr { color: var(--ink-muted); }
.demo-blatt-menge { font-weight: 600; white-space: nowrap; }
.demo-blatt .demo-text { font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.demo-blatt .demo-text em { font-style: italic; }
.demo-blatt .demo-lauf em, .demo:not(.laeuft) .demo-blatt .demo-voll em { color: var(--ink); }
.demo-blatt-name { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.6; }
/* Ohne Preise (Noah, 28.10.2026): die kalkuliert der Betrieb danach. */
.demo-blatt-preise { margin: 12px 0 0; font-size: 13px; text-align: right; color: var(--ink-muted); opacity: 0; transform: translateY(4px); transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.ist-fertig .demo-blatt-preise { opacity: 1; transform: none; }

/* Schimmer ueber ein Pseudo-Element mit translateX. */
.demo-schimmer { align-self: start; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; opacity: 0; }
.ist-denkt .demo-schimmer { opacity: 1; }
.demo-schimmer i { position: relative; overflow: hidden; height: 9px; border-radius: 5px; background: var(--surface-sunken); }
.demo-schimmer i:nth-child(1) { width: 46%; }
.demo-schimmer i:nth-child(2) { width: 92%; }
.demo-schimmer i:nth-child(3) { width: 84%; }
.demo-schimmer i:nth-child(4) { width: 70%; }
.demo-schimmer-kurz i:nth-child(1) { width: 88%; }
.demo-schimmer-kurz i:nth-child(2) { width: 72%; }
.demo-schimmer i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--schimmer), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .ist-denkt .demo-schimmer i::after { animation: schimmer 1.2s linear infinite; }
}
@keyframes schimmer { to { transform: translateX(100%); } }

.demo-fertig { margin: 0; opacity: 0; transform: translateY(6px); }
.ist-fertig .demo-fertig { opacity: 1; transform: none; }
.demo-pille {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 980px;
  font-size: 13px;
  color: var(--accent-strong);
  background: var(--accent-tint);
  border: 1px solid var(--accent-rand);
}
.demo-pille svg { flex: none; width: 14px; height: 14px; }
.demo-freigabe { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-muted); }
.demo-knopf { flex: none; height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 980px; background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 600; }

/* Tab 2: Montagsliste */
.demo-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.demo-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: calc(12px * var(--ecke, 1));
  background: var(--surface);
  border: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(6px);
}
.demo-zeile.ist-da { opacity: 1; transform: none; }
.demo-zeile strong { display: block; font-size: 14px; font-weight: 500; }
.demo-zeile small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.demo-zeile em { flex: none; padding: 4px 10px; border-radius: 980px; background: var(--accent-fill); color: #ffffff; font-size: 12px; font-style: normal; font-weight: 500; opacity: 0; }
.ist-markiert .faellig { background: var(--accent-tint); border-color: var(--accent-rand); }
.ist-markiert .faellig small { color: var(--ink-muted-tint); }
.ist-markiert .faellig em { opacity: 1; }

/* Tab 3: Leistungsverzeichnis, erkannte Positionen und Kalkulation */
.demo-profil { padding: 16px; border-radius: calc(12px * var(--ecke, 1)); background: var(--surface); border: 1px solid var(--rule); }
.demo-profil-name { margin: 0; font-size: 17px; font-weight: 600; }
.demo-profil-ort { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.demo-profil-pillen { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink-muted-sunken); }
.demo-profil-pillen span { padding: 4px 10px; border-radius: 980px; background: var(--surface-sunken); }
.demo-bewertung { padding: 16px; border-radius: calc(12px * var(--ecke, 1)); background: var(--accent-tint); border: 1px solid var(--accent-rand); opacity: 0; transform: translateY(6px); }
.ist-bewertung .demo-bewertung { opacity: 1; transform: none; }
.demo-bewertung-kopf { margin: 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.demo-sterne { color: var(--accent); letter-spacing: 2px; font-weight: 400; }
.demo-bewertung-text { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.demo-bewertung-name { margin: 6px 0 0; font-size: 12px; color: var(--ink-muted-tint); }
.demo-lv-menge { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.demo-lv-liste { white-space: pre-line; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.demo-lv-kalk { font-family: var(--mono); font-size: 13px; line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .demo-fertig, .demo-zeile, .demo-bewertung {
    transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
  }
}

.demo-hinweis { max-width: 60ch; margin: 20px auto 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); text-wrap: balance; }
.demo-angehalten { display: none; }
.ist-angehalten .demo-angehalten { display: inline; }

@media (max-width: 860px) {
  .demo-ampel, .demo-mitte, .demo-balken { display: none; }
  .demo-name { display: block; margin: 0; font-size: 15px; font-weight: 600; }
  .demo-punkte { display: flex; }
  .demo-kopf { padding: 0 0 8px 8px; }
  .demo-spalten { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (max-width: 760px) {
  .hero-hell { padding: 128px 16px 0; }
  .demo-rahmen { margin-top: 56px; }
  .demo { padding: 10px; border-radius: calc(20px * var(--ecke, 1)); }
  .demo-eingabe, .demo-ergebnis { padding: 18px; }
}

/* ---- Scroll-Reise im Hero ----
   Nur mit Skript (html.reise-an, gesetzt von initDemo). Die Sektion ist
   hoch, die Buehne klebt darin und bleibt auf die Sektion begrenzt, damit
   nichts hinter den Abschnitten darunter durchscheint. initDemo() schreibt
   transform und opacity im Scroll-Takt direkt auf Hero-Text, Raster und
   Fenster und steuert damit auch die Uhr des Demo-Fensters. */
.reise-an [data-reise] { height: 280vh; height: 280svh; padding: 0; }
.reise-an .reise-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding: 172px 24px 0;
  perspective: 1400px;
}
.reise-an .demo-rahmen { transform-origin: 50% 0; }
@media (max-width: 760px) {
  .reise-an .reise-buehne { padding: 128px 16px 0; }
}

/* ---- Kapitel ----
   Nur mit Skript (html.kapitel-an, gesetzt von initKapitel). Die Buehne
   klebt, initKapitel schreibt den Stil der Teile direkt (kapitelStil in
   site.js). Ein .k-teil wird ab --v an Ort und Stelle scharf und ab --bis
   (sonst 0,86) wieder unscharf, --t ist das Tempo (sonst 8). Bis das
   Skript schreibt, sind die Teile unsichtbar. */
.kapitel-an [data-kapitel] { height: 260vh; height: 260svh; max-width: none; margin: 0; padding: 0; }
.kapitel-an .kapitel-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 76px 24px 0;
}
/* Direkt nach dem Hero eine volle Hoehe frueher anfangen: Die Buehne klebt
   schon, wenn der Hero loslaesst, der Text taucht also in der Mitte auf,
   statt mit der Seite von unten hochzufahren. Bis dahin ist sie leer und
   liegt durchsichtig ueber dem ausblendenden Fenster, darum ohne Klicks. */
.reise-an.kapitel-an [data-reise] + [data-kapitel],
.kapitel-an [data-kapitel] + [data-kapitel] { margin-top: -100vh; margin-top: -100svh; }
.reise-an.kapitel-an [data-reise] + [data-kapitel] .kapitel-buehne,
.kapitel-an [data-kapitel] + [data-kapitel] .kapitel-buehne { pointer-events: none; }
.kapitel-an .k-teil, .kapitel-an .problem-block { opacity: 0; }
/* Eigene Grafikebenen fuer alles, was das Skript pro Scroll-Bild bewegt:
   Safari blendet und verschiebt sie dann nur, statt sie neu zu malen. Sonst
   hinken beim schnellen Scrollen einzelne Kacheln hinterher, und zwei
   Schritte stehen halb uebereinander. */
.kapitel-an .k-teil, .kapitel-an .problem-block,
.reise-an .hero-inhalt, .reise-an .demo-rahmen { will-change: transform, opacity; }
.kapitel-an [data-kapitel] .dringlichkeit { padding-top: 0; border-top: 0; text-align: center; margin: 0 auto; }
.kapitel-an [data-kapitel] .dringlichkeit > p { margin-left: auto; margin-right: auto; }
.kapitel-an [data-kapitel] .hell-h2-mittel { font-size: clamp(36px, 5.2vw, 68px); line-height: 1.04; }

/* Problem: Wort fuer Wort. initKapitel zerlegt [data-woerter] in .wort mit
   --i, der Block traegt --n. Beim Anhalten steht der Text blass da und
   faerbt sich bis k = 0,8 durch, am Ende hebt sich der Block nach oben weg. */
.kapitel-an [data-woerter] .leise .wort { color: var(--ink-muted); }

/* Baustellen direkt nach dem Problem: 40 Prozent der Hoehe frueher
   anfangen, die Ueberschrift kommt herein, waehrend der Problem-Text nach
   oben wegfaehrt, statt nach einer leeren Bildschirmhoehe. */
.kapitel-an [data-kapitel] + #baustellen { position: relative; z-index: 1; margin-top: -40vh; margin-top: -40svh; }

/* Loesung (Noah, 24.10.2026): auf jede Baustelle aus dem Karussell die
   Antwort, als Vorher-Nachher in einer weissen Kapsel. Links grau, was heute
   ist, rechts kraeftig, was danach ist, ganz rechts der Weg zur Leistung.
   Am Telefon steht jede Zeile untereinander. */
.loesung-kopf { max-width: 880px; }
.loesung-zeile { margin: 0; font-size: 15px; font-weight: 600; color: var(--accent-strong); }
.loesung-gross { margin: 14px 0 0; font-size: clamp(36px, 4.6vw, 58px); font-weight: 600; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
.loesung-leise { display: block; color: var(--ink-muted); }
.loesung-liste { margin: 56px 0 0; padding: 8px clamp(22px, 3.6vw, 52px); list-style: none; background: var(--surface); border-radius: calc(var(--radius-kapsel) * var(--ecke, 1)); }
.loesung-liste li {
  display: grid;
  --spalt: clamp(40px, 4.5vw, 64px);
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: var(--spalt);
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}
.loesung-liste li:first-child { border-top: 0; }
.loesung-marke { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.loesung-heute { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.loesung-danach { position: relative; margin: 0; font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
/* Der Pfeil von heute nach danach, mittig im Spalt, auf Hoehe der ersten Textzeile. */
.loesung-danach::before { content: "→"; position: absolute; left: calc(var(--spalt) / -2); top: 37px; transform: translate(-50%, -50%); font-size: 18px; font-weight: 400; color: var(--ink-muted); opacity: 0.55; }
.loesung-danach .loesung-marke { color: var(--accent-strong); }
.loesung-mehr { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 16px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.loesung-mehr .pfeil { width: 14px; height: 14px; }
.loesung-mehr:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .loesung-mehr .pfeil { transition: transform var(--dur-ui) var(--ease-out); }
  .loesung-mehr:hover .pfeil { transform: translateX(3px); }
}
.loesung-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 36px; padding: 0 clamp(22px, 3.6vw, 52px); }
.loesung-fuss p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
/* Rechner-Zeile ueber dem Fuss (Noah, 27.10.2026). */
.loesung-rechner { margin: 36px 0 0; padding: 0 clamp(22px, 3.6vw, 52px); font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.loesung-rechner a { white-space: nowrap; }
@media (max-width: 760px) {
  .loesung-liste { margin-top: 40px; }
  .loesung-liste li { grid-template-columns: 1fr; row-gap: 14px; padding: 28px 0; }
  .loesung-danach::before { content: none; }
  .loesung-mehr { justify-self: start; margin-top: -6px; }
  .loesung-fuss { padding: 0; }
  .loesung-fuss .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Jedes Wort faerbt sich, wenn es die Lesezone erreicht, spaetere etwas
       spaeter (--i aus initKapitel). */
    #loesung [data-woerter] .wort {
      animation: wort-voll linear both;
      animation-timeline: view();
      animation-range: cover calc(18% + var(--i) * 2.5%) cover calc(26% + var(--i) * 2.5%);
    }
  }
}
@keyframes wort-voll { from { opacity: 0.14; } to { opacity: 1; } }

@media (max-width: 760px) {
  .kapitel-an .kapitel-buehne { padding: 76px 16px 0; }
}

/* ---- Telefon: Hero ohne Pille, Demo-Fenster kompakt, Vollbild-Buehnen ----
   Ohne Scroll-Reise (initDemo) steht das Fenster normal unter dem Hero und
   spielt von selbst ab. Die Buehnen nutzen die volle Hoehe (lvh), damit
   unter der eingeklappten Safari-Leiste kein Streifen frei bleibt. */
@media (max-width: 760px) {
  .hero-etikett { display: none; }
  .hero-hell h1 { margin-top: 0; }
  .demo-eingabe, .demo-ergebnis { padding: 14px; gap: 10px; border-radius: calc(14px * var(--ecke, 1)); }
  .demo-getippt { font-size: 13px; line-height: 1.55; }
  .demo-text, .demo-blatt .demo-text, .demo-lv-kalk { font-size: 13px; line-height: 1.5; }
  .demo-blatt-titel { margin-bottom: 10px; font-size: 15px; }
  .demo-blatt-brief { padding-bottom: 10px; margin-bottom: 12px; }
  .demo-blatt-brief .demo-blatt-klein { display: none; }
  .demo-blatt-kopf { padding-bottom: 6px; }
  .demo-blatt-kopf, .demo-blatt-zeile { grid-template-columns: 30px minmax(0, 1fr) 72px; gap: 8px; }
  .demo-blatt-name, .demo-blatt-menge, .demo-blatt-nr { font-size: 13px; }
  .demo-blatt .demo-text { font-size: 12px; }
  .demo-liste { gap: 6px; }
  .demo-zeile { padding: 9px 12px; }
  .demo-profil, .demo-bewertung { padding: 12px; }
  .demo-lv-liste { font-size: 12px; }
  .demo-taste { height: 34px; min-width: 76px; font-size: 13px; }
  .demo-fertig.demo-pille { padding: 7px 12px; font-size: 12px; }
  .demo-knopf { height: 34px; padding: 0 14px; font-size: 13px; }
  .demo-hinweis { font-size: 14px; }
  /* Feste Flaeche statt Glas: Das Fenster tippt staendig, und Safari muesste
     die Unschaerfe dahinter sonst in jedem Bild neu berechnen. */
  .demo.glas { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kapitel-an .kapitel-buehne { height: 100vh; height: 100lvh; }
}

/* ---- Abschnitte unter dem Hero ---- */
/* Luft zwischen den Abschnitten (Noah, 25.10.2026: mehr Abstand). */
.hell-block { width: 100%; max-width: 1200px; margin: 208px auto 0; padding: 0 24px; }
.hell-block-erst { margin-top: 120px; }
/* Leerraum nach dem Ablauf, seit dem 26.10.2026 vor der Leseprobe. */
#leseprobe { margin-top: 280px; }
@media (max-width: 760px) { #leseprobe { margin-top: 184px; } }
.hell-h2,
.hell-h2-mittel { margin: 0; font-weight: 600; text-wrap: balance; }
.hell-h2 { max-width: 760px; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -0.035em; }
.hell-h2-mittel { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.leise { color: var(--ink-muted); }

/* Dringlichkeit: Haarlinie, darunter Ueberschrift und Absatz untereinander. */
.dringlichkeit { max-width: 820px; padding-top: 48px; border-top: 1px solid var(--rule); }
.dringlichkeit p { max-width: 65ch; margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-muted); }

/* Druck ueber die eigene scale-Eigenschaft, damit er nicht mit dem
   transform des Scroll-Reveals kollidiert. */

.kachel-flach { min-height: 280px; }

.pillen { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-muted-sunken); }
.pillen span { padding: 6px 12px; border-radius: 980px; background: var(--surface-sunken); }

.bento-weiter { margin: 24px 0 0; font-size: 15px; font-weight: 500; }

/* Icon-Spielereien: nur mit Maus. Pfade aus der Vorlage. */

/* ---- Zwei Wege auf der Startseite (26.10.2026) ----
   Zwei gleich grosse Karten wie die Reiter Produkte und Implementierung.
   Das Anheben laeuft ueber translate, nicht transform, damit es nicht mit
   der Einblendung (.hell-teil) kollidiert. */
.wege { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.weg { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px); background: var(--surface); border: 1px solid var(--rule); border-radius: calc(28px * var(--ecke, 1)); color: var(--ink); transition: translate var(--dur-hover) var(--ease-out); }
.weg:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .weg:hover { translate: 0 -4px; }
  .weg:hover .mehr-pille { background: var(--rand-stark); }
}
.weg h3 { margin: 12px 0 0; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.weg p:not(.seite-zeile) { flex: 1; margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
.weg .mehr-pille { align-self: flex-start; margin-top: 28px; }
@media (max-width: 760px) {
  .wege { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
}

/* ---- Ablauf als Zeitstrahl ----
   Die graue Linie laeuft durch alle Kreise, die blaue darueber fuellt sich
   bis zur Bildmitte (--p von initStrahl), erreichte Schritte tragen
   .erreicht. Auf breiten Fenstern steht die Ueberschrift links und klebt. */
#ablauf { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.ablauf-direkt { margin: 24px 0 0; max-width: 32ch; font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.ablauf-angebote { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ablauf-linie { position: relative; margin: 0; padding: 0; list-style: none; }
.ablauf-linie::before,
.ablauf-linie::after { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 1px; background: var(--rule); }
.ablauf-linie::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
.ablauf-linie li { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 28px; padding-bottom: 160px; }
.ablauf-linie li:last-child { padding-bottom: 0; }
.ablauf-kreis {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 2px solid var(--rand-stark);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-muted);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.ablauf-linie h3 { margin: 8px 0 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; transition: color 300ms var(--ease-out); }
.ablauf-linie p { margin: 10px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
.strahl-an li:not(.erreicht) h3 { color: var(--ink-muted); }
.ablauf-linie li.erreicht .ablauf-kreis { background: var(--accent-fill); border-color: var(--accent-fill); color: #ffffff; }
@media (max-width: 900px) {
  #ablauf { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 760px) {
  .ablauf-linie li { column-gap: 18px; padding-bottom: 110px; }
  .ablauf-linie p { font-size: 16px; }
}

@media (max-width: 760px) {
  .hell-block { margin-top: 144px; padding: 0 16px; }
  .hell-block-erst { margin-top: 96px; }
  
  
  .faq summary { font-size: 17px; padding: 16px 8px; }
  .faq .prose { padding: 0 8px 20px; }
}

/* Kleine Zeile ueber der Ueberschrift: Hero und KI-Check. */

/* ---- KI-Check: zarter Blauton, dunkle Schrift, blauer Knopf ---- */
.check-block {
  border-radius: calc(28px * var(--ecke, 1));
  padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.check-block > * { max-width: 640px; }
.check-block h2, .check-block .leseprobe-titel { margin: 14px 0 0; font-size: clamp(34px, 4.8vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; }
.check-absatz { margin: 20px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-muted-tint); }
.check-knoepfe { margin: 32px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.check-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; }
@media (max-width: 760px) {
  .check-knoepfe { flex-direction: column; align-items: stretch; gap: 8px; }
  .check-knoepfe .btn, .check-link { justify-content: center; }
}
/* ---- Leseprobe: Karte wie .check-block, links Text, rechts das Deckblatt
   als Knopf zur Vorschau. Unter 760 px steht das Deckblatt ueber dem Text. ---- */
#leseprobe > .hell-h2,
#stimme > .hell-h2,
#fragen > .hell-h2,
#person > .hell-h2,
#kosten > .hell-h2 { margin-bottom: 48px; }
.leseprobe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.check-block.leseprobe > * { max-width: none; }
/* Das lange Wort trennt nur am ­ im Markup, nie mitten im Wort. */
.leseprobe-titel { hyphens: manual; overflow-wrap: normal; }
.leseprobe .pillen { margin: 0; }
.leseprobe h2 .leise { font-weight: 300; }
.leseprobe-form { margin-top: 28px; }
/* Vorschaltseite: Formular unter der zentrierten Aussage, Inhalt linksbuendig. */
.bald-form { width: 100%; max-width: 440px; margin-top: 40px; text-align: left; }
.bald-form .btn { width: 100%; }
.leseprobe-preis { font-size: 15px; }
.leseprobe-preis b { color: var(--ink); }
.leseprobe-weiter { margin: 24px 0 0; }
.leseprobe-buch { display: flex; justify-content: center; }
/* Das Deckblatt liegt wie Papier auf der Karte, der Knopf sitzt unten darauf. */
.leseprobe-cover { position: relative; display: block; width: min(100%, 380px); padding: 0; border: 0; background: none; cursor: pointer; transition: transform var(--dur-hover) var(--ease-out); }
.leseprobe-cover img,
.leseprobe-seiten img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule), var(--shadow); }
.leseprobe-cover-knopf { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); }
@media (hover: hover) and (pointer: fine) {
  .leseprobe-cover:hover { transform: translateY(-4px); }
}
.leseprobe-cover:active { transform: scale(0.985); }

/* Vorschau: natives dialog, drei Seiten scharf, die vierte verschwommen.
   Die Seiten sind so hoch wie das Fenster, seitlich wird geblaettert.
   Statische Unschaerfe, nicht an den Scroll gekoppelt. */
.leseprobe-dialog { width: min(1600px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: calc(28px * var(--ecke, 1)); background: var(--surface); color: var(--ink); overflow: hidden; }
.leseprobe-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.leseprobe-zu { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; display: flex; gap: 8px; }
.leseprobe-zu .band-pfeil { width: 44px; height: 44px; }
.leseprobe-seiten { display: grid; grid-auto-flow: column; grid-auto-columns: min(640px, calc((100vh - 136px) / 1.415)); grid-auto-columns: min(640px, calc((100dvh - 136px) / 1.415)); gap: 24px; justify-content: safe center; padding: 72px 32px 32px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; scroll-snap-type: x proximity; }
.leseprobe-seiten > * { scroll-snap-align: center; }
.leseprobe-rest { position: relative; overflow: hidden; border-radius: 4px; }
.leseprobe-rest img { filter: blur(7px); transform: scale(1.03); }
.leseprobe-mehr { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.leseprobe-hinweis { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: clamp(20px, 3vw, 32px); background: color-mix(in srgb, var(--surface) 86%, transparent); outline: none; }
.leseprobe-mehr[hidden],
.leseprobe-hinweis[hidden] { display: none; }
.leseprobe-hinweis p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.leseprobe-hinweis .leseprobe-hinweis-titel { font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.leseprobe-hinweis-knoepfe { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.leseprobe-hinweis .leseprobe-hinweis-knoepfe { margin-top: 4px; }

/* ---- Workbook-Seite (leistung-workbook.html): Kopf wie die Leseprobe-Kapsel,
   links ein Typenschild wie auf dem Deckblatt, rechts das Deckblatt. ---- */
.seite-karte.leseprobe > * { max-width: none; }
.typenschild { margin: 0; }
.typenschild > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.typenschild > div:last-child { border-bottom: 1px solid var(--rule); }
.typenschild dt { font-size: 13px; color: var(--ink-muted); }
.typenschild dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.workbook-preis { margin: 28px 0 0; font-size: clamp(40px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; scroll-margin-top: 140px; }
.workbook-knoepfe { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fundament-titel { margin: 16px 0 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.leseprobe-text .leistung-liste { margin-top: 20px; }
/* Die Teileliste vom Deckblatt. Die Zeichnungen sind hell angelegt und
   werden im Dunkelmodus umgekehrt, das geht, weil sie nur Grautoene haben. */
.workbook-teile { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: center; }
.workbook-teile li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; color: var(--ink-muted); }
.workbook-teile img { height: 72px; width: auto; margin-bottom: 10px; }
.workbook-teile b { font-weight: 600; color: var(--ink); }
:root[data-theme="dark"] .workbook-teile img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .workbook-teile img { filter: invert(1) hue-rotate(180deg); }
}
.workbook-teile + .leistung-absatz { margin-top: 40px; }
.workbook-module { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px); }
.seite-karte .workbook-module .leistung:last-child { padding-bottom: 32px; }
.workbook-module .leistung:first-child { padding-top: 28px; border-top: 1px solid var(--rule); }
.workbook-module .leistung-liste { margin-top: 14px; gap: 6px; }
.workbook-module .leistung-liste li { font-size: 16px; }
.workbook-fehl li::before { background: var(--ink-muted); }
.seite-karte .leistung-mehr { margin-top: 20px; }
/* Werkzeugkasten (leistung-werkzeugkasten.html, Noah, 27.10.2026): noch ohne
   Deckblatt, deshalb rechts der Preisblock statt des Deckblatts. */
.werkzeug-kopf { align-items: start; }
.werkzeug-preis .workbook-preis { margin-top: 0; }
.werkzeug-preis .leistung-absatz { margin: 16px 0 0; }
.werkzeug-preis .form-note { margin-top: 16px; }
.lieferumfang-titel { margin: 24px 0 0; font-size: 13px; color: var(--ink-muted); }
.werkzeug-preis .lieferumfang { margin-top: 8px; gap: 6px; }
.werkzeug-preis .lieferumfang li { font-size: 16px; font-weight: 600; color: var(--ink); }
/* Kennst du das? Links ohne, rechts mit dem Werkzeugkasten. */
.seite-karte > .vorher-nachher { max-width: none; }
.vorher-nachher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); }
.vorher-nachher .leistung-unter { margin-top: 0; }
@media (max-width: 760px) {
  .vorher-nachher { grid-template-columns: minmax(0, 1fr); }
  .leseprobe { grid-template-columns: minmax(0, 1fr); }
  .leseprobe-buch { order: -1; }
  .leseprobe-cover { width: min(100%, 300px); }
  .leseprobe-form .btn { width: 100%; }
  .workbook-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .workbook-module { grid-template-columns: minmax(0, 1fr); }
  /* Seitlich so viel Luft, dass auch die erste und letzte Seite mittig einrasten. */
  .leseprobe-seiten { grid-auto-columns: 84vw; gap: 12px; scroll-snap-type: x mandatory; padding: 68px calc((100% - 84vw) / 2) 24px; }
}
.faq-seite { max-width: 820px; }
.hell-block-letzt { margin-bottom: 56px; }

/* ---- Unterseiten nach den Regeln der Startseite (Noah, 25.10.2026) ----
   Kopf frei auf dem Seitengrund: blaue Zeile, grosse Ueberschrift,
   Einleitung. Inhalt in weissen Karten mit Haarlinie, Abschluss in der
   Karte wie "Finde heraus, wo es bei dir hakt." (.check-block). */
.seite-kopf { margin-top: 0; padding-top: clamp(140px, 13vw, 184px); }
.seite-kopf > * { max-width: 860px; }
.seite-zeile { margin: 0; font-size: 15px; font-weight: 600; color: var(--accent-strong); }
.seite-zeile a { color: inherit; }
.seite-titel { margin: 14px 0 0; font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.seite-lead { margin: 24px 0 0; max-width: 58ch; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; color: var(--ink-muted); text-wrap: pretty; }
.seite-kopf + .hell-block { margin-top: 64px; }
/* Kopf, der den ersten Bildschirm allein fuellt; der Rest kommt erst beim
   Scrollen (implementierung.html, Noah, 27.10.2026). */
.seite-kopf-voll { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 96px; }
.seite-kopf-voll + .hell-block { margin-top: 0; }
.seite-karte { padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 72px); background: var(--surface); border: 1px solid var(--rule); border-radius: calc(28px * var(--ecke, 1)); }
.seite-karte > * { max-width: 860px; }
.seite-karte > .leistung-inhalt { margin-top: 0; }
.seite-karte > :first-child { margin-top: 0; }
.seite-karte > :last-child { margin-bottom: 0; }
.seite-karte .leistung:first-child { padding-top: 0; border-top: 0; }
.seite-karte .leistung:last-child { padding-bottom: 0; }
.seite-karte .faq { border-top: 0; }
.seite-karte .faq details:last-child { border-bottom: 0; }
/* Rechtstexte: die Karte bleibt breit, nur der Text lesbar schmal. */
.seite-karte.legal { max-width: none; }
.seite-karte.legal > * { max-width: 720px; }
/* Formular-Karten in einer Seiten-Karte: keine zweite Flaeche. */
.seite-karte .card { padding: 0; background: none; border: 0; box-shadow: none; }
/* Zwischenkopf fuer weitere Abschnitte, wie "Die Loesung" auf der Startseite. */
.seite-abschnitt { max-width: 860px; margin-bottom: 48px; }
.seite-h2 { margin: 14px 0 0; font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.seite-direkt { margin: 16px 0 0; font-size: 17px; color: var(--ink-muted); }
.seite-karte .leistung-inhalt > .leistung-unter:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Implementierung: Wechselzeile im Seitentitel in Akzentfarbe, auf eigener
   Zeile. Darunter das Rechenbeispiel mit drei Kacheln (Radius Tile 16px),
   die eigenen Zahlen kommen aus zwei Feldern (Noah, 27.10.2026). */
.seite-titel .wechsel { display: grid; color: var(--accent-strong); }
/* Jedes Wort bleibt in einer Zeile, damit die Ueberschrift nicht springt.
   Die Schrift richtet sich nach der Titelbreite: "Ausschreibungen auswerten."
   ist rund 12,8 Schriftgroessen breit (Noah, 27.10.2026). */
.seite-titel:has(.wechsel) { container-type: inline-size; }
.seite-titel .wechsel > span { white-space: nowrap; font-size: min(1em, 7.6cqi); }
@media (prefers-reduced-motion: reduce) {
  .seite-titel .wechsel { display: none; }
}
.zeit-modus { margin: 0; padding: 0; border: 0; min-width: 0; }
.zeit-legende { margin: 0 0 14px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.zeit-modus .rechner-wahl { max-width: 560px; }
.zeit-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.zeit-zeile label { font-size: 17px; line-height: 1.4; color: var(--ink); }
.zeit-zeile[hidden] { display: none; }
.zeit-zeile .rechner-zahl { flex: none; }
.zeit-zeile .rechner-zahl input { font-variant-numeric: tabular-nums; }
.zeit-personen { margin-top: 20px; border-top: 0; }
.zeit-modus + .zeit-personen[hidden] + .zeit-legende,
.zeit-personen + .zeit-legende { margin-top: 32px; }
.zeit-aufgaben { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.seite-karte > .zeit-aufgaben,
.seite-karte > .zeit-zeile { max-width: 640px; }
.zeit-satz { margin-top: 24px; border-top: 0; }
.zeitrechnung { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seite-karte > .zeitrechnung { max-width: none; }
.zeitrechnung li { padding: 24px 22px 26px; background: var(--bg); border-radius: 16px; }
.zeit-zahl { display: block; font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.zeitrechnung li:last-child .zeit-zahl { color: var(--accent-strong); }
.zeit-titel { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.zeit-text { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.zeit-hinweis { margin: 24px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 760px) {
  .zeitrechnung { grid-template-columns: 1fr; }
  .zeit-zeile { gap: 12px; }
  .zeit-zeile label { min-width: 0; font-size: 16px; hyphens: auto; overflow-wrap: break-word; }
  .zeit-zeile .rechner-zahl { gap: 6px; }
  .zeit-zeile .rechner-zahl button { width: 40px; height: 40px; }
  .zeit-zeile .rechner-zahl input { width: 52px; height: 40px; }
}
/* Ueber mich: Foto links in der Briefkarte, am Telefon oben in der Karte,
   quer zugeschnitten. */
/* Stimme aus einem Betrieb: ein Zitat, darunter wer es sagt. */
.stimme { margin: 0; }
.stimme blockquote { margin: 0; }
.stimme blockquote p { margin: 0; max-width: 36ch; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.stimme figcaption { margin-top: 20px; font-size: 15px; color: var(--ink-muted); }
.ueber-foto { display: block; width: 100%; height: auto; border-radius: calc(20px * var(--ecke, 1)); }
.ueber-mitfoto { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 56px; align-items: start; }
.ueber-mitfoto .ueber-prose { margin-top: 0; }
/* Beispiele auf den Leistungsseiten: Vorher-Nachher-Probe und Referenzbilder. */
.probe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 32px; align-items: start; }
.probe-teil h3 { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); }
.probe-roh { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.probe-roh li { padding: 10px 14px; border-radius: calc(12px * var(--ecke, 1)); background: var(--bg, #f5f5f7); }
.probe-pfeil { width: 28px; height: 28px; margin-top: 40px; color: var(--accent); }
.probe-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.probe-text b { display: block; margin-bottom: 6px; font-weight: 600; }
.probe-offen { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.probe-hinweis { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-muted); }
.referenz { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.referenz img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: calc(14px * var(--ecke, 1)); }
/* Planung: Beispiel Zeichnung, Rendering, Praesentation. */
.vis-bild { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: calc(14px * var(--ecke, 1)); background: #fff; }
.vis-link { display: block; margin-top: 20px; }
.vis-reihe { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.vis-reihe .vis-link { margin-top: 0; }
.vis-echt { margin: 20px 0 0; padding: 16px 20px; border-radius: calc(14px * var(--ecke, 1)); background: var(--bg, #f5f5f7); font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.vis-echt strong { color: var(--ink); font-weight: 600; }
.seite-karte > .vis-breit { max-width: none; }
.vis-breit > p { max-width: 860px; }
/* Preisrechner Renderings: erst nach "Preis berechnen" sichtbar, eine Frage
   pro Schritt. */
.rechner-bereich:not([hidden]) { animation: rechner-auf 420ms var(--ease-out, ease-out) both; }
@keyframes rechner-auf { from { opacity: 0; transform: translateY(16px); } }
.rechner-bereich[hidden], .rechner [hidden] { display: none !important; }
.rechner { max-width: 640px; }
/* Fokus nach dem Oeffnen nur fuer Vorleser, ohne sichtbaren Rahmen. */
.rechner-bereich h2:focus { outline: none; }
.rechner-stand { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rechner-stand b { color: var(--ink); font-weight: 600; }
.rechner-schritt { margin: 0; padding: 0; border: 0; min-width: 0; }
.rechner-schritt:not([hidden]) { animation: rechner-schritt 260ms var(--ease-out, ease-out) both; }
@keyframes rechner-schritt { from { opacity: 0; transform: translateX(12px); } }
.rechner-frage { display: block; padding: 0; margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.rechner-erkl { margin: 10px 0 24px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.rechner-basis { margin: 0; padding: 0; list-style: none; }
.rechner-basis li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.rechner-basis li:first-child { border-top: 0; }
.rechner-basis li > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rechner-wahl label { position: relative; cursor: pointer; }
.rechner-wahl input { position: absolute; opacity: 0; }
.rechner-wahl span { display: block; padding: 16px 18px; border: 1px solid var(--rule); border-radius: calc(14px * var(--ecke, 1)); font-size: 16px; font-weight: 600; transition: border-color 160ms, background-color 160ms; }
.rechner-wahl small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.rechner-wahl input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); box-shadow: 0 0 0 1px var(--accent); }
.rechner-wahl input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rechner-zahl { display: flex; align-items: center; gap: 10px; }
.rechner-zahl button { width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; background: #fff; font: inherit; font-size: 20px; color: var(--ink); cursor: pointer; }
.rechner-zahl input { width: 64px; height: 44px; padding: 0; font: inherit; font-size: 18px; font-weight: 600; text-align: center; border: 1px solid var(--rule); border-radius: 12px; background: #fff; color: var(--ink); -moz-appearance: textfield; }
.rechner-zahl input::-webkit-inner-spin-button, .rechner-zahl input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rechner s, .rechner-je s { margin-right: 2px; color: var(--ink-muted); font-weight: 400; }
.rechner-je { margin-left: 6px; font-size: 15px; color: var(--ink-muted); }
.rechner-angebot { margin: 0 0 24px; padding: 14px 18px; border-radius: calc(14px * var(--ecke, 1)); background: var(--accent-tint); font-size: 15px; line-height: 1.5; color: var(--ink); }
.rechner-angebot b { color: var(--accent); font-weight: 600; }
.rechner-vorher { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 0; font-size: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rechner-vorher span { padding: 3px 10px; border-radius: 980px; background: var(--accent-tint); font-size: 13px; font-weight: 600; color: var(--accent); }
.rechner-gesamt { display: block; margin: 4px 0 20px; font-size: clamp(40px, 5vw, 56px); font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.rechner-hinweis { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.rechner-knopf { margin: 28px 0 0; }
.rechner-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); }
.rechner-nav [data-rechner-weiter] { margin-left: auto; }
.rechner-nav button.check-link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; }
@media (max-width: 760px) {
  .seite-kopf { padding-top: 128px; }
  .seite-kopf + .hell-block { margin-top: 40px; }
  .ueber-mitfoto { grid-template-columns: 1fr; gap: 32px; }
  .probe { grid-template-columns: 1fr; gap: 20px; }
  .probe-pfeil { margin: 0 auto; transform: rotate(90deg); }
  .referenz { grid-template-columns: 1fr; }
  .vis-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rechner-wahl { grid-template-columns: 1fr; }
  .referenz img + img { max-width: 220px; margin: 0 auto; }
  .ueber-mitfoto .ueber-foto { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
}

/* Fusszeile an der Inhaltsbreite der Startseite ausrichten. */
.hell-seite ~ footer.site .page { max-width: 1152px; margin: 0 auto; }

@media (max-width: 760px) {
  .check-block { border-radius: calc(24px * var(--ecke, 1)); }
  .hell-block-letzt { margin-bottom: 32px; }
  .hell-seite ~ footer.site { padding-left: 16px; padding-right: 16px; }
}

/* ==== Neuausrichtung Digitalisierung im Handwerk (10.10.2026) ==== */
/* Hero: eine ruhige Zeile statt der Rotation, darunter die Vertrauenszeile */
.hero-lede { height: auto; overflow: visible; max-width: 36ch; text-wrap: balance; }

/* Baustellen (Noah, 28.10.2026): vier Karten als festes Raster statt
   Karussell. Ab 1101 px vier nebeneinander, darunter zwei, am Telefon eine. */
.baustellen {
  list-style: none;
  margin: 48px 0 0;
  padding: 8px 0 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .baustellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .baustellen { grid-template-columns: 1fr; } }
.baustellen > li { display: flex; }
/* Bildflaeche: alle gleich, weiss mit Haarlinie wie die
   anderen Kacheln der Seite, darin Karten mit weichem Schatten. */
.baustelle-bild {
  height: 340px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(28px * var(--ecke, 1));
  background: var(--surface);
  border: 1px solid var(--rule);
}

/* Mini-Szenen (Noah, 25.10.2026): je Baustelle ein Ausschnitt wie aus dem
   eigenen Buero, mit einer leisen Bewegung, die sich wiederholt. Bewegt
   werden nur opacity und transform. Ohne .band-sichtbar (initBand) und bei
   reduzierter Bewegung steht das fertige Bild. */
.szene { --karte-schatten: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -6px rgba(0, 0, 0, 0.12);
  width: 84%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--ink); text-align: left; }
.szene p { margin: 0; }
.szene ul { margin: 0; padding: 0; list-style: none; }
.sz-karte, .sz-blatt { align-self: stretch; padding: 14px 16px; border-radius: calc(16px * var(--ecke, 1)); background: var(--surface); box-shadow: var(--karte-schatten); }
.sz-titel { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.szene .sz-klein { margin-top: 3px; font-size: 12px; color: var(--ink-muted); }
.sz-pille { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 980px; font-size: 12px; font-weight: 500; background: var(--surface); box-shadow: var(--karte-schatten); color: var(--ink-muted); }
.sz-warn { background: linear-gradient(var(--accent-b-tint), var(--accent-b-tint)), var(--surface); color: var(--accent-b); }
.sz-rot { background: linear-gradient(var(--rot-tint), var(--rot-tint)), var(--surface); color: var(--rot); }
.sz-balken { display: block; height: 6px; margin-top: 12px; border-radius: 3px; overflow: hidden; background: var(--surface-sunken); }
.sz-balken span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0.05); }
.sz-marke-cursor { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); }

/* 1 · Angebot: Positionsliste, Position 14 wird von Hand geschrieben. */
.sz-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.sz-kopf .sz-klein { margin: 0; }
.sz-pos li { display: flex; align-items: center; gap: 10px; height: 26px; font-size: 12px; }
.sz-pos li > span:first-child { width: 18px; flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }
.sz-pos i { display: block; flex: 0 1 var(--w); width: var(--w); height: 6px; border-radius: 3px; background: var(--surface-sunken); }
.sz-jetzt { margin: 0 -8px; padding: 0 8px; border-radius: 8px; background: var(--accent-tint); }
.sz-tippen { font-weight: 500; white-space: nowrap; overflow: hidden; }
.sz-offen { opacity: 0.45; }

/* 3 · Ausschreibung: ein Stapel LV-Blaetter, der Balken kriecht, die Tage zaehlen. */
.sz-stapel { position: relative; align-self: stretch; margin-top: 10px; }
.sz-stapel::before, .sz-stapel::after { content: ""; position: absolute; left: 10px; right: 10px; height: 100%; border-radius: calc(16px * var(--ecke, 1)); background: var(--surface); box-shadow: var(--karte-schatten); }
.sz-stapel::before { top: -14px; left: 22px; right: 22px; opacity: 0.6; }
.sz-stapel::after { top: -7px; opacity: 0.85; }
.sz-stapel .sz-karte { position: relative; z-index: 1; }
.sz-zaehler { overflow: hidden; height: 30px; padding-top: 0; padding-bottom: 0; }
.sz-rolle { display: flex; flex-direction: column; }
.sz-rolle span { height: 30px; line-height: 30px; }
.sz-rolle { transform: translateY(-60px); }

.sz-punkte { display: inline-flex; gap: 3px; margin-left: 2px; }
.sz-punkte i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* Weitere Szenen (Noah, 27.10.2026): Posteingang als Liste, Antwortkarte
   eingerueckt wie in einem Chat. Sonst nur die Bausteine von oben. */
.sz-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 12px; }
.sz-liste li:first-child { border-top: 0; }
.sz-liste b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-liste span { flex: none; color: var(--ink-muted); }
.szene .sz-antwort { align-self: flex-end; width: 62%; }

@media (prefers-reduced-motion: no-preference) {
  .band-sichtbar .sz-marke-cursor { animation: blinken 1s steps(1) infinite; }
  .band-sichtbar .sz-tippen { animation: sz-tippen 7s var(--ease-out) infinite; }
  .band-sichtbar .sz-auf { animation: sz-auf 7s var(--ease-out) infinite; }
  .band-sichtbar .sz-balken span { animation: sz-kriechen 9s linear infinite; }
  .band-sichtbar .sz-rolle { animation: sz-rolle 9s var(--ease-out) infinite; }
  .band-sichtbar .sz-punkte i { animation: sz-hupf 1.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 160ms); }
  .sz-punkte i:nth-child(2) { --n: 1; }
  .sz-punkte i:nth-child(3) { --n: 2; }
}
/* Von Hand geschrieben: der Text deckt sich von links auf, haelt, beginnt neu. */
@keyframes sz-tippen {
  0%, 6% { clip-path: inset(0 100% 0 0); opacity: 1; }
  52%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes sz-auf { 0%, 50% { opacity: 0; transform: translateY(6px) scale(0.96); } 58%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes sz-kriechen { from { transform: scaleX(0.02); } to { transform: scaleX(0.07); } }
@keyframes sz-rolle { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-30px); } 66%, 100% { transform: translateY(-60px); } }
@keyframes sz-hupf { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.baustelle-link > p { margin: 20px 4px 0; font-size: 17px; line-height: 1.45; color: var(--ink-muted); text-wrap: pretty; }
.baustelle-link > p strong { font-weight: 600; color: var(--ink); }
/* Jede Karte fuehrt zum passenden Angebot (Noah, 25.10.2026). */
.baustelle-link, .baustelle-link:hover { flex: 1; display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: calc(28px * var(--ecke, 1)); }
.baustelle-link .baustelle-bild { transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.baustelle-mehr { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: auto 4px 0; padding-top: 12px; font-size: 15px; font-weight: 500; color: var(--accent); }
.baustelle-mehr .pfeil { width: 14px; height: 14px; transition: transform var(--dur-ui) var(--ease-out); }
.baustelle-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .baustelle-link:hover .baustelle-bild { border-color: var(--rand-stark); transform: translateY(-2px); }
  .baustelle-link:hover .baustelle-mehr .pfeil { transform: translateX(3px); }
}
.band-hinweis { margin: 4px 0 0; font-size: 12px; color: var(--ink-muted); }
.band-pfeil {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mulde);
  color: var(--ink);
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.band-pfeil svg { width: 16px; height: 16px; }
.band-pfeil:active { transform: scale(0.94); }
.band-pfeil:disabled { opacity: 0.35; cursor: default; }
.band-pfeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .band-pfeil:not(:disabled):hover { background: var(--rand-stark); }
}

/* Themenfelder */

/* Leistungen: Zweitlink neben dem Knopf, Listen in den Themenfeldern */

/* ============================================================
   Fliessende Ecken wie bei Apple (Squircles, Noah 25.10.2026)
   Alle Karten und Flaechen runden mit calc(Radius * var(--ecke, 1)).
   Kann der Browser corner-shape, wird die Ecke zum Squircle und der
   Radius 1,5-fach, dann wirkt sie gleich gross, aber weicher. Kapsel-
   Knoepfe, Pillen und Kreise bleiben bewusst rund. Safari kann
   corner-shape noch nicht und zeigt die normalen Rundungen.
   ============================================================ */
@supports (corner-shape: squircle) {
  :root { --ecke: 1.5; }
  .kapsel,
  .card,
  .field input, .field textarea, .field select,
  .karte,
  .faq summary,
  .preiskarte,
  .hinweis,
  .kasten,
  .demo,
  .demo-panel,
  .demo-eingabe,
  .demo-ergebnis,
  .demo-zeile,
  .demo-profil,
  .demo-bewertung,
  .loesung-liste,
  .demo-eingabe, .demo-ergebnis,
  .check-block,
  .baustelle-bild,
  .sz-karte, .sz-blatt,
  .sz-stapel::before, .sz-stapel::after,
  .seite-karte, .ueber-foto, .probe-roh li, .referenz img, .vis-bild, .vis-echt, .rechner-wahl span, .rechner-angebot { corner-shape: squircle; }
}