/* =========================================================
   Dienstleistungen Wagner
   Farbe, Typografie, Raster, Komponenten
   ========================================================= */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Marke.
     Der Rotton stammt vom Flyer (CMYK 0/85/98/0). Die Helligkeit ist so gesetzt,
     dass weiße Schrift darauf 4,6:1 erreicht und der Ton auf hellem Grund 4,4:1.
     Kleine Schrift auf Weiß nutzt deshalb --red-700 oder --red-800. */
  --red:        oklch(0.585 0.205 34);
  --red-700:    oklch(0.500 0.185 33);
  --red-800:    oklch(0.470 0.155 32);
  --red-glow:   oklch(0.585 0.205 34 / 0.24);

  /* Neutral */
  --paper:      oklch(0.985 0.002 34);
  --surface:    oklch(0.952 0.005 34);
  --surface-2:  oklch(0.918 0.007 34);
  --line:       oklch(0.885 0.008 34);
  --ink:        oklch(0.205 0.014 34);
  --ink-2:      oklch(0.448 0.014 34);
  --coal:       oklch(0.175 0.010 34);
  --coal-2:     oklch(0.252 0.012 34);
  --coal-line:  oklch(0.325 0.014 34);

  /* Auf dunklem Grund */
  --on-coal:      oklch(0.955 0.004 34);
  --on-coal-2:    oklch(0.760 0.010 34);
  --on-red:       #fff;
  /* Auf Rot wird keine getönte Schrift verwendet, sonst reicht der Kontrast
     bei kleinen Größen nicht. Hierarchie entsteht über Gewicht und Größe. */
  --on-red-2:     #fff;

  /* Typo */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-mark:    'Anton', 'Archivo Narrow', 'Arial Narrow', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.33rem + 0.82vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.62vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.9vw, 4.4rem);
  --step-5:  clamp(2.9rem, 2.1rem + 3.9vw, 5.25rem);

  /* Raum */
  --gutter:  clamp(1.5rem, 1rem + 2.2vw, 4rem);
  --measure: 68ch;
  --wrap:    1360px;
  --wrap-narrow: 880px;
  --sec-y:   clamp(4.5rem, 2.8rem + 7vw, 9.5rem);
  --sec-y-s: clamp(3rem, 2rem + 4.5vw, 6rem);

  /* Der Schnitt */
  --cut: clamp(1.5rem, 3.4vw, 4.4rem);

  /* Ebenen */
  --z-media: 1;
  --z-content: 2;
  --z-sticky: 60;
  /* Die Kopfzeile liegt ÜBER dem Menü-Overlay. Sonst verdeckt das Overlay den
     Schließen-Knopf und die Wortmarke, und das Menü lässt sich nicht mehr zu. */
  --z-drawer: 70;
  --z-nav: 80;
  --z-cookie: 90;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cut: cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele landen sonst unter der fixierten Kopfzeile */
  scroll-padding-top: clamp(5rem, 4rem + 2.8vw, 6.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-red :focus-visible, .on-coal :focus-visible { outline-color: #fff; }

/* Textmarkierung.
   Grundfall: roter Block, weiße Schrift. Auf hellen und auf dunklen Flächen
   ist das deutlich zu sehen.
   Auf roten Flächen wäre Rot auf Rot unsichtbar, dort markiert Anthrazit. */
::selection { background: var(--red); color: #fff; }

.on-red ::selection,
.on-red::selection,
.hero ::selection,
.drawer ::selection,
.review--accent ::selection,
.review--accent::selection,
.places li[data-home]::selection,
.mark__sub::selection,
.btn::selection,
.btn ::selection {
  background: var(--ink);
  color: #fff;
}

/* Innerhalb der anthrazitfarbenen Abschnitte bleibt es beim roten Block,
   auch für die Schaltflächen dort, die selbst rot sind. */
.on-coal .btn::selection,
.on-coal .btn ::selection,
.cookie .btn::selection,
.cookie .btn ::selection {
  background: var(--ink);
  color: #fff;
}

.skip {
  position: absolute; left: 0.5rem; top: -6rem; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
  font-weight: 700; transition: top 0.18s var(--ease-out);
}
.skip:focus { top: 0.5rem; }

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

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
  /* Deutsche Komposita werden an der Silbenfuge getrennt.
     Bewusst KEIN overflow-wrap: break-word. Das würde bei großen Graden
     mitten im Wort schneiden und einzelne Zeichen wie den Punkt am Satzende
     in die nächste Zeile werfen. Zu enge Kästen werden stattdessen breiter
     gemacht, der Prüflauf in _quellen/_test-audit.html meldet sie. */
  hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
  max-width: 100%;
}
h1.display { font-size: var(--step-5); }
h2.display { font-size: var(--step-4); }
h3 {
  font-size: var(--step-2); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.018em; text-wrap: balance;
  hyphens: auto; hyphenate-limit-chars: 10 5 4;
  overflow-wrap: break-word;
}

/* Textblock über einer Sektion. Begrenzung in rem, damit sie mit der
   Schriftgröße der Überschrift skaliert und mobil nie zu eng wird. */
.headblock { max-width: min(100%, 29rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.headblock--wide { max-width: min(100%, 40rem); }
.headblock > :last-child { margin-bottom: 0; }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.on-red .lead, .on-coal .lead { color: inherit; }

p { max-width: var(--measure); text-wrap: pretty; }

.meta {
  font-size: var(--step--1);
  font-weight: 650;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

strong, b { font-weight: 700; }

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

/* Raster- und Flexkinder dürfen nie breiter werden als ihre Spalte.
   Ohne min-width:0 gewinnt bei langen deutschen Komposita die min-content-Breite. */
.services > *, .svc, .svc > *, .steps > *, .proofs > *, .reviews > *,
.contact > *, .person > *, .foot__grid > *, .facts > *, .field-2 > * { min-width: 0; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--sec-y); position: relative; }
.section-s { padding-block: var(--sec-y-s); }

.on-coal { background: var(--coal); color: var(--on-coal); }
.on-red  { background: var(--red);  color: var(--on-red); }
.on-surface { background: var(--surface); }

/* Der Schnitt: Kante läuft schräg, nicht perfekt gerade */
.cut-top {
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--sec-y) + var(--cut));
}
.cut-top-rev {
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--sec-y) + var(--cut));
}
.cut-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-bottom: calc(var(--sec-y) + var(--cut));
}
.cut-both {
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--sec-y) + var(--cut));
  padding-bottom: calc(var(--sec-y) + var(--cut));
}

