/* =====================================================================
   jdzphotos.de — gemeinsames Stylesheet der öffentlichen Seiten
   (Start, Work, Über mich, Leistungen, Kontakt)

   Gestaltung nach dem Semesterprojekt „Abschluss-Website-Webpublishing",
   Fassung vom 29.09.2026 08:18 — Werte aus den dortigen SCSS-Dateien
   (_variables, _mixins, _base, _navbar, _hero, _components, _gallery,
   _footer), hier ohne Bootstrap und ohne Präprozessor nachgebaut.

   Kein Build-Schritt: diese Datei wird so ausgeliefert, wie sie hier steht.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --black: #000;
  --ink: #0a0a0a;            /* Seitenhintergrund */
  --surface: #111;           /* Panels, Karten */
  --surface-2: #1a1a1a;      /* Hover */
  --cream: #e1e0cc;
  --cream-rgb: 225, 224, 204;
  --cream-muted: rgba(225, 224, 204, .62);
  --cream-faint: rgba(225, 224, 204, .35);
  --line: rgba(225, 224, 204, .12);
  /* Sekundärfarbe: das Rot des i-Punkts im Logo (#BC1822, gemessen). Nur als kleiner
     Akzent — Schlusspunkt der kursiven Überschriften, aktive Seite, Markierung. Nicht für
     Fließtext auf Schwarz (Kontrast 3,1:1); Creme auf Rot ist gut lesbar (4,8:1). */
  --red: #bc1822;
  /* Dasselbe Rot für kleine Punkte auf dunklen Panels (Schlusspunkt, aktive Seite): auf #111
     fehlte ein Hauch zu 3:1 (2,96:1). So 3,06:1, ΔE 0,8 zum Logo-Rot, also nicht sichtbar. */
  --red-ui: #bf1c25;
  /* Große Ziffern (01, 02 …): Creme mit 40 % statt 35 %, erreicht 3:1 auf --ink */
  --cream-dim: rgba(225, 224, 204, .4);

  /* Schriftgrößen (seit 06.11.2026): wenige feste Stufen statt 9/10/12/13/14/15/17 px.
     Fließende Größen (clamp) für Überschriften bleiben, wie sie sind. */
  --fs-2xs: .6875rem;   /* 11 px  Kleinstlabels in Versalien */
  --fs-xs: .8125rem;    /* 13 px  Labels, Meta, Versalien */
  --fs-sm: .9375rem;    /* 15 px  Navigation, Links, Nebentext */
  --fs-base: 1rem;      /* 16 px  Fließtext */
  --fs-md: 1.125rem;    /* 18 px  Einleitungen */
  --fs-lg: 1.25rem;     /* 20 px */

  /* Abstände im 4-px-Raster. Neue Werte bitte nur aus dieser Reihe. */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;

  --sans: 'Almarai', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  /* Akzentschrift (seit 06.11.2026): Kanit SemiBold Italic statt der Serif — sportlich, schräg,
     passt zum Racing-Thema. Nur dieser eine Schnitt ist eingebunden (site/fonts.css). */
  --akzent: 'Kanit', var(--sans);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --gutter: clamp(16px, 2vw, 24px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .6s;

  /* Höhe der festen Navigationsleiste — Anker und Hero rechnen damit */
  --nav-h: 60px;
  color-scheme: dark;
}

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

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

/* Englisch wird nach dem Laden eingesetzt. Bis dahin bleibt die Seite unsichtbar,
   statt kurz deutsch aufzublitzen — mit Zeitgrenze in site/shell.js, falls das
   Skript nicht lädt. */
html.lang-pending body { visibility: hidden; }

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Punktraster wie auf jdzphotos.de — als feste Ebene statt `background-attachment: fixed`.
   Das ignoriert iOS ohnehin, und Chrome auf Android malte damit bei jedem Scroll-Frame den
   ganzen Bildschirm neu. Am Fenster ausgerichtet wie vorher (dazu passt .raster-licht). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cream-rgb), .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

::selection { background: var(--red); color: var(--cream); }

/* Punktraster, das unter dem Mauszeiger aufleuchtet (seit 30.10.2026).
   Dieselbe Rasterteilung wie der Hintergrund von body (22 px, am Fenster ausgerichtet), nur
   heller — und per Maske auf einen weichen Kreis um den Zeiger beschränkt. z-index -1: über
   dem Hintergrund, unter allen Inhalten; Karten mit eigener Fläche decken es ab. Die
   Position setzt site/site.js (--mx/--my), nur bei Maus und ohne „Bewegung reduzieren“. */
.raster-licht {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cream-rgb), .55) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0,0,0,.45) 45%, transparent 100%);
          mask-image: radial-gradient(circle 190px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0,0,0,.45) 45%, transparent 100%);
  opacity: 0; transition: opacity .6s ease;
}
.raster-licht.an { opacity: 1; }

img, svg { max-width: 100%; display: block; }
/* <picture> ist nur die Hülle für die Formatwahl. Als eigene Box hätte es keine
   Höhe, und `height: 100%` am Bild darin griffe ins Leere — die Kacheln waren
   dann nur oben gefüllt. */
picture { display: contents; }
/* …und seine <source>-Elemente werden dadurch Kinder des umgebenden Rasters. In der
   Lightbox (display: grid) bildeten sie zwei leere Zeilen über dem Bild und schoben es
   aus der Mitte. Sie tragen nur Hinweise für die Formatwahl, kein Layout. */
picture source { display: none; }

a { color: var(--cream); text-underline-offset: .2em; }

/* Schlusspunkt der kursiven Überschriften (gesetzt von site/site.js, punkteFaerben) */
.punkt { color: var(--red-ui); }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
h3 { font-size: calc(1.3rem + .6vw); }
@media (min-width: 1200px) { h3 { font-size: 1.75rem; } }
p { margin: 0 0 1rem; }

/* Zeilenumbrüche (30.09.2026): Überschriften gleichmäßig verteilen, Fließtext ohne
   einzelnes Wort in der letzten Zeile. Browser ohne Unterstützung umbrechen wie bisher. */
h1, h2, h3, h4, .statement, .section-title, .page-hero__title, .cta__title, summary { text-wrap: balance; }
p, li, dd, dt, figcaption, blockquote, .eyebrow, .channel__label, .channel__value { text-wrap: pretty; }
/* Namen und Begriffe, die nie getrennt werden sollen: <span class="nowrap"> */
/* Sehr kleine Handys: ein einzelnes langes Wort („zusammenzuarbeiten.") passt in den großen
   Überschriften nicht in die Zeile — dort, und nur dort, nach Silben trennen */
@media (max-width: 359.98px) { .section-title, .page-hero__title, .cta__title, .statement { hyphens: auto; } }
ul { margin: 0; }
button { font: inherit; color: inherit; }

/* Akzentwort: „Ausgewählte <em>Arbeiten.</em>" — Kanit SemiBold Italic. Etwas kleiner als die
   Almarai daneben, weil Kanit größer zeichnet; so stehen beide optisch gleich hoch. */
.serif, h1 em, h2 em, h3 em {
  font-family: var(--akzent);
  font-style: italic;
  font-weight: 600;
  font-size: .84em;
  letter-spacing: -.03em;
}

/* Portfoliobilder: kein Markieren, kein Ziehen, kein iOS-Kontextmenü. Dieselbe
   Schranke wie auf der bisherigen Startseite; site/shell.js sperrt dazu das
   Rechtsklickmenü. Das Logo bleibt davon ausgenommen. */
