/* GENERIERT -- nicht von Hand aendern. Buendel aus tokens.css+styles.css+fokus.css, Werkzeug: werkzeuge/tokens.py --bundle. Liegt bewusst in assets/, damit relative url() stimmen. */

/* GENERIERT -- nicht von Hand aendern. Quelle: design/tokens.json, Werkzeug: werkzeuge/tokens.py */
:root {
  --amp-color-bg: #0B0F19;
  --amp-color-card: #151E2F;
  --amp-color-block: #2A3B54;
  --amp-color-success: #22C55E;
  --amp-color-danger: #F87171;
  --amp-color-primary: #1A9EE2;
  --amp-color-text: #F1F5F9;
  --amp-color-muted: #93A1B5;
  --amp-color-amber: #F59E0B;
  --amp-color-border: #64748B;
  --amp-color-btn-text: #0B0F19;
  --amp-color-hero-box: rgba(11, 15, 25, 0.9);
  --amp-color-line: rgba(100, 116, 139, 0.35);
  --amp-color-scrim: rgba(11, 15, 25, 0.55);
  --amp-color-accent-primary: var(--amp-color-primary);
  --amp-color-accent-secondary: var(--amp-color-amber);
  --amp-color-focus-on-primary: var(--amp-color-text);
  --amp-font-heading: "Oswald", sans-serif;
  --amp-font-body: "Inter", system-ui, sans-serif;
  --amp-type-tag: 0.6rem;
  --amp-type-sm: 0.75rem;
  --amp-type-label: 0.85rem;
  --amp-type-base: 1rem;
  --amp-type-button: 0.8rem;
  --amp-type-md: 1.1rem;
  --amp-type-lg: 1.3rem;
  --amp-type-num: 1.5rem;
  --amp-type-xl: 1.9rem;
  --amp-type-display: clamp(2.6rem, 1rem + 8vw, 8.5rem);
  --amp-type-headline: clamp(2.2rem, 1rem + 5.2vw, 5.75rem);
  --amp-type-quote: clamp(1.35rem, 0.9rem + 1.9vw, 2.4rem);
  --amp-type-numeral: clamp(3.5rem, 2rem + 5vw, 7rem);
  --amp-space-1: 0.5rem;
  --amp-space-2: 1rem;
  --amp-space-3: 1.5rem;
  --amp-space-4: 2.5rem;
  --amp-space-5: 4rem;
  --amp-space-6: 7rem;
  --amp-space-7: 11rem;
  --amp-radius-sm: 6px;
  --amp-radius-md: 8px;
  --amp-radius-lg: 10px;
  --amp-radius-xl: 12px;
  --amp-radius-pill: 999px;
  --amp-bp-sm: 700px;
  --amp-bp-md: 1024px;
  --amp-motion-fast: 150ms;
  --amp-motion-base: 250ms;
  --amp-motion-slow: 900ms;
  --amp-motion-cine: 1400ms;
  --amp-motion-slide: 6500ms;
  --amp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --amp-motion-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* AMP prototype. Mobile first. Farben/Fonts/Abstaende/Typo/Bewegung kommen
   ausschliesslich aus tokens.css (generiert aus design/tokens.json,
   werkzeuge/tokens.py). Diese Datei definiert keine Rohfarben. */

/* Je Familie zwei Dateien (Google-Fonts-Muster): latin faellt auf jeder Seite an,
   latin-ext (ungenutzter Rest des Ext-A/Romanisch-Blocks) kommt heute auf keiner
   Seite vor -> Browser laedt sie nur, wenn ein Zeichen aus ihrem unicode-range
   im Text auftaucht. Getrennt in werkzeuge/fonts_subset.py nach TATSAECHLICHER
   Nutzung (werkzeuge/test_fonts_subset.py::gemessene_ext_codepoints, gemessen
   aus Testinhalten/Tourdaten/Templates), Belegdatei werkzeuge/zeichensatz.txt.
   16 Ext-A/B-Zeichen aus Tourdaten-Ortsnamen (u. a. rumaenisch "ș", polnisch
   "ń") liegen deshalb IN latin, nicht in latin-ext -- je Zeichen BEIDE
   Schreibvarianten, weil Oswald sie per CSS text-transform:uppercase auch
   grossgeschrieben malt (Ticker/Stationsliste; gemessen 2026-09-24, sonst
   laedt latin-ext trotz gefaltetem Kleinbuchstaben weiter). Ranges =
   tatsaechliches Font-cmap (fontTools getBestCmap), nicht der volle beantragte
   Bereich. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 300 700; /* gemessen 2026-09-23: genutzte Gewichte 300/400/600/700, Achse beschnitten (fonttools instancer) */
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-0101, U+010C-010D, U+011A-011B, U+0143-0144, U+0158-0159, U+016E-016F, U+0172-0173, U+0218-0219, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0102-010B, U+010E-0119, U+011C-0142, U+0145-0148, U+014A-0157, U+015A-016D, U+0170-0171, U+0174-017F, U+021A-021B;
}
@font-face {
  font-family: "Oswald"; /* Google-Fonts-Oswald hat weder Pfeilglyphen (U+2190-2193) noch alle Strich-/Anfuehrungszeichen des vollen Satzes -> unicode-range hier auf tatsaechliches Font-cmap beschraenkt (fontTools getBestCmap, 2026-09-23) */
  src: url("fonts/oswald-var-latin.woff2") format("woff2");
  font-weight: 200 700; /* deckt genutzte Gewichte 200/400/500/600/700 ab, oswald-bold-latin (dupliziertes 700) entfernt */
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-0101, U+010C-010D, U+011A-011B, U+0143-0144, U+0158-0159, U+016E-016F, U+0172-0173, U+0218-0219, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-var-latin-ext.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0102-010B, U+010E-0119, U+011C-0142, U+0145-0157, U+015A-016D, U+0170-0171, U+0174-017F, U+021A-021B;
}

