/* ══ 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-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;
}
.betont { font-style: italic; color: var(--gruen-700); }
.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;
}
.kopf nav { display: flex; gap: 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;
  transition: color .18s linear, border-bottom-color .18s linear;
}
.kopf nav a:hover { color: var(--gruen-700); border-bottom-color: var(--gruen-500); }
.kopf nav a[aria-current="page"] { color: var(--gruen-700); border-bottom-color: var(--gruen-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(--gruen-700); border-color: var(--gruen-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(--gruen-700); border-color: var(--gruen-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(--gruen-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; }
}
/* 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(--gruen-700); color: #fff; text-decoration: none;
  font-size: .9375rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(4,120,87,.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. ──
   Grund gruen-700, nicht gruen-600: Weiß auf #059669 misst 3,77:1. */
.handlung {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gruen-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(4,120,87,.2), 0 8px 24px -12px rgba(4,120,87,.5);
  transition: background .18s linear, box-shadow .18s linear;
}
.handlung:hover { background: var(--gruen-800); box-shadow: 0 1px 2px rgba(4,120,87,.25), 0 12px 28px -12px rgba(4,120,87,.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(--gruen-700); border-bottom-color: var(--gruen-500); }
*:focus-visible { outline: 2px solid var(--gruen-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(16,185,129,.2) 0%, rgba(16,185,129,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(--gruen-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(--gruen-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(16,185,129,.16) 0%, rgba(16,185,129,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(--gruen-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. */
.hero.seite h1 { font-size: 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(--gruen-600); flex: none; }

/* ══ Sektionsköpfe ══ */
.kopfblock { max-width: 40rem; }
.kopfblock.zentriert { margin-inline: auto; text-align: center; }
.kopfblock .eyebrow { color: var(--gruen-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(--gruen-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(--gruen-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(--gruen-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(--gruen-800); background: var(--gruen-50);
  border: 1px solid var(--gruen-200); border-radius: 999px; padding: .25rem .5625rem;
}

/* ══ Schluss: die Handlung, dunkel ══ */
.schluss {
  margin-top: clamp(4.5rem, 10vw, 8rem); text-align: center;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 1.5rem;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(52,211,153,.2) 0%, rgba(52,211,153,0) 62%),
    linear-gradient(180deg, var(--tinte-900) 0%, var(--tinte-800) 100%);
  color: #fff;
}
.schluss .eyebrow { color: var(--gruen-400); }
.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(--gruen-400); }

/* ══ Fuß ══ */
.fuss {
  border-top: 1px solid var(--tinte-200); margin-top: 4rem; padding: 2.5rem 0 3rem;
  display: grid; gap: 1.5rem; font-size: .875rem; color: var(--tinte-500);
}
@media (min-width: 760px) { .fuss { grid-template-columns: 1fr auto; align-items: start; } }
.fuss a { color: var(--tinte-700); text-decoration: none; border-bottom: 1px solid var(--tinte-300); }
.fuss a:hover { color: var(--gruen-700); border-bottom-color: var(--gruen-500); }
.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;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-500);
}

/* ══ 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(--gruen-500); box-shadow: 0 0 0 3px rgba(16,185,129,.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: var(--tinte-50);
  border-top: 1px solid var(--tinte-200); border-bottom: 1px solid var(--tinte-200);
}
.diagnose .mitte-schmal, .einordnung .mitte-schmal { max-width: 44rem; }
.diagnose .eyebrow, .einordnung .eyebrow { color: var(--gruen-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(--gruen-500);
  color: var(--tinte-900);
}