img[src*="/img/"]:not([src*="logo"]) {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-user-drag: none;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  display: inline-flex; padding: .5rem 1.2rem; border-radius: var(--r-pill);
  background: var(--cream); color: var(--black); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* ---------- Raster ----------
   Dieselben Breiten wie der Bootstrap-Container der Vorlage, damit die Seiten
   genau so laufen wie in den Screenshots. */
.container { width: 100%; margin-inline: auto; padding-inline: 12px; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.grid { display: grid; gap: var(--g, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .grid--split   { grid-template-columns: 5fr 7fr; }   /* Bild links, Text rechts */
  .grid--half    { grid-template-columns: 1fr 1fr; }
  .grid--faq     { grid-template-columns: 4fr 8fr; }
  .grid--contact { grid-template-columns: 5fr 7fr; column-gap: 3rem; }
  .grid--intro   { grid-template-columns: 3fr 9fr; }
}

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section--flush-top { padding-top: 0; }
.section--line { border-top: 1px solid var(--line); }

/* großes abgerundetes Panel */
.stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-inline: 12px;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
@media (min-width: 768px) { .stage { margin-inline: 16px; } }
.stage .lead-text { margin-bottom: 3rem; }
.stage .section-title { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }   /* ohne Lead direkt vor den Karten */

/* „04 Leistungen"
   Racing-Akzente (seit 06.11.2026, angelehnt an Rennaufkleber): Die Nummer steht als
   schräges Startnummern-Schild in Creme, das Label daneben in Versalien. Alle Racing-Elemente
   der Seite teilen denselben Winkel (--racing-neigung), damit sie als ein System lesen. */
:root { --racing-neigung: -12deg; }
.eyebrow { display: inline-block; font-size: var(--fs-sm); color: var(--cream-muted); margin-bottom: 1rem; }
.eyebrow:has(> i) { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow i {
  display: inline-block; margin-right: .6rem; padding: .2rem .5rem .1rem;
  font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: .02em;
  color: var(--black); background: var(--cream);
  transform: skewX(var(--racing-neigung));
}

.display { font-weight: 400; line-height: .95; letter-spacing: -.045em; }

.section-title { font-size: clamp(2.6rem, 6vw, 4.75rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; margin-bottom: 1.25rem; }

.lead-text { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--cream-muted); max-width: 38rem; text-wrap: pretty; }

/* ---------- Einblenden beim Scrollen ----------
   Nur wenn JavaScript läuft (Klasse `js` am <html>) — ohne Skript bleibt alles
   sichtbar, statt für immer durchsichtig zu sein. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Der Seitenkopf steht im ersten Bildschirm und enthält das LCP-Element (H1) — er soll
   sofort da sein, nicht erst nach Skript, Beobachter und 0,6 s Übergang. */
.js .page-hero .reveal { opacity: 1; transform: none; transition: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  background: var(--black);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-nav.is-scrolled { border-bottom-color: var(--line); }

.nav-shell {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--nav-h);
  padding: .75rem clamp(16px, 3vw, 32px);
}

.nav-brand {
  display: flex; align-items: center; gap: .5rem;
  color: var(--cream); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em; text-decoration: none;
}
.nav-brand img { width: 24px; height: 24px; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; }
.nav-link {
  color: var(--cream-muted); font-size: var(--fs-sm); padding: .25rem .5rem;
  text-decoration: none; transition: color .2s;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--cream); }
/* Aktive Seite: ein kleines rotes Quadrat wie der i-Punkt im Logo, statt Unterstrich */
.nav-link { position: relative; }
.nav-link.active { color: var(--cream); }
.nav-link.active::after {
  content: ""; position: absolute; left: 50%; bottom: -.15rem; width: 5px; height: 5px;
  background: var(--red-ui); transform: translateX(-50%);
}

.nav-lang { display: inline-flex; align-items: center; gap: .15rem; margin-left: .5rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.nav-lang button {
  background: none; border: 0; cursor: pointer; padding: .25rem .25rem;
  font-size: var(--fs-xs); letter-spacing: .06em; color: var(--cream-muted);
  min-height: 44px; min-width: 44px;            /* Tippfläche */
}
.nav-lang button:hover { color: var(--cream); }
.nav-lang button[aria-pressed="true"] { color: var(--cream); }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 0; padding: .5rem 0 .5rem .75rem; min-height: 44px; cursor: pointer;
  color: var(--cream); font-size: var(--fs-sm);
}

/* Mobil: Menü schwebt von rechts herein */
.nav-panel { display: flex; align-items: center; }
.nav-panel__head { display: none; }

@media (max-width: 991.98px) {
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    position: fixed; inset: 0 0 0 auto; z-index: 1045;
    width: min(86vw, 360px);
    flex-direction: column; align-items: flex-start;
    padding: 1rem 1.5rem 2rem;
    background: var(--black); border-left: 1px solid var(--line);
    transform: translateX(100%); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s linear .4s;
    overflow-y: auto;
  }
  .nav-open .nav-panel { transform: none; visibility: visible; transition: transform .4s var(--ease); }
  .nav-panel__head { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: calc(var(--nav-h) - 1rem); margin-bottom: 1rem; }
  .nav-panel__head span { font-weight: 700; }
  .nav-close { background: none; border: 0; cursor: pointer; color: var(--cream); font-size: 1.6rem; line-height: 1; padding: .25rem; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .nav-link { font-size: 1.75rem; letter-spacing: -.03em; padding: .25rem 0; }
  /* im Menü: das Quadrat rechts neben dem Wort, auf halber Höhe */
  .nav-link.active::after { left: auto; right: -1rem; bottom: auto; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); }
  .nav-lang { margin: 2rem 0 0; padding: 0; border: 0; }
  .nav-lang button { font-size: var(--fs-sm); padding: .4rem .5rem .4rem 0; }
  /* UNTER der Navigationsleiste (1030), nicht darüber. Das Menü steckt in der Leiste,
     und deren z-index bildet eine eigene Ebene: die 1045 des Menüs gilt nur innerhalb
     davon. Mit 1040 lag der Hintergrund über dem ganzen Menü — jeder Tipp auf einen
     Link traf ihn und schloss das Menü, statt zu navigieren. */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 1029; background: rgba(0, 0, 0, .6);
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}
@media (min-width: 992px) { .nav-backdrop { display: none; } }

/* ---------- Knöpfe ---------- */
.btn-pill {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .5rem .5rem .5rem 1.25rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--cream); color: var(--black);
  font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
}
/* Pfeilkreis im Logo-Rot (seit 06.11.2026): der rote Punkt markiert jetzt auch, wo man klickt.
   Creme auf Rot 4,8:1. Eine Hauptaktion pro Bildschirm, damit das Rot selten bleibt. */
.btn-pill__icon {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--red); color: var(--cream); transition: transform .35s var(--ease);
}
.btn-pill:hover { color: var(--black); background: #efeee2; }
.btn-pill:hover .btn-pill__icon { transform: rotate(-45deg); }
.btn-pill:disabled { opacity: .55; cursor: default; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--cream); text-decoration: none; cursor: pointer;
  transition: background .3s, border-color .3s;
}
.btn-ghost:hover { border-color: var(--cream-faint); background: var(--surface-2); }

.link-arrow { color: var(--cream); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }
.link-arrow::after { content: ' →'; transition: margin .3s; }
.link-arrow:hover::after { margin-left: .25rem; }

/* ---------- Bildhelfer ----------
   Rahmen fester Form, das Bild füllt ihn (Leistungen, Über mich). */
