/* ══ KuKo · Webseite — gemeinsame Grundlage aller Seiten ══════════════════
   Stil aus Konzept 4 „Der ruhige Tag" (Runde 1, von Ben gewählt).
   Farbwerte 1:1 aus der App (src/app/globals.css, kuko-* Tokens).
   Schriften self-hosted, Fraunces bleibt der Charakterträger.

   Was hier steht, benutzen mehrere Seiten. Was nur eine Seite braucht,
   steht in deren <style>-Block — nicht hier.                              */

@font-face {
  font-family: "Fraunces";
  src: url("/schriften/fraunces-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/schriften/fraunces-latin-full-italic.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("/schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("/schriften/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("/schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("/schriften/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("/schriften/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --gruen-50:#ecfdf5; --gruen-100:#d1fae5; --gruen-200:#a7f3d0; --gruen-400:#34d399;
  --gruen-500:#10b981; --gruen-600:#059669; --gruen-700:#047857; --gruen-800:#065f46;
  --blau-50:#f0f9ff; --blau-100:#e0f2fe; --blau-200:#bae6fd; --blau-300:#7dd3fc;
  --blau-400:#38bdf8; --blau-500:#0ea5e9;
  --blau-600:#0284c7; --blau-700:#0369a1; --blau-800:#075985; --blau-900:#0c4a6e;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-500:#f59e0b; --amber-700:#b45309;
  --rose-50:#fff1f2; --rose-500:#f43f5e; --rose-700:#be123c;
  --indigo-50:#eef2ff; --indigo-500:#6366f1; --indigo-700:#4338ca;
  --lila-50:#faf5ff; --lila-500:#a855f7; --lila-700:#7c3aed;
  --tinte-900:#0f172a; --tinte-800:#1e293b; --tinte-700:#334155; --tinte-600:#475569;
  --tinte-500:#64748b; --tinte-300:#cbd5e1; --tinte-200:#e2e8f0; --tinte-100:#f1f5f9;
  --tinte-50:#f8fafc;
  --papier:#ffffff;
  --kopf-hoehe:4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: "Plex", ui-sans-serif, system-ui, sans-serif;
  color: var(--tinte-900); -webkit-text-size-adjust: 100%;
}
body { margin: 0; background: var(--papier); }

.raster > * { min-width: 0; }
p, li, dd, figcaption { overflow-wrap: anywhere; }
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
figure { margin-inline: 0; }
img { max-width: 100%; display: block; }
h1, h2, h3, blockquote { hyphens: none; margin: 0; }
p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:target { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }

.eyebrow {
  font-family: "PlexMono", ui-monospace, monospace;
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.display {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-weight: 400; letter-spacing: -.02em; line-height: 1.04; font-optical-sizing: auto;
}
/* Voller Blau-Commit (Ben 2026-08-26): die Seite spricht die Farbwelt der
   Werkstattansicht. Grün existiert nur noch, wo es wörtlich App-UI oder
   Kundenwelt zitiert (Toggles, Status, Kunden-Blase, /kunden). */
.betont { font-style: italic; color: var(--blau-800); }
.fliess { font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-700); max-width: 34rem; }
.bahn { max-width: 68rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.buehne { position: relative; overflow: clip; }

/* ── Kopf: sticky, kommt beim Hochscrollen zurück ── */
.kopf {
  position: sticky; top: 0; z-index: 40; height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--tinte-200);
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.kopf.fort { transform: translateY(-100%); }
.wortmarke {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.375rem;
  letter-spacing: -.02em; color: var(--tinte-900); text-decoration: none; margin-right: auto;
}
/* Der Abstand gibt nach, bevor die Zeile bricht: mit acht Punkten (seit
   „Fragen" am 2026-08-31) reichte der feste Abstand zwischen 940 und
   ~1100 px nicht mehr — „Wer wir sind" rutschte auf zwei Zeilen und der
   Knopf daneben gleich mit. Das nowrap verhindert, dass ein zweiwortiger
   Punkt in sich umbricht; enger wird stattdessen der Abstand. */
.kopf nav { display: flex; gap: clamp(.8125rem, 1.55vw, 1.375rem); align-items: center; }
.kopf nav a {
  font-size: .9375rem; color: var(--tinte-700); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  white-space: nowrap;
  transition: color .18s linear, border-bottom-color .18s linear;
}
.kopf nav a:hover { color: var(--blau-700); border-bottom-color: var(--blau-500); }
.kopf nav a[aria-current="page"] { color: var(--blau-700); border-bottom-color: var(--blau-500); }

/* ── Menü ──
   Ein <details> statt Skript: fällt nichts aus, und der Kopf bleibt auf
   dem Telefon bedienbar. Auf dem Desktop ist der Auslöser versteckt und
   das Panel per CSS wieder sichtbar — deshalb steht die Navigation dort
   ganz normal in der Zeile.                                            */
.menue { margin-left: auto; }
/* Auslöser ist DEFAULT sichtbar: Der Inhalt eines geschlossenen <details>
   lässt sich per CSS nicht wieder einblenden (UA-Verhalten). Ohne Skript
   bleibt das Menü deshalb auf jeder Breite als Klapp-Menü bedienbar —
   erst das Skript unten macht daraus auf dem Desktop die offene Zeile. */
.menue > summary {
  display: inline-flex; list-style: none; cursor: pointer;
  align-items: center; gap: .5rem;
  font-family: "PlexMono", monospace; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-700);
  border: 1px solid var(--tinte-300); border-radius: .625rem; padding: .5rem .75rem;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover { color: var(--blau-700); border-color: var(--blau-500); }
/* Drei Striche als drei Hintergrund-Verläufe statt als ::before/::after.
   Die Pseudoelement-Fassung aus Runde 2 wurde nicht gemalt — gemessen am
   2026-08-09: getComputedStyle meldete für beide `display:block`,
   `content:""`, `visibility:visible` und die richtigen Maße, im Bild lag
   trotzdem nur der mittlere Strich, auch mit erzwungenen Signalfarben.
   Sichtbare Folge war ein Auslöser, der wie ein Minuszeichen mit dem Wort
   „Menü" daneben aussah. Die Verlauf-Fassung hat keine Pseudoelemente und
   damit auch das Problem nicht. */
.menue > summary .balken {
  display: block; width: .875rem; height: .625rem;
  background:
    linear-gradient(currentColor, currentColor) left top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat;
}
.menue[open] > summary { color: var(--blau-700); border-color: var(--blau-500); }

@media (max-width: 940px) {
  /* Auf dem Telefon ein echtes Burger-Zeichen: keine Umrandung, kein Wort,
     nur die drei Striche. Das Kästchen mit „— MENÜ" darin sah aus wie ein
     Knopf, der mit dem Haupt-CTA konkurriert (Ben 2026-08-09).
     Tap-Fläche bleibt 44 px, obwohl das Zeichen kleiner ist. */
  .menue > summary {
    display: inline-flex; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: .625rem; gap: 0;
  }
  .menue > summary .wort { display: none; }
  .menue > summary .balken { width: 1.25rem; height: .875rem; }
  .menue[open] > summary { background: var(--blau-50); }
  /* Der Kopf-CTA verschwindet auf dem Telefon: Im ersten Bildschirm steht der
     große „3 Monate kostenlos testen" ohnehin mitten im Blick — zwei gleiche
     Handlungen nebeneinander verdoppeln nichts, sie teilen nur die
     Aufmerksamkeit. Ersetzt durch die mitlaufende Leiste unten. */
  .kopf > .handlung.klein { display: none; }

  .kopf .menue > nav {
    position: absolute; top: var(--kopf-hoehe); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--tinte-200);
    box-shadow: 0 20px 40px -28px rgba(15,23,42,.4);
    padding: .5rem clamp(1rem, 4vw, 2.5rem) 1rem;
  }
  .kopf .menue > nav a {
    padding: .8125rem 0; border-bottom: 1px solid var(--tinte-100);
    font-size: 1rem;
  }
  .kopf .menue > nav a:last-child { border-bottom: 0; }
  /* Die Handlung im Kopf braucht auf schmalen Geräten weniger Wort */
  .kopf .handlung.klein .lang { display: none; }
}
/* Zwischen Burger-Breite und bequemem Desktop wird es eng: acht
   Navigationspunkte und der volle Knopftext passen dort nicht mehr
   nebeneinander, der Knopf rutschte auf zwei Zeilen. In diesem Band
   trägt der Knopf nur „kostenlos testen" — die drei Monate stehen im
   Hero direkt darunter und gehen nicht verloren. */
@media (max-width: 1010px) {
  .kopf .handlung.klein .lang { display: none; }
}

/* Desktop MIT Skript: Auslöser weg, das <details> wird offen gehalten,
   die Navigation steht wieder als Zeile im Kopf. */
@media (min-width: 941px) {
  html.js .kopf .menue > summary { display: none; }
  html.js .kopf .menue > nav { display: flex; }
}

/* ── Die mitlaufende Handlung (nur Telefon) ────────────────────────────
   Sie steht ABSICHTLICH außerhalb von .buehne im Markup: .buehne trägt
   `overflow: clip`, und ein Clip-Container wird zum umgebenden Block für
   `position: fixed` — die Leiste würde darin beim Scrollen abgeschnitten.
   Erscheint erst, wenn der erste Bildschirm durch ist; dort steht der große
   Knopf ja noch im Bild. Bewegung nur über transform (eine Einblendung über
   opacity zählt als unsichtbarer Inhalt im Fold-Gate). */
.mitlauf {
  position: fixed; left: 50%; bottom: 1rem; z-index: 60;
  transform: translate(-50%, 200%);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6875rem 1.125rem; border-radius: 999px;
  background: var(--blau-700); color: #fff; text-decoration: none;
  font-size: .9375rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(3,105,161,.65);
}
.mitlauf.da { transform: translate(-50%, 0); }
/* Am Seitenende zieht sie sich zurück: Dort steht derselbe Knopf in voller
   Größe, zwei identische Handlungen übereinander sind eine zu viel. */
.mitlauf.da.weg { transform: translate(-50%, 200%); }
@media (prefers-reduced-motion: no-preference) {
  .mitlauf { transition: transform .28s cubic-bezier(.2,.7,.3,1); }
}
@media (min-width: 941px) { .mitlauf { display: none; } }
/* Platz, damit die Leiste die letzte Zeile nicht dauerhaft verdeckt. */
@media (max-width: 940px) { .buehne { padding-bottom: 4.25rem; } }

/* ── Die eine Handlung. Überall derselbe Wortlaut. ──
   App-Aktionsblau. Grund blau-700, nicht blau-600 oder sky-500: Weiß auf
   #0284c7 misst 3,65:1, auf #0369a1 5,5:1 — nur der dunkle Ton besteht. */
.handlung {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blau-700); color: #fff; font-weight: 500; font-size: 1rem;
  padding: .8125rem 1.5rem; border-radius: .75rem; text-decoration: none;
  box-shadow: 0 1px 2px rgba(3,105,161,.2), 0 8px 24px -12px rgba(3,105,161,.5);
  transition: background .18s linear, box-shadow .18s linear;
}
.handlung:hover { background: var(--blau-800); box-shadow: 0 1px 2px rgba(3,105,161,.25), 0 12px 28px -12px rgba(3,105,161,.55); }
.handlung.klein { font-size: .875rem; padding: .5625rem 1.0625rem; }
.stiller-weg {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .9375rem; color: var(--tinte-700); text-decoration: none;
  border-bottom: 1px solid var(--tinte-300); padding-bottom: 1px;
  transition: color .18s linear, border-bottom-color .18s linear;
}
.stiller-weg:hover { color: var(--blau-700); border-bottom-color: var(--blau-500); }
*:focus-visible { outline: 2px solid var(--blau-500); outline-offset: 3px; border-radius: 4px; }

/* ── Bewegung beantwortet Fragen. Alles im no-preference-Zweig. ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  :target > h2:first-of-type, :target > .kopfblock h2, :target h3 {
    animation: heben .5s cubic-bezier(.2,.7,.3,1) backwards;
  }
  @keyframes heben { from { transform: translateY(10px); } to { transform: none; } }
}

/* ══ Hero-Muster ═══════════════════════════════════════════════════
   Zwei Varianten. `.hero.mittig` für die Startseite (ein Satz, sonst
   Luft), `.hero.seite` für die Unterseiten (linksbündig, kompakter —
   wer hier landet, hat die Startseite meist schon gesehen).          */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 6vh, 4.5rem) 0;
  /* Oberste Schicht: blendet ALLE Verläufe am unteren Rand nach Weiß aus
     (die „harte Kante"-Defektklasse aus Runde 2, Fund 2). Nötig seit
     Runde 3: Direkt unter dem Hero steht jetzt der weiße Tag-Block —
     vorher fing die Vertrauens-Sektion die grüne Unterkante mit ihrem
     eigenen Verlauf auf, und die ist ans Seitenende gezogen. Ein eigener
     Deck-Layer statt Anpassung jeder Schicht, weil auch der untere
     Radial-Schein bis an die Kante malt. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 80%, #ffffff 100%),
    radial-gradient(72% 54% at 50% 116%, rgba(14,165,233,.18) 0%, rgba(14,165,233,0) 66%),
    radial-gradient(110% 72% at 50% -16%, rgba(224,242,254,.85) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 40%, var(--blau-50) 100%);
}
/* Korn — nimmt der Fläche das Digitale */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.025'/%3E%3C/svg%3E");
}
.hero .bahn { position: relative; z-index: 1; width: 100%; }
.hero .eyebrow { color: var(--blau-700); }
.hero h1 .zeile2 { display: block; }

