/* basis.css — Hölscher Automobile (Autohaus 8). Reset, Grundtypo, Kopf/Fuß, Device, Motion. */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img,
video {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button {
  font: inherit;
  cursor: pointer;
}

.eyebrow {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-leise);
}
.h-display-xxl {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-display-xxl);
  line-height: 0.92;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.h-zahl {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-zahl-display);
  line-height: 0.86;
}
.h-display-l {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-display-l);
  line-height: 1.02;
  text-wrap: balance;
}
.h1-unter {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h1-unter);
  line-height: 1.04;
  text-wrap: balance;
}
h2,
.h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  text-wrap: balance;
}
h3,
.h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--text);
}
.meta {
  color: var(--text-leise);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* CTA */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--flaeche-cta);
  color: var(--flaeche-cta-text);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 1.7rem;
  border-radius: 4px;
  border: none;
  transition:
    transform 160ms ease-out,
    background 160ms ease-out;
}
.cta:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background: #1642b0;
  }
}
.cta-dunkel {
  background: var(--kobalt-hell);
  color: var(--tiefblau);
}

/* ===== Device: "Die offene Ecke" ===== */
.ecke {
  position: relative;
}
.ecke::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 34px;
  height: 34px;
  border-top: var(--ecke-kontur) solid var(--akzent);
  border-right: var(--ecke-kontur) solid var(--akzent);
  border-top-right-radius: var(--ecke-radius);
  transition:
    width 140ms ease-out,
    height 140ms ease-out;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  a.ecke:hover::before,
  .ecke.ecke-hover:hover::before {
    width: 40px;
    height: 40px;
  }
}
.ecke-dunkel::before {
  border-color: var(--kobalt-hell);
}

/* Bild mit offener Ecke: eine echte beschnittene Ecke oben rechts */
.bild-ecke {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.bild-ecke::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-top: var(--ecke-kontur) solid var(--akzent);
  border-right: var(--ecke-kontur) solid var(--akzent);
  clip-path: polygon(38% 0, 100% 0, 100% 62%);
  pointer-events: none;
}

/* Nummernträger 01–04 */
.nr {
  position: relative;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
}
.nr::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: var(--ecke-kontur) solid var(--akzent);
  border-right: var(--ecke-kontur) solid var(--akzent);
  border-top-right-radius: var(--ecke-radius);
  clip-path: polygon(30% 0, 100% 0, 100% 70%);
}
.nr span {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--akzent);
}
/* Kapitel-Marken der ⭐-Szene sitzen auf --tiefblau (dunkel) — bau-brief §2.1 verbietet
   --kobalt auf --tiefblau (2,54:1). --kobalt-hell erreicht 6,60:1. */
.ecke-dunkel span {
  color: var(--kobalt-hell);
}

/* ===== Motion: "Das Verdeck fährt zurück" ===== */
.reveal {
  clip-path: inset(38% 0 0 0);
  transition: clip-path var(--dur-reveal) var(--ease-verdeck);
}
.reveal.ist-da {
  clip-path: inset(0 0 0 0);
}
.reveal-text {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ease-verdeck) var(--dur-text-versatz),
    transform 420ms var(--ease-verdeck) var(--dur-text-versatz);
}
.reveal.ist-da .reveal-text,
.reveal-text.ist-da {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-text {
    transition-duration: 1ms;
  }
}

/* ===== Kopfleiste ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--rand);
  background: var(--leiste);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--leiste-kontur);
  transition:
    background 260ms var(--ease-verdeck),
    border-color 260ms var(--ease-verdeck);
}

/* Korrektur 16.08.2026 — der Kopf über dem Head.
   Vorher lag die helle Leiste als undurchsichtiger Balken über dem Head-Video: der
   einzige Grund war, dass das dunkelblaue Kundenlogo auf dunklem Grund nicht lesbar
   ist. Über einer cinematischen Bühne wirkte der Balken aufgeklebt und schnitt das
   Bild oben ab. Jetzt läuft der Kopf über dem Head transparent mit der hellen
   Logo-Fassung und legt sich erst beim Scrollen als helle Leiste mit dem
   Original-Logo an. Seiten ohne Vollbild-Head (Rechtstexte, Fahrzeug-Detailseiten)
   tragen die Markierung nicht und bleiben unverändert hell. */
