/* =========================================================
   Über uns – Seiten-Styles
   ========================================================= */

/* ---------- GLAS-FLAECHE FUER TEXTBLOECKE ----------
   Die Textbloecke standen bisher blank auf dem Hintergrundfoto. Lesbar
   waren sie zwar (helle Schrift, 8.5:1), aber ohne eigene Flaeche "schwebt"
   der Text und der Kontrast haengt davon ab, welcher Bildausschnitt gerade
   dahinterliegt. Eine gemeinsame Glas-Klasse gibt jedem Block einen
   definierten Untergrund.

   Dunkles Glas, nicht helles: die Seite ist durchgehend dunkel. Das helle
   Pendant auf den Fahrzeug-Detailseiten (.vdet-section, fahrzeuge.css)
   folgt derselben Mechanik -- gleiche Blur-Staerke, gleicher
   @supports-Fallback auf eine fast deckende Flaeche, damit Text auch ohne
   backdrop-filter lesbar bleibt (Lesbarkeit vor Foto-Durchsicht).

   saturate() hebt die Farben des durchscheinenden Fotos leicht an, sonst
   wirkt der Bereich hinter dem Blur ausgewaschen grau. */
.u-glass {
  background: rgba(16, 18, 22, .55);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);
  /* Weicher, breiter Schatten statt harter Kante: hebt die Flaeche vom Foto
     ab, ohne als Rahmen aufzufallen. */
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  padding: clamp(24px, 3vw, 40px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .u-glass { background: rgba(16, 18, 22, .88); }
}

/* HERO */
/* Wie .page-hero auf den uebrigen Unterseiten: Scrim-Verlauf ueber dem
   globalen Hintergrundbild, Foto laeuft hinter der transparenten Nav durch,
   weicher Ausklang nach unten. */
.u-hero {
  /* User-Entscheidung (Startseite + alle Unterseiten): durchgehend dunkler
     Hintergrund wie der Homepage-Hero, keine Uebergaenge mehr. Vorher fast
     blickdicht (.95/.90/.84) und mit eigenem Ausblend-Fade -- beides jetzt
     auf denselben .40-Ton abgesenkt, den auch alle Folgesektionen tragen
     (kein Sprung an der Kante), Fade komplett entfernt (harter, aber
     gleichfarbiger Schnitt zur naechsten Sektion). Text bleibt lesbar durch
     eigene helle Textfarben (.u-hero-h/.u-hero-p), nicht durch Scrim-
     Kontrast allein. */
  /* Nachtrag: der Verlauf war links .55, in der Mitte .48 -- gegen eine helle
     Fotostelle kam die Subline dort auf gemessene 2.77:1 (Pixel-Messung am
     hellsten Bildpunkt hinter dem Text). Jetzt flach auf --scrim-photo, also
     derselbe Ton wie .page-hero und alle Folgesektionen: eine Sorge weniger
     an der Unterkante und genug Deckung fuer den Text. */
  background: var(--scrim-photo);
  padding: calc(var(--nav-h) + 56px) var(--space-gutter) var(--space-xl);
  position: relative;
  overflow: hidden;
  border-bottom: none;
}
.u-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  /* Zusaetzliche Lesbarkeits-Abdunklung wie bei .page-hero::before (main.css):
     der Hero-Text liegt hier ueber der hellsten Fotostelle, die Subline kam
     ohne diesen Layer nur auf 4.18:1 gegen den hellsten Bildpunkt. Blendet
     nach unten aus, damit an der Sektionskante kein Tonsprung entsteht. */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(232,32,40,.08), transparent 60%),
    linear-gradient(100deg,
      rgba(13, 14, 17, .42) 0%, rgba(13, 14, 17, .30) 45%, rgba(13, 14, 17, .12) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 88%);
  pointer-events: none;
}
.u-hero > * { position: relative; z-index: 1; }
.u-hero-in {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.u-hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--red); margin-bottom: 20px;
}
.u-hero-h {
  font-family: var(--font-heading);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700; line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -.01em;
  /* Heller Text auf dunklem Hero (--surface-dark-anchor). Ohne diese Regel erbt
     die Headline die dunkle Default-Textfarbe (--text) -> dunkel-auf-dunkel,
     nur das rote „IDEAL" wäre lesbar. Konsistent mit dem Home-Hero. */
  color: var(--text-on-dark);
}
/* Konsistenz mit Home-Hero (.hero-txt .hl): rotes IDEAL als Brand-Akzent.
   Bewusst non-italic + ohne Pulse-Animation — Sub-Page setzt einen ruhigeren
   Akzent als der Haupt-Auftritt. */
