/*
 * Homepage Sascha Liesener – Naturpapier (tableroom) trifft Liesener-Türkis.
 * Keine Webschrift, keine Verläufe als Deko: Lesbarkeit und saubere Kanten tragen die Seite.
 * Alles, was links und rechts abschließt, sitzt in .shell – Kopf, Inhalt und Sockel fluchten.
 */

:root {
  color-scheme: light;

  --color-bg: #fbf9f5;
  --color-card: #ffffff;
  --color-subtle: #f4efe4;
  --color-border: #e2dbce;
  --color-border-strong: #c5beaf;
  /* Kante für Bedienelemente: 3,06:1 auf Papier (WCAG 1.4.11). Die Haarlinie hält nur 1,3:1. */
  --color-border-control: #8f887c;

  --color-text: #141416;
  --color-text-sec: #4a4740;
  --color-text-muted: #6f6b62;

  --color-primary: #00adb5;
  /* Türkis als Schrift: #00adb5 hält auf Papier nur 2,6:1, #00767c dagegen 5,2:1. */
  --color-primary-ink: #00767c;
  --color-primary-wash: rgba(0, 173, 181, 0.08);
  /* Dieselbe Tönung deckend – für Flächen, die Linien darunter verdecken müssen. */
  --color-primary-flaeche: #ebf8f9;

  /* Warmes Salbei-Papier als zweite Fläche – ein Ton grüner als das Naturpapier. */
  --color-salbei: #eceee4;
  --color-salbei-kante: #d6dacb;

  --color-sockel: #121214;
  --color-sockel-karte: #1a1a1e;
  --color-sockel-kante: rgba(255, 255, 255, 0.12);
  --color-sockel-text: #f5f4f0;
  --color-sockel-muted: #9b988f;

  --color-ok: #1f6b3d;
  --color-fehler: #b3261e;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --shadow-card: 0 4px 20px rgba(20, 20, 22, 0.05), 0 1px 3px rgba(20, 20, 22, 0.03);
  --shadow-float: 0 16px 36px rgba(20, 20, 22, 0.08);

  --shell: clamp(1200px, 92vw, 1680px);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 8vw, 7rem);
  --header-h: 72px;
  --lesebreite: 85ch;
  /* Lesebereich: Schrift wächst mit dem Bildschirm, die Textspalte fasst rund 75 Zeichen. */
  --prosa-schrift: clamp(1.0625rem, 0.92rem + 0.33vw, 1.3rem);
  --lesespalte: calc(var(--prosa-schrift) * 40);
  --lese-raster: [rail] clamp(160px, 13vw, 240px) [text] minmax(0, var(--lesespalte)) [seite] minmax(240px, 1fr);
  --lese-luecke: clamp(3rem, 4.5vw, 5.5rem);
  --speed: 120ms linear;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ Grundlage */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg) var(--grain);
  color: var(--color-text);
  font: 400 1.0625rem/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

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

/* Der Fokusring braucht 3:1 gegen seinen Grund: Tinten-Türkis auf Papier, helles Türkis auf dem
   Sockel, Tinte auf der türkisen Aufruf-Fläche. */
.section--dunkel :focus-visible,
.sockel :focus-visible { outline-color: var(--color-primary); }
.aufruf :focus-visible { outline-color: var(--color-text); }

::selection { background: rgba(0, 173, 181, 0.22); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-m);
  text-decoration: none;
}
.sprunglink:focus { top: 1rem; }

.shell {
  width: min(100% - 2 * var(--gutter), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--anschluss { padding-top: 0; }

.section--subtil {
  --flaeche: var(--color-subtle);
  background: var(--color-subtle) var(--grain);
  border-block: 1px solid var(--color-border);
}

.section--salbei {
  --flaeche: var(--color-salbei);
  background: var(--color-salbei) var(--grain);
  border-block: 1px solid var(--color-salbei-kante);
}

/* Der Sockel-Look mitten in der Seite: gibt dem Rhythmus Tiefe. */
.section--dunkel {
  background: var(--color-sockel) var(--grain);
  color: var(--color-sockel-text);
}
.section--dunkel .eyebrow { color: var(--color-sockel-muted); }

/* ------------------------------------------------------------ Typografie */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 500 0.78rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Die Raute aus der Wortmarke, klein als Satzzeichen. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-primary);
  transform: rotate(45deg);
}

