/* ==========================================================================
   Malerservice Bayer — Stylesheet
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Kopfbereich · 5 Hero
           6 Bausteine · 7 Formular · 8 Fußbereich · 9 Cookie · 10 Responsive
   ========================================================================== */

/* --- 1 · Design-Tokens --------------------------------------------------- */
:root {
  /* Markenfarben (aus Logo und Banner abgeleitet) */
  --navy:        #114057;
  --navy-dark:   #0b2c3c;
  --navy-soft:   #1c5a78;
  --violet:      #6524cb;
  --violet-dark: #501da4;

  /* Warme Grundtöne */
  --sand:        #f7f2ea;
  --sand-2:      #efe7da;
  --sand-3:      #e2d6c3;
  --white:       #ffffff;

  /* Text */
  --ink:         #1e2a2f;
  --ink-soft:    #45555c;
  --ink-invert:  #ffffff;

  --signal:      #b4341f;   /* Notdienst / Warnhinweise */

  /* Typografie */
  --font-head: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --breite:      clamp(1360px, 78vw, 1600px);
  --breite-text: 74ch;
  --radius:      14px;
  --radius-s:    8px;

  /* Abstände */
  --s1: .6rem;  --s2: 1.15rem; --s3: 1.75rem;
  --s4: 2.4rem; --s5: 3.5rem;  --s6: 5.5rem;  --s7: 8rem;

  --schatten:   0 2px 4px rgba(17, 64, 87, .06), 0 8px 24px rgba(17, 64, 87, .08);
  --schatten-l: 0 4px 8px rgba(17, 64, 87, .08), 0 18px 48px rgba(17, 64, 87, .14);
}

