@charset "UTF-8";
/* ============================================================================
   Taxi Döhrn - Designsystem
   Eine Schriftfamilie (Archivo Variable, lokal), eine Akzentfarbe (Signalrot
   aus dem Logo), ein gestuftes Radius-System. Helle Oberfläche als Standard,
   dunkle Marken-Flächen als bewusste Klammer oben und unten.
   ========================================================================= */

/* ---------- Schrift (lokal, keine externen Requests) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --signal: #E0000D;          /* exakt aus dem Logo gemessen */
  --signal-dark: #B00009;
  --signal-ink: #FFFFFF;
  /* Textlinks brauchen einen dunkleren Ton als die Signalfarbe: das reine
     Logorot erreicht auf der elfenbeinfarbenen Fläche keine 4,5:1. */
  --link: #B00009;

  --asphalt: #101418;         /* dunkle Markenfläche */
  --asphalt-2: #171C21;
  --asphalt-3: #232A31;

  --surface: #FBFAF8;
  --surface-2: #F1EDE5;       /* Elfenbein, greift die Wagenfarbe der Flotte auf */
  --surface-3: #FFFFFF;

  --ink: #14181C;
  --ink-2: #4A535C;
  --ink-3: #6C767F;
  --line: #DFDAD1;
  --line-2: #EBE7E0;

  --on-dark: #F3F1EE;
  --on-dark-2: #A9B3BC;
  --on-dark-3: #7C868F;
  --line-dark: #2C343B;

  /* Radien in drei Stufen. Die Werte sind so gewählt, dass Innen- und
     Außenradius zusammenpassen: --r-lg minus Innenabstand ergibt --r
     (20 px Menü minus 8 px Polsterung = 12 px Menüpunkt). Sonst wirken
     verschachtelte Ecken schief. */
  --r-sm: 6px;    /* Fokusring, feine Kanten */
  --r: 12px;      /* Bedienelemente: Knöpfe, Felder, Menüpunkte */
  --r-lg: 20px;   /* Flächen: Karten, Bilder, Panels */
  --r-pill: 999px;

  --wrap: 1280px;
  --gut: clamp(1.25rem, 4.2vw, 3.5rem);
  --sec: clamp(4rem, 9vw, 7.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t: 320ms;
  --t-slow: 720ms;

  --shadow: 0 1px 2px rgba(20, 24, 28, .05), 0 8px 24px -12px rgba(20, 24, 28, .16);
  --shadow-lg: 0 2px 4px rgba(20, 24, 28, .06), 0 22px 50px -20px rgba(20, 24, 28, .26);

  --header-h: 72px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #14181C;
    --surface-2: #1A2026;
    --surface-3: #1D242A;
    --ink: #F0EEEA;
    --ink-2: #AEB7BF;
    --ink-3: #8C959D;
    --line: #2B333A;
    --line-2: #232A30;
    --link: #FF8078;
    --asphalt: #0C1014;
    --asphalt-2: #12171B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 22px 50px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--signal); color: #fff; }

/* ---------- Fokus: immer sichtbar, nie unterdrückt ---------- */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: #fff; }

.skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--signal); color: #fff;
  padding: .9rem 1.4rem; font-weight: 700; text-decoration: none;
}
.skip:focus { transform: translateY(0); }

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

/* ---------- Typografie ---------- */
.d1, .d2, .d3 {
  font-variation-settings: 'wdth' 112, 'wght' 800;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: -.022em;
  text-wrap: balance;
  /* Silbentrennung als Sicherheitsnetz in jeder Breite. Sie greift nur, wenn ein
     Wort sonst nicht passt, und ist allemal besser als ein Bruch mitten im Wort. */
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Auf schmalen Displays die Breitenachse zurücknehmen: mehr Zeichen pro Zeile,
   ohne Schriftgrad zu verlieren. */
@media (max-width: 640px) {
  .d1, .d2, .d3 { font-variation-settings: 'wdth' 100, 'wght' 800; }
}
.d1 { font-size: clamp(1.95rem, 1rem + 4.6vw, 4.5rem); line-height: .92; letter-spacing: -.028em; }
.d2 { font-size: clamp(1.6rem, .95rem + 2.9vw, 3.35rem); }
.d3 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); letter-spacing: -.014em; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); font-variation-settings: 'wdth' 104, 'wght' 720; }
h4 { font-size: 1.05rem; }

p { text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1rem + .42vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.on-dark .lead, .hero .lead { color: var(--on-dark-2); }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.prose h2 { margin: 2.4em 0 .6em; }
.prose h3 { margin: 1.9em 0 .45em; }
.prose ul, .prose ol { margin: 1.1em 0; padding-left: 1.3em; display: grid; gap: .5em; }
.prose a { color: var(--link); text-underline-offset: 3px; }
.dim { color: var(--ink-2); }

.eyebrow {
  font-size: .75rem; font-variation-settings: 'wdth' 100, 'wght' 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--link);
  display: block; margin-bottom: 1rem;
}
.on-dark .eyebrow { color: #FF6A62; }

/* ---------- Raster ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.sec-t { padding-top: var(--sec); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
/* Ohne min-width:0 wächst eine Rasterspur bis zur Breite des längsten Wortes
   und zieht die ganze Seite mit. Bei deutschen Komposita passiert das schnell. */
.grid12 > * { min-width: 0; }
@media (max-width: 860px) { .grid12 { grid-template-columns: 1fr; gap: 2rem; } .grid12 > * { grid-column: 1 / -1 !important; } }

.on-dark { background: var(--asphalt); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.tinted { background: var(--surface-2); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--signal); --btn-fg: var(--signal-ink); --btn-bd: var(--signal);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem; min-height: 52px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--r);
  font-variation-settings: 'wdth' 100, 'wght' 730;
  font-size: 1rem; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: 0; background: #000; opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(224, 0, 13, .6); }
.btn:hover::after { opacity: .12; }
.btn:active { transform: translateY(0) scale(.985); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line);
}
.btn--ghost:hover { --btn-bd: var(--ink); box-shadow: none; }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover::after { opacity: .05; }

/* Auf dunklem Grund: heller Rahmen, damit der Kontrast sicher über AA liegt */
.on-dark .btn--ghost, .hero .btn--ghost {
  --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px); background: rgba(255, 255, 255, .07);
}
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover { --btn-bd: #fff; background: rgba(255, 255, 255, .14); }
.on-dark .btn--ghost::after, .hero .btn--ghost::after { background: #fff; }

.btn--lg { padding: 1.15rem 1.9rem; min-height: 60px; font-size: 1.075rem; }
.btn--full { width: 100%; }
.btn .ic { width: 1.25em; height: 1.25em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
/* Auf schmalen Displays untereinander und über die volle Breite:
   größere Trefferflächen und eine ruhigere Kante. */
@media (max-width: 520px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* Textlink mit Pfeil, der beim Hover ausschert */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  text-decoration: none; color: var(--link);
  padding: .3rem 0;
}
.arrow-link .ic { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease); }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.arrow-link:hover .ic { transform: translateX(5px); }
.on-dark .arrow-link { color: #FF6A62; }

.ic { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }
.ic-lg { width: 2.35rem; height: 2.35rem; color: var(--signal); }

/* ---------- Kopfzeile ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease), color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
  color: #fff;
}
.header__in { display: flex; align-items: center; gap: 1.25rem; width: 100%; }
.header.is-solid {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
}
/* Auf Unterseiten ohne dunkle Bühne startet die Leiste sofort hell */
.header--solid-always {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
}

.brand { display: flex; align-items: center; text-decoration: none; color: inherit; flex: none; }
.brand svg { height: 30px; width: auto; transition: height var(--t) var(--ease); }
@media (min-width: 700px) { .brand svg { height: 36px; } }

/* Nur noch drei Punkte, deshalb passt die Leiste schon ab 900 px einzeilig. */
.nav { margin-left: auto; display: none; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem); }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  text-decoration: none; font-size: .95rem;
  font-variation-settings: 'wdth' 100, 'wght' 620;
  padding: .45rem .1rem; position: relative; white-space: nowrap;
  opacity: .92;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { opacity: 1; }

/* ---------- Aufklappmenü "Unsere Dienstleistungen" ---------- */
.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; padding: .45rem .1rem; cursor: pointer;
  color: inherit; font-size: .95rem;
  font-variation-settings: 'wdth' 100, 'wght' 620;
  white-space: nowrap; opacity: .92; position: relative;
}
.nav__toggle::after {
  content: ''; position: absolute; left: 0; right: 1.3rem; bottom: -2px; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav__toggle:hover { opacity: 1; }
.nav__toggle:hover::after,
.nav__toggle[aria-expanded="true"]::after,
.nav__toggle[data-current]::after { transform: scaleX(1); }
.nav__toggle[data-current] { opacity: 1; }
.nav__toggle .ic { width: 1rem; height: 1rem; transition: transform var(--t) var(--ease); }
.nav__toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + .7rem); left: -1rem; z-index: 5;
  min-width: 17rem; padding: .5rem;
  display: grid; gap: 1px;
  background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.nav__menu[hidden] { display: none; }
.nav__menu a {
  padding: .7rem .85rem; border-radius: var(--r);
  font-size: .95rem; opacity: 1; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease);
}
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--surface-2); }
.nav__menu a[aria-current="page"] { color: var(--link); }
/* Letzter Punkt ist die Übersicht, optisch abgesetzt */
.nav__menu a:last-child {
  margin-top: .35rem; padding-top: .8rem;
  border-top: 1px solid var(--line); border-radius: var(--r);
  font-size: .89rem; color: var(--ink-2);
}
@media (prefers-reduced-motion: no-preference) {
  .nav__menu { animation: menuIn .22s var(--ease) both; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

.header__call {
  margin-left: auto; display: inline-flex; align-items: center; gap: .55rem;
  background: var(--signal); color: #fff; text-decoration: none;
  padding: .6rem 1.05rem; border-radius: var(--r); min-height: 44px;
  font-variation-settings: 'wdth' 100, 'wght' 750;
  transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
@media (min-width: 1060px) { .header__call { margin-left: .5rem; } }
.header__call:hover { background: var(--signal-dark); transform: translateY(-1px); }
.header__call .ic { width: 1.15rem; height: 1.15rem; }
.header__call span { display: none; }
@media (min-width: 460px) { .header__call span { display: inline; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: .35rem;
  background: transparent; border: 1px solid currentColor; border-radius: var(--r);
  color: inherit; cursor: pointer; opacity: .8;
}
.burger:hover { opacity: 1; }
@media (min-width: 1060px) { .burger { display: none; } }

/* ---------- Mobiles Menü ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 120;
  background: var(--asphalt); color: var(--on-dark);
  display: grid; grid-template-rows: var(--header-h) 1fr;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  /* visibility schaltet beim Öffnen sofort um und beim Schließen erst nach der
     Blende. Würde visibility mitanimiert, wäre beim Öffnen im ersten Moment
     noch "hidden" aktiv und kein Menüpunkt könnte den Fokus annehmen. */
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  overflow-y: auto;
}
.sheet.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear 0s;
}
.sheet__top { display: flex; align-items: center; justify-content: flex-end; padding-inline: var(--gut); }
.sheet__close {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r);
  color: #fff; cursor: pointer;
}
.sheet nav { padding: 1rem var(--gut) 3rem; display: grid; align-content: start; }
.sheet nav a {
  text-decoration: none; padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-variation-settings: 'wdth' 106, 'wght' 700;
  font-size: 1.35rem; text-transform: uppercase; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
  opacity: 0; transform: translateY(10px);
}
.sheet.is-open nav a { animation: sheetIn .5s var(--ease) forwards; }
.sheet nav a .ic { width: 1.1rem; height: 1.1rem; color: var(--signal); }
/* Gruppenüberschrift im mobilen Menü, die Punkte darunter sind eingerückt */
.sheet__label {
  padding: 1.4rem 0 .5rem; color: var(--on-dark-3);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
  font-variation-settings: 'wdth' 100, 'wght' 700;
}
.sheet nav a.sheet__sub { padding-left: 1rem; font-size: 1.15rem; }
@keyframes sheetIn { to { opacity: 1; transform: none; } }
.sheet__foot { padding: 1.75rem var(--gut) 3rem; display: grid; gap: .8rem; }

/* ---------- Bühne ---------- */
.hero { position: relative; background: var(--asphalt); color: var(--on-dark); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Links dunkel genug für weiße Schrift, rechts hell genug, dass man
     die Flotte tatsächlich sieht. Sie ist das Verkaufsargument. */
  background:
    linear-gradient(94deg, rgba(9,12,15,.93) 0%, rgba(9,12,15,.8) 32%, rgba(9,12,15,.4) 60%, rgba(9,12,15,.22) 100%),
    linear-gradient(to top, rgba(9,12,15,.6) 0%, transparent 34%);
}
@media (max-width: 860px) {
  .hero__scrim { background: linear-gradient(to top, rgba(9,12,15,.95) 14%, rgba(9,12,15,.72) 55%, rgba(9,12,15,.62) 100%); }
  .hero__media img { object-position: 58% 60%; }
}
.hero__in {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  min-height: min(100dvh, 860px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__col { max-width: 46rem; }
.hero .d1 { color: #fff; }
.hero .lead { margin-top: 1.35rem; }
.hero .btn-row { margin-top: 2.15rem; }

/* Rote Signalkante über der Überschrift: baut sich wie ein Dachzeichen auf */
.signal-rule {
  height: 5px; width: 96px; background: var(--signal); margin-bottom: 1.6rem;
  transform-origin: left; border-radius: var(--r-pill);
}

/* ---------- Vertrauensleiste: Trennlinien statt Karten ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .facts { grid-template-columns: 1fr; } }
.fact {
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.9rem);
  border-left: 1px solid var(--line);
  display: grid; gap: .55rem; align-content: start;
}
.facts > .fact:first-child { border-left: 0; }
@media (max-width: 900px) {
  .fact { border-top: 1px solid var(--line); }
  .facts > .fact:nth-child(-n+2) { border-top: 0; }
  .facts > .fact:nth-child(odd) { border-left: 0; }
}
@media (max-width: 460px) {
  .fact { border-left: 0; border-top: 1px solid var(--line); }
  .facts > .fact:first-child { border-top: 0; }
}
.fact .ic { color: var(--signal); width: 1.7rem; height: 1.7rem; }
.fact h3 { font-size: 1.06rem; }
.fact p { font-size: .95rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Leistungsraster (asymmetrisch, kein 3er-Kartenblock) ---------- */
/* Ein durchgehender Block mit Haarlinien statt einzelner Karten. Nur die
   Außenkante ist gerundet, innen bleiben die Trennlinien scharf. */
.tiles {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.tile {
  grid-column: span 2; background: var(--surface-3);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: inherit; position: relative; isolation: isolate;
  transition: background-color var(--t) var(--ease);
  min-height: 190px;
}
.tile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.tile:hover::before, .tile:focus-visible::before { transform: scaleX(1); }
/* Der Fokusring liegt innen. Außen würde ihn das overflow:hidden des
   Rasters an den Eckkacheln abschneiden. */
.tile:focus-visible { outline-offset: -4px; border-radius: 0; }
.tile:hover { background: var(--surface-2); }
.tile .ic { color: var(--signal); width: 1.85rem; height: 1.85rem; }
.tile h3 { font-size: 1.15rem; }
.tile p { font-size: .95rem; color: var(--ink-2); line-height: 1.5; margin-bottom: auto; }
.tile__go { display: inline-flex; align-items: center; gap: .45rem; color: var(--link); font-size: .9rem; font-variation-settings: 'wdth' 100, 'wght' 700; margin-top: 1rem; }
.tile__go .ic { width: 1rem; height: 1rem; transition: transform var(--t) var(--ease); }
.tile:hover .tile__go .ic { transform: translateX(4px); }

/* Zwei hervorgehobene Kacheln mit Bild */
.tile--wide { grid-column: span 3; }
.tile--media { grid-column: span 3; min-height: 300px; padding: 0; overflow: hidden; }
.tile--media .tile__img { position: absolute; inset: 0; z-index: -1; }
.tile--media .tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile--media:hover .tile__img img { transform: scale(1.05); }
.tile--media .tile__body {
  position: relative; padding: clamp(1.4rem, 2.6vw, 2.1rem);
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem;
  background: linear-gradient(to top, rgba(9,12,15,.92) 8%, rgba(9,12,15,.55) 55%, rgba(9,12,15,.2) 100%);
  color: #fff;
}
.tile--media h3 { color: #fff; font-size: 1.35rem; }
.tile--media p { color: rgba(255,255,255,.86); margin-bottom: 0; }
.tile--media .tile__go { color: #fff; }
.tile--media::before { z-index: 1; }

@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile, .tile--wide, .tile--media { grid-column: span 2; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile--wide, .tile--media { grid-column: 1 / -1; }
  .tile--media { min-height: 240px; }
}

/* ---------- Ablauf-Schiene mit gezeichneter Linie ---------- */
.rail { display: grid; gap: 0; position: relative; }
.rail__line {
  position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px;
  background: var(--line-dark);
  overflow: hidden;
}
/* Ruhezustand ist der fertige Zustand, die Animation ist nur Zugabe. */
.rail__line::after {
  content: ''; position: absolute; inset: 0; background: var(--signal);
  transform: scaleY(1); transform-origin: top;
}
.step { display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; padding-block: 1.1rem; align-items: start; }
.step__dot {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--signal); border: 2px solid var(--signal); color: #fff;
  position: relative; z-index: 1;
}
.step__dot .ic { width: 1.25rem; height: 1.25rem; }

@keyframes drawLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dotOn {
  from { background: var(--asphalt-2); border-color: var(--line-dark); color: var(--on-dark-2); }
  to   { background: var(--signal); border-color: var(--signal); color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Die Linie zeichnet sich mit dem Scrollen, die Punkte schalten der Reihe
       nach um. Das bildet die Abfolge der Schritte ab. */
    .rail__line::after {
      animation: drawLine linear;
      animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    .step__dot {
      animation: dotOn linear;
      animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
}
.step h3 { color: #fff; margin-bottom: .3rem; }
.step p { color: var(--on-dark-2); font-size: .98rem; }

/* ---------- Flotten-Laufband (genau einmal pro Seite) ---------- */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* Die Schleife läuft erst mit der Klasse is-loop, die JavaScript setzt, sobald
   der zweite Bildersatz angehängt ist. Die Animation verschiebt um die halbe
   Streifenbreite; mit nur einem Satz liefe der Streifen ins Leere. */
.marquee__track { display: flex; gap: 12px; width: max-content; }
.marquee__track.is-loop { animation: slide 52s linear infinite; }
.marquee__set { display: flex; gap: 12px; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee figure { width: clamp(230px, 30vw, 380px); flex: none; }
.marquee img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
@keyframes slide { to { transform: translateX(calc(-50% - 6px)); } }

/* ---------- Karten / Panels ---------- */
.panel {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
}

/* Bild füllt die Höhe der Textspalte daneben, damit kein Loch entsteht.
   Auf schmalen Displays wieder normales Seitenverhältnis. */
.fill-h { height: 100%; min-height: 320px; border-radius: var(--r-lg); }
.fill-h img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 860px) { .fill-h { height: auto; min-height: 0; } .fill-h img { height: auto; } }
.on-dark .panel { background: var(--asphalt-2); border-color: var(--line-dark); }

.checklist { display: grid; gap: .8rem; padding: 0; margin: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem; align-items: start; }
.checklist .ic { width: 1.4rem; height: 1.4rem; color: var(--signal); margin-top: .12rem; }

/* Orte: Pillen statt langer Liste */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.pills li {
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .5rem .85rem; font-size: .93rem; background: var(--surface-3);
  font-variation-settings: 'wdth' 100, 'wght' 560;
}

/* ---------- Kontaktzeile groß ---------- */
.big-call {
  display: inline-flex; align-items: center; gap: .9rem; text-decoration: none;
  font-variation-settings: 'wdth' 108, 'wght' 800;
  font-size: clamp(2rem, 1rem + 4.2vw, 3.6rem);
  letter-spacing: -.02em; color: #fff; line-height: 1;
}
.big-call .ic { width: .8em; height: .8em; color: var(--signal); transition: transform var(--t) var(--ease); }
.big-call:hover .ic { transform: rotate(-14deg) scale(1.08); }
.big-call:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.35rem 3rem 1.35rem 0;
  position: relative; font-variation-settings: 'wdth' 102, 'wght' 700;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic {
  position: absolute; right: 0; top: 50%; margin-top: -.75rem;
  width: 1.5rem; height: 1.5rem; color: var(--signal);
  transition: transform var(--t) var(--ease);
}
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq__body { overflow: hidden; }
.faq__body > div { padding-bottom: 1.5rem; max-width: 62ch; color: var(--ink-2); }
/* Sanftes Auf- und Zuklappen ohne Höhenmessung */
.faq details::details-content { block-size: 0; transition: block-size var(--t) var(--ease), content-visibility var(--t) allow-discrete; overflow: hidden; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 1.35rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
@media (max-width: 660px) { .form__grid { grid-template-columns: 1fr; } }
.span2 { grid-column: 1 / -1; }

/* align-content: start ist hier entscheidend. Ohne die Angabe verteilt das
   Raster überschüssige Höhe auf seine Zeilen: Steht neben einem Feld eines mit
   Erklärungstext, ist die Rasterzeile höher, und das Feld ohne Text zieht sein
   Eingabefeld auf, um die Lücke zu füllen. Nebeneinander liegende Felder waren
   dadurch bis zu 14 px unterschiedlich hoch. */
.field { display: grid; gap: .42rem; align-content: start; }
.field > label {
  font-size: .88rem; font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: .01em; color: var(--ink);
}
.field .req { color: var(--link); }
.field input, .field select, .field textarea {
  width: 100%; padding: .82rem .95rem;
  background: var(--surface-3); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Feste Höhe statt min-height: Auswahllisten, Datums- und Zeitfelder bringen
   je nach Typ eine andere Eigenhöhe mit. Nebeneinander fiel das als schiefe
   Kante auf. */
.field input, .field select { height: 52px; }
.field textarea { height: auto; min-height: 130px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent);
}
.field .hint { font-size: .82rem; color: var(--ink-2); }
.field .err { font-size: .85rem; color: var(--signal-dark); font-variation-settings: 'wdth' 100, 'wght' 640; display: none; }
@media (prefers-color-scheme: dark) { .field .err { color: #FF8078; } }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--signal); }
.field.is-bad .err { display: block; }

fieldset { border: 0; padding: 0; margin: 0; }
legend {
  font-size: .88rem; font-variation-settings: 'wdth' 100, 'wght' 700;
  padding: 0; margin-bottom: .6rem;
}
.checks { display: flex; flex-wrap: wrap; gap: .6rem; }
.check {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1.5px solid var(--line); border-radius: var(--r);
  padding: .62rem .9rem; cursor: pointer; background: var(--surface-3);
  font-size: .95rem;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.check:hover { border-color: var(--ink-3); }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--signal); margin: 0; }
.check:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--surface-3)); }

.consent { display: grid; grid-template-columns: 1.35rem 1fr; gap: .8rem; align-items: start; font-size: .93rem; color: var(--ink-2); }
.consent input { width: 1.35rem; height: 1.35rem; accent-color: var(--signal); margin-top: .12rem; }
.consent a { color: var(--link); }

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

.note {
  border-left: 3px solid var(--signal);
  background: var(--surface-2); padding: 1rem 1.15rem;
  font-size: .95rem; border-radius: var(--r);
}
.on-dark .note { background: var(--asphalt-2); color: var(--on-dark-2); }

.form__status { display: none; padding: 1.1rem 1.25rem; border-radius: var(--r); font-variation-settings: 'wdth' 100, 'wght' 620; }
.form__status.is-ok { display: block; background: #E8F3EC; color: #10502C; border: 1px solid #B6D9C4; }
.form__status.is-err { display: block; background: #FDECEB; color: #8E1109; border: 1px solid #F3C2BE; }
@media (prefers-color-scheme: dark) {
  .form__status.is-ok { background: #12291C; color: #8FDCAC; border-color: #1F4630; }
  .form__status.is-err { background: #2A1210; color: #FFA69E; border-color: #4A1D18; }
}
.btn[aria-busy="true"] { pointer-events: none; opacity: .72; }

/* ---------- Fußzeile ---------- */
.footer { background: var(--asphalt); color: var(--on-dark-2); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { color: var(--on-dark-2); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: #fff; margin-bottom: 1rem; font-variation-settings: 'wdth' 100, 'wght' 700; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .96rem; }
.footer__logo { width: 210px; color: #fff; margin-bottom: 1.25rem; }
.footer__bar {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .88rem; color: var(--on-dark-3);
}
address { font-style: normal; }

/* ---------- Feste Anrufleiste auf kleinen Displays ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(105%);
  transition: transform 420ms var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 28px -14px rgba(0, 0, 0, .55);
}
.callbar.is-up { transform: none; }
@media (min-width: 900px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.05rem .6rem; text-decoration: none; min-height: 58px;
  font-variation-settings: 'wdth' 100, 'wght' 750; font-size: 1.02rem;
}
.callbar__tel { background: var(--signal); color: #fff; }
.callbar__ask { background: var(--asphalt); color: #fff; }
.callbar .ic { width: 1.25rem; height: 1.25rem; }
body.has-callbar { padding-bottom: 0; }

/* ---------- Scroll-Einblendungen ----------
   Umgesetzt mit scroll-gesteuerten CSS-Animationen. Die sind an die Position
   gebunden, nicht an ein Ereignis: Beim Springen über einen Abschnitt (Ankerlink,
   Zurück-Navigation) kann daher kein Inhalt unsichtbar hängen bleiben.
   Der Ruhezustand ist immer der sichtbare. Browser ohne Unterstützung und
   Besucher ohne JavaScript sehen die Seite vollständig, nur eben ohne Effekt. */
@keyframes revealIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Bewusst ohne fill-mode: außerhalb des Bereichs und bei inaktiver Zeitleiste
       (etwa auf einer Seite, die gar nicht scrollt) gilt der Grundzustand, und der
       ist sichtbar. Alle Bereiche starten bei "entry 0%", damit nichts aufblitzt.
       Gestaffelt wird über das Ende, nicht über den Anfang. */
    [data-reveal] {
      animation: revealIn linear;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    [data-reveal][data-d="1"] { animation-range: entry 0% entry 62%; }
    [data-reveal][data-d="2"] { animation-range: entry 0% entry 74%; }
    [data-reveal][data-d="3"] { animation-range: entry 0% entry 86%; }
    [data-reveal][data-d="4"] { animation-range: entry 0% entry 98%; }
    [data-reveal][data-d="5"] { animation-range: entry 0% contain 8%; }
  }
}

/* Bühnen-Auftritt */
/* Grundzustand ist sichtbar, die Animation liefert den Startzustand über
   fill-mode "both". Ohne JavaScript steht der Text also sofort da. */
.js .hero__col > * { animation: riseIn .8s var(--ease) both; }
.js .hero .signal-rule { animation: ruleIn .62s var(--ease) both; }
.js .hero__col > *:nth-child(2) { animation-delay: .12s; }
.js .hero__col > *:nth-child(3) { animation-delay: .22s; }
.js .hero__col > *:nth-child(4) { animation-delay: .32s; }
/* Die Überschrift bewegt sich nur, sie blendet nicht ein: ein Element mit
   opacity 0 zählt nicht als Largest Contentful Paint. Da ein bildschirmfüllendes
   Hintergrundfoto von Chrome ebenfalls nicht als Kandidat gewertet wird, wäre
   sonst überhaupt kein LCP messbar. */
.js .hero__col > h1 { animation-name: riseSolid; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes riseSolid { from { transform: translateY(16px); } to { transform: none; } }
@keyframes ruleIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
.js .hero__media img { animation: settle 2.4s var(--ease) forwards; }
@keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Bild sanft aufblenden, sobald geladen (LQIP darunter) */
.ph { background-size: cover; background-position: center; overflow: hidden; }
.ph > img { opacity: 0; transition: opacity .6s var(--ease); }
.ph > img.is-loaded, .no-js .ph > img { opacity: 1; }
.ph--now > img { opacity: 1; transition: none; }

/* ---------- Reduzierte Bewegung: alles Nicht-Essenzielle aus ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; animation: none; }
  .hero__col > * { opacity: 1; animation: none; }
  .marquee__track { animation: none; }
  .callbar { transition: none; }
}

/* ---------- Druck ---------- */
@media print {
  .header, .callbar, .sheet, .marquee, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__media, .hero__scrim { display: none; }
  .hero, .on-dark, .footer { background: #fff !important; color: #000 !important; }
  .hero .d1, .on-dark h2, .footer h2 { color: #000 !important; }
}