.titel-1 {
  font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

.titel-1--lesen { max-width: 22ch; }

/* Zweiter Satz des Claims: leiser, aber derselbe Schnitt. */
.titel-leise { color: var(--color-text-muted); }

.titel-2 {
  font-size: clamp(1.85rem, 1.2rem + 2vw, 3rem);
  letter-spacing: -0.026em;
}

.titel-3 {
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.titel-zwischen {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  letter-spacing: -0.02em;
}

.lead {
  max-width: 44rem;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.6;
  color: var(--color-text-sec);
}

.kopfzeile {
  display: grid;
  gap: 1rem;
  max-width: 50rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.kopfzeile--zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
}

.kopfzeile--zeile > div { display: grid; gap: 1rem; max-width: 50rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--speed), color var(--speed);
}
.textlink:hover { color: var(--color-primary-ink); text-decoration-color: var(--color-primary-ink); }

/* ------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  font: 600 1rem/1.1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}

/* Tinte auf Türkis: 6,7:1. Weiß auf Türkis hielte nur 2,8:1. */
.knopf--primaer { background: var(--color-primary); color: var(--color-text); }
.knopf--primaer:hover { background: var(--color-text); color: #fff; }

.knopf--sekundaer {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border-control);
}
.knopf--sekundaer:hover { border-color: var(--color-text); }

.knopf--tinte { background: var(--color-text); color: #fff; }
.knopf--tinte:hover { background: var(--color-card); color: var(--color-text); }

.knopf--rahmen { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.knopf--rahmen:hover { background: var(--color-text); color: #fff; }

.knopf--klein { min-height: 42px; padding: 0.55rem 1rem; font-size: 0.94rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------ Chips & Badges */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 0.32rem 0.58rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-subtle);
  color: var(--color-text-sec);
  font: 500 0.76rem/1.3 var(--font-mono);
  white-space: nowrap;
}

.chip--akzent,
.badge {
  border: 1px solid var(--color-primary);
  background: var(--color-primary-wash);
  color: var(--color-primary-ink);
}

.badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font: 500 0.7rem/1.3 var(--font-mono);
  white-space: nowrap;
}

.badge--dunkel { border-color: rgba(0, 173, 181, 0.6); background: rgba(0, 173, 181, 0.12); color: #6fd6db; }

/* ------------------------------------------------------------ Kopfleiste */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 245, 0.92);
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: var(--header-h);
}

.marke { flex: none; display: inline-flex; padding-block: 0.4rem; }
.marke img { width: auto; height: 38px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  margin-left: auto;
}

.nav__liste {
  display: flex;
  gap: clamp(0.9rem, 1.8vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__liste a {
  position: relative;
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--color-text-sec);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--speed);
}
.nav__liste a:hover,
.nav__liste a[aria-current="page"] { color: var(--color-text); }

.nav__liste a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  background: var(--color-primary);
}

/* Sprachumschalter: dezent, rechts außen auf der Kante. */
.sprachen {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 0.8rem/1 var(--font-mono);
  letter-spacing: 0.06em;
}

.sprachen li + li::before { content: "|"; margin-inline: 0.35rem; color: var(--color-border-strong); }

.sprachen a {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--radius-s);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--speed), background-color var(--speed);
}
.sprachen a:hover { color: var(--color-text); background: var(--color-subtle); }
.sprachen a[aria-current="true"] { color: var(--color-text); font-weight: 700; }

.menue-knopf { display: none; }

@media (max-width: 1180px) {
  .sprachen { margin-left: auto; }

  .js .menue-knopf {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-m);
    background: var(--color-card);
    cursor: pointer;
  }

  .menue-knopf__striche,
  .menue-knopf__striche::before,
  .menue-knopf__striche::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-text);
    transition: transform var(--speed), opacity var(--speed);
  }
  .menue-knopf__striche { position: relative; }
  .menue-knopf__striche::before,
  .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
  .menue-knopf__striche::before { top: -6px; }
  .menue-knopf__striche::after { top: 6px; }

  [aria-expanded="true"] .menue-knopf__striche { background: transparent; }
  [aria-expanded="true"] .menue-knopf__striche::before { transform: translateY(6px) rotate(45deg); }
  [aria-expanded="true"] .menue-knopf__striche::after { transform: translateY(-6px) rotate(-45deg); }

  /* Die Leiste trägt backdrop-filter und ist damit Bezugsrahmen: absolute statt fixed. */
  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    margin: 0;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-float);
  }
  .js .kopf[data-offen] .nav { display: flex; }

  .js .nav__liste { flex-direction: column; gap: 0; }
  .js .nav__liste a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.1rem;
  }
  .js .nav__liste a[aria-current="page"]::after { display: none; }
  .js .nav__liste a[aria-current="page"] { color: var(--color-primary-ink); font-weight: 600; }

  .nav__knopf { min-height: 48px; }

  /* Ohne JavaScript bleibt die Navigation als scrollbare Zeile sichtbar. */
  html:not(.js) .kopf__innen { flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 0.6rem; }
  html:not(.js) .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
}

/* ------------------------------------------------------------ Hero */

.hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); }

.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}

.hero__text { display: grid; gap: 1.5rem; justify-items: start; }
.hero .titel-1 { font-size: clamp(2.15rem, 1.1rem + 2.6vw, 3.75rem); }
.hero__aktion { display: grid; gap: 0.9rem; margin-top: 0.5rem; }

/* Zusage unter einem Aufruf: kostenlos, unverbindlich, Antwortzeit. */
.zusage { font-size: 0.92rem; line-height: 1.45; color: var(--color-text-muted); }

@media (max-width: 980px) {
  .hero__raster { grid-template-columns: 1fr; }
}

/* Fakten: vier echte Problemlöser in einer Zeile. */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.fakt { display: grid; gap: 0.35rem; align-content: start; }

.fakt__wert {
  font: 600 1.7rem/1 var(--font-mono);
  letter-spacing: -0.03em;
  color: var(--color-primary-ink);
}

.fakt__titel { font-size: 1.02rem; line-height: 1.3; }
.fakt__label { font-size: 0.92rem; line-height: 1.4; color: var(--color-text-muted); }

.fakten--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.5rem; }
.fakten--klein .fakt__wert { color: var(--color-text); }

