/* Variablen & Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #002F62;
  --navy-deep:   #001B3B;
  --green:       #8FC81A;
  --green-hover: #7CB015;
  --green-text:  #557D0C; /* abgedunkelt ggue. Designsystem (#5F8A0E): 4.86:1 statt 4.09:1 auf Weiss, WCAG AA */
  --paper:       #FFFFFF;
  --paper-alt:   #F5F7F9;
  --text-muted:  #5A6572;
  --text-faint:  #6B7683; /* abgedunkelt ggue. Designsystem (#8D97A3): 4.62:1 statt 2.96:1 auf Weiss, WCAG AA */
  --rule:        #D5DAE0;
  --rule-light:  #E4E8ED;
  --line-on-navy: rgba(255,255,255,0.14);
  --text-on-navy: rgba(255,255,255,0.80);
  --schrift: 'Source Sans 3', sans-serif;
  --shadow-karte: 0 16px 40px rgba(0,47,98,0.12);
  --shadow-nav:   0 2px 16px rgba(0,47,98,0.06);
  /* Satzbreite fuer Fliesstext. Gemessen lief der Fliesstext ueber die ganze
     Website mit 85 bis 107 Zeichen je Zeile - das Auge verliert bei der
     Ruecksprung-Bewegung die naechste Zeile. 480px entsprechen bei 16px/300
     rund 75 Zeichen und damit der oberen Kante des lesbaren Bereichs
     (45 bis 75; WCAG 1.4.8 nennt 80 als Grenze). Gilt nur fuer laufenden
     Text - in Karten bestimmt die Karte die Breite. */
  --satzbreite: 480px;
}

/* Satzbreite: gilt fuer laufenden Text, nicht fuer Karteninhalte (dort setzt
   die Karte selbst die Breite) und nicht fuer Aufzaehlungen im Raster. */
.split-text p,
.ueber-teaser-text p,
.warum-punkt p,
.page-hero-content p,
.spaltenraster > div > p,
.schritt p { max-width: var(--satzbreite); }
/* Ausgenommen: .projekt-karte-body und .karte. Dort steht der Text in einer
   sichtbar gerahmten Karte - deren Polsterung ist die Satzbreite, ein
   zusaetzliches max-width risse rechts ein Loch in die Karte. Die Absaetze
   sind dort ohnehin nur zwei Zeilen lang. */

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--schrift);
  font-weight: 300;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3 { font-family: var(--schrift); font-weight: 600; }

h1 { font-size: 68px; line-height: 1.04; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 44px; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; }
h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }

p { font-size: 16px; line-height: 1.75; font-weight: 300; text-wrap: pretty; color: var(--text-muted); }

::selection { background: var(--green); color: var(--navy); }

.tnum { font-feature-settings: 'tnum' 1; }

/* Globaler Schutz gegen horizontales Scrollen auf schmalen Geräten */
img { max-width: 100%; }
/* `height: auto` ist hier entscheidend: Die width/height-Attribute am <img>
   liefern dem Browser das Seitenverhaeltnis (gegen Layoutspruenge), sie sind
   aber zugleich Praesentationsattribute und setzen eine feste Pixelhoehe.
   Ohne diese Zeile schlug die Attributhoehe jede `aspect-ratio` aus dem
   Stylesheet — die quadratischen Galerie-Thumbs wurden dadurch auf 260x500
   beschnitten. Wo eine feste Hoehe gewollt ist, setzt sie die jeweilige
   Klasse (.projekt-karte-img, .archiv-karte-bild, .logo-img …). */
img { display: block; object-fit: cover; height: auto; }

.bild-balken { position: relative; }
.bild-balken::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 120px; height: 8px;
  background: var(--green);
}

/* =====================
   LOGO
   ===================== */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Nur wenig groesser als die 15px-Navigationsschrift – das Logo soll die
   Zeile anfuehren, nicht dominieren. */
/* 56px: erst ab dieser Hoehe ist der Claim "Sport und Event Marketing" im
   Logo lesbar (bei 30px war er gut 5px hoch). logo.webp liegt in dreifacher
   Aufloesung vor (796x168), damit es auch auf Retina-Schirmen scharf bleibt. */
.logo-img {
  height: 56px;
  width: auto;
  display: block;
}

/* Gruener Punkt im Markennamen. Auf hellem Grund das abgedunkelte Gruen
   (4,86:1 statt 2,01:1) – das volle Signalgruen bleibt den dunklen Flaechen
   vorbehalten, wo es 6,60:1 traegt. */
.dot { color: var(--green-text); }
.sektion-navy .dot, .warum .dot, .split-navy .dot, .hero .dot,
.page-hero .dot, .projekt-hero .dot, .cta-sektion .dot,
.projekt-extern-sektion .dot, .vorteile-sektion .dot,
.leistungen--band .dot, .kennzahlenband .dot,
.galerie-overlay .dot { color: var(--green); }
/* Schreibung "ad.letics" bleibt auch in uppercase-Kontexten immer kleingeschrieben */
.brand { text-transform: none; }
/* Footer-Logo (Bild) */
.footer-logo-img { height: 56px; width: auto; margin-bottom: 16px; }

/* =====================
   NAVIGATION
   ===================== */
/* Header trägt das Sticky-Verhalten – die Navbar allein hätte im
   gleich hohen Header keinen Spielraum und würde sofort wegscrollen */
header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 48px;
  background: var(--paper);
  border-bottom: 3px solid var(--green);
  box-shadow: var(--shadow-nav);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links a {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.aktiv { color: var(--green-text); border-bottom-color: var(--green); }

/* Kontakt-aufnehmen-Button in der Nav.
   Selektor bewusst mit .nav-links davor: `.nav-links a` (0,1,1) schlaegt sonst
   die Padding-Kurzform und laesst das padding-bottom:5px der Menuepunkte
   stehen — die Beschriftung sass dadurch 7px zu tief im Button. */
.nav-links a.nav-kontakt-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-size: 15px;
  box-shadow: none;
  background: var(--green);
  color: var(--navy) !important;
  padding: 12px 24px;
  border-bottom: none !important;
  transition: color 220ms ease;
}
/* Derselbe Wischer wie am Primaer-CTA (siehe .btn::before), damit der
   Kontakt-Button in der Nav dieselbe Aufmerksamkeit bekommt. */
.nav-links a.nav-kontakt-btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}
.nav-links a.nav-kontakt-btn:hover::before,
.nav-links a.nav-kontakt-btn:focus-visible::before { transform: scaleX(1); }
.nav-links a.nav-kontakt-btn:hover,
.nav-links a.nav-kontakt-btn:focus-visible { color: var(--green) !important; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-kontakt-btn,
  .nav-links a.nav-kontakt-btn::before { transition: none; }
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  color: var(--navy);
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
}

/* Zwischen 901px und 1120px (iPad quer, kleine Laptops) passt die volle
   Navigation nicht in die Zeile - sie lief dort 69px ueber den Viewport
   hinaus, weil der Hamburger erst ab 900px greift. Statt den Umbruchpunkt
   hochzuziehen, wird die Zeile hier gestrafft: Das ist auf dem iPad die
   angenehmere Bedienung als ein Hamburger. */
@media (min-width: 901px) and (max-width: 1120px) {
  .navbar { padding: 0 24px; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 14px; letter-spacing: 0.08em; }
  .nav-links a.nav-kontakt-btn { padding: 12px 16px; }
}

/* =====================
   HERO (Startseite)
   ===================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy-deep);
  min-height: 640px; display: flex; align-items: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('assets/hero-businessrun.webp');
  background-image: image-set(url('assets/hero-businessrun.webp') type('image/webp'));
  background-size: cover; background-position: center;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  /* Nur so viel Abdunklung wie der Text braucht - vorher lag ein 92-Prozent-
     Schleier plus Diagonalschnitt ueber dem Motiv und liess kaum etwas erkennen. */
  background: linear-gradient(100deg, rgba(0,27,59,0.94) 0%, rgba(0,27,59,0.80) 32%, rgba(0,27,59,0.30) 62%, rgba(0,27,59,0.12) 100%);
}
.hero-content { position: relative; z-index: 1; max-width: 680px; padding: 0 48px; color: var(--paper); }
.hero-label {
  display: inline-block; font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.30em; color: var(--green); margin-bottom: 24px;
}
.hero h1 { color: var(--paper); margin-bottom: 24px; }
.hero p { color: var(--text-on-navy); font-size: 18px; margin-bottom: 32px; max-width: 520px; }

.hero h1 .akzent,
.page-hero h1 .akzent { -webkit-hyphens: none; hyphens: none; }

/* =====================
   PAGE HERO (Unterseiten)
   ===================== */
.page-hero {
  background: var(--navy-deep); min-height: 300px;
  display: flex; align-items: center; padding: 64px 48px;
  position: relative; overflow: hidden;
}
.page-hero-content { max-width: 760px; position: relative; z-index: 1; }
.page-hero-label {
  display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.20em; color: var(--green); margin-bottom: 16px;
}
.page-hero h1 {
  color: var(--paper); margin-bottom: 16px;
  /* Lange deutsche Komposita (z. B. „Datenschutzerklärung") sauber an
     Silbengrenzen trennen statt einen Einzelbuchstaben umzubrechen (lang="de") */
  -webkit-hyphens: auto;
          hyphens: auto;
}
.page-hero p { color: var(--text-on-navy); font-size: 18px; }

/* Dreisatz-Untertitel: Jeder Satz steht als eigener Block auf einer Zeile,
   damit kein Satz mittendrin umbricht. Auf dem Handy waere das zu schmal,
   dort laufen die Saetze wieder als Fliesstext. */
.hero-saetze { max-width: 56ch; }
.hero-saetze .satz { display: block; }
@media (max-width: 600px) {
  .hero-saetze .satz { display: inline; }
  .hero-saetze { text-wrap: pretty; }
}