.u-hero-h .accent {
  /* --red-on-dark statt --red-text: auf dem dunklen Hero haelt #BF1F26 nur
     3.07:1. Die Headline ist zwar Grosstext (3:1 waere zulaessig), aber knapp
     darueber — der hellere Ton gibt Reserve und bleibt das Marken-Rot. */
  color: var(--red-on-dark);
  font-style: normal;
}
.u-hero-p {
  font-size: 18px; line-height: 1.6;
  color: var(--gy-light);
  max-width: 640px; margin: 0 auto;
}

/* STORY */
.u-story {
  padding: var(--space-section-y) var(--space-gutter);
  background: transparent;
  position: relative;
}
/* User-Entscheidung: durchgehend .40 wie ueberall sonst, kein Fade an
   irgendeiner Kante mehr -- Hero davor und .u-values danach sind ebenfalls
   .40, ein Uebergang waere hier unnoetig und genau das, was der User nicht
   mehr will ("KEINE UEBERGAENGE"). */
.u-story::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-photo);
}
.u-story > * { position: relative; }
.u-story-head {
  max-width: var(--maxw); margin: 0 auto clamp(40px, 5vw, 64px);
}
.u-story-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--red); margin-bottom: 16px;
}
.u-story-h {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text-on-dark);
}

/* ------- ZICKZACK-ZEILEN -------
   Jede .u-story-row ist Bild+Text-Zeile 1:1 (Text-Spalte etwas breiter,
   1.15fr/.85fr) statt vorher einer einzigen 1.3fr/.7fr-Zeile mit sehr
   langem Fliesstext -- der Text war vorher zu dominant neben dem einen
   Foto. --reverse tauscht per row-reverse die Spaltenreihenfolge, sodass
   Bild und Text abwechselnd links/rechts stehen (Zeile 1: Text links/
   Bild rechts, Zeile 2: Bild links/Text rechts, usw.). */
.u-story-row {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px;
  align-items: center;
}
.u-story-row + .u-story-row { margin-top: clamp(48px, 6vw, 72px); }
.u-story-row--reverse { grid-template-columns: .85fr 1.15fr; }
.u-story-row--reverse .u-story-text { order: 2; }
.u-story-row--reverse .u-story-image { order: 1; }

.u-story-text p {
  font-size: 16px; line-height: 1.75;
  color: var(--text-on-dark);
  margin-bottom: 18px;
}
.u-story-text p:last-child { margin-bottom: 0; }
.u-story-text strong { color: #fff; }
/* --red-on-dark statt --red-text: auf der dunklen Story-Sektion haelt
   #BF1F26 nur 3.07:1, das reicht fuer Fliesstext nicht. */
.red-inline { color: var(--red-on-dark); font-weight: 600; }

/* Alle drei Zeilen einheitlich 4:3 (Projekt-Standard, siehe DESIGN.md
   "Kartenbilder immer 4:3") -- das Eigentuemer-Hochformat-Foto wird per
   object-fit: cover passend zugeschnitten statt eine Zeile im anderen
   Seitenverhaeltnis abweichen zu lassen. */
.u-story-image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-dark);
}
.u-story-image img {
  width: 100%; height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .u-story-row,
  .u-story-row--reverse {
    grid-template-columns: 1fr; gap: 28px;
  }
  /* Mobile: Bild immer ZUERST in der Zeile, unabhaengig von --reverse --
     bei einspaltigem Stack wirkt "Text, dann Bild, dann Text, dann Bild"
     unruhiger als eine konsistente Bild-oben-Reihenfolge. */
  .u-story-row--reverse .u-story-text,
  .u-story-row--reverse .u-story-image,
  .u-story-row .u-story-text,
  .u-story-row .u-story-image {
    order: initial;
  }
  .u-story-image { order: -1; }
}

/* VALUES */
.u-values {
  padding: var(--space-section-y) var(--space-gutter);
  background: transparent;
  position: relative;
}
/* User-Entscheidung: durchgehend .40, kein Fade an irgendeiner Kante --
   .u-story davor und .u-awards danach (jetzt ebenfalls dunkel statt hell,
   siehe .u-awards weiter unten) sind beide .40. */