@media (max-width: 900px) {
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .fakten--klein { grid-template-columns: 1fr; }
  .fakt__label { hyphens: auto; }
}

/* ------------------------------------------------------------ Blueprint (Hero-Visual) */

.blueprint {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem) 0;
}

/* Punktraster wie auf Konstruktionspapier. */
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  border-radius: 18px;
  background-image: radial-gradient(rgba(0, 118, 124, 0.2) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 78%);
}

.blueprint__karte {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem 1.1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
}

.blueprint__karte--shop { grid-column: 1 / 11; grid-row: 1; z-index: 1; padding-bottom: 2.25rem; }
.blueprint__karte--pim { grid-column: 4 / 13; grid-row: 2; margin-top: -1.25rem; z-index: 2; padding-bottom: 2.25rem; }
.blueprint__karte--terminal {
  grid-column: 2 / 12;
  grid-row: 3;
  margin-top: -1.25rem;
  z-index: 3;
  background: var(--color-sockel);
  border-color: var(--color-sockel);
  color: var(--color-sockel-text);
}

.blueprint__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  font: 500 0.72rem/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.blueprint__karte--terminal .blueprint__kopf { color: var(--color-sockel-muted); }
.blueprint__kopf .badge { text-transform: none; letter-spacing: 0; }

.blueprint__titel { font-size: 1rem; line-height: 1.3; }
.blueprint__label { display: block; margin-bottom: 0.35rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.blueprint__klein { font-size: 0.8rem; line-height: 1.4; color: var(--color-text-muted); }
.blueprint__karte--terminal .blueprint__klein { color: var(--color-sockel-muted); }

.blueprint-shop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: end; }

.blueprint-shop__optionen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.blueprint-shop__optionen li {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-s);
  font-size: 0.8rem;
  color: var(--color-text-sec);
}
.blueprint-shop__optionen li.gewaehlt { border-color: var(--color-text); background: var(--color-text); color: #fff; }

.blueprint-shop__mass {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-s);
  font: 600 1.05rem/1.2 var(--font-mono);
}
.blueprint-shop__mass span + span { font-size: 0.78rem; color: var(--color-text-muted); }

.blueprint-shop__regler { position: relative; height: 4px; margin: 0.6rem 0 0.2rem; border-radius: 2px; background: var(--color-border); }
.blueprint-shop__regler::before { content: ""; position: absolute; inset: 0 38% 0 0; border-radius: 2px; background: var(--color-primary); }
.blueprint-shop__regler i { position: absolute; left: 62%; top: 50%; width: 14px; height: 14px; border: 3px solid var(--color-card); border-radius: 50%; background: var(--color-primary-ink); box-shadow: 0 0 0 1px var(--color-primary-ink); transform: translate(-50%, -50%); }

/* PIM als Datendrehscheibe: Kern in der Mitte, fünf Anschlüsse im 3×3-Raster. Die Haarlinien
   laufen zur Mitte jeder Zelle; Kern und Knoten sind deckend und schneiden sie sauber ab. */
.blueprint-netz {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "shop        .      erp"
    "lieferanten kern   api"
    ".           preise .";
  grid-auto-rows: 1fr;
  gap: 0.75rem 0.6rem;
  align-items: center;
  padding-block: 0.2rem;
}

.blueprint-netz__linien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: var(--color-primary);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}

.blueprint-netz__knoten,
.blueprint-netz__kern {
  position: relative;
  text-align: center;
  overflow-wrap: break-word;
}

/* Zeilenumbrüche aus der Sprachdatei („…\n(CSV / Excel)") bleiben erhalten. */
.blueprint-netz__knoten {
  white-space: pre-line;
  padding: 0.4rem 0.45rem;
  background: var(--color-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-s);
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--color-text-sec);
}

.blueprint-netz__knoten--shop { grid-area: shop; }
.blueprint-netz__knoten--erp { grid-area: erp; }
.blueprint-netz__knoten--lieferanten { grid-area: lieferanten; }
.blueprint-netz__knoten--api { grid-area: api; }
.blueprint-netz__knoten--preise { grid-area: preise; }

.blueprint-netz__kern {
  grid-area: kern;
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.4rem;
  background: var(--color-primary-flaeche);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-m);
  font-size: 0.9rem;
  line-height: 1.2;
}

.blueprint-netz__kern span { font-size: 0.7rem; font-weight: 500; line-height: 1.3; color: var(--color-primary-ink); }

.blueprint-terminal { display: flex; align-items: center; gap: 0.9rem; }
.blueprint-terminal div { display: grid; gap: 0.15rem; }
.blueprint-terminal strong { font-size: 1.02rem; }
.blueprint-terminal div span { font: 500 0.8rem/1.45 var(--font-mono); color: var(--color-sockel-muted); }

.blueprint-terminal__chip {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 173, 181, 0.16);
  color: #6fd6db;
}

@media (prefers-reduced-motion: no-preference) {
  .blueprint-terminal__chip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    animation: puls 2.4s ease-out infinite;
  }
}

@keyframes puls {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.7); opacity: 0; }
}

/* Am Handy zeigt die Drehscheibe allein, worum es geht – alle drei Karten kosteten mehr als einen
   ganzen Bildschirm, bevor der erste Kunde zu sehen ist. */