.media { position: relative; overflow: hidden; background: var(--surface); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero (Startseite) ---------- */
.hero { padding: calc(var(--nav-h) + 8px) 12px 12px; }
@media (min-width: 768px) { .hero { padding: calc(var(--nav-h) + 12px) 16px 16px; } }

.hero__frame {
  position: relative; isolation: isolate;
  height: calc(100svh - var(--nav-h) - 20px); min-height: 560px;
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
}
@media (min-width: 768px) { .hero__frame { height: calc(100svh - var(--nav-h) - 28px); } }

.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img {
  /* object-position steht am Bild selbst (index.php) — der Ausschnitt ist im Admin wählbar */
  width: 100%; height: 110%; object-fit: cover; object-position: 40% 30%;
  filter: contrast(1.08) brightness(.82);   /* abgedunkelt, damit Text und Wortmarke lesbar bleiben */
  will-change: transform;
}
.hero__img--sw img { filter: grayscale(1) contrast(1.08) brightness(.82); }
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 30%),
    linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, transparent 55%);
}
.hero__content { position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(9rem, 26vw, 16rem); max-width: 24rem; }
.hero__content p { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 1.25rem; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
@media (max-width: 767.98px) { .hero__content { left: 1.25rem; right: 1.25rem; top: 1.75rem; bottom: auto; } }
/* Primärer CTA und der Weg zu den Arbeiten nebeneinander, am Handy notfalls umbrochen */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.hero__actions .link-arrow { text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }

/* Lesbarkeit im Hero ab Tablet (seit 06.11.2026): Leitsatz und „Arbeiten ansehen" lagen am
   Desktop auf dem hellen Grau des Porträts. Erst als ovaler Hof direkt hinter dem Text gelöst —
   der stand mit seiner Kante sichtbar als Fleck im Bild. Jetzt eine große, ohne Kante
   auslaufende Abdunklung zur rechten Bildhälfte hin, wie eine Vignette: Sie hat keinen Rand,
   den man sieht, und das Motiv links bleibt hell. Viele Zwischenstufen statt zwei, damit der
   Verlauf nicht in Ringen steht. Am Handy steht der Text unten auf dem kräftigen Verlauf. */
@media (min-width: 768px) {
  .hero__overlay {
    background:
      radial-gradient(ellipse 75% 95% at 88% 58%,
        rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .52) 18%, rgba(0, 0, 0, .42) 34%,
        rgba(0, 0, 0, .29) 50%, rgba(0, 0, 0, .16) 66%, rgba(0, 0, 0, .06) 82%, transparent 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 30%),
      /* unten etwas höher hinauf als am Handy, damit die Regionszeile über der Wortmarke
         auch auf hellen Fotos ≥ 4,5:1 hat */
      linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .55) 25%, rgba(0, 0, 0, .3) 45%,
        rgba(0, 0, 0, .12) 60%, transparent 75%);
  }
}

.nowrap { white-space: nowrap; }
/* Leistung + Region unter der Marke (SEO), dezent über der Wortmarke */
.hero__subline {
  position: absolute; left: clamp(1rem, 3.4vw, 2.9rem); bottom: calc(clamp(4.6rem, 21vw, 19rem) * .86); margin: 0;
  max-width: min(54rem, calc(100% - 2rem)); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); opacity: .82; text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
/* Livery-Streifen vor „Fotografie & Video" (Racing-Akzent): rot, creme, rot — schräg wie
   die Startnummern. Reine Zierde, deshalb als ::before ohne Text. */