/* Auf Seiten mit Vollbild-Head schwebt die Leiste ÜBER dem Bild statt im Fluss zu stehen.
   Vorher lief der Head erst unterhalb der Leiste an — im Bild war das ein grauer Streifen
   quer über die volle Breite. Der Head ist bildschirmhoch, es muss also nichts
   ausgeglichen werden. */
.site-header[data-ueber-head] {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.site-header[data-ueber-head]:not(.fest) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Der Schleier reicht über die Kopfleiste hinaus und läuft weich aus — sonst endet er
   als sichtbare Kante quer durchs Bild. Er muss kräftig genug sein, dass die weiße
   Navigation auch über einer HELLEN Stelle des Head-Videos lesbar bleibt. */
.site-header[data-ueber-head]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(14, 26, 51, 0.72) 0%,
    rgba(14, 26, 51, 0.44) 45%,
    rgba(14, 26, 51, 0) 100%
  );
  opacity: 1;
  transition: opacity 260ms var(--ease-verdeck);
}
.site-header[data-ueber-head].fest::before {
  opacity: 0;
}
.site-header > * {
  position: relative;
  z-index: 1;
}
.site-header[data-ueber-head]:not(.fest) nav a {
  color: var(--tageslicht);
}
.site-header[data-ueber-head]:not(.fest) nav a[aria-current="page"] {
  color: var(--kobalt-hell);
}
.site-header[data-ueber-head]:not(.fest) nav a[aria-current="page"]::after {
  border-color: var(--kobalt-hell);
}
.site-header[data-ueber-head]:not(.fest) .nav-burger rect {
  fill: var(--tageslicht);
}

/* Logo-Paar: beide Fassungen liegen übereinander, sichtbar ist immer genau eine. */
.site-header .logo-paar {
  position: relative;
  display: block;
  height: 34px;
}
.site-header .logo {
  height: 34px;
  display: block;
}
.site-header .logo-paar .logo-hell {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms var(--ease-verdeck);
}
.site-header[data-ueber-head]:not(.fest) .logo-paar .logo-hell {
  opacity: 1;
}
.site-header .logo-paar .logo-farbe {
  transition: opacity 260ms var(--ease-verdeck);
}
.site-header[data-ueber-head]:not(.fest) .logo-paar .logo-farbe {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .logo-paar img {
    transition-duration: 1ms;
  }
}
.site-header nav {
  display: flex;
  gap: clamp(1.2rem, 2vw, 2.4rem);
}
.site-header nav a {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text);
  padding-bottom: 4px;
  position: relative;
}
.site-header nav a[aria-current="page"] {
  color: var(--akzent);
}
.site-header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-top: var(--ecke-kontur) solid var(--akzent);
  border-right: var(--ecke-kontur) solid var(--akzent);
  transform: rotate(135deg);
}
.nav-burger {
  display: none;
  background: none;
  border: none;
}
@media (max-width: 900px) {
  .site-header nav.nav-desktop {
    display: none;
  }
  .nav-burger {
    display: block;
  }
}

/* ===== Schwebender Anruf-Button ===== */
.fab-anruf {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tiefblau);
  color: var(--tageslicht);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(14, 26, 51, 0.28);
  transition: transform 160ms ease-out;
}
.fab-anruf:active {
  transform: scale(0.97);
}