@media (max-width: 560px) {
  .blueprint__karte--shop, .blueprint__karte--terminal { display: none; }
  .blueprint__karte--pim { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  /* Schmale Knoten: Lange Wörter wie „Warenwirtschaft" passen nur getrennt. */
  .blueprint-netz__knoten, .blueprint-netz__kern { hyphens: auto; }
}

/* ------------------------------------------------------------ Laufband (Kundenlogos) */

.laufband { padding-block: 1.6rem 1.9rem; border-block: 1px solid var(--color-border); background: var(--color-card); overflow: hidden; }

.laufband__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.laufband__titel {
  font: 500 0.75rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.laufband__bahn {
  display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband__liste {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(3rem, 5vw, 5rem);
  margin: 0;
  padding: 0 clamp(1.5rem, 2.5vw, 2.5rem);
  list-style: none;
}

@media (prefers-reduced-motion: no-preference) {
  .laufband__liste { animation: laufen 55s linear infinite; }
  .laufband:hover .laufband__liste,
  .laufband[data-angehalten] .laufband__liste { animation-play-state: paused; }
}

/* Anhalten per Knopf (WCAG 2.2.2) – Hover allein hilft weder Tastatur noch Touch. */
.laufband__pause {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-s);
  background: var(--color-card);
  color: var(--color-text-sec);
  font: 500 0.72rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--speed), color var(--speed);
}
.laufband__pause:hover { border-color: var(--color-text); color: var(--color-text); }

.laufband__pause::before {
  content: "";
  box-sizing: border-box;
  width: 8px;
  height: 10px;
  border-inline: 3px solid currentColor;
}
.laufband[data-angehalten] .laufband__pause::before {
  width: 0;
  border-inline: 0;
  border-left: 8px solid currentColor;
  border-block: 5px solid transparent;
}

html:not(.js) .laufband__pause { display: none; }

/* Ohne Bewegung: eine ruhige, umbrechende Reihe; die Kopien und der Knopf entfallen. */
@media (prefers-reduced-motion: reduce) {
  .laufband__bahn { -webkit-mask-image: none; mask-image: none; width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
  .laufband__liste { flex-wrap: wrap; flex: 1; gap: 1.25rem 3rem; padding: 0; }
  .laufband__liste[aria-hidden="true"] { display: none; }
  .laufband__pause { display: none; }
}

@keyframes laufen {
  to { transform: translateX(-100%); }
}

/* Echte Logos, einheitlich zurückgenommen: Graustufen auf Papier, beim Überfahren in Farbe. */
.kundenlogo { display: flex; align-items: center; flex: none; }
.kundenlogo img {
  width: auto;
  max-width: none;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.85;
  mix-blend-mode: multiply;
  transition: filter var(--speed), opacity var(--speed);
}
.kundenlogo:hover img { filter: none; opacity: 1; }

.kundenlogo__wort {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ Karten & Raster */

.karte {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.raster {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .raster--drei, .raster--vier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ab 1500 px Breite trägt das Raster vier Karten – weniger Scrollen auf großen Schirmen. */
@media (min-width: 1500px) {
  .raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Leistungen auf der Startseite */
.leistung {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  text-decoration: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}

a.leistung:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-float); }

.leistung__nr {
  font: 600 0.85rem/1 var(--font-mono);
  color: var(--color-primary-ink);
}

.leistung p { color: var(--color-text-sec); }
.leistung .chips { margin-top: 0.35rem; }


.werkzeug { display: grid; gap: 0.9rem; align-content: start; padding: 1.4rem; }

/* ------------------------------------------------------------ Mockups */

.mockup {
  overflow: hidden;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.mockup__leiste {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 30px;
  padding: 0 0.7rem;
  background: var(--color-subtle);
  border-bottom: 1px solid var(--color-border);
}

.mockup__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }

.mockup__adresse {
  flex: 0 1 60%;
  min-width: 0;
  margin-left: 0.55rem;
  padding: 0.12rem 0.55rem;
  overflow: hidden;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font: 500 0.7rem/1.4 var(--font-mono);
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mockup img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* Referenz ohne Bild: eine ruhige Typo-Kachel statt eines leeren Rahmens. */
.mockup__leer {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  aspect-ratio: 16 / 10;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(0, 173, 181, 0.07) 22px 23px),
    var(--color-subtle);
  text-align: center;
}

.mockup__leer strong { font-size: clamp(1.25rem, 3vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; }
.mockup__leer span { font: 500 0.75rem var(--font-mono); color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }

.telefon {
  overflow: hidden;
  padding: 7px;
  background: var(--color-text);
  border-radius: 30px;
  box-shadow: var(--shadow-float);
}

.telefon img {
  width: 100%;
  aspect-ratio: 9 / 18.5;
  object-fit: cover;
  object-position: top;
  border-radius: 23px;
}

/* ------------------------------------------------------------ Referenzkarten */

.referenz {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--speed), box-shadow var(--speed), transform var(--speed);
}

.referenz:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-float); transform: translateY(-2px); }

.referenz .mockup { margin: 0.6rem 0.6rem 0; }

.referenz__text {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  flex: 1;
  padding: 1.2rem 1.35rem 1.4rem;
}

.referenz__unter { font-size: 0.86rem; line-height: 1.4; color: var(--color-text-muted); }
.referenz__text p:not(.referenz__unter) { color: var(--color-text-sec); font-size: 0.98rem; }
.referenz .chips { margin-top: 0.3rem; }

.referenz__mehr {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--color-primary-ink);
}

.referenz[hidden] { display: none; }

/* ------------------------------------------------------------ System (junaspin) */

.system {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die gestrichelte Leitung verbindet die Bausteine – sichtbar in den Fugen zwischen den Karten. */
.system::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  border-top: 2px dashed var(--color-primary);
}

.system > li { display: grid; }

.system__teil {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 2rem 1.4rem 1.5rem;
  text-decoration: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}

a.system__teil:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-float); }