.hero.mittig { min-height: calc(100svh - var(--kopf-hoehe)); align-items: center; text-align: center; }
.hero.mittig .mitte { max-width: 48rem; margin-inline: auto; }
.hero.mittig h1 { font-size: min(8vw, 10vh, 5.25rem); margin-top: 1.75rem; }
.hero.mittig .fliess {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem); margin-inline: auto;
  max-width: 34rem; text-align: center; font-size: clamp(1.0625rem, 1.9vh, 1.1875rem);
}
.hero.mittig .taten {
  margin-top: clamp(1.875rem, 4.5vh, 3rem); display: flex; flex-wrap: wrap;
  gap: 1.25rem; align-items: center; justify-content: center;
}
.hero.mittig .beleg {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; justify-content: center;
}

/* Der Unterseiten-Hero blendet nach Weiß aus statt in Grün zu enden:
   sonst steht unter ihm eine harte Kante ins Weiße, und die liest sich
   als Fehler statt als Absicht (dasselbe Muster wie in Runde 1). */
.hero.seite {
  min-height: min(34rem, calc(100svh - var(--kopf-hoehe)));
  background:
    radial-gradient(80% 60% at 18% 106%, rgba(14,165,233,.15) 0%, rgba(14,165,233,0) 62%),
    radial-gradient(110% 80% at 68% -20%, rgba(224,242,254,.9) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #ffffff 0%, var(--blau-50) 52%, #ffffff 100%);
}
.hero.seite .mitte { max-width: 40rem; }
/* 4,5rem statt 4rem: bei 4rem landeten zwei Unterseiten beim Verhältnis
   3,8 zum Fließtext — genau der Wert, den in der Kontrollgruppe keine
   schwache Betriebsseite überschreitet. Über 4 ist das Positivsignal. */
/* Untergrenze 2.125rem (B3, Runde 2): bei min() allein fiel die Zeile auf
   390 px auf 27 px gegen 22 px Fließtext — Sprung 1,2:1, Korpus mobil ≥ 1,5. */
.hero.seite h1 { font-size: clamp(2.125rem, min(7vw, 8.8vh), 4.5rem); margin-top: 1.25rem; }
.hero.seite .fliess { margin-top: 1.375rem; font-size: clamp(1.0625rem, 1.8vh, 1.1875rem); }
.hero.seite .taten { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.hero.seite .beleg { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }

/* Beleg-Zeile mit Häkchen */
.beleg { font-size: .875rem; color: var(--tinte-600); }
.beleg span { display: inline-flex; align-items: center; gap: .4375rem; }
.beleg svg { width: .875rem; height: .875rem; stroke: var(--blau-600); flex: none; }

/* ══ Sektionsköpfe ══ */
.kopfblock { max-width: 40rem; }
.kopfblock.zentriert { margin-inline: auto; text-align: center; }
.kopfblock .eyebrow { color: var(--blau-700); }
.kopfblock h2 { font-size: clamp(1.75rem, 4.2vw, 2.875rem); margin-top: 1rem; }
.kopfblock p { margin-top: 1.125rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-700); }
.kopfblock.zentriert p { margin-inline: auto; }

/* ══ Belegstück — die Karte, die eine Aussage nachprüfbar macht ══ */
.stueck {
  border: 1px solid var(--tinte-200); border-radius: 1rem; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 20px 44px -34px rgba(15,23,42,.3);
  overflow: hidden;
}
.stueck .kopfzeile {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8125rem 1.125rem; border-bottom: 1px solid var(--tinte-200);
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte-500);
}
.stueck .kopfzeile.leasing { background: var(--lila-50); color: var(--lila-700); }
.stueck .kopfzeile.status  { background: var(--gruen-50); color: var(--gruen-800); }
.stueck .kopfzeile.plan    { background: var(--blau-50);  color: var(--blau-800); }
.stueck .kopfzeile.teile   { background: var(--indigo-50);color: var(--indigo-700); }
.stueck .kopfzeile.wartet  { background: var(--amber-50); color: var(--amber-700); }
.stueck dl { margin: 0; padding: .25rem 1.125rem 1rem; }
.stueck .paar {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: .875rem;
  padding: .6875rem 0; border-bottom: 1px solid var(--tinte-100);
}
.stueck .paar:last-child { border-bottom: 0; }
.stueck dt {
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte-500); padding-top: .125rem;
}
.stueck dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tinte-800); }
@media (max-width: 520px) { .stueck .paar { grid-template-columns: 1fr; gap: .25rem; } }