/* --- 2 · Basis ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--sand);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 var(--s2);
  letter-spacing: -.01em;
  text-wrap: balance;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p  { margin: 0 0 var(--s2); max-width: var(--breite-text); }
ul, ol { max-width: var(--breite-text); }

a { color: var(--navy-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--violet); }

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

strong { color: var(--navy); }

hr { border: 0; border-top: 1px solid var(--sand-3); margin: var(--s5) 0; }

::selection { background: var(--violet); color: #fff; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--violet); color: #fff;
  padding: .8rem 1.2rem; z-index: 999; font-weight: 600;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 3 · Layout ---------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

section { padding-block: var(--s6); }
section.eng { padding-block: var(--s5); }

.sektion-kopf { max-width: 62ch; margin-bottom: var(--s4); }
.sektion-kopf.mitte { margin-inline: auto; text-align: center; }
.sektion-kopf p { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 0; }
.sektion-kopf.mitte p { margin-inline: auto; }

.augenbraue {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: var(--s1);
}
.hell .augenbraue { color: #c7a9ff; }

.raster { display: grid; gap: var(--s3); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.flaeche-sand  { background: var(--sand-2); }
.flaeche-weiss { background: var(--white); }
.flaeche-navy  { background: var(--navy); color: rgba(255,255,255,.92); }
.flaeche-navy h2, .flaeche-navy h3 { color: #fff; }
.flaeche-navy a { color: #b9e2f5; }
.flaeche-navy p { color: rgba(255,255,255,.88); }

/* --- 4 · Kopfbereich ----------------------------------------------------- */
.topbar {
  background: var(--navy-dark);
  color: rgba(255,255,255,.82);
  font-size: .85rem;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  align-items: center; justify-content: space-between;
  padding-block: .5rem;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: #c7a9ff; }
.topbar-info { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; }
.topbar-info span { display: inline-flex; align-items: center; gap: .4rem; }

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: var(--sand);
  border-bottom: 1px solid var(--sand-3);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kopf {
    background: rgba(247, 242, 234, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding-block: .7rem;
}

.marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marke img { width: 58px; height: auto; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name {
  font-family: var(--font-head); font-size: 1.16rem;
  font-weight: 700; color: var(--navy);
}
.marke-zusatz { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.nav-toggle {
  display: none;
  background: var(--navy); color: #fff; border: 0;
  border-radius: var(--radius-s); padding: .55rem .8rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; align-items: center; gap: .5rem;
}
.nav-toggle:hover { background: var(--navy-dark); }
.nav-toggle svg { width: 20px; height: 20px; }

.hauptnav ul {
  list-style: none; display: flex; align-items: center;
  gap: .2rem; margin: 0; padding: 0;
}
.hauptnav a {
  display: block; padding: .55rem .8rem;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: .96rem; border-radius: var(--radius-s);
}
.hauptnav a:hover { background: var(--sand-2); color: var(--navy); }
.hauptnav a[aria-current="page"] {
  color: var(--violet);
  box-shadow: inset 0 -2px 0 var(--violet);
}

/* Untermenü Leistungen */
.hat-untermenue { position: relative; }
.untermenue {
  position: absolute; left: 0; top: 100%;
  min-width: 265px; background: #fff;
  border: 1px solid var(--sand-3); border-radius: var(--radius);
  box-shadow: var(--schatten-l); padding: .4rem;
  display: none; flex-direction: column; gap: 0;
}
.hat-untermenue:hover .untermenue,
.hat-untermenue:focus-within .untermenue { display: flex; }
.untermenue a { font-weight: 500; font-size: .93rem; }

/* --- 5 · Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: var(--s7) var(--s6);
  background: var(--navy); /* Fallback, falls das Video nicht laedt */
  color: #fff;
  overflow: hidden;
}
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero-inhalt { max-width: 760px; }

/* Dezentes Hintergrundvideo: Farbrolle in Zeitlupe, hinter dem gewohnten
   Petrol-Verlauf des Hero. Soll durchscheinen, nicht dominieren. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(.75) contrast(.95) saturate(.85);
  z-index: 0; pointer-events: none;
}
.hero-video-verlauf {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(11,44,60,.82) 0%, rgba(17,64,87,.72) 48%, rgba(17,64,87,.55) 100%);
}

.hero-grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }

.hero-bild {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
}
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
.hero-bild.hero-bild-klein img { object-position: 15% center; }
.hero-bild-klein { max-width: 280px; aspect-ratio: 1 / 1; margin-inline: auto; }
.hero-slogan {
  font-family: var(--font-head); font-style: italic;
  font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem);
  color: #d9c8ff; margin-bottom: var(--s2);
}
.hero p.lead {
  font-size: 1.13rem; color: rgba(255,255,255,.9);
  max-width: 54ch; margin-bottom: var(--s4);
}

.hero-klein { padding-block: var(--s5); }
.hero-klein h1 { max-width: 22ch; }
.hero-klein .lead { margin-bottom: 0; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Google-Bewertungs-Badge (Startseite-Hero) */
.google-bewertung {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: var(--s3);
  padding: .6rem 1rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-s);
  color: #fff; text-decoration: none; font-size: .92rem;
}
.google-bewertung:hover { background: rgba(255,255,255,.16); color: #fff; }
.google-bewertung .sterne { color: #f5b942; letter-spacing: 1px; font-size: 1.05rem; }
.google-bewertung strong { color: #fff; }

/* Vertrauensleiste */
.vertrauen {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.22);
}
.vertrauen div { line-height: 1.25; }
.vertrauen b {
  display: block; font-family: var(--font-head);
  font-size: 2.1rem; color: #fff;
}
.vertrauen span { font-size: .85rem; color: rgba(255,255,255,.75); }

/* --- 6 · Bausteine ------------------------------------------------------- */

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-body); font-size: 1.08rem; font-weight: 700;
  border: 2px solid transparent; border-radius: var(--radius-s);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf svg { width: 19px; height: 19px; flex: none; }

.knopf-primaer   { background: var(--violet); color: #fff; }
.knopf-primaer:hover { background: var(--violet-dark); color: #fff; }

.knopf-sekundaer { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.knopf-sekundaer:hover { background: rgba(255,255,255,.13); border-color: #fff; color: #fff; }

.knopf-navy      { background: var(--navy); color: #fff; }
.knopf-navy:hover { background: var(--navy-dark); color: #fff; }

.knopf-linie     { background: transparent; color: var(--navy); border-color: var(--navy); }
.knopf-linie:hover { background: var(--navy); color: #fff; }

/* Karten */
.karte {
  background: #fff; border: 1px solid var(--sand-3);
  border-radius: var(--radius); padding: var(--s4);
  box-shadow: var(--schatten);
  display: flex; flex-direction: column;
}
.karte h2, .karte h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  margin-bottom: .5rem;
}
.karte p  { color: var(--ink-soft); margin-bottom: var(--s2); font-size: .98rem; }
.karte p:last-child { margin-bottom: 0; }
.karte-link {
  margin-top: auto; font-weight: 700; font-size: .93rem;
  color: var(--violet); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.karte-link:hover { gap: .6rem; color: var(--violet-dark); }

a.karte { text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-l); }

.icon-kreis {
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--sand-2); color: var(--navy);
  display: grid; place-items: center; margin-bottom: var(--s3);
}
.icon-kreis svg { width: 32px; height: 32px; }
.icon-kreis.petrol { background: var(--navy-soft); color: #fff; }
.icon-kreis.signal  { background: #fbe6e2; color: var(--signal); }

/* Referenz-Karten mit Foto */
.karte-referenz .karte-bild {
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; aspect-ratio: 3 / 4;
  background: var(--sand-2); cursor: zoom-in;
}
.karte-referenz .karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.karte-referenz .karte-bild:hover img { transform: scale(1.04); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11,44,60,.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 900px); max-height: 85vh; border-radius: var(--radius); box-shadow: var(--schatten-l); }
.lightbox-schliessen {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 0; color: #fff;
  font-size: 1.2rem; cursor: pointer;
}
.lightbox-schliessen:hover { background: rgba(255,255,255,.3); }

/* Eindrücke-Karussell */
.karussell { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--schatten-l); max-width: 420px; margin-inline: auto; }
.karussell-spur { display: flex; transition: transform .5s ease; }
.karussell-folie { flex: 0 0 100%; aspect-ratio: 3 / 4; background: var(--sand-2); }
.karussell-folie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karussell-pfeil {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(17,64,87,.75); color: #fff; border: 0;
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.karussell-pfeil:hover { background: var(--navy); }
.karussell-zurueck { left: var(--s2); }
.karussell-vor { right: var(--s2); }
.karussell-punkte { position: absolute; bottom: var(--s2); left: 50%; translate: -50% 0; display: flex; gap: .5rem; }
.karussell-punkte button {
  width: .6rem; height: .6rem; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.55); cursor: pointer; padding: 0;
}
.karussell-punkte button[aria-current="true"] { background: #fff; }
@media (max-width: 560px) {
  .karussell-pfeil { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
}

/* Dezente Scroll-Animation */
.einblenden {
  opacity: 0; transform: translateY(30px);
  transition: opacity .65s cubic-bezier(0.16, 1, 0.3, 1), transform .65s cubic-bezier(0.16, 1, 0.3, 1);
}
.einblenden.sichtbar { opacity: 1; transform: translateY(0); }

/* Ablauf-Schritte */
.schritt { position: relative; padding-left: 3.6rem; }
.schritt .nr {
  position: absolute; left: 0; top: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
  display: grid; place-items: center;
}
.schritt h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.schritt p  { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* Haken-Listen */
.haken { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.haken li {
  position: relative; padding-left: 1.9rem; margin-bottom: .6rem;
}
.haken li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 1.15rem; height: .6rem;
  border-left: 2.5px solid var(--violet);
  border-bottom: 2.5px solid var(--violet);
  transform: rotate(-45deg);
}
.flaeche-navy .haken li::before { border-color: #b9e2f5; }

/* Notdienst-Band */
.notband {
  background: var(--navy-dark); color: #fff;
  border-left: 6px solid var(--signal);
}
.notband h2, .notband h3 { color: #fff; }
.notband .wrap { display: grid; gap: var(--s3); align-items: center; }
@media (min-width: 860px) {
  .notband .wrap { grid-template-columns: 1fr auto; }
}

/* Zitat / Referenz */
.zitat {
  background: #fff; border-left: 4px solid var(--violet);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s3); box-shadow: var(--schatten);
}
.zitat p { font-family: var(--font-head); font-size: 1.08rem; font-style: italic; color: var(--navy); }
.zitat footer { font-size: .88rem; color: var(--ink-soft); font-style: normal; }

/* Fließtext-Seiten (Impressum, Datenschutz) */
.text-seite { background: #fff; }
.text-seite .wrap { max-width: 860px; }
.text-seite h2 { margin-top: var(--s5); font-size: 1.5rem; }
.text-seite h3 { margin-top: var(--s3); font-size: 1.12rem; }
.text-seite p, .text-seite ul { max-width: none; }

/* Info-Kasten */
.hinweis {
  background: var(--sand-2); border: 1px solid var(--sand-3);
  border-radius: var(--radius); padding: var(--s3);
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis.warn { background: #fbe6e2; border-color: #eec3ba; }

/* Bild mit Rahmen */
.bildrahmen {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten-l); background: var(--sand-2);
}
.bildrahmen img { width: 100%; }

.bildrahmen-quadrat { aspect-ratio: 1 / 1; }
.bildrahmen-quadrat img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }

.bildrahmen-quer { aspect-ratio: 4 / 3; margin-bottom: var(--s3); }
.bildrahmen-quer img { width: 100%; height: 100%; object-fit: cover; }

/* Zweispalter Text + Bild */
.duo { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1.05fr .95fr; } }
.duo.gedreht > :first-child { order: 2; }

/* Aufklapper (FAQ) */
.faq { border-bottom: 1px solid var(--sand-3); }
.faq summary {
  cursor: pointer; padding: var(--s2) 0;
  font-family: var(--font-head); font-size: 1.08rem;
  font-weight: 700; color: var(--navy); list-style: none;
  display: flex; justify-content: space-between; gap: var(--s2); align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; color: var(--violet); line-height: 1; flex: none;
}
.faq[open] summary::after { content: "–"; }
.faq p { padding-bottom: var(--s2); color: var(--ink-soft); margin: 0; }

/* Abschluss-Aufruf */
.abschluss { background: var(--navy); color: #fff; text-align: center; }
.abschluss h2 { color: #fff; }
.abschluss p { color: rgba(255,255,255,.88); margin-inline: auto; }
.abschluss .knopfreihe { justify-content: center; margin-top: var(--s3); }

/* --- 7 · Formular -------------------------------------------------------- */
.formular-karte {
  background: #fff; border: 1px solid var(--sand-3);
  border-radius: var(--radius); padding: var(--s4);
  box-shadow: var(--schatten);
}
.feld { margin-bottom: var(--s2); }
.feld label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .35rem; color: var(--navy); }
.feld .optional { font-weight: 400; color: var(--ink-soft); }

.feld input, .feld select, .feld textarea {
  width: 100%; padding: .78rem .9rem;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--sand); border: 1.5px solid var(--sand-3);
  border-radius: var(--radius-s);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--violet); background: #fff;
}
.feld textarea { resize: vertical; min-height: 140px; }

.feld-paar { display: grid; gap: 0 var(--s2); }
@media (min-width: 620px) { .feld-paar { grid-template-columns: 1fr 1fr; } }

.einwilligung {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .9rem; color: var(--ink-soft);
  margin: var(--s2) 0 var(--s3);
}
.einwilligung input { width: 1.15rem; height: 1.15rem; margin-top: .22rem; flex: none; accent-color: var(--violet); }

/* Honeypot – für Menschen unsichtbar, für Bots verlockend */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  padding: var(--s2); border-radius: var(--radius-s);
  margin-bottom: var(--s3); font-size: .95rem;
}
.meldung.fehler { background: #fbe6e2; border: 1px solid #eec3ba; color: #8d2919; }

.kontaktzeile {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: var(--s2) 0; border-bottom: 1px solid var(--sand-3);
}
.kontaktzeile:last-child { border-bottom: 0; }
.kontaktzeile svg { width: 22px; height: 22px; color: var(--violet); flex: none; margin-top: .25rem; }
.kontaktzeile b { display: block; color: var(--navy); }
.kontaktzeile a { color: var(--ink); text-decoration: none; font-weight: 600; }
.kontaktzeile a:hover { color: var(--violet); }

/* --- 8 · Fußbereich ------------------------------------------------------ */
.fuss {
  background: var(--navy-dark); color: rgba(255,255,255,.76);
  padding-block: var(--s5) var(--s3); font-size: .93rem;
}
.fuss h4 {
  color: #fff; font-family: var(--font-body);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: var(--s2);
}
.fuss a { color: rgba(255,255,255,.82); text-decoration: none; }
.fuss a:hover { color: #c7a9ff; text-decoration: underline; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .45rem; }
.fuss img { width: 62px; margin-bottom: var(--s2); filter: brightness(0) invert(1); opacity: .9; }
.fuss p { color: rgba(255,255,255,.7); }

.fuss-unten {
  margin-top: var(--s4); padding-top: var(--s2);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  justify-content: space-between; font-size: .85rem;
}
.fuss-unten button {
  background: none; border: 0; padding: 0;
  color: rgba(255,255,255,.82); font: inherit;
  text-decoration: underline; cursor: pointer;
}
.fuss-unten button:hover { color: #c7a9ff; }

/* Klebender Anruf-Balken (nur Mobil) */
.ruf-leiste { display: none; }

/* --- 9 · Cookie-Banner --------------------------------------------------- */
.cookie-hg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 44, 60, .55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--s2);
}
.cookie-hg[hidden] { display: none; }

.cookie {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--schatten-l);
  width: min(100%, 640px); max-height: 88vh; overflow-y: auto;
  padding: var(--s4);
}
.cookie h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.cookie p { font-size: .93rem; color: var(--ink-soft); }
.cookie-knoepfe { display: grid; gap: .7rem; margin-top: var(--s3); }
@media (min-width: 560px) { .cookie-knoepfe { grid-template-columns: 1fr 1fr; } }
/* Ablehnen ist bewusst exakt gleich gewichtet wie Akzeptieren (§ 25 TDDDG) */
.cookie-knoepfe .knopf { width: 100%; padding: .85rem 1rem; font-size: .97rem; }
.cookie-mehr {
  margin-top: var(--s2); text-align: center;
  font-size: .88rem;
}
.cookie-mehr button {
  background: none; border: 0; color: var(--navy-soft);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.cookie-details { margin-top: var(--s3); border-top: 1px solid var(--sand-3); padding-top: var(--s2); }
.cookie-details[hidden] { display: none; }
.cookie-gruppe {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 0; border-bottom: 1px solid var(--sand-2);
}
.cookie-gruppe:last-child { border-bottom: 0; }
.cookie-gruppe input { width: 1.15rem; height: 1.15rem; margin-top: .3rem; flex: none; accent-color: var(--violet); }
.cookie-gruppe b { display: block; color: var(--navy); font-size: .95rem; }
.cookie-gruppe span { font-size: .86rem; color: var(--ink-soft); }

/* --- 10 · Responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  :root { --s6: 3.25rem; --s7: 4rem; }

  .topbar-info span.versteck-klein { display: none; }

  .hero-video { object-position: 65% center; filter: brightness(.7) contrast(.95) saturate(.8); }
  .hero-video-verlauf { background: linear-gradient(180deg, rgba(11,44,60,.86) 0%, rgba(17,64,87,.8) 55%, rgba(17,64,87,.72) 100%); }

  .nav-toggle { display: inline-flex; }

  .hauptnav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--sand-3);
    box-shadow: var(--schatten-l);
    padding: var(--s2);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .hauptnav.offen { display: block; }
  .hauptnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hauptnav a { padding: .85rem .7rem; border-radius: var(--radius-s); }
  .hauptnav a[aria-current="page"] { background: var(--sand-2); box-shadow: none; }

  .untermenue {
    position: static; display: flex; box-shadow: none;
    border: 0; border-left: 2px solid var(--sand-3);
    border-radius: 0; margin-left: .7rem; padding: 0 0 0 .4rem;
    min-width: 0;
  }

  .kopf .wrap { position: relative; }
  .kopf .knopf.nur-gross { display: none; }

  /* .duo stapelt hier auf eine Spalte - ohne Deckel würde ein quadratisches
     oder natürlich-quadratisches Bild auf volle Spaltenbreite (und damit
     -höhe) wachsen und den Abschnitt unverhältnismäßig lang machen. */
  .bildrahmen { width: min(100%, 480px); margin-inline: auto; }

  .duo.gedreht > :first-child { order: 0; }

  /* Anruf-Leiste unten */
  .ruf-leiste {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--navy-dark);
    box-shadow: 0 -4px 18px rgba(0,0,0,.22);
  }
  .ruf-leiste a {
    padding: .9rem .5rem; text-align: center;
    color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
  }
  .ruf-leiste a svg { width: 18px; height: 18px; }
  .ruf-leiste a + a { background: rgba(255,255,255,.16); }
  body { padding-bottom: 56px; }
  .cookie-hg { padding-bottom: 68px; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .wrap { width: min(100% - 1.75rem, var(--breite)); }
  .knopfreihe .knopf { width: 100%; }
  .vertrauen { gap: var(--s2) var(--s4); }
  .vertrauen b { font-size: 1.4rem; }
  .formular-karte { padding: var(--s3) var(--s2); }
  .marke img { width: 46px; }
  .marke-name { font-size: 1rem; }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .kopf, .topbar, .ruf-leiste, .cookie-hg, .abschluss, .knopfreihe { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}