:root {
  --content-max: 1200px;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--amp-color-bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--amp-color-bg);
  color: var(--amp-color-text);
  font-family: var(--amp-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }

h1, h2, h3, .tag, label, .hero-slogan, .button {
  font-family: var(--amp-font-heading);
  text-transform: uppercase;
}
h1, h2 { font-weight: 700; letter-spacing: 0.02em; line-height: 0.92; margin: 0; }
h2 { font-size: var(--amp-type-headline); }
h3 { font-weight: 500; letter-spacing: 0.04em; font-size: var(--amp-type-md); line-height: 1.2; margin: 0; }
p { margin: 0; }
.muted { color: var(--amp-color-muted); }
a { color: var(--amp-color-accent-primary); text-underline-offset: 0.2em; }

.tag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--amp-type-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--amp-color-accent-primary);
}
.tag .idx { font-variant-numeric: tabular-nums; }
.tag::after { content: ""; width: 3rem; height: 1px; background: var(--amp-color-line); }

:focus-visible { outline: 2px solid var(--amp-color-accent-primary); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--amp-color-accent-primary); color: var(--amp-color-btn-text);
  padding: 0.6em 1em;
}
.skip-link:focus { left: var(--amp-space-2); top: var(--amp-space-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header: winzige Typo, Flaeche erst nach dem Hero ---------- */
header.site {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: var(--amp-space-3);
  padding: 0.75rem var(--gutter);
  background: var(--amp-color-hero-box);
  border-bottom: 1px solid var(--amp-color-line);
}
.site-home {
  color: var(--amp-color-text); text-decoration: none; white-space: nowrap;
  font-family: var(--amp-font-heading); text-transform: uppercase;
  font-size: var(--amp-type-md); font-weight: 400; letter-spacing: 0.16em;
}
.site-home b { color: var(--amp-color-primary); font-weight: 600; }
.site-nav { display: none; gap: var(--amp-space-3); margin-inline-start: auto; }
.site-lang { display: flex; gap: var(--amp-space-1); margin-inline-start: auto; }
.site-nav a, .site-lang a {
  color: var(--amp-color-text); text-decoration: none;
  font-family: var(--amp-font-heading); text-transform: uppercase;
  font-size: var(--amp-type-label); letter-spacing: 0.14em;
  padding: 0.35rem 0.2rem; /* waechter: Zielhoehe >= 24px */
}
.site-lang a[aria-current] { color: var(--amp-color-accent-primary); }
.site-nav a:hover, .site-lang a:hover { color: var(--amp-color-accent-primary); }
.site-nav a:focus-visible, .site-lang a:focus-visible, .site-nav-toggle:focus-visible {
  outline: 2px solid var(--amp-color-accent-primary);
  outline-offset: 2px;
}

/* Menueknopf mobil (Audit Nr. 24) */
.site-nav-toggle {
  display: none; align-items: center; justify-content: center;
  margin-inline-start: auto;
  min-width: 2.25rem; min-height: 2.25rem; /* WCAG 2.2 AA >= 24px */
  padding: 0.375rem;
  background: transparent;
  border: 1px solid var(--amp-color-line);
  color: var(--amp-color-text);
  cursor: pointer;
}
.site-nav-icon {
  display: inline-block; position: relative; width: 1.25rem; height: 0.75rem;
}
.site-nav-icon span, .site-nav-icon::before, .site-nav-icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background-color: currentColor; transition: transform 0.2s, top 0.2s, opacity 0.2s;
}
.site-nav-icon::before { top: 0; }
.site-nav-icon span { top: calc(50% - 1px); }
.site-nav-icon::after { bottom: 0; }
.site-nav-toggle[aria-expanded="true"] .site-nav-icon span { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .site-nav-icon::before {
  top: calc(50% - 1px); transform: rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-icon::after {
  top: calc(50% - 1px); transform: rotate(-45deg);
}

@media (max-width: 899px) {
  header.site { flex-wrap: wrap; }
  .site-nav-toggle { display: inline-flex; }
  .site-lang { margin-inline-start: var(--amp-space-2); }
  /* Mit JS: Navigation standardmaessig zugeklappt, per Knopf aufklappbar */
  html.js .site-nav,
  html.js-anim-ready .site-nav {
    display: none; width: 100%; flex-direction: column;
    padding-top: var(--amp-space-2);
    border-top: 1px solid var(--amp-color-line);
  }
  html.js .site-nav.is-open,
  html.js-anim-ready .site-nav.is-open {
    display: flex;
  }
  /* Ohne JS: Knopf weg, Navigation bleibt als Liste unter dem Kopf erreichbar */
  html:not(.js):not(.js-anim-ready) .site-nav-toggle {
    display: none;
  }
  html:not(.js):not(.js-anim-ready) .site-nav {
    display: flex; width: 100%; flex-direction: column;
    padding-top: var(--amp-space-2);
    border-top: 1px solid var(--amp-color-line);
  }
}
@media (min-width: 900px) {
  .site-nav-toggle { display: none; }
  .site-nav { display: flex; }
  .site-lang { margin-inline-start: 0; padding-inline-start: var(--amp-space-3); border-inline-start: 1px solid var(--amp-color-line); }
}

/* ---------- Abschnitte ---------- */
/* "proximity" laesst lange Bereiche wie die Karte normal durchscrollen. */
html { scroll-snap-type: y proximity; }
main > section { min-block-size: 100svh; scroll-snap-align: start; scroll-margin-top: 3.5rem; } /* Sprungziele unter der festen Kopfzeile */
main { overflow-x: clip; }
.band {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--amp-space-5) var(--gutter);
}
.snap { scroll-snap-align: start; }
@media (min-width: 1024px) { .band { padding-block: var(--amp-space-6); } }

/* Projekt-Detail Langtext/Stills (Audit Nr. 42): Layout der Seite ist bei einem
   anderen Agenten in Arbeit (noch keine project-detail-Klassen im CSS) -- nur
   ein unaufdringlicher Basisstil, damit die neuen Felder nicht ungestylt als
   nackte Bilderkette erscheinen. */
.project-langtext p { max-width: 60ch; margin-bottom: var(--amp-space-2); }
.project-stills { list-style: none; margin: var(--amp-space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--amp-space-2); }
.project-stills img { width: 100%; height: auto; display: block; }

/* Referenzen-Raster (Audit Nr. 28): schmale Sektion, Logos gleichmaessig, kein eigenes Layoutsystem noetig. */
.referenzen-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--amp-space-4); }
.referenz-item { display: flex; align-items: center; }
.referenz-item img { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: 0.75; transition: opacity var(--amp-motion-base) var(--amp-motion-ease), filter var(--amp-motion-base) var(--amp-motion-ease); }
.referenz-item a:hover img, .referenz-item a:focus-visible img { filter: none; opacity: 1; }
.referenz-item span { color: var(--amp-color-muted); font-size: var(--amp-type-sm); letter-spacing: 0.08em; text-transform: uppercase; }