/* ---------------------------------------------------------------------
   HERO-BÜHNEN der Landing Pages
   Jede Seite bekommt ein eigenes Motiv; kein Bild wird zweimal verwendet.
   Der Scrim liegt als ::after darüber und traegt den Text — Werte so
   gewaehlt, dass Weiss auf jedem Motiv sicher ueber AA liegt.
   --------------------------------------------------------------------- */
.page-hero--bild { min-height: 420px; }
.page-hero--bild::before {
  content: ''; position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero--bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,27,59,0.92) 0%, rgba(0,27,59,0.78) 45%, rgba(0,27,59,0.45) 100%);
}

.page-hero--promotion::before {
  background-image: url('assets/hero-promotion.webp');
  background-image: image-set(url('assets/hero-promotion.webp') type('image/webp'));
}
.page-hero--event-werbung::before {
  background-image: url('assets/hero-event-werbung.webp');
  background-image: image-set(url('assets/hero-event-werbung.webp') type('image/webp'));
}


@media (max-width: 600px) {
  .page-hero--bild { min-height: 340px; }
}

/* =====================
   BUTTONS
   ===================== */
.btn {
  /* Aufmerksamkeit entsteht hier nicht ueber Groesse, sondern ueber den
     Zustandswechsel beim Hover — siehe .btn::before darunter. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 17px 32px;
  background: var(--green);
  /* Weiss auf Lime erreicht nur 2.01:1 und faellt durch WCAG. Navy auf Lime
     liegt bei 6.60:1. Bewusste Abweichung vom Designsystem-Dokument, das
     "Text weiss" vorgibt - genau wie schon bei --text-faint und --green-text. */
  color: var(--navy);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--schrift);
  transition: color 220ms ease;
  width: fit-content;
}

/* Der Wischer: Beim Hover faehrt eine Navy-Flaeche von links ein, der Text
   kippt auf Lime. Rein geometrisch, nur aus Tokens, kein Glow und kein
   Verlauf — passt zum Radius-0-System und faellt trotzdem sofort auf. */
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--green); }

/* Ohne Bewegung: derselbe Zustandswechsel, nur ohne Einfahrt. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before { transition: none; }
}

/* Der Anstoss: einmaliger Selbstlaeufer, den script.js beim Sichtwerden setzt.
   Die Navy-Flaeche faehrt links rein und rechts wieder raus, der Text kippt
   in der Mitte kurz auf Lime. Dieselbe Geste wie beim Hover, nur ohne Zeigen —
   damit der CTA auch auf dem Handy einmal von sich aus auffaellt.
   prefers-reduced-motion braucht keinen Gegenpart: script.js startet den
   Beobachter dann gar nicht erst. */
@keyframes btn-anstoss-flaeche {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes btn-anstoss-text {
  0%, 100% { color: var(--navy); }
  30%, 70% { color: var(--green); }
}
.btn.btn-anstoss { animation: btn-anstoss-text 900ms cubic-bezier(.4, 0, .2, 1); }
.btn.btn-anstoss::before {
  animation: btn-anstoss-flaeche 900ms cubic-bezier(.4, 0, .2, 1);
  /* Der Hover-Transition wuerde sonst gegen die Keyframes arbeiten. */
  transition: none;
}

/* Die grossen CTAs auf dunklem Grund. Die Lime-Kante liegt permanent an:
   auf der Lime-Flaeche ist sie unsichtbar, sobald der Wischer die Flaeche auf
   Navy dreht, haelt sie die Form gegen den navy-deepen Untergrund. Ohne sie
   verschwaende der Button im Hover mit dem Hintergrund.
   .projekt-extern-sektion gehoert dazu: der Link auf die Projekt- bzw.
   Produktwebsite ist dort der Abschluss-CTA und schliesst dieselbe Sektion ab
   wie sonst .cta-sektion — er soll also auch gleich auftreten. */
.hero .btn,
.cta-sektion .btn,
.projekt-extern-sektion .btn {
  border: 2px solid var(--green);
  padding: calc(1.4rem - 2px) calc(3.4rem - 2px);
  font-size: 1rem;
  letter-spacing: 2px;
}

/* Der Wischer bleibt dem Primaer-CTA vorbehalten. Die Sekundaervarianten
   behalten ihren einfachen Farbwechsel — so bleibt die Rangfolge sichtbar. */
.btn-outline::before,
.btn-ablehnen::before,
.btn-extern::before { display: none; }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 18px 40px;
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--paper);
}

/* Druckzustand: Antwort schon beim Aufsetzen des Fingers, nicht erst beim
   Loslassen - sonst wirkt der Knopf auf dem Handy tot. Nur Skalierung, kein
   Schatten, kein Farbwechsel: das Hover-Verhalten bleibt unangetastet.
   iOS setzt :active erst mit einem touchstart-Listener, den script.js setzt. */
.btn,
.btn-outline { transition: color 220ms ease, background 220ms ease, transform 100ms ease-out; }
.btn:active,
.btn-outline:active,
.nav-links a.nav-kontakt-btn:active,
.galerie-teaser:active,
.galerie-grid-item:active,
.galerie-close:active,
.lb-close:active,
.menu-toggle:active { transform: scale(0.97); }
.lb-prev:active,
.lb-next:active { transform: translateY(-50%) scale(0.94); }





/* =====================================================================
   SEKTIONSSYSTEM: SEKTIONSKOPF, SPALTENRASTER, KARTEN (Task 5)
   Kanonische Bausteine; wird schrittweise vom Markup übernommen
   (Task 13–19). Alt-Wrapper (.leistungen, .warum, .referenzen, ...)
   bleiben bis zur Markup-Migration parallel bestehen.
   ===================================================================== */
.sektion { padding: 96px 48px; }
.sektion-grau { background: var(--paper-alt); }
.sektion-navy { background: var(--navy); color: var(--paper); padding: 88px 48px; }
.sektion-navy h2, .sektion-navy h3 { color: var(--paper); }
.sektion-navy p { color: var(--text-on-navy); }

.sektionskopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
  margin-bottom: 56px;
}
.kicker {
  display: block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.20em; color: var(--green-text); margin-bottom: 12px;
}
.sektion-navy .kicker { color: var(--green); }
.textlink {
  color: var(--green-text); font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; text-decoration: none;
  border-bottom: 2px solid var(--green); padding-bottom: 5px; white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.textlink:hover { color: var(--navy); border-bottom-color: var(--navy); }
/* Auf dunklem Grund traegt das abgedunkelte --green-text nur 2,73:1 (AA
   verlangt 4,5). Dort gilt dieselbe Regel wie fuer den Kicker: das volle
   Signalgruen, damit 6,60:1. */
.sektion-navy .textlink,
.leistungen--band .textlink,
.warum .textlink,
.split-navy .textlink,
.projekt-extern-sektion .textlink,
.vorteile-sektion .textlink { color: var(--green); border-bottom-color: var(--green); }
.sektion-navy .textlink:hover,
.leistungen--band .textlink:hover,
.warum .textlink:hover,
.split-navy .textlink:hover,
.projekt-extern-sektion .textlink:hover,
.vorteile-sektion .textlink:hover { color: var(--paper); border-bottom-color: var(--paper); }

@media (max-width: 900px) {
  .sektion { padding: 64px 48px; }
  .sektionskopf { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .sektion { padding: 56px 24px; }
  .sektion-navy { padding: 56px 24px; }
}

.spaltenraster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
/* Flex-Spalte, damit der Link jeder Kachel auf gleicher Hoehe sitzt, auch wenn
   die Texte unterschiedlich lang sind (margin-top:auto schiebt ihn nach unten). */
.spaltenraster > div {
  padding: 32px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.spaltenraster > div > .textlink { margin-top: auto; align-self: flex-start; padding-top: 20px; }
.spaltenraster > div:first-child { padding-left: 0; }
.spaltenraster > div:last-child { padding-right: 0; border-right: none; }
.spaltenraster .nummer {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.20em;
  color: var(--green-text); margin-bottom: 16px; font-feature-settings: 'tnum' 1;
}
.spaltenraster h3 { font-size: 23px; margin-bottom: 12px; }
.spaltenraster .textlink { display: inline-block; margin-top: 16px; }

.sektion-navy .spaltenraster { border-top-color: var(--line-on-navy); }
.sektion-navy .spaltenraster > div { border-right-color: var(--line-on-navy); }
.sektion-navy .spaltenraster .nummer { color: var(--green); }

@media (max-width: 900px) {
  .spaltenraster { grid-template-columns: 1fr; border-top: none; }
  .spaltenraster > div {
    padding: 24px 0; border-right: none; border-top: 1px solid var(--rule);
  }
  .spaltenraster > div:first-child { border-top: none; }
  .sektion-navy .spaltenraster > div { border-top-color: var(--line-on-navy); }
}

.karten-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; }

/* Zwei Karten teilen sich die volle Breite. Ein Dreierraster haette hier eine
   leere Spalte gelassen; stattdessen traegt die groessere Karte eine hoehere
   Bildbuehne, damit das Verhaeltnis von Bild zu Text stimmt. */
.karten-grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karten-grid--zwei .projekt-karte-img { height: 380px; }
@media (max-width: 900px) {
  .karten-grid--zwei { grid-template-columns: 1fr; }
  .karten-grid--zwei .projekt-karte-img { height: 260px; }
}

/* Fruehere Projekte: fuenf Eintraege passen nicht in eine Reihe wie die drei
   aktuellen Projekte — darum ein umbrechendes Raster mit Mindestbreite statt
   .karten-grid. Die Bildbuehne ist bewusst flacher als bei den Projektkarten. */
/* Fruehere Projekte: alle fuenf stehen auf Desktop in einer Reihe. Dafuer sind
   Bildbuehne, Polsterung und Schriftgrade hier kompakter als bei den
   Projektkarten — bei fuenf Spalten bleiben je rund 240px Breite. */
.archiv-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
/* Subgrid: Bild, Titel, Rolle und Beschreibung stehen in allen Karten auf einer
   Linie. Ohne das verschob ein zweizeiliger Titel ("METRO Marathon
   Duesseldorf") den Rest seiner Karte gegenueber den Nachbarn nach unten.
   `row-gap: 0`, weil ein Subgrid sonst den 24px-Abstand des Rasters zwischen
   seine eigenen Zeilen legt und die Karte auseinanderzieht. */
.archiv-raster .archiv-karte,
.archiv-raster .archiv-karte-body { row-gap: 0; }
.archiv-raster .archiv-karte { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
/* Subgrid gleicht die Karten INNERHALB einer Zeile an - die Zeilen untereinander
   bemassen ihre Spuren aber je fuer sich. Gemessen wurde das auf dem iPad: bei
   768px stand die allein stehende letzte Karte 22px niedriger, bei 1024px war
   die untere Zeile 27px hoeher als die obere.
   `grid-auto-rows` gibt darum ein festes Vierer-Muster vor, das sich fuer jede
   Kartenzeile wiederholt: Bild fest, Titel und Rolle nach Inhalt, und die
   Beschreibung als `1fr`. Alle `1fr`-Spuren des Rasters werden gleich hoch -
   damit sind es auch die Karten, ueber Zeilengrenzen hinweg.
   Die Mindesthoehe an Titel und Rolle haelt beide Spuren unabhaengig davon
   gleich, ob ein Eintrag zweizeilig umbricht. */
.archiv-raster { grid-auto-rows: 160px auto auto 1fr; }
/* Zeilenhoehe hier ausdruecklich setzen, damit die Mindesthoehe daraus
   abgeleitet und nicht geraten wird: zwei Zeilen sind genau 2x die
   Zeilenhoehe. Zuvor lag die geschaetzte Mindesthoehe unter dem, was ein
   echter Umbruch von "Vermarktungspartner · Sponsorenbetreuung" braucht -
   die Spur wuchs dort um 6,5px und die Karten standen wieder ungleich. */
.archiv-raster .archiv-karte h3 { line-height: 1.25; min-height: 2.5em; }
.archiv-raster .archiv-karte-zeitraum { line-height: 1.75; min-height: 3.5em; }
.archiv-raster .archiv-karte-body { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.archiv-raster .archiv-karte-bild { height: 160px; }
.archiv-raster .archiv-karte-body { padding: 20px; }
.archiv-raster .archiv-karte h3 { font-size: 19px; margin-bottom: 8px; }
.archiv-raster .archiv-karte-zeitraum { font-size: 13px; letter-spacing: 0.06em; }
.archiv-raster .archiv-karte p:not(.archiv-karte-zeitraum) { font-size: 15px; }
/* Unter 1280px gehen fuenf Karten nicht mehr in eine Zeile. Damit die
   angebrochene letzte Zeile nicht linksbuendig haengt, laeuft das Raster mit
   der doppelten Spaltenzahl und jede Karte ueber zwei Spuren — die Restzeile
   ruecken wir um eine halbe Kartenbreite ein und sie steht mittig.
   Die Bereiche sind nach oben und unten begrenzt, damit die Spannregeln
   nicht in die naechstkleinere Stufe durchschlagen. */
@media (min-width: 901px) and (max-width: 1280px) {
  .archiv-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .archiv-raster .archiv-karte { grid-column: span 2; }
  /* Genau zwei Karten in der Restzeile: eine halbe Spalte einruecken. */
  .archiv-raster .archiv-karte:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .archiv-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .archiv-raster .archiv-karte { grid-column: span 2; }
  /* Eine einzelne Karte in der Restzeile: mittig statt am linken Rand. */
  .archiv-raster .archiv-karte:nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}
@media (max-width: 600px) {
  .archiv-raster { grid-template-columns: 1fr; }
}

/* Karten tragen dieselbe Geste wie die Buttons: eine Flaeche, die von links
   einfaehrt. Hier ist es die grüne Unterkante, die von 3px auf 6px waechst –
   gleiche Sprache, geringere Lautstaerke. */
.karte, .projekt-karte, .archiv-karte, .stop-typ {
  position: relative;
  background: var(--paper); border: none; border-bottom: 3px solid var(--green);
  transition: box-shadow 200ms ease;
}
.karte::after, .projekt-karte::after, .archiv-karte::after, .stop-typ::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px; height: 6px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}
.karte:hover, .projekt-karte:hover, .archiv-karte:hover, .stop-typ:hover { box-shadow: var(--shadow-karte); }
.karte:hover::after, .projekt-karte:hover::after,
.archiv-karte:hover::after, .stop-typ:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .karte::after, .projekt-karte::after, .archiv-karte::after, .stop-typ::after { transition: none; }
}

.projekt-karte-img, .archiv-karte-bild { width: 100%; height: 280px; object-fit: cover; }
/* Der 280px-Ausschnitt schneidet mittig. Bei Motiven, deren Motivkern nicht in
   der Bildmitte liegt (die Bullis sitzen im unteren Bilddrittel), wird der
   Ausschnitt hier gezielt nachgefuehrt, statt die Ableitung neu zu beschneiden. */
.projekt-karte-img--tief { object-position: center 78%; }
.projekt-karte-img--tief-links { object-position: left 84%; }
.karte, .projekt-karte-body, .archiv-karte-body, .stop-typ { padding: 30px; }
.projekt-karte-label, .archiv-karte-zeitraum {
  display: block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--green-text);
  font-feature-settings: 'tnum' 1; margin-bottom: 8px;
}
.karte h3, .projekt-karte h3, .archiv-karte h3, .stop-typ h3 { font-size: 24px; margin-bottom: 12px; }
.karte-link {
  display: inline-block; margin-top: 16px;
  color: var(--green-text); font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; text-decoration: none;
  border-bottom: 2px solid var(--green); padding-bottom: 5px;
  transition: color 160ms ease, border-color 160ms ease;
}
.karte-link:hover { color: var(--navy); border-bottom-color: var(--navy); }

@media (max-width: 900px) { .karten-grid { grid-template-columns: 1fr; } }

/* =====================
   LEISTUNGEN (Alt-Wrapper — Karten-Grid der Startseite; nutzt .karte oben.
   Diagonalschnitt/Glow-Hintergrund gehören zum Bewegungslayer, siehe Task 9.
   Der bisherige h2-Kicker-Stil entfällt zugunsten der Basis-H2-Typografie.)
   ===================== */
.leistungen {
  padding: 96px 48px;
  background: var(--paper-alt);
}


/* Höhere Spezifität als `.leistungen h2` (navy), das in Quellreihenfolge
   später kommt – sonst stünde die Überschrift navy auf navy. */
.leistungen.leistungen--band h2 { color: var(--paper); }


@media (max-width: 900px) { .karten { grid-template-columns: 1fr; } }

/* Alt-Dekor (Bahn-Kante/Ziffer) — nicht in die neuen Karten übernommen,
   bewusst als toter Code stehen gelassen bis zur Löschung in Task 9. */
.karte-kante {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease;
}


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

/* =====================
   WARUM AD.LETICS (USP / Wettbewerbsvorteile)
   ===================== */
.warum {
  /* USP-Band: dunkle Flaeche statt blassem Grau. Die drei Gruende sind das
     staerkste Verkaufsargument der Startseite und standen vorher als
     zurueckhaltender Fliesstext auf hellem Grund praktisch unsichtbar da. */
  background: var(--navy);
  /* 88px wie die uebrigen Navy-Baender (.sektion-navy, .vorteile-sektion):
     auf der Startseite stehen beide untereinander, vorher mit 96 gegen 88. */
  padding: 88px 48px;
}
.warum .kicker { color: var(--green); }
.warum h2 { color: var(--paper); margin-bottom: 56px; }

.warum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
}

.warum-punkt {
  padding: 0 40px;
  border-left: 1px solid var(--line-on-navy);
}
.warum-punkt:first-child { padding-left: 0; border-left: none; }
.warum-punkt:last-child { padding-right: 0; }

.warum-nr {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: 0.20em;
  color: var(--green);
  font-feature-settings: 'tnum' 1;
  margin-bottom: 20px;
}

.warum-punkt h3 {
  font-size: 24px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 12px;
}

.warum-punkt p {
  color: var(--text-on-navy);
  line-height: 1.75;
  font-size: 16px;
}

@media (max-width: 900px) {
  .warum { padding: 64px 48px; }
  .warum h2,
  .schritte-sektion h2,
  .stop-typen-sektion h2 { margin-bottom: 40px; }
  .warum-grid { grid-template-columns: 1fr; gap: 0; }
  .warum-punkt {
    padding: 32px 0; border-left: none;
    border-top: 1px solid var(--line-on-navy);
  }
  .warum-punkt:first-child { padding-top: 0; border-top: none; }
}
@media (max-width: 600px) { .warum { padding: 56px 24px; } }

.ueber-teaser-marke {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; background: var(--paper); border-top: 3px solid var(--green);
  padding: 56px 40px; min-height: 260px;
}
.ueber-teaser-logo { width: auto; max-width: 260px; height: auto; }
.ueber-teaser-claim {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.20em; color: var(--text-muted); text-align: center; margin: 0;
}

/* =====================
   ÜBER UNS TEASER
   ===================== */
.ueber-teaser {
  padding: 96px 48px;
  background: var(--paper-alt);
  color: var(--navy);
}

.ueber-teaser-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.ueber-teaser-text h2 {
  /* Groesse und Gewicht kommen aus der Basis-H2 (44px/600) — vorher stand die
     Ueberschrift mit 35px/700 neben 44px-H2 derselben Seite. */
  color: var(--navy);
  margin-bottom: 24px;
}

.ueber-teaser-text p {
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.8;
}