.hero__subline::before {
  content: ""; display: inline-block; width: 2.1em; height: .7em; margin-right: .75em; vertical-align: 0;
  background: linear-gradient(90deg, var(--red) 0 44%, transparent 0 56%, var(--cream) 0 70%, transparent 0 82%, var(--red) 0);
  transform: skewX(var(--racing-neigung));
}
.hero__wordmark {
  position: absolute; left: clamp(.75rem, 3vw, 2.5rem); bottom: -.14em; margin: 0;
  font-size: clamp(3rem, 21vw, 19rem); font-weight: 400; line-height: 1; letter-spacing: -.07em;
  white-space: nowrap; user-select: none;
}
/* padding vergrößert die Tippfläche auf über 24 px; bottom gleicht sie aus, der Text steht wie vorher */
.hero__scroll {
  position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: 1rem; padding-block: .5rem; display: none;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted); text-decoration: none;
}
.hero__scroll span { display: inline-block; animation: bob 2s var(--ease) infinite; }
@media (min-width: 768px) { .hero__scroll { display: block; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Kopf der Unterseiten ---------- */
.page-hero { padding-top: clamp(8rem, 16vw, 11rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.page-hero__title { font-size: clamp(3.4rem, 11vw, 9rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; margin-bottom: 1.5rem; }

.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: var(--fs-xs); }
.breadcrumb li + li::before { content: '/'; padding: 0 .5rem; color: var(--cream-faint); }
.breadcrumb a { color: var(--cream-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--cream); }
.breadcrumb [aria-current] { color: var(--cream-muted); }

/* ---------- Statement Wort für Wort ---------- */
.statement { font-size: clamp(2.2rem, 5.6vw, 4.6rem); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; max-width: 20ch; margin-bottom: 1.5rem; }
.js .statement .word { display: inline-block; opacity: .12; transition: opacity .5s ease; }
.js .statement.is-visible .word { opacity: 1; }

/* ---------- Kopfzeile eines Abschnitts mit Knopf rechts ---------- */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 3rem; }
.section-head .section-title { margin-bottom: 0; }

/* ---------- Work-Kacheln (Startseite) ---------- */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.work-tile {
  position: relative; display: block; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); aspect-ratio: 4 / 5; color: var(--cream); text-decoration: none;
}
.work-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .9s var(--ease), filter .6s; }
.work-tile:hover img { transform: scale(1.06); filter: saturate(1.05); }
.work-tile__caption {
  position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: end; gap: .5rem;
  padding: 2.5rem 1rem 1rem; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 575.98px) { .work-tile__caption { font-size: var(--fs-2xs); padding: 2rem .8rem .8rem; } .work-tile__caption span + span { display: none; } }
/* Beim Überfahren schiebt sich ein roter Balken vor den Seriennamen, wie die Teamfarbe in
   einer Zeitentabelle. Nur beim Hover/Fokus — so bleibt das Rot selten. */
.work-tile__caption > span:first-child::before {
  content: ""; display: inline-block; width: 0; height: .9em; margin-right: 0; vertical-align: -.1em;
  background: var(--red); transform: skewX(var(--racing-neigung));
  transition: width .35s var(--ease), margin-right .35s var(--ease);
}
.work-tile:hover .work-tile__caption > span:first-child::before,
.work-tile:focus-visible .work-tile__caption > span:first-child::before { width: .4em; margin-right: .6em; }

/* ---------- Events (/events, Ziel des QR-Codes — mobil zuerst) ---------- */
.page-hero--kompakt { padding-top: clamp(6.5rem, 14vw, 10rem); }
.events__titel { font-size: clamp(2.4rem, 8vw, 6rem); }
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.event-karte {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .5rem 1rem .5rem .5rem; min-height: 6.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--cream); text-decoration: none; transition: background .3s, border-color .3s;
}
.event-karte:hover, .event-karte:focus-visible { background: var(--surface-2); border-color: var(--cream-faint); }
.event-karte__bild { width: 5.5rem; height: 5.5rem; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.event-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.event-karte__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.event-karte__titel { font-size: var(--fs-md); line-height: 1.25; overflow-wrap: break-word; }
.event-karte__datum, .event-karte__preis { font-size: var(--fs-sm); color: var(--cream-muted); }
.event-karte__pfeil { font-size: 1.3rem; }
.ablauf--vier { margin-bottom: 0; }
/* .ablauf.ablauf--vier statt nur .ablauf--vier: die 3-Spalten-Regel für .ablauf steht weiter
   unten und gewann bei gleicher Spezifität — vier Schritte liefen als 3 + 1 */
@media (min-width: 768px) and (max-width: 991.98px) { .ablauf.ablauf--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ablauf.ablauf--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.events__form { max-width: 52rem; }
.events__form .lead-text { margin-bottom: 1.5rem; }
.events__form textarea { min-height: 5rem; }

/* ---------- Case Study (/work/<slug>) ---------- */
.case-vorschau { position: sticky; top: var(--nav-h); z-index: 5; margin: 0; padding: .5rem 1rem; text-align: center; background: var(--cream); color: var(--black); font-size: var(--fs-sm); }
.case__titel { font-size: clamp(2.8rem, 8vw, 6.5rem); }
.case__texte { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 768px) { .case__texte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case__abschnitt { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.case__abschnitt p { color: var(--cream-muted); line-height: 1.7; max-width: 38rem; }
.case__bilder { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .case__bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.case__bild { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.case__bild img { display: block; width: 100%; height: auto; }
.case__zitat { margin-top: clamp(3rem, 7vw, 5rem); max-width: 48rem; }

/* Case Studies über der Galerie (/work) */
.cases { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.cases__titel { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted); font-weight: 400; margin: 0 0 1rem; }
.gallery-noscript { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery-noscript img { width: 100%; height: auto; border-radius: var(--r-md); }

/* „Fotografiert bei / für" — Textzeile unter den Kacheln, nur echte Namen */
.referenzen { margin: 2rem 0 0; color: var(--cream); font-size: var(--fs-sm); line-height: 1.7; }
.referenzen__label { color: var(--cream-muted); margin-right: .5rem; }
.referenzen span[aria-hidden] { color: var(--cream-faint); margin: 0 .25rem; }

/* Stimmen (erst sichtbar, wenn im Admin eingeschaltet) */
.stimme { margin: 0; }
/* Zitate in ruhiger Almarai — in der fetten Akzentkursive wären ganze Sätze zu wuchtig */
.stimme blockquote { margin: 0 0 1.5rem; font-size: 1.25rem; line-height: 1.5; color: var(--cream); }
.stimme figcaption { margin-top: auto; font-size: var(--fs-sm); color: var(--cream-muted); }

/* ---------- Karussell „Auf der Strecke" ---------- */
.carousel {
  position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); aspect-ratio: 16 / 9;
  touch-action: pan-y;      /* waagerecht wischt das Karussell, senkrecht scrollt die Seite */
}
@media (max-width: 767.98px) { .carousel { aspect-ratio: 4 / 5; } }
.carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.carousel__slide.is-active { opacity: 1; z-index: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__caption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2;
  padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
}
.carousel__nav {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 10%; min-width: 3rem;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--cream); opacity: .8; transition: opacity .2s;
}
.carousel__nav:hover { opacity: 1; }
.carousel__nav svg { width: 2rem; height: 2rem; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
.carousel__nav--prev { left: 0; }
.carousel__nav--next { right: 0; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: .6rem; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 0; }
/* Anhalten/Weiter für den Autoplay (WCAG 2.2.2) — rechts unten, außerhalb der Bildmitte */
.carousel__pause {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 4; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: rgba(0, 0, 0, .55); color: var(--cream);
}
.carousel__pause svg { width: 1rem; height: 1rem; }
.carousel__dots button {
  width: 22px; height: 3px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--cream); opacity: .45; transition: opacity .3s;
  /* größere Trefferfläche ohne größeren Strich */
  background-clip: content-box; box-sizing: content-box; padding: 14px 6px;   /* Tippfläche ≈ 34 × 31 px */
}
.carousel__dots button[aria-current="true"] { opacity: 1; }
@media (max-width: 575.98px) { .carousel__caption { left: 1rem; bottom: 3rem; } }

/* ---------- Leistungskarten (Startseite) ---------- */
.cards { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.service-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 2rem 1.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .5s var(--ease), background .3s, border-color .3s;
}
.service-card:hover { transform: translateY(-6px); background: var(--surface-2); border-color: var(--cream-faint); }
.stage .service-card { background: var(--ink); }
.stage .service-card:hover { background: var(--surface-2); }
/* Ziffern 01, 02 … in der Akzentkursive, zurückgenommen in --cream-dim. Am 06.11.2026 als
   Rennaufkleber (Kontur + roter Versatz) probiert und verworfen — wirkte nach Comic-Sticker. */
.num { font-family: var(--akzent); font-style: italic; font-weight: 600; font-size: 3rem; line-height: 1; letter-spacing: -.02em; color: var(--cream-dim); }
.service-card .num { margin-bottom: 2.5rem; }
.service-card h3 { font-size: 1.625rem; margin-bottom: 1rem; }
.service-card .link-arrow { margin-top: auto; }
/* „Für Gründer, …" — für wen das Paket ist, zwischen Titel und Stichpunkten */
.service-card__fuer { font-size: var(--fs-sm); color: var(--cream-muted); margin-bottom: 1.25rem; }
.service-card h3 { overflow-wrap: break-word; }   /* nur wenn ein Wort gar nicht passt */

.dash-list { list-style: none; padding: 0; margin: 0 0 1.5rem; color: var(--cream-muted); }
.dash-list li { position: relative; padding: .5rem 0 .5rem 1.6em; border-top: 1px solid var(--line); }
/* Strich als hängender Einzug: Bricht ein Punkt um, steht die zweite Zeile unter dem Text,
   nicht unter dem Strich */
.dash-list li::before { content: '—'; position: absolute; left: 0; color: var(--cream-faint); }

/* ---------- Leistungen im Detail ---------- */
.service-row { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); scroll-margin-top: calc(var(--nav-h) + 2rem); }
.service-row + .service-row { margin-top: 3rem; }
@media (min-width: 992px) {
  .service-row { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .service-row + .service-row { margin-top: 4.5rem; }
  .service-row--flip .service-row__media { order: 2; }
}
.service-row__media { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.service-row .num { display: block; margin-bottom: 1rem; }
.service-row .dash-list { margin: 1.5rem 0; color: var(--cream); }
.service-row .dash-list li { padding: .5rem 0 .5rem 1.4em; }
.service-row .dash-list li::before { color: var(--cream); }
.service-row__fuer { display: block; margin-bottom: 1rem; }
.service-row__fuer b { color: var(--cream); font-weight: 400; }
/* alter Anker (#portrait) auf der neuen Zeile — damit ältere Links weiter richtig springen */
.anker-alt { display: block; height: 0; scroll-margin-top: calc(var(--nav-h) + 2rem); }

/* „Auf einen Blick" — zurückhaltend: Beschriftung klein und gedämpft, Wert normal */
.blick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0 0 1.75rem; }
@media (min-width: 576px) { .blick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blick > div { border-top: 1px solid var(--line); padding: .65rem 0; }
.blick dt { font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted); margin-bottom: .25rem; }
.blick dd { margin: 0; color: var(--cream); }
.service-row__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.preis-hinweis { margin: 3rem 0 0; font-size: var(--fs-sm); color: var(--cream-muted); }
/* Kurzfassung auf der Startseite: „ab 290 € · ca. 30 Bilder" */
.service-card__kurz { font-size: var(--fs-sm); color: var(--cream); margin: -.5rem 0 1.25rem; }

/* ---------- Ablauf (Kontakt) ---------- */
.ablauf { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 768px) { .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.ablauf .service-card { padding: 1.5rem 1.5rem 1.75rem; }
.ablauf .service-card:hover { transform: none; }
.ablauf .num { font-size: 2.5rem; margin-bottom: 1.25rem; }
.ablauf h3 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.ablauf p { color: var(--cream-muted); margin: 0; line-height: 1.55; }
/* Am Handy kompakt: Nummer links, Text rechts — sonst schiebt der Ablauf das Formular weit nach unten */
@media (max-width: 767.98px) {
  /* Seit 04.10.2026 nur Nummer + Titel: eine kompakte Zeile, Titel mittig neben der Nummer */
  .ablauf { gap: .5rem; }
  .ablauf .service-card { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: .75rem 20px; height: auto; }
  .ablauf .num { font-size: 1.75rem; margin: 0; min-width: 2.25rem; }
  .ablauf h3 { font-size: var(--fs-md); margin: 0; }
}

/* ---------- Über mich ---------- */
.portrait { border-radius: var(--r-lg); aspect-ratio: 4 / 5; }
.portrait--sw img { filter: grayscale(1); }   /* im Admin schaltbar */
.grid--split { align-items: center; --g: 3rem; }

.stats { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 3rem; }
@media (min-width: 576px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.stat__num { display: block; font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.stat__label { color: var(--cream-muted); font-size: var(--fs-sm); }

.has-tip { border-bottom: 1px dashed var(--cream-faint); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.6rem; line-height: 1; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 0 1.5rem; max-width: 46rem; line-height: 1.7; color: var(--cream-muted); }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- Let's talk ---------- */
.cta { text-align: center; }
/* Zielflagge über „Let's talk." — das Ende jeder Seite ist das Ziel. Schachbrett in Creme,
   zu beiden Seiten ausgeblendet, im selben Winkel wie die anderen Racing-Akzente. */
.cta .container::before {
  content: ""; display: block; width: min(34rem, 100%); height: 20px; margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  background: conic-gradient(var(--cream) 0 25%, transparent 0 50%, var(--cream) 0 75%, transparent 0) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
  opacity: .85; transform: skewX(var(--racing-neigung));
}
.cta__title { font-size: clamp(4rem, 14vw, 11rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; margin-bottom: 2rem; }
.cta .lead-text { margin-inline: auto; margin-bottom: 1.5rem; text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; }

/* ---------- Kontakt ---------- */
.channel {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem;
  padding: 1.4rem 0; border-top: 1px solid var(--line);
  color: var(--cream); text-decoration: none; transition: padding .4s var(--ease);
}
.channel:last-child { border-bottom: 1px solid var(--line); }
.channel__num { color: var(--cream-muted); font-size: var(--fs-xs); }
.channel__label { display: block; font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted); }
.channel__value { font-size: clamp(1.15rem, 2.4vw, 1.6rem); letter-spacing: -.02em; overflow-wrap: break-word; }
.channel__arrow { font-size: 1.4rem; transition: transform .4s var(--ease); }
.channel:hover { padding-left: .75rem; }
.channel:hover .channel__arrow { transform: rotate(45deg); }

.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.75rem); }
.form-panel h2 { font-size: calc(1.3rem + .6vw); margin-bottom: 1.5rem; }
@media (min-width: 1200px) { .form-panel h2 { font-size: 1.75rem; } }
.form-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }

.field label { display: block; margin-bottom: .5rem; font-size: var(--fs-xs); letter-spacing: .06em; color: var(--cream-muted); }
.field input, .field select, .field textarea {
  display: block; width: 100%;
  padding: .75rem 1rem; border: 1px solid rgba(var(--cream-rgb), .42); border-radius: var(--r-sm);
  background-color: var(--ink); color: var(--cream); font: inherit; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s; appearance: none;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e1e0cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px 10px; padding-right: 2.5rem;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(var(--cream-rgb), .5); }
/* Fokus deutlich: 2-px-Kontur in Creme (vorher nur ein Hauch Schatten, etwa 2,7:1) */
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cream); outline-offset: 1px; border-color: var(--cream-muted); }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.9); cursor: pointer; }
/* Einsatz der Bilder: Mehrfachauswahl als Chips, bricht um statt das Formular zu verlängern */
.chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips legend { display: block; margin-bottom: .5rem; padding: 0; font-size: var(--fs-xs); letter-spacing: .06em; color: var(--cream-muted); }
.chips__liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--cream-muted); transition: background .2s, color .2s, border-color .2s;
}
.chip:hover span { border-color: var(--cream-faint); }
.chip input:checked + span { background: var(--cream); color: var(--black); border-color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.field .hint { margin-top: .25rem; font-size: var(--fs-xs); color: var(--cream-muted); text-align: right; }
.field .hint.is-warning { color: #e8b86a; }
.field .err { display: none; margin-top: .25rem; font-size: var(--fs-xs); color: #e8a0a0; }
.was-validated .field :invalid { border-color: #c77; }
.was-validated .field :invalid ~ .err { display: block; }

.check { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--cream-muted); cursor: pointer; }
.check input {
  flex: none; width: 1.15rem; height: 1.15rem; margin: .1rem 0 0; appearance: none; cursor: pointer;
  border: 1px solid var(--cream-faint); border-radius: .3rem; background: var(--ink);
}
.check input:checked {
  background: var(--cream) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") center / 100% no-repeat;
  border-color: var(--cream);
}
.was-validated .check input:invalid { border-color: #c77; }
.check a { color: var(--cream); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.form-note { font-size: var(--fs-sm); color: var(--cream-muted); }
.form-status { width: 100%; font-size: var(--fs-sm); }
.form-status.is-ok { color: var(--cream); }
.form-status.is-err { color: #e8a0a0; }
/* Erfolgsmeldung: gleitet von rechts unten herein (site/kontakt.js) */
.toast {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1060;
  display: flex; align-items: flex-start; gap: .75rem;
  width: min(24rem, calc(100vw - 2rem)); padding: 1rem 1rem 1rem 1rem;
  background: var(--cream); color: var(--black);
  border-radius: var(--r-md); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  opacity: 0; transform: translate(30%, 130%);
  transition: transform .5s var(--ease), opacity .35s ease;
  touch-action: pan-y; user-select: none;
}
.toast.is-open { opacity: 1; transform: none; }
.toast.is-dragging { transition: none; }
.toast__icon {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--black); color: var(--cream); font-size: var(--fs-sm);
}
.toast__text { flex: 1; display: flex; flex-direction: column; gap: .15rem; line-height: 1.4; font-size: var(--fs-sm); }
.toast__text strong { font-weight: 700; }
.toast__x { flex: none; background: none; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: .1rem .25rem; color: rgba(0, 0, 0, .55); }
.toast__x:hover { color: var(--black); }
@media (max-width: 575.98px) { .toast { right: 1rem; left: 1rem; bottom: 1rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast { transform: none; } }

/* Honigtopf: für Menschen unsichtbar, für Formular-Robots ein ganz normales Feld */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Work: Filter, Galerie, Lightbox ---------- */
.gallery-bar { margin-bottom: 2rem; }
/* Kopfzeile einer Gruppe: kleines Label links, Zusatz (Bildzahl) rechts — dieselbe Form wie
   das Label des Farbfilters, damit beide Gruppen gleich gebaut sind */
/* Oben bündig statt an der Grundlinie: sonst zog die größere Bildzahl das Label nach unten,
   und es stand 3 px tiefer als das Label des Farbfilters daneben. */
.gruppe-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; line-height: 1.5; }
.gruppe-label { font-size: var(--fs-2xs); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-muted); }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-btn {
  border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; cursor: pointer;
  color: var(--cream-muted); padding: .5rem 1rem; font-size: var(--fs-sm);
  transition: all .3s var(--ease);
}
.filter-btn .count { font-size: var(--fs-2xs); margin-left: .25rem; opacity: .85; }
.filter-btn:hover { color: var(--cream); border-color: var(--cream-faint); }
.filter-btn[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--black); }
.gallery-meta { color: var(--cream-muted); font-size: var(--fs-sm); margin: 0; }
.gruppe-kopf .gallery-meta { margin: 0; font-size: var(--fs-xs); line-height: 1.375; }

/* Farbfilter wie ein Vectorscope (site/work.js, seit 06.11.2026): links die Scheibe mit
   der Punktwolke aller Bilder und dem ziehbaren Punkt, rechts Text und Messwerte.
   Bewusst flach (≈ 210 px): Das Scope ist ein Werkzeug über dem Raster, kein Aufmacher —
   die Messwerte stehen deshalb in einer Zeile neben Farbfeld und Treffern. */
.farbscope {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 1.75rem; padding: 1rem clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.farbscope__scope { position: relative; width: clamp(9.5rem, 12vw, 11.5rem); aspect-ratio: 1; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.farbscope__scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
/* Der Punkt: zwei helle Ringe, innen die gewählte Farbe — vor dem ersten Ziehen hohl */
.farbscope__punkt {
  position: absolute; left: 50%; top: 50%; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none;
}
.farbscope__punkt:active { cursor: grabbing; }
.farbscope__punkt::before, .farbscope__punkt::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.farbscope__punkt::before { inset: .35rem; }
.farbscope__punkt::after { inset: 0; border-color: rgba(255, 255, 255, .4); }
.farbscope__punkt span {
  position: absolute; inset: .7rem; border-radius: 50%; pointer-events: none;
  background: var(--punkt, transparent); box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  transition: background .2s;
}
.farbscope__punkt:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.is-ruhend .farbscope__punkt::after { animation: scope-puls 2.4s var(--ease) infinite; }
@keyframes scope-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0; } }
/* Text als Raster: Kicker, Leitsatz und Erklärzeile über die ganze Breite, darunter
   Messwerte (links) und Farbfeld · Treffer · Zurücksetzen (rechts daneben) in einer Zeile */
.farbscope__text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; align-items: end; }
.farbscope__kicker, .farbscope__lead, .farbscope__info { grid-column: 1 / -1; }
.farbscope__kicker { margin: 0 0 .25rem; font-size: var(--fs-2xs); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-muted); }
.farbscope__lead { margin: 0; font-size: var(--fs-md); line-height: 1.35; letter-spacing: -.01em; color: var(--cream); }
.farbscope__lead em { font-family: var(--akzent); font-style: italic; font-weight: 600; font-size: .92em; }
.farbscope__werte { display: flex; gap: 1.5rem; margin: 1rem 0 0; }
.farbscope__werte > div { min-width: 5.5rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.farbscope__werte dt { font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-muted); }
.farbscope__werte dd { margin: .1rem 0 0; font-size: var(--fs-base); font-variant-numeric: tabular-nums; color: var(--cream); }
.farbscope__treffer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; font-size: var(--fs-xs); color: var(--cream-muted); }
.farbscope__swatch { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--punkt, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.farbscope__treffer code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); letter-spacing: .02em; color: var(--cream); }
.farbscope__reset {
  min-height: 36px; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: none; color: var(--cream); font: inherit; font-size: var(--fs-xs); cursor: pointer; transition: border-color .3s var(--ease);
}
.farbscope__reset:hover { border-color: var(--cream-faint); }
.farbscope__info { margin: .75rem 0 0; max-width: 42rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--cream-muted); }
/* Vor dem ersten Ziehen gibt es nichts zu messen: keine „—"-Platzhalter und kein leeres
   Farbfeld, stattdessen die Erklärung. Danach tauschen Messwerte und Erklärung die Plätze. */