.sec-head { display: grid; gap: var(--amp-space-2); margin-bottom: var(--amp-space-4); }
.lead { max-width: 34rem; font-size: var(--amp-type-md); }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: repeat(12, 1fr); column-gap: var(--amp-space-3); row-gap: var(--amp-space-3); margin-bottom: var(--amp-space-5); }
  .sec-head .tag { grid-column: 1 / -1; }
  .sec-head h2 { grid-column: 1 / 9; }
  .sec-head .lead { grid-column: 9 / 13; align-self: end; }
}

/* ---------- Platzhalter-Medien: Sucherrahmen statt Text ---------- */
.ph {
  position: relative;
  width: 100%;
  background: var(--amp-color-card);
  overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 6%;
  border: 1px solid var(--amp-color-block);
}
.ph::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.5rem; height: 1.5rem; translate: -50% -50%; /* waechter: Icon/Sichtpunkt, rem-skaliert, kein Text */
  background:
    linear-gradient(var(--amp-color-border), var(--amp-color-border)) center / 1px 100% no-repeat,
    linear-gradient(var(--amp-color-border), var(--amp-color-border)) center / 100% 1px no-repeat;
}
.ph[data-ar="16-9"] { aspect-ratio: 16 / 9; }
.ph[data-ar="21-9"] { aspect-ratio: 21 / 9; }
.ph[data-ar="3-4"]  { aspect-ratio: 3 / 4; }
.ph[data-ar="1-1"]  { aspect-ratio: 1 / 1; }

/* ---------- 1 Hero ---------- */
.hero-full {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  display: flex; flex-direction: column;
  padding: 4.5rem var(--gutter) 4rem;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
}
.hero-slides { position: absolute; inset: 0; z-index: -1; }
/* Sucher-Ecken ueber dem Bild: kinematischer Rahmen, rein dekorativ */
.hero-full::after {
  --c: 1.5rem;
  content: ""; position: absolute; inset: 4.25rem var(--gutter) 3.5rem; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) top left / var(--c) 1px,
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) top left / 1px var(--c),
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) top right / var(--c) 1px,
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) top right / 1px var(--c),
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) bottom left / var(--c) 1px,
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) bottom left / 1px var(--c),
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) bottom right / var(--c) 1px,
    linear-gradient(var(--amp-color-muted), var(--amp-color-muted)) bottom right / 1px var(--c);
  background-repeat: no-repeat;
}
.hero-slides::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--amp-color-scrim), transparent 35%, transparent 55%, var(--amp-color-bg));
}
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hero-slide.is-active { opacity: 1; }
/* Crossfade nur fuer den Wechsel per JS (rotate()), nicht fuers erste Bild: eine
   opacity-transition auf dem Slide selbst macht Chrome/Lighthouse das Element
   dauerhaft LCP-unfaehig (gemessen 2026-09-23: LCP-Kandidat blieb der 2-Zeichen
   "EN"-Link, 360px², nie das Hero-Bild). "is-ready" kommt erst per JS nach 'load'. */
#hero-slides.is-ready .hero-slide { transition: opacity var(--amp-motion-cine) var(--amp-motion-ease-inout); }

.hero-box {
  margin: auto;
  width: min(26rem, 100% - 2.5rem);
  padding: var(--amp-space-4) var(--amp-space-3) var(--amp-space-2);
  background: var(--amp-color-hero-box);
  border: 1px solid var(--amp-color-line);
  border-radius: var(--amp-radius-sm);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--amp-space-3);
  text-align: center;
}
.hero-logo { width: min(11rem, 60%); height: auto; }
.hero-rule { width: 3.5rem; height: 1px; border: 0; margin: 0; background: var(--amp-color-accent-primary); transform-origin: center; }
.hero-slogan { font-size: var(--amp-type-label); font-weight: 500; letter-spacing: 0.22em; margin-inline-end: -0.22em; line-height: 1.4; text-wrap: balance; }
@media (min-width: 700px) { .hero-slogan { font-size: var(--amp-type-md); letter-spacing: 0.28em; margin-inline-end: -0.28em; } }
.hero-meta {
  align-self: stretch;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--amp-space-1) var(--amp-space-3);
  margin-top: var(--amp-space-1); padding-top: var(--amp-space-2);
  border-top: 1px solid var(--amp-color-line);
}
/* Nachtrag 2026-09-24: Social-Icons raus aus dem Hero (jetzt Footer,
   parts/legal.php) -- hero-links ist die einzige Zeile, bleibt zentriert
   in jeder Breite (kein space-between mehr, das zwei Gruppen brauchte). */
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--amp-space-3); }
.hero-links a {
  color: var(--amp-color-text); text-decoration: none;
  font-size: var(--amp-type-sm); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0; border-bottom: 1px solid var(--amp-color-border);
}
.hero-links a:hover, .hero-links a:focus-visible { color: var(--amp-color-accent-primary); border-color: var(--amp-color-accent-primary); }