.u-values::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-photo);
}
.u-values > * { position: relative; }
.u-values-in { max-width: var(--maxw); margin: 0 auto; }
.u-values-head { margin-bottom: 56px; text-align: center; }
.u-values-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-on-dark); /* war unsichtbar: dunkel auf dunkel */
}

.u-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 700px) { .u-values-grid { grid-template-columns: 1fr; } }

.u-value {
  padding: 32px;
  background: var(--surface-dark-anchor);
  border: 1px solid var(--border-hairline-dark);
  border-radius: 16px;
  transition: border-color .25s, transform .25s;
}
.u-value:hover {
  border-color: rgba(232,32,40,.4);
  transform: translateY(-3px);
}
.u-value-num {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 700;
  color: var(--red);
  margin-bottom: 12px;
  opacity: .6;
}
.u-value h3 {
  font-size: 20px; font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-h-text);
}
.u-value p {
  font-size: 15px; line-height: 1.7;
  color: var(--text-on-dark);
}

/* AWARDS – 3 helle Cards mit echten Logos.
   Pattern angelehnt an .termin-card (helle BG, Hover-Lift), aber ohne Button-Slot.
   Card-BG #fff erzwingt Positiv-Logo-Varianten (mobile-de-logo.png, nicht
   die Light-Version aus dem Header). */
/* War die einzige HELLE Sektion auf der Seite (--scrim-light) -- User-
   Entscheidung: durchgehend dunkel wie ueberall sonst, keine Uebergaenge.
   Die Bewertungs-/Urkunden-Karten darin (.u-rating/.u-urkunde) sind bereits
   eigenstaendig deckend weiss und funktionieren unveraendert auf Dunkel
   (gleiches Prinzip wie die Fahrzeug-/Review-/FAQ-Karten anderswo), nur die
   rohe Ueberschrift/Text-Farbe direkt auf der Sektionsflaeche muss auf hell
   umgestellt werden. */
.u-awards {
  background: transparent;
  color: var(--text-on-dark);
  padding: var(--space-section-y) var(--space-gutter);
  position: relative;
}
.u-awards::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-photo);
}
.u-awards > * { position: relative; }
.u-awards-in {
  max-width: 1040px; margin: 0 auto;
  text-align: center;
}
.u-awards .sec-eyebrow { /* aus main.css, Farbe stimmt schon (var(--red)) */ }
.u-awards-h {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-on-dark);
  margin-bottom: 16px;
  letter-spacing: -.01em;
}
.u-awards-p {
  font-size: 16px; line-height: 1.6;
  color: var(--text-on-dark);
  max-width: 580px;
  /* Mehr Luft zur ersten Kartenreihe (User-Feedback zur Gedraengtheit). */
  margin: 0 auto clamp(56px, 6vw, 80px);
}

/* Bewertungen — generische Sterne, Werte data-driven, keine Plattform-Logos */
/* Abstaende grosszuegiger (User-Feedback: "sieht gequetscht aus"): zwischen
   den Karten und vor allem zum Urkunden-Block darunter. clamp() statt fester
   Werte, damit die Luft auf kleinen Schirmen nicht die halbe Seite frisst. */