.farbscope.is-ruhend .farbscope__werte, .farbscope.is-ruhend .farbscope__treffer { display: none; }
.farbscope:not(.is-ruhend) .farbscope__info { display: none; }
/* Handy: kompakt nebeneinander wie im Reel — kleine Scheibe links, Text daneben, die
   Erklärzeile entfällt. So bleibt der Kasten bei rund 170 px Höhe und die Bilder sichtbar.
   Gezogen wird auf der ganzen Scheibe, der Punkt selbst darf also klein sein. */
@media (max-width: 640px) {
  .farbscope { grid-template-columns: 8.75rem minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; padding: 1rem 1rem 1rem 1rem; border-radius: var(--r-md); }
  .farbscope__scope { width: 8.75rem; }
  .farbscope__punkt { width: 1.9rem; height: 1.9rem; margin: -1rem 0 0 -1rem; }
  .farbscope__punkt::before { inset: .3rem; }
  .farbscope__punkt span { inset: .55rem; }
  .farbscope__text { display: block; }
  .farbscope__kicker { margin-bottom: .25rem; font-size: var(--fs-2xs); letter-spacing: .16em; }
  .farbscope__lead { font-size: var(--fs-sm); line-height: 1.3; }
  .farbscope__werte { gap: 1rem; margin-top: .75rem; }
  .farbscope__werte > div { min-width: 0; padding-top: .25rem; }
  .farbscope__werte dt { font-size: var(--fs-2xs); letter-spacing: .12em; }
  .farbscope__werte dd { font-size: var(--fs-sm); }
  .farbscope__treffer { gap: .25rem .5rem; margin-top: .5rem; font-size: var(--fs-xs); }
  .farbscope__swatch { width: 1rem; height: 1rem; }
  .farbscope__treffer code { font-size: var(--fs-2xs); }
  /* Sichtbar klein, Tippfläche trotzdem 44 px über den unsichtbaren Rand */
  .farbscope__reset { position: relative; min-height: 32px; padding: .25rem .75rem; font-size: var(--fs-xs); }
  .farbscope__reset::after { content: ""; position: absolute; inset: -6px; }
  .farbscope__info { display: none; }
}
@media (max-width: 360px) { .farbscope { grid-template-columns: 7.5rem minmax(0, 1fr); } .farbscope__scope { width: 7.5rem; } }
@media (pointer: coarse) and (min-width: 641px) { .farbscope__reset { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .is-ruhend .farbscope__punkt::after { animation: none; } }

/* Raster auf /work (seit 06.11.2026 wie in den Kundengalerien, 8x): site/work.js legt
   jede Kachel absolut — Masonry, gleich hohe Reihen oder Quadrate, Bilder pro Reihe aus
   dem Admin (Portfolio → Darstellung). Die Reihenfolge läuft ZEILENWEISE, so wie im Admin
   sortiert wird. column-gap trägt nur den Abstand, den das Skript ausliest. */
.gallery { position: relative; column-gap: var(--gutter); }
/* Breit: fast bis an den Rand, mit etwa 1 cm Luft (≈ 40 px bei 1440 px) — ganz an die
   Kante wirkte zu extrem. Am Handy wie das Startseiten-Bild 12 px. */
.container-breit { width: 100%; padding-inline: clamp(16px, 2.75vw, 44px); }
@media (max-width: 575.98px) { .container-breit { padding-inline: 12px; } }

/* Kopf des Rasters in der Textbreite unter der Überschrift. Am Rechner zwei gleich gebaute
   Gruppen nebeneinander — Haarlinie, Label, Inhalt —, oben bündig: links „Kategorie" mit
   Bildzahl und den Chips, rechts „Farbe" mit Text und Scope. Der Farbfilter verliert dort
   seinen Kasten; eine schwere Karte neben losen Chips wirkte unausgewogen. */
.gallery-kopf { margin-bottom: 2rem; }
@media (min-width: 992px) {
  .gallery-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: 0 3.5rem; align-items: start; margin-bottom: 2.75rem; }
  .gallery-kopf:has(.farbscope[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .gallery-kopf .gallery-bar { margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
  .gallery-kopf .farbscope {
    grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.5rem;
    margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
  }
  .gallery-kopf .farbscope__text { order: -1; display: block; }
  .gallery-kopf .farbscope__kicker { margin-bottom: .75rem; }
  .gallery-kopf .farbscope__lead { font-size: var(--fs-md); }
  .gallery-kopf .farbscope__info { margin-top: .5rem; }
  .gallery-kopf .farbscope__werte { margin-top: .75rem; }
  .gallery-kopf .farbscope__treffer { margin-top: .75rem; }
  .gallery-kopf .farbscope__scope { width: 9rem; }
}
/* Ecken der Kacheln: eckig, leicht (Vorgabe) oder rund wie bisher */
.work-raster { --kachel-r: 6px; }
.work-raster.ecken-eckig { --kachel-r: 0px; }
.work-raster.ecken-rund { --kachel-r: var(--r-md); }

.gallery-item { position: absolute; left: 0; top: 0; margin: 0; border-radius: var(--kachel-r, 6px); overflow: hidden; background: var(--surface); }
.gallery-item button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-item button:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; border-radius: var(--kachel-r, 6px); }
.gallery-item picture { display: block; width: 100%; height: 100%; }
/* object-fit: cover — bei Masonry hat die Kachel das Format des Bilds, bei Quadraten wird beschnitten */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), opacity .5s; }
.gallery-item:hover img { transform: scale(1.04); }