.ueber-teaser-text .btn-outline {
  margin-top: 1rem;
  border-color: var(--green);
  color: var(--green-text);
  padding: 1.2rem 2.8rem;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

.ueber-teaser-text .btn-outline:hover {
  background: var(--green);
  color: var(--navy);
}

/* =====================
   KENNZAHLENBAND
   ===================== */
.kennzahlenband {
  background: var(--navy);
  padding: 36px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.kennzahlenband > div {
  padding: 0 24px;
  border-left: 1px solid var(--line-on-navy);
  text-align: center;
}
.kennzahlenband > div:first-child { border-left: none; }
.kennzahlenband .zahl-gross,
.kennzahlenband .fakt-zahl,
.kennzahlenband .fakt-icon-wert {
  display: block;
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--green);
  font-feature-settings: 'tnum' 1;
}
.kennzahlenband .zahl-label,
.kennzahlenband .fakt-label,
.kennzahlenband .fakt-icon-label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.62);
  margin-top: 8px;
}
/* Im Über-uns-Teaser steht das Band nicht über die volle Seitenbreite, sondern
   in einer halben Spalte. Vier Kacheln nebeneinander sind dort so schmal, dass
   die 46px-Zahlen mitten im Wort umbrechen ("200 5", "Köl n") – deshalb hier
   zwei mal zwei. */
.ueber-teaser-zahlen.kennzahlenband {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 0;
}
.ueber-teaser-zahlen.kennzahlenband > div:nth-child(2n+1) { border-left: none; }

/* Trustbar mit Woertern statt Zahlen (Event-Werbung: "Minuten", "UV-fest").
   Bei 46px brechen die mitten im Wort um, sobald das Band zweispaltig wird —
   dasselbe Problem wie im Ueber-uns-Teaser, hier ueber den Schriftgrad geloest,
   damit die Zahlenbaender der anderen Seiten unangetastet bleiben. */
.kennzahlenband--wort .zahl-gross { font-size: 34px; }
@media (max-width: 900px) { .kennzahlenband--wort .zahl-gross { font-size: 28px; } }

@media (max-width: 600px) {
  /* Vier Spuren, jede Kennzahl ueber zwei: bei ungerader Anzahl steht die
     letzte sonst allein am linken Rand (Event-Werbung hat fuenf). Mit der
     halben Spurbreite Versatz sitzt sie mittig unter der Zeile darueber. */
  .kennzahlenband {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 0;
    padding: 32px 24px;
  }
  .kennzahlenband > div { grid-column: span 2; padding: 0 12px; }
  .kennzahlenband > div:nth-child(2n+1):last-child { grid-column: 2 / span 2; }
  .kennzahlenband > div:nth-child(2n+1) { border-left: none; }
}

/* =====================
   PROJEKTE ÜBERSICHT
   ===================== */
.projekte-grid {
  padding: 96px 48px;
  background: var(--paper);
}



/* .projekt-karte selbst ist im Sektionssystem oben konsolidiert
   (.karte, .projekt-karte, .archiv-karte, .stop-typ). Hier nur noch der
   Grid-Container, angeglichen an .karten-grid. */
.projekt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .projekt-karten { grid-template-columns: 1fr; } }

.projekt-karte { display: flex; flex-direction: column; }
.projekt-karte-body { display: flex; flex-direction: column; flex: 1; }
.projekt-karte p { flex: 1; }

.projekt-extern-sektion {
  background: var(--navy-deep);
  padding: 88px 48px;
  text-align: left;
}
.projekt-extern-sektion h2 { color: var(--paper); margin-bottom: 24px; }
.projekt-extern-sektion p { color: var(--text-on-navy); max-width: 520px; margin-bottom: 32px; }

@media (max-width: 600px) { .projekt-extern-sektion { padding: 56px 24px; } }

.projekt-extern-inner {
  max-width: 700px;
}







/* =====================
   ARCHIV
   ===================== */
.projekte-liste { padding: 96px 48px; }











/* =====================
   FRÜHERE PROJEKTE (ARCHIV)
   ===================== */
.archiv-sektion {
  padding: 96px 48px;
  background: var(--paper-alt);
}





/* .archiv-karte selbst, .archiv-karte-body (Padding) und
   .archiv-karte-zeitraum sind im Sektionssystem oben konsolidiert.
   .archiv-karte-bild-wrap entfällt (Bild hat jetzt feste Höhe direkt
   über .archiv-karte-bild), bleibt im Markup als unstyled Wrapper-Div. */
.archiv-karte p a { color: var(--green-text); text-decoration: none; }
.archiv-karte p a:hover { text-decoration: underline; }

/* =====================
   EIGENMARKEN-GALERIE
   ===================== */
.eigenmarken-galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}









@media (max-width: 600px) { .eigenmarken-galerie { grid-template-columns: 1fr; } }

/* =====================================================================
   REFERENZ-CASES (Step 4) — ersetzt konzeptionell die Logo-Wand unten;
   neue Komponente, wird erst in Task 13/14/16 ins Markup eingesetzt.
   ===================================================================== */
.case-liste { border-top: 1px solid var(--rule); }
.case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 72px; padding: 32px 0; border-bottom: 1px solid var(--rule);
}
.case h3 { font-size: 25px; }
.case-meta {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--green-text); margin-top: 8px; font-feature-settings: 'tnum' 1;
}
.case p { margin: 0; }

.sektion-navy .case-liste { border-top-color: var(--line-on-navy); }
.sektion-navy .case { border-bottom-color: var(--line-on-navy); }
.sektion-navy .case-meta { color: var(--green); }

@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
}

.referenzen-intro {
  color: var(--text-muted);
  margin-bottom: 3rem;
  max-width: 600px;
  line-height: 1.7;
}
/* =====================
   CTA-SEKTION
   ===================== */
.cta-sektion {
  /* Vorher 11rem 5%: der Block war 176px hoch gepolstert und begann seitlich
     bei 5% (72px auf 1440px) — er stand damit als einzige Sektion neben dem
     48px-Raster und riss unter dem Button ein grosses Loch auf. */
  position: relative;
  background: var(--navy);
  padding: 112px 48px;
  overflow: hidden;
}
.cta-sektion .cta-inner { position: relative; z-index: 1; }

.cta-inner { max-width: 900px; }

.cta-sektion h2 {
  color: var(--paper);
  margin-bottom: 24px;
}

.cta-sektion p {
  color: var(--text-on-navy);
  margin-bottom: 40px;
  font-size: 18px;
}

/* Kein `color` hier: `.btn` setzt Navy ohnehin, und weil diese Regel spaeter
   in der Datei steht als `.btn:hover`, haette sie bei gleicher Spezifitaet den
   Farbwechsel ueberschrieben — der Text stand dann navy auf navy. */
.cta-sektion .btn {
  background: var(--green);
  font-size: 1rem;
  letter-spacing: 2px;
}

/* =====================
   KONTAKT
   ===================== */
.kontakt-sektion {
  padding: 96px 48px;
  background: var(--paper);
}

.kontakt-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
}
/* Kontaktseite ohne Datenspalte: nur noch das Formular, in lesbarer
   Breite mittig statt ueber die volle Seite gezogen. */
.kontakt-inner--nurformular { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* War 10.4px in var(--green) auf Weiss: 2.01:1 und unter der 13px-Mindestgroesse.
   Jetzt das kanonische Kicker-Muster des Designsystems. */

.kontakt-formular h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
}

.form-row { margin-bottom: 1.5rem; }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-feld { display: flex; flex-direction: column; }

.form-feld label, .form-row label {
  display: block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy); margin-bottom: 8px;
}
.form-feld input, .form-feld select, .form-feld textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: 0; padding: 14px 16px;
  font-family: var(--schrift); font-size: 16px; font-weight: 300; color: var(--navy);
  background: var(--paper); transition: border-color 160ms ease;
}
.form-feld input:focus, .form-feld select:focus, .form-feld textarea:focus {
  outline: none; border-color: var(--green); box-shadow: none;
}
.form-feld input:focus-visible, .form-feld select:focus-visible, .form-feld textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}

.form-feld textarea { resize: vertical; }

.form-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

/* 24px statt 16px: WCAG 2.5.8 setzt 24px als Mindest-Zielgroesse an. */
.form-checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--green);
}

.form-checkbox label {
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
}

.form-checkbox label a { color: var(--green-text); text-decoration: none; }

.form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.form-upload { display: flex; align-items: center; gap: 1rem; }

/* Spezifität muss .form-feld input (0,1,1) schlagen – sonst zieht dessen
   width:100% den absolut positionierten Datei-Input auf Viewport-Breite und
   die Seite scrollt horizontal. */
.form-feld .form-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.form-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1.5px solid var(--navy-deep);
  color: var(--navy-deep);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.form-upload-label:hover { background: var(--navy-deep); color: var(--paper); }

.form-upload-name {
  font-size: 0.85rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-upload-hinweis {
  margin-top: 0.4rem;
  font-size: 13px;
  color: var(--text-muted);
}

.form-hinweis {
  margin-top: 0.75rem;
  font-size: 13px;
  color: var(--text-muted);
}

/* =====================
   FOOTER
   ===================== */
footer { background: var(--paper); border-top: 3px solid var(--green); }
.footer-inner {
  /* Ein durchgehendes Raster statt inhaltsbemessener Spalten: die drei
     Link-Spalten sind exakt gleich breit, die Marken-Spalte traegt den
     groesseren Anteil. Vorher waren die Link-Spalten `max-content` — sie
     standen dadurch unterschiedlich breit (99 / 163 / 118px) rechts
     zusammengedraengt, waehrend die Marken-Spalte eine 500px breite leere
     Rinne offen hielt. `minmax(0, ...)` bleibt, damit lange Woerter die
     Spalte nicht sprengen. */
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px 48px; align-items: start;
  padding: 64px 48px 40px;
  /* Ein Regler fuer die Zeilenhoehe aller drei Listen. Damit haben
     Navigation, Projekte und Kontakt denselben Zeilenabstand und dieselbe
     erste Textkante. 2px auf 24px Zeilenhoehe ergibt 28px je Zeile — den
     kompakten Takt, den die Kontaktspalte schon immer hatte; Navigation und
     Projekte sind darauf heruntergezogen (vorher 32px, auf Touch 40px). */
  --footer-zeilen-polster: 2px;
}
.footer-beschreibung { font-size: 15px; color: var(--text-muted); max-width: 38ch; }
.footer-col-heading {
  display: block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--navy);
  /* Das Zeilenpolster der ersten Listenzeile zaehlt optisch mit — abgezogen
     bleibt der Abstand Ueberschrift/erste Zeile konstant bei 16px. */
  margin-bottom: calc(16px - var(--footer-zeilen-polster));
}
/* Alle drei Spalten benutzen dieselbe Liste: gleiche Zeilenhoehe, gleiches
   Polster, gleiche Oberkante. */