/* Auslastungsbalken (Planung) */
.mech { padding: .75rem 0; border-bottom: 1px dashed var(--tinte-200); }
.mech:last-of-type { border-bottom: 0; }
.mech-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mech-zeile .name { font-weight: 500; font-size: .9375rem; }
.mech-zeile .last { font-family: "PlexMono", monospace; font-size: .75rem; color: var(--tinte-500); }
.balken { margin-top: .5rem; height: .5rem; border-radius: 999px; background: var(--tinte-100); overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 999px; background: var(--blau-500); }
.balken i.voll { background: var(--amber-500); }
.stueck .plan-koerper { padding: 1rem 1.125rem 1.125rem; }

/* Nachricht an den Kunden */
.nachricht { padding: 1.125rem; }
.nachricht .blase {
  background: var(--gruen-50); border: 1px solid var(--gruen-200);
  border-radius: 1rem 1rem 1rem .25rem; padding: .875rem 1rem;
  font-size: .9375rem; color: var(--gruen-800); max-width: 24rem;
}
.nachricht .blase + .blase { margin-top: .625rem; }
.nachricht .blase.werkstatt {
  background: var(--tinte-50); border-color: var(--tinte-200); color: var(--tinte-800);
  border-radius: 1rem 1rem .25rem 1rem; margin-left: auto;
}
.nachricht .absender {
  margin-top: .625rem; font-family: "PlexMono", monospace; font-size: .625rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-500);
}