/* ---------- Der rote Balken ---------- */
.bar {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  letter-spacing: 0.01em;
  padding: 0.3em 0.62em 0.36em;
  transform: skewX(-4deg);
}
.bar > span { display: inline-block; transform: skewX(4deg); }

.rule {
  height: 5px;
  width: clamp(56px, 8vw, 104px);
  background: var(--red);
  transform: skewX(-24deg);
  margin-bottom: 1.6rem;
  transform-origin: left center;
}
.on-red .rule, .on-coal .rule { background: #fff; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  padding: 0.95em 1.6em;
  font-weight: 750;
  font-size: var(--step-0);
  font-variation-settings: 'wdth' 100;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.28s var(--ease-out), border-color 0.28s var(--ease-out),
              background-color 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--ease-cut);
}
.btn:hover { border-color: var(--ink); color: #fff; }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--paper); }

.on-red .btn {
  --btn-bg: #fff;
  --btn-fg: var(--red-700);
  border-color: #fff;
}
.on-red .btn::before { background: var(--ink); }
.on-red .btn:hover { color: #fff; border-color: var(--ink); }

.on-red .btn-ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: color-mix(in oklab, #fff 62%, transparent);
}
.on-red .btn-ghost::before { background: #fff; }
.on-red .btn-ghost:hover { color: var(--red-700); border-color: #fff; }

.on-coal .btn { --btn-bg: var(--red); --btn-fg: #fff; border-color: var(--red); }
.on-coal .btn::before { background: #fff; }
.on-coal .btn:hover { color: var(--coal); border-color: #fff; }

.btn .arw { transition: transform 0.34s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Textlink */
.tlink {
  color: var(--red-800);
  text-decoration: none;
  font-weight: 650;
  display: inline-block;
  padding-block: 0.22em;
  box-shadow: inset 0 -2px 0 0 color-mix(in oklab, var(--red) 45%, transparent);
  transition: box-shadow 0.24s var(--ease-out), color 0.24s var(--ease-out);
}
.tlink:hover { box-shadow: inset 0 -0.75em 0 0 color-mix(in oklab, var(--red) 22%, transparent); }
.on-coal .tlink, .on-red .tlink { color: inherit; box-shadow: inset 0 -2px 0 0 color-mix(in oklab, #fff 55%, transparent); }
.on-coal .tlink:hover, .on-red .tlink:hover { box-shadow: inset 0 -0.75em 0 0 color-mix(in oklab, #fff 22%, transparent); }

/* ---------- Wortmarke ---------- */
.mark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  line-height: 1;
  /* Wächst mit dem Fenster. Auf dem Handy kompakt, am Schreibtisch deutlich
     präsenter, weil die Wortmarke dort die Marke trägt. */
  --mark-size: clamp(1.5rem, 1.05rem + 1.25vw, 2.15rem);
}
.mark__name {
  font-family: var(--font-mark);
  font-size: var(--mark-size);
  letter-spacing: 0.012em;
  color: var(--red);
  text-transform: uppercase;
  padding-inline: 0.06em;
  transition: color 0.25s var(--ease-out);
}
.mark__sub {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-variation-settings: 'wdth' 78;
  font-size: calc(var(--mark-size) * 0.395);
  letter-spacing: 0.005em;
  text-align: center;
  padding: 0.22em 0.3em 0.28em;
  margin-top: 0.06em;
  transition: background-color 0.25s var(--ease-out);
}
.mark--light .mark__name { color: #fff; }
.mark--light .mark__sub { background: #fff; color: var(--red-700); }
.mark--onred .mark__name { color: #fff; }
.mark--onred .mark__sub { background: var(--ink); color: #fff; }

/* ---------- Kopfzeile ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  /* Kurz und trocken. Eine lange Kurve fühlt sich beim Scrollen an,
     als würde die Leiste hinterherziehen. */
  transition: transform 0.26s var(--ease-out), background-color 0.2s linear,
              box-shadow 0.2s linear;
  will-change: transform;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Knapper als vorher, damit die größere Wortmarke die Leiste nicht aufbläht */
  padding-block: clamp(0.6rem, 0.45rem + 0.45vw, 0.9rem);
}
/* Deckend statt durchscheinend: bleibt über Foto, Rot und Schwarz gleich lesbar
   und spart die Compositing-Last eines Backdrop-Filters auf schwachen Geräten. */
.nav[data-solid='true'] {
  background: var(--paper);
  box-shadow: 0 1px 0 0 var(--line);
}
.nav[data-hidden='true'] { transform: translateY(-102%); }

.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 2rem); }
.nav__link {
  text-decoration: none;
  font-weight: 640;
  font-size: 0.97rem;
  font-variation-settings: 'wdth' 96;
  padding: 0.35rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0) skewX(-24deg);
  transform-origin: left center;
  transition: transform 0.34s var(--ease-cut);
}
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1) skewX(-24deg); }

/* Etwas kompakter als die Schaltflächen im Inhalt, sonst bestimmt der Knopf
   die Höhe der Kopfzeile statt der Wortmarke */
.nav__cta { display: none; padding: 0.8em 1.35em; font-size: 1rem; }
.nav__tel {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; font-weight: 750; white-space: nowrap;
}

/* Helle Kopfzeile: über dem roten Hero und über dem geöffneten Menü.
   Beide Fälle liegen auf Rot, deshalb dieselbe Behandlung. */
.nav[data-over-hero][data-solid='false'],
.nav[data-menu='open'] { background: transparent; box-shadow: none; }

.nav[data-over-hero][data-solid='false'] .mark__name,
.nav[data-menu='open'] .mark__name { color: #fff; }

.nav[data-over-hero][data-solid='false'] .mark__sub,
.nav[data-menu='open'] .mark__sub { background: var(--ink); color: #fff; }

.nav[data-over-hero][data-solid='false'] .nav__link,
.nav[data-menu='open'] .nav__link { color: #fff; }

.nav[data-over-hero][data-solid='false'] .nav__link::after,
.nav[data-menu='open'] .nav__link::after { background: #fff; }

.nav[data-over-hero][data-solid='false'] .btn,
.nav[data-menu='open'] .btn {
  --btn-bg: #fff; --btn-fg: var(--red-700); border-color: #fff;
}
.nav[data-over-hero][data-solid='false'] .btn::before,
.nav[data-menu='open'] .btn::before { background: var(--ink); }
.nav[data-over-hero][data-solid='false'] .btn:hover,
.nav[data-menu='open'] .btn:hover { color: #fff; border-color: var(--ink); }

.nav[data-over-hero][data-solid='false'] .burger,
.nav[data-menu='open'] .burger { background: #fff; }
.nav[data-over-hero][data-solid='false'] .burger span,
.nav[data-over-hero][data-solid='false'] .burger span::before,
.nav[data-over-hero][data-solid='false'] .burger span::after,
.nav[data-menu='open'] .burger span,
.nav[data-menu='open'] .burger span::before,
.nav[data-menu='open'] .burger span::after { background: var(--red); }

.burger[aria-expanded='true'] span,
.nav[data-over-hero][data-solid='false'] .burger[aria-expanded='true'] span,
.nav[data-menu='open'] .burger[aria-expanded='true'] span { background: transparent; }

.nav[data-over-hero][data-solid='false'] :focus-visible,
.nav[data-menu='open'] :focus-visible { outline-color: #fff; }

/* Bei offenem Menü bleibt die Kopfzeile stehen */
.nav[data-menu='open'] { transform: none !important; }

.burger {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--ink); border: 0; cursor: pointer;
  padding: 0;
}
.burger span {
  display: block; width: 20px; height: 2px; background: #fff;
  position: relative;
  transition: background-color 0.2s linear;
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: #fff;
  transition: transform 0.32s var(--ease-out);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--red);
  display: grid;
  align-content: center;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-cut);
  overflow-y: auto;
}
.drawer[data-open='true'] { transform: translateY(0); }
.drawer__list { display: grid; gap: 0.15rem; }
.drawer__link {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-variation-settings: 'wdth' 108;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.16;
  padding: 0.18em 0;
}
.drawer__foot { margin-top: 2.5rem; display: grid; gap: 0.9rem; color: #fff; }
.drawer__foot a { font-weight: 750; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--red);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: relative;
  z-index: var(--z-media);
  aspect-ratio: 4 / 3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut)));
}
/* picture braucht eine eigene Höhe, sonst löst height:100% am Bild zu auto auf
   und object-fit greift nicht. Das Bild hinge dann oben fest. */
.hero__media picture { display: block; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 40%; }
@media (min-width: 34rem) and (max-width: 61.99rem) {
  .hero__media { aspect-ratio: 16 / 9; }
}
/* Dunkler Anlauf oben, damit die Kopfzeile über dem Foto lesbar bleibt */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    oklch(0.175 0.010 34 / 0.58) 0,
    oklch(0.175 0.010 34 / 0.24) 12%,
    oklch(0.175 0.010 34 / 0) 30%);
}
.hero__body {
  position: relative;
  z-index: var(--z-content);
  padding-inline: var(--gutter);
  padding-block: clamp(2.25rem, 1.4rem + 3.6vw, 4rem) clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
}
.hero h1 { margin-bottom: 1.2rem; }
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.48;
  max-width: 40ch;
  color: var(--on-red-2);
  margin-bottom: clamp(1.6rem, 3vw, 2.3rem);
  text-wrap: pretty;
}
.hero .btn-row { margin-bottom: clamp(2rem, 4vw, 3rem); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 1px;
  background: color-mix(in oklab, #fff 30%, transparent);
  border-block: 1px solid color-mix(in oklab, #fff 30%, transparent);
}
.facts > li { background: var(--red); padding: 0.95rem 1.05rem 1.05rem; }
.facts dt {
  font-size: 0.76rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 84;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-red-2);
  margin-bottom: 0.28rem;
}
.facts dd { margin: 0; font-weight: 750; font-size: 1.02rem; line-height: 1.25; }
.facts .stars { color: #fff; letter-spacing: 0.06em; }

@media (min-width: 62rem) {
  /* --media-w ist die Breite der Bildfläche in vw. Die schräge Kante endet
     unten bei (100 - --media-w) vw. Beide Werte hängen zusammen und stehen
     deshalb an einer Stelle. */
  .hero { --media-w: 48; display: grid; grid-template-columns: 1fr; min-height: min(100svh, 880px); }
  .hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: calc(var(--media-w) * 1vw);
    aspect-ratio: auto;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  }
  /* Auf breiten Schirmen wird das Bild stark hochskaliert. 40 % hält die
     beiden Träger dabei in der Bildmitte statt sie nach unten wandern zu lassen. */
  .hero__media img { object-position: 56% 40%; }
  .hero__body {
    width: min(100% - var(--gutter) * 2, var(--wrap));
    margin-inline: auto;
    align-self: center;
    padding-inline: 0;
    padding-block: clamp(6.5rem, 10vh, 8rem) clamp(2.75rem, 5vh, 4rem);
  }
  /* Der Inhalt endet links der schrägen Kante, auch die Faktenkästen unten.
     (100vw - 100%) / 2 ist der linke Rand des zentrierten Rasters. */
  .hero__col, .hero .facts {
    max-width: min(41rem, calc((100 - var(--media-w)) * 1vw - 2rem - (100vw - 100%) / 2));
  }
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 80rem) {
  .hero { --media-w: 54; }
}

/* ---------- Ablauf ---------- */
.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Die Ziffer stand vorher absolut positioniert auf der Trennlinie und ragte
   halb darüber hinaus. Jetzt steht sie als eigene Zeile unter der Linie:
   Linie bleibt durchgehend, Ziffer bekommt Luft, Überschrift die volle Breite. */
.step { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.on-coal .step { border-top-color: var(--coal-line); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  font-family: var(--font-mark);
  font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.4rem);
  line-height: 1;
  color: var(--red);
  margin-bottom: 0.65rem;
  /* Anton setzt Ziffern mit linker Vorbreite, das schiebt sie optisch
     gegenüber der Überschrift nach rechts */
  margin-left: -0.04em;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--on-coal-2); max-width: 38ch; }

/* Nachsatz unter einer Aufzählung, deutlich abgesetzt */
.aside {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--coal-line);
  max-width: 62ch;
  color: var(--on-coal-2);
}
.section:not(.on-coal) .aside { border-top-color: var(--line); color: var(--ink-2); }

/* ---------- Leistungen ---------- */
.services { display: grid; gap: clamp(3.5rem, 6vw, 7rem); }

.svc {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.svc__media { position: relative; }
/* --focus setzt den Bildmittelpunkt je Motiv. Ohne das rutschen bei
   object-fit: cover die Köpfe aus dem Ausschnitt, vor allem mobil.
   Die Werte stehen am jeweiligen img im HTML, geprüft mit
   _quellen/_crop-check.py. */
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  aspect-ratio: 4 / 3;
}
/* Hochformat-Quellen behalten auch mobil ein hochformatiges Fenster.
   In einem 4:3-Kasten wäre von der Person nur noch der Rumpf übrig. */
.svc--tall .svc__media img { aspect-ratio: 4 / 5; }
.svc__media::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: clamp(80px, 12vw, 150px);
  height: 8px;
  background: var(--red);
  transform: skewX(-24deg) translateX(3px);
}
.svc h3 { margin-bottom: 0.8rem; font-size: var(--step-3); font-weight: 800; font-variation-settings: 'wdth' 108; }
.svc p { margin-bottom: 1.4rem; max-width: 46ch; color: var(--ink-2); }

.tags { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.tags li {
  font-weight: 620;
  font-size: 0.98rem;
  font-variation-settings: 'wdth' 94;
  padding: 0.34rem 0;
  position: relative;
  padding-left: 1.05rem;
}
.tags li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.95em;
  width: 9px; height: 3px;
  background: var(--red);
  transform: skewX(-24deg);
}

@media (min-width: 56rem) {
  .svc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .svc--flip .svc__media { order: 2; }
}

.services-note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 2px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  justify-content: space-between;
}
.services-note p { font-size: var(--step-1); font-weight: 700; max-width: 30ch; letter-spacing: -0.015em; }
.services-note__file {
  margin-top: 0.75rem;
  font-size: var(--step-0) !important;
  font-weight: 500 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}
.services-note__file span { color: var(--ink-2); font-size: 0.85rem; }

/* ---------- Bildband ---------- */
.band { position: relative; overflow: hidden; }
.band img { width: 100%; height: clamp(180px, 26vw, 340px); object-fit: cover; }

/* ---------- Arbeitsproben ---------- */
.proofs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.proof { display: grid; gap: 0.85rem; }
.proof img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof figcaption {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-coal-2);
  padding-left: 0.95rem;
  border-left: 1px solid var(--coal-line);
  max-width: 34ch;
}
.proof--tall img { aspect-ratio: 3 / 4; }

/* ---------- Bewertungen ---------- */
.score {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.score__num {
  font-family: var(--font-mark);
  font-size: clamp(4.5rem, 12vw, 8.5rem);
  line-height: 0.78;
  color: var(--red);
  letter-spacing: -0.01em;
}
.score__meta { padding-bottom: 0.4rem; }
.score__stars { color: var(--red-800); font-size: 1.35rem; letter-spacing: 0.12em; line-height: 1; }
.score__meta p { margin-top: 0.5rem; max-width: 34ch; color: var(--ink-2); font-size: 0.98rem; }

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.review {
  background: var(--paper);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  align-content: start;
  gap: 0.9rem;
}
.review__stars { color: var(--red-800); letter-spacing: 0.1em; font-size: 0.95rem; line-height: 1; }
.review blockquote { font-size: 1.03rem; line-height: 1.52; font-weight: 500; }
.review blockquote p { max-width: none; }
.review figcaption { font-size: 0.88rem; color: var(--ink-2); font-weight: 640; }
.review--accent { background: var(--red); color: #fff; }
.review--accent .review__stars { color: #fff; }
.review--accent figcaption { color: var(--on-red-2); }

/* ---------- Person ---------- */
.person { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.person__media { position: relative; }
.person__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus, 50% 25%);
}
@media (min-width: 56rem) {
  .person { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}
.quote-big {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: min(100%, 26rem);
  margin-bottom: 1.5rem;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ---------- Gebiet ---------- */
.places { display: flex; flex-wrap: wrap; gap: 0.55rem 0.7rem; margin-top: 1.75rem; }
.places li {
  font-weight: 700;
  font-size: 0.95rem;
  font-variation-settings: 'wdth' 92;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--coal-line);
}
.places li[data-home] { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Kontakt ---------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 60rem) { .contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); } }

.contact-card { display: grid; gap: 1.6rem; }
.contact-row { display: grid; gap: 0.3rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-row dt {
  font-size: 0.76rem; font-weight: 700; font-variation-settings: 'wdth' 84;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
}
.contact-row dd { margin: 0; font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; }
.contact-row dd a {
  text-decoration: none;
  display: inline-block;
  padding-block: 0.28em;
  overflow-wrap: anywhere;
}
.contact-row dd a:hover { color: var(--red-800); }
.contact-row .small { font-size: var(--step-0); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 700; font-variation-settings: 'wdth' 92; letter-spacing: 0.01em; }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--paper);
  border: 2px solid var(--line);
  padding: 0.8rem 0.9rem;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--surface-2); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 4px var(--red-glow);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: 1; }
.field-2 { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) { .field-2 { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.consent input { width: 1.5rem; height: 1.5rem; margin-top: 0.06rem; accent-color: var(--red); flex: none; }
.consent label { max-width: 52ch; }
.consent a { display: inline-block; padding-block: 0.2em; }

.form-note {
  font-size: 0.88rem;
  color: var(--ink-2);
  border-left: 1px solid var(--line);
  padding-left: 0.9rem;
  max-width: 46ch;
}

/* ---------- Fußzeile ---------- */
.foot { background: var(--coal); color: var(--on-coal); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.foot h4 {
  font-size: 0.78rem; font-weight: 700; font-variation-settings: 'wdth' 84;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-coal-2);
  margin-bottom: 1rem;
}
.foot ul { display: grid; gap: 0.5rem; }
.foot a { text-decoration: none; }
.foot ul a { color: var(--on-coal-2); display: inline-block; padding-block: 0.15em; }
.foot a:hover { color: #fff; box-shadow: inset 0 -2px 0 0 var(--red); }
.foot__addr { font-style: normal; line-height: 1.7; color: var(--on-coal-2); }
.foot__addr strong { color: var(--on-coal); }
.foot__bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--coal-line);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--on-coal-2);
}

/* Agenturhinweis. Das Selinqo-Zeichen ist türkis und orange und würde neben
   dem Vermillon der Seite streiten. Deshalb liegt es im Ruhezustand entsättigt
   und zurückgenommen und bekommt seine Farben erst beim Überfahren. */
.credit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--on-coal-2);
  white-space: nowrap;
  padding-block: 0.2em;
}
.credit img {
  height: 1.5em;
  width: auto;
  filter: grayscale(1) brightness(1.75) opacity(0.5);
  transition: filter 0.28s var(--ease-out);
}
.credit__name { font-weight: 700; }
.foot a.credit:hover { color: #fff; box-shadow: none; }
.credit:hover img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .credit img { transition: none; }
}