/* ===== Fuß ===== */
.site-footer {
  background: var(--tiefblau);
  color: var(--tageslicht);
  padding: clamp(3rem, 8vw, 6rem) var(--rand) 2.4rem;
}
.site-footer .logo {
  height: 110px;
  margin-bottom: 2rem;
  /* kein Invert-Filter mehr — der Fuß nutzt hoelscher-logo-hell.png und behält damit
     die graue Schwungform der Marke (§0e-24). */
}
.site-footer a {
  color: var(--kobalt-hell);
}
.site-footer .fuss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--maxw);
  margin-inline: auto;
}
.site-footer .fuss-meta {
  color: rgba(236, 238, 241, 0.55);
  font-size: 0.85rem;
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 780px) {
  .site-footer .fuss-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .site-footer .logo {
    /* 110px Hoehe verlangt ~493px Breite (Datei-Seitenverhaeltnis 4.48:1) —
       auf schmalen Viewports kappt max-width:100% nur die Breite, die Hoehe
       bleibt fix und das Logo wirkt gestaucht (qa-layout-check-Fund 16.08.2026).
       56px passt bei jeder Mobile-Breite ohne Kappung. */
    height: 56px;
  }
}

/* ===== Head / Hero (gemeinsam auf allen Seiten) ===== */
.head {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--tiefblau);
}
.head video,
.head .head-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.head .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Der Head ist hell (Tageslichthalle) — ohne kräftigen Fuß-Scrim säuft die weiße Display-Typo
       im überstrahlten Estrich ab und das Kobalt verliert seinen Kontrast (PL-Prüfung 16.08.). */
    linear-gradient(
      0deg,
      rgba(14, 26, 51, 0.86) 0%,
      rgba(14, 26, 51, 0.62) 22%,
      rgba(14, 26, 51, 0.2) 46%,
      rgba(14, 26, 51, 0) 64%
    ),
    linear-gradient(90deg, rgba(14, 26, 51, 0.35) 0%, rgba(14, 26, 51, 0) 40%);
}

/* Startseite 19.08.2026: Das Start-Video aus echten Ladenfotos ist im mittleren Band deutlich
   heller als das alte. Gemessen lag „NORDKIRCHEN-CAPELLE · SEIT 1983" dort bei 4,10:1 und an
   der hellsten Stelle 1,03:1 — unter AA (4,5:1). Der Scrim wird deshalb NUR HIER kraeftiger;
   die vier anderen Koepfe haben dunkleres Material und bleiben unangetastet. */
.head--starker-scrim .scrim {
  /* 20.08.2026 (Hamada: „dieses verdunkeln etwas weniger"): Werte zurueckgenommen.
     Der Verlauf bleibt nur so kraeftig, wie die Lesbarkeit es verlangt — die Zeile
     „NORDKIRCHEN-CAPELLE · SEIT 1983" liegt ueber hellem Glas und braucht AA (4,5:1).
     Nachgemessen nach der Aenderung, Wert steht im Bau-Protokoll. */
  background:
    linear-gradient(
      0deg,
      rgba(14, 26, 51, 0.8) 0%,
      rgba(14, 26, 51, 0.66) 22%,
      rgba(14, 26, 51, 0.48) 42%,
      rgba(14, 26, 51, 0.26) 58%,
      rgba(14, 26, 51, 0.06) 74%,
      rgba(14, 26, 51, 0) 86%
    ),
    linear-gradient(
      90deg,
      rgba(14, 26, 51, 0.7) 0%,
      rgba(14, 26, 51, 0.54) 22%,
      rgba(14, 26, 51, 0.22) 42%,
      rgba(14, 26, 51, 0) 62%
    );
}
.head-content {
  position: absolute;
  z-index: 2;
  left: var(--rand);
  right: var(--rand);
  bottom: clamp(2rem, 6vw, 4.5rem);
  color: var(--tageslicht);
  max-width: min(98vw, 1400px);
}
.head-content .h-display-xxl {
  color: var(--tageslicht);
  /* §0e-123 (PL-Korrektur 16.08.): Bei 8.1rem lief die H1 über DREI Zeilen und reichte bis in
     die Bildmitte — die Schrift zerschnitt genau die Fahrzeugflanke, die das Video verkauft.
     Der Head-Text sitzt am unteren Bühnenrand, also: zwei Zeilen, kleinere Display-Stufe.
     Der §0b-Nr.-4-Display-Moment (≥8rem) wandert auf das Zahl-Display "96 %" in Sektion 4. */
  font-size: clamp(2.3rem, 5.6vw, 5.1rem);
  line-height: 0.95;
  max-width: 24ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(14, 26, 51, 0.5);
}
.head-content .h-display-xxl em {
  font-style: normal;
  color: var(--kobalt-hell);
}
.head-content .lead-head {
  color: rgba(236, 238, 241, 0.86);
  font-size: var(--t-lead);
  max-width: 46ch;
  margin-top: 1.1rem;
}
.head-content .cta {
  margin-top: 1.6rem;
}

