/* Röhrl Media – Landingpage v5
   Dunkles Theme: Off-Schwarz, Grau, Navy als Fläche, Blau als einziger Akzent.
   Radien: Buttons/Pillen 999px, Flächen 18px (innen 12px), Felder 10px. */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0C0D0F;
  --bg-raise: #131417;
  --surface: #18191D;
  --surface-2: #1F2126;
  --line: #26282E;
  --line-strong: #6B707A;

  --text: #EDEEF0;
  --text-2: #B4B8BF;
  --muted: #8A8F98;

  --navy: #12224A;
  --navy-deep: #0D1834;
  --accent: #3358D4;
  --accent-strong: #2A4CC0;
  --accent-hi: #8FAEFF;
  --on-accent: #F6F7F9;

  --error: #FF9C92;

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 10px;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 11vw, 152px);
  --header-h: 68px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip auf html UND body: Steht es nur auf body, wird es an den Viewport
   weitergereicht und mobile Browser (iOS Safari, Chrome Android) verbreitern trotzdem
   die Seite, sobald seitlich einfliegende Reveals überstehen. clip statt hidden,
   damit der Sticky-Header weiter funktioniert. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* seitlich einfliegende Reveals dürfen kein horizontales Scrollen erzeugen */
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

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

/* Typo-Bausteine */
.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-hi); margin-bottom: 20px;
}
.section-title { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; max-width: 20ch; }
.section-title-wide { max-width: 24ch; }
/* Zweite Ebene in langen Überschriften und Texten: gleiche Schrift, Grau statt Weiß */
.dim { color: var(--muted); }
.cell .dim { color: var(--accent-hi); }
.section-lead { margin-top: 20px; color: var(--text-2); font-size: clamp(1.05rem, 1.3vw, 1.18rem); max-width: 54ch; }

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-hi); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgb(143 174 255 / 0.35); padding-bottom: 2px;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.text-link:hover { border-color: var(--accent-hi); gap: 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 550; white-space: nowrap;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary .icon { transition: transform 0.3s var(--ease); }
.btn-primary:hover .icon { transform: translateX(3px); }
.btn-ghost { color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--text-2); background: var(--surface); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 52px; padding: 0; color: var(--text); border-color: var(--line-strong); background: var(--surface); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgb(12 13 15 / 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.wordmark { font-weight: 650; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; margin: 0; }
.wordmark span { color: var(--accent-hi); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 28px; }
.nav a { text-decoration: none; color: var(--text-2); font-size: 15px; transition: color 0.2s; }
.nav a { position: relative; }
.nav a:hover { color: var(--text); }
/* Aktiver Abschnitt: weiß + kurzer Akzentstrich darunter */
.nav a.is-active { color: var(--text); font-weight: 550; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: var(--accent-hi); transform: scaleX(0); transition: transform 0.35s var(--ease);
}
.nav a.is-active::after { transform: scaleX(1); }
.nav-phone { display: none; }
.menu-toggle { display: none; }

/* Hero */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); }
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--muted); }
.hero-sub { margin-top: 28px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 44ch; }
.hero-ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

.hero-visual { margin: 0; position: relative; }
.portrait-frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero-shot {
  position: absolute; left: -22%; bottom: 14%; width: 62%;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
}
.hero-visual figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* Load-in */
@media (prefers-reduced-motion: no-preference) {
  .load { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 80ms); }
  .hero-shot { opacity: 0; transform: translateY(24px); animation: rise 1s var(--ease) 0.55s forwards; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Fakten */
.facts { border-block: 1px solid var(--line); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 32px 24px 32px 0; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.fact-value { display: flex; align-items: center; gap: 10px; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.fact-value .icon { color: var(--accent-hi); width: 1em; height: 1em; }
.fact-label { margin-top: 6px; font-size: 15px; color: var(--muted); }

/* Statement */
.statement { padding-block: var(--section); }
.statement-text {
  font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.22; letter-spacing: -0.03em; font-weight: 500;
  max-width: 28ch;
}
.statement-text .w { --to: var(--text); }
.statement-text .w.dim { --to: var(--muted); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement-text .w {
      color: #34373E;
      animation: word-in linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 42%;
    }
  }
}
@keyframes word-in { to { color: var(--to); } }

.shift { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: 0.32fr 1fr; gap: 48px; }
.shift-title { font-size: 1.25rem; color: var(--text-2); font-weight: 500; }
.shift-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: start;
  padding-block: 28px; border-top: 1px solid var(--line);
}
.shift-row:first-child { border-top: 0; padding-top: 0; }
.shift-before { color: var(--muted); }
.shift-before strong { color: var(--text-2); font-weight: 550; }
.shift-after strong { font-weight: 600; }
.shift-after { color: var(--text-2); }
.shift-after strong { color: var(--text); }
.shift-arrow { color: var(--accent-hi); margin-top: 4px; }

/* Passung */
/* Passung steht jetzt kurz vor FAQ und Kontakt: eigene graue Fläche */
.fit { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.fit-grid { margin-top: 56px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 20px; }
.fit-yes {
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 0% 0%, #1A3170 0%, var(--navy) 45%, var(--navy-deep) 100%);
  border: 1px solid rgb(143 174 255 / 0.14);
}
.fit-no { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); border: 1px solid var(--line); }
.fit h3 { font-size: 1.3rem; margin-bottom: 24px; }
.check-list li, .x-list li { display: flex; gap: 14px; padding-block: 10px; }
.check-list .icon { color: var(--accent-hi); margin-top: 4px; }
.check-list li { color: var(--text); }
.x-list li { color: var(--text-2); }
.x-list .icon { color: var(--muted); margin-top: 4px; }

/* Leistungen / Bento */
.services { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.cell h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 12px; }
.cell p { color: var(--text-2); }
.cell-icon { width: 28px; height: 28px; color: var(--accent-hi); margin-bottom: 28px; }
.cell-strategy {
  grid-column: span 4;
  background: linear-gradient(150deg, #1A3170 0%, var(--navy) 50%, var(--navy-deep) 100%);
  border-color: rgb(143 174 255 / 0.14);
  justify-content: flex-end; min-height: 340px;
}
.cell-strategy h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); max-width: 16ch; }
.cell-strategy p { max-width: 52ch; }
.cell-search { grid-column: span 2; }
.queries { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.queries li .icon { color: var(--accent-hi); width: 14px; height: 14px; }
.cell-link { margin-top: 20px; align-self: flex-start; }
.queries li {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--text-2);
}
.cell-design { grid-column: span 2; padding: 0; overflow: hidden; }
.cell-design .cell-media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.cell-design img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.8s var(--ease); }
.cell-design:hover img { transform: scale(1.03); }
.cell-design h3 { margin: 24px 28px 8px; }
.cell-design p { margin: 0 28px 28px; }
.cell-leads, .cell-measure { grid-column: span 2; }