.footer-liste { display: flex; flex-direction: column; align-items: flex-start; }
.footer-liste > * {
  font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--text-muted);
  text-decoration: none; padding-block: var(--footer-zeilen-polster);
  transition: color 160ms ease;
}
.footer-liste a:hover { color: var(--green-text); }
.footer-bottom {
  border-top: 1px solid var(--rule); padding: 24px 48px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px;
}
/* Der Cookie-Button ist ein <button> und erbt das Schriftgewicht des Body
   nicht — ohne die 300 stand "Cookie-Einstellungen" sichtbar fetter neben
   Impressum / Datenschutz / AGB. */
.footer-copy, .footer-legal a {
  font-size: 14px; font-weight: 300; color: var(--text-faint);
}
.footer-legal { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.footer-legal a {
  text-decoration: none; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--schrift); transition: color 160ms ease;
}
.footer-legal a:hover { color: var(--green-text); }

@media (max-width: 1280px) {
  /* Schmalere Marken-Spalte und engere Rinne: sonst rutschen die Link-Spalten
     unter rund 960px unter die Breite des laengsten Eintrags ("Liebe Deine
     Stadt-Touren"), er bricht um und die Zeilen der drei Spalten stehen nicht
     mehr auf einer Hoehe. */
  .footer-inner { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: 36px 32px; padding: 56px 48px 36px; }
}
/* =====================
   STARTSEITEN-HERO AB TABLET ABWAERTS
   Der diagonale Verlauf laeuft rechts auf 12 Prozent Deckkraft aus. Am
   Desktop steht der Text in der dunklen linken Haelfte; sobald er fast die
   volle Breite nimmt, endet er auf der hellsten Bildstelle — gemessen 2,42:1
   fuer die Ueberschrift bei 768px und 2,50:1 fuer den Kicker bei 390px.
   Senkrecht von unten, wie es .page-hero--bild hochkant auch macht.
   ===================== */
@media (max-width: 900px) {
  /* Dieselbe Ursache bei den Seiten-Heroes: der waagerechte Verlauf laeuft
     rechts auf 45 Prozent aus, und sobald der Text fast die volle Breite
     nimmt, endet er dort. Gemessen 4,02:1 fuer den Vorspann bei 860px.
     Vorher schaltete diese Regel erst bei 600px um.

     Der Schleier liegt schwer oben und laeuft nach unten aus, nicht
     umgekehrt: gemessen sitzt der Kicker - das kontrastkritischste Element -
     bei 14 bis 31 Prozent von oben, waehrend das untere Drittel leer bleibt.
     Ein von unten aufgebauter Verlauf verdeckt also genau die Bildhaelfte,
     die kein Text braucht, und laesst die aufhellen, die ihn traegt. So
     herum bleibt vom Motiv deutlich mehr sichtbar UND der Kontrast steigt:
     Reserve 1,32-fach ueber AA statt 1,23-fach. */
  .page-hero--bild::after {
    background: linear-gradient(0deg, rgba(0,27,59,0.50) 0%, rgba(0,27,59,0.78) 45%, rgba(0,27,59,0.88) 100%);
  }
  /* Startseite: gleiche Logik, nur reicht der Text hier weiter nach unten
     (11 bis 71 Prozent), darum unten 0,46 statt 0,50. Reserve 1,25-fach. */
  .hero::after {
    background: linear-gradient(0deg, rgba(0,27,59,0.46) 0%, rgba(0,27,59,0.72) 45%, rgba(0,27,59,0.86) 100%);
  }
}

@media (max-width: 900px) {
  /* Der Logo-Block bekommt eine eigene Zeile ueber die volle Breite; die drei
     Listen stehen darunter nebeneinander (vorher zweispaltig — neben Kontakt
     blieb eine ganze leere Spalte stehen). auto-fit statt fester
     Dreispaltigkeit, weil zwischen 600 und rund 740px die Breite fuer drei
     Spalten nicht reicht, ohne dass der laengste Eintrag umbricht; dort nimmt
     das Raster von selbst zwei Spalten und bleibt buendig. */
  .footer-inner { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px 32px; padding: 56px 48px 32px; }
  .footer-inner > .footer-col:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 24px 48px; }
}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px 32px; }
  .footer-bottom { padding: 24px; }
}

/* =====================
   SCHRITTE (Ablauf)
   ===================== */
.schritte-sektion { padding: 96px 48px; }

.schritte-sektion h2 {
  font-weight: 600;
  margin-bottom: 56px;
  color: var(--navy);
}

.schritte-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.schritte-grid > .schritt { padding: 32px; border-right: 1px solid var(--rule); }
.schritte-grid > .schritt:first-child { padding-left: 0; }
.schritte-grid > .schritt:last-child { padding-right: 0; border-right: none; }
.schritt-nummer {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.20em;
  color: var(--green-text); font-feature-settings: 'tnum' 1; margin-bottom: 16px;
}
.schritt h3 { font-size: 20px; margin-bottom: 8px; }
/* .schritt p: keine eigene Regel noetig, globales p { color: var(--text-muted) } greift bereits */

@media (max-width: 900px) {
  .schritte-sektion { padding: 64px 48px; }
  .schritte-grid { grid-template-columns: 1fr; border-top: none; }
  .schritte-grid > .schritt { padding: 24px 0; border-right: none; border-top: 1px solid var(--rule); }
  .schritte-grid > .schritt:first-child { border-top: none; }
}
@media (max-width: 600px) { .schritte-sektion { padding: 56px 24px; } }

/* =====================
   VORTEILE
   ===================== */
.vorteile-sektion { background: var(--navy); padding: 88px 48px; }
.vorteile-sektion h2 { color: var(--paper); font-weight: 600; margin-bottom: 24px; }

.vorteile-sektion .intro-text {
  color: var(--text-on-navy);
  margin-bottom: 3rem;
  font-size: 1.05rem;
  max-width: 650px;
  line-height: 1.7;
}

/* Gleicher Bau wie .schritte-grid: Haarlinie oben, Spalten durch senkrechte
   Linien getrennt, erste und letzte Spalte buendig zum Satzspiegel. Die beiden
   vierspaltigen Sektionen (Einsatzbereiche auf Navy, Prozess auf Weiss) lesen
   sich dadurch als ein Paar statt als zwei fremde Bausteine. Linienfarbe ist
   --line-on-navy, weil das Raster hier auf dunklem Grund steht. */
.vorteile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-top: 1px solid var(--line-on-navy);
}
.vorteile-grid > .vorteil { padding: 32px; border-right: 1px solid var(--line-on-navy); }
.vorteile-grid > .vorteil:first-child { padding-left: 0; }
.vorteile-grid > .vorteil:last-child { padding-right: 0; border-right: none; }
/* Der Titel stand frueher als <strong> im Absatz und klebte deshalb ohne
   Umbruch am Fliesstext ("Lauf- & RadeventsTorboegen und Banden ..."). Er ist
   jetzt ein h3 — die Regel dafuer gab es hier bereits, nur das Markup fehlte. */
.vorteile-grid h3 { color: var(--paper); font-size: 20px; margin-bottom: 10px; }
.vorteile-grid p { color: var(--text-on-navy); line-height: 1.7; }

@media (max-width: 900px) {
  .vorteile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorteile-grid > .vorteil:nth-child(2n) { border-right: none; padding-right: 0; }
  .vorteile-grid > .vorteil:nth-child(2n+1) { padding-left: 0; }
  /* Zweite Reihe bekommt ihre eigene Haarlinie — sonst haengt sie ohne
     Oberkante unter der ersten und das Raster franst aus. */
  .vorteile-grid > .vorteil:nth-child(n+3) { border-top: 1px solid var(--line-on-navy); }
}
@media (max-width: 600px) {
  .vorteile-sektion { padding: 56px 24px; }
  .vorteile-grid { grid-template-columns: 1fr; }
  /* Einspaltig traegt jede Kachel oben die Trennlinie statt rechts. */
  .vorteile-grid > .vorteil {
    padding: 24px 0; border-right: none;
    border-top: 1px solid var(--line-on-navy);
  }
  /* Nur die eigene Haarlinie entfaellt — das Polster nicht: `.vorteile-grid`
     zieht selbst eine Linie ueber der ersten Kachel, deren Titel klebte
     deshalb als einziger daran, waehrend die uebrigen 24px Luft hatten.
     (Bei .warum-punkt ist das anders: dort hat das Raster keine Oberkante,
     die erste Kachel steht frei und braucht das Polster nicht.) */
  .vorteile-grid > .vorteil:first-child { border-top: none; }
}

/* =====================
   STOP-TYPEN
   ===================== */
.stop-typen-sektion {
  padding: 96px 48px;
  background: var(--paper);
}

/* .stop-typ selbst ist im Sektionssystem oben konsolidiert
   (.karte, .projekt-karte, .archiv-karte, .stop-typ). */
/* Ueberschrift zum Kartenblock: derselbe Abstand wie bei .warum und
   .sektionskopf, vorher stand die Ueberschrift ohne Luft ueber den Karten. */
.stop-typen-sektion h2 { margin-bottom: 56px; }
.stop-typen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; }
/* Wie bei den Archiv-Karten: Titel, Text und Link stehen ueber alle vier
   Karten hinweg auf einer Linie, auch wenn ein Text drei statt zwei Zeilen
   braucht. */
