/* Basil FPV – main.css
   Mobile-first. Breakpoint für Desktop-Layout: 900px.
   Aufbau: 0 Schriften · 1 Tokens · 2 Basis · 3 Layout · 4 Bausteine · 5 Sektionen */

/* 0 ─ Schriften
   Lokal ausgeliefert (RB-06), nur Subset „latin“ (deckt Deutsch ab).
   Quelle: Fontsource 5.3.0, Lizenz SIL OFL 1.1, siehe fonts/LICENSE-*.txt */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-opsz.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('../fonts/figtree-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
}

/* 1 ─ Tokens */
:root {
  --bg: #f5f7f8;
  --ink: #12161a;
  --muted: #46525a;
  --subtle: #5f6b74;
  --line: #e3e8eb;
  --surface: #e6ebee;
  --surface-2: #dbe2e6;
  --card: #ffffff;

  --green: #4fc23a;
  --green-dark: #2b7627;
  --green-deep: #1f5c1c;
  --green-tint: #e1f3da;
  --green-dot: #3aa52c;
  --green-light: #7fd36a;

  /* Fehler: Rahmen/Symbol, Text, Hinweisfläche. Text nie direkt aufs Grün des
     Kontaktpanels (Rot auf Grün ist bei Rot-Grün-Schwäche kaum zu unterscheiden). */
  --error: #9b1c14;
  --error-ink: #7a1712;
  --error-tint: #fdeceb;
  /* Aufnahme-Punkt („● REC“) in der Flugroute */
  --rec: #e0322b;

  --dark-2: #1d2328;
  --dark-line: #39434a;
  --dark-text: #c3ccd2;
  --dark-subtle: #9aa6ae;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --gutter: 20px;
  --panel-inset: 12px;
  --radius-panel: 28px;
  --header-h: 73px;
}
@media (min-width: 900px) {
  :root { --gutter: 48px; --panel-inset: 48px; --radius-panel: 32px; --header-h: 88px; }
}

/* 2 ─ Basis
   Hintergrund sitzt auf html UND body; overflow-x: clip verhindert seitliches
   Wischen (Ursache des Hintergrund-Bugs im Mockup waren überstehende Elemente). */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
/* height: auto, damit die width/height-Attribute nur das Seitenverhältnis vorgeben. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dark); }
a:hover { color: var(--green-deep); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; }
p { margin: 0; text-wrap: pretty; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.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;
}

/* 3 ─ Layout */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.panel-wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--panel-inset); }
.section { padding-top: 56px; }
@media (min-width: 900px) { .section { padding-top: 96px; } }
/* Unterseiten (Leistungen, Projekte, Über uns): Kopf mit h1, Abstand zum Footer. */
.page { padding-bottom: 40px; }
.page-intro { padding-top: 32px; padding-bottom: 28px; }
.page-intro .h-section { margin-bottom: 12px; }
.page-intro .lead { max-width: 640px; }
@media (min-width: 900px) {
  .page { padding-bottom: 64px; }
  .page-intro { padding-top: 56px; padding-bottom: 40px; }
  .page-intro .h-section { margin-bottom: 16px; }
}

.eyebrow { font-weight: 600; font-size: 14px; color: var(--green-dark); margin-bottom: 8px; }
.eyebrow--light { color: var(--green-light); }
.h-section { font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.h-section--sm { font-size: 34px; }
.lead { font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (min-width: 900px) {
  .eyebrow { font-size: 15px; margin-bottom: 10px; }
  .h-section { font-size: 56px; }
  .h-section--sm { font-size: 40px; }
  .lead { font-size: 17px; }
}

/* 4 ─ Bausteine */

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 17px; }
.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary:hover { background: var(--green-deep); color: #fff; }
.btn--secondary { background: var(--surface); color: var(--ink); }
.btn--secondary:hover { background: var(--surface-2); color: var(--ink); }
.btn--accent { background: var(--green); color: var(--ink); font-weight: 700; }
.btn--accent:hover { background: var(--green-light); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: var(--dark-2); color: var(--bg); }
.btn--block { display: flex; width: 100%; }
@media (min-width: 900px) { .btn--lg { min-height: 58px; } }

/* Link mit grüner Unterstreichung */
.link-underline { position: relative; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--green); }
/* Trefferfläche ≥ 44 px (QA-16), ohne die Unterstreichung zu verschieben. */
.link-underline::after { content: ''; position: absolute; inset: -11px 0; }
.link-underline:hover { color: var(--green-deep); }

/* Badge (Abonnenten) */
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-deep); font-size: 13px; font-weight: 600;
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); }
@media (min-width: 900px) {
  .badge { padding: 8px 14px; font-size: 14px; }
  .badge__dot { width: 8px; height: 8px; }
}

