/* Seite /ueber-uns/ ---------------------------------------------------------
   Lokale Styles ausschliesslich fuer src/ueber-uns.njk (per Frontmatter-Feld
   extraCss in layouts/base.njk eingebunden). Alle Klassen tragen das Praefix
   .about-, damit keine andere Seite betroffen sein kann. Es werden nur die
   bestehenden Design-Tokens (tokens.css) und Breakpoints (768/1024px)
   verwendet. Wiederverwendet aus den globalen Styles: .hero, .hero-media (Raster-
   Platzhalter + Overlay, spaeter <img> hinein), .cta-final/.cta-media, .card--dark,
   .icon-badge, .btn, .eyebrow, .section-head, .grid. ----------------------- */

/* Hero ------------------------------------------------------------------- */
/* Ruhiger Anthrazit-Hintergrund ohne Bild/Muster. Der Startwert entspricht
   dem tatsaechlich sichtbaren Header-Ton: .site-header ist rgba(11,11,11,0.92)
   ueber dem hellen Seitenhintergrund (--paper-100), das mischt sich zu ca.
   #1e1e1e. Hier aus denselben Tokens abgeleitet (Fallback: #1e1e1e); nach
   unten nur minimal dunkler (ca. #191919), kein sichtbarer Verlauf. */
.about-hero {
  background-color: #1e1e1e;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink-900) 92%, var(--paper-100)) 0%,
    color-mix(in srgb, var(--ink-900) 94%, var(--paper-100)) 100%
  );
}
.about-hero__grid {
  display: grid;
  gap: var(--space-5);
}
.about-hero__text h1 {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.25rem);
  text-wrap: balance;
}
.about-hero__accent { color: var(--brand-400); }
.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
@media (min-width: 1024px) {
  .about-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: var(--space-6);
    align-items: center;
  }
  .about-hero__facts { grid-column: 1 / -1; }
}

/* Portrait-Flaeche ----------------------------------------------------------
   Wiederverwendet im Hero und in den Teamkarten. Ohne <img> zeigt sie ein
   klar erkennbares Platzhalter-Motiv. Spaeter: <img> in .about-portrait legen
   (Standard: object-fit: cover, oben ausgerichtet). Fuer ein freigestelltes
   Portrait (PNG/WebP mit transparentem Hintergrund) Modifier
   .about-portrait--cutout: Motiv wird unten ausgerichtet, das Raster bleibt
   als Hintergrund sichtbar. --------------------------------------------- */
.about-portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--ink-900);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(143, 201, 58, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px);
  color: var(--ink-text);
}
.about-hero .about-portrait {
  width: 100%;
  max-width: 24rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@media (min-width: 1024px) {
  .about-hero .about-portrait { max-width: none; }
}
.about-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Nicht freigestelltes Foto mit eigenem Hintergrund (quer, 3:2, Person leicht
   rechts der Mitte): das Seitenverhaeltnis der Flaeche wird flacher gewaehlt als
   das 4:5-Platzhalter, damit der technische Hintergrund sichtbar bleibt und die
   Person samt verschraenkten Armen vollstaendig im Ausschnitt liegt. Die
   Bildhoehe wird komplett gezeigt, nur die Breite wird per object-position
   ausgerichtet. Kein Zoom. */
.about-portrait--photo img { object-position: 64% center; }
.about-portrait--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(11, 11, 11, 0.4) 100%);
}
.about-hero .about-portrait--photo { aspect-ratio: 1 / 1; }
.about-hero .about-portrait--photo img { object-position: 68% center; }
.about-member .about-portrait--photo { aspect-ratio: 5 / 6; }
.about-portrait--cutout img {
  object-fit: contain;
  object-position: center bottom;
}
.about-portrait__silhouette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 72%;
  height: auto;
  margin-inline: auto;
  color: var(--brand-400);
  opacity: 0.55;
}
.about-portrait .leistung-media-placeholder-label {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Vorteile im Hero (bewusst keine Karten) --------------------------------- */
.about-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  border-top: 1px solid var(--ink-line);
  padding-top: var(--space-4);
}
.about-facts li { position: relative; padding-top: var(--space-2); }
.about-facts li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--brand-400);
}
.about-facts__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--brand-400);
  margin-bottom: 0.25rem;
}
.about-facts__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .about-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* Warum Lastwerk? ----------------------------------------------------------- */
#warum-lastwerk { scroll-margin-top: 4.5rem; }
.about-story .eyebrow + h2,
.about-approach .eyebrow + h2,
.about-region .eyebrow + h2 { margin-top: 0.35em; }
.about-story {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .about-story {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6);
  }
}
.about-statement {
  position: relative;
  margin: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--ink-900);
  color: var(--ink-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.about-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-4);
  width: 3rem;
  height: 3px;
  background: var(--brand-400);
}
.about-statement blockquote { margin: 0; }
.about-statement blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}
.about-statement figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-400);
}
.about-statement figcaption::before { content: "— "; }