.stop-typen-grid .stop-typ { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
@media (max-width: 900px) { .stop-typen-grid { grid-template-columns: 1fr; } }

/* =====================
   MOBILE
   ===================== */
@media (max-width: 900px) {
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }

  .navbar { padding: 0 24px; }
  .logo-img { height: 44px; }
  .menu-toggle { display: block; }

  .nav-links {
    display: none;
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 3px solid var(--green);
    box-shadow: var(--shadow-nav);
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav-links.offen { display: flex; }

  /* Das Menue kommt unter der Navigationsleiste hervor und geht auf demselben
     Weg wieder zurueck. allow-discrete laesst display mitlaufen, damit auch
     das Schliessen sichtbar ist; aeltere Browser schalten einfach hart um. */
  .nav-links {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1), display 220ms allow-discrete;
  }
  .nav-links.offen { opacity: 1; transform: none; }
  @starting-style {
    .nav-links.offen { opacity: 0; transform: translateY(-8px); }
  }

  .nav-links > li { width: 100%; display: block; }

  .nav-links a {
    display: block;
    padding: 16px 24px;
    min-height: 44px;
    border-bottom: 1px solid var(--rule-light);
  }

  .nav-links a:hover,
  .nav-links a.aktiv { border-bottom-color: var(--rule-light); }

  .nav-kontakt-btn { text-align: center; }

  .ueber-teaser-inner,
  .kontakt-inner { grid-template-columns: 1fr; gap: 3rem; }


  .form-row-2 { grid-template-columns: 1fr; }

  /* .footer-inner-Override hier entfernt (Task 7): stand nach dem neuen dedizierten
     Footer-900px-Block und hätte dessen Grid/Gap/Padding-Werte zurücküberschrieben. */
  .projekt-alt { padding: 3rem 0; background: var(--paper-alt); }
}

/* =====================
   PROJEKT-HERO MIT BILD
   ===================== */
.projekt-hero {
  position: relative; min-height: 480px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  color: var(--paper);
}

/* Projekt-Hero-Hintergründe: WebP mit JPG-Fallback (image-set). Browser ohne
   image-set-Unterstützung nutzen die erste url()-Zeile (JPG) */
.projekt-hero--gusto {
  background-image: url('assets/gusto-hero.webp');
  background-image: -webkit-image-set(url('assets/gusto-hero.webp') type('image/webp'));
  background-image: image-set(url('assets/gusto-hero.webp') type('image/webp'));
}
.projekt-hero--lds {
  /* Unterkante zeigen: der Bulli sitzt im unteren Bilddrittel und stuende bei
     mittiger Lage nur zur Haelfte im 480px-Ausschnitt. Die waagerechte Angabe
     greift erst unter rund 720px Breite — darueber fuellt das Bild die Zeile
     ohnehin; auf dem Handy haelt sie Bulli und Dom gemeinsam im Ausschnitt. */
  background-position: 35% bottom;
  background-image: url('assets/karte-lds.webp');
  background-image: -webkit-image-set(url('assets/karte-lds.webp') type('image/webp'));
  background-image: image-set(url('assets/karte-lds.webp') type('image/webp'));
}
.projekt-hero--fotobulli {
  /* Waagerechte Lage wie bei --lds: auf dem Handy stehen Dom und Bullis
     zusammen im Ausschnitt, ab rund 720px Breite ist sie wirkungslos. */
  background-position: 15% bottom;
  background-image: url('assets/karte-fotobulli.webp');
  background-image: -webkit-image-set(url('assets/karte-fotobulli.webp') type('image/webp'));
  background-image: image-set(url('assets/karte-fotobulli.webp') type('image/webp'));
}

/* Der Scrim muss ueber die gesamte Texthoehe tragen, nicht nur an der
   Unterkante: Label und Meta-Zeile sitzen bis etwa 45 % ueber dem unteren Rand
   und standen bei einem Verlauf, der dort schon auf 0.10 abgefallen war, auf
   sonnigen Motiven praktisch ohne Abdunklung. */
.projekt-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,27,59,0.88), rgba(0,27,59,0.72) 45%, rgba(0,27,59,0.15));
}

.projekt-hero-hell::after {
  background: linear-gradient(0deg, rgba(0,27,59,0.80), rgba(0,27,59,0.62) 45%, rgba(0,27,59,0.10));
}

.projekt-hero-content { position: relative; z-index: 1; padding: 48px; color: var(--paper); max-width: 760px; }

/* Kicker ueber einem Foto steht weiss, nicht in Lime.
   Gemessen gegen die tatsaechlich gerenderten Pixel erreichte Lime je nach
   Bildausschnitt nur 1,24 bis 4,3:1 — auf der Startseite bei 390px stand der
   Kicker praktisch unsichtbar auf hellem Himmel. Der Wert wandert mit der
   Fensterbreite, weil der Bildausschnitt mitwandert; ein staerkerer Verlauf
   haette das Motiv geschluckt und die Marke trotzdem nicht sicher lesbar
   gemacht. Weiss liegt hier bei 10:1 und mehr. Auf Navy und auf Weiss bleibt
   der Kicker gruen — dort traegt die Signalfarbe ihre 6,60 bzw. 4,86:1. */
.hero-label,
.page-hero--bild .page-hero-label,
.projekt-hero-label { color: var(--paper); }

.projekt-hero-label {
  display: block; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.20em; margin-bottom: 12px;
}

.projekt-hero h1 { color: var(--paper); }

.projekt-hero-meta {
  margin-top: 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-on-navy); font-feature-settings: 'tnum' 1;
}

.projekt-hero p {
  color: var(--text-on-navy);
  max-width: 600px;
}

/* =====================
   SPLIT (Text + Bild)
   ===================== */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; padding: 96px 48px; align-items: center;
}
/* Mehrere Absaetze in einer Split-Spalte: der globale Reset nimmt jedem p sein
   margin, ohne diese Regel klebten aufeinanderfolgende Absaetze zusammen. */
.split-text p + p { margin-top: 16px; }
/* Aus demselben Grund stand der erste Absatz mit 0px Abstand direkt unter der
   44px-Ueberschrift. 24px ist der Wert, den auch die uebrigen Sektionskoepfe
   zwischen Ueberschrift und Fliesstext halten. */
.split-text h2 { margin-bottom: 24px; }
.split-grau { background: var(--paper-alt); }
/* .koernung (Papier-Korn-Auflage, siehe MOMENTUM-Sektion) traegt auf .split
   immer eine warme Flaeche statt Weiss - hierher konsolidiert (frueher unter
   "MOMENTUM REDESIGN 2026" mit dem inzwischen entfernten --grau-hell). */
.split.koernung { background: var(--paper-alt); }



/* Feste, gedeckelte Bildhoehe. Ohne sie bestimmt das Seitenverhaeltnis der
   Datei die Zeilenhoehe: Ein Hochformat blies die Spalte auf ueber 800px auf,
   waehrend der Text daneben 400px hoch war. Der Ausschnitt kommt jetzt aus
   object-fit, nicht aus der Bilddatei. */
.split-bild { position: relative; height: clamp(240px, 30vw, 400px); }
.split-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Ausnahme fuer Motive, die nichts vertragen: hier bestimmt das Bild die
   Hoehe der Spalte, statt dass die feste Hoehe oben und unten abschneidet. */
.split-bild--ganz { height: auto; }
.split-bild--ganz img { height: auto; }
/* Badge: kleines Logo, das IM Bild sitzt (absolut, ueber dem Foto). */


/* Logo-Spalte: das Marken-Logo steht ANSTELLE eines Fotos in der Bildspalte.
   Die drei Projektseiten nutzten dafuer faelschlich .split-bild-logo und
   bekamen dessen position:absolute - die Spalte fiel aus dem Fluss und lag
   je nach Viewportbreite ueber dem Text. */
.split-logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt); padding: 48px;
  height: clamp(200px, 24vw, 320px);
}
.split-logo img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fuer Logodateien mit weissem Grund (logo.jpg) statt Transparenz: sonst steht
   ein weisses Rechteck sichtbar auf der --paper-alt-Flaeche. Weisse Flaeche
   plus Haarlinie, damit das Feld auf weissem Sektionsgrund trotzdem steht. */
/* Fuer Logodateien mit weissem Grund statt Transparenz (z. B. das
   Gusto-Routen-Logo): ohne diese Variante steht ein sichtbares weisses
   Rechteck auf der --paper-alt-Flaeche. Weisse Fuellung plus Haarlinie,
   damit das Feld trotzdem als Flaeche lesbar bleibt. */
.split-logo--weiss { background: var(--paper); border: 1px solid var(--rule-light); }
@media (max-width: 600px) { .split-logo { padding: 32px; height: 200px; } }
/* Eckdaten in einer Karte: dieselbe Haarlinien-Liste wie .split-liste, nur
   kompakter, damit die Case-Karte nicht hoeher wird als die Projektkacheln. */
.karte-daten { list-style: none; margin: 20px 0 0; padding: 0; }
.karte-daten li {
  font-size: 15px; font-weight: 300; color: var(--text-muted);
  padding: 9px 0; border-top: 1px solid var(--rule-light);
}





/* Mobile Reihenfolge - CLAUDE.md-Pflichtregel: Text zuerst, Bild darunter.
   Die fruehere Ausnahme fuer body.promotion-seite ist entfallen: die Cases dort
   sind jetzt Karten, die Seite traegt keine .split-Sektion mehr. */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; padding: 64px 48px; }
  .split-text { order: 1; }
  .split-bild { order: 2; }
}
@media (max-width: 600px) { .split { padding: 56px 24px; } }

/* =====================
   BILDERGALERIE – TEASER-MOSAIK
   ===================== */
/* Die Galerie-Vorschau bringt ihre Hoehe selbst mit (3:2 aus der Spaltenbreite).
   Mit der festen Buehnenhoehe der Bildspalte (clamp(240px, 30vw, 400px)) lief
   sie zwischen rund 600 und 940px Breite ueber ihre Sektion hinaus und legte
   sich ueber die folgende. Ausserdem stand sie mittig in der Spalte, waehrend
   der gruene Balken der Spalte an deren linker Kante klebte - beide standen
   sichtbar nebeneinander statt uebereinander. */