/* ---------- Cookie-Hinweis ---------- */
.cookie {
  position: fixed;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  z-index: var(--z-cookie);
  max-width: 33rem;
  max-height: calc(100svh - var(--gutter) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--coal);
  color: var(--on-coal);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 5px solid var(--red);
  box-shadow: 0 18px 50px -12px rgb(0 0 0 / 0.45);
  transform: translateY(calc(100% + var(--gutter) + 5px));
  transition: transform 0.55s var(--ease-cut);
}
.cookie[data-open='true'] { transform: translateY(0); }
.cookie h2 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.cookie p { font-size: 0.9rem; line-height: 1.5; color: var(--on-coal-2); margin-bottom: 1rem; max-width: none; }
.cookie a { color: #fff; }
.cookie .btn { padding: 0.7em 1.05em; font-size: 0.93rem; }
.cookie .btn-row { gap: 0.6rem; }

.cookie__more { margin-top: 0.9rem; }
.cookie__more summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-coal-2);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0;
}
.cookie__more summary::-webkit-details-marker { display: none; }
.cookie__more summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform 0.22s var(--ease-out);
}
.cookie__more[open] summary::before { transform: rotate(90deg); }
.cookie__more summary:hover { color: #fff; }
.cookie__more .btn { width: 100%; justify-content: center; }

.cookie__opts { display: grid; gap: 0.6rem; margin: 0.7rem 0 0.9rem; }
.cookie__opt { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; }
.cookie__opt input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--red); flex: none; }
.cookie__opt input:disabled { opacity: 0.55; }
.cookie__opt span { color: var(--on-coal-2); }
.cookie__opt b { color: var(--on-coal); display: block; font-weight: 700; }
.cookie[hidden] { display: none; }

.cookie .btn { --btn-bg: var(--red); --btn-fg: #fff; border-color: var(--red); }
.cookie .btn::before { background: #fff; }
.cookie .btn:hover { color: var(--coal); border-color: #fff; }
.cookie .btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-coal);
  border-color: var(--coal-line);
}
.cookie .btn-ghost::before { background: #fff; }
.cookie .btn-ghost:hover { color: var(--coal); border-color: #fff; }

.cookie-reopen {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  font: inherit;
}

/* ---------- Rechtstexte ---------- */
.legal { padding-block: clamp(7.5rem, 14vh, 10rem) var(--sec-y); }
/* Eigener Grad: „Datenschutzerklärung" ist zu lang für die Hero-Skala */
.legal h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: var(--step-2); font-weight: 800; font-variation-settings: 'wdth' 106;
  letter-spacing: -0.02em; line-height: 1.15;
  margin-top: 3rem; margin-bottom: 1rem;
  overflow-wrap: break-word; hyphens: auto;
}
.legal h3 { font-size: var(--step-1); margin-top: 2rem; margin-bottom: 0.6rem; overflow-wrap: break-word; hyphens: auto; }
.legal a, .legal address a { overflow-wrap: anywhere; }
.legal .toc a { display: inline-block; padding-block: 0.2em; }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: 1rem; }
.legal ul { margin-top: 0.8rem; display: grid; gap: 0.4rem; }
.legal ul li { padding-left: 1.05rem; position: relative; max-width: var(--measure); }
.legal ul li::before {
  content: ''; position: absolute; left: 0; top: 0.82em;
  width: 8px; height: 2px; background: var(--red); transform: skewX(-24deg);
}
.legal address { font-style: normal; line-height: 1.75; }
.legal .toc { margin: 2rem 0 3rem; padding: 1.5rem; background: var(--surface); display: grid; gap: 0.45rem; }
.legal .toc a { font-weight: 640; text-decoration: none; box-shadow: inset 0 -1px 0 0 var(--line); }
.legal .toc a:hover { color: var(--red-800); box-shadow: inset 0 -1px 0 0 var(--red); }

/* Offene Angabe, muss vor dem Livegang gefüllt werden */
.todo {
  background: color-mix(in oklab, var(--red) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--red);
  color: var(--red-800);
  font-weight: 700;
  padding: 0.05em 0.4em;
}

/* ---------- Bewegung ---------- */
[data-reveal] {
  opacity: 1;
  transform: none;
}
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

html.js [data-reveal='wipe'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s var(--ease-cut);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal='wipe'].is-in { clip-path: inset(0 0 0 0); }

/* Läuft ohne JS und endet zuverlässig im Zielzustand */
.hero__media img { animation: heroEinzug 1.5s var(--ease-out) both; }
@keyframes heroEinzug {
  from { transform: scale(1.06); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal='wipe'] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero__media img { animation: none; transform: none; }
  .btn, .btn::before, .nav, .drawer, .cookie, .nav__link::after, .tlink { transition: none !important; }
}

/* ---------- Nav ab Tablet ---------- */
@media (max-width: 61.99rem) {
  .nav__links, .nav__cta { display: none; }
}
@media (min-width: 62rem) {
  .burger { display: none; }
  .drawer { display: none; }
  .nav__cta { display: inline-flex; }
}