/* Sichtbarkeit: SEO + GEO als Matrix */
.visibility { padding-block: var(--section); }
.vis-row {
  margin-top: 56px; display: grid; grid-template-columns: 0.32fr 1fr; gap: clamp(28px, 4vw, 56px);
  padding-top: 40px; border-top: 1px solid var(--line);
}
.vis-row + .vis-row { margin-top: 48px; }
.vis-tag {
  display: inline-flex; padding: 4px 12px; border-radius: 999px; margin-bottom: 18px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.04em;
  border: 1px solid var(--line-strong); color: var(--text-2);
}
.vis-row-geo .vis-tag { border-color: var(--accent-hi); color: var(--accent-hi); background: rgb(143 174 255 / 0.08); }
.vis-label h3 { font-size: 1.35rem; line-height: 1.25; }
.vis-label p:not(.vis-tag) { margin-top: 10px; color: var(--muted); }
.vis-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vis-methods-4 { grid-template-columns: repeat(2, 1fr); }
.vis-methods li { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.vis-row-geo .vis-methods li {
  background: linear-gradient(160deg, rgb(26 49 112 / 0.55), rgb(13 24 52 / 0.35) 60%, var(--surface));
  border-color: rgb(143 174 255 / 0.16);
}
.vis-methods .icon { width: 26px; height: 26px; color: var(--accent-hi); margin-bottom: 18px; }
.vis-methods h4 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.vis-methods p { color: var(--text-2); font-size: 15.5px; }

/* Arbeiten */
.work { padding-block: var(--section); }
.work .section-title { max-width: 20ch; }
.case { margin-top: 56px; }
.case-media {
  display: block; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.case-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.case-media:hover img { transform: scale(1.025); }
.case-body h3 { font-size: 1.45rem; }
.case-meta { color: var(--muted); font-size: 15px; margin-top: 4px; }
.case-body > p:not(.case-meta) { margin-top: 16px; color: var(--text-2); max-width: 48ch; }
.case-body .text-link { margin-top: 20px; }
.case-feature { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: end; }
.case-feature h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.case-pair .case-body { margin-top: 24px; }
.case-offset { margin-top: calc(56px + 96px); }

/* Ablauf */
.process { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: start; }
.process-head { position: sticky; top: calc(var(--header-h) + 40px); }
.process-head .btn { margin-top: 36px; }
.steps { position: relative; counter-reset: step; }
.steps::before {
  content: ""; position: absolute; left: 19px; top: 16px; bottom: var(--line-end, 8px); width: 1px;
  background: var(--line-strong); opacity: 0.5;
}
.steps::after {
  content: ""; position: absolute; left: 19px; top: 16px; bottom: var(--line-end, 8px); width: 1px;
  background: var(--accent-hi); transform-origin: top; transform: scaleY(0);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps::after { animation: grow linear both; animation-timeline: view(); animation-range: entry 60% cover 65%; }
  }
}
@supports not (animation-timeline: view()) { .steps::after { transform: scaleY(1); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .steps::after { transform: scaleY(1); } }
@keyframes grow { to { transform: scaleY(1); } }

/* z-index: die Linie (::after von .steps) liegt hinter den Kreisen, auch wenn .step durch die Reveal-Animation einen eigenen Stapelkontext hat */
.step { position: relative; z-index: 1; padding: 0 0 56px 72px; counter-increment: step; }
.step:last-child { padding-bottom: 0; } /* Linie endet am Kreis von Schritt 4 (--line-end) */
/* Schritte nur sanft von unten einblenden, ohne seitliches Wandern über die Linie */
@media (prefers-reduced-motion: no-preference) { .js .steps > .step.reveal, .js .steps > .step.reveal[data-pos="above"] { --ty: 20px; --tx: 0px; --s: 1; filter: none; } }
.step::before {
  content: counter(step); position: absolute; left: 0; top: -4px;
  width: 39px; height: 39px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 6px var(--bg-raise);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; color: var(--text);
  z-index: 1;
}
.step h3 { font-size: 1.35rem; }
.step > p:not(.step-meta) { margin-top: 10px; color: var(--text-2); max-width: 52ch; }
.step-meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.step-meta span {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}

/* Über mich */
.about { padding-block: var(--section); }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: var(--r-lg); background: var(--surface); }
.about-photo figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.about-lead { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.16; letter-spacing: -0.03em; font-weight: 550; margin-bottom: 32px; }
.about-body p { color: var(--text-2); }
.about-body p + p { margin-top: 18px; }
.about-facts { margin: 40px 0 0; display: grid; gap: 0; }
.about-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.about-facts dt { color: var(--muted); font-size: 15px; }
.about-facts dd { margin: 0; }
.about-facts a { text-decoration: none; color: var(--accent-hi); }

/* Stimmen */
/* Stimmen folgen direkt auf die Arbeiten: gleicher Grund, ein Beweisblock */
.voices { padding-block: var(--section); }

.quote-feature { margin: 56px 0 0; max-width: 980px; }
.quote-feature blockquote { margin: 0; }
.quote-feature blockquote p { font-size: clamp(1.5rem, 2.7vw, 2.3rem); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; }
.quote-feature figcaption, .quote-card figcaption { margin-top: 24px; color: var(--muted); font-size: 15px; }
.quote-feature figcaption strong, .quote-card figcaption strong { display: block; color: var(--text); font-weight: 600; }

.quote-rail {
  /* Wisch-Karussell statt Scroll-Container: kein Scrollbalken, die Spur wird per transform
     verschoben (main.js), jede Wischgeste rastet sauber auf die nächste Karte ein. */
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  margin-top: 64px; overflow: hidden; padding: 4px 0 20px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.quote-rail:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.quote-rail.is-dragging { cursor: grabbing; }
.quote-track {
  position: relative; display: flex; align-items: stretch; gap: 16px; padding-inline: var(--edge);
  transition: transform 0.6s var(--ease); will-change: transform;
}
.quote-rail.is-dragging .quote-track { transition: none; }
@media (prefers-reduced-motion: reduce) { .quote-track { transition: none; } }
.quote-track > .quote-card { flex: 0 0 min(380px, calc(100vw - 2 * var(--gutter) - 44px)); }
.quote-track img { -webkit-user-drag: none; pointer-events: none; }
.quote-card {
  margin: 0; padding: 28px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between;
}
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { color: var(--text); }
.voices-link { margin-top: 32px; }

/* FAQ */
.faq { padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(40px, 6vw, 96px); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding-block: 24px; font-size: 1.12rem; font-weight: 550;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { color: var(--muted); transition: transform 0.35s var(--ease), color 0.2s; }
.faq-list summary:hover .icon { color: var(--text); }
.faq-list details[open] summary .icon { transform: rotate(45deg); color: var(--accent-hi); }
.faq-list details p { padding-bottom: 24px; color: var(--text-2); max-width: 62ch; }

/* Kontakt */
.contact {
  padding-block: var(--section);
  background:
    radial-gradient(80% 90% at 0% 0%, rgb(26 49 112 / 0.55), transparent 60%),
    var(--navy-deep);
  border-top: 1px solid rgb(143 174 255 / 0.12);
}
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact .section-lead { color: var(--text-2); }
.contact-direct { margin-top: 40px; display: grid; gap: 14px; color: var(--text-2); }
.contact-direct li { display: flex; align-items: center; gap: 12px; }
.contact-direct .icon { color: var(--accent-hi); }
.contact-direct a { text-decoration: none; color: var(--text); }
.contact-direct a:hover { color: var(--accent-hi); }

.form-panel { padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: 15px; font-weight: 550; padding: 0; }
.field legend { margin-bottom: 8px; }
.field input[type="text"], .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 13px 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-hi); box-shadow: 0 0 0 3px rgb(143 174 255 / 0.25); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-help { font-size: 14px; color: var(--muted); }
.field-error { font-size: 14px; color: var(--error); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:hover span { border-color: var(--text-2); color: var(--text); }
.choice span {
  cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text-2); font-size: 15px; font-weight: 500;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.choice input:checked + span { background: var(--navy); border-color: var(--accent-hi); color: var(--text); }
.choice input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

.field-check { grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.field-check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.field-check label { font-weight: 400; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.field-check label a { color: var(--accent-hi); }
.field-check .field-error { grid-column: 2; }
/* „Datenschutzerklärung. *“ bleibt zusammen, das Sternchen landet nie allein in einer Zeile */
.nowrap { white-space: nowrap; }
@media (max-width: 480px) { .field-check label { font-size: 13.5px; } }

.form-alert { padding: 12px 16px; border-radius: var(--r-sm); background: rgb(255 156 146 / 0.1); border: 1px solid rgb(255 156 146 / 0.4); color: var(--error); font-size: 15px; }
.form-note { font-size: 14px; color: var(--muted); text-align: center; margin-top: -8px; }
.btn[disabled] { opacity: 0.7; cursor: progress; }


/* Footer */
/* Footer: Abschluss mit Marke, drei Spalten, Rechtliches und großer Wortmarke als Ausklang */
.site-footer {
  position: relative; overflow: hidden;
  padding-top: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--line);
  background: radial-gradient(120% 70% at 15% 0%, rgb(18 34 74 / 0.55), transparent 60%), var(--bg);
  color: var(--muted); font-size: 15px;
}
.footer-top { display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 1.3fr 1fr; gap: clamp(28px, 3.5vw, 56px); }
.footer-brand .wordmark { font-size: 24px; color: var(--text); }
.footer-claim { margin: 16px 0 28px; max-width: 34ch; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.footer-head {
  margin-bottom: 18px; color: var(--text);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.footer-col ul { display: grid; gap: 12px; }
.footer-col li { display: flex; }
.footer-col a, .footer-linkbtn, .footer-plain {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-2); text-decoration: none; transition: color 0.2s var(--ease);
}
.footer-col a:hover, .footer-linkbtn:hover { color: var(--text); }
.footer-col .icon { width: 16px; height: 16px; color: var(--accent-hi); flex: none; }
.footer-bottom {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 48px; align-items: start;
  margin-top: clamp(56px, 7vw, 88px); padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-bottom .copy { color: var(--text-2); white-space: nowrap; }
.footer-note { max-width: 88ch; justify-self: end; font-size: 13px; line-height: 1.55; color: var(--muted); }
.footer-mark {
  margin: clamp(24px, 4vw, 48px) 0 0; padding-inline: var(--gutter);
  font-size: clamp(64px, 15.5vw, 236px); font-weight: 650; letter-spacing: -0.055em; line-height: 0.8;
  white-space: nowrap; text-align: center; user-select: none;
  background: linear-gradient(180deg, rgb(237 238 240 / 0.13), rgb(237 238 240 / 0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(14%);
}
.footer-mark span { -webkit-text-fill-color: rgb(143 174 255 / 0.22); }

/* Mobile Sticky-CTA */
.sticky-cta { display: none; }

/* Reveal: beidseitig. Elemente blenden beim Hinein- und Herausscrollen ein und aus,
   jeweils aus der Richtung, aus der sie kommen (data-pos von main.js). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    --ty: 48px; --tx: 0px; --s: 0.98;
    opacity: 0; filter: blur(10px);
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
    transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 0.9s var(--ease);
  }
  .js .reveal[data-pos="above"] { --ty: -48px; }
  .js .reveal[data-reveal="left"] { --tx: -64px; --ty: 0px; }
  .js .reveal[data-reveal="right"] { --tx: 64px; --ty: 0px; }
  .js .reveal[data-reveal="zoom"] { --s: 0.9; --ty: 32px; }
  .js .reveal[data-reveal="zoom"][data-pos="above"] { --ty: -32px; }
  .js .reveal.is-in {
    opacity: 1; filter: blur(0); transform: none;
    transition-delay: var(--d, 0ms);
  }
}

/* ---------- Responsive ---------- */
/* Ab 1140 px passt die Navigation mit sieben Punkten nicht mehr in eine Zeile: Menü-Button */
.wordmark, .nav a { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav ul { gap: 20px; }
  .header-inner { gap: 24px; }
}

@media (max-width: 1140px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    min-height: 44px; padding: 0 14px; border-radius: 999px;
    background: transparent; color: var(--text); border: 1px solid var(--line-strong); font: inherit; font-size: 15px; cursor: pointer;
  }
  .header-cta { display: none; }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; display: none; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 24px; }
  .nav li a { display: block; padding: 14px 0; font-size: 18px; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav-phone { display: block; }
  .nav a::after { display: none; }
  .nav li a.is-active { color: var(--accent-hi); }
  .nav-phone a { color: var(--accent-hi) !important; border-bottom: 0 !important; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 14ch; }
  .hero-visual { max-width: 520px; margin-left: auto; margin-right: 0; width: 82%; }
  .hero-shot { left: -18%; width: 60%; }

  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }

  .shift { grid-template-columns: 1fr; gap: 32px; }
  .fit-grid { grid-template-columns: 1fr; }

  .bento { grid-template-columns: 1fr 1fr; }
  .cell-strategy { grid-column: span 2; min-height: 280px; }
  .cell-search, .cell-design, .cell-leads, .cell-measure { grid-column: span 1; }

  .case-feature { grid-template-columns: 1fr; }
  .vis-row { grid-template-columns: 1fr; }
  .vis-methods { grid-template-columns: 1fr 1fr; }
  .about-photo { max-width: 420px; }
  .process-grid, .about-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .process-head { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero { padding-top: 32px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-visual { width: 100%; max-width: none; }
  /* Screenshot bleibt im Porträt, die Bildunterschrift darunter frei */
  .hero-shot { left: auto; right: 12px; bottom: 60px; width: 54%; }
  .hero-visual figcaption { margin-top: 14px; }

  .facts-grid { grid-template-columns: 1fr; }
  .fact, .fact + .fact { padding: 20px 0; border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--line); }

  /* Vorher/Nachher als Paar: grauer Ist-Zustand, darunter hervorgehobene Lösung */
  .shift-row { grid-template-columns: 1fr; gap: 0; padding-block: 12px; border-top: 0; }
  .shift-arrow { display: none; }
  .shift-before, .shift-after { position: relative; padding: 16px 16px 16px 18px; border-radius: 12px; }
  .shift-before { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .shift-after {
    background: linear-gradient(160deg, rgb(26 49 112 / 0.6), rgb(13 24 52 / 0.6));
    border: 1px solid rgb(143 174 255 / 0.22); border-top: 0;
    border-top-left-radius: 0; border-top-right-radius: 0;
  }
  .shift-before::before, .shift-after::before {
    display: block; margin-bottom: 6px;
    font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .shift-before::before { content: "Heute"; color: var(--muted); }
  .shift-after::before { content: "Mit neuer Website"; color: var(--accent-hi); }

  .bento { grid-template-columns: 1fr; }
  .cell-strategy, .cell-search, .cell-design, .cell-leads, .cell-measure { grid-column: auto; }

  .case-pair { grid-template-columns: 1fr; }
  .vis-methods, .vis-methods-4 { grid-template-columns: 1fr; }
  .js .reveal[data-reveal="left"] { --tx: -32px; }
  .js .reveal[data-reveal="right"] { --tx: 32px; }
  .case-offset { margin-top: 56px; }

  .step { padding-left: 60px; }
  /* Zweite Karte schaut sichtbar herein, damit klar ist: hier geht es weiter */
  .quote-track { gap: 12px; }
  .quote-card { padding: 22px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-top > .footer-col:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-note { justify-self: start; }

  .sticky-cta {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    display: flex; gap: 8px; padding: 8px; border-radius: 999px;
    background: rgb(19 20 23 / 0.88); border: 1px solid var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transform: translateY(140%); transition: transform 0.4s var(--ease);
  }
  .sticky-cta .btn-primary { flex: 1; }
  .sticky-cta.is-visible { transform: none; }
  .site-footer { padding-bottom: 88px; }
}

/* Kundenstimmen: kleines Foto neben Name */
.quote-feature figcaption, .quote-card figcaption { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none;
  background: var(--surface-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong);
}
.quote-feature .avatar { width: 52px; height: 52px; }

/* Weitere Kunden, nur als Text */
.more-clients { margin-top: clamp(64px, 8vw, 104px); padding-top: 32px; border-top: 1px solid var(--line); }
.more-clients > p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.more-clients ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.more-clients li { color: var(--muted); font-size: 15px; line-height: 1.45; }
.more-clients strong { display: block; color: var(--text-2); font-weight: 550; font-size: 16px; margin-bottom: 2px; }
@media (max-width: 960px) { .more-clients ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .more-clients ul { grid-template-columns: 1fr; gap: 16px; } }

/* CTA am Ende eines Abschnitts: immer derselbe Button zum Formular */
.section-cta { margin-top: clamp(48px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.section-cta p { color: var(--muted); font-size: 15px; max-width: 46ch; }
.section-cta-stack { flex-direction: column; align-items: flex-start; margin-top: 28px; }
.about-body .section-cta { margin-top: 36px; }
.faq-head { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); }

/* Stimmen-Slider: Pfeile */
.rail-controls { margin-top: 48px; display: flex; justify-content: flex-end; gap: 10px; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--line-strong);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s var(--ease);
}
.rail-btn:hover:not([disabled]) { background: var(--surface); border-color: var(--text-2); }
.rail-btn:active:not([disabled]) { transform: scale(0.95); }
.rail-btn[disabled] { opacity: 0.35; cursor: default; }
.rail-btn[data-rail-prev] .icon { transform: rotate(180deg); }
.voices .quote-rail { margin-top: 16px; }

/* Letzte Karte: Trustpilot */
.quote-card-tp {
  text-decoration: none; color: var(--text); gap: 10px; justify-content: flex-start;
  background: linear-gradient(160deg, #1A3170 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border-color: rgb(143 174 255 / 0.18);
}
.tp-stars { display: flex; gap: 4px; color: var(--accent-hi); }
.tp-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; }
.tp-text { color: var(--text-2); }
.quote-card-tp .text-link { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .faq-head { position: static; } }
@media (max-width: 767px) { .rail-controls { margin-top: 32px; } .rail-btn { width: 44px; height: 44px; } }

/* Arbeiten: versetzte Wand aus echten Projekten (verlinkt) und Konzepten */
.ex-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(40px, 5vw, 64px); align-items: start; }
.ex { margin: 0; }
.ex-media { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.ex-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.ex:hover .ex-media img { transform: scale(1.025); }
.ex figcaption { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.ex figcaption a { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-decoration: none; color: inherit; }
.ex figcaption strong { color: var(--text); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; }
.ex figcaption .icon { color: var(--accent-hi); align-self: center; transition: transform 0.3s var(--ease); }
.ex figcaption a:hover .icon { transform: translate(2px, -2px); }
.ex figcaption a:hover strong { color: var(--accent-hi); }
.ex-concept { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); }
.ex:nth-child(odd)  { grid-column: 1 / span 7; }
.ex:nth-child(even) { grid-column: 8 / span 5; margin-top: 96px; }
.ex:nth-child(4n+3) { grid-column: 1 / span 5; }
.ex:nth-child(4n+4) { grid-column: 6 / span 7; margin-top: 64px; }
@media (max-width: 767px) {
  .ex-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .ex:nth-child(n) { grid-column: auto; margin-top: 0; }
}

/* Kunden-Logos: ruhiges Laufband, signalisiert Auswahl statt vollständiger Liste.
   Logos liegen als weiße, zugeschnittene Dateien vor (logo-*.webp): kein CSS-Filter,
   keine Maske und kein Lazy-Loading, weil iOS Safari gefilterte Bilder in einem
   bewegten, maskierten Band abschneidet und lazy Bilder erst spät nachlädt. */
.clients { margin-top: clamp(72px, 9vw, 112px); }
.clients-title { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.logo-marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding-block: 28px; }
.logo-marquee::before, .logo-marquee::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: clamp(32px, 10%, 120px); pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.logo-track { display: flex; width: max-content; will-change: transform; }
.logo-row { display: flex; flex: none; align-items: center; gap: clamp(44px, 6vw, 88px); padding-right: clamp(44px, 6vw, 88px); }
.logo-item { flex: none; height: 64px; display: flex; align-items: center; }
.logo-item img { display: block; max-width: none; opacity: 0.75; transition: opacity 0.3s; }
.logo-item img:hover { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .logo-track { animation: logo-run 40s linear infinite; }
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
}
@keyframes logo-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 720px) {
  .logo-marquee { padding-block: 20px; }
  .logo-item { height: 56px; }
}
/* Ohne Bewegung: eine ruhige, umbrechende Reihe ohne Wiederholung */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee::before, .logo-marquee::after { display: none; }
  .logo-track, .logo-row:first-child { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; padding-right: 0; }
  .logo-row[aria-hidden="true"] { display: none; }
}

/* Echte Projekte im Raster: mit Text und Buttons */
.ex-body { margin-top: 22px; display: block; }
.ex-body h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; }
.ex-meta { margin-top: 4px; color: var(--muted); font-size: 15px; }
.ex-desc { margin-top: 12px; color: var(--text-2); max-width: 52ch; }
.ex-actions { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.work { padding-top: clamp(72px, 9vw, 120px); }

/* ---------- Fallberichte (projekte/<slug>/) ---------- */
.case-hero { padding: clamp(40px, 6vw, 80px) 0 0; }
.case-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 15px; transition: color 0.2s; }
.case-back .icon { transform: rotate(180deg); }
.case-back:hover { color: var(--text); }
.case-title { margin-top: 28px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 22ch; }
.case-lead { margin-top: 24px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 56ch; }
.case-facts { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.case-facts div { padding: 20px 20px 0 0; }
.case-facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.case-facts dt { color: var(--muted); font-size: 14px; }
.case-facts dd { margin: 4px 0 0; font-weight: 500; }
.case-shot { margin: clamp(48px, 6vw, 72px) 0 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8); }
.case-shot img { width: 100%; }

.case-story { padding-block: var(--section); }
.case-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); }
.case-story h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 18px; }
.case-story p { color: var(--text-2); font-size: clamp(1.02rem, 1.2vw, 1.12rem); max-width: 54ch; }

.case-gallery { padding-bottom: var(--section); }
.case-gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); }
.cg { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.cg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cg-1 { grid-column: 1 / span 8; grid-row: 1; }
.cg-2 { grid-column: 1 / span 8; grid-row: 2; }
.cg-phone { grid-column: 9 / span 4; grid-row: 1 / span 2; display: grid; place-items: center; padding: clamp(24px, 3vw, 48px);
  background: radial-gradient(120% 100% at 50% 0%, #1A3170 0%, var(--navy) 45%, var(--navy-deep) 100%); border-color: rgb(143 174 255 / 0.16); }
.phone { width: min(100%, 300px); border-radius: 36px; padding: 10px; background: #0A0B0D; border: 1px solid #2E3138; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7); }
.phone img { border-radius: 27px; height: auto; }

.case-points { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.case-point-list { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); }
.case-point-list li { display: flex; gap: 16px; padding-block: 28px; border-top: 1px solid var(--line); }
.case-point-list .icon { color: var(--accent-hi); width: 22px; height: 22px; margin-top: 3px; }
.case-point-list h3 { font-size: 1.15rem; }
.case-point-list p { margin-top: 6px; color: var(--text-2); }

.case-next { padding-block: var(--section); }
.case-next-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.case-next .section-cta { margin-top: 32px; }
.case-next-link { display: block; text-decoration: none; color: var(--text); }
.case-next-label { display: block; color: var(--muted); font-size: 14px; }
.case-next-name { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.case-next-name .icon { color: var(--accent-hi); transition: transform 0.3s var(--ease); }
.case-next-link:hover .case-next-name .icon { transform: translateX(4px); }
.case-next-link img { border-radius: var(--r-lg); border: 1px solid var(--line); width: 100%; transition: transform 0.6s var(--ease); }
.case-next-link:hover img { transform: translateY(-4px); }

@media (max-width: 960px) {
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .case-story-grid, .case-next-grid, .case-point-list { grid-template-columns: 1fr; }
  .cg-1, .cg-2 { grid-column: 1 / -1; grid-row: auto; }
  .cg-phone { grid-column: 1 / -1; grid-row: auto; }
}
/* Echte Projekte: Bildunterschrift ist ein Textblock, Buttons behalten ihr Aussehen */
.ex .ex-body { display: block; color: inherit; font-size: inherit; }
.ex .ex-body a.btn { display: inline-flex; align-items: center; color: var(--text); }
.ex .ex-body a.text-link { display: inline-flex; align-items: center; color: var(--accent-hi); }

/* Rechtsseiten (Impressum, Datenschutz) */
.legal { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.legal-wrap { max-width: 860px; }
.legal-title { margin-top: 28px; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -0.035em; }
.legal-body { margin-top: 40px; color: var(--text-2); overflow-wrap: anywhere; }
.legal-body h2 { margin: 48px 0 14px; font-size: 1.45rem; color: var(--text); }
.legal-body h3 { margin: 32px 0 10px; font-size: 1.15rem; color: var(--text); }
.legal-body h4 { margin: 24px 0 8px; font-size: 1rem; font-weight: 600; color: var(--text); }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: 14px; max-width: 72ch; }
.legal-body ul, .legal-body ol { padding-left: 1.2em; list-style: disc; }
.legal-body a { color: var(--accent-hi); }

/* Cookie-Banner: muss sich klar von der Seite abheben. Hellere, erhöhte Fläche mit
   Akzentkante, starker Schatten und leichte Abdunklung der Seite. Mobil als kompakte
   Leiste am unteren Rand (Inhalt oben bleibt lesbar), Kategorien eingeklappt.
   Ablehnen und Akzeptieren sind gleich groß und mit einem Klick erreichbar. */
.footer-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.consent {
  position: fixed; z-index: 70; left: 20px; bottom: 20px; width: min(400px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px 14px; border-radius: var(--r-lg);
  background: #22252C; border: 1px solid rgb(255 255 255 / 0.14); border-top: 3px solid var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 70px -10px rgb(0 0 0 / 0.85), 0 0 0 100vmax rgb(5 6 8 / 0.28);
}
.consent[hidden] { display: none; }
.consent-title { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.consent-text { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.consent-text a { color: var(--accent-hi); }
.consent-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn, .consent-save { width: 100%; padding: 0 12px; }
.consent .btn-ghost { background: rgb(255 255 255 / 0.04); }
.consent-cats { margin-top: 14px; display: grid; gap: 8px; }
.consent-cats[hidden] { display: none; }
.consent-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px; border-radius: var(--r-sm); background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.1); cursor: pointer;
}
.consent-cat strong { display: block; font-size: 15px; font-weight: 600; }
.consent-cat small { display: block; font-size: 13px; color: var(--muted); }
/* Schalter: nativer Checkbox-Input, als Toggle gestaltet */
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--text); transition: transform 0.25s var(--ease);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.consent-more {
  display: block; margin: 8px auto 0; padding: 8px 6px;
  background: none; border: 0; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
}
.consent-more[hidden] { display: none; }
.consent-more:hover { color: var(--text); }
@media (max-width: 640px) {
  .consent {
    left: 0; right: 0; bottom: 0; width: auto; max-height: 75dvh;
    padding: 18px 16px calc(10px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; border-inline: 0; border-bottom: 0;
  }
  .consent-title { font-size: 1rem; }
  .consent-text { font-size: 14px; }
  .consent-actions { margin-top: 14px; gap: 8px; }
  .consent-actions .btn { font-size: 14.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in 0.5s var(--ease) both; }
}
@keyframes consent-in { from { transform: translateY(24px); opacity: 0; } }

/* Formular: Honeypot unsichtbar, auch für Screenreader */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Danke-Seite (ohne Sticky-CTA, die Anfrage ist ja schon raus) */
.page-thanks .sticky-cta { display: none; }
.thanks { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); background: radial-gradient(90% 80% at 80% 0%, rgb(18 34 74 / 0.6), transparent 65%); }
.thanks-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
.thanks-badge {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px rgb(51 88 212 / 0.16);
}
.thanks-badge .icon { width: 26px; height: 26px; }
.thanks-title { margin-top: 32px; font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 600; max-width: 14ch; }
.thanks-lead { margin-top: 24px; max-width: 44ch; color: var(--text-2); font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
.thanks-person { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.thanks-person img { width: 112px; height: 136px; object-fit: cover; object-position: 44% 24%; border-radius: var(--r-md); }
.thanks-person-body p { color: var(--muted); font-size: 15px; line-height: 1.45; }
.thanks-person-body .thanks-person-name { color: var(--text); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.thanks-call { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--accent-hi); text-decoration: none; font-weight: 500; }
.thanks-call .icon { width: 16px; height: 16px; }
.thanks-call:hover { color: var(--text); }

.next { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--line); background: var(--bg-raise); }
.next-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.035em; font-weight: 600; }
.next-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
/* Verbindungslinie: erledigter Teil in Akzentfarbe, Rest als Haarlinie */
.next-track::before { content: ""; position: absolute; top: 24px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, var(--accent) 0 25%, var(--line-strong) 25% 100%); opacity: 0.7; }
.next-step { position: relative; }
.next-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
  background: var(--bg-raise); border: 1px solid var(--line-strong); color: var(--accent-hi);
  box-shadow: 0 0 0 6px var(--bg-raise);
}
.next-node .icon { width: 20px; height: 20px; }
.next-step.is-done .next-node { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.next-step h3 { margin-top: 24px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.next-step p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.55; max-width: 30ch; }
.next-step.is-done h3 { color: var(--accent-hi); }
.next-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 72px; padding: 28px 32px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.next-more p { color: var(--text-2); max-width: 52ch; }

@media (max-width: 1023px) {
  .thanks-grid { grid-template-columns: 1fr; align-items: start; }
  .thanks-person { max-width: 460px; }
  .next-track { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .next-track::before { display: none; }
}
@media (max-width: 767px) {
  .next-track { grid-template-columns: 1fr; gap: 0; }
  /* Mobil: senkrechter Verlauf, Linie läuft durch die Knoten */
  .next-step:not(:last-child)::after { content: ""; position: absolute; left: 23.5px; top: 48px; bottom: 0; width: 1px; background: var(--line-strong); opacity: 0.7; }
  .next-step.is-done::after { background: var(--accent); }
  .next-step { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding-bottom: 32px; }
  .next-step .next-node { grid-row: span 2; }
  .next-step h3 { margin-top: 12px; }
  .next-more { padding: 24px; }
  .next-more .btn { width: 100%; }
  .thanks-person { grid-template-columns: 88px 1fr; }
  .thanks-person img { width: 88px; height: 108px; }
}

/* Projekt-Übersicht (projekte/) */
.pi-hero { padding: clamp(40px, 6vw, 80px) 0 0; }
.pi-title { margin-top: 28px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 20ch; }
.pi-lead { margin-top: 24px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 52ch; }

.pi-list { padding: clamp(48px, 6vw, 80px) 0 var(--section); }
.pi-media { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8); }
.pi-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.pi-feature:hover .pi-media img, .pi-card:hover .pi-media img { transform: scale(1.02); }
.pi-feature .pi-media img { aspect-ratio: 16 / 9; }

.pi-name { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.2; letter-spacing: -0.02em; }
.pi-name a { color: inherit; text-decoration: none; transition: color 0.2s; }
.pi-name a:hover { color: var(--accent-hi); }
.pi-meta { margin-top: 4px; color: var(--muted); font-size: 15px; }
.pi-teaser { margin-top: 14px; color: var(--text-2); max-width: 52ch; }
.pi-services { margin-top: 10px; color: var(--muted); font-size: 15px; }
.pi-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.pi-feature-body { margin-top: 28px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.pi-feature .pi-name { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.pi-feature .pi-teaser { margin-top: 0; font-size: clamp(1.05rem, 1.25vw, 1.15rem); }

.pi-grid { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(56px, 7vw, 96px); align-items: start; }
.pi-card .pi-name { margin-top: 24px; }
.pi-card:nth-child(even) { margin-top: 96px; }
/* Ungerade Anzahl: letzte Karte über die volle Breite, damit keine Lücke bleibt */
.pi-card:nth-child(odd):last-child { grid-column: 1 / -1; }
.pi-card:nth-child(odd):last-child .pi-media img { aspect-ratio: 16 / 8; }

.pi-clients { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.pi-clients-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.pi-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); gap: 1px; background: var(--line); }
.pi-logos li { min-width: 0; height: 132px; display: grid; place-items: center; padding: 20px; background: var(--bg-raise); transition: background 0.3s; }
.pi-logos li:hover { background: var(--surface); }
.pi-logos img { max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 0.3s; }
.pi-logos li:hover img { opacity: 1; }
.pi-logos img[data-logo="ichzeit"] { max-height: 64px; transform: scale(1.6); }
.pi-logos img[data-logo="esci"] { max-height: 52px; }
.pi-logos img[data-logo="tartsch"], .pi-logos img[data-logo="aqua"] { max-height: 84px; max-width: 170px; filter: none; opacity: 0.9; }

.pi-cta { padding-block: var(--section); }
.pi-cta-panel {
  padding: clamp(36px, 6vw, 80px);
  border-radius: var(--r-lg);
  border: 1px solid rgb(143 174 255 / 0.14);
  background: radial-gradient(80% 120% at 0% 0%, rgb(26 49 112 / 0.6), transparent 60%), var(--navy-deep);
}
.pi-cta .section-cta { margin-top: 36px; }
.pi-cta .section-cta .text-link { font-size: inherit; }

@media (max-width: 960px) {
  .pi-feature-body, .pi-clients-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pi-grid { grid-template-columns: 1fr; }
  .pi-card:nth-child(even) { margin-top: 0; }
  .pi-logos li { padding: 12px; }
  .pi-logos img, .pi-logos img[data-logo] { max-width: 100%; }
  .pi-logos img[data-logo="ichzeit"] { transform: scale(1.3); }
  .pi-logos li { height: 104px; }
  .pi-actions .btn { width: 100%; justify-content: center; }
}

/* Lokale Landingpage (webdesign-<ort>/) */
.loc-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); }
.loc-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.loc-h1 { font-size: clamp(2.3rem, 3.9vw, 3.5rem); line-height: 1.05; letter-spacing: -0.04em; }
.loc-h1 .dim { display: block; }
.loc-h1, .loc-h1 .dim { text-wrap: wrap; }
.loc-h1-long { font-size: clamp(2.1rem, 3.3vw, 2.95rem); }
.loc-hero-visual { margin: 0; position: relative; }
.loc-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--surface); border: 1px solid var(--line); }
.loc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.loc-hero-shot {
  position: absolute; left: -10%; bottom: -6%; width: 46%;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.6);
}
.loc-hero-visual figcaption { margin-top: 14px; padding-left: 40%; font-size: 14px; color: var(--muted); text-align: right; }
.loc-hero .hero-sub { max-width: 40ch; }
@media (prefers-reduced-motion: no-preference) {
  .loc-hero-shot { opacity: 0; transform: translateY(24px); animation: rise 1s var(--ease) 0.6s forwards; }
}

.loc-text { margin-top: 16px; color: var(--text-2); max-width: 56ch; }

.loc-local { padding-block: var(--section); }
.loc-band { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.loc-band img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 55%; }
.loc-local-grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.loc-queries { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); }
.loc-queries-label { color: var(--muted); font-size: 15px; }
.loc-queries ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.loc-queries li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 500; }
.loc-queries .icon { color: var(--accent-hi); flex: none; }