.split-bild:has(.galerie-teaser) { height: auto; }
.galerie-teaser {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0;
  font-family: inherit;
}





.galerie-teaser:hover .galerie-teaser-grid img { transform: scale(1.04); }

img.galerie-teaser-einzel {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.4s ease;
}
.galerie-teaser:hover .galerie-teaser-einzel { transform: scale(1.04); }

.galerie-teaser-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(19, 37, 64, 0.92));
  color: var(--paper);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  text-align: left;
  padding: 2.4rem 1rem 0.9rem;
}

/* =====================
   BILDERGALERIE – OVERLAY + RASTER
   ===================== */
.galerie-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--navy-deep);
  overflow-y: auto;
}

.galerie-overlay[hidden] { display: none; }

.galerie-overlay-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 5%;
  background: var(--navy-deep);
  border-bottom: 2px solid var(--green);
}

.galerie-overlay-titel {
  color: var(--paper);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.galerie-close {
  background: none;
  border: none;
  color: var(--paper);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.4rem;
}

.galerie-grid {
  columns: 4 240px;
  column-gap: 12px;
  padding: 1.5rem 5% 3rem;
}

.galerie-grid-item {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  break-inside: avoid;
  border-radius: 0;
  overflow: hidden;
}

.galerie-grid-item img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.galerie-grid-item:hover img { transform: scale(1.04); }

/* =====================
   BILDERGALERIE – LIGHTBOX
   ===================== */
.galerie-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.galerie-lightbox[hidden] { display: none; }

/* Gestenflaeche: galerie.js verarbeitet Wischen und Ziehen selbst. Ohne
   touch-action: none wuerde der Browser die Geste als Scrollen oder Zoomen
   abfangen und mitten im Zug pointercancel senden. */
.galerie-lightbox { touch-action: none; user-select: none; -webkit-user-select: none; }

.lb-img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 0;
  cursor: grab;
  will-change: transform;
  -webkit-user-drag: none;
}
.galerie-lightbox:active .lb-img { cursor: grabbing; }

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-close { top: 1.2rem; right: 1.5rem; width: 3rem; height: 3rem; border-radius: 0; font-size: 1.8rem; }
.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); width: 3.4rem; height: 3.4rem; border-radius: 0; font-size: 2.2rem; }
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { background: rgba(255, 255, 255, 0.24); }

/* Standanzeige: in einer Galerie mit 20 Motiven weiss man sonst nicht, wo man
   steht und wie viel noch kommt. Zugleich aria-live, damit Screenreader den
   Bildwechsel ueberhaupt mitbekommen - vorher tauschte das Skript nur still
   src und alt aus. */
.lb-zaehler {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--text-on-navy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .galerie-grid { columns: 2 140px; column-gap: 8px; }
  .lb-prev, .lb-next { width: 2.8rem; height: 2.8rem; font-size: 1.9rem; }
  .lb-prev { left: 0.6rem; }
  .lb-next { right: 0.6rem; }
  .lb-close { top: 0.8rem; right: 0.8rem; }
}

/* =====================
   MOBILE – NEUE KOMPONENTEN
   ===================== */
@media (max-width: 900px) {
  /* .split, .split-text/.split-bild order (inkl. promotion-seite-Ausnahme) und
     .schritte-grid::before sind an den jeweiligen Hauptblock konsolidiert
     (Task 8) – hier entfernt, um doppelte/konkurrierende Regeln zu vermeiden. */

  /* Archiv-Karten auf dem Tablet zweispaltig statt gedrängt vierspaltig */
  .archiv-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* CTA-Block auf Tablets nicht übermäßig hoch */
  .cta-sektion { padding: 88px 48px; }

  /* Formularfelder ≥16px – verhindert iOS-Zoom beim Fokus auch auf iPads */
  .form-feld input,
  .form-feld select,
  .form-feld textarea { font-size: 16px; }
}

/* =====================
   MOBILE – HANDY-FEINSCHLIFF (≤600px)
   ===================== */
@media (max-width: 600px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }

  /* Kompaktere vertikale Abstände – mehr Inhalt pro Bildschirm */
  .archiv-sektion,
  .referenzen,
  .ueber-teaser,
  .leistungen,
  .warum,
  .projekte-grid,
  .projekte-liste,
  .stop-typen-sektion,
  .kontakt-sektion { padding: 56px 24px; }
  /* .rechtstext hier entfernt (Task 7): die Sektion hat kein eigenes Padding mehr
     (nur noch .rechtstext-inner mit eigenem 600px-Wert), sonst doppelter Abstand. */
  /* .split, .projekt-extern-sektion, .schritte-sektion, .vorteile-sektion hier
     entfernt (Task 8): eigene 600px-Regel (padding: 56px 24px, mit Seitenabstand)
     am jeweiligen Hauptblock konsolidiert, sonst konkurrierende Padding-Werte. */

  .hero { min-height: 520px; }
  .hero::before, .hero::after { clip-path: none; }
  .hero-content { padding: 0 24px; }
  .page-hero { padding: 48px 24px; }
  .projekt-hero-content { padding: 32px 24px; }
  .cta-sektion { padding: 72px 24px; }

  /* Archiv-Karten auf dem Handy einspaltig */
  .archiv-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* .eigenmarken-galerie 1fr-Umbruch am Hauptblock konsolidiert (Task 8). */

  /* Externer Link-Button: lange URL bricht um statt den Bildschirm zu sprengen */
  .btn-extern-gross {
    display: block;
    padding: 1.4rem 1.5rem;
    font-size: clamp(1.1rem, 5vw, 1.55rem);
    max-width: 100%;
    overflow-wrap: break-word;
    line-height: 1.3;
  }

  /* Datei-Upload-Zeile darf bei schmalen Geräten umbrechen */
  .form-upload { flex-wrap: wrap; }

  /* Großzügige Desktop-Innenpaddings auf dem Handy straffen – mehr Textbreite,
     weniger Scrollen. Werte bleiben luftig, nur nicht mehr seitenfüllend. */
  .karte { padding: 1.8rem 1.6rem; }
  /* .vorteil hier entfernt (Task 8): Komponente hat kein eigenes Padding mehr,
     der Abstand zwischen den Karten kommt vollständig aus .vorteile-grid { gap }. */
  .stop-typ { padding: 1.5rem; }

  /* Primäre Handlungsaufrufe fingerfreundlich über die volle Breite –
     leichter mit dem Daumen zu treffen als ein schmaler, linksbündiger Button */
  .hero .btn,
  .cta-sektion .btn,
  .projekt-extern-sektion .btn,
  .ueber-teaser-text .btn-outline,
  .kontakt-formular button[type="submit"] {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Hero-CTA: etwas kompaktere Polsterung, da nun vollbreit */
  .hero .btn { padding: 1.2rem 1.5rem; }
}

/* =====================
   MOBILE – SEHR SCHMALE GERÄTE (≤380px, z. B. iPhone SE / Mini)
   ===================== */
@media (max-width: 380px) {
  /* Etwas mehr Rand am Bildschirm zurückgewinnen, ohne zu gedrängt zu wirken */
  .navbar { padding-left: 4%; padding-right: 4%; }
}

/* =====================
   RECHTSTEXT (Impressum, Datenschutz, AGB)
   ===================== */
/* Breite = Satzbreite + Polsterung: so stehen Ueberschrift, Absatz, Liste und
   Hinweiskasten auf einer Kante. Vorher lief die Spalte auf 760px und damit der
   Fliesstext mit bis zu 106 Zeichen je Zeile - fuer eine Datenschutzerklaerung,
   die am Stueck gelesen wird, die unangenehmste Stelle der Website. */
.rechtstext-inner { max-width: calc(var(--satzbreite) + 96px); margin: 0 auto; padding: 96px 48px; }
.rechtstext-inner h2 { font-size: 32px; margin: 48px 0 16px; }
/* Erste Überschrift direkt nach dem 96px-Innenabstand des Containers – ohne
   diese Ausnahme würde sich der obere Freiraum auf 96px + 48px verdoppeln. */
.rechtstext-inner h2:first-child { margin-top: 0; }
.rechtstext-inner h3 { font-size: 20px; margin: 32px 0 12px; text-transform: none; }
.rechtstext-inner p, .rechtstext-inner li { color: var(--text-muted); margin-bottom: 12px; }
/* Listen kommen in den Rechtstexten ungestyled (bloßes <ul><li>) vor; der globale
   Reset (*{margin:0;padding:0}) nimmt ihnen sonst jede Einrückung. */
.rechtstext-inner ul { margin: 0 0 12px 24px; }
.rechtstext-inner strong { color: var(--navy); }
/* Standdatum am Ende eines Rechtstextes. Stand bis 14.08. als Inline-Style in
   agb.html und griff auf das seit dem Relaunch geloeschte Token --grau-mittel zu,
   erbte also einfach die Textfarbe. */
.rechtstext-stand { margin-top: 32px; font-size: 14px; color: var(--text-faint); }
.rechtstext-inner a { color: var(--green-text); text-decoration: underline; text-decoration-thickness: 1px; }
.rechtstext-inner a:hover { color: var(--navy); }
.rechtstext-meta { border: 1px solid var(--rule); padding: 24px; margin: 24px 0; }
.rechtstext-meta p { margin: 0; color: var(--navy); }
.rechtstext-hinweis { border-left: 3px solid var(--green); background: var(--paper-alt); padding: 16px 24px; }

/* ARBEITSMARKIERUNG in den Rechtstexten: alles, was vor der Veroeffentlichung
   noch eine Entscheidung oder eine Angabe braucht. Signalgruen auf Navy, damit
   die Stelle beim Ueberfliegen nicht zu uebersehen ist - das ist eine
   redaktionelle Marke, keine Gestaltung. Vor dem Livegang muss
   `node rechtspruefung.js` null Treffer melden. */
