/* ============================================================================
   seite-ueber-uns  —  aus ueber-uns.html des statischen Standes
   Automatisch extrahiert (_work/theme-css-extrakt.mjs), inhaltlich unveraendert.
   Einzige Aenderung: Bildpfade zeigen auf das Theme-Verzeichnis.
   ========================================================================= */


/* pB 64 statt 96 (Review 20/5 B1): die Site hatte zwei Hero-Unterkanten ohne
   erkennbare Regel. Einheitlich 64; die erste Sektion behaelt ihr pT 128 und
   bleibt damit in der Familie "eigenstaendig" (Einstieg ~192 statt 224). */
.page-hero { position: relative; padding: 160px 0 64px; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 30% 40%, rgba(225,6,0,.22), transparent 60%), linear-gradient(180deg, #050505, var(--bg-base-2));
}
.page-hero h1 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(64px, 12vw, 184px); line-height: 0.86; letter-spacing: -0.04em;
  text-transform: uppercase; margin: 24px 0;
}
.page-hero h1 .accent { color: var(--red); }
.crumbs { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 16px; }
/* Klickflaeche auf 24px (WCAG 2.2 Zielgroesse) — das negative Margin haelt die
   Zeilenhoehe unveraendert, optisch aendert sich nichts. */
.crumbs a { color: var(--text-secondary); padding: 4px 0; margin: -4px 0; }
.crumbs .sep { color: var(--red-bright); }

.split { display: grid; gap: 64px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; } }

.story-img { position: relative; margin: 0; aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-2); box-shadow: var(--shadow-lg), var(--shadow-glow); }
.story-img img { width: 100%; height: 100%; object-fit: cover; }
.story-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,5,5,.6)); }
/* Querformat-Variante fuer das Gruppenbild: der Slot war fuer ein hochkantes
   Hallenfoto gebaut, das Teambild ist 1,83:1. Ohne eigenes Seitenverhaeltnis
   haette `object-fit: cover` links und rechts je ein Drittel weggeschnitten —
   also genau die Personen an den Enden der Reihe. */
.story-img.quer { aspect-ratio: 1400/766; }

.values { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); } }
.val {
  padding: 36px 28px;
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  position: relative;
  transition: transform .4s var(--ease-spring), border-color .35s, box-shadow .35s;
}
.val:hover { transform: translateY(-4px); border-color: var(--border-red); box-shadow: var(--shadow-red); }
.val .num { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 1; color: var(--red); margin-bottom: 16px; }
.val h3 { font-family: var(--font-display); font-style: italic; font-size: 28px; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 10px; }
.val p { color: var(--text-secondary); }

/* Werte-Band — das Team bei der Arbeit, direkt unter den drei Werte-Karten.
   Mobil im nativen 4:3 (beide Mechaniker ganz im Bild), ab 768px auf 16:9
   beschnitten, damit das Band die Sektion nicht erschlaegt. */
.work-band { margin: 48px 0 0; }
.work-band .shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
}
.work-band img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/3; object-fit: cover; object-position: 50% 45%;
}
@media (min-width: 768px) { .work-band img { aspect-ratio: 16/9; } }
.work-band .shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.55));
}
.work-band figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 14px;
}
.work-band figcaption .accent { color: var(--red-bright); }

/* B3 (Review 20/5): "03 · MEILENSTEINE" + Headline standen als EINZIGE Sektion
   der Site auf x336 statt x116 — der .wrap-narrow zog den Kopf mit in die
   schmale Lesespalte, und die sonst strenge Marker-Flucht brach genau hier.
   Jetzt traegt die Sektion den Standard-.wrap (Kopf auf 116), und die schmale
   Spalte sitzt nur noch um die Liste selbst. BEWUSST ohne margin-Auto: eine
   zentrierte Lesespalte spraenge wieder von der Kopfkante weg. 768 px ist exakt
   die Inhaltsbreite, die .wrap-narrow @1440 hatte — die Zeilenlaenge der
   Meilenstein-Texte aendert sich also nicht. */
.meilensteine .timeline,
.meilensteine .tl-band { max-width: 768px; }

.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--red), transparent 90%); }
.tl-item { position: relative; padding: 0 0 36px 24px; }
/* Der Punkt sitzt AUF der Schiene: .timeline (24px padding) + .tl-item (24px padding)
   ergeben 48px bis zur Item-Kante — die Schiene liegt aber bei 0. -29px zentriert
   den 11px-Punkt darauf (vorher -5px = 18px daneben, sichtbar losgeloest). */
.tl-item::before { content: ''; position: absolute; left: -29px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 16px var(--red); }
.tl-year { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--red-bright); }
.tl-title { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1; letter-spacing: -0.02em; margin: 6px 0 10px; text-transform: uppercase; }
.tl-item p { color: var(--text-secondary); font-size: 14.5px; }

.tl-band { position: relative; margin: 8px 0 0; }
.tl-band .shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
}
.tl-band img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }
.tl-band .shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.55));
}
.tl-band figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 14px;
}
.tl-band figcaption .accent { color: var(--red-bright); }