.loc-services { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.loc-bento { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lb { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; }
.lb .icon { width: 26px; height: 26px; color: var(--accent-hi); margin-bottom: auto; }
.lb h3 { margin-top: 32px; font-size: 1.3rem; letter-spacing: -0.02em; }
.lb p { margin-top: 10px; color: var(--text-2); max-width: 48ch; }
.lb-wide { grid-column: span 2; }
.lb-navy { background: radial-gradient(90% 90% at 100% 0%, rgb(26 49 112 / 0.7), transparent 70%), var(--navy-deep); border-color: rgb(143 174 255 / 0.16); }
.lb-accent { background: linear-gradient(135deg, rgb(51 88 212 / 0.28), rgb(13 24 52 / 0.2) 60%), var(--surface); border-color: rgb(143 174 255 / 0.18); }
.lb-media { display: grid; grid-template-columns: 1fr 0.55fr; gap: 24px; align-items: end; padding-bottom: 0; }
.lb-media .lb-copy { display: flex; flex-direction: column; padding-bottom: clamp(24px, 3vw, 36px); height: 100%; }
.lb-media img { width: 100%; max-width: 200px; height: 340px; object-fit: cover; object-position: top; justify-self: center; border-radius: 22px 22px 0 0; border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7); }

.loc-work { padding-block: var(--section); }
.loc-work-grid { margin-top: 56px; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: clamp(20px, 3vw, 40px); }
.lw { display: block; text-decoration: none; color: var(--text); }
.lw-big { grid-row: span 2; }
.lw-media { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.lw-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.lw-big .lw-media img { aspect-ratio: 4 / 3; }
.lw:hover .lw-media img { transform: scale(1.025); }
.lw-name { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.lw-big .lw-name { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.lw-name .icon { color: var(--accent-hi); transition: transform 0.3s var(--ease); }
.lw:hover .lw-name .icon { transform: translateX(4px); }
.lw-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
.loc-all { margin-top: 40px; }

.loc-voice { padding-bottom: var(--section); }
.loc-voice .quote-feature { margin-top: 0; }
.loc-tp { margin-top: 28px; }

.loc-about { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.loc-about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.loc-about-photo { margin: 0; position: relative; padding-bottom: 72px; }
.loc-about-photo > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); }
.loc-about-person { position: absolute; right: -24px; bottom: 0; width: 46%; padding: 10px 10px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7); }
.loc-about-person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 44% 22%; border-radius: var(--r-md); }
.loc-about-person p { margin-top: 10px; padding-inline: 4px; color: var(--muted); font-size: 14px; }
.loc-about-person strong { display: block; color: var(--text); font-weight: 600; }
.loc-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; counter-reset: ls; }
.loc-steps li { counter-increment: ls; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.loc-steps li::before { content: counter(ls, decimal-leading-zero); display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--accent-hi); }
.loc-steps h3 { margin-top: 8px; font-size: 1.1rem; letter-spacing: -0.015em; }
.loc-steps p { margin-top: 6px; color: var(--text-2); font-size: 15.5px; }