.u-ratings {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.u-rating {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  /* Etwas mehr Innenraum -- die Karten wirkten mit 24px eng um die Zahl
     herum, besonders neben den grossen Urkunden-Karten darunter. */
  padding: 30px 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  min-width: 220px;
}
.u-rating-stars { color: var(--red); font-size: 18px; letter-spacing: 2px; }
.u-rating-val {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 800; color: var(--text);
  margin-top: 6px;
}
.u-rating-meta { font-size: 13px; color: #666; margin-top: 2px; }

/* Urkunden/Belege — echte Karten statt loser Thumbnails. Vorher waren die
   Scans nur 200px hohe Bildchen direkt unter den Bewertungskarten, kaum
   lesbar und ohne eigenen Rahmen — wirkten "hingeklatscht" statt als
   eigenstaendiger Vertrauensbeleg. Jetzt: weisse Karte mit Haarlinie +
   Schatten (gleiches Vokabular wie .u-rating), das Zertifikat deutlich
   groesser (340px statt 200px), mit sichtbarem "Vollbeleg ansehen"-Hinweis
   statt nur einer stillen Bildschaltflaeche. */
.u-urkunden {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(28px, 3vw, 40px);
  margin-top: 0;
}
.u-urkunde {
  display: flex; flex-direction: column;
  width: 300px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.u-urkunde:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.u-urkunde-frame {
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border-hairline);
}
.u-urkunde img {
  max-height: 340px;
  width: auto; max-width: 100%;
  object-fit: contain;
}
.u-urkunde-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 13px; line-height: 1.4; color: var(--text);
  font-weight: 600;
}
.u-urkunde-cap svg { flex-shrink: 0; color: var(--red); transition: transform .2s; }
.u-urkunde:hover .u-urkunde-cap svg { transform: translateX(3px); }
@media (max-width: 700px) {
  .u-ratings { gap: 14px; }
  .u-urkunden { gap: 20px; }
  .u-urkunde { width: 100%; max-width: 320px; }
  .u-urkunde img { max-height: 280px; }
}

/* HOURS – Definitions-Tabelle */
.u-hours {
  background: transparent;
  padding: var(--space-section-y) var(--space-gutter);
  position: relative;
}
/* User-Entscheidung: durchgehend .40, kein Fade an irgendeiner Kante --
   .u-awards davor (jetzt ebenfalls dunkel) und .u-cta danach sind beide
   .40 (siehe main.css .page--ueber-uns .u-cta::before weiter unten). */
.u-hours::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-photo);
}
.u-hours > * { position: relative; }
/* Zweispaltig, gespiegelt zu .u-story-row (dort wechselt die Seite pro
   Zeile) — hier fest Bild links/Text rechts, da es nur eine Zeile ist.
   Text bleibt linksbuendig statt zentriert: neben einem Bild wirkt
   zentrierter Text unausgerichtet. */
.u-hours-in {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px;
  align-items: center;
  text-align: left;
}
.u-hours-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-dark);
}
.u-hours-photo img {
  width: 100%; height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.u-hours-h {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 32px;
  letter-spacing: -.01em;
  color: var(--text-on-dark); /* war unsichtbar: dunkel auf dunkel */
}
@media (max-width: 900px) {
  .u-hours-in { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}

/* dt/dd-Layout: Label links, Wert rechts, kleiner Trenner-Border zwischen Zeilen.
   Zwei Mo-Fr-Zeilen erscheinen separat (Mittagspause als Visual-Effekt),
   nicht zusammengezogen. */
.u-hours-table {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-hairline-dark);
  border-radius: 14px;
  padding: 8px 0;
  text-align: left;
}
/* Row: dt links, .u-hours-values rechts. flex-start statt baseline weil
   .u-hours-values ein Multi-Item-Container ist (kein einzelner Text-Wert
   mehr) — baseline würde dt am ersten dd ausrichten und die Mehrwerte-
   Zeilen kämen unsymmetrisch. */
.u-hours-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 24px;
  gap: 20px;
}
.u-hours-row + .u-hours-row {
  border-top: 1px solid rgba(255,255,255,.05);
}
.u-hours-table dt {
  font-size: 14px; font-weight: 600;
  color: #ddd;
  padding-top: 1px; /* optisch auf Baseline der ersten dd-Zeile */
}
/* Values-Container: vertikaler Stack, mehrere dd's untereinander für Mo–Fr
   mit Mittagspause. Bei Single-Value-Rows (Sa+So) keine Layout-Inkonsistenz. */
.u-hours-values {
  display: flex; flex-direction: column; gap: 4px;
  text-align: right;
}
.u-hours-table dd {
  font-size: 14px; color: var(--gy-light);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.u-hours-note {
  font-size: 13px; color: var(--gy);
  margin-top: 20px;
  font-style: italic;
}

@media (max-width: 480px) {
  /* Mobile: Label oben, Values darunter — flex-direction column verhindert
     dass „Mo–Fr / Zeit / leer / Zeit"-Zerfall passiert. .u-hours-values bleibt
     als Block-Container mit gestapelten Zeiten. */
  .u-hours-row {
    padding: 14px 18px;
    flex-direction: column; gap: 4px;
  }
  .u-hours-values { text-align: left; }
  .u-hours-table dt, .u-hours-table dd { font-size: 13px; }
}

/* CTA (.u-cta) nach main.css verschoben — wird jetzt auch auf /termin/
   genutzt, dessen extraHead nur termin.css laedt, nicht ueber-uns.css.
   main.css ist global auf jeder Seite geladen. */