/*
 * 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;

  /* Eigene Produkte (Gastkumpel: Nachtpetrol und Glut, tableroom: Ziegelrot, Zeitkumpel: Orange) –
     nur als Linie, Punkt oder Zeichen, nie als Schrift: Glut und Orange halten auf Weiß keine 4,5:1. */
  --color-gastkumpel: #0d3b33;
  --color-gastkumpel-glut: #ee8456;
  --color-tableroom: #c43826;
  --color-zeitkumpel: #e65a14;

  --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;
  --studio-h: 34px;
  --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; }

/* Geschützter Umbruch: umbruchschutz() (helpers.php) hält kurze Bindestrich-Wörter zusammen. */
.nb { white-space: nowrap; }

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: 34ch; text-wrap: balance; }

/* 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;
}

/* Eigenes Produkt statt Kundenauftrag: dunkel und mit Stern, damit es im Raster sofort auffällt. */
.badge--eigen {
  justify-self: start;
  padding: 0.25rem 0.65rem;
  border-color: var(--color-text);
  background: var(--color-text);
  color: #fff;
  font-size: 0.74rem;
}

/* Der Stern ist Schmuck – der Text sagt es schon (/ "" verschweigt ihn Screenreadern). */
.badge--eigen::before,
.filter__chip[data-wert="produkt"]::before {
  content: "★";
  content: "★" / "";
  color: var(--color-primary);
}
.badge--eigen::before { margin-right: 0.35rem; }
.filter__chip[data-wert="produkt"]:not([aria-current="true"])::before { color: var(--color-primary-ink); }

/* ------------------------------------------------------------ Studio-Leiste (drei Marken) */

/* Fein und nicht klebend: Die Leiste scrollt weg, der Kopf darunter bleibt stehen. */
.studio { background: var(--color-subtle); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.studio::-webkit-scrollbar { display: none; }

.studio__liste {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: var(--studio-h);
  margin-block: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  white-space: nowrap;
}

.studio__liste li { display: flex; align-items: center; flex: none; }
.studio__liste li + li::before { content: ""; width: 1px; height: 0.9rem; margin-inline: 0.85rem; background: var(--color-border-strong); }

.studio a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  color: var(--color-text-sec);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--speed);
}
.studio a:hover { color: var(--color-text); }
.studio a[aria-current="true"] { color: var(--color-text); font-weight: 650; }
.studio img { width: 14px; height: 14px; }
.studio__bald { font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }

@media (max-width: 480px) {
  .studio__liste { font-size: 0.75rem; }
  .studio__liste li + li::before { margin-inline: 0.45rem; }
  .studio__bald { display: none; }
}

/* ------------------------------------------------------------ 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) - var(--studio-h));
    max-height: calc(100dvh - var(--header-h) - var(--studio-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-top: clamp(2rem, 3.6vw, 3.75rem); }

.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  grid-template-areas:
    "eyebrow eyebrow"
    "titel   titel"
    "text    buehne";
  column-gap: clamp(2.5rem, 5vw, 5rem);
  row-gap: clamp(0.85rem, 1.5vw, 1.25rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 2.4vw, 2.25rem);
}

.hero__eyebrow { grid-area: eyebrow; }
.hero__titel { grid-area: titel; font-size: clamp(2.15rem, 1.1rem + 2.6vw, 4.5rem); }
/* Subline oben, Knöpfe unten: Die Spalte schließt auf der Unterkante der Bühne ab. */
.hero__text { grid-area: text; align-self: stretch; align-content: space-between; display: grid; gap: 1.5rem; justify-items: start; }
.hero__text .lead { max-width: 64rem; font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.6rem); line-height: 1.5; text-wrap: balance; }
.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: 1180px) {
  .hero__raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "titel" "text" "buehne";
  }
}

/* Fakten: vier Belege in einer Zeile – auf der Startseite im Sockel, bei „Über mich“ klein. */
.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; }
}

/* ------------------------------------------------------------ Sockel unter dem Hero */

/* Die Tischkante: Auf Papier darüber stehen die Werkstücke, auf ihr die Belege. */
.hero__sockel {
  padding-block: clamp(2.75rem, 4.5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background: var(--color-sockel) var(--grain);
  color: var(--color-sockel-text);
}

.fakten--sockel { margin: 0; padding: 0; border-top: 0; }
.fakten--sockel .fakt__wert {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem);
  color: var(--color-primary);
}
.fakten--sockel .fakt__label { color: var(--color-sockel-muted); }

.fakt__marken { display: inline-flex; gap: 0.45rem; }
.fakt__marken img { width: 22px; height: 22px; }

/* ------------------------------------------------------------ Bühne (Hero) */

/* Die drei eigenen Produkte als flache Riegel untereinander: Zeichen, Name mit einer Zeile, „Live" und ein Pfeil zur
   Website. In Ruhe grau wie die Kundenlogos im Laufband, bei Hover und Fokus in der Farbe der Marke. Die Bühne füllt die
   Höhe ihrer Zeile und teilt sie gleich auf die drei Riegel auf, damit die linke Spalte bündig mit ihr abschließt. */
.buehne {
  grid-area: buehne;
  align-self: stretch;
  display: flex;
  container: buehne / inline-size;
  margin-top: clamp(1.2rem, 1.8vw, 2rem);
}

@media (max-width: 1180px) {
  .buehne { margin-top: 0.75rem; }
}

.buehne__liste {
  display: grid;
  grid-auto-rows: 1fr;
  flex: 1;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --kante färbt Kante und Status-Punkt: in Ruhe Papiergrau, bei Hover und Fokus die Farbe der Marke (bei gastkumpel Glut
   statt des fast schwarzen Nachtpetrols). */
.buehne__zeile {
  --kante: var(--color-border-strong);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "zeichen name status pfeil"
    "zeichen text status pfeil";
  align-items: center;
  align-content: center;
  gap: 0.15rem 1rem;
  padding: 0.7rem 1.2rem 0.7rem 1.1rem;
  transition: border-color var(--speed);
}

/* .karte steht weiter unten im Stylesheet und setzt den Rand neu – das Präfix hält die Kante oben. */
.buehne .buehne__zeile { border-left: 3px solid var(--kante); }

.buehne__zeile:hover,
.buehne__zeile:has(.buehne__link:focus-visible) { --kante: var(--punkt, var(--akzent)); }

.buehne__zeichen {
  grid-area: zeichen;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.85;
  transition: filter var(--speed), opacity var(--speed);
}

.buehne__name { grid-area: name; font-size: 1.15rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.buehne__text { grid-area: text; font-size: 0.93rem; line-height: 1.4; color: var(--color-text-sec); }

.buehne__zeile .produkt__status { grid-area: status; }
.buehne__zeile .produkt__status::before { background: var(--kante); transition: background-color var(--speed); }

.buehne__pfeil { grid-area: pfeil; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; transition: color var(--speed); }

.buehne__zeile:hover .buehne__zeichen,
.buehne__zeile:has(.buehne__link:focus-visible) .buehne__zeichen { filter: none; opacity: 1; }
.buehne__zeile:hover .buehne__pfeil,
.buehne__zeile:has(.buehne__link:focus-visible) .buehne__pfeil { color: var(--color-text); }

/* Der ganze Riegel ist klickbar, ohne ein einziger großer Link zu sein (wie bei den Referenzkarten). */
.buehne__link { color: inherit; text-decoration: none; }
.buehne__link::after { content: ""; position: absolute; inset: 0; }
.buehne__zeile:has(.buehne__link:focus-visible) { outline: 3px solid var(--color-primary-ink); outline-offset: 3px; }
@supports selector(:has(a)) {
  .buehne__link:focus-visible { outline: none; }
}

/* Touchgeräte kennen kein Hover, das die Farbe wecken könnte: Dort stehen die Riegel gleich in Farbe. */
@media (hover: none) {
  .buehne__zeile { --kante: var(--punkt, var(--akzent)); }
  .buehne__zeichen { filter: none; opacity: 1; }
}

/* Schmaler als 33 rem rücken „Live" und Pfeil neben den Namen, der Text läuft darunter über die Breite. */
@container buehne (inline-size < 33rem) {
  .buehne__zeile {
    grid-template-areas:
      "zeichen name status pfeil"
      "zeichen text text   text";
    gap: 0.2rem 0.75rem;
  }
}

/* Unter 20 rem (320-px-Handys) fehlt neben dem Namen die Breite: „Live" und Pfeil stehen dann unter dem Text. */
@container buehne (inline-size < 20rem) {
  .buehne__zeile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "zeichen name   name"
      "zeichen text   text"
      "zeichen status pfeil";
  }
  .buehne__zeile .produkt__status { justify-self: start; }
}

/* ------------------------------------------------------------ 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)); }
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

/* Startseite: Spezielle Lösungen (Baukasten-Alternative & Startups) */
.loesung-karte {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  text-decoration: none;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}

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

.loesung-karte .textlink {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 0.5rem;
}

.loesung-karte p {
  color: var(--color-text-sec);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
}

/* 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 {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  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); }

/* Die ganze Karte bleibt klickbar, ohne ein einziger großer Link zu sein: Das ::after des Titels spannt
   sich über die Karte, ein weiterer Link (die Website eines eigenen Produkts) liegt darüber. */
.referenz__link { color: inherit; text-decoration: none; }
.referenz__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.referenz__extern { position: relative; z-index: 2; font-size: 0.94rem; }

/* Der Fokusring umrahmt die Karte statt nur den Titel – wo :has() fehlt, bleibt er am Titel. */
.referenz:has(.referenz__link:focus-visible) { outline: 3px solid var(--color-primary-ink); outline-offset: 3px; }
@supports selector(:has(a)) {
  .referenz__link:focus-visible { outline: none; }
}

.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__kurz { color: var(--color-text-sec); font-size: 0.98rem; }
.referenz .chips { margin-top: 0.3rem; }

.referenz__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.referenz__fuss .referenz__mehr { margin: 0; padding: 0; }

.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; }

