/* Grundlage für alle Seiten. Farben aus den Kundenfotos: Abendlicht, Allgäuer Wiese, weißes Alu, Graphit.
   Eine Schriftfamilie (Archivo, selbst gehostet, OFL): schmal und kräftig für Überschriften, normal für Text. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/v1/archivo-latin-standard-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --container: 75rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --graphit: #1b1f1d;
  --wiese: #2f4a2b;
  --wiese-hell: #3d5e38;
  --abendlicht: #e9a649;
  --alu: #f3f4f2;
  --stein: #5e6561;
  --text: var(--graphit);
  --muted: var(--stein);
  --line: #d8dbd7;
  --surface: var(--alu);
  --font: 'Archivo', system-ui, sans-serif;
  /* Platz unten für den schwebenden WhatsApp-Knopf: Randabstand + Knopf (3,5rem) + 1rem Luft */
  --wa-platz: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: #ffffff;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Fokus: Graphit auf hellem Grund (Kontrast ≥ 3:1), Abendlicht nur auf dunklem Grund */
:focus-visible {
  outline: 3px solid var(--graphit);
  outline-offset: 3px;
}

.site-header :focus-visible,
.hero :focus-visible,
.film :focus-visible,
.home-contact :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--abendlicht);
}

h1,
h2,
h3 {
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

/* Knöpfe: flach, eckig, sagen was passiert */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 2px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--wiese);
  border-color: var(--wiese);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--wiese-hell);
  border-color: var(--wiese-hell);
}

.btn-light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--graphit);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn-outline:hover {
  background: rgb(27 31 29 / 0.06);
}

/* Kopfzeile: graphitfarbene Leiste mit dem Logo des Kunden (Zeichnung, wirkt auf Dunkel wie ein Aufkleber) und
   dem Namen. Auf der Startseite liegt sie durchsichtig über dem Titelbild (.site-header--hero) und wandert nicht
   mit: Der Scroll-Film braucht die volle Fensterhöhe. --kopf = Höhe der Kopfzeile (start.css: Knopf darunter). */
:root {
  --kopf: 4rem;
}

@media (min-width: 48rem) {
  :root {
    --kopf: 5rem;
  }
}

.site-header {
  position: relative;
  z-index: 10;
  background: var(--graphit);
  color: #ffffff;
}

/* Verlauf statt Fläche: Weiße Schrift bleibt auch über weißem Himmel lesbar (in Schrifthöhe rund 60 % Abdunklung,
   Kontrast über 4,5 : 1) */
.site-header--hero {
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(to bottom, rgb(18 21 20 / 0.85) 0%, rgb(18 21 20 / 0.6) 55%, rgb(18 21 20 / 0) 100%);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container);
  min-height: var(--kopf);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

/* Handy: Name zweizeilig neben dem Logo, damit die Navigation in dieselbe Zeile passt */
.brand-name {
  max-width: 5.5em;
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Kleine Handys (bis 400 px): etwas enger, damit der Name zweizeilig bleibt */
@media (max-width: 25rem) {
  .brand {
    gap: 0.5rem;
  }

  .brand-logo {
    width: 2.5rem;
    height: 2.5rem;
  }

  .site-header nav ul {
    gap: 0.75rem;
  }

  .site-header nav a {
    font-size: 0.9375rem;
  }

  .brand-name {
    font-size: 0.9375rem;
  }
}

/* Sehr kleine Handys (bis 336 px): nur das Logo, der Name bleibt für Vorleseprogramme erhalten */
@media (max-width: 21rem) {
  .site-header .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 48rem) {
  .brand {
    gap: 0.875rem;
  }

  .brand-logo {
    width: 3.5rem;
    height: 3.5rem;
  }

  .brand-name {
    max-width: none;
    font-size: 1.375rem;
  }
}

.site-header nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-header nav a {
  padding: 0.5rem 0;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.site-header nav a:hover,
.site-header nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--abendlicht);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Abschnitte der Startseite: erst auf breiten Bildschirmen in der Leiste */
.nav-weit {
  display: none;
}

@media (min-width: 64rem) {
  .site-header nav ul {
    gap: 1.75rem;
  }

  .nav-weit {
    display: block;
  }
}

/* Anfrage: wichtigste Aktion, daher als gefüllter Knopf in Abendlicht (Graphit darauf: Kontrast 8 : 1), auf jedem
   Bildschirm. Fokusrahmen weiß, weil Abendlicht auf Abendlicht nicht zu sehen wäre. */
.site-header nav .nav-anfrage {
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 2px;
  background: var(--abendlicht);
  color: var(--graphit);
  font-weight: 700;
}

.site-header nav .nav-anfrage:hover {
  background: #f3bd6e;
  text-decoration: none;
}

.site-header nav .nav-anfrage:focus-visible {
  outline-color: #ffffff;
}

@media (min-width: 48rem) {
  .site-header nav .nav-anfrage {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
  }
}

/* Inhaltsseiten (Text, Formular): schmale Spalte für gute Lesbarkeit */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
}