.gallery-more { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  /* minmax(0, …): sonst wächst die Bildzeile mit dem Bild statt mit dem Fenster */
  display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center;
  padding: 3.5rem 1rem 1.25rem;
  background: rgba(0, 0, 0, .92);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;
  touch-action: pan-y;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lightbox__stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
/* Die Grenze steht in Fenstereinheiten, NICHT in Prozent. `max-height: 100%` bezog sich
   auf eine Rasterzeile ohne feste Höhe — der Browser verwirft die Angabe dann, und jedes
   Bild erschien in voller Größe über den Rand hinaus (gemessen: 1478 px hoch in einem
   1401 px hohen Rahmen). 7.5rem = Rand oben (3.5) + Leiste (2.75) + Rand unten (1.25). */
.lightbox__stage img {
  width: auto; height: auto;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  object-fit: contain; border-radius: var(--r-md);
  transition: opacity .2s ease;
}
.lightbox__stage img.is-loading { opacity: .35; }
.lightbox__vorlade { display: none; }
.lightbox__titel { min-width: 0; }
.lightbox__zahl { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lightbox__bar em { font-family: var(--akzent); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1em; color: var(--cream); }
.lightbox__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: min(100%, 72rem);
  margin-top: 1rem; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-muted);
}
.lightbox__nav, .lightbox__close {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .6); color: var(--cream); font-size: 1.2rem;
}
.lightbox__nav:hover, .lightbox__close:hover { background: var(--cream); color: var(--black); }
.lightbox__nav { top: 50%; transform: translateY(-50%); z-index: 2; }
.lightbox__nav--prev { left: .75rem; }
.lightbox__nav--next { right: .75rem; }
.lightbox__close { top: .5rem; right: .75rem; font-size: 1.5rem; }
/* Am Handy bleiben die Pfeile — Wischen allein ist keine Bedienung für alle (WCAG 2.5.1).
   Etwas kleiner und dezenter, damit sie das Bild nicht dominieren. */