/* Chips & Tags */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chip { border: 1px solid var(--dark-line); padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.tag { background: var(--surface); padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag--team { background: var(--green-tint); color: var(--green-deep); }
@media (min-width: 900px) {
  .chips { gap: 8px; }
  .chip { padding: 8px 14px; font-size: 14px; }
  .tag { padding: 6px 12px; font-size: 13px; }
}

/* Kennzahl-Kachel */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.stat { background: var(--green-tint); border-radius: 16px; padding: 14px; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.2; margin: 0; }
.stat__label { font-size: 13px; color: var(--green-deep); }
.stats--lg .stat { border-radius: 18px; }
.stats--lg .stat__value { font-size: 26px; }
/* Bei ungerader Anzahl füllt die letzte Kachel die Zeile */
.stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .stats { gap: 10px; }
  .stats--row { grid-template-columns: repeat(3, 1fr); }
  .stats--row .stat:last-child:nth-child(odd) { grid-column: auto; }
  .stat { border-radius: 18px; padding: 16px; }
  .stat__value { font-size: 30px; }
  .stat__label { font-size: 14px; }
  .stats--lg .stat { border-radius: 20px; padding: 18px; }
  .stats--lg .stat__value { font-size: 34px; }
}

/* YouTube-Consent-Embed (2-Klick-Lösung) */
.yt-embed { position: relative; overflow: hidden; background: var(--ink); }
.yt-embed > img { width: 100%; height: 100%; object-fit: cover; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-embed.is-loaded .yt-consent, .yt-embed.is-loaded > img { display: none; }
.yt-consent {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px; border-radius: 18px;
  background: rgba(18, 22, 26, .82); color: var(--bg); display: flex; align-items: center; gap: 12px;
}
.yt-consent .btn { flex: none; }
.yt-consent__note { font-size: 11px; line-height: 1.35; color: var(--dark-text); }
@media (min-width: 900px) { .yt-consent { border-radius: 16px; } }

/* Kommentar-Karte wie auf YouTube: Piktogramm und Name als Kopfzeile, darunter der Text */
.comment__bubble { background: var(--card); border-radius: 18px; padding: 14px 16px; margin: 0; box-shadow: 0 1px 2px rgba(18,22,26,.06); }
.comment__author { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.comment__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); flex: none; display: flex; align-items: center; justify-content: center; color: var(--subtle); }
.comment__avatar .user-icon { width: 60%; height: 60%; }
.comment__text { font-size: 15px; line-height: 1.45; margin: 0; }
.comment__source { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--subtle); }
/* Innenabstand vergrößert die Trefferfläche auf 44 px, ohne den Zeilenfluss zu ändern (QA-16). */
.comment__source a { padding: 13px 0; color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .comment__bubble { border-radius: 20px; padding: 16px 20px; }
  .comment__author { margin-bottom: 10px; }
  .comment__text { font-size: 16px; }
}

/* Foto-Platzhalter */
.photo-placeholder {
  width: 100%; aspect-ratio: 1; border-radius: 20px;
  background: var(--surface-2) repeating-linear-gradient(135deg, rgba(18,22,26,.06) 0 2px, transparent 2px 10px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--subtle);
}

/* Platzhalter für noch fehlende Texte (RB-07), auffällig, damit vor dem Go-live keiner übersehen wird */
.placeholder {
  padding: 8px 12px; border: 1px dashed currentColor; border-radius: 12px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--subtle);
}

/* Formularfelder */
.field { display: block; }
.field__input {
  display: block; width: 100%; min-height: 52px; padding: 14px; border: 2px solid transparent; border-radius: 14px;
  background: var(--bg); font-size: 16px; color: var(--ink);
}
.field__input::placeholder { color: var(--subtle); opacity: 1; }
.field__input:focus { outline: none; border-color: var(--ink); }
.field__input--area { min-height: 110px; resize: vertical; }
/* Fehlerhaftes Feld und Hinweis bilden eine Karte: Rahmen um beides, Hinweis hinterlegt. */
.field.has-error .field__input { border-color: var(--error); border-radius: 14px 14px 0 0; }
/* Fokus bleibt sichtbar, ohne die Karte zu unterbrechen: dunkler Ring innen am roten Rahmen. */
.field.has-error .field__input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.field__error {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 14px 9px;
  border: 2px solid var(--error); border-top: 0; border-radius: 0 0 14px 14px;
  background: var(--error-tint); color: var(--error-ink); font-size: 14px; font-weight: 600; line-height: 1.4;
}
/* Symbol im Kreis zusätzlich zur Farbe: „!“ bei Fehlern, Haken bei Erfolg. Leerer
   Alternativtext, damit Screenreader es nicht vorlesen. */
