/* ===== Schriften (aus fonts.css eingefügt: spart eine Anfrage im
   kritischen Ladepfad — vorher HTML -> fonts.css -> woff2) ===== */


/* ============================================================
   hidden muss hidden bleiben.

   Die Browser-Voreinstellung [hidden] { display: none } wird von jeder
   Klassenregel mit display überstimmt, weil Autoren-Stylesheets Vorrang
   haben. Konkret blieb dadurch der Zurück-Knopf im Website-Check auf
   Frage 1 sichtbar, obwohl das Skript ihn korrekt auf hidden gesetzt
   hatte — .btn { display: inline-flex } hat gewonnen.

   Die Regel steht bewusst ganz oben und mit !important: Sie ist keine
   Gestaltung, sondern stellt eine Grundannahme wieder her, auf die sich
   das gesamte Skript verlässt.
   ============================================================ */
[hidden] { display: none !important; }

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   DS Webdesign Portfolio — Design Tokens
   Editorial Serif × Warm Minimalism
   ============================================================ */

:root {
  color-scheme: light;

  /* Farben — Bordeaux Editorial auf Weiß */
  --bg: #FFFFFF;
  --bg-soft: #F0EEEC;
  --surface: #F6F4F2;
  --ink: #2A171B;
  --ink-soft: #6B5458;
  /* Auf --bg reichten #856E73 noch (4,69:1), auf --surface aber nur 4,28:1 —
     unter AA. Eine Spur dunkler erfüllt beide Hintergründe (5,12 und 4,67). */
  --ink-faint: #7F686D;
  --accent: #7C2231;
  --accent-ink: #F8F2EC;
  --accent-blush: #D9848F;
  --dp-blue: #1F3BC7;
  --eoa-taupe: #8A8071;
  --eoa-cream: #EFEAE2;

  /* RGB-Kanäle für Transparenzen — damit Tints im Dark Mode mitschalten */
  --ink-rgb: 42 23 27;
  --bg-rgb: 255 255 255;
  --border: rgb(var(--ink-rgb) / 0.12);

  /* Dunkle Bänder (Projekte, Kontakt, Mobile-Menü) — in beiden Modi dunkel */
  --band-bg: #2A171B;
  --band-ink: #F8F2EC;

  /* Hero: weicher Grundverlauf + Lichtflecken darüber */
  --hero-bg:
    radial-gradient(120% 90% at 88% 8%, rgb(124 34 49 / 0.07) 0%, transparent 55%),
    radial-gradient(90% 70% at 4% 92%, rgb(217 132 143 / 0.09) 0%, transparent 60%),
    linear-gradient(168deg, #FBF6F3 0%, #FFFFFF 52%, #F7F2EF 100%);
  --glow-1: rgb(206 192 184 / 0.55);
  --glow-2: rgb(124 34 49 / 0.1);
  --glow-3: rgb(217 132 143 / 0.18);
  /* Helligkeit der Projekt-Screenshots (im Dark Mode leicht gedämpft) */
  --shot-filter: none;

  /* Typografie */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing (spacious scale) */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  /* Sektions-Rhythmus — EIN Abstand für die ganze Website.
     Bewusst als margin-bottom, NICHT als padding oben+unten: sonst addieren
     sich die Innenabstände zweier Sektionen und der Abstand wäre doppelt.
     --band-pad ist der Innenabstand von Sektionen MIT Hintergrundfläche,
     damit die Farbe nicht am Text klebt. */
  --section-gap: clamp(4.5rem, 10vw, 9.375rem);
  --band-pad: clamp(3.25rem, 6vw, 5.5rem);

  /* Seitenraster — eine Flucht für Header, Hero und alle Sektionen */
  --page-max: 100rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Sonstiges */
  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 2.5rem;
  --header-h: 5rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Dark Mode — dieselbe Bordeaux-CI, nur invertiert.
   Ein Inline-Skript im <head> setzt data-theme, bevor gerendert
   wird (kein Aufblitzen). Voreinstellung = Systemeinstellung.
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #191113;
  --bg-soft: #201619;
  --surface: #241A1D;
  --ink: #F2EBE8;
  --ink-soft: #BFACAF;
  --ink-faint: #9C888C;
  /* Bordeaux wird auf dunklem Grund aufgehellt, sonst nicht lesbar */
  --accent: #DE909D;
  --accent-ink: #24151A;
  --accent-blush: #E5A6B0;
  --dp-blue: #7A8CEB;
  --eoa-taupe: #A69B8A;
  --eoa-cream: #2A1F22;

  --ink-rgb: 242 235 232;
  --bg-rgb: 25 17 19;
  --border: rgb(var(--ink-rgb) / 0.14);

  /* Bänder bleiben dunkel, setzen sich aber vom Seitengrund ab */
  --band-bg: #120C0E;
  --band-ink: #F8F2EC;

  --hero-bg:
    radial-gradient(120% 90% at 88% 8%, rgb(222 144 157 / 0.1) 0%, transparent 55%),
    radial-gradient(90% 70% at 4% 92%, rgb(124 34 49 / 0.22) 0%, transparent 60%),
    linear-gradient(168deg, #221619 0%, #191113 55%, #1E1417 100%);
  --glow-1: rgb(120 90 98 / 0.22);
  --glow-2: rgb(222 144 157 / 0.1);
  --glow-3: rgb(90 74 80 / 0.28);
  --shot-filter: brightness(0.88) contrast(1.02);
}

/* Ohne JavaScript greift die Systemeinstellung direkt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #191113;
    --bg-soft: #201619;
    --surface: #241A1D;
    --ink: #F2EBE8;
    --ink-soft: #BFACAF;
    --ink-faint: #9C888C;
    --accent: #DE909D;
    --accent-ink: #24151A;
    --accent-blush: #E5A6B0;
    --dp-blue: #7A8CEB;
    --eoa-taupe: #A69B8A;
    --eoa-cream: #2A1F22;
    --ink-rgb: 242 235 232;
    --bg-rgb: 25 17 19;
    --border: rgb(var(--ink-rgb) / 0.14);
    --band-bg: #120C0E;
    --band-ink: #F8F2EC;
    --hero-bg:
      radial-gradient(120% 90% at 88% 8%, rgb(222 144 157 / 0.1) 0%, transparent 55%),
      radial-gradient(90% 70% at 4% 92%, rgb(124 34 49 / 0.22) 0%, transparent 60%),
      linear-gradient(168deg, #221619 0%, #191113 55%, #1E1417 100%);
    --glow-1: rgb(120 90 98 / 0.22);
  --glow-2: rgb(222 144 157 / 0.1);
    --glow-3: rgb(90 74 80 / 0.28);
    --shot-filter: brightness(0.88) contrast(1.02);
  }
}

/* ============ Reset & Base ============ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* iOS: kein blaues Antipp-Highlight auf interaktiven Elementen */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Sprunglink: unsichtbar, bis er per Tab fokussiert wird. Erspart
   Tastaturnutzern auf jeder Seite den Weg durch die ganze Navigation. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: translate 0.2s var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; outline-offset: -3px; }

/* Nur für Screenreader — sichtbar für Technik, unsichtbar für das Auge */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 450;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ============ Preloader & Seitenübergang ============ */

/* Overlay-Farbe für beide Overlays — einfarbig, kein Verlauf */
:root { --overlay-bordeaux: #2A171B; }

/* Scroll-Lock, solange ein Overlay läuft (per Inline-Head-Script gesetzt) */
html.is-loading, html.is-loading body { overflow: hidden; }

/* ---- Startseite: Asterisk-Preloader (spielt bei jedem Aufruf) ---- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--overlay-bordeaux);
  will-change: transform;
  transition: transform 0.8s var(--ease-out);
}
/* Vorhang fährt nach unten weg und gibt die Seite frei */
.preloader.is-done { transform: translateY(100%); }

.preloader-mark {
  width: clamp(72px, 11vw, 116px);
  height: auto;
  overflow: visible;
  transform-origin: center;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.3));
  animation: preloaderAssemble 1.15s var(--ease-out) both;
}
.preloader-mark path {
  stroke: var(--band-ink);
  stroke-width: 40;
  stroke-linecap: butt;    /* eckige, gerade Enden statt rund */
  stroke-linejoin: miter;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: preloaderDraw 0.62s var(--ease-out) both;
}
.preloader-mark path:nth-child(1) { animation-delay: 0.12s; }
.preloader-mark path:nth-child(2) { animation-delay: 0.34s; }
.preloader-mark path:nth-child(3) { animation-delay: 0.56s; }
/* sanftes Aufatmen, nachdem das Symbol fertig gezeichnet ist */
.preloader-mark.is-settled { animation: preloaderPulse 0.9s var(--ease-out) both; }

@keyframes preloaderDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes preloaderAssemble {
  from { transform: rotate(-115deg) scale(0.55); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}
@keyframes preloaderPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---- Seitenübergang: Bordeaux-Wisch von oben nach unten ---- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--overlay-bordeaux);
  transform: translateY(-100%);
  will-change: transform;
  pointer-events: none;
}
/* deckt die Seite beim Laden ab (wird per JS nach unten hinausgewischt) */
.page-transition--covering { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .preloader-mark { animation: preloaderFadeIn 0.4s ease both; }
  .preloader-mark path { animation: none; stroke-dashoffset: 0; }
  .preloader.is-done { transform: none; }
  @keyframes preloaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
}

.section {
  padding-inline: var(--gutter);
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  margin-bottom: var(--section-gap);
}
/* Randlose Sektionen tragen die Klasse .section nicht (sie brauchen keine
   Seitenflucht) — der Rhythmus gilt für sie genauso. */
.work,
.studio-reveal,
.claim { margin-bottom: var(--section-gap); }

/* Nur das dunkle Kontakt-Band verschmilzt mit dem Footer (gleiche Farbe).
   Endet eine Seite mit einer normalen Sektion, gilt der übliche Abstand —
   sonst klebt der gerundete Footer direkt am Text. */
main > section.contact:last-child { margin-bottom: 0; }

/* Steht eine Fläche direkt über dem dunklen Kontakt-Band, entfällt der
   Abstand: ein weißer Streifen zwischen zwei farbigen Flächen sieht nach
   Versehen aus. Die Farbkante selbst ist die Trennung, und die Rundung des
   Bandes kommt auf der Fläche besser zur Wirkung. */
.section--surface:has(+ .contact) { margin-bottom: 0; }

/* ============================================================
   Einwilligung

   Kein Plugin-Kasten, sondern dieselbe dunkle Bahn, mit der die Website
   ohnehin ihre Abschlüsse setzt — gleiche Fläche, gleiche Typografie,
   gleiche Knopfsprache, eckig wie alles außer dem Footer.
   ============================================================ */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;                 /* über dem schwebenden Knopf (95) */
  background: var(--band-bg);
  color: var(--band-ink);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -18px 40px rgb(0 0 0 / 0.18);
  /* Auf sehr flachen Fenstern (Telefon quer) würde die Einstellungsansicht
     sonst über den oberen Rand hinauslaufen. */
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: consentHerein 0.45s var(--ease-out) both;
}
@keyframes consentHerein { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

.consent-inner {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(1.35rem, 3vw, 2.15rem) var(--gutter);
}

.consent-ansicht { display: grid; gap: var(--space-md); align-items: end; }
@media (min-width: 900px) {
  .consent-ansicht { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); }
  /* Einstellungen tragen drei Blöcke statt zwei: links Überschrift und
     Aktionen untereinander, rechts die beiden Kategorien nebeneinander.
     Ohne eigenes Raster fiele der dritte Block in eine leere Zeile. */
  .consent-ansicht[data-ansicht="details"] {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-md) var(--space-xl);
    align-items: start;
  }
  .consent-ansicht[data-ansicht="details"] .consent-text { grid-column: 1; grid-row: 1; }
  .consent-ansicht[data-ansicht="details"] .consent-gruppen { grid-column: 2; grid-row: 1 / span 2; }
  .consent-ansicht[data-ansicht="details"] .consent-aktionen { grid-column: 1; grid-row: 2; }
}

.consent-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-blush, #E8C8CE);
}
.consent-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--band-ink);
  margin: 0 0 0.5rem;
}
.consent-text p { margin: 0; max-width: 58ch; color: rgb(242 235 232 / 0.82); }
/* Auf dem Telefon nahm der Hinweis knapp 60 % des Bildschirms ein. Der Text
   bleibt vollständig — er ist die Information, um die es geht — aber eine
   Stufe kleiner und dichter gesetzt. */