/* Fußzeile: dunkel wie die Kopfzeile, einen Ton tiefer als Graphit, damit sie sich vom dunklen Kontaktbereich der
   Startseite absetzt. Spalten: Marke, Kontakt, Öffnungszeiten, Modelle; darunter eine Leiste mit Rechtlichem.
   Grautöne auf dem Grund: Text #c3c8c4 (Kontrast rund 11 : 1), Kleingedrucktes #9aa09c (rund 7 : 1). */
.site-footer {
  margin-top: 3rem;
  background: #121514;
  color: #c3c8c4;
  font-size: 0.9375rem;
}

/* Startseite: schließt ohne Lücke an den Kontaktbereich an, getrennt durch eine feine Linie */
.site-footer--anschluss {
  margin-top: 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer-inner {
  display: grid;
  gap: 2rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem var(--gutter) 2.5rem;
}

@media (min-width: 48rem) {
  .site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }
}

/* Breit: vier Spalten, die Marke etwas breiter; die Modelle stehen immer rechts außen (auch ohne Kontaktspalten) */
@media (min-width: 64rem) {
  .site-footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .footer-modelle {
    grid-column: 4;
  }

  /* Startseite (nur Marke und Modelle): Modelle über zwei Spalten rechts, das wirkt ausgewogener */
  .site-footer--anschluss .footer-modelle {
    grid-column: 3 / span 2;
  }
}

@media (min-width: 48rem) {
  .site-footer--anschluss .footer-modelle .footer-liste {
    columns: 2;
    column-gap: 2rem;
  }

  .site-footer--anschluss .footer-liste li {
    break-inside: avoid;
  }
}

.site-footer .brand {
  color: #ffffff;
}

.site-footer .footer-slogan {
  max-width: 20rem;
  margin: 1.25rem 0 0;
  color: #ffffff;
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.375rem;
  line-height: 1.15;
}

.footer-titel {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-weight: 700;
}

/* Ein Zeilentakt (1,75 rem) für Adresse, Links und Öffnungszeiten: alle Spalten laufen gleichmäßig */
.site-footer address,
.footer-liste,
.footer-zeiten {
  line-height: 1.75rem;
}

.site-footer address {
  margin: 0 0 0.75rem;
  font-style: normal;
}

.site-footer p {
  margin: 0;
}

.footer-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Links: weiß, Unterstrich in Abendlicht beim Darüberfahren; 1,75 rem hoch (Tippfläche über 24 px) */
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: #ffffff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--abendlicht);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.site-footer :focus-visible {
  outline-color: var(--abendlicht);
}

.footer-zeiten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  margin: 0;
}

.footer-zeiten dd {
  margin: 0;
}

/* Breite wie der Text darüber, damit die Trennlinie bündig mit ihm abschließt */
.site-footer-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.875rem;
}

.site-footer-unten ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vermerk des Erstellers: rechts in der Leiste, auf dem Handy darunter */
.site-footer .footer-credit {
  margin-left: auto;
}

.site-footer .trademark {
  flex-basis: 100%;
  color: #9aa09c;
  font-size: 0.8125rem;
}

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  z-index: 10;
}

/* WhatsApp: bekanntes Grün nur hier, damit man es sofort erkennt */
.icon-whatsapp {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}

.btn-whatsapp {
  gap: 0.5rem;
  background: #25d366;
  border-color: #25d366;
  color: #0b3d1f;
}

.btn-whatsapp:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
}

.wa-float {
  position: fixed;
  z-index: 20;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.125rem;
  border-radius: 999px;
  background: #25d366;
  color: #0b3d1f;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgb(27 31 29 / 0.25);
}

.wa-float .icon-whatsapp {
  width: 1.625rem;
  height: 1.625rem;
}

.wa-float:hover {
  background: #1ebe5b;
}

.wa-float:focus-visible {
  outline: 3px solid var(--graphit);
  outline-offset: 3px;
}

/* Handy: nur das Symbol, damit der Knopf wenig verdeckt */
@media (max-width: 47.99rem) {
  .wa-float {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    justify-content: center;
  }

  .wa-float-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Beim Scrollen darf der Knopf kurz etwas überdecken, am Seitenende aber nichts dauerhaft (Platz unter der
   Fußzeile). Per Tastatur angesteuerte Elemente hält der Browser ebenso weit vom unteren Rand fern (WCAG 2.4.11). */
html:has(.wa-float) {
  scroll-padding-bottom: var(--wa-platz);
}

.site-footer:has(~ .wa-float) .site-footer-unten {
  padding-bottom: var(--wa-platz);
}

@media print {
  .wa-float {
    display: none;
  }
}