/* Am Handy (seit 06.11.2026) liegen die Pfeile nicht mehr auf dem Bild, sondern unten in
   der Leiste links und rechts von Titel und Zähler. Das Bild bekommt dafür unten mehr Platz
   und kleinere Ecken — 20 px wirkten auf dem kleinen Bildschirm zu rund. */
@media (max-width: 575.98px) {
  .lightbox { padding: 3.5rem .75rem 1rem; }
  .lightbox__stage img { border-radius: 6px; max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); }
  .lightbox__bar {
    flex-direction: column; justify-content: center; gap: .25rem; min-height: 2.75rem;
    padding-inline: 3.4rem; text-align: center; font-size: var(--fs-xs); letter-spacing: .06em;
  }
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; width: 2.75rem; height: 2.75rem; background: rgba(0, 0, 0, .45); }
  .lightbox__nav--prev { left: .75rem; }
  .lightbox__nav--next { right: .75rem; }
}
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* ---------- Footer ---------- */
/* Rechtslinks ohne JavaScript (seit 06.11.2026): steht in <jdz-footer>, bis shell.js den
   vollen Footer einsetzt — Impressum und Datenschutz bleiben so immer erreichbar. */
.footer-fallback { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 2rem var(--gutter, 1rem); font-size: var(--fs-sm); }
.footer-fallback a { color: var(--cream-muted); }
/* Mit JavaScript setzt shell.js den Footer schon beim Start-Tag; die Ersatzlinks hängt der
   Parser danach an — dann ausblenden, der volle Footer hat dieselben Links. */
.site-footer ~ .footer-fallback { display: none; }

.site-footer {
  margin: 12px; padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  background: var(--black); border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 768px) { .site-footer { margin: 16px; } }
.footer-grid { display: grid; gap: 1.5rem 1.5rem; grid-template-columns: 1fr 1fr; }
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 5fr 1fr 3fr 3fr; } .footer-grid > :first-child { grid-column: auto; } .footer-grid > :nth-child(2) { grid-column: 3; } }
.footer-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; font-size: 1.75rem; letter-spacing: -.04em; color: var(--cream); text-decoration: none; }
.footer-brand img { width: 30px; height: 30px; }
.footer-note { color: var(--cream-muted); max-width: 28rem; line-height: 1.6; font-size: var(--fs-sm); margin: 0; }
/* Feste Umbrüche (Footer, Let's-talk-Text) erst ab 480 px — darunter bricht der Text von selbst */
@media (max-width: 479.98px) { .umbruch { display: none; } }
.site-footer h2 { font-family: var(--akzent); font-style: italic; font-weight: 600; font-size: var(--fs-md); letter-spacing: -.01em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: .5rem; }
.site-footer ul a { color: var(--cream-muted); text-decoration: none; }
.site-footer ul a:hover { color: var(--cream); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--cream-muted);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.footer-bottom a { color: var(--cream-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--cream); }
/* Widerrufsfunktion (§ 356a BGB): auf Wunsch sehr dezent — wie die Rechtslinks daneben,
   nur in vollem Creme statt gedämpft, damit sie sich minimal abhebt. */
.footer-bottom a.footer-widerruf, .footer-fallback a.footer-widerruf { color: var(--cream); }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .statement .word { opacity: 1; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   Handy (bis 575 px): EINE Textkante bei 24 px — links wie rechts (04.10.2026)

   Vorher begannen Texte bei 12, 16, 24, 25, 28, 32 und 54 px. Jetzt:
   - Seiteninhalt (.container) 24 px vom Rand
   - Rahmen (Hero-Bild, Leistungs-Panel, Footer) bei 12 px; ihr Inhalt springt genau
     zurück auf die 24-px-Linie (12 px Rahmen + 1 px Linie + 11 px innen)
   - Logo und Menüknopf in der Leiste auf derselben Linie
   - Karten und Formular: Kante auf der Linie, innen einheitlich 20 px
   ===================================================================== */
@media (max-width: 575.98px) {
  :root { --rand: 24px; }
  .container { padding-inline: var(--rand); }
  .nav-shell { padding-inline: var(--rand); }
  .stage > .container, .site-footer > .container { padding-inline: 11px; }

  .hero__scroll { right: 12px; }

  .service-card, .form-panel { padding: 1.5rem 20px; }
  .service-card .num { margin-bottom: 1.5rem; }

  /* Abstände: ein Rhythmus — 56 px zwischen Abschnitten, 24 px innerhalb */
  .section { padding-block: 56px; }
  .section--flush-top { padding-top: 0; }
  .stage { padding-block: 48px; }
  .page-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 32px; }
  .section-head { margin-bottom: 24px; }
  .cards, .ablauf, .events { gap: 12px; }
  .service-row + .service-row { margin-top: 56px; }
  .cta .lead-text { margin-bottom: 24px; }
}