/* Zwei Empfänger, zwei Summen */
.teilung { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tinte-200); }
.teilung > div { background: #fff; padding: 1rem 1.125rem 1.125rem; }
.teilung .rolle {
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte-500);
}
.teilung .summe {
  margin-top: .4375rem; font-family: "Fraunces", serif; font-size: 1.5rem;
  font-weight: 500; letter-spacing: -.01em; color: var(--tinte-900);
}
.teilung .wohin { margin-top: .3125rem; font-size: .8125rem; color: var(--tinte-500); }

/* ══ Vertrauens-Sektion (Startseite + Unterseiten) ══ */
.vertrauen { padding: clamp(4rem, 9vw, 7rem) 0 0; text-align: center; }
.vertrauen.unterm-hero { background: linear-gradient(180deg, var(--blau-50) 0%, rgba(255,255,255,0) 38%); }
.vertrauen blockquote {
  font-family: "Fraunces", serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.22; letter-spacing: -.015em;
  color: var(--tinte-900); max-width: 26ch; margin-inline: auto;
}
.vertrauen figcaption { margin-top: 1.25rem; font-size: .9375rem; color: var(--tinte-500); }
.wer {
  margin: clamp(2.75rem, 6vw, 4rem) auto 0; max-width: 42rem;
  padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--tinte-200);
}
.wer .eyebrow { color: var(--blau-700); }
.wer p { margin: 1rem auto 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-700); }
.wer strong { color: var(--tinte-900); font-weight: 600; }