/* Einzige Bedienung: kleiner Pause-/Play-Schalter unten rechts (WCAG 2.2.2) */
.hero-toggle { position: absolute; right: var(--gutter); bottom: var(--amp-space-2); }
.hero-toggle:hover { color: var(--amp-color-text); }
.hero-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } /* waechter: Icon */
.hero-toggle .i-play { fill: currentColor; stroke: none; display: none; }
.hero-full.is-paused .hero-toggle .i-pause { display: none; }
.hero-full.is-paused .hero-toggle .i-play { display: block; }

/* ---------- 2 Global Footprint (Block generiert: werkzeuge/stationen.py) ---------- */
.map-wrap { position: relative; aspect-ratio: 800 / 385; margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 1024px) { .map-wrap { margin-inline: 0; } }
.map-land {
  position: absolute; inset: 0;
  background: var(--amp-color-block);
  -webkit-mask: url("img/weltkarte.svg") center / contain no-repeat;
  mask: url("img/weltkarte.svg") center / contain no-repeat;
}
/* Pins leben als <a><circle> im SVG selbst (cx/cy/r Attribute, Positionierung ohne style=""). */
.pin { cursor: pointer; }
.pin .pin-dot {
  fill: var(--amp-color-accent-secondary); /* waechter: Sichtpunkt, Groesse ueber r-Attribut (AMP-23) */
  transition: scale var(--amp-motion-base) var(--amp-motion-ease);
  transform-box: fill-box; transform-origin: center;
}
.pin:hover .pin-dot, .pin.is-lit .pin-dot { scale: 1.8; }
.pin.is-lit { z-index: 1; }

.kennzahl {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--amp-space-3);
  margin-top: var(--amp-space-3);
  font-family: var(--amp-font-heading); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--amp-type-sm); color: var(--amp-color-muted);
}
.kennzahl > span { display: flex; flex-direction: column; }
.kennzahl strong { order: -1; font-size: var(--amp-type-headline); font-weight: 200; color: var(--amp-color-text); letter-spacing: 0; line-height: 1; }
@media (min-width: 700px) {
  .kennzahl { gap: var(--amp-space-5); font-size: var(--amp-type-md); }
  .kennzahl strong { font-size: var(--amp-type-numeral); }
}

/* Stationen-Band: eine Station sichtbar, alle fuer Screenreader lesbar */
.ticker {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--amp-space-1) var(--amp-space-2);
  margin-top: var(--amp-space-3); padding: var(--amp-space-2) 0;
  border-block: 1px solid var(--amp-color-line);
}
.ticker-titel { grid-column: 1 / -1; font-family: var(--amp-font-heading); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--amp-type-sm); color: var(--amp-color-accent-primary); }
.ticker-liste { list-style: none; margin: 0; padding: 0; min-height: 3.2em; position: relative; }
.ticker-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--amp-space-2); }
.ticker-liste li:not(.is-active) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ticker-liste time { color: var(--amp-color-accent-secondary); font-variant-numeric: tabular-nums; font-size: var(--amp-type-label); }
.ticker-ort { font-family: var(--amp-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--amp-type-lg); }
.ticker-venue { color: var(--amp-color-muted); font-size: var(--amp-type-label); flex-basis: 100%; }
@media (min-width: 700px) { .ticker-venue { flex-basis: auto; } }
.ticker-toggle, .hero-toggle {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; /* waechter: Ziel 32px >= 24px, rem-skaliert */
  padding: 0; background: transparent; border: 0; border-radius: var(--amp-radius-pill);
  color: var(--amp-color-muted); cursor: pointer;
}
.ticker-toggle:hover { color: var(--amp-color-text); }
.ticker-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } /* waechter: Icon */
.ticker-toggle .i-play { fill: currentColor; stroke: none; display: none; }
.ticker.is-paused .ticker-toggle .i-pause { display: none; }
.ticker.is-paused .ticker-toggle .i-play { display: block; }

/* Alle Stationen: eingeklappt, Suche + Jahres-Chips */
.stationen { margin-top: var(--amp-space-3); }
.stationen summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--amp-space-2);
  padding: var(--amp-space-2) 0; border-bottom: 1px solid var(--amp-color-line);
  font-family: var(--amp-font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--amp-type-md);
}
.stationen summary::-webkit-details-marker { display: none; }
.stationen summary::after { content: "+"; margin-inline-start: auto; color: var(--amp-color-accent-primary); font-size: var(--amp-type-lg); transition: rotate var(--amp-motion-base) var(--amp-motion-ease); }
.stationen[open] summary::after { rotate: 45deg; }
.stationen-n { color: var(--amp-color-muted); }
.stationen-filter { display: grid; gap: var(--amp-space-2); padding-block: var(--amp-space-3); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; margin: 0; padding: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* waechter: nativer Radio, Sichtflaeche ist das Label */
.chip span {
  display: inline-block; padding: 0.35rem 0.8rem; cursor: pointer;
  border: 1px solid var(--amp-color-border); border-radius: var(--amp-radius-pill);
  font-size: var(--amp-type-label); font-variant-numeric: tabular-nums; color: var(--amp-color-muted);
}
.chip input:checked + span { background: var(--amp-color-primary); border-color: var(--amp-color-primary); color: var(--amp-color-btn-text); }
.chip input:focus-visible + span { outline: 2px solid var(--amp-color-accent-primary); outline-offset: 3px; }
.stationen-treffer { font-size: var(--amp-type-label); color: var(--amp-color-muted); }
.pin-list { list-style: none; margin: 0; padding: 0; max-height: 32rem; overflow-y: auto; }
.pin-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--amp-space-2);
  padding: 0.7rem 0; border-top: 1px solid var(--amp-color-line);
}
.pin-list li[hidden] { display: none; }
.pl-city { font-family: var(--amp-font-heading); text-transform: uppercase; letter-spacing: 0.06em; }
.pin-list time { color: var(--amp-color-accent-secondary); font-variant-numeric: tabular-nums; font-size: var(--amp-type-label); }
.pl-proj { grid-column: 2; color: var(--amp-color-muted); font-size: var(--amp-type-label); }
@media (min-width: 700px) {
  .stationen-filter { grid-template-columns: minmax(16rem, 1fr) 2fr; align-items: end; }
  .stationen-treffer { grid-column: 1 / -1; }
  .pin-list li { grid-template-columns: 7rem 1fr 1.4fr; align-items: baseline; }
  .pl-proj { grid-column: auto; }
}