@media (max-width: 699px) {
  .consent-inner { padding-block: 1.05rem; }
  .consent-ansicht { gap: 0.9rem; }
  .consent-titel { font-size: 1.2rem; margin-bottom: 0.35rem; }
  .consent-eyebrow { font-size: 0.68rem; margin-bottom: 0.2rem; }
  .consent-text p { font-size: 0.9rem; line-height: 1.45; }
  .consent-text p + p { margin-top: 0.4rem; }
  .consent-klein { font-size: 0.78rem; }
}
.consent-text p + p { margin-top: 0.55rem; }
.consent-klein { font-size: 0.85rem; color: rgb(242 235 232 / 0.62) !important; }
.consent-klein a { color: var(--band-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.consent-klein a:hover { color: var(--accent-blush, #E8C8CE); }

.consent-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}
@media (min-width: 900px) {
  .consent-aktionen { flex-direction: column; align-items: stretch; gap: 0.6rem; }
}

/* Drei Stufen, drei Formen — keine drei Textlinks:

   Zustimmen ist gefüllt, Ablehnen umrandet, Einstellungen schlicht. Der
   Unterschied liegt in der Fläche, nicht im Kontrast: Alle drei sind gleich
   gut lesbar und gleich groß anklickbar. Ein blasser Ablehnen-Knopf wäre
   keine Einwilligung, sondern eine Falle. */
.consent .consent-ja {
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  background: var(--band-ink);
  color: var(--band-bg);
  font-weight: 600;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.consent .consent-ja:hover {
  background: var(--accent-blush, #E8C8CE);
  color: var(--band-bg);
}

.consent-nein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--band-ink);
  background: none;
  border: 1px solid rgb(242 235 232 / 0.55);
  cursor: pointer;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out);
}
.consent-nein:hover {
  color: var(--accent-blush, #E8C8CE);
  border-color: var(--accent-blush, #E8C8CE);
  background: rgb(242 235 232 / 0.06);
}

.consent-mehr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  margin-inline: -0.75rem;          /* optisch bündig, Fläche trotzdem groß */
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(242 235 232 / 0.8);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-color: rgb(242 235 232 / 0.4);
  transition: color 0.25s var(--ease-out);
}
.consent-mehr:hover { color: var(--accent-blush, #E8C8CE); }

/* Auf dem Telefon teilen sich Zustimmen und Ablehnen eine Zeile;
   „Einstellungen" steht darunter. Das spart eine Zeile Höhe, ohne die
   Flächen zu verkleinern. */
@media (max-width: 899px) {
  .consent .consent-ja,
  .consent-nein { flex: 1 1 9rem; }
  .consent-mehr { flex: 1 0 100%; justify-content: flex-start; }
}
/* Damit Zustimmen und Ablehnen auf dem Telefon in eine Zeile passen, statt
   drei Reihen zu bilden: Der Pfeil trägt hier keine Information, und die
   Innenabstände dürfen enger sein — die Klickfläche bleibt bei 44 px. */
@media (max-width: 560px) {
  .consent .consent-ja .btn-icon { display: none; }
  .consent .consent-ja,
  .consent-nein {
    min-height: 46px;
    padding: 0.5rem 0.6rem;
    font-size: 0.9375rem;
  }
  .consent .consent-ja { justify-content: center; }
  .consent-aktionen { gap: 0.5rem; }
}

/* --- Einstellungen --- */
.consent-gruppen { display: grid; gap: var(--space-sm); }
@media (min-width: 700px) { .consent-gruppen { grid-template-columns: 1fr 1fr; gap: var(--space-md); } }
.consent-gruppe {
  padding-top: 0.85rem;
  border-top: 1px solid rgb(242 235 232 / 0.22);
}
.consent-gruppe p {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(242 235 232 / 0.7);
  max-width: 44ch;
}
.consent-gruppe-kopf { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.consent-gruppe-name { font-weight: 600; font-size: 0.95rem; color: var(--band-ink); }
.consent-immer {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(242 235 232 / 0.55);
}

.consent-schalter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  min-height: 44px;
}
.consent-schalter input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.consent-schalter-spur {
  flex: none;
  width: 46px;
  height: 26px;
  background: rgb(242 235 232 / 0.18);
  border: 1px solid rgb(242 235 232 / 0.3);
  position: relative;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.consent-schalter-spur::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--band-ink);
  transition: translate 0.25s var(--ease-out);
}
.consent-schalter input:checked + .consent-schalter-spur {
  background: var(--accent-blush, #E8C8CE);
  border-color: var(--accent-blush, #E8C8CE);
}
.consent-schalter input:checked + .consent-schalter-spur::after {
  translate: 20px 0;
  background: var(--band-bg);
}
.consent-schalter input:focus-visible + .consent-schalter-spur {
  outline: 3px solid var(--accent-blush, #E8C8CE);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .consent-schalter-spur,
  .consent-schalter-spur::after { transition: none; }
}

/* Der schwebende Knopf weicht dem Panel aus, statt sich dahinter zu
   verstecken. Die Höhe meldet das Skript. */
html[data-consent-offen] .fab {
  bottom: calc(var(--consent-hoehe, 0px) + clamp(1rem, 3vw, 2rem));
}

/* ============================================================
   Zurück nach oben

   Links unten, damit rechts der schwebende Knopf und auf dem Telefon der
   Daumenbereich frei bleiben. Eckig wie alles außer dem Footer, in der
   Sprache der Sekundärknöpfe: Linie statt Fläche. Auf dem Desktop mit
   Wort, auf dem Telefon nur der Pfeil — dort zählt die Fläche, nicht die
   Beschriftung (das Wort steht dann im aria-label).
   ============================================================ */

.nach-oben {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: calc(var(--consent-hoehe, 0px) + clamp(1rem, 3vw, 2rem));
  z-index: 94;                    /* unter dem Einwilligungsband (100) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40 px sichtbare Fläche, aber 44 px anklickbar: Der Rahmen darf klein
     wirken, die Trefferfläche nicht. Deshalb die unsichtbare Verbreiterung
     über ::before statt über Innenabstand. */
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink-soft);
  background: rgb(var(--bg-rgb, 255 255 255) / 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  cursor: pointer;
  /* 0,7 statt weniger: Darunter fällt der Pfeil unter 3:1 gegen den
     Seitenhintergrund und wäre als Bedienelement nicht mehr sicher
     erkennbar (WCAG 1.4.11). Zurückhaltend ja, unsichtbar nein. */
  opacity: 0.7;
  transition: opacity 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
}
.nach-oben::before {
  content: "";
  position: absolute;
  inset: -2px;                    /* 44 x 44 Trefferfläche */
}
.nach-oben svg { width: 0.9rem; height: 0.9rem; flex: none; }
.nach-oben:hover,
.nach-oben:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}
.nach-oben[hidden] { display: none; }

/* Der Knopf ist ein Werkzeug, keine Ansage — deshalb nur der Pfeil.
   Das Wort bleibt für Screenreader im aria-label und im Text. */
.nach-oben-wort {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bewusst ohne Einblend-Animation: Ein Element, dessen Sichtbarkeit an einer
   Keyframe-Animation hängt, bleibt unsichtbar, sobald Animationen aus
   irgendeinem Grund nicht laufen. Die Ruhedeckkraft steht deshalb direkt in
   der Grundregel. */

/* Fußzeile: Widerruf ist Pflicht, nicht Kür — deshalb sichtbar, aber
   in derselben Zurückhaltung wie die übrigen Fußzeilenangaben. */
.footer-consent {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(242 235 232 / 0.35);
  transition: color 0.25s var(--ease-out);
}
.footer-consent:hover { color: var(--accent-blush, #E8C8CE); }

/* ============ Buttons (minimalistisch) ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.25s;
  /* Reset für <button>-Elemente (sonst native blaue Optik) */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
}
.btn:hover { color: var(--accent); }
.btn:active .btn-icon { transform: scale(0.94); }

.btn-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out);
}
.btn-icon svg { width: 45%; height: 45%; }
.btn:hover .btn-icon { transform: translate(2px, -2px); }

.btn-primary { font-weight: 600; }

.btn-ghost {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border);
  transition: color 0.25s, text-decoration-color 0.25s;
}
.btn-ghost:hover { text-decoration-color: currentColor; }

.btn-light {
  color: var(--band-ink);
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
}
.btn-light:hover { color: var(--accent-blush); }

/* ============ Header ============ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  padding-inline: var(--gutter);
  background: transparent;
  color: var(--ink);
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.4s var(--ease-out);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  height: 100%;
}
.site-header .main-nav { grid-column: 1; justify-self: start; }
.site-header .logo { grid-column: 2; justify-self: center; }
.site-header .header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.site-header .header-cta { color: inherit; }
.site-header .header-cta:hover { color: inherit; opacity: 0.62; }
.site-header.is-scrolled {
  background: rgb(var(--bg-rgb) / 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
/* über dunklen Sektionen: heller Text, dunkler Blur-Grund */
.site-header.header--dark {
  color: var(--band-ink);
  background: rgba(28, 14, 17, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(248, 242, 236, 0.1);
}
.site-header.is-hidden { transform: translateY(-100%); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: inherit;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.logo-mark {
  flex: none;
  width: 0.9em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../DS-Symbol.svg") no-repeat center / contain;
  mask: url("../DS-Symbol.svg") no-repeat center / contain;
}
.logo-word { display: inline-block; }

/* Fallback für noch nicht rebrandete Unterseiten (Alt-Lockup) */
.logo-img {
  display: block;
  width: clamp(160px, 15vw, 200px);
  aspect-ratio: 1596 / 268;
  background-color: currentColor;
  -webkit-mask: url("../DS-Logo.svg") no-repeat left center / contain;
  mask: url("../DS-Logo.svg") no-repeat left center / contain;
}

.main-nav { display: flex; gap: var(--space-md); }
.main-nav a {
  position: relative;
  font-weight: 500;
  padding: 0.5rem 0;
  color: inherit;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0.2rem;
  height: 2px;
  background: currentColor;
  transition: right 0.3s var(--ease-out);
}
.main-nav a:hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* iOS Safari gibt <button> sonst seine blaue Systemfarbe — currentColor
     würde dann blau statt Header-Farbe sein. */
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 26px;
  margin-inline: auto;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Umschalter Hell/Dunkel */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s, opacity 0.25s, transform 0.4s var(--ease-out);
}
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Gezeigt wird immer das Ziel-Design: hell → Mond, dunkel → Sonne */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

.mobile-menu-legal a {
  /* Tippfläche vergrößern, ohne die Zeile höher zu machen: Der Innenabstand
     wird durch einen gleich großen negativen Außenabstand ausgeglichen.
     Vorher waren die beiden Links nur 19 px hoch. */
  padding: 0.7rem 0.6rem;
  margin: -0.7rem -0.6rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s;
}
.mobile-menu-legal a:active { color: var(--ink); }

/* ============ Hero ============ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) 0;
  margin-bottom: var(--section-gap);
  overflow: clip;
  background: var(--hero-bg);
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-shape { position: absolute; }
.hero-shape-1 {
  width: 60vw; height: 60vw;
  min-width: 480px; min-height: 480px;
  background: radial-gradient(closest-side, var(--glow-1), transparent);
  top: -12%; left: -18%;
}
.hero-shape-2 {
  width: 52vw; height: 52vw;
  min-width: 420px; min-height: 420px;
  background: radial-gradient(closest-side, var(--glow-2), transparent);
  bottom: -14%; right: -14%;
}
.hero-shape-3 {
  width: 34vw; height: 34vw;
  min-width: 300px; min-height: 300px;
  background: radial-gradient(closest-side, var(--glow-3), transparent);
  top: 48%; left: 14%;
}

.hero-inner {
  position: relative;
  text-align: left;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}

.hero-headline {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2.9rem, 8vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 34ch;
  text-wrap: balance;
}
.hero-headline em { color: var(--accent); font-weight: 430; }

.hero-sub {
  max-width: 34rem;
  margin: var(--space-md) 0 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ============ Sections allgemein ============ */

/* Abstand Überschrift → Inhalt: einheitlich in jeder Sektion */
.section-head { margin-bottom: clamp(2.25rem, 4.5vw, 4rem); }
.section-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}
.section-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* ============ Projekte / Arbeiten (dunkle Sektion) ============ */

.work {
  background: var(--band-bg);
  color: var(--band-ink);
  padding-block: var(--band-pad);
}
.work-inner {
  display: grid;
  gap: var(--space-lg);
  /* Der Container hat eigenes padding-inline — die Randbreite muss zur
     Maximalbreite addiert werden, sonst beginnt der Inhalt um genau
     einen Rand weiter innen als in den übrigen Sektionen. */
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.work .section-head { margin-bottom: var(--space-md); }
.work .section-eyebrow { color: var(--accent-blush); }
.work .section-title { color: var(--band-ink); }

.work-list {
  display: grid;
  border-top: 1px solid rgba(248, 242, 236, 0.16);
}

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0.75rem;
  border-bottom: 1px solid rgba(248, 242, 236, 0.16);
  color: var(--band-ink);
  isolation: isolate;
}
/* dezente Aufhellung beim Hover statt roter Vollfläche */
.work-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(248, 242, 236, 0.05);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  z-index: -1;
}

.work-index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(248, 242, 236, 0.45);
  transition: color 0.35s;
}
.work-body { display: flex; flex-direction: column; gap: 0.35rem; }
.work-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.4s var(--ease-out), color 0.35s;
}
.work-meta {
  font-size: 0.95rem;
  color: rgba(248, 242, 236, 0.6);
  transition: color 0.35s;
}
.work-year {
  font-size: 0.95rem;
  color: rgba(248, 242, 236, 0.45);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s;
}
.work-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid rgba(248, 242, 236, 0.25);
  border-radius: 50%;
  color: var(--band-ink);
  transition: transform 0.4s var(--ease-out), border-color 0.35s, color 0.35s, background-color 0.35s;
}
.work-arrow svg { width: 42%; height: 42%; }

/* Inline-Thumbnail: nur Mobile sichtbar */
.work-thumb { display: none; }

/* Desktop-Hover-Verhalten — Rot nur als Akzent */
@media (hover: hover) and (min-width: 768px) {
  .work-row:hover::before { opacity: 1; }
  .work-row:hover .work-index { color: var(--accent-blush); }
  .work-row:hover .work-name { transform: translateX(1.25rem); }
  .work-row:hover .work-arrow {
    border-color: var(--accent-blush);
    background: var(--accent-blush);
    color: var(--ink);
    transform: rotate(45deg);
  }
}

/* Cursor-folgende Bildvorschau (kompakt) */
.work-preview {
  position: fixed;
  top: 0; left: 0;
  width: clamp(11rem, 15vw, 14rem);
  border-radius: var(--radius-sm);
  overflow: clip;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  z-index: 60;
  will-change: transform, opacity;
}
.work-preview.is-visible { opacity: 1; }
.work-preview img { display: block; width: 100%; height: auto; filter: var(--shot-filter); }
@media (hover: none), (max-width: 767px) { .work-preview { display: none; } }

/* CTA-Karte */
.project-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(var(--space-md), 5vw, var(--space-lg));
  border: 1.5px solid rgba(248, 242, 236, 0.2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
.project-cta-card:hover { border-color: rgba(248, 242, 236, 0.5); background: rgba(248, 242, 236, 0.04); }
.project-cta-text {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight: 480;
  letter-spacing: -0.02em;
}
.project-cta-circle {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 7vw, 5rem);
  height: clamp(3.5rem, 7vw, 5rem);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  transition: transform 0.35s var(--ease-out);
}
.project-cta-circle svg { width: 40%; height: 40%; }
.project-cta-card:hover .project-cta-circle { transform: rotate(45deg) scale(1.08); }

/* ============ Statement ============ */

/* Über die volle Bahnbreite, in voller Tintenstärke.

   Beides musste ausdrücklich zurückgeholt werden: Die spätere Regel für
   Fließtext direkt in einer Sektion (`.section > p`) setzt Lesebreite und
   gedämpfte Farbe — sinnvoll für Absätze, falsch für eine Aussage in
   4 rem. Sie greift hier, weil dieser Absatz ein direktes Kind von
   .section ist. Der Elternselektor steht davor, weil `.section > p` sonst
   die höhere Gewichtung behält — die Reihenfolge im Stylesheet würde hier
   nicht genügen. */
.section > .statement-text {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(2rem, 4.8vw, 4.1rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: none;
  color: var(--ink);
}
.statement-text .word { opacity: 0.18; }

/* ============ Anspruch-Panel (Wort-für-Wort beim Scrollen) ============
   Randlose, bildschirmhohe Fläche. Die Zeile wird beim Durchscrollen Wort für
   Wort sichtbar — dasselbe Muster wie die Einleitung auf der Startseite.
   Ruhezustand ohne JS: alle Wörter voll sichtbar. */

.claim { position: relative; height: 220vh; }
.claim-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--band-pad) var(--gutter);
  background: var(--band-bg);
  color: var(--band-ink);
}
.claim-line {
  max-width: 46rem;
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
.claim-line .word { transition: color 0.2s linear; }

/* ============ Leistungen (Bento-Grid) ============ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  /* Drei Leistungen in einer Reihe. Eine große Kachel über zwei Reihen wurde
     von den beiden gestapelten in die Höhe gezogen und hatte dann ein Loch
     zwischen Text und Chips — gleich große Kacheln sind hier ruhiger. */
  grid-template-areas: "web web dev dev berat berat";
}
.bento-card--web { grid-area: web; }
.bento-card--dev { grid-area: dev; }
.bento-card--berat { grid-area: berat; }

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  isolation: isolate;
  transition: border-color 0.4s var(--ease-out);
}
.bento-card-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.4s var(--ease-out);
}
.bento-icon {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 0.4rem;
  color: var(--accent);
  transition: transform 0.4s var(--ease-out);
  transform-origin: left center;
}
.bento-icon svg { width: 100%; height: 100%; }
.bento-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.bento-desc {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34rem;
}
.bento-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.35rem;
}
/* Die Chips folgen direkt dem Text. Vorher hielt margin-top: auto sie am
   Kartenboden — bei gleich hohen Kacheln entstand dadurch je nach Textlänge
   ein Loch mitten im Inhalt. Restfläche sammelt sich jetzt unten, wo auch
   der Hinweis „Ansehen" einfährt. */
.bento-tags li {
  font-size: 0.82rem;
  font-weight: 400;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  color: var(--ink-faint);
  background: transparent;
}
/* Hover-CTA (fährt von unten ein) */
.bento-cta {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.bento-cta svg { width: 1.1em; height: 1.1em; }
.bento-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(var(--ink-rgb) / 0);
  transition: background-color 0.4s var(--ease-out);
}
@media (hover: hover) and (min-width: 768px) {
  .bento-card:hover {
    border-color: rgb(var(--ink-rgb) / 0.24);
  }
  .bento-card:hover .bento-card-body { transform: translateY(-2.5rem); }
  .bento-card:hover .bento-icon { transform: scale(0.82); }
  .bento-card:hover .bento-cta { opacity: 1; transform: translateY(0); }
  .bento-card:hover .bento-overlay { background: rgb(var(--ink-rgb) / 0.02); }
}

/* ============ Prozess ============ */

/* Sektion mit Fläche — randlos, Inhalt bleibt in der Seitenflucht.
   Verhindert, dass mehrere weiße Sektionen ohne Trennung aufeinanderfolgen. */
.section--surface {
  background: var(--surface);
  max-width: none;
  padding-block: var(--band-pad);
}
.section-band-inner { max-width: var(--page-max); margin-inline: auto; }

/* Fließtext direkt in einem Band: Der globale Reset nimmt Absätzen ihren
   Abstand, und ohne Lesebreite laufen sie über die volle Spalte — bei
   1168 Pixeln sind das weit über hundert Zeichen je Zeile, jenseits von
   allem, was sich angenehm liest. Beides hier nachziehen, statt es in
   jeder Seite einzeln zu setzen. */
.section-band-inner > p,
.section > p {
  max-width: 46rem;
  color: var(--ink-soft);
}
.section-band-inner > p + p,
.section > p + p { margin-top: 1.15rem; }
.section-band-inner > p strong,
.section > p strong { color: var(--ink); font-weight: 600; }

.process {
  background: var(--surface);
  max-width: none;
  padding-block: var(--band-pad);
}
.process > .section-head,
.process-grid {
  max-width: var(--page-max);
  margin-inline: auto;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) var(--space-lg);
}
.step {
  border-top: 1.5px solid var(--ink);
  padding-top: var(--space-md);
}
.step-num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  /* --ink-faint erreicht auf --surface nur 4.28:1 — knapp unter WCAG AA */
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}
.step-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.9rem;
  margin-bottom: var(--space-sm);
}
.step-title svg {
  width: 1.7rem; height: 1.7rem;
  color: var(--accent);
  flex: none;
}
.step p { color: var(--ink-soft); line-height: 1.6; }

/* ============ Über mich ============ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(var(--space-md), 5vw, var(--space-xl));
  align-items: center;
}
/* Ohne großes Portrait: Text über die volle Breite, Lesebreite bleibt begrenzt */
.about-grid--textonly { grid-template-columns: minmax(0, 62rem); }
.about-grid--textonly .about-text { max-width: 60ch; }

/* Kleines Porträt über dem Text — bewusst zurückhaltend */
.about-person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--space-md);
}
.about-person-img {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.about-person-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.about-person-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.about-person-role {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.about-visual { overflow: clip; border-radius: var(--radius-lg); }
.about-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(100% 80% at 80% 10%, #E6CFC0 0%, transparent 50%),
    linear-gradient(160deg, #3E2229 0%, #2A171B 70%);
  display: grid;
  place-items: center;
  will-change: transform;
}
.about-portrait-initials {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(5rem, 12vw, 9rem);
  color: var(--band-ink);
  opacity: 0.9;
}
.about-portrait-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.75rem;
  color: var(--band-ink);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.about-text { color: var(--ink-soft); margin-top: var(--space-sm); max-width: 34rem; }

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.stat-value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.9rem; color: var(--ink-soft); }

/* ============ Kundenstimmen — schlichte Zeilenliste ============
   Bewusst ohne Effekt, ohne Rundung, ohne Schatten: gleiche Sprache wie
   die Projekt- und Blogzeilen (Haarlinien, Zitat links, Quelle rechts). */

.quote-list { list-style: none; border-top: 1px solid var(--border); }
.quote-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border);
}
.quote-text {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 450;
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
}
.quote-source {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-top: 0.4rem;
}

/* ============ Ablauf als Zeitstrahl (Leistungsseiten) ============
   Bewusst nicht das 3-Spalten-Raster der Startseite: dort fällt ein vierter
   Schritt allein in die nächste Zeile. Senkrecht funktioniert jede Anzahl. */

.flow {
  list-style: none;
  max-width: 46rem;
  counter-reset: flow;
}
/* Folgt der Zeitstrahl direkt auf einen Absatz, fehlt sonst der Abstand.
   Nach einem .section-head bringt dieser den Abstand schon mit. */
p + .flow,
p + .article-table-wrap,
p + .compare,
p + .refs-grid,
p + .article-checklist,
p + .article-list { margin-top: var(--space-md); }
.flow-step {
  position: relative;
  counter-increment: flow;
  padding-left: clamp(3.25rem, 6vw, 4.25rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.flow-step:last-child { padding-bottom: 0; }
/* Ziffer im Kreis */
.flow-step::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--bg);
}
/* Verbindungslinie zum nächsten Schritt */
.flow-step::after {
  content: "";
  position: absolute;
  left: 1.175rem;
  top: 2.35rem;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.flow-step:last-child::after { display: none; }
/* Auf Flächen sitzt die Ziffer auf der Fläche, nicht auf Weiß */
.section--surface .flow-step::before { background: var(--surface); }
.flow-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.flow-step p {
  color: var(--ink-soft);
  max-width: 42rem;
}

/* ============ Projektreferenzen (Leistungsseiten) ============ */

.refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.ref-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: inherit;
}
.ref-visual {
  /* Festes Seitenverhältnis, damit die Kacheln gleich groß bleiben — die
     Screenshots haben unterschiedliche Höhen.
     Der Wert ist bewusst 1,92 und nicht 16/10 (1,60): Die Screenshots liegen
     zwischen 1,58 und 1,91. Bei 1,60 wurden 11 von 12 seitlich beschnitten,
     bis zu 16 % der Breite — dabei fiel Text am Rand weg. Ab 1,92 ist kein
     Bild mehr breiter als der Rahmen, beschnitten wird nur noch unten, wo
     bei einem Website-Screenshot nichts Wichtiges steht. */
  aspect-ratio: 48 / 25;
  /* Pflicht, nicht Kosmetik: Als Flex-Element bedeutet min-height: auto die
     Höhe des Inhalts. Das Bild forderte damit mehr Höhe als das
     Seitenverhältnis vorgab und setzte es außer Kraft. */
  min-height: 0;
  border-radius: var(--radius-sm);
  overflow: clip;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.3s var(--ease-out);
}
.ref-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* Kopfbereich der Website bleibt sichtbar */
  filter: var(--shot-filter);
  transition: transform 0.5s var(--ease-out);
}
.ref-card:hover .ref-visual { border-color: rgb(var(--ink-rgb) / 0.28); }
.ref-card:hover .ref-visual img { transform: scale(1.03); }
.ref-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.ref-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2;
}
.ref-year {
  font-size: 0.85rem;
  /* --ink-faint erreicht auf --surface nur 4.28:1 — knapp unter WCAG AA */
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ref-context {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  /* auf drei Zeilen begrenzen, damit die Kacheln gleich hoch bleiben */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ref-visual img { transition: none; }
  .ref-card:hover .ref-visual img { transform: none; }
}

/* ============ Roter Faden (Linie zeichnet sich beim Scrollen) ============
   Technik wie beim Logo-Aufbau: pathLength="1" + stroke-dashoffset, per
   GSAP gescrubt. Ruhezustand ohne JS: Linie und Knoten vollständig sichtbar. */

.thread-stage {
  max-width: 44rem;
  margin-inline: auto;
}
.thread-svg { width: 100%; height: auto; overflow: visible; }
.thread-line { opacity: 0.85; }
.thread-label {
  font-family: var(--font-serif);
  font-style: italic;
  /* Größe in viewBox-Einheiten: skaliert mit der SVG. Auf schmalen Schirmen
     schrumpft die SVG, deshalb dort größere Einheiten (siehe Media Query). */
  font-size: 30px;
  font-weight: 450;
  fill: var(--ink);
}
/* Ruhezustand: alles sichtbar. Erst JS setzt den Startzustand. */
.thread-node { opacity: 1; }

/* ============ Eigene Bausteine der Leistungsseiten ============ */

/* Kompakte Variante des Zeitstrahls (Ergebnis-Aufbau bei Beratung) */
.flow--compact .flow-step { padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Textvergleich (Content) */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: var(--space-md) 0;
}
.compare-side {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.compare-side--after { border-color: var(--accent); }
.compare-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.75rem;
}
.compare-side--after .compare-label { color: var(--accent); }
.compare-text {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.compare-side--before .compare-text { color: var(--ink-faint); }
.compare-note {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ============ Website-Check (geführte Standortbestimmung) ============ */

.check { max-width: 46rem; }

.check-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.check-progress-bar {
  height: 100%;
  width: 16%;
  background: var(--accent);
  transition: width 0.45s var(--ease-out);
}
.check-progress-label {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.check-step { border: none; padding: 0; margin: var(--space-lg) 0 0; }
.check-step[hidden] { display: none; }
.check-legend {
  display: block;
  padding: 0;
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.check-step-num {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.check-hint {
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.check-options {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--space-md);
}
.check-option {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.check-option:hover { border-color: rgb(var(--ink-rgb) / 0.3); }
/* Die echten Bedienelemente bleiben erhalten (Tastatur, Screenreader),
   sind aber optisch durch .check-option-box ersetzt. */
.check-option input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.check-option-box {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border: 1.5px solid rgb(var(--ink-rgb) / 0.35);
  border-radius: 50%;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.check-option input[type="checkbox"] ~ .check-option-box { border-radius: 4px; }
.check-option-text { line-height: 1.45; }
.check-option:has(input:checked) {
  border-color: var(--accent);
  background: rgb(124 34 49 / 0.05);
}
.check-option:has(input:checked) .check-option-box {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}
.check-option:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.check-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.check-error {
  margin-top: var(--space-sm);
  color: var(--accent);
  font-size: 0.95rem;
}

/* ---- Ergebnis ---- */

.report {
  margin-top: var(--space-md);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.report-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.report-mark {
  flex: none;
  width: 1.6rem;
  height: 1.8rem;
  background-color: var(--accent);
  -webkit-mask: url("../DS-Symbol.svg") no-repeat center / contain;
  mask: url("../DS-Symbol.svg") no-repeat center / contain;
}
.report-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.report-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.report-block { margin-top: var(--space-md); }
.report-h {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.report-block > p { color: var(--ink-soft); }
.report-answers {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.45rem 1.25rem;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}
.report-answers dt { color: var(--ink-faint); }
.report-answers dd { color: var(--ink); }
.report-list, .report-steps { padding-left: 1.3rem; }
.report-list { list-style: none; padding-left: 0; }
.report-list li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.report-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.62rem; height: 0.7rem;
  background-color: var(--accent);
  -webkit-mask: url("../DS-Symbol.svg") no-repeat center / contain;
  mask: url("../DS-Symbol.svg") no-repeat center / contain;
}
.report-list strong { color: var(--ink); }
.report-list a { text-decoration: underline; text-underline-offset: 0.2em; }
.report-steps li { margin-bottom: 0.8rem; color: var(--ink-soft); line-height: 1.55; }
.report-steps li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
.report-foot {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.check-lead {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}
.check-lead-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: 0.6rem;
}
.check-lead-text {
  color: var(--ink-soft);
  max-width: 40rem;
  margin-bottom: var(--space-md);
}
.check-lead-form { max-width: 38rem; }

/* --- Ergebnisansicht: Bericht und Anfrage nebeneinander ---

   Der Fragebogen ist auf 46 rem begrenzt, weil eine einzelne Frage in einer
   breiten Spalte schlecht zu lesen ist. Für das Ergebnis stimmt diese Grenze
   nicht mehr: Rechts blieb eine leere Fläche, während die Anfrage weit unten
   stand und erst nach dem Scrollen auffiel. Sie steht jetzt daneben und läuft
   mit — dort, wo der Blick nach dem Lesen des Berichts ohnehin landet. */

/* Die Auswertung nutzt die volle Seitenbreite. Die 46 rem des Fragebogens
   sind eine Lesebreite für einzelne Fragen — für Bericht plus Anfrage wären
   sie eine künstliche Fessel mit viel leerer Fläche daneben. */
.check--ergebnis { max-width: none; }

/* Fortschritt gehört zum Fragebogen. Im Ergebnis steht sonst „Frage 7 von 7"
   über einer Seite, auf der es keine Frage mehr gibt. */
.check--ergebnis .check-progress,
.check--ergebnis .check-progress-label { display: none; }

@media (min-width: 1080px) {
  .check-ergebnis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    gap: var(--space-lg);
    align-items: start;
  }
  /* Rasterfelder schrumpfen sonst nicht unter ihren Inhalt */
  .check-ergebnis-haupt { min-width: 0; }

  .check-lead {
    position: sticky;
    top: calc(var(--header-h) + var(--space-sm));
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    /* Bei kurzen Fenstern soll die Spalte für sich scrollen können,
       statt oben und unten abgeschnitten zu werden. */
    max-height: calc(100vh - var(--header-h) - 2 * var(--space-sm));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .check-lead-title { font-size: 1.25rem; }
  .check-lead-text { font-size: 0.9375rem; max-width: none; }
  .check-lead-form { max-width: none; }
  /* In der schmalen Spalte stehen Name und E-Mail untereinander */
  .check-lead .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .check-progress-bar { transition: none; }
}

/* ============ Schwebender Hinweis auf den Website-Check ============
   Wird von main.js eingefügt (sonst müsste dasselbe Markup in 21 Dateien
   gepflegt werden). Merkt sich das Schließen für die Sitzung. */

.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;   /* nur die Kinder sind klickbar */
}

/* --- Der Knopf --- */
.fab-toggle {
  pointer-events: auto;
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  box-shadow: 0 8px 24px rgb(var(--ink-rgb) / 0.22);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.fab-toggle:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 30px rgb(var(--ink-rgb) / 0.28); }
.fab-toggle:active { transform: scale(0.96); }
.fab-mark {
  display: block;
  width: 1.3rem;
  height: 1.45rem;
  background-color: currentColor;
  -webkit-mask: url("../DS-Symbol.svg") no-repeat center / contain;
  mask: url("../DS-Symbol.svg") no-repeat center / contain;
  animation: fabSpin 14s linear infinite;
}
@keyframes fabSpin { to { transform: rotate(360deg); } }
/* Sanftes Pulsieren, solange der Hinweis noch nicht geöffnet wurde */
.fab-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: fabPulse 2.8s var(--ease-out) infinite;
}
.fab[data-open="true"] .fab-toggle::after { animation: none; opacity: 0; }
@keyframes fabPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* --- Das Kontextfenster --- */
.fab-panel {
  pointer-events: auto;
  width: min(19rem, calc(100vw - 2 * clamp(1rem, 3vw, 2rem)));
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: 0 16px 40px rgb(var(--ink-rgb) / 0.16);
  transform-origin: bottom right;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.fab[data-open="false"] .fab-panel {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  visibility: hidden;
}
.fab[data-open="true"] .fab-panel { opacity: 1; transform: none; visibility: visible; }

.fab-panel-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.fab-panel-kicker::before {
  content: "";
  width: 0.6rem; height: 0.68rem;
  background-color: var(--accent);
  -webkit-mask: url("../DS-Symbol.svg") no-repeat center / contain;
  mask: url("../DS-Symbol.svg") no-repeat center / contain;
}
.fab-panel-title {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.fab-panel-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.fab-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.fab-panel-cta .btn-icon { width: 1.8rem; height: 1.8rem; }
.fab-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  transition: color 0.2s, background-color 0.2s;
}
.fab-close:hover { color: var(--ink); background: rgb(var(--ink-rgb) / 0.06); }
.fab-close svg { width: 0.85rem; height: 0.85rem; stroke: currentColor; stroke-width: 2; fill: none; }
.fab-panel { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fab-mark { animation: none; }
  .fab-toggle::after { animation: none; opacity: 0; }
  .fab-toggle, .fab-panel { transition: none; }
}
@media print { .fab { display: none !important; } }

/* ============ Kontakt ============ */

/* Der dunkle Seitenabschluss ist oben immer gerundet — egal ob die Seite mit
   dem Kontakt-Band endet oder direkt mit dem Footer. Die Rundung gehört
   deshalb dem jeweils ERSTEN dunklen Block (siehe .site-footer--top). */
.contact {
  max-width: none;
  background: var(--band-bg);
  color: var(--band-ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-block: var(--band-pad);
}
.contact-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  text-align: left;
}
.contact-headline {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.contact-headline em { color: var(--accent-blush); }
.contact-sub {
  max-width: 30rem;
  margin: var(--space-md) 0 0;
  color: rgba(248, 242, 236, 0.7);
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ============ Unterseiten ============ */

/* Page-Hero (Kopfbereich der Unterseiten) */
.page-hero {
  /* Freiraum für den fixierten Header; unten gilt der normale Rhythmus */
  padding-top: calc(var(--header-h) + var(--band-pad));
}
.page-hero .section-title { margin-top: var(--space-xs); }
.page-lead {
  max-width: 40rem;
  margin-top: var(--space-md);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* "Mehr"-Link (Teaser → Unterseite) */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-md);
  font-weight: 600;
  color: var(--ink);
}
.more-link .btn-icon { width: 2.1rem; height: 2.1rem; }
.more-link:hover { color: var(--accent); }
.work .more-link { color: var(--band-ink); }
.work .more-link:hover { color: var(--accent-blush); }

/* Studio-/Kontakt-Teaser auf der Startseite */
.teaser { display: grid; gap: var(--space-md); }

/* Projekt-Showcase (Unterseite Projekte) — Zeilen mit kleinerem Bild links */
.project-showcase {
  display: grid;
  border-top: 1px solid var(--border);
}
.project-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr auto;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  transition: background-color 0.3s;
}
.project-row-visual {
  border-radius: var(--radius-sm);
  overflow: clip;
  border: 1px solid var(--border);
  background: var(--surface);
}
.project-row-visual img { display: block; width: 100%; height: auto; filter: var(--shot-filter); }
.project-row-index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-faint);
}
.project-row-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0.35rem 0 0.55rem;
}
/* Dezenter Branchen-Filter (Textschalter statt auffälliger Pills) */
/* ============ Projekt-Filter ============
   Desktop: ruhige Textschalter mit Anzahl.
   Mobil: eine horizontal scrollbare Chip-Reihe (kein Umbruch, große
   Trefferflächen, Snap) — Umbruch über drei Zeilen war unbrauchbar. */

.project-filter { margin-bottom: var(--space-md); }
.project-filter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 0.85rem;
}
.project-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.project-filter-count {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.project-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.project-filter-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  font-family: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out);
}
.project-filter-btn:hover { color: var(--ink); border-color: rgb(var(--ink-rgb) / 0.3); }
.project-filter-btn.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 500;
}
.project-filter-btn-count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease-out);
}
.project-filter-btn.is-active .project-filter-btn-count { color: inherit; opacity: 0.7; }
.project-filter-btn[hidden] { display: none; }

.project-row[hidden] { display: none; }
/* Ruhezustand sichtbar — Animation nur beim Filtern, damit nie etwas
   unsichtbar hängen bleibt (kein fill-mode "both"). */
.project-row.is-entering { animation: projectRowIn 0.45s var(--ease-out); }
@keyframes projectRowIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-row.is-entering { animation: none; }
}
.project-empty {
  color: var(--ink-soft);
  padding: var(--space-lg) 0;
  max-width: 44ch;
}

.project-row-meta { color: var(--ink-soft); font-size: 1.05rem; }
.project-row-context {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 46ch;
  margin-top: 0.7rem;
}
.project-row-arrow {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  transition: transform 0.4s var(--ease-out), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.project-row-arrow svg { width: 40%; height: 40%; }
@media (hover: hover) {
  .project-row:hover .project-row-arrow {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    transform: rotate(45deg);
  }
}

/* Studio-Reveal (scroll-gesteuerte clip-path-Enthüllung) */
.studio-reveal { position: relative; }
.studio-reveal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.studio-reveal-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--band-bg);
  will-change: clip-path;
}
/* Bild liegt lokal. Vorher kam es von images.unsplash.com — ein
   Fremdaufruf auf der Startseite überträgt bei jedem Besuch die IP-Adresse
   an einen Dritten und ist ohne Einwilligung nicht sauber. Drei Größen
   statt einer: 2400px an ein Telefon zu schicken wäre Verschwendung. */
.studio-reveal-photo {
  position: absolute;
  inset: 0;
  background-image: url("../assets/studio-1200.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}
@media (min-width: 900px) {
  .studio-reveal-photo { background-image: url("../assets/studio-1800.webp"); }
}
@media (min-width: 1500px), (min-resolution: 2dppx) {
  .studio-reveal-photo { background-image: url("../assets/studio-2400.webp"); }
}
.studio-reveal-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 9, 11, 0.74) 0%, rgba(18, 9, 11, 0.34) 26%, transparent 56%);
}
.studio-reveal-overlay {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  /* Der Container hat eigenes padding-inline — die Randbreite muss zur
     Maximalbreite addiert werden, sonst beginnt der Inhalt um genau
     einen Rand weiter innen als in den übrigen Sektionen. */
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  padding: var(--gutter) var(--gutter) var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 5vw, 4rem);
  color: var(--band-ink);
  opacity: 1;
}
.studio-reveal-headline {
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}
.studio-reveal-headline em { color: var(--accent-blush); }
.studio-reveal-aside {
  flex: none;
  max-width: 28rem;
}
.studio-reveal-aside p {
  color: rgba(248, 242, 236, 0.9);
  line-height: 1.55;
  margin-bottom: var(--space-sm);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}
.studio-reveal-aside .btn-light { color: var(--band-ink); }
.studio-reveal-aside .btn-light:hover { color: var(--accent-blush); }

/* Kontaktseite */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(var(--space-lg), 6vw, var(--space-2xl));
  align-items: start;
}
.contact-detail { margin-bottom: var(--space-lg); }
.contact-detail-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2xs);
}
.contact-detail a, .contact-detail p {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 480;
  line-height: 1.3;
}

/* Ablauf nach der Anfrage — nimmt die Hemmschwelle */
.next-steps {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.next-steps-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.next-steps-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  color: var(--ink-soft);
  line-height: 1.55;
}
.next-steps-num {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}
.next-steps-list strong { color: var(--ink); font-weight: 600; }
.next-steps-note {
  margin-top: var(--space-sm);
  font-size: 0.92rem;
  color: var(--ink-faint);
  max-width: 46ch;
}
.contact-detail a { transition: color 0.25s; }
.contact-detail a:hover { color: var(--accent); }
.contact-socials { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact-socials a {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 500;
  transition: border-color 0.25s, color 0.25s;
}
.contact-socials a:hover { border-color: var(--ink); color: var(--accent); }

/* Kontaktformular */
.contact-form { display: grid; gap: var(--space-md); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form-field { display: grid; gap: 0.5rem; }
.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.form-label span { color: var(--accent); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form input[type="tel"],
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.25s, background-color 0.25s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-faint); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
/* Honeypot — für Menschen unsichtbar */
.form-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.form-consent input {
  margin-top: 0.2rem;
  flex: none;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--accent);
}
.form-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.form-submit { align-self: start; justify-self: start; }
.form-submit[disabled] { opacity: 0.55; cursor: default; }
.form-status {
  margin: 0;
  min-height: 1.3em;
  font-size: 0.95rem;
  line-height: 1.45;
}
.form-status.is-loading { color: var(--ink-soft); }
.form-status.is-success { color: #2f7a57; }
.form-status.is-error { color: var(--accent); }

/* FAQ-Akkordeon */
.faq-list {
  /* Keine eigene Begrenzung mehr: Die Rasterspalte gibt die Breite vor.
     Vorher deckelte diese Zeile die Liste auf 832 px und ließ daneben
     432 px Lücke stehen. Die Antworten bleiben über .faq-answer auf
     44rem begrenzt, die Zeilen werden also nicht zu lang. */
  border-top: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 480;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Frage als Überschrift, optisch unverändert: Die Typografie kommt weiter
   von summary, h3 liefert nur die Gliederung. */
.faq-frage {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
.faq-icon {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem; height: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faq-answer {
  padding: 0 0 var(--space-md);
  max-width: 44rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.faq-answer p + p { margin-top: var(--space-sm); }

/* Rechtstexte / Prosa (Impressum, Datenschutz) */
.prose {
  max-width: 46rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: var(--space-lg) 0 var(--space-xs);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: var(--space-md) 0 0.5rem;
}
.prose h2 + h3 { margin-top: var(--space-sm); }
.prose p + p { margin-top: var(--space-sm); }
.prose ul {
  margin: var(--space-sm) 0 0 1.25rem;
  padding: 0;
}
.prose ul li { margin-bottom: 0.6rem; }
.prose ul li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .todo {
  display: block;
  margin: var(--space-xs) 0;
  padding: 0.4rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ============ Footer ============ */

.site-footer {
  background: var(--band-bg);
  color: var(--band-ink);
  padding: var(--band-pad) var(--gutter) var(--space-md);
}
/* Seiten ohne Kontakt-Band davor: der Footer beginnt den dunklen Block
   und übernimmt die Rundung, damit der Abschluss überall gleich aussieht. */
.site-footer--top { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.footer-top {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-lg) clamp(3rem, 8vw, 8rem);
  max-width: var(--page-max);
  margin-inline: auto;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(248, 242, 236, 0.15);
}
.footer-brand { margin-right: auto; }
.footer-brand .logo {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--band-ink);
  margin-bottom: var(--space-md);
}
.footer-brand .logo-img {
  width: clamp(260px, 26vw, 340px);
  color: var(--band-ink);
  margin-bottom: var(--space-md);
}
.footer-brand p {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.3;
}
.footer-heading {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 242, 236, 0.5);
  margin-bottom: var(--space-xs);
}
.footer-nav { display: grid; gap: 0.4rem; align-content: start; justify-items: start; }
.footer-nav a {
  padding: 0.15rem 0;
  transition: color 0.25s;
}
.footer-nav a:hover { color: var(--accent-blush); }
.footer-privacy { letter-spacing: 0.02em; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  max-width: var(--page-max);
  margin: var(--space-md) auto 0;
  font-size: 0.9rem;
  color: rgba(248, 242, 236, 0.6);
}
.footer-legal { display: flex; gap: var(--space-sm); }
.footer-legal a:hover { color: var(--band-ink); }

/* ============ Additive Startseiten-Bausteine ============ */
.trust-band {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-md) var(--gutter);
}
.trust-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
  border-block: 1px solid var(--border);
  padding-block: var(--space-md);
}
.trust-stats strong {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
}

.faq-teaser { margin-bottom: var(--space-md); }
.faq-teaser-item {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}
.faq-teaser-item:last-child { border-bottom: 1px solid var(--border); }
.faq-teaser dt {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  margin-bottom: 0.35rem;
}
.faq-teaser dd {
  color: var(--ink-soft);
}

/* ============ Über mich: Logo-Aufbau (Zeichen zeichnet sich) ============ */
.mark-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.mark-build-copy .page-lead { margin-top: var(--space-sm); }
.mark-build-stage { width: 100%; }
.mark-svg { width: 100%; height: auto; overflow: visible; display: block; }

.mark-strokes, .mark-glow, .mark-pulse {
  transform-box: fill-box;
  transform-origin: center;
}
.mark-glow { filter: blur(38px); }

/* ============ Herausforderungen / Pain Points ============ */
.challenges-head { margin-bottom: var(--space-lg); }
.challenges-head .section-eyebrow { margin-bottom: var(--space-sm); }
.challenges-head .section-title { white-space: nowrap; }

.challenges-panel {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(0.5rem, 1.5vw, 1rem);
}
.challenges-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgb(var(--ink-rgb) / 0.1);
  pointer-events: none;
}
.challenges-corner {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--accent);
  z-index: 3;
}
.challenges-corner--tl { top: -5px; left: -5px; }
.challenges-corner--tr { top: -5px; right: -5px; }
.challenges-corner--bl { bottom: -5px; left: -5px; }
.challenges-corner--br { bottom: -5px; right: -5px; }

.challenges-grid {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.challenge {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
}
.challenge + .challenge { border-left: 1px solid var(--border); }
.challenge-num {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.challenge-quote {
  font-family: var(--font-serif);
  font-weight: 440;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.challenges-bridge {
  margin-top: var(--space-md);
  color: var(--ink-soft);
}
.challenges-bridge a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============ Blog ============ */

/* Lese-Fortschrittsleiste */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9990;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

/* Übersicht: Filter */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-lg);
}
.blog-chip {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.blog-chip:hover { border-color: rgb(var(--ink-rgb) / 0.28); color: var(--ink); }
.blog-chip.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.blog-chip[hidden] { display: none; }
.blog-chip-count {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease-out);
}
.blog-chip.is-active .blog-chip-count { color: rgba(248, 242, 236, 0.7); }

/* Ergebniszähler */
.blog-count {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
}

/* Übersicht: editoriale Beitrags-Liste */
.blog-list { display: flex; flex-direction: column; }
.blog-row { border-top: 1px solid var(--border); }
.blog-row[hidden] { display: none; }
/* Sichtbarkeit steuert ausschließlich der Filter (kein GSAP) — so kann keine
   Zeile dauerhaft unsichtbar hängen bleiben. */
/* Bewusst OHNE fill-mode "both": Ruhezustand ist sichtbar. Läuft die Animation
   nicht (inaktiver Tab, unterdrückte Animationen), bleibt der Beitrag sichtbar
   statt unsichtbar hängen zu bleiben. */
.blog-row.is-entering { animation: blogRowIn 0.45s var(--ease-out); }
@keyframes blogRowIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-row.is-entering { animation: none; }
}
/* :last-of-type greift nicht zuverlässig, wenn Zeilen gefiltert sind →
   Unterkante über die Liste selbst ziehen */
.blog-list { border-bottom: 1px solid var(--border); }
.blog-row-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 3.6vw, 3.5rem) 0;
}
.blog-row-index {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink-faint);
  padding-top: 0.5rem;
}
.blog-row-body { max-width: 62ch; }
.blog-card-cat,
.article-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.blog-row-title {
  font-family: var(--font-serif);
  font-weight: 470;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0.65rem 0 0.8rem;
  transition: color 0.3s var(--ease-out);
}
.blog-row-teaser {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 56ch;
}
.blog-card-meta {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.blog-row-arrow {
  align-self: center;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.blog-row-arrow svg { width: 1.15rem; height: 1.15rem; }
.blog-row-link:hover .blog-row-title { color: var(--accent); }
.blog-row-link:hover .blog-row-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translate(2px, -2px);
}
.blog-empty {
  color: var(--ink-soft);
  padding: var(--space-lg) 0;
  max-width: 44ch;
}

/* Artikel */
.article {
  max-width: 78rem;
  /* Freiraum für den fixierten Header — wie bei .page-hero */
  padding-top: calc(var(--header-h) + var(--band-pad));
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-lg);
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }

.article-head { margin-bottom: var(--space-lg); }
.article-title {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0.6rem 0 1rem;
  max-width: 22ch;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.article-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 44rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.article-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Inhaltsverzeichnis */
.article-toc { border-left: 2px solid var(--border); }
.article-toc > summary {
  display: none; /* Desktop: TOC dauerhaft offen, kein Toggle */
  list-style: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0 0.75rem 1rem;
}
.article-toc > summary::-webkit-details-marker { display: none; }
.article-toc-nav { display: flex; flex-direction: column; }
.article-toc-nav a {
  padding: 0.35rem 0 0.35rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.article-toc-nav a.lvl-3 { padding-left: 2rem; font-size: 0.86rem; }
.article-toc-nav a:hover { color: var(--ink); }
.article-toc-nav a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

/* Teilen */
.article-share { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.article-share-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Eigenständige Schaltflächen, keine Links im Satz — daher gilt die
   Mindestgröße aus WCAG 2.2 (2.5.8). „X" war 10 x 24 px, „Link kopieren"
   18 px hoch. Die Ausnahme für Textlinks greift hier nicht. */
.article-share-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s var(--ease-out);
}
.article-share-link:hover { color: var(--accent); }
.article-share-link.is-copied { color: var(--accent); }

/* Artikel-Text (Prosa) */
.article-body { font-size: 1.13rem; line-height: 1.75; color: var(--ink); }
.article-body .article-lead {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: var(--space-md);
}
.article-body h2 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: var(--space-lg) 0 0.75rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-body p { margin-bottom: 1.15rem; color: var(--ink-soft); }
.article-body p strong { color: var(--ink); font-weight: 600; }
.article-body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--ink);
  margin: var(--space-md) 0 0.6rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-body a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Listen */
.article-list {
  margin: 0 0 1.3rem 1.25rem;
  padding: 0;
  color: var(--ink-soft);
}
.article-list li { margin-bottom: 0.65rem; padding-left: 0.2rem; }
.article-list li strong { color: var(--ink); font-weight: 600; }
.article-list li::marker { color: var(--accent); }

/* Checkliste */
.article-checklist {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  color: var(--ink-soft);
}
.article-checklist li {
  position: relative;
  padding: 0.55rem 0 0.55rem 2rem;
  border-bottom: 1px solid var(--border);
}
.article-checklist li:first-child { border-top: 1px solid var(--border); }
.article-checklist li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 1.05rem;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Infobox */
.article-note {
  margin: var(--space-md) 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--surface);
  border-left: 2px solid var(--accent);
}
.article-note p { margin: 0; color: var(--ink); }

/* Tabellen */
.article-table-wrap {
  margin: var(--space-md) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
  min-width: 34rem;
}
.article-table caption {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --ink-faint ergab auf --surface nur 4,28:1 und lag damit unter AA (4,5:1) */
  color: var(--ink-soft);
  padding-bottom: 0.7rem;
}
.article-table th,
.article-table td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.article-table thead th {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: rgb(var(--ink-rgb) / 0.28);
}
.article-table tbody td { color: var(--ink-soft); }
.article-table tbody td:first-child { color: var(--ink); font-weight: 500; }

/* Kartenansicht der Tabellen auf schmalen Displays.
   Seitliches Scrollen funktioniert zwar, wird aber häufig übersehen —
   deshalb wird jede Zeile unter 640px zu einem eigenen Block. Die
   Spaltenüberschrift steckt in data-th und wird als Label eingeblendet. */
@media (max-width: 640px) {
  .article-table-wrap { overflow-x: visible; }
  .article-table { min-width: 0; display: block; }
  .article-table caption { display: block; }
  .article-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .article-table tbody,
  .article-table tr,
  .article-table td { display: block; }
  .article-table tbody tr {
    padding: 0.9rem 0 0.3rem;
    border-bottom: 1px solid var(--border);
  }
  .article-table tbody tr:first-child { border-top: 1px solid rgb(var(--ink-rgb) / 0.28); }
  .article-table tbody td {
    border-bottom: 0;
    padding: 0.25rem 0;
  }
  .article-table tbody td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
  }
  .article-table tbody td:first-child { font-size: 1.02rem; }
}

/* Zurückhaltender Hinweis mitten im Text.
   Bewusst ohne Knopf: An dieser Stelle liest jemand noch, er entscheidet
   nicht. Zwei Textlinks stören den Lesefluss weniger als ein Farbblock. */
.article-inline-cta {
  margin: var(--space-lg) 0;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.article-inline-cta-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.article-inline-cta p { color: var(--ink-soft); margin-bottom: 0; }
.article-inline-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 0.9rem;
}
.article-inline-cta-links a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  transition: color 0.2s var(--ease-out);
}
.article-inline-cta-links a:hover { color: var(--accent); }

/* Kurzformular am Ende des Beitrags.
   Steht außerhalb von .article-body, damit es die volle Breite bekommt und
   sich als eigener Schritt liest — nicht als weiterer Absatz. */
.artikel-formular {
  margin: var(--section-gap) 0 0;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--surface);
  border-top: 2px solid var(--accent);
}
/* Das Formular nutzt die volle Bandbreite; nur der Fließtext darüber
   bleibt auf Lesebreite begrenzt. */
.artikel-formular-inner { max-width: none; }
.artikel-formular h2 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.7rem;
}
.artikel-formular > .artikel-formular-inner > h2,
.artikel-formular > .artikel-formular-inner > p { max-width: 56ch; }
.artikel-formular > .artikel-formular-inner > p {
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}
.artikel-formular .contact-form { display: grid; gap: var(--space-xs); }
.artikel-formular .form-submit { justify-self: start; }
@media (min-width: 700px) {
  /* Name und E-Mail nebeneinander: zwei kurze Felder in einer Zeile wirken
     wie ein Feld weniger. */
  .artikel-formular .contact-form { grid-template-columns: 1fr 1fr; }
  .artikel-formular .contact-form > *:not(.form-field:nth-of-type(1)):not(.form-field:nth-of-type(2)) {
    grid-column: 1 / -1;
  }
}

/* FAQ im Artikel */
.article-faq { margin-bottom: var(--space-md); }
.article-faq details {
  border-top: 1px solid var(--border);
}
.article-faq details:last-child { border-bottom: 1px solid var(--border); }
.article-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 0.95rem 2.5rem 0.95rem 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 1.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.article-faq details[open] summary::after { transform: rotate(-135deg); }
.article-faq details p { padding: 0 0 1rem; margin: 0; }

.article-sources { font-size: 0.98rem; }

/* CTA-Band am Artikelende */
.article-cta-band {
  /* eigenständiger Block nach dem Artikel → Sektions-Rhythmus */
  margin: var(--section-gap) 0;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--surface);
  border-top: 2px solid var(--accent);
}
.article-cta-band h2 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.7rem;
}
.article-cta-band p {
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: var(--space-sm);
}

.article-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.article-cta { margin: var(--space-xl) 0 var(--space-lg); }
.article-related {
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
  margin-bottom: var(--section-gap);
}
.article-related-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.75rem;
}
.article-related-link { display: flex; flex-direction: column; gap: 0.4rem; }
.article-related-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}
.article-related-link:hover .article-related-title { color: var(--accent); }

/* ============ Responsive ============ */

@media (max-width: 1023px) {
  .process-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas: "web" "dev" "berat";
  }
  /* Touch: kein Hover → CTA dauerhaft sichtbar, kein Inhalts-Versatz */
  .bento-cta { position: static; opacity: 1; transform: none; padding: var(--space-sm) 0 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 26rem; }
  .footer-brand { flex-basis: 100%; }
  .contact-page-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .form-row { grid-template-columns: 1fr; }
  .project-row { grid-template-columns: 1fr; gap: var(--space-md); }
  .mark-build-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .challenges-grid { grid-template-columns: 1fr; }
  .challenge + .challenge { border-left: none; border-top: 1px solid var(--border); }
  .challenges-head .section-title { white-space: normal; }

  /* Blog */
  .blog-row-link { grid-template-columns: 1fr; gap: 0; }
  .blog-row-index, .blog-row-arrow { display: none; }
  .article-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
  .article-aside {
    position: static;
    top: auto;
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-md);
  }
  .article-toc > summary { display: block; }
  .article-toc[open] > summary { margin-bottom: 0.25rem; }
  .article-related-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

@media (max-width: 767px) {
  :root { --header-h: 4.25rem; }

  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .header-inner { grid-template-columns: 1fr auto; }
  .site-header .logo { grid-column: 1; justify-self: start; }
  .site-header .header-actions { grid-column: 2; gap: var(--space-xs); }

  /* --section-gap und --band-pad skalieren per clamp() — keine Overrides nötig */
  .studio-reveal-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
  }
  .studio-reveal-aside { max-width: none; }

  /* Arbeiten als Karten mit sichtbarem Screenshot */
  .work-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "index arrow"
      "thumb thumb"
      "body body";
    gap: var(--space-sm);
    padding-block: var(--space-md);
  }
  .work-index { grid-area: index; }
  .work-arrow { grid-area: arrow; align-self: start; }
  .work-thumb {
    grid-area: thumb;
    display: block;
    border-radius: var(--radius-sm);
    overflow: clip;
    border: 1px solid rgba(248, 242, 236, 0.16);
  }
  .work-thumb img { width: 100%; height: auto; display: block; filter: var(--shot-filter); }
  .work-body { grid-area: body; }
  .work-year { display: none; }

  /* Projekt-Filter: eine Reihe, horizontal scrollbar, randlos auslaufend */
  .project-filter-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* über den Seitenrand hinaus scrollen, damit nichts abgeschnitten wirkt */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 0.15rem;
  }
  .project-filter-options::-webkit-scrollbar { display: none; }
  .project-filter-btn { scroll-snap-align: start; }
  .project-filter-top { flex-direction: column; align-items: flex-start; gap: 0.35rem; }

  /* Roter Faden: SVG schrumpft auf ~60 % — Schrift in viewBox-Einheiten
     entsprechend anheben, sonst sind die Beschriftungen unlesbar klein */
  .thread-label { font-size: 46px; }
  .thread-stage { max-width: none; }

  /* Kundenstimmen: Quelle rutscht unter das Zitat */
  .quote-item { grid-template-columns: 1fr; gap: var(--space-sm); }
  .quote-source { padding-top: 0; }
}

/* ============ Reduced Motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
    *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   Druckausgabe — hierüber entsteht das PDF des Website-Checks.
   Bewusst kein PDF-Fremdskript: der Browser bringt "Als PDF speichern"
   selbst mit, auf jedem Gerät. Kostet 0 KB und keine Fremdanfrage.
   ============================================================ */

@media print {
  /* Immer hell drucken, unabhängig vom gewählten Design */
  :root, :root[data-theme="dark"] {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --ink: #1A1113;
    --ink-soft: #3B2A2E;
    --ink-faint: #6B5458;
    --accent: #7C2231;
    --border: rgba(26, 17, 19, 0.22);
    --ink-rgb: 26 17 19;
    --shot-filter: none;
  }

  html, body { background: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.45; }

  /* Alles ausblenden, was nicht in den Report gehört */
  .site-header, .site-footer, .mobile-menu, .page-transition, .preloader,
  .skip-link, .contact, .check-progress, .check-progress-label,
  .check-form, .check-nav, .check-actions, .check-lead, .page-hero,
  .thread, .studio-reveal, noscript { display: none !important; }

  main, .section { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .check { max-width: none; }

  /* Der Report füllt die Seite */
  .report {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fff;
  }
  .report-head {
    padding-bottom: 10pt;
    border-bottom: 1.5pt solid var(--accent);
  }
  .report-mark { width: 13pt; height: 15pt; }
  .report-title { font-size: 19pt; }
  .report-kicker { font-size: 7.5pt; }
  .report-block { margin-top: 14pt; }
  .report-h { font-size: 8pt; margin-bottom: 5pt; }
  .report-answers { font-size: 9pt; gap: 3pt 12pt; }
  .report-list li, .report-steps li { margin-bottom: 6pt; }
  .report-foot { font-size: 8pt; margin-top: 16pt; }

  /* Blöcke nicht über Seitenumbrüche zerreißen */
  .report-block, .report-list li, .report-steps li { break-inside: avoid; }
  .report-head { break-after: avoid; }

  /* Der ✱ vor den Leistungen ist eine CSS-Maske, also eine Hintergrundgrafik.
     Chrome druckt Hintergründe standardmäßig nicht — übrig blieb ein Einzug
     von 1,6 rem ohne sichtbaren Grund, der Block sah verrutscht aus.
     Im Druck steht deshalb ein echtes Schriftzeichen davor. */
  .report-list li { padding-left: 14pt; }
  .report-list li::before {
    -webkit-mask: none;
    mask: none;
    background: none;
    content: "*";
    width: auto;
    height: auto;
    top: 0;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 11pt;
    line-height: 1.2;
  }

  /* Links im Druck als Text mitgeben — im PDF ist ein Link sonst wertlos.
     Der Schrägstrich gehört dazu: Die href-Angaben sind relativ, ohne ihn
     entstand „ds-webdesign.studioleistungen/webdesign.html". */
  .report-list a::after {
    content: " (ds-webdesign.studio/" attr(href) ")";
    font-family: var(--font-sans);
    font-size: 8pt;
    color: var(--ink-faint);
    text-decoration: none;
  }
  .report-list a { text-decoration: none; }

  /* Animationen sind im Druck sinnlos */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@page {
  size: A4;
  margin: 18mm 16mm;
}

/* Zweiter Weg im Hinweisfenster: direkt zum Kontakt, für alle, die schon
   wissen, was sie brauchen. Bewusst als Textlink, damit er den Check-Knopf
   nicht überstimmt. */
.fab-panel-direkt {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--ink-rgb) / 0.3);
  transition: color 0.25s, text-decoration-color 0.25s;
}
.fab-panel-direkt:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Erklärt das Sternchen an den Feldbeschriftungen. Ohne diese Zeile ist
   das Zeichen für Sehende unerklärt — Screenreader erfahren es über
   required, Augen nicht. */
.form-pflicht {
  margin: 0 0 var(--space-sm);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ============================================================
   FAQ-Seite: fünf Themenbereiche statt einer Liste

   27 Fragen untereinander liest niemand. Deshalb bekommt jeder Bereich
   eine eigene Bahn mit Kicker und Überschrift, jede zweite getönt — der
   gleiche Rhythmus wie auf den Leistungsseiten. Die Sprungnavigation im
   Hero ist die Abkürzung für alle, die schon wissen, wonach sie suchen.
   ============================================================ */

.faq-sprung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: var(--space-md);
}
.faq-sprung a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  transition: color 0.2s var(--ease-out);
}
.faq-sprung a:hover { color: var(--accent); }

/* Sprungziele dürfen nicht unter der festen Kopfzeile landen */
.section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }

/* Die Eigentumsfrage ist die einzige, die eine echte Sorge beantwortet:
   Bin ich hinterher an den Dienstleister gebunden? Deshalb bekommt sie
   eine Kante in Bordeaux — kein Kasten, keine Werbefläche. */
.faq-item--kern { border-left: 2px solid var(--accent); padding-left: var(--space-sm); }
.faq-item--kern summary { padding-right: 0; }
.faq-kern-marke {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--ink);
}
.faq-kern-marke span { color: var(--accent); font-family: var(--font-sans); }

/* Drei weiterführende Beiträge */
.faq-lesen-raster {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
@media (min-width: 800px) { .faq-lesen-raster { grid-template-columns: repeat(3, 1fr); } }
.faq-lesen-karte {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  background: var(--bg);
  text-decoration: none;
  position: relative;
  transition: background-color 0.25s var(--ease-out);
}
.faq-lesen-karte:hover { background: var(--surface); }
.faq-lesen-titel {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}
.faq-lesen-karte:hover .faq-lesen-titel { color: var(--accent); }
.faq-lesen-text { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
.faq-lesen-pfeil {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 1.05rem;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease-out), translate 0.25s var(--ease-out);
}
.faq-lesen-pfeil svg { width: 100%; height: auto; display: block; }
.faq-lesen-karte:hover .faq-lesen-pfeil { color: var(--accent); translate: 2px -2px; }

/* Website-Check als dunkles Zwischenband.
   Der Bruch mitten in der Seite ist beabsichtigt: Wer bis hierher gelesen
   hat, sucht meist keine weitere Antwort, sondern eine Einordnung. */
.faq-check { display: grid; gap: var(--space-md); align-items: end; }
@media (min-width: 900px) {
  .faq-check { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); }
}
.faq-check-text .section-title { margin-bottom: var(--space-sm); }
.faq-check-text p { max-width: 40rem; }
.faq-check-aktion { display: grid; gap: 0.45rem; justify-items: start; }
/* Spezifischer als `.section--dunkel p`, sonst liest sich die Fußnote wie
   Fließtext statt wie eine Fußnote. */