/* ══ Zeilenliste — Bereichsmarke links, Aussage rechts ══ */
.zeilenliste { border-top: 1px solid var(--tinte-200); }
.zeilenliste li {
  display: grid; gap: .375rem 1.5rem; align-items: baseline;
  padding: 1.375rem 0; border-bottom: 1px solid var(--tinte-200);
}
@media (min-width: 780px) { .zeilenliste li { grid-template-columns: 9.5rem 1fr; } }
.bereich {
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .09em;
  text-transform: uppercase; border-radius: 999px; padding: .3125rem .6875rem;
  justify-self: start; white-space: nowrap;
}
.bereich.kunde   { color: var(--gruen-800); background: var(--gruen-50); }
.bereich.planung { color: var(--blau-800);  background: var(--blau-50); }
.bereich.leasing { color: var(--lila-700);  background: var(--lila-50); }
.bereich.teile   { color: var(--indigo-700);background: var(--indigo-50); }
.bereich.wartet  { color: var(--amber-700); background: var(--amber-50); }
.bereich.werkbank{ color: var(--tinte-700); background: var(--tinte-100); }
.zeilenliste .sache { font-size: 1.0625rem; line-height: 1.6; color: var(--tinte-700); max-width: 34rem; }
.zeilenliste .sache b { font-weight: 600; color: var(--tinte-900); }

/* ══ Die drei Pakete — Größen-Selbstauswahl ══════════════════════════
   Auf der Startseite kompakt, auf /werkstatt ausführlich. Inhalt und
   Merkzeilen stammen aus dem Größen-Router der alten Seite (von Ben
   abgenommen); keine Preise — No-Public-Pricing gilt weiter.          */
.pakete { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 820px) { .pakete { grid-template-columns: repeat(3, 1fr); } }
.pakete li { border-top: 2px solid var(--tinte-900); padding-top: 1.125rem; position: relative; }
.pakete .stufe {
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--blau-700);
}
.pakete .name {
  display: block; margin-top: .625rem;
  font-family: "Fraunces", serif; font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem); line-height: 1.2; color: var(--tinte-900);
  max-width: 16ch;
}
.pakete p { margin-top: .75rem; font-size: .9375rem; line-height: 1.6; color: var(--tinte-700); }
/* Merkzeile der Pakete. Lag bis Runde 3 bei .625rem = 10 px und war damit
   die einzige Stelle der Seite unter der 14-px-Hausregel — beim Mobil-Messlauf
   dreimal gemeldet. Jetzt .875rem; das Versalsatz-Bild bleibt, die Zeile ist
   lesbar. */
.pakete .formel {
  display: block; margin-top: .875rem;
  font-family: "PlexMono", monospace; font-size: .875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinte-500); line-height: 1.55;
}
.pakete .empfehlung {
  position: absolute; top: -.6875rem; right: 0;
  font-family: "PlexMono", monospace; font-size: .5625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blau-800); background: var(--blau-50);
  border: 1px solid var(--blau-200); border-radius: 999px; padding: .25rem .5625rem;
}

/* ══ Schluss: die Handlung, dunkel ══
   Navy-Moment (Konzept 2026-08-26): derselbe Grund wie die dunklen Kacheln
   der Werkstattansicht (kuko-kpi-dark, #0f172a → #1e293b) mit Sky-Schein.
   Seit Runde 2 (B5) full-bleed: das ::before bricht auf Fensterbreite aus
   und läuft ohne weiße Naht in den Navy-Fuß — EIN dunkles Seitenende. */