/* ---------- 3 Portfolio: zwei Portfolios, Reihenfolge nur per data-reihenfolge ---------- */
#portfolio { display: flex; flex-direction: column; }
.pf-head { order: 0; }
[data-reihenfolge="live-zuerst"] .pf-live,
[data-reihenfolge="motion-zuerst"] .pf-motion { order: 1; }
[data-reihenfolge="live-zuerst"] .pf-motion,
[data-reihenfolge="motion-zuerst"] .pf-live { order: 2; }
/* Zwei Divisionen, je eigene Akzentfarbe (Live = Logo-Blau, Motion = Amber) auf Index,
   Kopf, Kennwort, Beschriftung, Hover und "All Projects". Nie NUR Farbe: Kennwort
   (MOTION/PICTURES, Firmenname auf die Divisionen verteilt) und Divisionstitel als Text tragen die Unterscheidung mit (WCAG 1.4.1).
   Aufbau wie W2-5 (f727023): schlanker Textindex im Kopf, Divisionstitel als klebende
   Randspalte (3/12), Kacheln im 9/12-Feld, gestaffelt. */
.pf-live, .pf-link-live { --pf-akzent: var(--amp-color-accent-primary); }
.pf-motion, .pf-link-motion { --pf-akzent: var(--amp-color-accent-secondary); }
[data-reihenfolge="live-zuerst"] .pf-link-motion,
[data-reihenfolge="motion-zuerst"] .pf-link-live { order: 2; }
.pf-index { display: flex; flex-direction: column; }
.pf-card {
  display: flex; gap: var(--amp-space-2); align-items: baseline;
  padding: 0.7rem 0; border-top: 1px solid var(--amp-color-line);
  color: var(--amp-color-text); text-decoration: none;
  font-family: var(--amp-font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--amp-type-md);
}
.pf-card:last-child { border-bottom: 1px solid var(--amp-color-line); }
.pf-card-key { color: var(--pf-akzent); min-width: 5.5em; font-weight: 700; }
.pf-card-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pf-card-n { color: var(--pf-akzent); font-family: var(--amp-font-body); font-size: var(--amp-type-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-card-n::after { content: " \2193"; }
.pf-card:hover .pf-card-name { color: var(--pf-akzent); }

.pf { display: grid; gap: var(--amp-space-4); padding-top: var(--amp-space-5); scroll-margin-top: 4rem; }
.pf + .pf { margin-top: var(--amp-space-6); border-top: 1px solid var(--amp-color-line); }
.pf-title { display: grid; gap: var(--amp-space-1); align-content: start; padding-top: var(--amp-space-2); border-top: 3px solid var(--pf-akzent); container-type: inline-size; }
.pf-title > div { display: grid; gap: var(--amp-space-1); }
/* Kennwort: Oswald 700, skaliert mit der Kopfspalte (cqi; ohne Container = Viewport), damit
   PICTURES auch in der 3/12-Randspalte und auf 360 px einzeilig bleibt. */
.pf-key { font-family: var(--amp-font-heading); font-weight: 700; font-size: min(var(--amp-type-numeral), 21cqi); line-height: 0.9; white-space: nowrap; text-transform: uppercase; color: var(--pf-akzent); }
.pf-tag-wort { font-family: var(--amp-font-heading); font-weight: 700; color: var(--pf-akzent); margin-right: 0.4em; }
.pf-title h3 { font-size: var(--amp-type-xl); font-weight: 600; letter-spacing: 0.04em; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.pf-title .muted { font-size: var(--amp-type-label); max-width: 18rem; }
.pf-n { color: var(--pf-akzent); font-size: var(--amp-type-label); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pf-works { display: grid; gap: var(--amp-space-4) var(--amp-space-3); }
.work { display: grid; gap: 0.75rem; align-content: start; }
.work-link { display: grid; gap: 0.75rem; color: inherit; text-decoration: none; }
/* Echtes Bild: kein Sucherrahmen/Fadenkreuz (nur Platzhalter) */
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ph:has(> img)::before, .ph:has(> img)::after { content: none; }
.work-more { display: flex; align-items: center; gap: var(--amp-space-1); color: var(--pf-akzent); font-size: var(--amp-type-label); letter-spacing: 0.08em; text-transform: uppercase; }
.work-more::after { content: "\2192"; transition: translate var(--amp-motion-base) var(--amp-motion-ease); }
.work-link:hover strong, .work-link:focus-visible strong { color: var(--pf-akzent); }
.work-link:hover .work-more::after, .work-link:focus-visible .work-more::after { translate: 0.3rem 0; }
.work-link:focus-visible { outline: 2px solid var(--pf-akzent); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .work-link .ph > img { transition: scale var(--amp-motion-slow) var(--amp-motion-ease); }
  .work-link:hover .ph > img, .work-link:focus-visible .ph > img { scale: 1.04; }
}
.work.a2 { width: 78%; justify-self: end; }
.cap { font-size: var(--amp-type-label); line-height: 1.35; }
.cap strong { display: block; font-weight: 600; }
.cap em { color: var(--pf-akzent); }
.cap-text { max-width: 32rem; font-size: var(--amp-type-label); }
.pf .pf-all { background: var(--pf-akzent); }
@media (min-width: 700px) {
  .pf-works { grid-template-columns: repeat(2, 1fr); }
  .work.a1 { grid-column: 1 / -1; }
  .work.a2 { width: auto; justify-self: stretch; }
  .work.a3 { margin-top: var(--amp-space-6); }
}
@media (min-width: 1024px) {
  .pf-head h2 { grid-column: 1 / 8; }
  .pf-head .pf-index { grid-column: 8 / 13; grid-row: 2; align-self: end; }
  .pf { grid-template-columns: repeat(12, 1fr); column-gap: var(--amp-space-3); }
  .pf-title { grid-column: 1 / 4; grid-row: 1 / span 2; position: sticky; top: 5.5rem; align-self: start; }
  .pf-works, .pf .pf-all, .pf .quote { grid-column: 4 / 13; }
  .pf .quote { margin-inline-start: 0; }
}
.ph[data-ar="4-3"] { aspect-ratio: 4 / 3; }
.quote {
  margin: var(--amp-space-6) 0 0;
  padding-top: var(--amp-space-3);
  border-top: 1px solid var(--amp-color-accent-primary);
  max-width: 48rem;
}
.quote p { font-size: var(--amp-type-quote); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.quote footer { margin-top: var(--amp-space-2); font-size: var(--amp-type-label); color: var(--amp-color-muted); }
@media (min-width: 1024px) { .quote { margin-inline-start: calc(100% / 6); } }

/* ---------- 4 Prozess ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--amp-space-4); }
.steps li { position: relative; display: grid; gap: var(--amp-space-1); padding-top: var(--amp-space-2); border-top: 1px solid var(--amp-color-line); }
.steps li::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
  background: var(--amp-color-accent-primary); transform-origin: left;
}
.steps .num { font-family: var(--amp-font-heading); font-weight: 200; font-size: var(--amp-type-numeral); line-height: 1; color: var(--amp-color-muted); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); column-gap: var(--amp-space-3); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li:nth-child(even) { margin-top: var(--amp-space-5); }
}

/* ---------- 5 Team ---------- */
.team-grid { display: grid; gap: var(--amp-space-4); }
.member { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; gap: var(--amp-space-2); align-items: start; }
.member-text { display: grid; gap: 0.4rem; }
.member h3 { font-size: var(--amp-type-lg); font-weight: 600; }
.member .role { color: var(--amp-color-accent-primary); font-size: var(--amp-type-label); letter-spacing: 0.04em; }
.member .muted { font-size: var(--amp-type-label); }
@media (min-width: 700px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--amp-space-3); }
  .member { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--amp-space-5); }
  .member:nth-child(3n+2) { margin-top: var(--amp-space-5); }
}

/* ---------- 6 Kontakt + Recht ---------- */
.contact-grid { display: grid; gap: var(--amp-space-5); }
.contact-head { margin-bottom: 0; align-content: start; }
.contact-mail { font-size: var(--amp-type-lg); margin-top: var(--amp-space-2); overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--amp-space-3); }
  .contact-head { grid-column: 1 / 7; display: grid; grid-template-columns: 1fr; }
  .contact-head h2, .contact-head .tag, .contact-head p { grid-column: 1 / -1; }
  form { grid-column: 8 / 13; }
  .contact-mail { font-size: var(--amp-type-num); }
}
form { display: grid; gap: var(--amp-space-3); }
label { display: block; font-size: var(--amp-type-sm); font-weight: 500; letter-spacing: 0.16em; color: var(--amp-color-muted); margin-bottom: 0.4rem; }
input, select, textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--amp-color-border);
  color: var(--amp-color-text);
  padding: 0.5rem 0;
  font: inherit; font-size: var(--amp-type-md);
  border-radius: 0;
  transition: border-color var(--amp-motion-fast);
}
select option { background: var(--amp-color-card); }
input:hover, select:hover, textarea:hover { border-color: var(--amp-color-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--amp-color-accent-primary); }
textarea { resize: vertical; }
.field-group { display: none; }
form:has(#topic option[value="motion"]:checked) .field-motion,
form:has(#topic option[value="live"]:checked) .field-live,
form:has(#topic option[value="press"]:checked) .field-press { display: block; }
.honeypot { position: absolute; left: -9999px; }
.kontakt-erfolg { color: var(--amp-color-accent-primary); font-weight: 500; }
.kontakt-fehler { color: var(--amp-color-amber); font-weight: 500; }
.feld-fehler { color: var(--amp-color-amber); font-size: var(--amp-type-sm); margin-top: 0.3rem; }
[aria-invalid="true"] { border-color: var(--amp-color-amber); }

.button {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--amp-color-primary); color: var(--amp-color-btn-text);
  font-weight: 700; font-size: var(--amp-type-label); letter-spacing: 0.12em;
  border: 0; border-radius: var(--amp-radius-pill);
  padding: 1rem 1.6rem;
  cursor: pointer;
}
.button svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--amp-motion-base) var(--amp-motion-ease); } /* waechter: Icon/Sichtpunkt, rem-skaliert, kein Text */
.button:hover svg, .button:focus-visible svg { translate: 0.3rem 0; }
.button:focus-visible, .skip-link:focus-visible { outline-color: var(--amp-color-focus-on-primary); }