@media (max-width: 900px) {
  .head {
    height: auto;
  }
  .head-media {
    position: relative;
    height: 46vh;
    overflow: hidden;
  }
  .head video,
  .head .head-bild {
    position: absolute;
    inset: 0;
  }
  .head .scrim {
    /* Der Scrim gehört nur auf das Bildband — auf Mobil ist head-content statisch UNTER
       dem Video, ein `inset:0`-Scrim über dem ganzen .head würde sonst auch den Text
       im tiefblauen Block darunter verdunkeln (§0e-Sehen-Loop-Fund). */
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 46vh;
  }
  .head-content {
    position: static;
    background: var(--tiefblau);
    padding: 2rem var(--rand) 2.6rem;
    max-width: none;
  }
  /* Der Display-Schnitt ist breit gebaut (bis 17.08.2026 Syne, seither Archivo 800) — auf schmalen Viewports braucht "AUTOMATIK."
     einen eigenen, deutlich kleineren Skalierungsfaktor, sonst läuft das Wort aus dem Rand. */
  .head-content .h-display-xxl {
    font-size: clamp(1.8rem, 8.5vw, 2.6rem);
  }
}

/* ===== Fakten-Leiste ===== */
.fakten-leiste {
  background: var(--grund-2);
  padding: 0.9rem var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.fakten-leiste .pkt {
  color: var(--akzent-warm);
}
.fakten-leiste .status {
  color: var(--akzent);
}

/* ===== Sektions-Bausteine ===== */
.bild-bahn {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--grund-2);
}
.bild-bahn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rechts-dunkel {
  background: var(--tiefblau);
  color: var(--tageslicht);
}
.rechts-dunkel a {
  color: var(--kobalt-hell);
}

/* ===== "Die 2 teuersten" (§0e-118a) — geteilt über index/fahrzeuge ===== */
.bestand-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  margin-top: 1.6rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--rand);
}
/* Korrektur 16.08.2026: kein `overflow: hidden` — der Preis-Riegel bricht bewusst über
   die untere Bildkante aus und wurde sonst abgeschnitten. Es gibt keinen Bild-Zoom, der
   ein Clipping nötig machen würde. (Dieselbe Regel steht im <style>-Block von
   index.html; sie deklariert overflow nicht, hier stand der eigentliche Verursacher.) */
.bestand-karte {
  position: relative;
  display: block;
  color: inherit;
}
/* Die Karte ist seit 17.08.2026 ein Link auf die Fahrzeug-Detailseite (Hamada: „wenn man
   auf die autos klickt muss man auch die unterseite vom auto rauf"). Der Hinweis sitzt
   unter dem Bild, damit der Preis-Riegel frei bleibt. */
.bestand-karte .karte-mehr {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--akzent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  a.bestand-karte:hover .karte-mehr {
    color: #1642b0;
  }
  a.bestand-karte:hover img {
    filter: brightness(1.04);
  }
}
a.bestand-karte img {
  transition: filter 200ms ease-out;
}
a.bestand-karte:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}
/* Korrektur 17.08.2026 (Hamada: „Die Bilder der autos sind nicht für senkrecht gedacht…
   die musst du wagerecht präsentieren"): Die Karten rendertem 587 × 800 px — HOCHKANT,
   obwohl hier `aspect-ratio: 4/3` steht und jedes Fahrzeugfoto 1200 × 800 (3:2, quer) ist.
   Ursache: ohne `height: auto` gewinnt die Höhe aus dem `height`-Attribut des <img> und
   das Seitenverhältnis wird wirkungslos. Ergebnis war ein senkrechter Ausschnitt, in dem
   vom Auto die Front übrig blieb und das Hölscher-Banner die Fläche füllte.
   Jetzt: natives 3:2 des Fotos — es wird gar nichts mehr weggeschnitten. */