/* =====================================================================
   Mobile Usability (seit 30.10.2026, nach Council-Review am Handy)
   Tippflächen ≥ 44 px, keine hängenden Hover-Zustände auf Touch, ruhigere Hero-Lesbarkeit,
   Filter als eine wischbare Zeile, Ablauf als Liste statt Pseudo-Buttons.
   ===================================================================== */
.nav-close { min-width: 44px; min-height: 44px; }
.toast__x { min-width: 44px; min-height: 44px; }
/* Pfeil-Links: größere Tippfläche, ohne die Zeile zu sprengen */
.link-arrow { display: inline-block; padding-block: .6rem; }
.footer-bottom nav a, .footer-grid a { display: inline-block; padding-block: .35rem; }

/* Nur im mobilen Menü: Hauptaktion und Eventbilder */
.nav-cta { display: none; }
@media (max-width: 991.98px) {
  .nav-cta { display: block; margin-top: 1.5rem; }
  .nav-cta .btn-pill { width: 100%; justify-content: space-between; }
}
@media (min-width: 992px) { .nav-nur-mobil { display: none; } }

/* Touch: Hover-Effekte bleiben nach dem Tippen sonst „hängen" (iOS) */
@media (hover: none) {
  .service-card:hover { transform: none; background: var(--surface); }
  .channel:hover { padding-left: 0; }
  .channel:hover .channel__arrow { transform: none; }
  .link-arrow:hover::after { margin-left: 0; }
}

@media (max-width: 767.98px) {
  /* Hero am Handy als ein Block unten (seit 06.11.2026): Region, Wortmarke, Leitsatz und
     Knöpfe untereinander am unteren Rand, das Foto oben bleibt frei — wie ein Filmplakat.
     Vorher standen Leitsatz und Knöpfe oben im Bild und die Wortmarke ganz unten; der Hero
     zerfiel in zwei Teile. Die Reihenfolge im HTML bleibt (order statt Umbau). */
  .hero__frame { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1.25rem 1.5rem; }
  .hero__subline, .hero__wordmark, .hero__content { position: static; }
  .hero__subline { order: 1; max-width: none; margin: 0 0 .25rem; }
  /* Die Unterlängen von „j" und „p" ragen bei line-height .92 gut 0,1 em unter den
     Zeilenkasten (gemessen: 0,214 em Unterlänge). Ohne diesen Zuschlag stand das „j" 4 px
     über dem Leitsatz. Der Zuschlag wächst mit der Schriftgröße, der Rest ist fest. */
  .hero__wordmark { order: 2; margin: 0 0 calc(.11em + 1.25rem) -.03em; font-size: clamp(3rem, 21vw, 9rem); line-height: .92; }
  .hero__content { order: 3; max-width: none; }
  .hero__content p { margin-bottom: 1.5rem; }
  /* Verlauf jetzt unten kräftig (dort steht der Text), oben nur ein Hauch für die Leiste.
     Das Foto ist im Admin austauschbar — die Lesbarkeit darf nicht vom Motiv abhängen. */
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 18%),
      linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .6) 38%, transparent 68%);
  }
}
/* Schmale Handys: Inhalt auf der 24-px-Linie (12 px Rahmen + 12 px innen). Steht bewusst
   NACH dem Block darüber, sonst gewänne dessen Polster. */
@media (max-width: 575.98px) {
  .hero__frame { padding-inline: 12px; }
  .hero__wordmark { margin-left: -3px; }            /* optisch: das „j" hat Vorbreite */
}

@media (max-width: 575.98px) {
  /* Ablauf: Nummer + Titel als ruhige Liste — die umrandeten Kacheln sahen wie Knöpfe aus */
  .ablauf { gap: 0; }
  .ablauf .service-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 1rem 0; }
  .ablauf .service-card:last-child { border-bottom: 1px solid var(--line); }
  .ablauf .service-card { align-items: baseline; }   /* Nummer und Titel auf einer Schriftlinie */
  .ablauf .num { line-height: 1; }

  /* Work: Filter als eine waagerecht wischbare Zeile statt drei Zeilen Chips */
  .gallery-bar { display: block; }
  .filter-bar {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); padding-bottom: 2px;
    scroll-padding-inline: var(--rand);   /* sonst rastet der erste Chip am Bildschirmrand ein */
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; scroll-snap-align: start; min-height: 44px; }

  /* Kontakt: die Zählung 01–04 kostet am Handy nur Breite */
  .channel { grid-template-columns: 1fr auto; padding: 1rem 0; }
  .channel__num { display: none; }

  /* Karussell: Bildunterschrift über den Punkten, Pause rechts daneben */
  .carousel__caption { bottom: 3.6rem; }
}

/* Startseite, Leistungskarten: zwei Links nebeneinander, darunter die Hauptaktion */
.service-card__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.service-card__links .link-arrow { margin-top: 0; }
.link-arrow--leise { color: var(--cream-muted); }   /* gleiche Schrift wie daneben, nur leiser */
.cards__aktion { margin-top: 2rem; }

/* =====================================================================
   Knöpfe am Handy (seit 30.10.2026)
   Alle Aktionsknöpfe im Inhalt laufen unter 576 px über die volle Breite, Beschriftung
   mittig. So stehen sie bündig auf der 24-px-Kante wie Karten und Formular, und lange
   Beschriftungen („Commercial & Employer Branding anfragen") brechen zentriert und
   ausgewogen um, statt linksbündig neben dem Pfeil zu kleben. Der Pfeilkreis bleibt
   rechts; links gleicht ein Polster in Kreisbreite aus, damit der Text optisch mittig sitzt.
   ===================================================================== */
@media (max-width: 575.98px) {
  main .btn-pill {
    display: flex; width: 100%; justify-content: space-between;
    padding-left: calc(2.25rem + .5rem);
  }
  main .btn-pill > span:first-child { flex: 1; text-align: center; text-wrap: balance; line-height: 1.3; }
  main .btn-ghost { display: flex; width: 100%; justify-content: center; text-align: center; min-height: 44px; }

  /* Hero: Knopf über die Breite, „Arbeiten ansehen" mittig darunter */
  .hero__actions { flex-direction: column; align-items: stretch; gap: .25rem; }
  .hero__actions .link-arrow { align-self: center; }

  /* Abschnittskopf mit Knopf (Startseite „Alle Arbeiten ansehen") */
  .section-head .btn-ghost { flex-basis: 100%; }

  /* Let's talk: zentriert, Knöpfe untereinander */
  .cta { text-align: center; }
  .cta .lead-text { margin-inline: auto; }
  .cta__actions { flex-direction: column; align-items: stretch; gap: .75rem; }

  /* Work: Bildzahl mit Luft unter der Filterzeile */
  .gallery-meta { margin: 1rem 0 0; }

  /* Startseite: Knopf unter den Leistungskarten mit gleichem Abstand wie zwischen den Karten */
  .cards__aktion { margin-top: 12px; }
}