/* Unser Ansatz (dunkel, spaeter Hintergrundbild ueber .hero-media) ---------- */
.about-approach {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .about-approach { padding-block: var(--space-7); }
}
.about-approach .container { position: relative; z-index: 1; }
/* Hintergrundbild (2:1, links bewusst dunkel, Plan + Verteilung rechts): die
   linke Bildhaelfte ist selbst schon dunkel, das globale .hero-media-Overlay
   (94 % -> 60 %) wuerde Plan und Verteilung praktisch verschwinden lassen.
   Lokal daher ein leichteres, horizontales Overlay: links/Mitte stark genug
   fuer die Textlesbarkeit, rechts bleibt das Motiv gut sichtbar. Nur horizontale
   Position wird gesetzt (Bild ist hier hoehengetrieben); rechts bleibt mehr
   vom Motiv erhalten als links. */
.about-approach .hero-media img { object-position: 75% 42%; }
.about-approach .hero-media::after {
  background: linear-gradient(
    90deg,
    rgba(11, 11, 11, 0.72) 0%,
    rgba(11, 11, 11, 0.6) 45%,
    rgba(11, 11, 11, 0.32) 100%
  );
}
/* Mobile: Sektion ist sehr hoch und schmal, das Bild zeigt nur einen schmalen
   Streifen des Motivs - Lesbarkeit hat Vorrang, daher gleichmaessiges Overlay. */
@media (max-width: 767px) {
  .about-approach .hero-media::after { background: rgba(11, 11, 11, 0.7); }
}
.about-approach__intro { max-width: 46rem; margin-bottom: var(--space-5); }
.about-approach .card--dark {
  background: rgba(18, 33, 26, 0.82);
  backdrop-filter: blur(4px);
}
.about-approach .card--dark h3 { margin-bottom: var(--space-1); }

/* Team ------------------------------------------------------------------------
   Datenquelle: src/_data/team.json. Das Grid waechst mit der Anzahl der
   Eintraege (1 Spalte mobil, 2 Spalten ab 640px). Kein Umbau noetig fuer
   weitere Personen. ------------------------------------------------------- */
.about-team-layout {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .about-team-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-6);
  }
}
.about-team {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .about-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-member {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-000);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.about-member__body { padding: var(--space-3); }
.about-member__body h3 { margin-bottom: 0.25rem; }
.about-member__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--space-2);
}
.about-member--growth {
  justify-content: flex-end;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background-color: var(--ink-900);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(143, 201, 58, 0.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px);
  border: 1px dashed var(--ink-line);
  color: var(--ink-text);
  box-shadow: none;
  min-height: 16rem;
}
.about-member--growth h3 { margin-bottom: var(--space-1); }
.about-member--growth p { color: var(--ink-text-muted); }

/* Region (grosse dunkle Flaeche, spaeter Kartenmotiv ueber .hero-media) ------- */
.about-region {
  position: relative;
  overflow: hidden;
  min-height: 24rem;
  border-radius: var(--radius-lg);
  color: var(--ink-text);
}
/* Kartenmotiv (2:1, links dunkel/ruhig, Strassennetz rechts detaillierter).
   Reine Stimmungsflaeche - die Orts-Chips sind bewusst NICHT geografisch auf das
   Bild abgestimmt. Lokales horizontales Overlay statt des globalen .hero-media-
   Overlays: hinter Text stark, ueber der sichtbaren Karte schwach. */