.loc-credits { padding: 28px 0; border-top: 1px solid var(--line); }
.loc-credits p { color: var(--muted); font-size: 13px; max-width: none; }
.loc-credits a { color: var(--text-2); }

@media (max-width: 1023px) {
  .loc-hero-grid { grid-template-columns: 1fr; }
  .loc-hero-visual { width: 88%; margin-left: auto; }
  .loc-local-grid, .loc-about-grid { grid-template-columns: 1fr; }
  .loc-about-photo { max-width: 560px; }
}
@media (max-width: 767px) {
  .loc-hero-visual { width: 100%; }
  .loc-hero-shot { left: auto; right: 12px; bottom: 56px; width: 50%; }
  .loc-hero-visual figcaption { padding-left: 0; text-align: left; }
  .loc-band img { aspect-ratio: 4 / 3; }
  .loc-bento { grid-template-columns: 1fr; }
  .lb-wide { grid-column: auto; }
  .lb-media { grid-template-columns: 1fr; }
  .lb-media img { max-width: 170px; height: 260px; }
  .loc-work-grid { grid-template-columns: 1fr; }
  .lw-big { grid-row: auto; }
  .loc-about-person { right: 12px; width: 52%; }
  .loc-steps { grid-template-columns: 1fr; }
}

/* Über uns: breites Foto, Überschrift auf der hellen Wand */
.about-banner { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #E9E8E6; }
.about-banner img { width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; }
.about-banner-copy { position: absolute; top: 0; bottom: 0; left: 63%; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px clamp(28px, 3.5vw, 56px) 32px 0; }
.about-banner .about-lead { margin: 0; color: #14161A; font-size: clamp(1.5rem, 2.25vw, 2.35rem); line-height: 1.14; }
.about-banner .about-lead .dim { color: #5B606A; }
.about-split { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-split .about-facts { margin-top: 0; }
@media (max-width: 1023px) {
  .about-banner { background: none; border: 0; border-radius: 0; overflow: visible; }
  .about-banner img { aspect-ratio: 4 / 3; object-position: 22% 50%; border-radius: var(--r-lg); border: 1px solid var(--line); }
  .about-banner-copy { position: static; width: auto; padding: 28px 0 0; }
  .about-banner .about-lead { color: var(--text); font-size: clamp(1.55rem, 3.6vw, 2.3rem); max-width: 24ch; }
  .about-banner .about-lead .dim { color: var(--muted); }
  .about-split { grid-template-columns: 1fr; margin-top: 24px; }
}

/* Projekt-Übersicht: Abschluss mit Foto, Text auf der hellen Wand */
.pi-cta-photo { position: relative; overflow: hidden; padding: 0; background: #E9E8E6; border-color: var(--line); aspect-ratio: 1672 / 941; }
.pi-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pi-cta-copy { position: absolute; top: 0; bottom: 0; left: 62%; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px clamp(28px, 3.5vw, 56px) 32px 0; }
.pi-cta-photo .section-title { color: #14161A; font-size: clamp(1.5rem, 2.25vw, 2.35rem); line-height: 1.14; }
.pi-cta-photo .section-cta { margin-top: clamp(20px, 2.4vw, 32px); }
.pi-cta-photo .section-title .dim { color: #5B606A; }
.pi-cta-photo .section-cta { flex-direction: column; align-items: flex-start; }
.pi-cta-photo .section-cta p { color: #4A4F58; }
.pi-cta-photo .text-link { color: #2A4CC0; border-color: rgb(42 76 192 / 0.4); }
@media (max-width: 1023px) {
  .pi-cta-photo { aspect-ratio: auto; background: none; border: 0; border-radius: 0; }
  .pi-cta-img { position: static; aspect-ratio: 4 / 3; object-position: 22% 50%; border-radius: var(--r-lg); border: 1px solid var(--line); }
  .pi-cta-copy { position: static; width: auto; padding: 28px 0 0; }
  .pi-cta-photo .section-title { color: var(--text); font-size: clamp(1.55rem, 3.6vw, 2.3rem); }
  .pi-cta-photo .section-title .dim { color: var(--muted); }
  .pi-cta-photo .section-cta p { color: var(--muted); }
  .pi-cta-photo .text-link { color: var(--accent-hi); border-color: currentColor; }
}

/* Über-Seiten: Personenseite (luca-roehrl/) und Agentur (agentur/) */
.pp-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.pp-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.pp-title { margin-top: 28px; font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.03; letter-spacing: -0.04em; max-width: 14ch; }
.pp-title .dim { display: block; }
.pp-lead { margin-top: 28px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 50ch; }
.pp-portrait { margin: 0; }
.pp-portrait-frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); border: 1px solid var(--line); }
.pp-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.page-agency .pp-portrait-frame img { object-position: 40% 30%; }
.pp-facts { margin-top: clamp(48px, 6vw, 72px); }
.pp-facts a { color: var(--accent-hi); text-decoration: none; }
.pp-facts a:hover { text-decoration: underline; }

.pp-story { padding-block: var(--section); }
.pp-story-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.pp-story-text .section-title { margin-bottom: 32px; }
.pp-story-text p { color: var(--text-2); font-size: clamp(1.02rem, 1.2vw, 1.12rem); max-width: 58ch; }
.pp-story-text p + p { margin-top: 18px; }
.pp-story-photo { margin: 0; }
.pp-story-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 20%; border-radius: var(--r-lg); border: 1px solid var(--line); }
.pp-story-photo figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* Werte: 2x2, erste Fläche Navy (gleiche Sprache wie "Das passt gut") */
.pp-values { padding-block: var(--section); }
.pp-values-grid { margin-top: 56px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; }
.pp-value { padding: clamp(28px, 3.5vw, 44px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-raise); }
.pp-value:nth-child(3) { grid-column: 2; grid-row: 2; }
.pp-value:nth-child(4) { grid-column: 1; grid-row: 2; }
.pp-value h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; }
.pp-value p { margin-top: 12px; color: var(--text-2); max-width: 46ch; }
.pp-value-lead {
  background: radial-gradient(120% 140% at 0% 0%, #1A3170 0%, var(--navy) 45%, var(--navy-deep) 100%);
  border-color: rgb(143 174 255 / 0.14);
}
.pp-value-lead h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.pp-value-lead p { color: var(--text); font-size: clamp(1.05rem, 1.3vw, 1.18rem); }

.pp-more { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.about-body .pp-more { margin-top: 28px; }

.pp-quotes { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.pp-quotes-grid { margin-top: 56px; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.pp-quotes .quote-feature { margin: 0; }

/* Profile im Netz: vier gleichwertige Kacheln */
.pp-links { padding-block: var(--section) 0; }
.pp-links-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pp-links-grid a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  height: 100%; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  color: var(--text); text-decoration: none; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pp-links-grid a:hover { border-color: rgb(143 174 255 / 0.4); transform: translateY(-2px); }
.pp-links-grid .icon { grid-row: span 2; width: 28px; height: 28px; color: var(--accent-hi); }
.pp-links-grid strong { font-weight: 600; }
.pp-links-grid span { color: var(--muted); font-size: 15px; }

/* Agentur: Leistungen als zweispaltige Liste */
.pp-services { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.pp-service-list { margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); }
.pp-service-list div { padding-block: 24px; border-top: 1px solid var(--line); }
.pp-service-list dt { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.pp-service-list dd { margin: 6px 0 0; color: var(--text-2); }
.pp-service-list div:last-child { grid-column: 1 / -1; }
.pp-team div { grid-template-columns: 130px 1fr; }
.pp-founder .about-photo img { aspect-ratio: 4 / 5; object-position: 50% 20%; }

@media (max-width: 960px) {
  .pp-hero-grid, .pp-story-grid, .pp-quotes-grid { grid-template-columns: 1fr; }
  .pp-portrait { max-width: 440px; }
  .pp-story-photo { max-width: 520px; }
  .pp-links-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .pp-values-grid, .pp-service-list { grid-template-columns: 1fr; }
  .pp-value:nth-child(n) { grid-column: auto; grid-row: auto; }
  .pp-links-grid { grid-template-columns: 1fr; }
  .pp-team div { grid-template-columns: 110px 1fr; }
}
.about-name { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.about-name:hover { text-decoration-color: var(--accent-hi); }

/* ---------- Wissen & Ressourcen (wissen/, wissen/<slug>/) ----------
   Redaktioneller Bereich im selben dunklen System: gleiche Tokens, Radien 18/12/10 px, Buttons rund.
   Lesetext max. 68 Zeichen breit, Inhaltsverzeichnis am Desktop klebend links, mobil aufklappbar. */
.page-article .nav a[href$="wissen/"], .page-knowledge .nav a[href$="wissen/"] { color: var(--text); font-weight: 550; }
.page-article .nav a[href$="wissen/"]::after, .page-knowledge .nav a[href$="wissen/"]::after { transform: scaleX(1); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14.5px; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.crumbs a { color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--muted); }

/* Artikel: Kopf */
.art-hero { padding: clamp(32px, 5vw, 72px) 0 0; }
.art-kat { margin-top: 32px; }
.art-kat a {
  display: inline-flex; padding: 5px 14px; border-radius: 999px; text-decoration: none;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.04em;
  border: 1px solid rgb(143 174 255 / 0.4); color: var(--accent-hi); background: rgb(143 174 255 / 0.07);
  transition: background-color 0.2s;
}
.art-kat a:hover { background: rgb(143 174 255 / 0.14); }
.art-title { margin-top: 20px; font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 21ch; }
.art-lead { margin-top: 24px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 60ch; }
.art-byline { margin-top: 32px; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.art-byline .avatar { width: 46px; height: 46px; object-position: 44% 22%; }
.art-byline p { display: grid; gap: 2px; }
.art-byline a { color: var(--text); font-weight: 550; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.art-byline a:hover { border-color: var(--text); }
.art-cover { margin: clamp(40px, 5vw, 64px) 0 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.art-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Artikel: Raster mit Inhaltsverzeichnis */
.art-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); padding-block: clamp(56px, 7vw, 96px) var(--section); }
.art-aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: grid; gap: 28px; }
.art-toc-title { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.art-toc ol, .art-toc-mobile ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.art-toc a, .art-toc-mobile a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--text-2); text-decoration: none; font-size: 14.5px; line-height: 1.4; transition: color 0.2s, border-color 0.2s;
}
.art-toc a:hover, .art-toc-mobile a:hover { color: var(--text); }
.art-toc a.is-active { color: var(--text); border-left-color: var(--accent-hi); }
.art-aside-cta { padding: 20px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgb(26 49 112 / 0.6), rgb(13 24 52 / 0.5)); border: 1px solid rgb(143 174 255 / 0.16); }
.art-aside-cta p { font-size: 15px; color: var(--text-2); margin-bottom: 14px; line-height: 1.45; }
.art-toc-mobile { display: none; }

/* Artikel: Lesetext */
.art-body { max-width: 720px; min-width: 0; }
.art-body > section, .art-body > .art-block { margin-top: clamp(48px, 6vw, 72px); }
.art-body > .art-summary { margin-top: 0; }
.art-body h2 { font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.03em; scroll-margin-top: calc(var(--header-h) + 24px); }
.art-body h3 { margin-top: 36px; font-size: 1.22rem; letter-spacing: -0.02em; }
.art-body h2 + p, .art-body h3 + p { margin-top: 16px; }
.art-body p { color: var(--text-2); font-size: 17.5px; line-height: 1.7; }
.art-body p + p { margin-top: 16px; }
.art-body strong { color: var(--text); font-weight: 600; }
.art-body p a, .art-body li a, .art-body td a { color: var(--accent-hi); text-decoration: underline; text-decoration-color: rgb(143 174 255 / 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.art-body p a:hover, .art-body li a:hover, .art-body td a:hover { text-decoration-color: var(--accent-hi); }
.art-body ul.art-list, .art-body ol.art-olist { margin-top: 18px; display: grid; gap: 10px; color: var(--text-2); font-size: 17px; }
.art-body ul.art-list li { position: relative; padding-left: 24px; }
.art-body ul.art-list li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-hi); opacity: 0.8; }
.art-body ol.art-olist { counter-reset: ol; }
.art-body ol.art-olist li { position: relative; padding-left: 36px; counter-increment: ol; }
.art-body ol.art-olist li::before { content: counter(ol); position: absolute; left: 0; top: 0.1em; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--accent-hi); border: 1px solid rgb(143 174 255 / 0.4); }
.art-body > * + .art-list, .art-body > * + .art-olist { margin-top: 18px; }

/* Kurz gesagt: die direkte Antwort ganz oben */
.art-summary { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, #1A3170 0%, var(--navy) 45%, var(--navy-deep) 100%); border: 1px solid rgb(143 174 255 / 0.18); }
.art-summary h2 { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hi); }
.art-summary p { margin-top: 12px; color: var(--text); font-size: clamp(1.08rem, 1.4vw, 1.2rem); line-height: 1.6; }

/* Begriff erklärt */
.art-def { margin: 28px 0 0; padding: 22px 24px; border-radius: var(--r-md); background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--accent-hi); }
.art-def dt { font-weight: 600; color: var(--text); font-size: 1.05rem; }
.art-def dt span { margin-left: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.art-def dd { margin: 8px 0 0; color: var(--text-2); }
.art-def dd + dt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Tabellen: am Handy waagerecht scrollbar, Kopfspalte bleibt stehen */
.art-table-wrap { margin-top: 28px; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-raise); -webkit-overflow-scrolling: touch; }
.art-table-wrap:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.art-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; }
.art-table caption { caption-side: bottom; text-align: left; padding: 12px 18px 14px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); }
.art-table th, .art-table td { padding: 14px 18px; text-align: left; vertical-align: top; }
.art-table thead th { font-weight: 600; color: var(--text); background: var(--surface); border-bottom: 1px solid var(--line-strong); font-size: 14.5px; }
.art-table tbody th { font-weight: 550; color: var(--text); width: 30%; }
.art-table td { color: var(--text-2); }
.art-table tbody tr + tr > * { border-top: 1px solid var(--line); }

/* Checkliste */
.art-check { margin-top: 24px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 14px; }
.art-check-title { font-weight: 600; color: var(--text) !important; font-size: 1.05rem !important; }
.art-check ul { display: grid; gap: 12px; }
.art-check li { position: relative; padding-left: 34px; color: var(--text-2); }
.art-check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgb(143 174 255 / 0.5); background: rgb(143 174 255 / 0.08); }
.art-check li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 6px; height: 10px; border: solid var(--accent-hi); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.art-check li strong { color: var(--text); }

/* Hinweis */
.art-note { margin-top: 28px; padding: 22px 24px; border-radius: var(--r-md); background: rgb(143 174 255 / 0.06); border: 1px solid rgb(143 174 255 / 0.2); }
.art-note-title { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hi) !important; margin-bottom: 8px; }
.art-note p { font-size: 16.5px; }

/* Kennzahlen-Kacheln (z. B. Grenzwerte der Core Web Vitals) */
.art-keyfacts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.art-keyfacts div { padding: 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.art-keyfacts dt { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--accent-hi); letter-spacing: 0.04em; }
.art-keyfacts dd { margin: 0; }
.art-keyfacts .kf-value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; }
.art-keyfacts .kf-label { color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* Vergleich in zwei Spalten */
.art-compare { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.art-compare > div { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.art-compare > div:last-child { background: linear-gradient(160deg, rgb(26 49 112 / 0.5), rgb(13 24 52 / 0.35) 60%, var(--surface)); border-color: rgb(143 174 255 / 0.18); }
.art-compare h3 { margin: 0 0 14px; font-size: 1.12rem; }
.art-compare ul { display: grid; gap: 10px; }
.art-compare li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.art-compare li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong); }
.art-compare > div:last-child li::before { background: var(--accent-hi); }

/* Schritte */
.art-steps { margin-top: 28px; counter-reset: as; display: grid; gap: 0; }
.art-steps > li { counter-increment: as; position: relative; padding: 0 0 28px 60px; }
.art-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 1px; background: var(--line-strong); opacity: 0.6; }
.art-steps > li::before { content: counter(as); position: absolute; left: 0; top: 0; width: 39px; height: 39px; border-radius: 999px; display: grid; place-items: center; font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); }
.art-steps h3 { margin-top: 6px; font-size: 1.15rem; }
.art-steps p { margin-top: 8px !important; font-size: 16.5px; }

/* Bild im Text */
.art-figure { margin: 32px 0 0; }
.art-figure img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); aspect-ratio: 16 / 9; object-fit: cover; }
.art-figure figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* CTA mitten im Text */
.art-inline-cta { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 24px 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-raise); }
.art-inline-cta p { font-size: 16.5px; max-width: 42ch; }
.art-inline-cta p strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }

/* FAQ, Quellen, Autor */
.art-faq .faq-list { margin-top: 24px; }
.art-sources ol { margin-top: 20px; display: grid; gap: 12px; counter-reset: q; }
.art-sources li { counter-increment: q; position: relative; padding-left: 36px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.art-sources li::before { content: counter(q); position: absolute; left: 0; top: 1px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--muted); }
.art-sources li a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.art-sources li a:hover { color: var(--text); }
.art-sources li span { display: block; font-size: 13.5px; }
.art-stand { margin-top: 24px !important; font-size: 14.5px !important; color: var(--muted) !important; }
.art-author { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.art-author img { width: 120px; height: 150px; object-fit: cover; object-position: 44% 22%; border-radius: var(--r-md); }
.art-author-name { color: var(--text) !important; font-weight: 600; font-size: 1.12rem !important; }
.art-author-role { font-size: 14.5px !important; color: var(--muted) !important; margin: 2px 0 12px !important; }
.art-author p:not(.art-author-name):not(.art-author-role) { font-size: 15.5px; }
.art-author .text-link { margin-top: 14px; }

/* Karten (Übersicht und „Weiterlesen“) */
.wk-media { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.wk-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.9s var(--ease); }
.wk-card:hover .wk-media img, .wk-feature:hover .wk-media img { transform: scale(1.025); }
.wk-kat { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-hi); }
.wk-kat span { color: var(--line-strong); }
.wk-name { margin-top: 10px; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.22; letter-spacing: -0.02em; }
.wk-name a { color: inherit; text-decoration: none; transition: color 0.2s; }
.wk-name a::after { content: ""; position: absolute; inset: 0; }
.wk-card, .wk-feature { position: relative; }
.wk-name a:hover { color: var(--accent-hi); }
.wk-teaser { margin-top: 12px; color: var(--text-2); max-width: 54ch; }
.wk-more { margin-top: 18px; }
.wk-card-body { margin-top: 22px; }
.wk-card-mini .wk-name { font-size: 1.15rem; }
.wk-card-mini .wk-teaser { font-size: 15.5px; }
.wk-card-mini .wk-media img { aspect-ratio: 16 / 9; }