.section--dunkel .faq-check-klein {
  margin: 0;
  font-size: 0.8125rem;
  color: rgb(242 235 232 / 0.62);
}

/* Vertrauenszeile über dem Abschluss — vier Aussagen, keine Siegel */
.faq-vertrauen {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgb(242 235 232 / 0.72);
}
.faq-vertrauen li + li::before {
  content: "·";
  margin-right: 0.9rem;
  color: rgb(242 235 232 / 0.4);
}

/* „Nach oben“ im Footer. Bewusst nicht als zweites schwebendes Element:
   Unten rechts sitzt bereits der Check-Hinweis, zwei Knöpfe würden sich
   dort ins Gehege kommen. Die Startseite ist auf dem Handy fast achtzehn
   Bildschirme lang — am Ende angekommen, will man nicht zurückwischen. */
.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--band-ink);
  opacity: 0.7;
  transition: opacity 0.25s var(--ease-out);
}
.footer-top-link:hover { opacity: 1; }
.footer-top-pfeil {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.footer-top-pfeil svg { width: 0.85rem; height: 0.85rem; }

/* ============================================================
   Mega-Menü unter „Leistungen"

   Sitzt im Header, damit es dessen Zustände teilt (ausgeblendet beim
   Scrollen nach unten) und über allem liegt. Nur ab 1024 px — darunter
   trägt das Burger-Menü.

   Farben kommen ausschließlich aus Tokens, dadurch stimmt hell und
   dunkel ohne zweiten Regelsatz. Solange das Menü offen ist, bekommt
   der Header ausdrücklich die Seitenfarben: Über dunklen Bändern ist er
   sonst hell auf dunkel eingefärbt, das Panel darunter aber hell —
   diese Kante sah nach Fehler aus.
   ============================================================ */

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--border);
  /* Kein Schlagschatten: Er wirkte im dunklen Modus wie ein schmutziger
     Rand. Eine Haarlinie unten trennt sauberer und passt zur flachen
     Gestaltung der übrigen Seite. */
  border-bottom: 1px solid var(--border);
  /* Aufziehen statt Einblenden: wirkt wie ein Auszug aus der Leiste */
  transform-origin: top center;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.mega[hidden] { display: none !important; }
.mega:not(.ist-offen) { opacity: 0; transform: translateY(-0.4rem); pointer-events: none; }
.mega.ist-offen { opacity: 1; transform: none; }

.site-header.hat-mega,
.site-header.hat-mega.header--dark {
  background: var(--bg);
  color: var(--ink);
  box-shadow: none;
}

.mega-inner {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-md) var(--gutter) var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.mega-titel {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Leistungen --- */

.mega-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  /* Die Karten haben Innenabstand für die Hover-Fläche. Ohne diesen
     Ausgleich stünde ihr Text 21 px weiter innen als die Rubrik darüber
     und der Link darunter. So fluchtet alles auf derselben Kante, und
     die Hover-Fläche greift sichtbar darüber hinaus — das wirkt gewollt. */
  margin-inline: calc((var(--space-sm) + 1px) * -1);
}
.mega-karte {
  display: block;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.mega-karte:hover,
.mega-karte:focus-visible {
  background: var(--surface);
  border-color: var(--border);
}
.mega-icon {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 0.7rem;
  color: var(--accent);
}
.mega-icon svg { width: 100%; height: 100%; }
.mega-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 480;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
/* Konkrete Leistungen statt eines Satzes: Ein Zweizeiler sagt weniger
   als vier Begriffe, nach denen jemand tatsächlich sucht. */
.mega-liste { display: block; }
.mega-eintrag {
  display: block;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: color 0.25s var(--ease-out);
}
.mega-karte:hover .mega-eintrag,
.mega-karte:focus-visible .mega-eintrag { color: var(--ink); }

.mega-alle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  transition: color 0.25s var(--ease-out);
}
.mega-alle:hover { color: var(--accent); }
.mega-alle .btn-icon { width: 1.7rem; height: 1.7rem; }

/* --- Direkt weiter --- */

.mega-spalte--aktionen {
  border-left: 1px solid var(--border);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.mega-aktion {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.mega-aktion:first-of-type { border-top: 1px solid var(--border); }
.mega-aktion-name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.15rem;
  transition: color 0.25s var(--ease-out);
}
.mega-aktion:hover .mega-aktion-name,
.mega-aktion:focus-visible .mega-aktion-name { color: var(--accent); }
.mega-aktion-text {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 1023px) {
  /* Unter 1024 px übernimmt das Burger-Menü — das Panel bleibt aus. */
  .mega { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
  .mega:not(.ist-offen) { transform: none; }
}

/* Hinweis am Auslöser: Ohne Zeichen ist nicht erkennbar, dass „Leistungen"
   mehr kann als verlinken. Dreht sich, solange das Menü offen ist. */
[data-mega-trigger] {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}
[data-mega-trigger]::before {
  content: "";
  /* ::before statt ::after: ::after trägt bereits die Unterstreichung der
     Hauptnavigation. Beide auf demselben Pseudoelement ergaben einen
     2 px hohen, absolut positionierten Punkt unter dem Wort.
     order sorgt dafür, dass das Zeichen trotzdem rechts steht. */
  order: 1;
  width: 0.58rem;
  height: 0.58rem;
  flex: none;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2012%208%22%3E%3Cpath%20d=%22M1%201.5%206%206.5%2011%201.5%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2012%208%22%3E%3Cpath%20d=%22M1%201.5%206%206.5%2011%201.5%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
[data-mega-trigger]:hover::before { opacity: 1; }
[data-mega-trigger][aria-expanded="true"]::before {
  transform: rotate(180deg);
  opacity: 1;
}

/* Aktuelle Leistung im Menü kenntlich machen */
.mega-karte[aria-current="page"] .mega-icon { opacity: 1; }
.mega-karte[aria-current="page"] .mega-name { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  [data-mega-trigger]::before { transition: none; }
}


/* ============================================================
   Mobiles Menü — zweistufig

   Zwei Ebenen liegen übereinander auf einer Bühne. Die Unterebene
   kommt von rechts herein, die Startebene weicht dabei ein Stück nach
   links. Beide scrollen für sich, damit auf flachen Geräten nichts
   unerreichbar wird.
   ============================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none !important; }

.mm-buehne {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mm-ebene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--space-sm)) var(--gutter) var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ist der Inhalt höher als der Bildschirm, darf zentriertes Ausrichten
     den Anfang nicht über den oberen Rand schieben — sonst ist er nicht
     mehr erreichbar. */
  justify-content: center;
  justify-content: safe center;
  transition: transform 0.34s var(--ease-out), opacity 0.34s var(--ease-out);
}
.mm-ebene[hidden] { display: none !important; }

/* Die zweite Ebene beginnt oben, nicht mittig: Der Zurück-Knopf gehört
   dorthin, wo auf dem Telefon sonst der Zurück-Pfeil sitzt. */
.mm-ebene--unter {
  transform: translateX(100%);
  opacity: 0;
  justify-content: flex-start;
}
.mobile-menu.zeigt-unter .mm-ebene--unter { transform: none; opacity: 1; }
.mobile-menu.zeigt-unter .mm-ebene--start {
  transform: translateX(-22%);
  opacity: 0;
  pointer-events: none;
}

/* --- Startebene --- */

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.mobile-menu-nav a,
.mm-mehr {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.6rem, 7.2vh, 2.9rem);
  /* Ohne feste Zeilenhöhe erben Knopf und Link verschiedene Werte — die
     Zeilen wären unterschiedlich hoch, „Leistungen" fiele aus dem Raster. */
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-align: center;
  padding: clamp(0.4rem, 1.4vh, 1.15rem) 0;
  color: var(--ink);
  transition: color 0.25s;
}
.mobile-menu-nav a:active,
.mm-mehr:active { color: var(--accent); }

/* „Leistungen" öffnet die Unterebene statt direkt zu verlinken — der Weg
   zur Übersichtsseite steht dort als eigener Eintrag. */
.mm-mehr {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
.mm-mehr-pfeil {
  display: inline-flex;
  width: 0.62em;
  height: 0.62em;
  color: var(--accent);
  transition: transform 0.25s var(--ease-out);
}
.mm-mehr-pfeil svg { width: 100%; height: 100%; }
.mm-mehr:active .mm-mehr-pfeil { transform: translateX(0.15em); }

/* Website-Check und Kontakt sind Handlungen, keine Rubriken. Als
   Listenzeilen mit Trennstrichen sahen sie aus wie abgehängte Menüpunkte;
   als Flächen mit Pfeil sind sie eindeutig Ziele — und die Form nimmt die
   Karten der zweiten Ebene auf, statt eine dritte Sprache einzuführen. */
.mm-aktionen {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: clamp(1rem, 3.5vh, 2.25rem);
  flex-shrink: 0;
}
.mm-aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: clamp(0.7rem, 1.7vh, 0.95rem) clamp(0.9rem, 4vw, 1.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.mm-aktion--primaer {
  background: var(--surface);
  border-color: transparent;
}
.mm-aktion:active { border-color: var(--accent); color: var(--accent); }
.mm-aktion-name { font-weight: 600; font-size: 1.02rem; }
.mm-aktion .btn-icon { flex: none; width: 2rem; height: 2rem; }

/* Der schwebende Knopf gehört zur Seite, nicht zum Menü — sonst liegt er
   über den Rechtslinks. Das !important ist nötig, weil die Sichtbarkeit des
   Knopfes beim Scrollen direkt am Element gesetzt wird. */
body.menu-offen .fab { opacity: 0 !important; pointer-events: none !important; }

.mobile-menu-legal {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: clamp(1.1rem, 3vh, 2rem);
  flex-shrink: 0;
}

/* --- Unterebene --- */

.mm-zurueck {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem 0.6rem 0;
  margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: color 0.25s;
}
.mm-zurueck:active { color: var(--accent); }
.mm-zurueck-pfeil { display: inline-flex; width: 1.1em; height: 1.1em; }
.mm-zurueck-pfeil svg { width: 100%; height: 100%; }

.mm-sub-titel {
  margin: 0 0 clamp(0.75rem, 2vh, 1.25rem);
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 5vh, 2.4rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.mm-sub-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}
.mm-sub-karte {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: clamp(0.7rem, 1.8vh, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color 0.25s, background-color 0.25s;
}
.mm-sub-karte:active { background: var(--surface); border-color: var(--border-strong); }
.mm-sub-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  color: var(--accent);
}
.mm-sub-icon svg { width: 100%; height: 100%; }
.mm-sub-text { display: block; }
.mm-sub-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 480;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.mm-sub-liste {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.mm-alle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(0.9rem, 2.5vh, 1.5rem);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  flex-shrink: 0;
}
.mm-alle .btn-icon { width: 1.7rem; height: 1.7rem; }

@media (min-width: 1024px) {
  .mobile-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-ebene { transition: opacity 0.2s linear; }
  .mm-ebene--unter { transform: none; }
  .mobile-menu.zeigt-unter .mm-ebene--start { transform: none; }
}

/* Auftritt: Die Einträge kommen nacheinander, nicht als Block. Das gibt
   dem Öffnen eine Richtung von oben nach unten und lässt das Menü leichter
   wirken — die Verzögerungen bleiben unter einer Zehntelsekunde. */
@keyframes mm-auftritt {
  from { opacity: 0; transform: translateY(0.7rem); }
  to   { opacity: 1; transform: none; }
}
.mobile-menu:not([hidden]) .mm-ebene--start > * > *,
.mobile-menu:not([hidden]) .mm-ebene--start > .mobile-menu-legal {
  animation: mm-auftritt 0.42s var(--ease-out) both;
}
.mm-ebene--start .mobile-menu-nav > *:nth-child(1) { animation-delay: 0.02s; }
.mm-ebene--start .mobile-menu-nav > *:nth-child(2) { animation-delay: 0.05s; }
.mm-ebene--start .mobile-menu-nav > *:nth-child(3) { animation-delay: 0.08s; }
.mm-ebene--start .mobile-menu-nav > *:nth-child(4) { animation-delay: 0.11s; }
.mm-ebene--start .mobile-menu-nav > *:nth-child(5) { animation-delay: 0.14s; }
.mm-ebene--start .mm-aktionen > *:nth-child(1) { animation-delay: 0.17s; }
.mm-ebene--start .mm-aktionen > *:nth-child(2) { animation-delay: 0.20s; }
.mm-ebene--start .mobile-menu-legal { animation-delay: 0.23s; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]) .mm-ebene--start > * > *,
  .mobile-menu:not([hidden]) .mm-ebene--start > .mobile-menu-legal {
    animation: none;
  }
}

/* Flache Geräte: Die Schriftgrößen richten sich schon nach der Höhe (vh),
   die festen Abstände nicht — die sind hier der Grund, warum das Menü
   gescrollt werden muss. Also zuerst die Abstände zurücknehmen. */
@media (max-height: 700px) {
  .mm-ebene {
    padding-top: calc(var(--header-h) + 0.25rem);
    padding-bottom: var(--space-md);
  }
  /* Seit „Werkzeuge“ dazugekommen ist, stehen hier drei Flächen statt zwei.
     Damit das Menü auf einem 568 Pixel hohen Gerät weiterhin ohne Scrollen
     passt, geben die Abstände noch einmal nach — nicht die Tippflächen. */
  .mobile-menu-nav a, .mm-mehr { padding-block: clamp(0.22rem, 1vh, 0.9rem); }
  .mm-aktionen { margin-top: 0.45rem; gap: 0.4rem; }
  .mobile-menu-legal { margin-top: 0.4rem; }
  .mm-aktion { padding-block: 0.38rem; }
  .mm-aktion-name { font-size: 0.95rem; }
  .mm-aktion .btn-icon { width: 1.6rem; height: 1.6rem; }
  .mm-sub-liste { display: none; }   /* im Querformat zählt die Liste, nicht das Beiwerk */
  .mm-sub-karte { align-items: center; }
  .mm-sub-icon { margin-top: 0; }
}

/* ============================================================
   Werkzeuge

   Drei Seiten mit sehr unterschiedlichem Innenleben, aber einer gemeinsamen
   Sprache: Eingabe oben, Befunde darunter, Farbe nur als Signal. Grün, Gelb
   und Rot tragen nie allein die Aussage — daneben steht immer ein Wort.
   ============================================================ */

.tool-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-md);
}
.tool-karte {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: border-color 0.3s, transform 0.3s var(--ease-out), background-color 0.3s;
}
.tool-karte:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  transform: translateY(-2px);
}
.tool-karte-icon { width: 1.9rem; height: 1.9rem; color: var(--accent); }
.tool-karte-icon svg { width: 100%; height: 100%; }
.tool-karte-dauer {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool-karte-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.tool-karte-text { color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }
.tool-karte-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
.tool-karte-mehr .btn-icon { width: 1.7rem; height: 1.7rem; }
.tool-karte:hover .btn-icon { transform: translate(2px, -2px); }

/* --- Eingabebereich --- */

.tool { max-width: 60rem; }

/* Eingabefelder: dieselbe Optik wie im Kontaktformular. Die Regeln dort
   hängen an .contact-form — hier gibt es kein Formular, also noch einmal.
   Alle Texteingabe-Typen aufführen: type="url" gibt auf dem Telefon die
   passende Tastatur, fiel aber durch eine Liste, die nur "text" kannte. */
.tool input[type="text"],
.tool input[type="url"],
.tool input[type="email"],
.tool input[type="search"],
.tool input[type="tel"],
.tool textarea,
.tool select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.25s, background-color 0.25s;
}
.tool input::placeholder,
.tool textarea::placeholder { color: var(--ink-faint); }
.tool input:focus,
.tool textarea:focus,
.tool select:focus { border-color: var(--accent); background: var(--bg); }

/* Auswahlfelder: die native Optik weicht je Betriebssystem stark ab und
   passt nirgends zur Seite. Eigener Pfeil als Datenschema — eine externe
   Grafik wäre eine weitere Datei für zwölf Pixel. */
.tool select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B5458' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
}
:root[data-theme="dark"] .tool select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C4AEB2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tool .form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.tool-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-sm);
  align-items: end;
}
@media (max-width: 767px) {
  .tool-form { grid-template-columns: 1fr; }
  .tool-form-knopf { justify-content: center; }
}
.tool-form-knopf { white-space: nowrap; }

.tool-hinweis {
  margin-top: var(--space-sm);
  padding: clamp(0.9rem, 2vw, 1.2rem);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.tool-hinweis strong { color: var(--ink); }

.tool-optionen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.tool-eingabe textarea {
  width: 100%;
  resize: vertical;
  min-height: 12rem;
  font-family: inherit;
}
.tool-eingabe-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.tool-eingabe-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.tool-zaehler { font-size: 0.875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- Wartezustand --- */

.tool-lauf {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.tool-lauf p { margin: 0.6rem 0 0; color: var(--ink-soft); }
.tool-lauf-klein { font-size: 0.8125rem; color: var(--ink-faint); }
.tool-lauf-balken {
  display: block;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.tool-lauf-balken span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--accent);
  border-radius: 2px;
  animation: tool-lauf 1.6s var(--ease-out) infinite;
}
@keyframes tool-lauf {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* --- Ergebnis --- */

.tool-ergebnis { margin-top: var(--space-lg); }
.tool-h {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  letter-spacing: -0.01em;
  margin: var(--space-lg) 0 var(--space-sm);
}
.tool-klein {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
  max-width: 46rem;
}

/* Das Urteil in einem Satz — die Farbe links ist Beiwerk, die Aussage steht
   im Text. Wer Farben nicht unterscheiden kann, verliert nichts. */
.tool-urteil {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface);
}
.tool-urteil.ist-gut      { border-left-color: #3F7A52; }
.tool-urteil.ist-mittel   { border-left-color: #A87A2E; }
.tool-urteil.ist-schlecht { border-left-color: var(--accent); }
.tool-urteil.ist-neutral  { border-left-color: var(--border-strong); }
.tool-urteil-text { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.tool-urteil-quelle {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.tool-werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-sm);
}
.tool-wert {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: var(--radius-sm);
}
.tool-wert.ist-gut      { border-top-color: #3F7A52; }
.tool-wert.ist-mittel   { border-top-color: #A87A2E; }
.tool-wert.ist-schlecht { border-top-color: var(--accent); }
.tool-wert-zahl {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 480;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.tool-wert-name { margin: 0.15rem 0 0.4rem; font-weight: 600; font-size: 0.9375rem; }
.tool-wert-hilfe { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.5; }

.tool-bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-sm);
}
.tool-bereich {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tool-bereich-punkte {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 480;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tool-bereich.ist-gut .tool-bereich-punkte      { color: #3F7A52; }
.tool-bereich.ist-mittel .tool-bereich-punkte   { color: #A87A2E; }
.tool-bereich.ist-schlecht .tool-bereich-punkte { color: var(--accent); }
.tool-bereich-name { font-weight: 600; font-size: 0.9375rem; }
.tool-bereich-hilfe { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.45; }

/* ============================================================
   Text-Check: Adresseingabe und Diagramme
   ============================================================ */

.tool-quelle { display: grid; gap: var(--space-sm); align-items: end; }
@media (min-width: 640px) {
  .tool-quelle { grid-template-columns: minmax(0, 1fr) auto; }
}
.tool-quelle .form-field { margin: 0; }
.tool-quelle-status {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  min-height: 1.4em;
}
.tool-quelle-status.ist-gut { color: #3F7A52; }
.tool-quelle-status.ist-fehler { color: var(--accent); }

/* Trennzeile zwischen den beiden Wegen */
.tool-trenner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool-trenner::before,
.tool-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Diagramme ---
   Jede Karte trägt ihre Aussage im Kopf. Ein Diagramm, das man erst
   deuten muss, hat seine Aufgabe verfehlt. */
.tool-grafiken {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (min-width: 860px) {
  .tool-grafiken { grid-template-columns: 1fr 1fr; }
  .tool-grafik:nth-child(3) { grid-column: 1 / -1; }
}
.tool-grafik {
  margin: 0;
  padding: var(--space-sm) var(--space-sm) 1.1rem;
  border: 1px solid var(--border);
  background: var(--bg);
}
.tool-grafik-kopf { display: grid; gap: 0.15rem; margin-bottom: 0.9rem; }
.tool-grafik-titel {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool-grafik-aussage {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 480;
  line-height: 1.25;
  color: var(--ink);
}

.tool-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Bordeaux trägt die Aussage, Neutral den Rest. Grün und Amber liegen zu
   dicht beieinander, um in kleinen Flächen sicher unterschieden zu werden —
   sie bleiben der Befundliste vorbehalten, wo ein Wort danebensteht. */
.tool-svg-akzent  { fill: var(--accent); }
.tool-svg-neutral { fill: rgb(var(--ink-rgb) / 0.22); }
.tool-svg-marke   { stroke: var(--bg); stroke-width: 2; stroke-dasharray: 3 3; }
.tool-svg-zeiger  { stroke: var(--ink); stroke-width: 2; }
.tool-svg-grenze  { stroke: rgb(var(--ink-rgb) / 0.35); stroke-width: 1; stroke-dasharray: 4 4; }
.tool-svg-text    { fill: var(--ink); font-size: 15px; font-weight: 500; }
.tool-svg-klein   { fill: var(--ink-faint); font-size: 13px; }

/* Lesbarkeitsskala: die Bänder werden nach rechts heller — eine Richtung,
   keine Ampel. */
.tool-svg-band    { fill: rgb(var(--ink-rgb) / 0.30); }
.tool-svg-band.s1 { fill: rgb(var(--ink-rgb) / 0.22); }
.tool-svg-band.s2 { fill: rgb(var(--ink-rgb) / 0.14); }
.tool-svg-band.s3 { fill: rgb(var(--ink-rgb) / 0.08); }

.tool-svg-zahl {
  margin: 0 0 0.6rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 480;
  line-height: 1;
  color: var(--ink);
}
.tool-svg-zahl span {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 0.5rem;
}
.tool-svg-fuss { margin: 0.7rem 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

/* Floskeln als Balkenliste — Reihenfolge trägt die Aussage, nicht die Farbe. */
.tool-floskeln { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tool-floskel {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.tool-floskel-wort { color: var(--ink); overflow-wrap: anywhere; }
.tool-floskel-bahn { height: 10px; background: rgb(var(--ink-rgb) / 0.08); }
.tool-floskel-balken { display: block; height: 100%; background: var(--accent); }
.tool-floskel-zahl { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .tool-floskel { grid-template-columns: minmax(0, 1fr) auto; }
  .tool-floskel-bahn { grid-column: 1 / -1; }
}

.tool-befunde { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.tool-befund {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tool-befund.ist-gut      { border-left: 3px solid #3F7A52; }
.tool-befund.ist-mittel   { border-left: 3px solid #A87A2E; }
.tool-befund.ist-schlecht { border-left: 3px solid var(--accent); }
.tool-befund-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.tool-befund-kopf strong { font-size: 1rem; }
.tool-befund-gewinn {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tool-befund p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; }

.tool-feld { margin-top: var(--space-lg); }
.tool-feld p { color: var(--ink-soft); max-width: 46rem; }

.tool-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* --- Bilder --- */

.bild-feld {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: clamp(2rem, 7vw, 3.5rem) var(--space-md);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color 0.25s, background-color 0.25s;
}
.bild-feld.ist-bereit { border-color: var(--accent); background: var(--surface); }
.bild-feld-gross {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 480;
}
.bild-feld-klein { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.bild-feld-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.ist-beschaeftigt .bild-feld { opacity: 0.55; }

.bild-liste { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: 0.5rem; }
.bild-zeile {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.bild-vorschau {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 0.4rem;
  background: var(--surface);
}
.bild-daten { min-width: 0; }
.bild-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bild-masse { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); }
.bild-groessen {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bild-vorher { color: var(--ink-faint); text-decoration: line-through; }
.bild-nachher { color: var(--ink); font-weight: 600; }
.bild-pfeil { color: var(--ink-faint); }
.bild-ersparnis {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bild-ersparnis.ist-gut { color: #3F7A52; }
.bild-ersparnis.ist-mittel { color: #A87A2E; }
.bild-laden {
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.bild-laden:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 719px) {
  /* Auf schmalen Geräten untereinander statt fünfspaltig gequetscht */
  .bild-zeile {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .bild-groessen, .bild-ersparnis, .bild-laden { grid-column: 2; justify-self: start; }
}

:root[data-theme="dark"] .tool-urteil.ist-gut,
:root[data-theme="dark"] .tool-wert.ist-gut { border-color: #5E9E72; }
:root[data-theme="dark"] .tool-bereich.ist-gut .tool-bereich-punkte,
:root[data-theme="dark"] .bild-ersparnis.ist-gut { color: #7FBE92; }
:root[data-theme="dark"] .tool-bereich.ist-mittel .tool-bereich-punkte,
:root[data-theme="dark"] .bild-ersparnis.ist-mittel { color: #D6A85A; }

@media (prefers-reduced-motion: reduce) {
  .tool-lauf-balken span { animation: none; width: 100%; opacity: 0.5; }
  .tool-karte:hover { transform: none; }
}

@media print {
  .tool-form, .tool-hinweis, .tool-aktionen, .tool-lauf,
  .bild-feld, .tool-optionen, .tool-eingabe { display: none !important; }
}

/* ============================================================
   Standort-Landingpages

   Anderer Aufbau als die übrigen Seiten, und das mit Absicht: Wer über
   „Webdesign <Ort>“ hereinkommt, hat ein Problem und wenig Geduld. Deshalb
   steht die Anfrage im Kopfbereich neben der Aussage und nicht am Ende der
   Seite. Referenzen kommen zuletzt — sie sind Beleg, nicht Einstieg.
   ============================================================ */

/* Weniger Luft über dem Kopfbereich: Auf einer Landingpage zählt, wie viel
   Aussage über der Falz steht, nicht wie großzügig der Rand ist. */
.lp-hero {
  padding-top: calc(var(--header-h) + var(--space-md));
  padding-bottom: var(--space-md);
}

/* Ortsangabe als Erstes — der Besucher soll in einer Zehntelsekunde sehen,
   dass er richtig ist. Der Punkt davor ist ein Anker fürs Auge. */
.lp-ort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem 0.35rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.lp-ort-punkt {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Belege im Kopfbereich: vier harte Zusagen, die den leeren Raum unter den
   Vorteilen füllen und genau dort stehen, wo die Entscheidung fällt. */
.lp-belege {
  list-style: none;
  padding: 0;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  display: grid;
  /* Zweispaltig auch auf dem Telefon: Vier gestapelte Belege schieben das
     Formular sonst weit unter die Falz. 8,5 rem passen bei 390 px zweimal. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.8rem 1.25rem;
}
.lp-belege li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.lp-belege strong {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --- Handlungsaufforderung --- */

.lp-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
/* Der Hauptknopf ist auf einer Landingpage das eine Element, das sich vom
   restlichen Textlink-Stil der Seite abheben darf — sonst findet ihn im
   Fließtext niemand. */
.lp-hauptcta {
  padding: 0.78rem 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.lp-hauptcta:hover { color: #fff; opacity: 0.9; }
.lp-hauptcta .btn-icon { border-color: rgb(255 255 255 / 0.55); }
.lp-zweitcta {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--border-strong);
}
.lp-zweitcta:hover { color: var(--accent); text-decoration-color: currentColor; }

/* --- Vertrauensleiste mit Kundenlogos ---

   Die Logos liegen als einfarbige Masken vor (siehe bauen/build-logos.py).
   Dadurch tragen sie die Farbe der Seite statt zwölf fremder Markenfarben,
   funktionieren in hell und dunkel gleichermaßen und wirken nebeneinander
   ruhig. Optisch normiert sind sie bereits in der Bilddatei — hier genügen
   gleich große Kästen. */

.lp-logos { margin-top: var(--space-md); }
.lp-logos-reihe { gap: 0.3rem 1rem; }
.lp-logos-titel {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.lp-logos-reihe {
  list-style: none;
  padding: 0;
  display: flex;
  /* Eine Reihe, auch auf dem Telefon: Fünf Belege, die umbrechen, lesen sich
     als Liste. In einer Zeile lesen sie sich als Leiste. */
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.55rem, 2.2vw, 2rem);
}
/* Etwas präsenter als zuvor. In der alten Größe und Deckkraft lasen sich
   die Logos als Dekoration am Rand — als Beleg wirken sie erst, wenn man
   sie ohne Hinsehen erkennt. Weiterhin einfarbig und ohne Fremdfarben.

   Die Höhe führt, die Breite folgt dem Seitenverhältnis der Maske. Eine
   feste Breite für alle war der Fehler zuvor: Bei einer Maskenfläche von
   480 × 340 blieb neben schmalen Zeichen leerer Raum, und die Leiste wirkte
   ungleich. Die Masken selbst sind auf gleiche Wirkfläche normiert
   (siehe bauen/build-logos.py) — deshalb genügt hier eine Größe für alle. */
.lp-logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  height: clamp(2rem, 5.5vw, 2.75rem);
  aspect-ratio: 480 / 340;
  background-color: var(--ink-soft);
  -webkit-mask: var(--logo) no-repeat center / contain;
  mask: var(--logo) no-repeat center / contain;
  opacity: 0.8;
  transition: opacity 0.25s;
}
.lp-logos-reihe:hover .lp-logo { opacity: 0.55; }
.lp-logos-reihe .lp-logo:hover { opacity: 1; }

/* --- Problem-Raster --- */

.lp-problem-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-md);
}
/* Keine Karten. Rahmen, Rundung, Füllfarbe und Kreisicon ergaben vier
   gleich hohe Kästen — sauber, aber austauschbar, und im Widerspruch zum
   Rest der Seite, der von Typografie und Linien lebt. Was bleibt, ist eine
   kräftige Oberlinie je Spalte, die Ziffer links und das Icon rechts. Die
   Icons bleiben, weil sie beim Überfliegen tatsächlich helfen. */
.lp-problem {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-strong);
}
.lp-problem-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.lp-problem-nr {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.lp-problem-icon {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
}
.lp-problem-icon svg { width: 100%; height: 100%; }
.lp-problem-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}
.lp-problem p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; }

/* --- Prozess waagerecht ---
   Drei Schritte nebeneinander mit durchlaufender Linie: Das zeigt auf einen
   Blick, dass es kurz ist. Untereinander wirkt derselbe Ablauf lang. */

.lp-prozess {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
  counter-reset: schritt;
}
.lp-schritt { position: relative; padding-top: var(--space-sm); }
.lp-schritt-zahl {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}
/* Eine sehr feine Achse verbindet die Schritte — ohne sie stehen fünf
   Spalten beziehungslos nebeneinander. Deutlich zurückhaltender als die
   frühere Fassung: nur unter den Zahlen, nicht über die ganze Breite. */
/* Die Achse lief zuvor auf Höhe der Ziffern und schnitt sie durch. Jetzt
   sitzt je Schritt eine kurze Linie darüber — sie markiert den Beginn der
   Spalte, statt sich durch die Zahl zu ziehen. */
.lp-schritt { padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.lp-schritt-zahl { display: block; }
.lp-schritt-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.lp-schritt p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; }
.lp-hero-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 900px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 26rem);
    gap: var(--space-xl, 4rem);
  }
}
.lp-hero-text { min-width: 0; }

.lp-h1 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: var(--space-sm) 0 0.75rem;
  text-wrap: balance;
}
.lp-h1 em { color: var(--accent); font-style: italic; font-weight: 430; }
.lp-sub {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 34rem;
}

.lp-vorteile {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: grid;
  gap: 0.7rem;
}
.lp-vorteile li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 1rem;
  color: var(--ink);
}
.lp-haken {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  color: var(--accent);
}
.lp-haken svg { width: 100%; height: 100%; }

/* --- Anfragekarte --- */

.lp-form-karte {
  padding: clamp(1.2rem, 2.6vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  /* Auf breiten Fenstern mitlaufen: Wer unten bei den Belegen ankommt,
     hat die Anfrage weiterhin im Blick. */
  position: sticky;
  top: calc(var(--header-h) + var(--space-sm));
}
@media (max-width: 899px) {
  .lp-form-karte { position: static; }
}
.lp-form-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.lp-form-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-sm);
}
.lp-form { gap: var(--space-sm); }
.lp-form .form-label { font-size: 0.8125rem; }
.lp-form textarea { min-height: 5.5rem; }
/* Linksbündig wie alle Knöpfe der Seite — ein über die volle Breite
   gestreckter Knopf wirkt wie ein Formularabschluss, nicht wie eine
   Handlung. */
.lp-form .form-submit { justify-content: flex-start; }
.lp-form-fuss {
  margin-top: var(--space-sm);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --- Vertrauensleiste --- */

.lp-trust { padding-block: var(--space-md); }
.lp-trust-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lp-trust-punkt { display: flex; flex-direction: column; gap: 0.15rem; }
.lp-trust-zahl {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.lp-trust-name { font-weight: 600; font-size: 0.95rem; }
.lp-trust-text { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; }

.lp-cta { margin-top: var(--space-md); }

@media (prefers-reduced-motion: reduce) {
  .lp-form-karte { position: static; }
}

@media print {
  .lp-form-karte, .lp-cta { display: none !important; }
}

/* ============================================================
   Standort-Landingpages, zweiter Teil
   ============================================================ */

/* Rundung an der Kontaktfläche: Dahinter scheint sonst das Seitenweiß durch,
   während der Abschnitt darüber hell getönt ist — an den oberen Ecken entstand
   ein sichtbarer heller Keil. Das Füllstück deckt genau diese Stelle.

   Der Stapelkontext ist hier der entscheidende Teil: Das Füllstück ist
   positioniert, das Kontaktband nicht — dadurch lag die Fläche ÜBER dem Band
   und hat die Rundung glatt abgeschnitten. Sie soll aber dahinter liegen und
   nur in den beiden Eckkerben sichtbar sein. Deshalb bekommt das Band eine
   eigene Ebene darüber. */
.section--surface:has(+ .contact) { position: relative; }
.section--surface:has(+ .contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  height: 40px;
  background: var(--surface);
  pointer-events: none;
}
.section--surface:has(+ .contact) + .contact { position: relative; z-index: 1; }

/* Dezenter Verlauf im Kopfbereich. Zwei sehr weiche Lichter in den
   CI-Farben, kaum als Farbe erkennbar — sie sollen Tiefe geben, nicht
   auffallen. Deshalb Werte im niedrigen Prozentbereich. */
.lp-hero {
  position: relative;
  isolation: isolate;
}
/* Kein Verlauf im Kopfbereich.

   Mehrere Anläufe — längerer Ausklang, mehrstufige Maske, Interpolation
   gegen dieselbe Farbe mit Deckkraft null — haben die sichtbare Kante nie
   ganz beseitigt. Ein sehr flacher Verlauf über eine große Fläche bildet
   auf 8-Bit-Bildschirmen zwangsläufig Stufen; genau die nimmt man als Kante
   wahr. Statt weiter dagegen anzuarbeiten: weglassen. Die Seite lebt von
   Typografie und Flächen, nicht von Licht im Hintergrund. */

/* Fachteil */
/* Überschrift und Fließtext auf derselben Breite. Vorher lief die
   Überschrift über die ganze Bahn und der Text nur über die halbe — das
   wirkte wie zwei verschiedene Seiten. */
.lp-hintergrund { max-width: 46rem; }
.lp-hintergrund .section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.lp-fliesstext { max-width: 46rem; }
.lp-fliesstext p { color: var(--ink-soft); }
.lp-fliesstext p + p { margin-top: 1.15rem; }

/* Zielgruppen */
.lp-zielgruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
}
.lp-zielgruppe h3 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.lp-zielgruppe p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; }
.lp-region {
  margin-top: var(--space-md);
  font-size: 0.875rem;
  color: var(--ink-faint);
  max-width: none;
}
.lp-region strong { color: var(--ink-soft); }

/* Website-Check als zweiter Weg */
.lp-check {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 900px) {
  .lp-check { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); }
}
.lp-check p { color: var(--ink-soft); max-width: 42rem; margin-top: var(--space-sm); }
.lp-check-aktionen { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }

/* Abschluss */
.lp-anrufen { border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px; padding: 0.7rem 1.3rem; }
.lp-abschluss-punkte {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-md);
  font-size: 0.875rem;
  color: var(--band-ink, #fff);
  opacity: 0.75;
}
.lp-abschluss-punkte li::before { content: "✓ "; color: var(--accent-blush, #E8C8CE); }

/* Anruf-Zweitweg im Kopfbereich */
.lp-zweitcta { display: inline-flex; align-items: center; gap: 0.45rem; }
.lp-tel-icon { display: inline-flex; width: 1rem; height: 1rem; }
.lp-tel-icon svg { width: 100%; height: 100%; }

/* Aufklappbare Fragen auf den Landingpages — dieselbe Bauart wie auf der
   FAQ-Seite, damit Besucher dasselbe Verhalten vorfinden. */
.faq-liste { max-width: 52rem; border-top: 1px solid var(--border); }
.faq-liste .faq-item:first-child { border-top: none; }

/* --- Eigentums-Aussage: bewusst kein Kartenraster ---
   Nach Problem- und Lösungsabschnitt braucht die Seite einen anderen
   Rhythmus. Deshalb hier ein geteiltes Layout mit großer Aussage links und
   einer schlichten Liste rechts, ohne Kästen. */
.lp-zugang {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) { .lp-zugang { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.lp-zugang-text p { color: var(--ink-soft); max-width: 34rem; margin-top: var(--space-sm); }
.lp-zugang-punkte { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.lp-zugang-punkte li {
  display: grid;
  gap: 0.15rem;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent);
}
.lp-zugang-punkte strong { font-size: 1rem; }
.lp-zugang-punkte span { font-size: 0.9375rem; color: var(--ink-soft); }

/* Relaunch-Aufforderung */
.lp-relaunch { display: grid; gap: var(--space-md); align-items: center; }
@media (min-width: 900px) { .lp-relaunch { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: end; } }
.lp-relaunch p { color: var(--ink-soft); max-width: 40rem; margin-top: var(--space-sm); }
.lp-relaunch-aktion { display: grid; gap: 0.6rem; justify-items: start; }
.lp-klein { font-size: 0.8125rem; color: var(--ink-faint); margin: 0; }

/* Projekte hell hinterlegen, damit zwei getönte Bahnen nicht aneinanderstoßen */
.section--hell { background: var(--bg); }

/* Leistungen ohne Verlinkung: die Zeilen sind jetzt reine Aussagen */
/* Leistungen sind Aussagen, keine Links — kein Hover, kein Übergang. */
.lp-leistung { cursor: default; transition: none; }

/* ============================================================
   Landingpages — Rhythmus statt Raster

   Grundsatz: Karten nur dort, wo Inhalte als getrennte Einheiten gelesen
   werden sollen. Das gilt für die Problemsymptome — und sonst fast
   nirgends. Alles Weitere trägt die Typografie: große Zahlen, Linien,
   versetzte Spalten, offene Flächen.
   ============================================================ */

/* --- Gemeinsames Editorial-Raster: 35/65 ---
   Ein einziges Aufteilungsmuster für Lösung und Fachteil. Vorher hatte jede
   Sektion ihre eigenen Sonderwerte — daher die verrutschten Blöcke. */
.lp-split { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) {
  .lp-split {
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .lp-split-kopf { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}
.lp-split-intro { color: var(--ink-soft); margin-top: var(--space-sm); max-width: 24rem; font-size: 0.95rem; }
.lp-split-kopf .section-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

/* Lösung: zusammenhängende Reihen, keine frei schwebenden Blöcke */
.lp-loesung { list-style: none; padding: 0; display: grid; }
/* Enger gesetzt als zuvor. Die Aussagen sind kurz; mit der alten Polsterung
   und einer Überschrift in 1,7 rem brauchte die Sektion mehr Bildschirmhöhe,
   als sie an Inhalt trägt — und weil die Kopfspalte links mitläuft und dabei
   kurz bleibt, wurde die entstehende Leere daneben besonders sichtbar. */
.lp-nutzen {
  max-width: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.lp-nutzen:first-child { padding-top: 0; }
.lp-nutzen:last-child { border-bottom: none; }
.lp-nutzen-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.3rem;
}
.lp-nutzen p { margin: 0; color: var(--ink-soft); line-height: 1.55; max-width: 34rem; }

/* --- Leistungen: zweispaltige Service-Liste ---
   Divider laufen innerhalb ihrer Spalte, nicht über die ganze Seite. */
/* --- Leistungen als Vergleich ---

   Drei Spalten, in jeder dieselben Merkmale in derselben Reihenfolge. Der
   Vergleich entsteht durch das Querlesen, deshalb müssen die Zeilen auf
   gleicher Höhe liegen — dafür sorgt das Unterraster (subgrid) über alle
   drei Spalten hinweg. Ohne das rutschen die Zeilen auseinander, sobald ein
   Wert zweizeilig umbricht, und der Vergleich ist keiner mehr.

   Bewusst keine Preistabelle: keine Kästen, keine Schatten, keine
   hervorgehobene Spalte. Nur Linien, Ziffer, Serifenname. */
.lp-typen {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}
@media (min-width: 900px) {
  /* Nur Spaltenabstand. Ein `gap` gälte auch zwischen den elf Reihen des
     Vergleichs — zehnmal 6 rem, die sich unter den Spalten als leere Fläche
     sammeln, weil die Spalten ihre Reihen selbst ohne Abstand setzen. */
  /* Die Spaltenzahl steckt in einer Eigenschaft, damit dieselbe Komponente
     auch eine Gegenüberstellung von genau zwei Möglichkeiten tragen kann —
     ohne eine zweite, fast gleiche Bauart. Ohne Angabe bleibt es bei drei. */
  .lp-typen {
    grid-template-columns: var(--typ-spalten, repeat(3, minmax(0, 1fr)));
    column-gap: var(--space-xl);
    row-gap: 0;
  }
  /* Elf Reihen: Ziffer, Name, Aussage, sieben Merkmale, Handlung.
     Alle drei Spalten teilen sich dieselben Reihen, damit „Zeitrahmen“
     überall auf einer Höhe steht — auch wenn ein Wert darüber umbricht.
     Ohne das verschiebt eine zweizeilige Angabe die ganze Spalte, und aus
     dem Vergleich werden drei Beschreibungen nebeneinander. */
  @supports (grid-template-rows: subgrid) {
    /* Die Reihenfolge der Reihen steckt in einer Eigenschaft, damit dieselbe
       Komponente auch mit anderer Merkmalszahl und ohne Handlungszeile
       auskommt — die Wiederholungszahl in repeat() selbst darf keine
       Variable sein, die vollständige Reihenliste dagegen schon. Ohne
       Angabe bleibt es beim bisherigen Aufbau der Standortseiten. */
    .lp-typen { grid-template-rows: var(--typ-reihen, auto auto auto repeat(7, auto) auto); }
    .lp-typ {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    /* Die Merkmalsliste gibt ihre Reihen an das Unterraster durch. Die
       Paare bleiben in ihren div-Hüllen, die Liste selbst verschwindet
       nur aus dem Kasten­modell. */
    .lp-typ-merkmale { display: contents; }
  }
}
.lp-typ { border-top: 2px solid var(--accent); padding-top: var(--space-sm); }
.lp-typ-nr {
  display: block;
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 0.95rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.lp-typ-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.4rem;
}
.lp-typ-claim {
  margin: 0 0 var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 26rem;
}

/* Merkmal links, Wert rechts — die Bauart, die eine Tabelle lesbar macht,
   ohne eine zu sein. */
.lp-typ-merkmale { margin: 0; display: grid; align-content: start; }
.lp-typ-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.62rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.4;
}
.lp-typ-zeile dt { color: var(--ink-faint); flex: none; }
.lp-typ-zeile dd { margin: 0; text-align: right; color: var(--ink); }
.lp-typ-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  width: 100%;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.lp-typ-cta .btn-icon { width: 1.7rem; height: 1.7rem; margin-left: auto; }
.lp-typ-cta:hover { color: var(--accent); }
.lp-typ-cta:hover .btn-icon { border-color: currentColor; }

.lp-typen-fuss {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  max-width: 42rem;
}

/* Was kein eigener Projekttyp ist, steht kleiner und abgesetzt darunter. */
.lp-weitere {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.lp-weitere-titel {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.55rem;
}
.lp-weitere-liste {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.4;
  margin-bottom: 0.7rem;
}
.lp-weitere-liste span { white-space: nowrap; }
.lp-weitere-text {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0;
}
.lp-weitere-text a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--border-strong);
}
.lp-weitere-text a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* --- Eigentum: randlos über die volle Viewportbreite ---
   Der Fehler zuvor: Die Sektion trug die Klasse .section und damit deren
   max-width — dadurch stand die dunkle Fläche in einem Kasten statt von
   Kante zu Kante. Hintergrund gehört an die Sektion, die Breitenbegrenzung
   an einen inneren Behälter. */
.lp-eigentum {
  background: var(--overlay-bordeaux, #2A171B);
  color: #F2EBE8;
  padding-block: var(--space-xl);
  padding-inline: var(--gutter);
  margin-bottom: 0;
}
.lp-eigentum .lp-zugang {
  max-width: var(--page-max);
  margin-inline: auto;
  border: none;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .lp-eigentum .lp-zugang { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-xl); }
}
.lp-eigentum .section-title { color: #F7F2F0; }
.lp-eigentum .lp-zugang-text p { color: rgb(242 235 232 / 0.84); margin-top: var(--space-sm); }
/* Etwas kleiner als zuvor: In der alten Größe stand die Zahl in direkter
   Konkurrenz zur Überschrift darunter, obwohl sie deren Beleg sein soll. */
.lp-zugang-zahl {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(3rem, 6.8vw, 5.1rem);
  line-height: 0.9;
  color: #E8C8CE;
  margin-bottom: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.lp-zugang-zahl span {
  display: block;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-top: 0.35rem;
  color: rgb(242 235 232 / 0.85);
}
.lp-zugang-punkte { list-style: none; padding: 0; display: grid; gap: var(--space-md); }
.lp-zugang-punkte li { display: grid; gap: 0.15rem; padding-left: var(--space-sm); border-left: 2px solid #E8C8CE; }
.lp-zugang-punkte strong { color: #F7F2F0; font-size: 1rem; }
.lp-zugang-punkte span { color: rgb(242 235 232 / 0.86); font-size: 0.9375rem; }

/* --- Fachteil: redaktionell, eine Spalte, kein Versatz --- */
.lp-fliesstext { max-width: none; display: grid; gap: var(--space-lg); }
.lp-hg-block { max-width: 42rem; }
.lp-hg-block h3 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.lp-hg-block p { margin: 0; color: var(--ink-soft); }
.lp-hintergrund { max-width: none; }
.lp-hintergrund .section-title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
/* 6 rem zwischen vier Absatzblöcken sind allein 288 Pixel Zwischenraum in
   einer einzigen Sektion — die Blöcke gehören zusammen und brauchen keinen
   Sektionsabstand untereinander. Und 40 statt 36 rem Satzbreite spart bei
   dieser Textmenge rund eine Zeile je Block, ohne die Lesbarkeit zu
   verlassen (etwa 85 Zeichen je Zeile). */
.lp-hintergrund .lp-fliesstext { gap: var(--space-lg); }
.lp-hg-block { max-width: 40rem; }

/* --- Zielgruppen: geordnetes 2×2 mit feinem Trennkreuz ---
   Das Schachbrett aus versetzten Texten war keine Komposition, sondern
   verteilter Inhalt. Ordnung kommt jetzt aus dem Raster, nicht aus Kästen. */
.lp-zielgruppen { display: grid; gap: 0; }
@media (min-width: 780px) {
  .lp-zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-zielgruppe:nth-child(odd) { padding-right: var(--space-md); border-right: 1px solid var(--border); }
  .lp-zielgruppe:nth-child(even) { padding-left: var(--space-md); }
  .lp-zielgruppe:nth-child(-n+2) { padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); }
  .lp-zielgruppe:nth-child(n+3) { padding-top: var(--space-md); }
}
.lp-zielgruppe { margin-top: 0 !important; }
.lp-zielgruppe h3 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}
.lp-zielgruppe p { max-width: 30rem; }

/* --- Projekte asymmetrisch --- */
/* Referenzen als Zeilenliste wie auf der Startseite — dort trägt der
   Zeigerverfolger die Vorschau. Hier steht das Bild fest in der Zeile: kein
   Hover nötig, und auf dem Telefon funktioniert es genauso. */
.lp-refs { display: grid; border-top: 1px solid var(--border); }
.lp-ref {
  display: grid;
  grid-template-columns: 2.5rem 10rem minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  /* Nur ein ruhiger Flächenwechsel — der Pfeil rechts genügt als Signal. */
  transition: background-color 0.25s;
}
.lp-ref:hover { background: var(--surface); }
.lp-ref-nr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-faint);
}
.lp-ref-bild {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 0.4rem;
  overflow: clip;
  border: 1px solid var(--border);
  background: var(--surface);
}
.lp-ref-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: var(--shot-filter);
}
.lp-ref-text { display: grid; gap: 0.2rem; min-width: 0; }
.lp-ref-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.lp-ref-kontext { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.lp-ref-pfeil { width: 1.15rem; height: 1.15rem; color: var(--ink-faint); transition: color 0.25s; }
.lp-ref-pfeil svg { width: 100%; height: 100%; }
.lp-ref:hover .lp-ref-pfeil { color: var(--accent); }
@media (max-width: 719px) {
  .lp-ref { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); }
  .lp-ref-nr, .lp-ref-pfeil { display: none; }
}

/* --- Prozess: Zahlen als Gestaltungselement ---
   Etwas kleiner gesetzt: Fünf Spalten nebeneinander tragen ohnehin wenig
   Text je Spalte, und eine Ziffer in 3,4 rem darüber machte aus einer
   knappen Aufzählung eine bildschirmfüllende Sektion. */
.lp-schritt-zahl {
  width: auto;
  height: auto;
  border: none;
  background: none;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.lp-schritt-titel { font-size: 1.05rem; margin-bottom: 0.3rem; }
.lp-schritt p { font-size: 0.9rem; line-height: 1.5; }


/* Die frühere Abschwächung der Problemkarten (kleinere Rundung, Icon ohne
   Füllung) ist entfallen — es gibt keine Karten mehr, an denen sie ansetzen
   könnte. Die Gestaltung steht jetzt vollständig bei .lp-problem oben. */

/* --- Signature-Moment: nur Typografie ---
   Eine Stelle ohne Kasten, ohne Icon, ohne Knopf. Sie trägt nichts bei
   außer Haltung — und genau deshalb bleibt sie hängen. */
/* Auf etwa 60 % Bildschirmhöhe begrenzt: Der Satz soll wirken, aber keinen
   ganzen Bildschirm für sich beanspruchen. */
.lp-satz {
  padding-block: clamp(var(--space-md), 6vw, var(--space-lg));
  min-height: 42vh;
  max-height: 62vh;
  display: grid;
  align-content: center;
}
.lp-satz p {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}
.lp-satz em { color: var(--accent); font-style: italic; font-weight: 430; }

/* ============================================================
   Landingpages — Feinschliff (Abstände, Dichte, Abschluss)

   Abstände richten sich nach --section-gap, dem Wert, den die übrige
   Website verwendet. Sonderwerte nur dort, wo eine Sektion nachweislich
   zu viel Höhe beansprucht.
   ============================================================ */

/* --- Seitenrhythmus: derselbe Takt, ein Achtel dichter ---

   Die übrige Website setzt --section-gap; das gilt hier genauso, sonst
   fühlen sich Landingpage und Website wie zwei Projekte an. Nur ist eine
   Landingpage zwölf Sektionen lang statt fünf: Bei unverändertem Wert sind
   rund sechzehn Prozent der Seitenhöhe reiner Zwischenraum. Einzeln sieht
   jeder Abstand richtig aus, hintereinander summiert er sich zu einer
   Seite, die langsamer wirkt, als sie ist.

   Deshalb kein eigener Sonderwert, sondern derselbe Ausdruck mit einem
   Faktor — gleiche Kurve über alle Fenstergrößen, nur etwas enger. */
.lp-seite {
  --section-gap: clamp(3.85rem, 8.5vw, 7.95rem);
  --band-pad: clamp(2.8rem, 5.2vw, 4.75rem);
}

/* 1 — Statement: Luft ja, aber kein eigener Bildschirm */
.lp-satz {
  min-height: 28vh;
  max-height: 40vh;
  margin-bottom: var(--section-gap);
}

/* Beide Zeilen in derselben Flucht. Ein Versuch mit eingerückter zweiter
   Zeile ist wieder raus — der Satz wirkt über die Kursive, nicht über den
   Versatz, und die gebrochene Kante nahm ihm die Ruhe. */

/* Die dunkle Bahn stößt direkt an die folgende Fläche — ein Abstand
   dazwischen hinterlässt einen weißen Spalt, weil beide Bahnen randlos
   laufen. Und die folgende Sektion behält ihre eigene Polsterung; sie ihr
   zu nehmen ergab 0 px oben gegen 86 px unten. */
.lp-eigentum { margin-bottom: 0; }
/* Das gilt aber nur für getönte Bahnen, die eine eigene Polsterung
   mitbringen. Folgt eine gewöhnliche weiße Sektion, hat sie keine — dann
   klebt ihre erste Zeile an der Kante der dunklen Bahn. Sie bekommt den
   Abstand hier als Innenabstand, damit die Verzahnung mit den getönten
   Bahnen unangetastet bleibt. Maß ist die Bandpolsterung, nicht der
   Sektionsrhythmus: so entsteht dieselbe Kante wie auf den Seiten, wo eine
   getönte Bahn folgt. */
.lp-eigentum + .section:not(.section--surface):not(.section--hell):not(.section--dunkel) {
  padding-top: var(--band-pad);
}

/* 3 — Schmale Handlungszeile nach den Referenzen */
.lp-zwischencta {
  margin-top: var(--space-md);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: none;
}
.lp-zwischencta a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--border-strong);
}
.lp-zwischencta a:hover { color: var(--accent); text-decoration-color: currentColor; }
.lp-zwischencta-oder { color: var(--ink-faint); margin-inline: 0.35rem; }

/* 4 — Referenzbilder mehr Gewicht */
.lp-ref { grid-template-columns: 2.5rem 13rem minmax(0, 1fr) auto; }
@media (max-width: 719px) {
  .lp-ref { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* 5 — Fachteil: eine hervorgehobene Aussage je Seite */
.lp-hg-block--betont {
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
}
.lp-hg-block--betont p { color: var(--ink); }

/* 6 — Zielgruppen kompakter */
.lp-zielgruppen { row-gap: 0; }
@media (min-width: 780px) {
  .lp-zielgruppe:nth-child(-n+2) { padding-bottom: var(--space-sm); }
  .lp-zielgruppe:nth-child(n+3) { padding-top: var(--space-sm); }
}

/* 7 — FAQ mit Kontaktblock rechts: begründet die freie Fläche und fängt
   alle auf, deren Frage nicht dabei war. */
.lp-faq-raster { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 980px) {
  .lp-faq-raster { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-xl); }
  .lp-faq-hilfe { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}
.lp-faq-liste, .faq-liste { max-width: none; }
.lp-faq-hilfe {
  padding: var(--space-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.lp-faq-hilfe-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.lp-faq-hilfe p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.lp-faq-hilfe-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.lp-faq-hilfe-link .btn-icon { width: 1.7rem; height: 1.7rem; }
.lp-faq-hilfe-link:hover { color: var(--accent); }
.lp-faq-hilfe-tel { margin-top: 0.6rem !important; font-size: 0.8125rem !important; }
.lp-faq-hilfe-tel a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }

/* --- Zusammenarbeit: die sechs Argumente einmal nebeneinander ---
   Bewusst das schlichteste Muster der ganzen Seite: kurze Zeile, kurzer
   Satz, feine Oberlinie. Diese Sektion soll nichts erzählen, sondern eine
   Entscheidung stützen — sie steht direkt vor den letzten Einwänden. */
/* Feste Dreiteilung statt auto-fit: Sechs Punkte ergeben in vier Spalten
   4 + 2 und damit eine angebrochene zweite Reihe. Drei mal zwei geht auf. */
.lp-punkte {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}
@media (min-width: 600px) { .lp-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .lp-punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-punkt { padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.lp-punkt-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}
.lp-punkt p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }

/* --- Tippziele auf den Landingpages ---
   Drei Textlinks lagen unter den 44 Pixeln, die eine Fingerkuppe braucht:
   die Rufnummer im Kopfbereich, der Verweis im FAQ-Kasten und der Knopf im
   schwebenden Hinweis. Gelöst über Polsterung statt fester Höhe, damit
   längerer Text weiterhin umbrechen darf. */
.lp-zweitcta,
.lp-faq-hilfe-link {
  min-height: 44px;
  padding-block: 0.55rem;
}
.fab-panel-cta { min-height: 44px; }

/* --- Kopfbereich der Startseite: Einordnung und Lesetext ---
   Das Label über der Überschrift trägt die Kategorie („Individuelles
   Webdesign“), damit die H1 wieder der Markensatz sein darf statt einer
   Suchzeile. Und der Fließtext darunter war gegenüber einer 88-Pixel-
   Überschrift zu klein geraten — bei diesem Größenunterschied liest er sich
   wie eine Fußnote statt wie die Erklärung des Angebots. */
.hero-eyebrow { margin-bottom: var(--space-sm); }
.hero-sub {
  max-width: 34rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

/* ============================================================
   Leistungsübersicht — Dichte und Rhythmus

   Die Seite fiel ab der Mitte sichtbar ab: oben ein sauberes Kartenraster,
   darunter zwei Sektionen, die nur aus großer Überschrift und Aufzählung
   bestanden. Gleicher Inhalt, aber gesetzt statt aufgelistet — und die
   Karten oben etwas entlastet.
   ============================================================ */

/* Kartentitel dürfen im Dreierraster nicht unterschiedlich hoch sein; die
   Bezeichnungen sind dafür gekürzt, die Größe hilft bei der längsten nach. */
/* Gemessen: In der Spalte stehen 364 Pixel zur Verfügung; „Webentwicklung
   & Betreuung" braucht bei 1,7 rem mehr und bricht um. Bei 1,5 rem passen
   alle drei einzeilig, und der Abstand zur Beschreibung bleibt deutlich. */
.services .bento-name { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
/* Etwas Luft zwischen Beschreibung und Schlagwörtern — vorher klebten sie
   aneinander und lasen sich als ein Block. */
.services .bento-tags { padding-top: var(--space-sm); }

/* --- Welche Leistung passt: drei Spalten, Link am Fuß --- */
.fall-raster {
  display: grid;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-md);
  align-items: start;
}
@media (min-width: 900px) { .fall-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fall {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--accent);
}
.fall-nr {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.fall-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.fall p { margin: 0 0 var(--space-sm); color: var(--ink-soft); font-size: 0.95rem; }
/* margin-top: auto hält die Links auf einer Linie, auch wenn die Texte
   unterschiedlich lang umbrechen. */
.fall-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.fall-link .btn-icon { width: 1.7rem; height: 1.7rem; }
.fall-link:hover { color: var(--accent); }
.fall-link:hover .btn-icon { border-color: currentColor; }

/* --- Kopfbereich und Ablauf: Satzbreiten --- */
/* Ohne Begrenzung bricht die Überschrift auf sehr breiten Fenstern an
   beliebiger Stelle um. */
.page-hero .section-title { max-width: 22ch; }
.page-hero .page-lead { max-width: 44rem; }
/* Der Zeitstrahl stand mit 46 rem in einer 73 rem breiten Bahn — rechts
   blieb eine leere Hälfte stehen. Etwas breiter, aber weiterhin luftig. */
.flow { max-width: 56rem; }

/* Der „Mehr“-Link lag bei 34 Pixeln — zu wenig für eine Fingerkuppe.
   Polsterung statt fester Höhe, damit längerer Text weiter umbrechen darf. */
.more-link { min-height: 44px; padding-block: 0.4rem; }

/* ============================================================
   „Warum das zusammengehört“ — gestapelte Karten auf dunkler Bahn

   Der Effekt ist reines position: sticky. Jede Karte bleibt an ihrer
   Position stehen, die folgende schiebt sich darüber und lässt oben einen
   Streifen der vorigen frei — die Ziffern bleiben dadurch als Stapel
   sichtbar. Der Versatz kommt aus --i, das im Markup je Karte gesetzt ist.

   Kein Skript: Sticky ist keine Animation, sondern Layout. Was ohne CSS
   übrig bleibt, ist eine normale Liste — und die liest sich vollständig.
   ============================================================ */

/* Randlose dunkle Bahn. Trägt bewusst NICHT die Klasse .section: deren
   max-width würde die Fläche in einen Kasten sperren. Breitenbegrenzung
   gehört an den inneren Behälter. */
.grund-band {
  background: var(--overlay-bordeaux, #2A171B);
  color: #F2EBE8;
  padding-block: var(--band-pad);
  padding-inline: var(--gutter);
  margin-bottom: var(--section-gap);
}
.grund-band-inner { max-width: var(--page-max); margin-inline: auto; }

/* Die getönte Bahn darüber muss die dunkle direkt berühren — ein Abstand
   dazwischen hinterlässt einen weißen Spalt, weil beide randlos laufen.
   Nach unten gilt der normale Rhythmus: dort folgt weiße Fläche auf weißem
   Grund, da fällt kein Spalt auf. */
.section--surface:has(+ .grund-band) { margin-bottom: 0; }
/* Getönte Bahn direkt vor einem dunklen Band: Der weiße Streifen dazwischen
   würde den Bruch abschwächen, den das dunkle Band gerade setzen soll. */
.section--surface:has(+ .section--dunkel) { margin-bottom: 0; }

.grund-split { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) {
  .grund-split {
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: var(--space-xl);
    align-items: start;
  }
  /* Die Überschrift läuft mit, solange die Karten durchlaufen. */
  .grund-kopf { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}
.grund-band .section-eyebrow { color: var(--accent-blush, #E8C8CE); }
.grund-band .section-title { color: #F7F2F0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.grund-intro {
  margin-top: var(--space-sm);
  max-width: 24rem;
  font-size: 0.95rem;
  color: rgb(242 235 232 / 0.72);
}

.grund-stapel { display: grid; gap: var(--space-md); }
.grund-karte {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  /* Deckend, sonst scheinen die darunterliegenden Karten durch. Etwas
     heller als die Bahn, damit der Stapel als Schichtung lesbar bleibt. */
  background: #352025;
  border: 1px solid rgb(232 200 206 / 0.14);
}
.grund-nr {
  display: block;
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1rem;
  color: var(--accent-blush, #E8C8CE);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}
.grund-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #F7F2F0;
  margin-bottom: 0.45rem;
}
.grund-karte p {
  margin: 0;
  color: rgb(242 235 232 / 0.82);
  max-width: 34rem;
  line-height: 1.6;
}

/* Der Stapel selbst — erst ab Tablettbreite. Auf dem Telefon wären das
   vier Bildschirmhöhen Scrollweg für vier kurze Absätze; dort bleibt es
   eine schlichte Abfolge. */
@media (min-width: 900px) {
  /* Nachlauf am Fuß des Stapels: Ohne ihn endet der umgebende Block genau
     dort, wo die letzte Karte einrastet — und schiebt die drei darunter
     liegenden im selben Moment wieder hoch. Der Stapel löst sich dann auf,
     statt als Stapel aus dem Bild zu laufen. */
  .grund-stapel { gap: 0; }
  .grund-karte {
    position: sticky;
    /* Je Karte 3,25 rem tiefer: genau die Höhe des Ziffernstreifens, damit
       01 bis 04 am oberen Rand nebeneinander stehen bleiben. */
    top: calc(var(--header-h) + var(--space-md) + var(--i) * 3.25rem);
  }
  .grund-karte + .grund-karte { margin-top: var(--space-lg); }
  /* Gleiche Mindesthöhe: Eine kurze Karte, die auf eine deutlich längere
     folgt, würde diese unten hervorschauen lassen. Bei 52 Pixeln Versatz
     genügt es, wenn keine Karte mehr als 52 Pixel kürzer ist als die
     vorige — die Mindesthöhe garantiert das unabhängig vom Text. */
  .grund-karte { min-height: 14rem; }
  /* Scrollweg zwischen den Karten. Ohne ihn läge der Stapel sofort
     vollständig übereinander und der Effekt wäre nicht zu sehen.

     Auch die letzte Karte bekommt ihn: Ohne diesen Nachlauf endet der
     umgebende Block genau dort, wo Karte 04 einrastet — und schiebt die
     drei darunter im selben Moment wieder hoch. Der Stapel löste sich
     dann auf, statt als Stapel aus dem Bild zu laufen. Als Polsterung am
     Behälter wirkt es nicht; die Haftgrenze richtet sich nach dem
     Flussinhalt, nicht nach dessen Polsterung. */
  .grund-karte { margin-bottom: 22vh; }
}

/* Wer Bewegung reduziert hat, bekommt die Karten untereinander. Sticky ist
   zwar keine Animation, aber der Stapel erzeugt eine Bewegung beim Scrollen,
   die genau das ist, was hier vermieden werden soll. */
@media (prefers-reduced-motion: reduce) {
  .grund-karte { position: static; margin-bottom: 0 !important; }
  .grund-stapel { gap: var(--space-md); }
  .grund-kopf { position: static; }
}

/* Kurze Einordnung vor dem Abschluss der Leistungsübersicht. Fließtext auf
   Lesebreite, etwas zurückgenommen — er fasst zusammen und will keine
   Aufmerksamkeit vom Abschluss darunter abziehen. */
.seo-abschluss {
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- Vergleichsspalten auf der Webdesign-Leistungsseite ---
   Dieselbe Komponente wie auf den Standortseiten, nur dichter: Die Seite
   trägt mehr Inhalt je Spalte, deshalb kleinere Zeilen und weniger
   Polsterung. Keine zweite, fast gleiche Bauart. */
.lp-typen--dicht .lp-typ-zeile { padding: 0.5rem 0; font-size: 0.8125rem; }
.lp-typen--dicht .lp-typ-name { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.lp-typen--dicht .lp-typ-claim { font-size: 0.9rem; }
/* Bei drei Wörtern links und einer Aufzählung rechts wird es in einer
   Drittelspalte eng. Deshalb hier Label über Wert statt nebeneinander —
   die Zuordnung bleibt gleich, die Zeile bricht nicht mehr auseinander. */
.lp-typen--dicht .lp-typ-zeile {
  display: grid;
  gap: 0.15rem;
}
.lp-typen--dicht .lp-typ-zeile dd { text-align: left; }

/* --- Dunkle Zwischenbahn ---
   Randlos über die volle Breite; trägt deshalb nicht .section, deren
   max-width die Fläche in einen Kasten sperren würde. Breitenbegrenzung
   gehört an den inneren Behälter. Nach oben und unten gilt der normale
   Abstand — dort steht weiße Fläche auf weißem Grund, da fällt kein Spalt
   auf. */
.section--dunkel {
  background: var(--band-bg);
  color: var(--band-ink);
  padding-block: var(--band-pad);
  padding-inline: var(--gutter);
  margin-bottom: var(--section-gap);
}
.section--dunkel .section-title { color: var(--band-ink); }
.section--dunkel .section-eyebrow { color: var(--accent-blush, #E8C8CE); }
/* Dasselbe gilt im Kontaktband: Bordeaux auf dunklem Grund ergibt 1,7:1
   und ist damit praktisch unlesbar. Betrifft auch /ueber-mich.html. */
.contact .section-eyebrow { color: var(--accent-blush, #E8C8CE); }
.section--dunkel .article-checklist li { color: rgb(242 235 232 / 0.88); }
.section--dunkel .article-checklist li::before { color: var(--accent-blush, #E8C8CE); }
.section--dunkel p { color: rgb(242 235 232 / 0.82); }
.section--dunkel a { color: var(--band-ink); text-decoration-color: rgb(242 235 232 / 0.45); }
.section--dunkel a:hover { color: var(--accent-blush, #E8C8CE); }

/* Referenzkarten führen auf die veröffentlichte Website des Kunden, nicht
   auf eine Unterseite hier — der Pfeil sagt das, bevor jemand klickt.
   Bewegung nur beim Zeigen und minimal; die Karten sollen ruhig bleiben. */
.ref-pfeil {
  display: inline-flex;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.4em;
  color: var(--ink-faint);
  transition: color 0.25s, transform 0.25s var(--ease-out);
}
.ref-pfeil svg { width: 100%; height: 100%; }
.ref-card:hover .ref-name { color: var(--accent); }
.ref-card:hover .ref-pfeil { color: var(--accent); transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .ref-pfeil { transition: color 0.25s; }
  .ref-card:hover .ref-pfeil { transform: none; }
}

/* ============================================================
   Kopfbereich der Webdesign-Leistungsseite: Index rechts

   Die rechte Hälfte stand leer. Statt eines Bildes oder Kacheln steht dort
   jetzt der Leistungsumfang in drei Zeilen — die linke Seite bleibt
   dadurch so großzügig wie vorher, und wer nur den ersten Bildschirm
   sieht, kennt trotzdem den Gesamtumfang.

   Bewusst keine Überschriftenebenen: Die drei Titel stünden vor allen H2
   der Seite und würden die Gliederung verfälschen. Sie sind Absätze, die
   wie Überschriften gesetzt sind.
   ============================================================ */
.hero-split { display: grid; gap: var(--space-lg); }
/* Erst ab 1100 Pixeln zweispaltig. Bei 1024 schrumpften beide Spalten
   anteilig, und die Textspalte wurde mit 420 Pixeln schmaler als der Index
   daneben — die Überschrift stand dann im engeren Feld. */
@media (min-width: 1100px) {
  /* Links gedeckelt, rechts der Rest.

     Zwei Zwischenschritte waren nötig, bis das saß. Mit 1fr links wurde
     der Index an den rechten Rand geschoben — sein Startpunkt ist dann
     zwangsläufig (Bahn − Spaltenbreite) und vom Abstand unabhängig. Mit
     Deckelung auf beiden Seiten rückte die Gruppe nach links, ließ aber
     rechts ein Viertel der Bahn leer.

     Jetzt begrenzt nur die Textspalte, der Index nimmt den Rest — seine
     Linien laufen dadurch bis an die rechte Flucht der Bahn. */
  .hero-split {
    grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
    column-gap: clamp(6.25rem, 8vw, 9.375rem);
    align-items: center;
  }
  /* Etwas höher ansetzen: So liegt die 01 zwischen Eyebrow und erster
     Zeile der Überschrift, statt mittig daneben. Beide Seiten verzahnen
     sich dadurch, statt nebeneinanderzustehen. */
  .hero-index { margin-top: -1.5rem; }
}
.hero-index { list-style: none; padding: 0; margin: 0; }
.hx-punkt {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  transition: border-color 0.3s var(--ease-out);
}
.hx-punkt:first-child { border-top: none; padding-top: 0; }
.hx-nr {
  display: block;
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 0.9rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
  transition: color 0.3s var(--ease-out);
}
.hx-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.hx-text { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; margin: 0; max-width: 30rem; }
/* Sehr zurückhaltend: Ziffer und Linie nehmen die Akzentfarbe an, der Text
   rückt zwei Pixel. Mehr würde die ruhigste Stelle der Seite stören. */
@media (hover: hover) {
  .hx-punkt:hover { border-color: var(--accent); }
  .hx-punkt:hover .hx-nr { color: var(--accent); }
  .hx-punkt > p { transition: transform 0.3s var(--ease-out); }
  .hx-punkt:hover > p { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-punkt:hover > p { transform: none; }
}

/* ============================================================
   Ergebnisblock: Aussage statt zweiter Aufzählung

   Denselben Aufbau wie im Kopfbereich zu wiederholen — links Text, rechts
   drei Punkte — hätte aus zwei verschiedenen Stellen dasselbe Raster
   gemacht. Rechts steht deshalb nur ein Satz.
   ============================================================ */
.ergebnis-split { display: grid; gap: var(--space-lg); }
@media (min-width: 980px) {
  .ergebnis-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: start;
  }
}
.ergebnis-aussage { position: relative; }
.ergebnis-satz {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--band-ink);
  margin-bottom: var(--space-md);
  max-width: 12ch;
}
.ergebnis-satz em { color: var(--accent-blush, #E8C8CE); font-style: italic; font-weight: 430; }
.ergebnis-zeilen {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgb(242 235 232 / 0.7) !important;
  margin: 0;
}
/* Das Zeichen als Fläche, nicht als Schmuck: Ton in Ton, damit die dunkle
   Hälfte Tiefe bekommt, ohne dass ein Bild nötig wäre. */
.ergebnis-mark {
  position: absolute;
  right: -2%;
  bottom: -12%;
  z-index: -1;
  display: block;
  width: clamp(9rem, 18vw, 16rem);
  aspect-ratio: 9 / 10;
  background-color: #F8F2EC;
  opacity: 0.05;
  -webkit-mask: url("../DS-Symbol.svg") no-repeat center / contain;
  mask: url("../DS-Symbol.svg") no-repeat center / contain;
  pointer-events: none;
}
@media (max-width: 979px) { .ergebnis-mark { display: none; } }

/* Zweiter Absatz im Kopfbereich: gleiche Breite, etwas kleiner — er
   ergänzt die Einleitung, er wiederholt sie nicht. */
.page-lead--zweit { font-size: clamp(1rem, 1.6vw, 1.1rem); margin-top: var(--space-sm); }

/* --- Postenliste (Performance) ---
   Aus der Tabelle wurde eine redaktionelle Reihe: Ziffer, Titel, Befund,
   Abhilfe. Auf breiten Fenstern stehen Befund und Abhilfe nebeneinander,
   damit der Zusammenhang ohne Spaltenköpfe lesbar bleibt. */
.posten-liste { display: grid; margin-top: var(--space-md); }
.posten {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}
.posten:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 860px) {
  .posten {
    grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-md);
    row-gap: 0;
  }
}
.posten-nr {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 0.95rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.posten-titel {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.posten-problem { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
/* Die Abhilfe trägt die Akzentfarbe — sie ist die Antwort, nicht der Befund. */
.posten-loesung { margin: 0; font-size: 0.9375rem; color: var(--ink); }
@media (max-width: 859px) {
  .posten-problem::before { content: "Befund: "; color: var(--ink-faint); }
  .posten-loesung::before { content: "Abhilfe: "; color: var(--accent); }
}

/* Vier gleichwertige Situationen — kein Ablauf. Deshalb 2×2 statt
   Zeitstrahl: Prozessschritte bauen aufeinander auf, diese vier stehen
   nebeneinander. Gleiche Bauart wie die dreispaltige Variante darüber,
   nur mit zwei Spalten und ohne Link am Fuß. */
@media (min-width: 780px) {
  .fall-raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fall-raster--zwei .fall p { margin-bottom: 0; max-width: 34rem; }
/* Hier trägt die Ziffer die Akzentfarbe: Ohne Link am Fuß ist sie neben der
   Oberlinie das einzige farbige Element der Kachel. */
.fall-raster--zwei .fall-nr { color: var(--accent); }

/* ============================================================
   Über mich — Person im Kopfbereich, Text in zwei Spalten

   Der Personenblock stand vorher mitten im Fließtext. Auf einer Seite,
   die die Frage „mit wem arbeite ich?“ beantworten soll, gehört er in den
   ersten Bildschirm. Aufteilung und Maße kommen aus dem Kopfbereich der
   Webdesign-Leistungsseite (.hero-split) — kein zweites System.
   ============================================================ */
.person-karte { padding-top: var(--space-sm); border-top: 2px solid var(--accent); }
/* Porträt in derselben Größe wie zuvor: 88 Pixel neben dem Namen, nicht
   als Bildfläche darüber. */
.person-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--space-sm);
}
.person-bild {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
}
.person-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.person-name {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.person-rolle {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Bewusst nicht die Kennzahlen aus der Sektion darunter wiederholen — der
   Satz nennt stattdessen das, was diese Seite von einer Leistungsseite
   unterscheidet. */
.person-satz { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; margin: 0; max-width: 22rem; }

/* Zwei Spalten für den Vorstellungstext, darunter der Nachsatz über die
   volle Breite. */
.arbeit-spalten { display: grid; gap: var(--space-md); }
@media (min-width: 780px) { .arbeit-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
.arbeit-spalten p { margin: 0; color: var(--ink-soft); }
.arbeit-zusatz {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--ink-faint);
  max-width: 46rem;
}

/* Kennzahlen: gleich breite Spalten mit Haarlinien statt Kacheln. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) 0;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
}
@media (min-width: 780px) { .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kennzahl { padding: var(--space-md) var(--space-md) 0 0; }
@media (min-width: 780px) {
  .kennzahl + .kennzahl { padding-left: var(--space-md); border-left: 1px solid var(--border); }
}
.kennzahl-wert {
  display: block;
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.kennzahl-text { font-size: 0.9rem; color: var(--ink-soft); }

/* Kundenstimmen nebeneinander statt untereinander: drei kurze Aussagen
   lesen sich als Gruppe schneller als als Liste. Ohne Kasten, ohne
   Anführungsgrafik — die Oberlinie genügt. */
.quote-raster { list-style: none; display: grid; gap: var(--space-lg); margin: 0; padding: 0; }
@media (min-width: 900px) { .quote-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
.quote-karte { padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.quote-karte .quote-text {
  margin: 0 0 var(--space-sm);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.quote-karte .quote-source {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Der Personenblock soll nicht auf Höhe der Überschrift stehen, sondern
   tiefer — etwa dort, wo links der Fließtext und die Handlung sitzen.
   Eigener Modifikator, damit der Index auf den Leistungsseiten, der
   dieselbe Aufteilung nutzt, davon unberührt bleibt. */
@media (min-width: 1100px) {
  .hero-split--person { align-items: end; }
}