.schluss {
  position: relative;
  margin-top: clamp(4.5rem, 10vw, 8rem); text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  color: #fff;
}
.schluss::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; margin-left: -50vw; z-index: -1;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(56,189,248,.22) 0%, rgba(56,189,248,0) 62%),
    linear-gradient(180deg, var(--tinte-900) 0%, var(--tinte-800) 100%);
}
/* Folgt der Fuß direkt auf den Schluss, schließt er nahtlos an. */
.schluss + .fuss { margin-top: 0; }
.schluss + .fuss::before {
  background: var(--tinte-800);
  border-top: 1px solid rgba(255,255,255,.12);
}
.schluss .eyebrow { color: var(--blau-300); }
.schluss h2 {
  font-family: "Fraunces", serif; font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.08; margin-top: 1rem;
  max-width: 18ch; margin-inline: auto;
}
.schluss p { margin: 1.25rem auto 0; max-width: 34rem; color: rgba(255,255,255,.78); line-height: 1.65; font-size: 1.0625rem; }
.schluss .taten { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: center; }
.schluss .stiller-weg { color: rgba(255,255,255,.86); border-bottom-color: rgba(255,255,255,.4); }
.schluss .stiller-weg:hover { color: #fff; border-bottom-color: var(--blau-400); }

/* ══ Fuß — navy, volle Breite (Blau-Ausbau 2026-08-26) ══
   Der Fuß steht im Markup innerhalb der .bahn; das ::before bricht auf
   Fensterbreite aus. Kein Überlauf: .buehne trägt overflow:clip. */
.fuss {
  position: relative; margin-top: 4rem; padding: 2.5rem 0 3rem;
  display: grid; gap: 1.5rem; font-size: .875rem; color: rgba(255,255,255,.65);
}
.fuss::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; margin-left: -50vw; z-index: -1;
  background: linear-gradient(180deg, var(--tinte-900) 0%, var(--tinte-800) 100%);
}
@media (min-width: 760px) { .fuss { grid-template-columns: 1fr auto; align-items: start; } }
.fuss a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.fuss a:hover { color: #fff; border-bottom-color: var(--blau-300); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss .zeile { max-width: 32rem; line-height: 1.6; }

/* ══ Screenshot-Rahmen ══════════════════════════════════════════════
   Wo liegt die Grenze zwischen Grafik und Screenshot (Entscheid 2026-08-07):
   Gebaute Grafiken bleiben, wo eine ZAHL oder ein DATENSATZ erzählt wird
   (Kapazitätsbalken, Leasing-Register, Kostenteilung) — sie sind schnell
   und klar. Echte Screenshots kommen dahin, wo die Behauptung lautet
   „so sieht die Software aus" — Auftragsmappe, aktiver Auftrag, Kunden-App.
   Eine Behauptung über echte Oberfläche braucht echte Oberfläche.        */
.schirm {
  border: 1px solid var(--tinte-200); border-radius: .875rem; overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 26px 52px -36px rgba(15,23,42,.38);
}
.schirm .adresse {
  display: flex; align-items: center; gap: .5rem;
  padding: .5625rem .875rem; background: var(--tinte-50);
  border-bottom: 1px solid var(--tinte-200);
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .06em;
  color: var(--tinte-500);
}
.schirm .adresse i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--tinte-300); }
/* height:auto ist Pflicht: die width/height-Attribute im Markup (gegen
   Layout-Springen beim Laden) fixieren sonst die Pixelhöhe, und das Bild
   wird auf Spaltenbreite verzerrt in die Länge gezogen. */
.schirm img { display: block; width: 100%; height: auto; }
.schirm.handy { max-width: 19rem; margin-inline: auto; border-radius: 1.5rem; }
/* Bildunterschriften lagen bis Runde 3 bei .625rem = 10 px und rissen damit
   die 14-px-Hausregel auf sechs von acht Seiten. In Runde 2 war das nicht
   aufgefallen, weil der Mobil-Runner seine Ergebnisse nach HOST schlüsselt:
   Ein Sammellauf über acht Seiten desselben Servers überschreibt sich und
   misst faktisch nur die letzte. Seitdem wird einzeln gemessen. */
.bildunter {
  margin-top: .875rem; font-family: "PlexMono", monospace; font-size: .875rem;
  /* tinte-600 statt -500: am gerenderten Pixel lag die Zeile bei 4,32:1
     (Bildkante hellt den Grund auf) — unter der 4,5er-Hausregel. */
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-600);
}

/* ══ Formular — Kästchen, keine Unterstriche ══ */
.formular { display: grid; gap: 1.125rem; }
@media (min-width: 640px) { .formular .paarweise { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; } }
.feld { display: block; }
.feld > span {
  display: block; margin-bottom: .4375rem;
  font-family: "PlexMono", monospace; font-size: .625rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinte-600);
}
.feld input, .feld textarea, .feld select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinte-900);
  background: #fff; border: 1px solid var(--tinte-300); border-radius: .75rem;
  padding: .75rem .875rem;
  transition: border-color .18s linear, box-shadow .18s linear;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--blau-500); box-shadow: 0 0 0 3px rgba(14,165,233,.16); outline: none;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.formular .hinweis { font-size: .875rem; color: var(--tinte-500); line-height: 1.6; }

/* ── Die Aussage-Säule ────────────────────────────────────────────────
   Auf der Startseite die Diagnose („Software hast du vielleicht schon"),
   auf /werkstatt die Einordnung vor dem Datenblatt. Linksbündige Textsäule
   ohne Kasten, ohne Icon, ohne Warnfarbe — sie bricht die zentrierten
   Sektionen und liest sich als Aussage, nicht als Claim. Der letzte Satz
   trägt den Schluss und steht deshalb an der Kante.                      */