/* ------------------------------------------------------------ Eigene Produkte (Startseite) */

.produkte { margin: 0; padding: 0; list-style: none; }

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

@media (min-width: 1200px) {
  .produkte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Jedes Produkt trägt seinen Akzent oben als Kante wie die Schmerzpunkte – und im Status-Punkt. */
.produkt {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-top: 4px solid var(--akzent);
}

.produkt--liesener { --akzent: var(--color-primary); }
.produkt--gastkumpel { --akzent: var(--color-gastkumpel); --punkt: var(--color-gastkumpel-glut); }
.produkt--tableroom { --akzent: var(--color-tableroom); }
.produkt--zeitkumpel { --akzent: var(--color-zeitkumpel); }

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

.produkt__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-subtle);
  color: var(--color-text-sec);
  font: 500 0.74rem/1.3 var(--font-mono);
  white-space: nowrap;
}

.produkt__status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--punkt, var(--akzent));
}

.produkt__name { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.65rem); letter-spacing: -0.022em; }
.produkt p { color: var(--color-text-sec); }

.produkt__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

/* ------------------------------------------------------------ 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;
}

.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; }
}

@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 { display: grid; align-content: start; gap: 0.7rem; }

/* Haarlinie mit Raute: die Schritte im Prozess und die Belege im Sockel unter dem Hero. */
.schritt,
.fakten--sockel .fakt {
  position: relative;
  padding-top: 1.6rem;
  border-top: 2px solid var(--color-sockel-kante);
}

.schritt::before,
.fakten--sockel .fakt::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; }
}

/*
 * Text | Steckbrief wie im Lesebereich: Die Textspalte fasst rund 75 Zeichen und wächst mit der Schrift,
 * der Steckbrief hat eine feste, mitwachsende Breite und rückt mit --lese-luecke daneben – statt dass
 * space-between auf großen Bildschirmen ein Loch dazwischen aufreißt. Darunter steht alles in einer
 * Spalte (Text und Steckbrief auf Textbreite).
 */
.detail {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .detail {
    grid-template-columns: minmax(0, var(--lesespalte)) clamp(17rem, 28vw, 28rem);
    column-gap: var(--lese-luecke);
  }
}

.detail__text { display: grid; gap: 1.5rem; max-width: var(--lesespalte); font-size: var(--prosa-schrift); }
.detail__text > p { color: var(--color-text-sec); text-wrap: pretty; }
.detail__text li { text-wrap: pretty; }
.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: 999px) {
  .steckbrief { position: static; max-width: var(--lesespalte); }
}

/* ------------------------------------------------------------ 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; }
}

.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, .detail__text > p, .detail__text 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; }
}

/* ------------------------------------------------------------ Entscheidungsmatrix */

.matrix-tabelle-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 2rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
}

.matrix-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  line-height: 1.5;
  text-align: left;
}

.matrix-tabelle th,
.matrix-tabelle td {
  padding: 1.1rem 1.25rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.matrix-tabelle thead th {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-subtle);
  border-bottom: 2px solid var(--color-border-strong);
}

.matrix-tabelle thead th:last-child {
  color: var(--color-primary-ink);
  background: rgba(0, 173, 181, 0.08);
}

.matrix-tabelle tbody th {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.matrix-tabelle td {
  color: var(--color-text-sec);
}

.matrix-tabelle tr:last-child th,
.matrix-tabelle tr:last-child td {
  border-bottom: 0;
}

.matrix-tabelle__highlight {
  background: rgba(0, 173, 181, 0.05);
  color: var(--color-text) !important;
  font-weight: 500;
}

.matrix-fazit {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-sec);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-primary);
  background: var(--color-card);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------ 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__zusatz { display: block; margin-top: 0.1rem; font-size: 0.82rem; color: var(--color-sockel-muted); }

.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 {
  .studio, .kopf, .sockel, .buehne, .hero__sockel, .aufruf, .menue-knopf, .laufband { display: none; }
  body { background: #fff; }
}