.about-region .hero-media img { object-position: 50% 45%; }
.about-region .hero-media::after {
  background: linear-gradient(
    90deg,
    rgba(11, 11, 11, 0.85) 0%,
    rgba(11, 11, 11, 0.68) 45%,
    rgba(11, 11, 11, 0.3) 75%,
    rgba(11, 11, 11, 0.12) 100%
  );
}
@media (max-width: 767px) {
  /* Schmale, hohe Flaeche: nur ein Ausschnitt des Motivs (detaillierte rechte
     Bildhaelfte), Lesbarkeit hat Vorrang -> gleichmaessiges Overlay. */
  .about-region .hero-media img { object-position: 72% 50%; }
  .about-region .hero-media::after { background: rgba(11, 11, 11, 0.58); }
}
.about-region__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  padding: var(--space-5) var(--space-3);
}
@media (min-width: 768px) {
  .about-region { min-height: 30rem; display: flex; align-items: center; }
  .about-region__content { padding: var(--space-6) var(--space-5); }
}
.about-places {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.about-places li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  padding: 0.35em 0.85em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.4);
  color: var(--ink-text-muted);
}
.about-places li.about-places__home {
  border-color: var(--brand-400);
  color: var(--ink-text);
}
.about-places li.about-places__home::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--brand-400);
}

/* Abschluss-CTA (nutzt .cta-final/.cta-media, hier nur groesser) -------------- */
@media (min-width: 768px) {
  .cta-final.about-cta { padding-block: var(--space-7); }
}
/* CTA-Bild (Panorama 2:1, Abendstimmung links, Transporter + Haus rechts): das
   globale .cta-media-Overlay (93 % -> 50 %) dunkelt Sonnenuntergang, Transporter
   und Haus zu stark ab. Lokal leichter, links (hinter der Headline) am
   staerksten. Nur vertikaler Ausschnitt (Bild ist breitengetrieben). */
.about-cta .cta-media img { object-position: center 66%; }
.about-cta .cta-media::after {
  background: linear-gradient(
    90deg,
    rgba(11, 11, 11, 0.78) 0%,
    rgba(11, 11, 11, 0.6) 50%,
    rgba(11, 11, 11, 0.25) 100%
  );
}
@media (max-width: 767px) {
  /* Schmal: Headline laeuft ueber die halbe Bildbreite -> etwas mehr Abdunklung. */
  .about-cta .cta-media::after {
    background: linear-gradient(
      90deg,
      rgba(11, 11, 11, 0.84) 0%,
      rgba(11, 11, 11, 0.7) 60%,
      rgba(11, 11, 11, 0.45) 100%
    );
  }
}
/* Desktop: Headline + Button als zusammengehoerige Spalte links buendeln, damit
   die rechte Bildhaelfte (Haus, Transporter, Lastwerk-Branding) frei bleibt.
   Unter 1024px bleibt die bisherige Anordnung (Tablet/Mobile) unveraendert.
   Text-Spalte endet bei ~40 % der Container-Breite; das Overlay ist dadurch
   rechts der Textspalte deutlich heller (Fahrzeug bleibt Fokus). */
@media (min-width: 1024px) {
  .cta-final.about-cta { padding-block: var(--space-6); }
  .about-cta .cta-band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 30rem;
  }
  .about-cta .cta-media::after {
    background: linear-gradient(
      90deg,
      rgba(11, 11, 11, 0.8) 0%,
      rgba(11, 11, 11, 0.62) 30%,
      rgba(11, 11, 11, 0.25) 55%,
      rgba(11, 11, 11, 0.12) 100%
    );
  }
}
.about-cta__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw + 0.5rem, var(--text-2xl));
  font-weight: 700;
  line-height: 1.15;
}