.field__error::before,
.alert::before {
  flex: none; display: grid; place-content: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  color: var(--card); font-size: 12px; font-weight: 800; line-height: 1;
}
.field__error::before,
.alert--error::before { content: "!"; content: "!" / ""; background: var(--error); }
.check { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 14px; cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 24px; height: 24px;
  border-radius: 7px; background: var(--bg); display: grid; place-content: center; cursor: pointer;
}
.check input::after { content: ""; width: 12px; height: 7px; border: solid var(--ink); border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
.check input:checked::after { opacity: 1; }
.check a { color: inherit; }
.check.has-error { padding: 8px 14px; border: 2px solid var(--error); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--bg); }
.check.has-error input { box-shadow: inset 0 0 0 2px var(--error); }
/* Der Hinweis zum Haken steht nach dem Label, die Lücke des Formular-Grids entfällt. */
.check + .field__error { margin-top: -10px; }
/* Meldung über dem Formular (Fehler) bzw. an seiner Stelle (Bestätigung). */
.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 2px solid; border-radius: 14px;
  font-size: 15px; font-weight: 500; line-height: 1.45;
}
.alert::before { margin-top: 2px; }
.alert a { color: inherit; font-weight: 700; white-space: nowrap; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.alert--error { border-color: var(--error); background: var(--error-tint); color: var(--error-ink); }
.alert--success { border-color: var(--green-deep); background: var(--green-tint); color: var(--green-deep); }
.alert--success::before {
  content: ""; content: "" / "";
  background: var(--green-deep) url('../img/icon-check.svg') center / 12px no-repeat;
}
@media (min-width: 900px) {
  .field__input { font-size: 15px; padding: 16px; }
  .check { gap: 10px; }
  .check input { width: 22px; height: 22px; border-radius: 6px; }
}

/* 5 ─ Sektionen */

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; padding-inline: 16px; max-width: 1200px; margin-inline: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--green); }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.site-header__mobile { display: flex; gap: 8px; align-items: center; }
.burger {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.main-nav { display: none; }
.mobile-nav { border-top: 1px solid var(--line); padding: 8px 16px 16px; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-nav a { display: flex; align-items: center; min-height: 52px; padding-inline: 14px; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
/* Aufgerufene Seite wie am Desktop: schwarz hinterlegt. */
.mobile-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); border-radius: 14px; border-bottom-color: transparent; }
@media (min-width: 900px) {
  .site-header { border-bottom: 0; }
  .site-header__inner { padding: 20px var(--gutter); }
  .brand { gap: 12px; }
  .brand__logo { width: 48px; height: 48px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--green); }
  .brand__name { font-size: 22px; }
  .site-header__mobile, .mobile-nav { display: none !important; }
  .main-nav { display: block; }
  .main-nav ul { list-style: none; margin: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); padding: 6px; border-radius: 999px; }
  .main-nav a { display: block; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
  .main-nav a:hover { background: var(--surface-2); }
  .main-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
}

/* Hero */
.hero { padding-top: 28px; padding-bottom: 40px; overflow-x: clip; }
.hero .badge { margin-bottom: 18px; }
/* Die Zeilenhöhe unter 1 lässt den Hintergrund der Hervorhebung in die Zeile darüber
   ragen. Er wird Zeile für Zeile nach deren Text gemalt und verdeckte sonst Unterlängen
   wie „g“ und Komma. z-index: -1 legt ihn dahinter, z-index: 0 am h1 hält ihn vor
   dem Seitenhintergrund. */