.team-card {
  display: flex; gap: 32px; align-items: center;
  padding: 32px;
  background: linear-gradient(120deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}
.team-card .avatar {
  width: 140px; height: 140px; flex: 0 0 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 64px;
  color: #fff; box-shadow: var(--shadow-glow);
  /* Initialen bleiben als Fallback darunter liegen — das Foto legt sich darüber */
  position: relative; overflow: hidden; isolation: isolate;
}
.team-card .avatar img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  border-radius: 50%;
}
.team-card h3 { font-family: var(--font-display); font-style: italic; font-size: 36px; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 4px; }
.team-card .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-bright); }
.team-card p { color: var(--text-secondary); margin-top: 12px; max-width: 540px; line-height: 1.7; }

/* ============================================================================
   TEAM-SEKTION (2026-08-23, Shooting-Welle)
   Loest die alte `.team-card` ab — einen 140-px-Kreis mit einem einzigen
   Portrait. Aufbau jetzt: Teambild als Auftakt, darunter die drei Portraits
   im Raster. Erst die Mannschaft, dann die Gesichter; das Raster ist die
   Aufloesung des Gruppenbildes, nicht seine Wiederholung.

   TEAMBILD — harte Grenze: die Vorlage hat nur 1407 px und ist bereits ein
   Zuschnitt (die RAW-Datei im Shooting-Ordner ist NICHT das Gruppenbild,
   sondern eine Zweitaufnahme des Mini — geprueft). Bei voller .wrap-Breite
   (1208 px) waere das 1,16x und sichtbar weich, als Vollbreiten-Band 0,49x.
   Deshalb sitzt es im .wrap-narrow (880 px) = 1,6x und ist damit sauber.
   Wer es breiter setzen will, braucht zuerst eine groessere Datei. */
/* PORTRAIT-RASTER — erbt die Geometrie von `.values` (1 -> 3 Spalten @768,
   gap 24), damit auf dieser Seite kein zweites Rastermass entsteht. */
.team-reihe { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 64px; }
@media (min-width: 768px) { .team-reihe { grid-template-columns: repeat(3, 1fr); } }
.team-person { display: flex; flex-direction: column; }
.team-person .bild {
  position: relative; display: block; overflow: hidden; margin-bottom: 18px;
  border-radius: var(--r-xl); border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
}
.team-person img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover;
  /* Alle drei stehen vor demselben orange-roten Werbebanner. Bei voller
     Saettigung liegt dessen Orange nur 20-25 Grad neben --red #e10600 — die
     schlechteste aller Distanzen: zu nah fuer Kontrast, zu weit fuer
     Harmonie, und --red verliert die Signalwirkung, auf der das ganze
     Farbsystem steht. Entsaettigt landet es auf einem Bronzeton, der neben
     dem warmen Markenton sitzt statt gegen ihn zu kaempfen. Die Hauttoene
     bleiben dabei menschlich — ein Duotone waere hier falsch (drei
     rot-monochrome Gesichter nebeneinander wirken leichenhaft).
     Die Datei ist bereits vorentsaettigt; das hier ist die Feinstufe. */
  filter: saturate(.92); transition: filter .5s var(--ease-out);
}
/* Der doppelte Scrim ist der eigentliche Hebel: oben nimmt er dem Banner-
   Schriftzug die Wucht, unten schafft er den dunklen Sitz fuer Name + Rolle. */
.team-person .bild::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,.5) 0%, transparent 30%, transparent 55%, rgba(5,5,5,.72) 100%);
}
@media (hover: hover) { .team-person:hover img { filter: saturate(1.05); } }
.team-person .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-bright); }
/* NAMEN IN DER LESESCHRIFT, nicht in der Anzeigeschrift (Inhaber-Befund
   2026-08-23: "die schrift ist sehr dick, man kann die namen kaum lesen").
   Anton ist eine stark verdichtete Fettschrift — als GROSSBUCHSTABEN und
   kursiv verlaufen die Buchstaben eines Eigennamens ineinander, und anders
   als bei einer Headline kann man einen Namen nicht aus dem Kontext raten.
   Eigennamen brauchen Buchstabenabstand und Ober-/Unterlaengen, also
   Gemischtschreibung in der Grundschrift. Die Anzeigeschrift bleibt ueberall
   sonst auf dieser Seite unveraendert. */
.team-person h3 { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: #fff; margin: 8px 0 10px; }
.team-person p { color: var(--text-secondary); line-height: 1.7; margin: 0; }

.stats-banner { background: #000; border-top: 1px solid var(--border-red); border-bottom: 1px solid var(--border-red); padding: 64px 0; }
.stats-banner-grid { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 768px) { .stats-banner-grid { grid-template-columns: repeat(4, 1fr); } }
.stats-banner .v { font-family: var(--font-display); font-style: italic; font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.03em; }
.stats-banner .v .accent { color: var(--red); }
.stats-banner .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; }