.bestand-karte img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.bestand-karte .preis-riegel {
  position: absolute;
  right: calc(-1 * clamp(0.4rem, 2vw, 1.4rem));
  bottom: clamp(-0.6rem, -2vw, -1.2rem);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--akzent);
  background: var(--grund);
  padding: 0.1em 0.25em 0.1em 0.4em;
  line-height: 1;
}
@media (max-width: 780px) {
  .bestand-paar {
    grid-template-columns: 1fr;
  }
}

/* ===== Mobiles Navigations-Panel =====
   Fremd-Blick-Fund 16.08.2026 (B6, kritisch): `seite.js` togglete `.offen`, aber es gab dazu
   NIE eine CSS-Regel — das Panel trägt inline `display:none`, blieb also auf jeder Seite
   geschlossen. Kein Konsolenfehler, kein sichtbarer Schaden im Screenshot: mobile Nutzer
   konnten schlicht nicht navigieren. Das `!important` ist nötig, weil das inline-Attribut
   sonst gewinnt. */
.mobil-panel.offen {
  display: flex !important;
}
body:has(.mobil-panel.offen) {
  overflow: hidden;
}
.mobil-panel a {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  text-transform: uppercase;
  color: var(--text);
}
.mobil-panel a[aria-current="page"] {
  color: var(--akzent);
}
.mobil-panel .mobil-schliessen {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
  padding: 0.2rem 0.4rem;
}
.mobil-panel .mobil-fuss {
  margin-top: auto;
  color: var(--text-leise);
  font-size: var(--t-caption);
}

/* Der Head-Medienblock als eigene Ebene — Hausstruktur (`head__media`), die auch der
   premium-gate als Head erkennt. Ohne sie zählte das Head-Video als Body-Video und die
   Regel forderte ausgerechnet dort ein `poster`, das §0e-135 verbietet. */
.head__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Der Kurations-Satz ist eine Eigenaussage des Betriebs (wörtlich von seiner alten Seite),
   kein Kundenzeugnis — deshalb `.manifest-satz` statt `<blockquote>`. Semantisch richtig,
   und keine Maschine liest ihn mehr als Bewertung (der Betrieb hat nachweislich keine). */
.manifest-satz {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.35;
  max-width: 46ch;
  margin: 0;
}

/* §0e-137 (Fremd-Blick Runde 2, 16.08.2026): Der schwebende Anruf-Button lag auf `kontakt.html`
   bei Scroll-Position 0 exakt auf dem Satz „Er nimmt das Telefon selbst ab." — ein Bedienelement
   darf keinen Inhalt dauerhaft verdecken. Auf schmalen Viewports bekommt der Inhalt deshalb unten
   so viel Luft, wie der Button hoch ist (plus Rand); zusätzlich rückt der Button auf sehr schmalen
   Geräten enger an die Ecke. */
@media (max-width: 900px) {
  main {
    padding-bottom: 5.5rem;
  }
  .fab-anruf {
    right: 0.9rem;
    bottom: 0.9rem;
    padding: 0.8rem 1.15rem;
    font-size: 0.88rem;
  }
}

/* Auf Handys wird aus dem Button ein kompakter Kreis: Der Anruf bleibt ab Pixel 1 erreichbar
   (§0e-12), die verdeckte Fläche schrumpft aber von 114×49 px auf 54×54 px in der äußersten
   Ecke. Gemessen (16.08.): vorher überlagerte der breite Button auf vier Seiten Fließtext,
   danach auf keiner mehr. Das Wort „Anrufen" bleibt für Screenreader über aria-label erhalten. */
@media (max-width: 600px) {
  .fab-anruf {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 52px;
    height: 52px;
    box-shadow: 0 6px 22px rgba(14, 26, 51, 0.42);
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
  }
  .fab-anruf svg {
    width: 21px;
    height: 21px;
  }
}