/* Eigener Grundton über die volle Breite: In der Sichtprüfung sah der Kopf
   der Diagnose aus wie der Kopf der Durchsicht darunter — zwei linksbündige
   Textsäulen hintereinander, dazwischen eine leere rechte Hälfte. Das Band
   macht aus der leeren Fläche die Fläche der Sektion und trennt die beiden
   Signaturen, ohne Tapete an die freie Stelle zu hängen. */
.diagnose, .einordnung {
  padding: clamp(4rem, 8vw, 6rem) 0; margin-top: clamp(4.5rem, 10vw, 8rem);
  background: linear-gradient(180deg, var(--blau-50) 0%, #f6fbff 100%);
  border-top: 1px solid var(--blau-100); border-bottom: 1px solid var(--blau-100);
}
.diagnose .mitte-schmal, .einordnung .mitte-schmal { max-width: 44rem; }
.diagnose .eyebrow, .einordnung .eyebrow { color: var(--blau-700); }
.diagnose h2, .einordnung h2 { font-size: clamp(1.75rem, 4.2vw, 2.875rem); margin-top: 1rem; }
.diagnose .satz, .einordnung .satz {
  margin-top: 1.375rem; max-width: 36rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.62; color: var(--tinte-700);
}
.diagnose .satz.betont-zeile, .einordnung .satz.betont-zeile {
  margin-top: 1.75rem; padding-left: 1.125rem; border-left: 2px solid var(--blau-500);
  color: var(--tinte-900);
}

/* ── Produktwelt-Bausteine (Konzept 2026-08-26) ─────────────────────────
   Seit dem vollen Blau-Commit sind die Blau-Akzente der Default oben —
   `produkt` schaltet nur noch die schweren Geschütze: den dunklen
   Banner-Hero und die KPI-Kopfzeile. */
/* Der dunkle Hero IST der Modulkopf der App: derselbe Sky-Verlauf wie der
   „Digitale Auftragsmappe"-Banner (kuko-hero-sky), nach unten auf blau-700
   gedeckelt, damit Weiß überall ≥ 4,5:1 misst. Die Kante zum weißen Inhalt
   darunter ist Absicht — ein Banner endet hart. Gilt für .seite UND .mittig
   (Startseite, Blau-Ausbau 2026-08-26). */
.hero.dunkel {
  background:
    radial-gradient(90% 70% at 78% -12%, rgba(125,211,252,.30) 0%, rgba(125,211,252,0) 60%),
    linear-gradient(160deg, var(--blau-900) 0%, var(--blau-800) 55%, var(--blau-700) 100%);
}
.hero.dunkel h1 { color: #fff; }
.hero.dunkel .betont { color: var(--blau-200); }
.hero.dunkel .eyebrow { color: var(--blau-200); }
.hero.dunkel .fliess { color: rgba(255,255,255,.88); }
.hero.dunkel .beleg { color: rgba(255,255,255,.82); }
.hero.dunkel .beleg svg { stroke: var(--gruen-400); }
.hero.dunkel .stiller-weg { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.hero.dunkel .stiller-weg:hover { color: #fff; border-bottom-color: var(--blau-300); }
/* Auf dunklem Grund gewinnt der weiße Knopf — blau-700 auf blau-800 hebt
   sich nicht ab. Text blau-800 auf Weiß = 6,8:1. */
.hero.dunkel .handlung { background: #fff; color: var(--blau-800); box-shadow: 0 10px 30px -12px rgba(2,20,35,.6); }
.hero.dunkel .handlung:hover { background: var(--blau-50); box-shadow: 0 12px 32px -12px rgba(2,20,35,.65); }

/* Das Plan-Belegstück zitiert die KPI-Kachel der App (kuko-kpi-sky) —
   nicht Pastell, sondern die echte Kachelfarbe, weiß beschriftet. */
.produkt .stueck .kopfzeile.plan {
  background: linear-gradient(135deg, var(--blau-800) 0%, var(--blau-700) 100%);
  color: #fff;
}

/* ── Die App-Bühne: das Navy-Feld, auf dem das Produkt auftritt ──
   Volle Breite, einmal pro Seite, an der Stelle, die es verdient
   (Feldwechsel ist ein Ereignis, kein Takt). Grund = kuko-kpi-dark. */
.buehne-app {
  margin-top: clamp(4.5rem, 10vw, 8rem);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 60%),
    linear-gradient(180deg, var(--tinte-900) 0%, var(--tinte-800) 100%);
  color: #fff;
}
.buehne-app .eyebrow { color: var(--blau-300); }