/* Übersicht */
.wk-hero { padding: clamp(32px, 5vw, 72px) 0 0; }
.wk-hero-grid { margin-top: 28px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.wk-title { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.03; letter-spacing: -0.04em; max-width: 14ch; }
.wk-title .dim { display: block; }
.wk-lead { color: var(--text-2); font-size: clamp(1.05rem, 1.3vw, 1.18rem); max-width: 46ch; }
.wk-filter { margin-top: clamp(36px, 4vw, 52px); display: flex; flex-wrap: wrap; gap: 8px; }
.wk-filter[hidden] { display: none; }
.wk-chip {
  min-height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--text-2);
  background: transparent; border: 1px solid var(--line-strong);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.wk-chip:hover { color: var(--text); border-color: var(--text-2); }
.wk-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--accent-hi); color: var(--text); }
.wk-list { padding: clamp(40px, 5vw, 64px) 0 var(--section); }
.wk-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.wk-feature .wk-media img { aspect-ratio: 4 / 3; }
.wk-feature .wk-card-body { margin-top: 0; }
.wk-feature .wk-name { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.wk-feature .wk-teaser { font-size: clamp(1.05rem, 1.25vw, 1.15rem); margin-top: 16px; }
.wk-grid { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(56px, 7vw, 88px); align-items: start; }
.wk-grid > .wk-card:nth-child(even) { margin-top: 88px; }
.wk-grid > .wk-card:nth-child(odd):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.wk-grid > .wk-card:nth-child(odd):last-child .wk-card-body { margin-top: 0; }
.wk-list [hidden] { display: none !important; }
.wk-list.is-filtered .wk-grid { margin-top: 0; }
.wk-list.is-filtered .wk-grid > .wk-card { margin-top: 0 !important; }
.wk-empty { color: var(--muted); }

.wk-topics { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.wk-topic-list { margin-top: 56px; border-top: 1px solid var(--line); }
.wk-topic { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 5vw, 80px); padding-block: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.wk-topic h3 { font-size: 1.35rem; }
.wk-topic p { margin-top: 8px; color: var(--muted); max-width: 44ch; }
.wk-topic ul { display: grid; gap: 6px; align-content: start; }
.wk-topic li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); font-weight: 500; transition: border-color 0.2s, background-color 0.2s; }
.wk-topic li a .icon { color: var(--accent-hi); transition: transform 0.3s var(--ease); }
.wk-topic li a:hover { border-color: var(--line-strong); background: var(--surface-2); }
.wk-topic li a:hover .icon { transform: translateX(3px); }