.system__teil::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 1.4rem;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border: 4px solid var(--flaeche, var(--color-subtle));
  border-radius: 3px;
  transform: rotate(45deg);
}

.system__art { font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.system__teil p { color: var(--color-text-sec); font-size: 0.97rem; }

.system__zahl {
  margin-top: 0.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border);
  font: 600 0.9rem/1.35 var(--font-mono);
  color: var(--color-text);
}

.system__basis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: 1rem 1.4rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-l);
  color: var(--color-text-sec);
  font-size: 0.95rem;
}

.system__basis strong { font: 600 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

.system__aufruf { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 900px) {
  .system { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .system::before { display: none; }
}

@media (max-width: 560px) {
  .system { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Prozess (auf dem Sockel) */

.prozess {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritt {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--color-sockel-kante);
}

.schritt::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  transform: rotate(45deg);
}

.schritt__nr { font: 600 2.2rem/1 var(--font-mono); letter-spacing: -0.04em; color: var(--color-primary); }
.schritt p { color: var(--color-sockel-muted); font-size: 0.98rem; }

@media (max-width: 900px) {
  .prozess { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}

@media (max-width: 520px) {
  .prozess { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Brief (Über mich, kurz) */

.brief {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.75rem, 4.5vw, 4rem);
}

.brief__text { display: grid; gap: 1.25rem; align-content: start; }
.brief__text > p:not(.eyebrow) { color: var(--color-text-sec); font-size: 1.08rem; max-width: var(--lesebreite); }

.unterschrift {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.unterschrift strong { font-size: 1.05rem; }
.unterschrift span { font-size: 0.92rem; color: var(--color-text-muted); }

.werte { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; align-content: start; }
.werte li { display: grid; gap: 0.35rem; padding-left: 1.4rem; position: relative; }
.werte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
.werte p { color: var(--color-text-sec); font-size: 0.98rem; }

@media (max-width: 860px) {
  .brief { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Aufruf (CTA) */

.aufruf {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--color-primary) var(--grain);
  border-radius: var(--radius-l);
  color: var(--color-text);
}

.aufruf .eyebrow { color: var(--color-text); }
.aufruf .eyebrow::before { background: var(--color-text); }
.aufruf__text { display: grid; gap: 1rem; }
.aufruf__text p:not(.eyebrow) { font-size: 1.1rem; max-width: 38rem; }

.aufruf__wege { display: grid; gap: 0.9rem; justify-items: start; }
.aufruf__telefon { font-family: var(--font-mono); letter-spacing: 0.02em; }
.aufruf .zusage { color: var(--color-text); }
.aufruf__mail { font: 500 0.95rem/1.5 var(--font-mono); text-decoration: none; }
.aufruf__mail:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .aufruf { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Seitenkopf (Unterseiten) */

.seitenkopf {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--color-border);
}

.seitenkopf .shell { display: grid; gap: 1.25rem; justify-items: start; }
.seitenkopf + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.seitenkopf .filter { margin: 0.5rem 0 0; }

.pfad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 0.8rem/1.4 var(--font-mono);
  color: var(--color-text-muted);
}
.pfad li + li::before { content: "/"; margin-right: 0.5rem; color: var(--color-border-strong); }
.pfad a { color: var(--color-text-sec); text-decoration: none; }
.pfad a:hover { color: var(--color-primary-ink); text-decoration: underline; }

/* ------------------------------------------------------------ Filter */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 42px;
  padding: 0.5rem 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border-control);
  border-radius: 999px;
  color: var(--color-text-sec);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}

.filter__chip:hover { border-color: var(--color-text); color: var(--color-text); }

.filter__chip[aria-current="true"] { background: var(--color-text); border-color: var(--color-text); color: #fff; }

.filter__zahl { font: 500 0.75rem var(--font-mono); opacity: 0.75; }

.filter__leer { color: var(--color-text-muted); }

/* ------------------------------------------------------------ Referenz-Detail */

.vitrine {
  position: relative;
  max-width: 1500px;
  padding-right: clamp(0px, 9%, 130px);
  padding-bottom: clamp(0px, 5%, 70px);
}

.vitrine .mockup { box-shadow: var(--shadow-float); }

.vitrine .telefon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(120px, 20%, 270px);
}

@media (max-width: 560px) {
  .vitrine { padding: 0; }
  .vitrine .telefon { display: none; }
}

.detail {
  display: grid;
  grid-template-columns: minmax(0, var(--lesebreite)) minmax(280px, 400px);
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.detail__text { display: grid; gap: 1.5rem; }
.detail__text > p { color: var(--color-text-sec); font-size: 1.12rem; }
.detail__text h2:not(:first-child) { margin-top: 1rem; }

.haken {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haken li { position: relative; padding-left: 1.7rem; color: var(--color-text-sec); }

/* Der Haken aus der Liesener-Raute. */
.haken li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.32em;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--color-primary-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.steckbrief { display: grid; gap: 1.25rem; padding: clamp(1.4rem, 2.5vw, 1.9rem); position: sticky; top: calc(var(--header-h) + 1.5rem); }
.steckbrief dl { display: grid; gap: 1rem; margin: 0; }
.steckbrief dt { font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.steckbrief dd { margin: 0; }

.blaettern {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.blaettern a { display: grid; gap: 0.2rem; text-decoration: none; max-width: 48%; }
.blaettern a:last-child { text-align: right; margin-left: auto; }
.blaettern span { font: 500 0.75rem var(--font-mono); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.blaettern strong { font-size: 1.05rem; }
.blaettern a:hover strong { color: var(--color-primary-ink); }

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .steckbrief { position: static; }
}

/* ------------------------------------------------------------ Leistungen (Detailseite) */

.leistungsblock {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--color-border);
}

.leistungsblock:first-child { border-top: 0; padding-top: 0; }

.leistungsblock__kopf { display: grid; gap: 1rem; align-content: start; }
.leistungsblock__kopf > p { color: var(--color-text-sec); font-size: 1.08rem; max-width: 62ch; }

.leistungsblock__nr {
  font: 600 3rem/1 var(--font-mono);
  letter-spacing: -0.05em;
  color: var(--color-primary-ink);
}

.leistungsblock__teile { display: grid; gap: 1.5rem; align-content: start; padding: clamp(1.4rem, 2.5vw, 2rem); }
.leistungsblock__teile h3 { font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.75rem; }

.beispiele { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

@media (max-width: 860px) {
  .leistungsblock { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ FAQ */

.faq { display: grid; gap: 0.75rem; align-items: start; }

@media (min-width: 1100px) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 650;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: solid var(--color-text-sec);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--speed);
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 1.4rem 1.3rem; color: var(--color-text-sec); }

/* ------------------------------------------------------------ Über mich */

.portrait {
  margin: 0;
  padding: 0.7rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
}

/* Schwarz-Weiß passt zum Naturpapier und lässt das Türkis der Seite allein wirken. */
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--color-subtle);
  filter: grayscale(100%) contrast(1.05);
}

.portrait figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.9rem 0.35rem 0.25rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.portrait figcaption strong { color: var(--color-text); font-size: 1rem; }
.portrait figcaption a { color: var(--color-text-sec); font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; }
.portrait figcaption a:hover { color: var(--color-primary-ink); }

.profil {
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, var(--lesebreite));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.profil .portrait { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.profil__text { display: grid; gap: 1.25rem; }
.profil__text > p { font-size: 1.12rem; color: var(--color-text-sec); }
.profil__text .titel-zwischen { margin-top: 1rem; }

@media (max-width: 860px) {
  .profil { grid-template-columns: 1fr; }
  .profil .portrait { position: static; max-width: 340px; }
}

/* ------------------------------------------------------------ Kontakt */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.formular { display: grid; gap: 1.35rem; padding: clamp(1.4rem, 3.5vw, 2.5rem); }

.formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }

.feld { display: grid; gap: 0.45rem; align-content: start; }

.feld label,
.feld legend { font-weight: 600; font-size: 0.97rem; }

.feld__hinweis { font-size: 0.86rem; color: var(--color-text-muted); font-weight: 400; }

.feld input,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--color-card);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-m);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--speed), box-shadow var(--speed);
}

.feld textarea { min-height: 170px; resize: vertical; }

.feld input:focus,
.feld textarea:focus {
  border-color: var(--color-primary-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 173, 181, 0.28);
}

.feld [aria-invalid="true"] { border-color: var(--color-fehler); }
.feld__fehler { font-size: 0.88rem; color: var(--color-fehler); font-weight: 500; }

fieldset.feld { margin: 0; padding: 0; border: 0; }
fieldset.feld legend { padding: 0; margin-bottom: 0.45rem; }

.themen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.themen label { position: relative; }
.themen input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.themen span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.5rem 0.95rem;
  background: var(--color-card);
  border: 1px solid var(--color-border-control);
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--color-text-sec);
  cursor: pointer;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}