/* §0e-137, zweite Runde: Kernaussagen dürfen nie unter dem schwebenden Button liegen —
   die Wiessner-Lehre war genau das (die Öffnungszeiten in der Fakten-Leiste waren unlesbar).
   Fließtext auf den Rechtsseiten darf beim Scrollen darunter durchlaufen, eine Fakten-Zeile
   oder ein Preis nicht. Beide bekommen auf Handys rechts unten so viel Platz, dass der
   Button daneben sitzt statt darauf. Gemessen per elementFromPoint, nicht geschätzt. */
@media (max-width: 600px) {
  .fakten-leiste {
    padding-right: 4.6rem;
  }
  .n404-vorschlaege li:last-child,
  .n404-vorschlaege .zeile:last-child {
    padding-right: 4.2rem;
  }
}

/* ------------------------------------------------------------------ *
 * Head-Wechsel — zwei Bewegtbilder des eigenen Betriebs im Wechsel
 * (Hamada-Korrektur 18.08.2026: "kein Erkan-&-Ali-Style", stattdessen
 *  die Bilder aus Kontakt + Ueber uns, die dem Kunden gefallen).
 * Beide Clips liegen deckungsgleich; der aktive traegt `.ist-an`.
 * Uebergang = ruhige Blende (900 ms), kein Hardcut, kein Zoom.
 * ------------------------------------------------------------------ */
.head__media--wechsel video {
  opacity: 0;
  transition: opacity 900ms ease;
}
.head__media--wechsel video.ist-an {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .head__media--wechsel video {
    transition: none;
  }
}

/* ===== Hell/Dunkel-Schalter (GESETZ Kap. 1) =====
   Neu 19.08.2026. Start ist DUNKEL, hell per Schalter; die Wahl bleibt in localStorage.

   Logo: Das Kundenlogo ist dunkelblau und wird NICHT umgefärbt (GESETZ Kap. 4). Im dunklen
   Thema zeigt die Kopfleiste deshalb dauerhaft die bereits vorhandene helle Fassung
   (hoelscher-logo-hell.png) — dieselbe Datei, die der Kopf über dem Head schon nutzt. */
:root:not([data-thema="hell"]) .logo-paar .logo-hell {
  opacity: 1;
}
:root:not([data-thema="hell"]) .logo-paar .logo-farbe {
  opacity: 0;
}

.thema-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: clamp(0.8rem, 1.6vw, 1.6rem);
  background: none;
  border: 1px solid var(--kontur);
  border-radius: 999px;
  color: var(--text);
  transition:
    border-color 160ms ease-out,
    color 160ms ease-out;
}
.site-header[data-ueber-head]:not(.fest) .thema-schalter {
  color: var(--tageslicht);
  border-color: rgba(236, 238, 241, 0.32);
}
@media (hover: hover) and (pointer: fine) {
  .thema-schalter:hover {
    border-color: var(--akzent);
    color: var(--akzent);
  }
}
.thema-schalter:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}
.thema-schalter svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Sichtbar ist immer genau ein Sinnbild: im dunklen Thema die Sonne (= "schalte hell"),
   im hellen Thema der Mond. */
.thema-schalter .sinnbild-hell {
  display: none;
}
[data-thema="hell"] .thema-schalter .sinnbild-hell {
  display: block;
}
[data-thema="hell"] .thema-schalter .sinnbild-dunkel {
  display: none;
}

/* Das Logo-Paar wird auch im mobilen Panel gebraucht — die Ueberlagerungs-Regeln
   galten bisher nur innerhalb der Kopfleiste. */
.logo-paar { position: relative; display: block; }
.logo-paar .logo-hell { position: absolute; inset: 0; opacity: 0; }

/* ===== Kopf-Diaschau (alle Seiten, 19.08.2026) =====
   Wird von window.kopfDiaschau() erzeugt, sobald der Kunde im Manager Kopfbilder
   fuer diese Seite ausgewaehlt hat. Reine Blende, kein Zoom (GESETZ Kap. 1/6). */
.head-diaschau { position: absolute; inset: 0; }
.head-diaschau img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1100ms ease;
}
.head-diaschau img.ist-an { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .head-diaschau img { transition: none; }
}