.wk-about { padding-block: var(--section); }
.wk-about-grid { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.wk-about-photo { margin: 0; }
.wk-about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 44% 22%; border-radius: var(--r-lg); border: 1px solid var(--line); }
.wk-principles { margin: 32px 0 28px; display: grid; gap: 14px; max-width: 62ch; }
.wk-principles li { color: var(--text-2); padding-left: 18px; border-left: 2px solid rgb(143 174 255 / 0.4); }
.wk-principles strong { color: var(--text); font-weight: 600; }

.art-related { padding-block: var(--section); background: var(--bg-raise); border-block: 1px solid var(--line); }
.art-related-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); align-items: start; }
.art-related-grid > .wk-card:nth-child(2) { margin-top: 48px; }

@media (max-width: 1023px) {
  .art-layout { grid-template-columns: 1fr; padding-top: 40px; }
  .art-aside { display: none; }
  .art-body { max-width: none; }
  .art-toc-mobile { display: block; margin-bottom: 32px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-raise); }
  .art-toc-mobile summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; font-weight: 550; }
  .art-toc-mobile summary::-webkit-details-marker { display: none; }
  .art-toc-mobile summary .icon { color: var(--muted); transition: transform 0.3s var(--ease); }
  .art-toc-mobile[open] summary .icon { transform: rotate(45deg); color: var(--accent-hi); }
  .art-toc-mobile ol { margin: 0 18px 16px; }
  .wk-hero-grid, .wk-feature, .wk-topic, .wk-about-grid { grid-template-columns: 1fr; }
  .wk-feature .wk-card-body { margin-top: 4px; }
  .wk-about-photo { max-width: 320px; }
  .art-related-grid { grid-template-columns: 1fr 1fr; }
  .art-related-grid > .wk-card:nth-child(2) { margin-top: 0; }
  .art-related-grid > .wk-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .art-cover img { aspect-ratio: 4 / 3; }
  .art-body p { font-size: 16.5px; }
  .art-keyfacts, .art-compare { grid-template-columns: 1fr; }
  .art-inline-cta { padding: 22px; }
  .art-inline-cta .btn { width: 100%; }
  .art-author { grid-template-columns: 1fr; }
  .art-author img { width: 96px; height: 120px; }
  .art-steps > li { padding-left: 52px; }
  .wk-grid { grid-template-columns: 1fr; }
  .wk-grid > .wk-card:nth-child(even) { margin-top: 0; }
  .wk-grid > .wk-card:nth-child(odd):last-child { display: block; }
  .wk-grid > .wk-card:nth-child(odd):last-child .wk-card-body { margin-top: 22px; }
  .art-related-grid { grid-template-columns: 1fr; }
  .wk-topic li a { border-radius: var(--r-md); }
}
/* Footer: Profile im Netz (LinkedIn, Instagram, Google-Unternehmensprofil) */
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.footer-social a:hover { color: var(--text); border-color: var(--text-2); background: var(--surface); }
.footer-social .icon { width: 20px; height: 20px; }
.art-body code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.art-keyfacts dd { display: flex; flex-direction: column; gap: 6px; }
.art-keyfacts .kf-value { font-size: clamp(1.35rem, 2vw, 1.75rem); white-space: nowrap; }
/* Tabellen am Handy: jede Zeile als Karte, Spaltenname aus data-label */
@media (max-width: 600px) {
  .art-table-wrap { overflow: visible; background: none; border: 0; }
  .art-table { min-width: 0; }
  .art-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .art-table, .art-table tbody, .art-table tr, .art-table th, .art-table td { display: block; width: auto; }
  .art-table tbody { display: grid; gap: 10px; }
  .art-table tr { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-raise); overflow: hidden; }
  .art-table tbody tr + tr > * { border-top: 0; }
  .art-table tbody th { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .art-table td { padding: 10px 16px; }
  .art-table td + td { border-top: 1px solid var(--line); }
  .art-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .art-table caption { display: block; border: 0; padding: 10px 2px 0; }
}
@media (max-width: 600px) { .art-table tbody th { width: auto; } }

/* Ratgeber-Block auf Orts-, Profil- und Agenturseite: verlinkt Artikel aus Wissen & Ressourcen */
.guides { padding-block: var(--section); }
.guides-raise { background: var(--bg-raise); border-block: 1px solid var(--line); }
.guides-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.guides-head { position: sticky; top: calc(var(--header-h) + 40px); }
.guides-head .text-link { margin-top: 28px; }
.guide-list { display: grid; gap: 10px; }
.guide-list a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center;
  padding: 18px 22px; border-radius: var(--r-lg); text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); transition: border-color 0.2s, background-color 0.2s;
}
.guide-list a:hover { border-color: var(--line-strong); background: var(--surface-2); }
.guide-kat { grid-column: 1; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-hi); }
.guide-name { grid-column: 1; margin-top: 4px; font-size: 1.08rem; font-weight: 550; letter-spacing: -0.015em; line-height: 1.35; }
.guide-list .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--accent-hi); transition: transform 0.3s var(--ease); }
.guide-list a:hover .icon { transform: translateX(4px); }
@media (max-width: 960px) {
  .guides-grid { grid-template-columns: 1fr; }
  .guides-head { position: static; }
}