.themen span:hover { border-color: var(--color-text); }
.themen input:checked + span { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.themen input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* Honigtopf: für Menschen unsichtbar, für Formular-Bots ein normales Feld. */
.feld--topf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.formular__fuss p { font-size: 0.88rem; color: var(--color-text-muted); max-width: 30rem; }
.formular__fuss a { color: var(--color-text-sec); }

.meldung {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-m);
  border: 1px solid;
}

.meldung--ok { background: #eef6f0; border-color: #9cc5a9; color: var(--color-ok); }
.meldung--fehler { background: #fbefed; border-color: #e3aaa4; color: var(--color-fehler); }
.meldung strong { font-size: 1.05rem; }
.meldung p { color: var(--color-text-sec); }

.direktwege { display: grid; gap: 1.25rem; padding: clamp(1.4rem, 3vw, 2rem); }
.direktwege dl { display: grid; gap: 1.1rem; margin: 0; }
.direktwege dt { font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.direktwege dd { margin: 0; font-size: 1.08rem; font-weight: 600; }
.direktwege dd a { text-decoration: none; }
.direktwege dd a:hover { color: var(--color-primary-ink); text-decoration: underline; text-underline-offset: 4px; }

.ablauf { display: grid; gap: 0.9rem; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-border); list-style: none; counter-reset: ablauf; }
.ablauf li { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.5rem; font-size: 0.96rem; color: var(--color-text-sec); counter-increment: ablauf; }
.ablauf li::before { content: "0" counter(ablauf); font: 600 0.8rem/1.9 var(--font-mono); color: var(--color-primary-ink); }

@media (max-width: 860px) {
  .kontakt { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .formular__zeile { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Lesebereich (Einblicke, Rechtliches) */

/*
 * Magazin-Satz: Die Schrift wächst mit dem Bildschirm, die Zeile bleibt bei rund 75 Zeichen.
 * Ab 1280 px drei Spalten – Leiste (Daten, Inhalt) | Text | Seite (Weiteres): Der Platz verteilt
 * sich ausgewogen, statt als Loch zwischen Text und Seitenleiste zu klaffen. Darunter steht alles
 * in einer Spalte, die Leiste als Zeile über dem Text.
 */
.lesebereich { display: grid; gap: clamp(2rem, 4vw, 3rem); }

.lesebereich .prosa { max-width: none; font-size: var(--prosa-schrift); }
.lesebereich__text,
.lesebereich > .prosa { max-width: var(--lesespalte); }

.lesebereich__rail { padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }

.lesebereich__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin: 0; }
.lesebereich__meta dt,
.lesebereich__rail h2,
.lesebereich__seite h2 { font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.lesebereich__meta dd { margin: 0; font-weight: 600; }
.lesebereich__meta dd a { text-decoration: none; }
.lesebereich__meta dd a:hover { color: var(--color-primary-ink); text-decoration: underline; }
.lesebereich__kurz { padding: 1.4rem 1.5rem; }
.lesebereich__kurz .haken { gap: 0.6rem; font-size: 0.95rem; }
.lesebereich__kurz h2 { margin-bottom: 0.9rem; }

@media (min-width: 1280px) {
  .lesebereich {
    grid-template-columns: var(--lese-raster);
    grid-template-areas: "rail text seite";
    column-gap: var(--lese-luecke);
    align-items: start;
  }
  .lesebereich__rail { grid-area: rail; padding: 1.1rem 0 0; border-bottom: 0; border-top: 2px solid var(--color-text); }
  .lesebereich__text,
  .lesebereich > .prosa { grid-area: text; max-width: none; }
  .lesebereich__seite { grid-area: seite; max-width: 23rem; }
  .lesebereich__rail,
  .lesebereich__seite { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .lesebereich__meta { display: grid; gap: 1.1rem; }

  /* Überschrift und Brotkrume stehen auf der Kante der Textspalte. */
  .seitenkopf--lesen .shell { grid-template-columns: var(--lese-raster); column-gap: var(--lese-luecke); }
  .seitenkopf--lesen .shell > * { grid-column: text / -1; }
}

.lesebereich__weitere ul { display: grid; gap: 0.15rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.lesebereich__weitere a {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-sec);
  text-decoration: none;
  font-size: 0.97rem;
}
.lesebereich__weitere a:hover { color: var(--color-primary-ink); }
.lesebereich__weitere time { font: 500 0.75rem var(--font-mono); color: var(--color-text-muted); }

/* Abstände in em: Sie wachsen mit der Schrift des Lesebereichs mit. */
.prosa { max-width: var(--lesebreite); font-size: 1.08rem; line-height: 1.75; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 1.75em; font-size: 1.42em; line-height: 1.25; letter-spacing: -0.015em; }
.prosa > h2:first-child { margin-top: 0; }
.prosa p, .prosa li { color: var(--color-text-sec); }
.prosa p { text-wrap: pretty; }
.prosa--artikel > p:first-child { font-size: 1.14em; line-height: 1.6; color: var(--color-text); }

@media (max-width: 560px) {
  .prosa p, .prosa li { hyphens: auto; }
}
.prosa ul { padding-left: 1.25rem; }
.prosa li + li { margin-top: 0.45rem; }
.prosa li::marker { color: var(--color-primary-ink); }
.prosa a { color: var(--color-primary-ink); text-underline-offset: 3px; }
.prosa strong { color: var(--color-text); }
.prosa code { font: 0.92em var(--font-mono); padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--color-subtle); }

.prosa__hinweis {
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--color-primary-wash);
  font-size: 0.95rem;
}

/* Bilder im Einblick: ein Bild je Zeile; mehrere Bildzeilen stehen gleich hoch nebeneinander, weil
   jedes Bild nach seinem Seitenverhältnis wächst (--seite = Breite/Höhe, schreibt PHP mit). */
.bildreihe { display: flex; gap: 0.75rem; }
.prosa > .bildreihe { margin-block: 2em; }
.bildreihe figure { flex: var(--seite, 1) 1 0; min-width: 0; margin: 0; }
.bildreihe img { width: 100%; border-radius: var(--radius-m); background: var(--color-subtle); }
.bildreihe figcaption { margin-top: 0.6rem; font-size: 0.8em; line-height: 1.45; color: var(--color-text-muted); }

@media (max-width: 560px) {
  .bildreihe { flex-direction: column; gap: 1.25rem; }
  .bildreihe figure { flex: none; }
}

.zurueck { margin-top: 3rem; }

/* „Passt dazu" am Ende eines Einblicks: vom Lesen zur passenden Leistung. */
.passt {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.passt > p:not(.eyebrow) { color: var(--color-text-sec); }
.passt .beispiele span { color: var(--color-text-muted); }
.passt .knopfreihe { margin-top: 0.4rem; }

.notizkarte {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  text-decoration: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.notizkarte:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-float); }
.notizkarte time { font: 500 0.78rem var(--font-mono); color: var(--color-primary-ink); }
.notizkarte p { color: var(--color-text-sec); }

/* ------------------------------------------------------------ Schmerzpunkte */

.schmerz {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-top: 4px solid var(--color-text);
  text-decoration: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}

.schmerz:hover { border-top-color: var(--color-primary); box-shadow: var(--shadow-float); }

.schmerz__nr { font: 600 0.8rem/1 var(--font-mono); color: var(--color-text-muted); }

.schmerz__frage {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.018em;
}

.schmerz p { color: var(--color-text-sec); }

.schmerz__link {
  margin-top: auto;
  padding-top: 0.4rem;
  font-weight: 600;
  color: var(--color-primary-ink);
}

/* Die frühere „Frage"-Karte steht jetzt als ruhige Zeile unter den sechs Leistungen. */
.leistung-frage {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-text-sec);
}

/* ------------------------------------------------------------ Kundenstimme */

.stimme {
  display: grid;
  gap: 1rem;
  max-width: 62rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 3px solid var(--color-primary);
}

.stimme blockquote { margin: 0; }

.stimme blockquote p {
  font-size: clamp(1.2rem, 1rem + 0.65vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--color-text);
}

.stimme blockquote p::before { content: "„"; }
.stimme blockquote p::after { content: "“"; }
[lang="en"] .stimme blockquote p::before { content: "“"; }
[lang="en"] .stimme blockquote p::after { content: "”"; }

.stimme figcaption { font-weight: 600; color: var(--color-text-sec); }
.stimme__label { margin-right: 0.5rem; font: 500 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ------------------------------------------------------------ Landingpages */

.landing-problem {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}

.landing-problem__liste { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.landing-problem__liste li {
  position: relative;
  padding: 1rem 1.25rem 1rem 3rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  color: var(--color-text-sec);
  font-size: 1.05rem;
}

/* Ein durchgestrichener Punkt: das Problem, das verschwinden soll. */
.landing-problem__liste li::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 50%;
  width: 0.9rem;
  height: 2px;
  background: var(--color-fehler);
  transform: rotate(-45deg);
}

.prozess--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fall {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.fall__bild { display: block; text-decoration: none; }
.fall__bild .mockup { box-shadow: var(--shadow-float); }
.fall__text { display: grid; gap: 1.1rem; justify-items: start; }

.leistungsblock__mehr { justify-self: start; }

@media (max-width: 900px) {
  .landing-problem, .fall { grid-template-columns: 1fr; }
  .prozess--drei { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Schnellkontakt (nur Handy) */

.schnellkontakt { display: none; }

@media (max-width: 700px) and (pointer: coarse) {
  html { scroll-padding-bottom: 4.5rem; }
  body { padding-bottom: 56px; }

  /* Zwei Wege mit dem Daumen: anrufen oder schreiben. */
  .schnellkontakt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(18, 18, 20, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .schnellkontakt a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
  }

  .schnellkontakt__anruf { color: var(--color-sockel-text); }
  .schnellkontakt__anfrage { background: var(--color-primary); color: var(--color-text); }
  .schnellkontakt svg { flex: none; color: var(--color-primary); }
  .schnellkontakt__anruf:focus-visible { outline-color: var(--color-primary); outline-offset: -5px; }
  .schnellkontakt__anfrage:focus-visible { outline-color: var(--color-text); outline-offset: -5px; }
  .schnellkontakt strong { font-family: var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; }
}

/* ------------------------------------------------------------ Sockel (Fußzeile) */

.sockel {
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  background: var(--color-sockel);
  color: var(--color-sockel-text);
}

.sockel__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
}

.sockel__marke { display: grid; gap: 1.1rem; align-content: start; }
.sockel__marke img { width: 180px; }
.sockel__marke p { max-width: 24rem; color: var(--color-sockel-muted); font-size: 0.95rem; }
.sockel__region { font-size: 0.88rem; }

.sockel__titel {
  margin-bottom: 1rem;
  font: 500 0.75rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sockel-muted);
}

.sockel__liste { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.97rem; }
.sockel__liste a { text-decoration: none; transition: color var(--speed); }
.sockel__liste a:hover { color: var(--color-primary); }

.sockel__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-sockel-kante);
  font-size: 0.86rem;
  color: var(--color-sockel-muted);
}

@media (max-width: 860px) {
  .sockel__raster { grid-template-columns: 1fr 1fr; }
  .sockel__marke { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .sockel__raster { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ 404 */

.nichtda { display: grid; gap: 1.25rem; justify-items: start; padding-block: var(--section); }
.nichtda__zahl { font: 600 clamp(4rem, 12vw, 8rem)/1 var(--font-mono); letter-spacing: -0.06em; color: var(--color-border-strong); }

/* ------------------------------------------------------------ Kleine Schirme */

@media (max-width: 520px) {
  .knopfreihe .knopf { flex: 1 1 100%; }
}

@media print {
  .kopf, .sockel, .aufruf, .menue-knopf, .laufband { display: none; }
  body { background: #fff; }
}