footer.legal { margin-top: var(--amp-space-6); padding-top: var(--amp-space-3); border-top: 1px solid var(--amp-color-line); }
.legal-seite .legal-pflichtangaben,
.legal-seite .legal-text { max-width: 46rem; line-height: 1.7; }
.legal-seite .legal-text h2 {
  margin: var(--amp-space-5) 0 var(--amp-space-2);
  font-size: var(--amp-type-lg);
  line-height: 1.2;
  text-transform: none;
}
.slogan-end { font-family: var(--amp-font-heading); font-weight: 700; text-transform: uppercase; font-size: var(--amp-type-display); line-height: 0.9; letter-spacing: 0.01em; color: var(--amp-color-muted); margin-bottom: var(--amp-space-4); text-wrap: balance; }
.legal-cols { display: grid; gap: var(--amp-space-2); font-size: var(--amp-type-sm); color: var(--amp-color-muted); }
.legal-cols strong { color: var(--amp-color-text); }
.legal-cols a { color: var(--amp-color-muted); }
.legal-cols a:hover { color: var(--amp-color-accent-primary); }
@media (min-width: 700px) { .legal-cols { grid-template-columns: repeat(3, 1fr); gap: var(--amp-space-3); } }
/* Nachtrag 2026-09-24: Social-Links jetzt hier statt im Hero (nur wenn gesetzt). */
.footer-social { display: flex; gap: var(--amp-space-2); margin-top: var(--amp-space-2); }
.footer-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; /* waechter: Zielgroesse traegt der Link */ }
.footer-social svg { width: 1.15rem; height: 1.15rem; fill: var(--amp-color-muted); } /* waechter: Icon */
.footer-social a:hover svg, .footer-social a:focus-visible svg { fill: var(--amp-color-accent-primary); }