.hero__title { position: relative; z-index: 0; font-size: 44px; line-height: .98; letter-spacing: -.03em; margin-bottom: 16px; text-wrap: balance; }
.hero__highlight { position: relative; z-index: -1; background: var(--green); padding: 0 6px; border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__lead { font-size: 17px; line-height: 1.55; color: var(--muted); margin-bottom: 24px; }
.hero__actions { display: grid; gap: 10px; margin-bottom: 32px; }
/* Flugroute: Schnitt durch einen Firmenstandort, die Linie zeichnet sich einmal durch alle
   Stationen. Die Grundregeln zeigen den Endzustand, der Anfang steht nur in den
   @keyframes, damit bei „Bewegung reduzieren“ alles sofort sichtbar ist. Füllmodus
   „backwards“ statt „both“: Bleiben die Animationen nach dem Ende wirksam, rastert
   Chrome die Linie weiter getrennt und zeichnet ihre Kanten unscharf. */
.route { position: relative; max-width: 480px; margin: 0 auto; padding: 48px 12px 64px; background: var(--card); border-radius: 28px; box-shadow: 0 1px 2px rgba(18,22,26,.06); }
.route__map { display: block; width: 100%; height: auto; overflow: visible; }
.route__building { fill: none; stroke: var(--surface-2); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.route__building .route__detail { stroke-width: 3; }
.route__building .route__ground { stroke: var(--line); stroke-width: 3; }
.route__shadow { fill: none; stroke: var(--surface-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: route-fade 3s ease-in backwards; }
/* Strich 1, Lücke 2 bei pathLength="1": Bei Versatz 1 bleibt auch das Pfadende leer. */
.route__line { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 2; animation: route-draw 3s ease-in-out backwards; }
.route__stop { animation: route-pop .4s ease-out backwards; }
.route__stop circle { fill: var(--card); stroke: var(--green-dark); stroke-width: 3; }
/* Zeitpunkte, zu denen die Linie (3 s, ease-in-out) die Station erreicht. */
.route__stop--2 { animation-delay: .85s; }
.route__stop--3 { animation-delay: 1.25s; }
.route__stop--4 { animation-delay: 1.8s; }
.route__stop--5 { animation-delay: 2.9s; }
.route__station {
  font-family: var(--font-mono); font-size: 18px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round;
}
/* Die Drohne fliegt wie die Linie per CSS, nicht per SVG-Animation (animateMotion):
   Firefox startet diese erst mit dem load-Ereignis, die Drohne hinge dann hinter der
   Linie. Pfad wie .route__line in hero.html, Dauer und Kurve wie route-draw. */
.route__drone {
  fill: var(--ink); stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round;
  offset-path: path("M44 290 C68.3 288.7 143 283 190 282 C237 281 326.7 304.7 326 284 C325.3 263.3 182 194.3 186 158 C190 121.7 322.7 81.3 350 66");
  offset-distance: 100%; offset-rotate: 0deg; animation: route-fly 3s ease-in-out backwards;
}
.route__drone .route__rotor { fill: var(--green-tint); stroke-width: 1.5; }
.route__rec, .route__label { position: absolute; top: 16px; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1; }
.route__rec { left: 16px; display: flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.route__rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: route-blink 1.6s ease-in-out infinite; }
.route__label { right: 16px; color: var(--subtle); }
.route__summary {
  position: absolute; right: 16px; bottom: 16px; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: var(--green); color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  animation: route-pop .5s 3s ease-out backwards;
}
@keyframes route-draw { from { stroke-dashoffset: 1; } }
@keyframes route-fly { from { offset-distance: 0%; } }
@keyframes route-fade { from { opacity: 0; } }
@keyframes route-pop { from { opacity: 0; transform: translateY(6px); } }
@keyframes route-blink { 50% { opacity: .25; } }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 80px; }
  .hero .badge { margin-bottom: 24px; }
  .hero__title { font-size: 76px; line-height: .95; margin-bottom: 24px; }
  .hero__highlight { padding: 0 10px; border-radius: 14px; }
  .hero__lead { font-size: 19px; max-width: 500px; margin-bottom: 32px; }
  .hero__actions { display: flex; gap: 12px; margin-bottom: 0; }
  .route { max-width: none; margin: 0; padding: 56px 24px 72px; border-radius: 32px; }
  .route__rec, .route__label { top: 22px; font-size: 13px; }
  .route__rec { left: 24px; }
  .route__label { right: 24px; }
  .route__summary { right: 24px; bottom: 22px; font-size: 14px; }
}

@media (min-width: 1100px) { .route__station { font-size: 15px; } }

/* Angebot */
.offer { background: var(--ink); color: var(--bg); border-radius: var(--radius-panel); padding: 32px 20px; }
.offer__title { font-size: 36px; line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; }
.offer__text { font-size: 16px; line-height: 1.6; color: var(--dark-text); margin-bottom: 20px; }
.offer .chips { margin-bottom: 24px; }
.steps { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.step { background: var(--dark-2); border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.step__num { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; }
.step__title { font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.step__text { color: var(--dark-text); font-size: 14px; line-height: 1.45; }
.offer__cta { display: grid; padding-top: 20px; }
/* Startseite: Überleitung zur Leistungsseite, Buttons mobil volle Breite */
.offer__teaser { color: var(--dark-text); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.offer__actions { display: grid; gap: 10px; }
/* Leistungsseite: Abschnittsbeschriftungen */
.offer__label { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--green-light); margin: 0 0 10px; }
/* Desktop: Einleitung über die volle Breite, darunter auf der Leistungsseite die
   Schritte als Raster, damit neben einer langen Schrittliste keine leere Spalte
   entsteht, und auf der Startseite Überleitung und Buttons in einer Zeile. */
@media (min-width: 900px) {
  .offer { padding: 56px; }
  .offer__intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-bottom: 40px; }
  .offer .eyebrow { grid-column: 1; margin-bottom: 14px; }
  .offer__title { grid-column: 1; font-size: 56px; line-height: .95; margin-bottom: 0; }
  .offer__text { grid-column: 2; grid-row: 1 / 3; align-self: end; font-size: 17px; margin-bottom: 0; }
  .offer .chips { grid-column: 1 / -1; margin: 28px 0 0; }
  .offer__steps { display: flex; flex-wrap: wrap; gap: 24px 32px; }
  .steps { flex-basis: 100%; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .step { border-radius: 20px; padding: 22px 24px; grid-template-columns: 1fr; align-content: start; gap: 16px; }
  .step__num { width: 44px; height: 44px; }
  .step__title { font-size: 17px; margin-bottom: 4px; }
  .step__text { font-size: 15px; }
  /* Eigene Zeile über die volle Breite, Button zentriert unter den Schritten */
  .offer__cta { display: flex; flex-basis: 100%; justify-content: center; padding: 0; }
  .offer__more { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; }
  .offer__teaser { max-width: 560px; font-size: 16px; margin-bottom: 0; }
  .offer__actions { display: flex; flex: none; gap: 12px; }
  .offer__intro .offer__label { grid-column: 1 / -1; margin: 28px 0 0; }
  .offer__intro .offer__label + .chips { margin-top: 12px; }
  /* In der Flex-Zeile der Schritte: Beschriftung über die volle Breite, Abstand per gap */
  .offer__steps .offer__label { flex-basis: 100%; margin: 0 0 -12px; }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* Leistungsseite: Prinzip als helles Panel über dem Angebot, gleich aufgebaut wie .offer */
.reach { background: var(--surface); border-radius: var(--radius-panel); padding: 32px 20px; margin-bottom: 12px; }
.reach__title { font-size: 36px; line-height: 1; letter-spacing: -.02em; margin-bottom: 24px; }
.reach__points { display: grid; gap: 10px; margin: 0; }
.reach__point { background: var(--card); border-radius: 18px; padding: 18px; }
.reach__point dt { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.15; margin-bottom: 6px; }
.reach__point dt::before { content: ''; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--green); margin-bottom: 14px; }
.reach__point dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* Fazit: leitet zum Angebot darunter über */
.reach__payoff { border-left: 4px solid var(--green); padding-left: 16px; margin-top: 28px; }
.reach__text { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; margin-bottom: 12px; }
.reach__more { font-size: 15px; color: var(--muted); }
@media (min-width: 900px) {
  .reach { padding: 56px; margin-bottom: 20px; }
  .reach .eyebrow { margin-bottom: 14px; }
  .reach__title { font-size: 56px; line-height: .95; max-width: 760px; margin-bottom: 40px; }
  .reach__points { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .reach__point { border-radius: 20px; padding: 22px 24px; }
  .reach__point dt { font-size: 22px; }
  .reach__point dd { font-size: 16px; }
  .reach__payoff { padding-left: 24px; margin-top: 40px; }
  .reach__text { font-size: 26px; max-width: 820px; margin-bottom: 16px; }
  .reach__more { font-size: 16px; }
}

/* Projekte */
.projects__head { margin-bottom: 28px; }
.projects__head .h-section { margin-bottom: 12px; }
.projects__list { display: grid; gap: 20px; }
.projects__more { display: flex; margin-top: 16px; }
.project { background: var(--card); border-radius: 28px; overflow: hidden; box-shadow: 0 1px 2px rgba(18,22,26,.06); }
.project__media { aspect-ratio: 9/14; }
.project__media > img { object-position: top; }
.project__body { padding: 22px 20px 24px; display: flex; flex-direction: column; }
.project__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.project__title { font-size: 26px; line-height: 1.05; margin-bottom: 8px; }
.project__text { font-size: 15px; line-height: 1.55; color: var(--muted); margin-bottom: 20px; }
.projects__platforms { margin: 12px 0 0; font-size: 13px; color: var(--subtle); }
.projects__platforms a { display: inline-block; min-width: 44px; line-height: 44px; text-align: center; color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .projects__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
  .projects__head .h-section { margin-bottom: 0; }
  .projects__head .lead { max-width: 400px; }
  .projects__list { gap: 24px; }
  .projects__more { justify-content: center; margin-top: 28px; }
  .project { border-radius: 32px; padding: 24px; display: grid; grid-template-columns: 340px 1fr; gap: 48px; }
  .project--reverse { grid-template-columns: 1fr 340px; }
  .project--reverse .project__media { order: 2; }
  .project__media { aspect-ratio: 9/16; border-radius: 22px; align-self: start; }
  .project__media > img { object-position: center; }
  /* Inhalt mittig neben dem hohen Reel, damit die freie Fläche gleichmäßig verteilt ist. */
  .project__body { padding: 16px 16px 16px 0; align-self: center; }
  .project--reverse .project__body { padding: 16px 0 16px 16px; }
  .project__tags { margin-bottom: 14px; }
  .project__title { font-size: 44px; line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; }
  .project__text { font-size: 17px; line-height: 1.6; margin-bottom: 28px; max-width: 560px; }
  .projects__platforms { margin-top: 20px; text-align: center; font-size: 14px; }
}

/* Community: Kopf, Kanal-Karte, Shorts und Kommentare untereinander */
.community { display: grid; gap: 28px; }
.community .h-section { font-size: 36px; }
.community__label { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--subtle); margin-bottom: 12px; }
.comments { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
/* Shorts: ab 360 px zwei Spalten, sonst so viele wie Platz ist (höchstens 3 Einträge) */
.shorts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.short { min-width: 0; }
.short__media { aspect-ratio: 9/16; border-radius: 18px; }
.short__media .yt-consent { left: 6px; right: 6px; bottom: 6px; padding: 8px; border-radius: 14px; flex-direction: column; align-items: stretch; gap: 6px; }
.short__title { font-weight: 600; font-size: 14px; line-height: 1.3; margin: 8px 0 4px; }
/* Kanal-Karte wie ein Kanalkopf auf YouTube: Logo, Name, Handle, Zahlen, Link */
.channel-card { background: var(--card); border-radius: 24px; padding: 20px; display: grid; gap: 20px; box-shadow: 0 1px 2px rgba(18,22,26,.06); }
.channel-card__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.channel-card__logo { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.channel-card__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; margin-bottom: 2px; }
.channel-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--subtle); }
.yt-icon { width: 20px; height: 14px; flex: none; }
.channel-card__note { font-size: 12px; color: var(--subtle); margin-top: 10px; }
.channel-card__link { width: 100%; }
@media (min-width: 900px) {
  /* Kopf und Kanal-Karte über die volle Breite, darunter Shorts | Kommentare */
  .community { grid-template-columns: 1.5fr 1fr; gap: 40px 48px; }
  .community__head, .channel-card { grid-column: 1 / -1; }
  .community .h-section { font-size: 48px; }
  .community__label { font-size: 15px; margin-bottom: 16px; }
  .comments { gap: 12px; }
  .shorts { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .short__media { border-radius: 20px; }
  .short__title { font-size: 15px; }
  .channel-card { grid-template-columns: 1fr auto; align-items: center; gap: 24px 40px; padding: 28px 32px; border-radius: 28px; }
  .channel-card__logo { width: 72px; height: 72px; }
  .channel-card__name { font-size: 26px; }
  .channel-card__stats { grid-column: 1 / -1; grid-row: 2; }
  .channel-card__note { font-size: 13px; margin-top: 12px; }
  .channel-card__link { width: auto; padding: 0 24px; }
}
/* Breit genug für eine Zeile: Logo und Name | Kacheln | Link */
@media (min-width: 1100px) {
  .channel-card { grid-template-columns: auto 1fr auto; }
  .channel-card__stats { grid-column: 2; grid-row: 1; }
  .channel-card .stat__value { font-size: 26px; }
  /* Auch ohne Kacheln ganz rechts */
  .channel-card__link { grid-column: 3; grid-row: 1; }
}

/* Über uns + Kontakt */
.duo { display: grid; gap: 12px; padding-top: 56px; }
@media (min-width: 900px) { .section--community { padding-bottom: 96px; } }
.about { background: var(--surface); border-radius: var(--radius-panel); padding: 28px 20px; }
.about .h-section { margin-bottom: 20px; }
/* Team: je Person eine weiße Karte, damit sich das Team vom Text darunter abhebt.
   In der Karte Name (Display-Schrift), Rolle (grünes Label) und Kurzvorstellung
   (dunkler Fließtext) klar gestuft. Mobil eine Person pro Zeile (Foto klein links,
   Text rechts), Desktop zwei Karten nebeneinander. */
.team { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.team__member {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start;
  background: var(--card); border-radius: 20px; padding: 14px; box-shadow: 0 1px 2px rgba(18,22,26,.06);
}
.team__photo { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; }
.team .photo-placeholder { padding: 4px; text-align: center; font-size: 10px; }
.team__name { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.15; }
.team__role { font-size: 13px; font-weight: 600; color: var(--green-dark); margin-top: 2px; }
.team__intro, .team .placeholder { margin-top: 10px; }
.team__intro { font-size: 14px; line-height: 1.5; color: var(--ink); }
.contact { background: var(--green); border-radius: var(--radius-panel); padding: 28px 20px; scroll-margin-top: var(--header-h); }
.contact .h-section { margin-bottom: 8px; }
.contact__lead { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.contact__form { display: grid; gap: 10px; }
.contact__actions { display: grid; gap: 10px; }
/* QA-07: Honeypot außerhalb des sichtbaren Bereichs (kein style-Attribut wegen CSP). */
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__alt { font-size: 13px; text-align: center; }
.contact__alt a { color: var(--ink); }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.1fr 1fr; gap: 20px; padding-top: 0; }
  .about, .contact { padding: 40px; }
  .about .h-section { margin-bottom: 24px; }
  .team { grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
  .team__member { display: block; border-radius: 24px; padding: 16px 16px 20px; }
  .team__photo { border-radius: 16px; }
  .team .photo-placeholder { font-size: 12px; }
  .team__name { font-size: 20px; margin-top: 14px; }
  .team__role { font-size: 14px; margin-top: 4px; }
  .team__intro { font-size: 15px; margin-top: 12px; }
  .contact .h-section { margin-bottom: 10px; }
  .contact__lead { font-size: 16px; margin-bottom: 22px; }
  .contact__actions { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .contact__actions .btn { width: auto; min-height: 54px; padding-inline: 26px; font-size: 15px; }
  .contact__alt { font-size: 14px; text-align: left; }
}

/* Über-uns-Seite: Teamfoto als Banner hinter Überschrift und Einleitung.
   Mobil: Foto oben, darunter der Text auf dunklem Grund, in den das Foto ausläuft.
   Desktop: Text liegt unten auf dem Foto; ein Verlauf von unten (über den Warnwesten)
   und von links hält den Text lesbar und lässt die Gesichter frei. */
.page-intro--banner { padding-top: 8px; padding-bottom: 12px; }
.banner { display: grid; background: var(--ink); color: var(--bg); border-radius: var(--radius-panel); overflow: hidden; }
.banner__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 49% 30%; }
.banner__text {
  position: relative; margin-top: -88px; padding: 64px 20px 16px;
  background: linear-gradient(to bottom, rgb(18 22 26 / 0), var(--ink) 64px);
}
.banner .lead { color: var(--dark-text); }
/* Fotografen-Nennung: klein in der Ecke unten rechts, mobil unter dem Text. */
.banner__credit { margin: 0; padding: 0 20px 20px; font-size: 12px; text-align: right; color: var(--dark-subtle); }
@media (min-width: 600px) {
  .banner__img { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  .page-intro--banner { padding-top: 16px; padding-bottom: 20px; }
  .banner__img, .banner__text { grid-area: 1 / 1; }
  .banner__img { height: 100%; aspect-ratio: auto; object-position: 50% 35%; }
  .banner__text {
    margin: 0; padding: clamp(280px, 30vw, 360px) 56px 56px;
    background:
      linear-gradient(to top, rgb(18 22 26 / .9), rgb(18 22 26 / .78) 34%, rgb(18 22 26 / .3) 46%, rgb(18 22 26 / 0) 58%),
      linear-gradient(to right, rgb(18 22 26 / .45), rgb(18 22 26 / 0) 65%);
    text-shadow: 0 1px 3px rgb(0 0 0 / .35);
  }
  .banner__credit { grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; padding: 0 24px 18px; }
}

/* Über-uns-Seite: je Person eine Karte über die volle Breite, Karten untereinander.
   Mobil: Foto neben Name und Rolle, darunter Text und Nachweise.
   Desktop: links Foto, Name, Rolle und Nachweise, rechts der Text (ca. 65 Zeichen pro Zeile).
   Text im Stil der Flugroute aus dem Hero: erster Absatz als Einstieg, die übrigen als
   Stationen an einer gepunkteten Linie, die letzte Station gefüllt als Ziel. */
.profiles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.profile { background: var(--card); border-radius: 28px; padding: 20px; display: grid; gap: 24px; }
.profile__head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.profile__photo { width: 100%; aspect-ratio: 1; border-radius: 20px; object-fit: cover; }
.profile__name { font-size: 28px; line-height: 1.05; }
.profile__role { font-size: 15px; color: var(--muted); margin-top: 4px; }
.profile__bio { --station: 17px; --line-h: 1.6; font-size: 16px; line-height: var(--line-h); color: var(--muted); }
.profile__bio > :first-child:not(.placeholder) {
  font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
/* Schlüsselwörter im Einstieg: heller Textmarker in der Form der Hero-Hervorhebung
   (.hero__highlight), damit sie sich von unterstrichenen Links abheben. */
.keyword {
  background: var(--green-tint); color: inherit; padding: 0 .2em; border-radius: .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Stationen: Linie (::before) läuft von der Mitte der ersten Zeile bis zur nächsten Station,
   Abstand per padding statt margin, damit sie nicht abreißt. */
.profile__bio > p + p { position: relative; padding: 0 0 1.4em 30px; }
.profile__bio > :first-child + p { margin-top: 1.6em; }
.profile__bio > p + p::before {
  content: ''; position: absolute; left: calc(var(--station) / 2 - 1.5px);
  top: calc(var(--line-h) * .5em); bottom: calc(var(--line-h) * -.5em);
  border-left: 3px dotted var(--green);
}
.profile__bio > p + p::after {
  content: ''; position: absolute; left: 0; top: calc(var(--line-h) * .5em - var(--station) / 2);
  width: var(--station); height: var(--station); border-radius: 50%;
  background: var(--card); border: 3px solid var(--green-dark);
}
.profile__bio > p + p:last-child { padding-bottom: 0; color: var(--ink); }
.profile__bio > p + p:last-child::before { content: none; }
.profile__bio > p + p:last-child::after { background: var(--green-dark); box-shadow: 0 0 0 4px var(--green-tint); }
.facts { display: grid; gap: 10px; margin: 0; }
.fact { background: var(--surface); border-radius: 18px; padding: 16px 18px; }
.fact dt { font-size: 14px; font-weight: 600; color: var(--green-dark); margin-bottom: 4px; }
.fact dd { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
@media (min-width: 900px) {
  .profiles { gap: 20px; }
  .profile {
    border-radius: 32px; padding: 40px;
    grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: 56px; row-gap: 24px;
  }
  .profile__head { grid-column: 1; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .profile__photo { border-radius: 22px; }
  .profile__name { font-size: 34px; }
  .profile__role { font-size: 16px; margin-top: 6px; }
  .profile__bio { grid-column: 2; grid-row: 1 / span 2; max-width: 65ch; font-size: 17px; }
  .profile__bio > :first-child:not(.placeholder) { font-size: 24px; line-height: 1.3; }
  .profile__bio > :first-child + p { margin-top: 2em; }
  .profile__bio > p + p { padding-left: 40px; padding-bottom: 1.5em; }
  .profile .facts { grid-column: 1; align-self: start; gap: 12px; }
  .fact { border-radius: 20px; padding: 18px 20px; }
}

/* Rechtstexte (Impressum, Datenschutzhinweise)
   Lange Begriffe wie „Umsatzsteuer-Identifikationsnummer“ dürfen umbrechen (QA-16). */
.legal { padding-bottom: 40px; overflow-wrap: break-word; hyphens: auto; }
.legal > * { max-width: 68ch; }
.legal h2 { font-size: 20px; margin: 32px 0 8px; }
.legal address { font-style: normal; }
.legal p,
.legal address,
.legal ul { margin: 0 0 12px; }
.legal dl { margin: 0; }
.legal dt { font-weight: 600; margin-top: 8px; }
.legal dd { margin: 0; }
.legal dd a,
.legal__links a { display: inline-flex; align-items: center; min-height: 44px; }
.legal__links { list-style: none; padding: 0; }
@media (min-width: 900px) {
  .legal { padding-bottom: 64px; }
  .legal h2 { font-size: 22px; }
}

/* Footer */
.site-footer { padding-top: 28px; padding-bottom: 32px; font-size: 14px; color: var(--subtle); display: grid; gap: 14px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--subtle); text-decoration: none; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { color: var(--ink); }
.site-footer__email { display: none; }
.site-footer__credit { font-size: 12px; }
.site-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .site-footer { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; padding-top: 40px; padding-bottom: 28px; }
  .site-footer ul { gap: 24px; }
  .site-footer__email { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* Ohne Flug bleibt die Drohne ausgeblendet. */
  .route__drone { display: none; }
}