mark.offen {
  background: var(--green);
  color: var(--navy-deep);
  padding: 2px 8px;
  font-weight: 600;
  font-style: normal;
}
.rechtstext-inner mark.offen a { color: var(--navy-deep); }

@media (max-width: 600px) { .rechtstext-inner { padding: 56px 24px; } }

/* =====================
   SCROLL-REVEAL (dezente Einblendung)
   ===================== */
.reveal { opacity: 0; transition: opacity 500ms ease; }
.reveal.sichtbar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* =====================
   MEHR KONTRAST (Systemeinstellung "Kontrast erhoehen")
   Grautext wird Navy, Text auf Navy wird voll weiss, die halbtransparenten
   Lightbox-Knoepfe bekommen eine feste Flaeche mit Kante. Nur bestehende
   Tokens - die Grautoene stehen ausschliesslich auf hellem Grund.
   ===================== */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--navy);
    --text-faint: var(--navy);
    --text-on-navy: var(--paper);
  }
  .lb-close,
  .lb-prev,
  .lb-next { background: var(--navy-deep); outline: 2px solid var(--paper); outline-offset: -2px; }
}

/* =====================
   SKIP-LINK (Barrierefreiheit)
   ===================== */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  color: var(--paper);
  padding: 0.8rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid var(--green);
}

.skip-link:focus { left: 0; }

/* =====================
   ZITAT (Kundenstimme)
   Neu, wird aktuell auf keiner Seite eingesetzt (kein belegtes Kundenzitat vorhanden).
   ===================== */
.zitat { background: var(--navy); padding: 88px 48px; }
.zitat-inner { max-width: 820px; }
.zitat-strich { display: block; width: 56px; height: 3px; background: var(--green); margin-bottom: 32px; }
.zitat-text { font-size: 32px; line-height: 1.45; font-weight: 300; color: var(--paper); margin-bottom: 24px; }
.zitat-quelle { border-left: 1px solid var(--line-on-navy); padding-left: 24px; }
.zitat-name { display: block; font-size: 17px; font-weight: 600; color: var(--paper); }
.zitat-rolle { display: block; font-size: 15px; font-weight: 300; color: var(--text-on-navy); }

/* =====================
   TOUCH-BEDIENUNG (WCAG 2.5.8 – Zielgroesse)
   Eigenstaendige Bedienelemente brauchen auf Touch-Geraeten mindestens 44px
   Hoehe. Textlinks und der Cookie-Button lagen bei 20 bis 28px. Nur unter
   `pointer: coarse`, damit das Desktop-Layout unveraendert bleibt.
   ===================== */
@media (pointer: coarse) {
  .textlink,
  .karte-link,
  .footer-legal a { min-height: 44px; }

  .footer-legal a { display: flex; align-items: center; }

  /* Der Footer behaelt auch auf Touch-Geraeten seinen 28px-Takt: eine
     groessere Tastflaeche liesse sich nur ueber hoehere Zeilen erreichen, und
     die haben die Spalten sichtbar auseinandergezogen. 28px liegen ueber den
     24px, die WCAG 2.5.8 als Mindestzielgroesse verlangt. */
}

/* =====================
   TASTATUR-FOKUS (WCAG 2.4.7 – sichtbarer Fokus)
   ===================== */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Der Datei-Wähler ist ein ausgeblendetes <input type="file"> hinter einer
   sichtbaren <label>-Schaltfläche. Der Fokusring landete darum um den
   unsichtbaren 34x30-Kasten statt um die 180x43 grosse Schaltflaeche - also
   halb hinein statt darum herum. Ring auf die Beschriftung umgehaengt. */
.form-upload-input:focus-visible { outline: none; }
.form-upload-input:focus-visible + .form-upload-label {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Hinweis, solange das Kontaktformular noch nicht sendet (siehe Inline-Skript
   in kontakt.html). Gleiche Sprache wie .rechtstext-hinweis: gruene Kante,
   kuehles Off-White, keine neue Farbe. */
.form-sperre {
  margin-top: 24px;
  border-left: 3px solid var(--green);
  background: var(--paper-alt);
  padding: 16px 24px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  max-width: var(--satzbreite);
}
.form-sperre a { color: var(--green-text); text-decoration: underline; text-decoration-thickness: 1px; }
.form-sperre a:hover { color: var(--navy); }
/* Fehlermeldung: gruen steht auf dieser Seite fuer "hat geklappt", darum
   traegt der Fehlerfall die Navy-Kante. Eine dritte Farbe kommt nicht dazu —
   die Unterscheidung leistet die Kante zusammen mit dem Text, und role="alert"
   sagt sie ohnehin an. */
.form-sperre--fehler { border-left-color: var(--navy); border-left-width: 4px; }

/* =====================
   HERO-MOTIVE AUF DEM HANDY
   Bei 390px Breite reichen auch auf einem 2x-Display rund 780 echte Pixel.
   Die Originale sind 1200 bis 1920px breit und kosten das Drei- bis
   Fuenffache. Nur bis 600px - ab Tablet lohnt sich die volle Aufloesung.
   Die Seiten-Heroes tragen ihr Motiv auf ::before, die Projekt-Heroes direkt.
   ===================== */
@media (max-width: 600px) {
  .hero::before {
    background-image: url('assets/hero-businessrun-900.webp');
    background-image: image-set(url('assets/hero-businessrun-900.webp') type('image/webp'));
  }
  .page-hero--promotion::before {
    background-image: url('assets/hero-promotion-900.webp');
    background-image: image-set(url('assets/hero-promotion-900.webp') type('image/webp'));
  }
  .page-hero--event-werbung::before {
    background-image: url('assets/hero-event-werbung-900.webp');
    background-image: image-set(url('assets/hero-event-werbung-900.webp') type('image/webp'));
  }
  .projekt-hero--gusto {
    background-image: url('assets/gusto-hero-900.webp');
    background-image: image-set(url('assets/gusto-hero-900.webp') type('image/webp'));
  }
  .projekt-hero--lds {
    background-image: url('assets/karte-lds-900.webp');
    background-image: image-set(url('assets/karte-lds-900.webp') type('image/webp'));
  }
  .projekt-hero--fotobulli {
    background-image: url('assets/karte-fotobulli-900.webp');
    background-image: image-set(url('assets/karte-fotobulli-900.webp') type('image/webp'));
  }
}

/* =====================
   DRUCK
   Bisher gab es keine Druckregeln: gedruckt kamen Navigation und
   Footer-Spalten mit aufs Blatt, die dunklen Baender als volle Farbflaeche. Bei Impressum, Datenschutz und AGB ist Ausdrucken aber der
   Normalfall - die legt man ab. Darum: nur Inhalt, schwarz auf weiss, und
   Adressen von Links, die auf Papier sonst verloren gehen.
   ===================== */
@media print {
  @page { margin: 18mm 16mm; }

  html, body { background: #fff; color: #000; font-size: 11pt; }

  /* Bedienelemente haben auf Papier keine Funktion */
  header,
  .skip-link,
  .menu-toggle,
  .galerie-overlay,
  .galerie-lightbox,
  .galerie-teaser,
  .cta-sektion,
  .btn,
  .btn-outline,
  .footer-col:not(.footer-kontakt) { display: none !important; }

  /* Dunkle Baender und Bildbuehnen wuerden das Blatt volllaufen lassen */
  .hero, .page-hero, .projekt-hero,
  .sektion-navy, .split-navy, .warum, .vorteile-sektion,
  .projekt-extern-sektion, .kennzahlenband, .zitat {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 12pt !important;
    min-height: 0 !important;
  }
  .hero::before, .hero::after,
  .page-hero::before, .page-hero::after,
  .projekt-hero::before, .projekt-hero::after { display: none !important; }
  .hero h1, .page-hero h1, .projekt-hero h1,
  .hero p, .page-hero p, .projekt-hero p,
  .sektion-navy *, .warum *, .vorteile-sektion *, .projekt-extern-sektion *,
  .kennzahlenband * { color: #000 !important; }

  /* Web-Grau (--text-muted, --text-faint) wird auf Papier zu blassem Raster.
     Gedruckt laeuft der Text schwarz, die Kicker ebenfalls - Lime deckt auf
     einem Schwarz-Weiss-Drucker fast nichts. */
  p, li, dd, dt, td, th, address, blockquote,
  .rechtstext-inner p, .rechtstext-inner li,
  .rechtstext-stand, .footer-copy { color: #000 !important; }
  /* Die Arbeitsmarkierung muss auch auf Schwarz-Weiss auffallen - gruene
     Flaeche traegt dort nichts, ein Rahmen schon. */
  mark.offen {
    background: transparent !important;
    color: #000 !important;
    border: 1pt solid #000;
    padding: 0 4pt;
  }
  .kicker, .page-hero-label, .hero-label, .projekt-hero-label,
  .schritt-nummer, .spaltenraster .nummer { color: #000 !important; }

  /* Fliesstext nutzt auf Papier die volle Satzspiegelbreite */
  .rechtstext-inner { max-width: none; padding: 0; }
  .split-text p, .ueber-teaser-text p, .warum-punkt p, .page-hero-content p,
  .spaltenraster > div > p, .schritt p { max-width: none; }

  /* Bilder nicht ueber die Seite hinaus, keine Umbrueche mitten im Motiv */
  img { max-width: 100% !important; height: auto !important; break-inside: avoid; }

  /* Ueberschrift nie allein am Seitenfuss */
  h1, h2, h3 { break-after: avoid; break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
  .rechtstext-meta, .rechtstext-hinweis, .schritt, .vorteil { break-inside: avoid; }

  /* Externe Adressen ausschreiben - auf Papier ist ein Link sonst nur Text.
     Interne Verweise und mailto/tel bleiben unangetastet, die stehen im
     Impressum ohnehin ausgeschrieben daneben. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  footer { border-top: 1pt solid #000; }
  .footer-bottom { border: none; padding-left: 0; padding-right: 0; }
  .footer-inner { padding-left: 0; padding-right: 0; }
}