/* ---------- Bewegung: nur ohne reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: langsamer Zoom je Standbild, Rahmen baut sich auf. Erst ab "js-anim-ready"
     (JS setzt das nach 'load', siehe app.js): eine aktive CSS-Animation/-Transition
     macht das Element sonst dauerhaft LCP-unfaehig, auch nachdem sie fertig ist
     (gemessen 2026-09-23: Kandidat blieb der 2-Zeichen "EN"-Link statt Hero-Bild/-Box). */
  html.js-anim-ready .hero-slide.is-active { animation: drift calc(var(--amp-motion-slide) + var(--amp-motion-cine)) linear forwards; }
  .hero-full:not(.is-playing) .hero-slide.is-active { animation-play-state: paused; }
  @keyframes drift { from { scale: 1.08; } to { scale: 1; } }
  html.js-anim-ready .hero-box { animation: settle var(--amp-motion-cine) var(--amp-motion-ease) both; }
  html.js-anim-ready .hero-rule { animation: draw var(--amp-motion-cine) var(--amp-motion-ease) 300ms both; }
  /* Kein opacity-Start: das LCP-Bild (.hero-logo) liegt im .hero-box-Vorfahren,
     Chrome wertet LCP erst bei voller Deckkraft (gemessen 2026-09-23: Render Delay
     ~2,3s durch die alte opacity:0-Startphase). Nur transform, Startzustand deckend. */
  @keyframes settle { from { translate: 0 1.5rem; scale: 0.97; } }
  @keyframes draw { from { transform: scaleX(0); } }
  .pin.is-lit .pin-dot::after { animation: ping 2.2s var(--amp-motion-ease) infinite; }
  @keyframes ping { 0% { opacity: 0.9; scale: 0.4; } 70%, 100% { opacity: 0; scale: 1.6; } }

  /* Scrollgetrieben, wo der Browser es kann; sonst bleibt alles sichtbar */
  @supports (animation-timeline: view()) {
    header.site {
      animation: head linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
    @keyframes head { from { background: transparent; border-color: transparent; } }
    .site-home { animation: fadein linear both; animation-timeline: scroll(root); animation-range: 40vh 90vh; }
    .site-home:focus-visible { opacity: 1 !important; }
    @keyframes fadein { from { opacity: 0; } }

    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rise { from { opacity: 0; translate: 0 2.5rem; } }
    .work .ph, .member .ph { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes wipe { from { clip-path: inset(0 0 100% 0); scale: 1.06; } to { clip-path: inset(0); scale: 1; } }
    .steps li::before { animation: line linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes line { from { transform: scaleX(0); } }
    .slogan-end { animation: track linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes track { from { letter-spacing: 0.12em; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html, .hero-full { scroll-snap-type: none; }
  *, *::before, *::after { transition: none !important; }
}

/* Kopfzeile: beim Runterscrollen weg, beim Hochscrollen 5 s zurueck (app.js setzt .kopf-weg) */
header.site { transition: transform var(--amp-motion-base) var(--amp-motion-ease); }
header.site.kopf-weg { transform: translateY(-100%); }
header.site:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { header.site { transition: none; } }

/* ---------- Globus im Handymodus (< 768px, W4-5) ---------- */
.globus-canvas { display: none; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; margin-inline: auto; touch-action: pan-y; }
@media (max-width: 767px) {
  .map-wrap { aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; }
  .map-land { display: none !important; }
  .globus-canvas { display: block; }
}
@media (min-width: 768px) {
  .globus-canvas { display: none !important; }
  .map-land { display: block; }
}

/* ---------- Video-Player (AMP-25, W5-2) ---------- */
.amp-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--amp-color-card); border-radius: var(--amp-radius-md); overflow: hidden; }
.amp-player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.amp-player-controls { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: var(--amp-space-2); padding: var(--amp-space-2); background: var(--amp-color-scrim); transition: opacity var(--amp-motion-base) var(--amp-motion-ease); }
.amp-player.is-playing:not(:hover):not(:focus-within) .amp-player-controls { opacity: 0; }
.amp-player-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: transparent; border: none; color: var(--amp-color-text); cursor: pointer; border-radius: var(--amp-radius-sm); }
.amp-player-btn:hover, .amp-player-btn:focus-visible { color: var(--amp-color-primary); outline: 2px solid var(--amp-color-primary); outline-offset: 2px; }
.amp-player-btn svg { width: 1.25rem; height: 1.25rem; }
.amp-player.is-playing .icon-play { display: none; }
.amp-player:not(.is-playing) .icon-pause { display: none; }
.amp-player.is-muted .icon-volume { display: none; }
.amp-player:not(.is-muted) .icon-muted { display: none; }
.amp-player-progress-wrap { flex: 1; display: flex; align-items: center; }
.amp-player-progress { width: 100%; height: 0.35rem; accent-color: var(--amp-color-primary); cursor: pointer; }


/* ---------- Mediapass-Pruefseite /pass/<token>/ (Karte MEDIAPASS.md Teil A) ---------- */
/* Eigenstaendiges Dokument (kein Header/Footer/Nav) -- body traegt hier die Basiswerte,
   die sonst aus dem Theme-Wrapper kaemen. */
.mediapass-body { margin: 0; background: var(--amp-color-bg); color: var(--amp-color-text); font-family: var(--amp-font-body); }
.mediapass { max-width: 26rem; margin-inline: auto; padding: var(--amp-space-4) var(--amp-space-3); text-align: center; }
.mediapass-logo { display: block; width: min(12rem, 70%); height: auto; margin: 0 auto var(--amp-space-4); }
/* >= 50% Breite bei 360px (Grenzbeamter gleicht Gesicht ab, Karte Teil A.2) */
/* height: auto ist Pflicht, nicht Kosmetik: get_the_post_thumbnail() gibt immer
   HTML-width/height-Attribute nach der echten Bildgroesse aus (Praesentations-
   Hinweis, geht sonst dem `aspect-ratio` hier vor und quetscht jedes nicht
   quadratische Foto auf die Bildhoehe des Attributs -- gemessen: 202x8px statt
   202x202px bei einem 8x8-Testbild). */
.mediapass-foto { width: 55%; max-width: 14rem; height: auto; aspect-ratio: 1 / 1; border-radius: var(--amp-radius-md); object-fit: cover; background: var(--amp-color-block); margin: 0 auto var(--amp-space-3); display: block; }
.mediapass-foto--platzhalter { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--amp-color-muted); font-size: var(--amp-type-sm); border: 1px dashed var(--amp-color-border); padding: var(--amp-space-2); }
.mediapass-name { font-family: var(--amp-font-heading); font-size: var(--amp-type-xl); margin: 0 0 var(--amp-space-1); }
.mediapass-titel { font-size: var(--amp-type-md); margin: 0 0 var(--amp-space-2); }
/* Wort (CREW/MEDIA/...) ist nur eine Kategorie, nicht der Jobtitel -- klein und
   zurueckhaltend, sonst wirkt sie prominenter als der eigentliche Titel. */
.mediapass-wort { display: inline-block; color: var(--amp-color-muted); font-size: var(--amp-type-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--amp-space-3); }
.mediapass-status { font-family: var(--amp-font-heading); font-size: var(--amp-type-lg); font-weight: 700; letter-spacing: 0.06em; padding: var(--amp-space-2) var(--amp-space-3); border-radius: var(--amp-radius-md); margin: 0 0 var(--amp-space-4); }
.mediapass-status--valid { color: var(--amp-color-success); border: 2px solid var(--amp-color-success); }
.mediapass-status--expired { color: var(--amp-color-amber); border: 2px solid var(--amp-color-amber); }
.mediapass-status--revoked { color: var(--amp-color-danger); border: 2px solid var(--amp-color-danger); }
.mediapass-angaben { display: grid; grid-template-columns: 1fr 1fr; gap: var(--amp-space-2); text-align: left; margin: 0 0 var(--amp-space-4); }
.mediapass-angaben dt { color: var(--amp-color-muted); font-size: var(--amp-type-sm); }
/* Passnummer darf nie umbrechen (Grenzbeamter vergleicht sie mit dem Druck-Pass Zeichen fuer Zeichen). */
.mediapass-angaben dd { margin: 0; font-weight: 600; white-space: nowrap; }
.mediapass-kontakt { border-top: 1px solid var(--amp-color-line); padding-top: var(--amp-space-3); margin: 0 0 var(--amp-space-3); }
.mediapass-kontakt p { margin: 0 0 var(--amp-space-1); }
.mediapass-hinweis { color: var(--amp-color-muted); font-size: var(--amp-type-sm); }
.mediapass-zeitstempel { color: var(--amp-color-muted); font-size: var(--amp-type-sm); }
@media (min-width: 480px) { .mediapass { padding-top: var(--amp-space-6); } }

/* Vorschau-Anker (Backend-Knopf "Auf der Seite ansehen", Betreiber 2026-09-24T18:40):
   kurzzeitige Hervorhebung des per #amp-<typ>-<id> angesprungenen Elements. */
.amp-vorschau-highlight { outline: 3px solid var(--amp-color-accent-primary); outline-offset: 4px; transition: outline-color 4s ease; }
@media (prefers-reduced-motion: reduce) { .amp-vorschau-highlight { transition: none; } }

/* GENERIERT -- nicht von Hand aendern. Werkzeug: werkzeuge/fokus_css.py */
.fx-0 { --fx: 0%; }
.fx-5 { --fx: 5%; }
.fx-10 { --fx: 10%; }
.fx-15 { --fx: 15%; }
.fx-20 { --fx: 20%; }
.fx-25 { --fx: 25%; }
.fx-30 { --fx: 30%; }
.fx-35 { --fx: 35%; }
.fx-40 { --fx: 40%; }
.fx-45 { --fx: 45%; }
.fx-50 { --fx: 50%; }
.fx-55 { --fx: 55%; }
.fx-60 { --fx: 60%; }
.fx-65 { --fx: 65%; }
.fx-70 { --fx: 70%; }
.fx-75 { --fx: 75%; }
.fx-80 { --fx: 80%; }
.fx-85 { --fx: 85%; }
.fx-90 { --fx: 90%; }
.fx-95 { --fx: 95%; }
.fx-100 { --fx: 100%; }
.fy-0 { --fy: 0%; }
.fy-5 { --fy: 5%; }
.fy-10 { --fy: 10%; }
.fy-15 { --fy: 15%; }
.fy-20 { --fy: 20%; }
.fy-25 { --fy: 25%; }
.fy-30 { --fy: 30%; }
.fy-35 { --fy: 35%; }
.fy-40 { --fy: 40%; }
.fy-45 { --fy: 45%; }
.fy-50 { --fy: 50%; }
.fy-55 { --fy: 55%; }
.fy-60 { --fy: 60%; }
.fy-65 { --fy: 65%; }
.fy-70 { --fy: 70%; }
.fy-75 { --fy: 75%; }
.fy-80 { --fy: 80%; }
.fy-85 { --fy: 85%; }
.fy-90 { --fy: 90%; }
.fy-95 { --fy: 95%; }
.fy-100 { --fy: 100%; }
img.amp-fokus { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }