@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schrift/archivo-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schrift/archivo-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schrift/archivo-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schrift/archivo-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('schrift/archivo-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('schrift/archivo-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Erzeugt vom Platzhirsch Builder. Nicht von Hand ändern,
   Änderungen gehen beim nächsten Veröffentlichen verloren. */

:root {
  --primaer: #191919;
  --primaer-text: #191919;
  --primaer-dunkel: #151515;
  --primaer-hell: #ededed;
  --auf-primaer: #ffffff;
  --sekundaer: #a78038;
  --auf-sekundaer: #1b1f23;
  --text: #1b1f23;
  --leise: #55606b;
  --linie: #e2e6ea;
  --flaeche: #ffffff;
  --schrift-ueber: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-text: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ueber-gewicht: 800;

  /* Feineinstellungen: Kanten, Luft, Überschriften */
  --radius: 10px;
  --radius-knopf: 8px;
  --radius-feld: 8px;

  --rand: 32px;

  --abstand: 72px;
  --zeilen: 1.65;
  --lueckenfaktor: 1;

  --h1: 4.2rem;
  --h2: 2.6rem;
  --h3: 1.42rem;
  --laufweite: -0.035em;

  --breite: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: var(--zeilen);
  color: var(--text);
  background: var(--flaeche);
}

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

a { color: var(--primaer-text); }
a:hover { color: var(--primaer-dunkel); }

h1, h2, h3 {
  font-family: var(--schrift-ueber);
  font-weight: var(--ueber-gewicht);
  letter-spacing: var(--laufweite);
  line-height: 1.16;
  margin: 0 0 0.5em;
  color: var(--text);

  /* Umbrechen ja, trennen nur im Notfall.
     Die Trennung war urspruenglich gegen Wortungetueme wie
     "Datenschutzerklaerung", die auf einem Handy breiter sind als
     der Bildschirm. Auf breiten Schirmen richtet sie Schaden an:
     dort wird ploetzlich "Hu-ber" getrennt, obwohl daneben Platz
     ohne Ende ist. Die Trennung steht deshalb weiter unten und
     gilt nur fuer schmale Schirme. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.75rem, 5vw, var(--h1)); }
h2 { font-size: clamp(1.4rem, 3.5vw, var(--h2)); }
h3 { font-size: var(--h3); }
h3 { font-size: 1.2rem; }

p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

/* Wer mit der Tastatur navigiert, muss sehen, wo er ist. */
:focus-visible { outline: 3px solid var(--sekundaer); outline-offset: 2px; }

.ueberspringen {
  position: absolute; left: -9999px;
  background: var(--primaer); color: var(--auf-primaer);
  padding: 12px 18px; z-index: 100;
}
.ueberspringen:focus { left: 12px; top: 12px; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* -------------------------------------------------- Kopfbereich */

.kopf {
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; background: var(--flaeche); z-index: 50;
}
.kopf .innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 74px; flex-wrap: wrap;
}
.marke {
  font-family: var(--schrift-ueber); font-size: 1.25rem; font-weight: 700;
  color: var(--primaer-text); text-decoration: none;
}
/* Ein Logo bekommt eine Hoehe vorgegeben und behaelt sein
   Seitenverhaeltnis. Breite Logos duerfen bis zur halben Kopfzeile
   laufen, danach wird verkleinert. */
.marke.mit-logo { display: flex; align-items: center; }
.marke img { max-height: 52px; max-width: min(320px, 45vw); width: auto; height: auto; }

.navigation ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 6px 22px; margin: 0; padding: 0;
}
.navigation a {
  color: var(--text); text-decoration: none; font-weight: 550; font-size: 0.97rem;
  padding: 6px 0; border-bottom: 2px solid transparent; display: inline-block;
}
.navigation a:hover, .navigation a[aria-current="page"] {
  color: var(--primaer-text); border-bottom-color: var(--sekundaer);
}
.navigation a.im-zweig { color: var(--primaer-text); }

/* ------------------------------------------- Aufklappmenü

   Ohne Programmcode: das Untermenü erscheint, wenn die Maus über
   dem Punkt steht oder wenn er mit der Tastatur angesteuert wird.
   Zweiteres ist der Grund für focus-within, sonst wäre das Menü
   für alle unbedienbar, die nicht mit der Maus arbeiten. */

.navigation li { position: relative; }
.navigation .hat-unter > a::after {
  content: ""; display: inline-block; margin-left: 7px;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}

/* Die Auswahl ist bewusst zweistufig. Die allgemeine Regel fuer
   Menuelisten lautet .navigation ul und ist damit staerker als ein
   blosses .untermenue: das Untermenue stuende sonst immer offen. */
.navigation .untermenue {
  /* Rechtsbuendig unter dem Menuepunkt. Die Navigation sitzt am
     rechten Rand der Kopfzeile, ein nach rechts oeffnendes
     Untermenue liefe beim letzten Punkt aus dem Bild. */
  display: none; position: absolute; right: -14px; left: auto; top: 100%;
  min-width: 220px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-feld); box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  z-index: 60;
}
.navigation .hat-unter:hover > .untermenue,
.navigation .hat-unter:focus-within > .untermenue { display: block; }

/* Ein unsichtbarer Streifen überbrückt den Abstand zwischen Punkt
   und Untermenü. Ohne ihn klappt das Menü zu, sobald die Maus die
   Lücke überquert. */
.navigation .hat-unter > a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
}

.navigation .untermenue li { border: 0; }
.navigation .untermenue a {
  display: block; padding: 9px 18px; border-bottom: 0;
  font-weight: 450; font-size: 0.95rem; white-space: nowrap;
}
.navigation .untermenue a:hover,
.navigation .untermenue a[aria-current="page"] {
  background: var(--primaer-hell); color: var(--primaer-text);
}

/* Auf Geräten ohne Maus gibt es kein Überfahren. Dort steht das
   Untermenü offen unter seinem Punkt, eingerückt. */
@media (hover: none) and (min-width: 861px) {
  .navigation .untermenue {
    display: block; position: static; min-width: 0;
    border: 0; box-shadow: none; padding: 4px 0 0; background: transparent;
  }
  .navigation .untermenue a { padding: 4px 0 4px 14px; font-size: 0.9rem; }
  .navigation .hat-unter > a::after { display: none; }
}

/* ------------------------------------------------ Klappmenü

   Auf breiten Schirmen ist die Navigation immer offen und die
   Schaltfläche verschwindet. Eingeklappt wird nur, wenn das Skript
   gelaufen ist: ohne die Klasse menue-js bleibt alles sichtbar. */

.menue-knopf {
  display: none; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--linie);
  border-radius: var(--radius-feld); padding: 9px 14px; cursor: pointer;
  font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--text);
}
.menue-knopf .balken {
  position: relative; display: block; width: 19px; height: 2px;
  background: currentColor;
}
.menue-knopf .balken::before, .menue-knopf .balken::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: currentColor;
}
.menue-knopf .balken::before { top: -6px; }
.menue-knopf .balken::after { top: 6px; }

/* Aufgeklappt wird aus den drei Strichen ein Kreuz. */
.menue-knopf[aria-expanded="true"] .balken { background: transparent; }
.menue-knopf[aria-expanded="true"] .balken::before { top: 0; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .balken::after { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .menue-knopf .balken, .menue-knopf .balken::before,
  .menue-knopf .balken::after { transition: transform .18s, top .18s; }
}

/* ------------------------------------------------------ Bereiche */

section { padding: var(--abstand) 0; }
section + section { padding-top: 0; }
section.hero + section { padding-top: var(--abstand); }

/* ---------------------------------------------------------- Hero */

.hero { padding: 0; }
.hero-innen {
  max-width: var(--breite); margin: 0 auto; padding: 96px 24px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 46vh;
}
.hero.mit-bild {
  background-size: cover; background-position: center;
  color: #fff; position: relative;
}
.hero.mit-bild::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62));
}
.hero.mit-bild .hero-innen { position: relative; }
.hero.mit-bild h1, .hero.mit-bild p { color: #fff; }
.hero.ohne-bild { background: var(--primaer-hell); }
.hero p.unterzeile { font-size: 1.16rem; max-width: 46ch; margin-bottom: 1.6em; }

.knopf {
  display: inline-block; align-self: flex-start;
  background: var(--sekundaer); color: var(--auf-sekundaer);
  padding: 14px 30px; border-radius: var(--radius-knopf);
  font-weight: 650; text-decoration: none; font-size: 1.02rem;
}
.knopf:hover { filter: brightness(1.08); color: var(--auf-sekundaer); }

/* -------------------------------------------------- Text mit Bild */

.text-bild { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.text-bild.links > .bildteil { order: -1; }
.text-bild img { border-radius: var(--radius); width: 100%; }

/* --------------------------------------------------- Leistungen */

.leistungen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px;
}
.leistung {
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px;
  border-top: 3px solid var(--sekundaer);
}
.leistung h3 { margin-bottom: 0.4em; }
.leistung p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Galerie */

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.galerie figure { margin: 0; }
.galerie img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ----------------------------------------------------------- FAQ */

.faq details {
  border-bottom: 1px solid var(--linie); padding: 18px 0;
}
.faq summary {
  font-family: var(--schrift-ueber); font-weight: 650; font-size: 1.08rem;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primaer-text); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-top: 12px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- CTA */

.cta {
  background: var(--primaer); color: var(--auf-primaer);
  border-radius: var(--radius); padding: 52px 40px; text-align: center;
}
.cta h2, .cta p { color: var(--auf-primaer); }
.cta p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta .knopf { align-self: center; margin-top: 10px; }

/* ------------------------------------------------------ Formular */

.formular { max-width: 640px; }
.formular label { display: block; font-weight: 600; margin: 18px 0 6px; font-size: 0.97rem; }
.formular input, .formular textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem;
  border: 1px solid var(--linie); border-radius: var(--radius-feld); background: var(--flaeche); color: var(--text);
}
.formular textarea { resize: vertical; min-height: 150px; }
.formular button {
  margin-top: 22px; background: var(--primaer); color: var(--auf-primaer);
  border: 0; border-radius: var(--radius-knopf); padding: 14px 30px;
  font: inherit; font-weight: 650; font-size: 1rem; cursor: pointer;
}
.formular button:hover { background: var(--primaer-dunkel); }
.formular .pflichtfeld { font-size: 0.86rem; color: var(--leise); margin-top: 14px; }
.formular .versteckt { position: absolute; left: -9999px; }

.meldung { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; }
.meldung.gut { background: #e9f5ee; color: #14663c; }
.meldung.schlecht { background: #fdecea; color: #9c221b; }

/* ------------------------------------------------ Volle Breite */

/* Der Inhalt laeuft bis an den Fensterrand, nur der Randabstand
   bleibt. Fliesstext wird trotzdem begrenzt: eine Textzeile ueber
   die ganze Bildschirmbreite ist unlesbar, egal wie gross der
   Bildschirm ist. */
/* Bei voller Breite zaehlt der Seitenrand doppelt: dort gibt es
   keine begrenzende Spalte mehr, die den Inhalt vom Fensterrand
   fernhaelt. Ohne diesen Zuschlag klebt der Text am Bildschirmrand. */
section.breit > .innen { max-width: none; padding-inline: calc(var(--rand) * 1.6); }
section.breit .text-bild { gap: 64px; }

/* Lesebreite: rund 70 Zeichen je Zeile. Darueber wird das Lesen
   muehsam, weil das Auge beim Zeilenwechsel die naechste Zeile
   nicht mehr sicher findet. */
section.lese .rechtstext,
section.lese .faq,
section.lese .zeiten { max-width: 70ch; }
section.breit.lese .rechtstext { margin-inline: auto; }

/* ---------------------------------------------- Öffnungszeiten */

.zeiten { max-width: 520px; }
.zeit-zeile {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--linie);
}
.zeit-zeile:last-child { border-bottom: 0; }
.zeit-zeile .tag { font-weight: 600; }
.zeit-zeile .punkte {
  flex: 1; border-bottom: 1px dotted var(--linie); transform: translateY(-4px);
}
.zeit-zeile .stunden { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeit-hinweis { margin-top: 18px; color: var(--leise); font-size: 0.95rem; }
section.breit .zeiten { max-width: 760px; margin-inline: auto; }

/* ------------------------------------------------------- Team */

.team {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;
}
.person { margin: 0; }
.person img, .person .ohne-bild {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 14px; background: var(--primaer-hell);
}

/* Ohne Foto steht ein ruhiger Platzhalter. Sonst rutscht die Person
   in der Reihe nach oben und die Namen stehen auf verschiedenen
   Hoehen, was aussieht wie ein Fehler. */
.person .ohne-bild {
  border: 1px dashed var(--linie);
  display: flex; align-items: center; justify-content: center;
  color: var(--leise); font-size: 2rem;
}
.person figcaption { font-size: 1rem; color: var(--text); margin-top: 0; }
.person strong { display: block; font-family: var(--schrift-ueber); }
.person .rolle { display: block; color: var(--leise); font-size: 0.92rem; margin-top: 2px; }

/* ------------------------------------------------ Kundenstimmen */

.stimmen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.stimme {
  margin: 0; padding: 30px 28px;
  border-left: 3px solid var(--sekundaer); background: var(--primaer-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.stimme blockquote { margin: 0 0 14px; font-size: 1.08rem; }
.stimme blockquote p:last-child { margin-bottom: 0; }
/* Die Anfuehrungszeichen stehen bewusst als echte Zeichen hier und
   nicht als Fluchtfolge geschrieben. In einem Textblock deutet PHP
   eine solche Folge als Oktalzahl und schreibt ein kaputtes Byte
   ins Stylesheet. Das ist mir hier schon einmal passiert, und zwar
   ausgerechnet in dem Kommentar, der davor warnen sollte.

   Zweite Falle am selben Ort: keine Zeile in diesem Block darf mit
   der Endmarke beginnen. PHP wuerde den Block dort beenden. */
.stimme blockquote p:first-child::before { content: "„"; }
.stimme blockquote p:last-child::after { content: "“"; }
.stimme figcaption { color: var(--leise); font-size: 0.92rem; font-weight: 600; }

/* ---------------------------------------------------- Anfahrt */

.anfahrt { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.anfahrt address {
  font-style: normal; font-size: 1.1rem; line-height: 1.7;
  margin-bottom: 22px;
}
.anfahrt .weg { color: var(--leise); }

/* ------------------------------------------------ Bildbeschriftung */

figure { margin: 0; }
figcaption { font-size: 0.82rem; color: var(--leise); margin-top: 7px; }

/* ------------------------------------------------------- Fussteil */

.fuss {
  background: var(--primaer); color: var(--auf-primaer);
  margin-top: 80px; padding: 56px 0 30px;
}
.fuss a { color: var(--auf-primaer); text-decoration: none; opacity: 0.9; }
.fuss a:hover { opacity: 1; text-decoration: underline; color: var(--auf-primaer); }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px; }
.fuss h3 { color: var(--auf-primaer); font-size: 1rem; margin-bottom: 0.7em; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 0.45em; }
.fuss-unten {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: 0.88rem; opacity: 0.86;
}

/* -------------------------------------------------- Cookie-Hinweis */

.cookie-hinweis {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 22px 24px; max-width: 560px; margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.cookie-hinweis h2 { font-size: 1.1rem; }
.cookie-hinweis p { font-size: 0.93rem; margin-bottom: 1em; }
.cookie-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-knoepfe button {
  flex: 1 1 auto; padding: 12px 20px; border-radius: var(--radius-feld);
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text);
}
/* Ablehnen ist genauso gross und genauso leicht zu treffen wie
   Annehmen. Alles andere waere ein Dark Pattern. */
.cookie-knoepfe button.zustimmen { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }

/* ----------------------------------------------------- Rechtstext */

/* Ohne Zusatzklasse fuellt ein Abschnitt die Spaltenbreite der
   Seite. Die Begrenzung auf Lesebreite ist eine bewusste Wahl des
   Kunden und keine stille Voreinstellung. */
.rechtstext { max-width: none; }
/* Nur im Kleingedruckten. Ein gewoehnlicher Textabschnitt behaelt
   die Ueberschriftsgroessen, die der Kunde eingestellt hat. */
.recht h2 { font-size: 1.35rem; margin-top: 1.8em; }
.recht h3 { margin-top: 1.4em; }
.rechtstext h3 { margin-top: 1.4em; }
.rechtstext dl { margin: 0 0 1.4em; }
.rechtstext dt { font-weight: 650; margin-top: 0.9em; }
.rechtstext dd { margin: 0; }

/* --------------------------------------------------------- Handy */

/* Erst hier darf getrennt werden. Ab dieser Breite ist die
   Alternative ein Wort, das aus der Seite ragt. */
@media (max-width: 700px) {
  h1, h2, h3 { hyphens: auto; }
  :root { --rand: 20px; }
  section.breit > .innen { padding-inline: 20px; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }

  .kopf .innen {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; min-height: auto;
    padding-top: 14px; padding-bottom: 14px;
  }
  .menue-knopf { display: inline-flex; }

  /* Nur mit gelaufenem Skript wird eingeklappt. */
  .menue-js .navigation { display: none; width: 100%; }
  .menue-js .navigation.offen { display: block; }

  .navigation { width: 100%; }
  .navigation ul {
    flex-direction: column; gap: 0;
    border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 6px;
  }
  .navigation li { border-bottom: 1px solid var(--linie); }
  .navigation li:last-child { border-bottom: 0; }
  .navigation a {
    display: block; padding: 14px 2px; border-bottom: 0; font-size: 1.02rem;
  }
  .navigation a[aria-current="page"] {
    border-bottom: 0; box-shadow: inset 3px 0 0 var(--sekundaer); padding-left: 12px;
  }

  /* Am Handy ist alles offen und wird nur eingerückt. Ein
     Aufklappmenü im Aufklappmenü ist eine Zumutung. */
  .navigation .untermenue {
    display: block; position: static; min-width: 0; padding: 0;
    border: 0; box-shadow: none; background: transparent;
  }
  .navigation .untermenue li { border-top: 1px solid var(--linie); border-bottom: 0; }
  .navigation .untermenue a { padding: 12px 2px 12px 20px; font-size: 0.96rem; opacity: .85; }
  .navigation .hat-unter > a::after { display: none; }
  section { padding: calc(var(--abstand) * 0.66) 0; }
  section.hero + section { padding-top: calc(var(--abstand) * 0.66); }
  .hero-innen { padding: 64px 24px; min-height: auto; }
  .text-bild { grid-template-columns: 1fr; gap: 28px; }
  .anfahrt { grid-template-columns: 1fr; gap: 26px; }
  .team { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; }
  .text-bild.links > .bildteil { order: 0; }
  .kopf { position: static; }
  .kopf .innen { min-height: auto; padding-top: 14px; padding-bottom: 14px; }
  .marke img { max-height: 40px; max-width: 55vw; }
  .navigation ul { gap: 4px 16px; }
  .cta { padding: 38px 24px; }
}


/* ==============================================================
   Seitengerüst

   Vier Achsen, die den Aufbau der Seite ändern und nicht nur ihre
   Oberfläche. Sie hängen an Klassen am body-Element, damit die
   Abschnitte selbst in jeder Variante gleich bleiben.
   ============================================================== */

/* ---- Kopfbereich: mittig ---- */

.k-mittig .kopf .innen {
  flex-direction: column; gap: 14px; text-align: center;
  padding-top: 26px; padding-bottom: 18px;
}
.k-mittig .navigation ul { justify-content: center; }
.k-mittig .marke { font-size: 1.5rem; }

/* ---- Kopfbereich: zweizeilig ---- */

.k-zweizeilig .kopf .innen {
  display: block; padding-top: 20px; padding-bottom: 0;
}
.k-zweizeilig .navigation {
  margin-top: 16px; border-top: 1px solid var(--linie);
}
.k-zweizeilig .navigation ul { gap: 26px; }
.k-zweizeilig .navigation a { padding: 14px 0; }

/* ---- Kopfbereich: über dem Bild ----

   Die Kopfzeile liegt im Titelbild statt darüber. Das geht nur mit
   Bild, deshalb gilt die Regel ausdrücklich nur dann: ohne Bild
   stünde weiße Schrift auf weißem Grund. */

.k-ueberlagert:has(.hero.mit-bild) .kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; border-bottom: 0;
}
.k-ueberlagert:has(.hero.mit-bild) { position: relative; }
.k-ueberlagert:has(.hero.mit-bild) .marke,
.k-ueberlagert:has(.hero.mit-bild) .navigation a { color: #fff; }
.k-ueberlagert:has(.hero.mit-bild) .navigation a:hover,
.k-ueberlagert:has(.hero.mit-bild) .navigation a[aria-current="page"] {
  color: #fff; border-bottom-color: #fff;
}
.k-ueberlagert:has(.hero.mit-bild) .menue-knopf { color: #fff; border-color: rgba(255,255,255,.5); }
.k-ueberlagert:has(.hero.mit-bild) .hero-innen { padding-top: calc(var(--abstand) * 1.6); }
.k-ueberlagert:has(.hero.mit-bild) .hero.mit-bild::before {
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.6));
}

/* ---- Titelbereich ----

   Das Bild steht in jeder Variante zusätzlich als Element im HTML.
   Sichtbar ist entweder das Hintergrundbild oder das Element, nie
   beides. Damit lässt sich der Aufbau wechseln, ohne dass jemand
   seine Inhalte neu anlegen muss. */

.hero-bildteil { display: none; }

/* Bildschirmhoch */
.t-hoch .hero.mit-bild { min-height: min(88vh, 900px); display: flex; align-items: center; }
.t-hoch .hero-innen { width: 100%; }

/* Geteilt: Text links, Bild rechts */
.t-geteilt .hero.mit-bild {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 0; background-image: none; padding: 0;
}
.t-geteilt .hero.mit-bild::before { display: none; }
.t-geteilt .hero.mit-bild .hero-innen {
  padding: var(--abstand) clamp(24px, 4vw, 56px);
  max-width: none; margin: 0;
}
.t-geteilt .hero.mit-bild h1,
.t-geteilt .hero.mit-bild p,
.t-geteilt .hero.mit-bild .ki-hinweis { color: var(--text); text-shadow: none; }
.t-geteilt .hero-bildteil { display: block; align-self: stretch; }
.t-geteilt .hero-bildteil img {
  width: 100%; height: 100%; object-fit: cover; min-height: 320px;
}

/* Ruhig: Text auf Farbfläche, Bild darunter */
.t-ruhig .hero.mit-bild {
  background-image: none; background: var(--primaer-hell);
}
.t-ruhig .hero.mit-bild::before { display: none; }
.t-ruhig .hero.mit-bild h1,
.t-ruhig .hero.mit-bild p,
.t-ruhig .hero.mit-bild .ki-hinweis { color: var(--text); text-shadow: none; }
.t-ruhig .hero-bildteil { display: block; }
.t-ruhig .hero-bildteil img {
  width: 100%; max-height: 62vh; object-fit: cover;
}

/* ---- Abstand je Abschnitt ----

   Der Wert ueberschreibt die Einstellung "Luft" fuer diesen einen
   Abschnitt. Die Regel muss auch die Ausnahme fuer aufeinander
   folgende Abschnitte mitnehmen, sonst bleibt der obere Abstand
   auf null stehen. */

main section.a-keiner { padding-top: 0; padding-bottom: 0; }
main section.a-eng,
main section + section.a-eng { padding-top: calc(var(--abstand) * 0.45); }
main section.a-eng { padding-bottom: calc(var(--abstand) * 0.45); }
main section.a-normal,
main section + section.a-normal { padding-top: var(--abstand); }
main section.a-normal { padding-bottom: var(--abstand); }
main section.a-weit,
main section + section.a-weit { padding-top: calc(var(--abstand) * 1.8); }
main section.a-weit { padding-bottom: calc(var(--abstand) * 1.8); }

/* ---- Abschnitte trennen ---- */

/* Die Kennzeichnung setzt der Renderer, weil er den Titelbereich
   beim Zaehlen ueberspringen kann. Eine Regel wie nth-of-type
   haette ihn mitgezaehlt. */
.r-wechsel main section.band { background: var(--primaer-hell); }
.r-linien main section + section:not(.hero) {
  border-top: 1px solid var(--linie);
}

/* ---- Fußbereich ---- */

.f-knapp .fuss { padding: 28px 0; }
.f-knapp .fuss-raster {
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline;
  margin-bottom: 12px;
}
.f-knapp .fuss-raster h3 { display: none; }
.f-knapp .fuss-raster p,
.f-knapp .fuss-raster ul { margin: 0; }
.f-knapp .fuss-raster ul { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.f-knapp .fuss-raster p br { display: none; }
.f-knapp .fuss-raster p::after { content: ""; }
.f-knapp .fuss-unten { border-top: 0; padding-top: 0; font-size: 0.86rem; }

.f-gross .fuss { padding-top: calc(var(--abstand) * 1.2); }
.f-gross .fuss-marke {
  font-family: var(--schrift-ueber); font-weight: var(--ueber-gewicht);
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.05;
  letter-spacing: var(--laufweite);
  margin-bottom: calc(var(--abstand) * 0.6);
}
.f-gross .fuss-raster { gap: 44px; }

@media (max-width: 860px) {
  .t-geteilt .hero.mit-bild { grid-template-columns: 1fr; }
  .t-geteilt .hero-bildteil img { min-height: 220px; max-height: 46vh; }
  .k-zweizeilig .navigation { margin-top: 0; border-top: 0; }
  .k-mittig .kopf .innen { padding-top: 16px; }
}


/* ==============================================================
   Eingebettete Inhalte und Einwilligung

   Der Platzhalter steht dort, wo später die Karte oder das Video
   erscheint. Er ist bewusst kein grauer Kasten mit Kleingedrucktem:
   wer nicht versteht, worum es geht, klickt entweder blind zu oder
   gar nicht, und beides ist schlecht.
   ============================================================== */

.einbettung {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--primaer-hell); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
}
.einbettung.karte { aspect-ratio: 16 / 9; margin-top: 8px; }
.einbettung.seitenverhaeltnis { aspect-ratio: 16 / 9; }
.einbettung iframe { width: 100%; height: 100%; display: block; border: 0; }

.einbettung-frage { max-width: 42ch; padding: 28px 24px; text-align: center; }
.einbettung-frage p { margin: 0 0 10px; }
.einbettung-frage p:last-of-type { margin-bottom: 18px; }
.einbettung-frage .klein { font-size: 0.9rem; color: var(--leise); }

/* -------------------------------------------- Einwilligung

   Unten am Bildschirm statt bildschirmfüllend. Ein Hinweis, der
   die ganze Seite verdeckt, zwingt zur Entscheidung, bevor jemand
   überhaupt weiß, worauf er sich einlässt. */

.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--flaeche); border-top: 2px solid var(--primaer);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .13);
}
.einwilligung[hidden] { display: none; }
.einwilligung-innen {
  max-width: var(--breite); margin: 0 auto; padding: 22px var(--rand);
}
.einwilligung h2 { font-size: 1.2rem; margin-bottom: 8px; }
.einwilligung p { margin: 0 0 14px; font-size: 0.95rem; }

.einwilligung-dienste { margin: 4px 0 16px; }
.einwilligung-dienst {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--linie);
}
.einwilligung-dienst input { margin-top: 3px; flex: none; }
.einwilligung-dienst .klein {
  display: block; font-size: 0.88rem; color: var(--leise); margin-top: 2px;
}

/* Zustimmen und Ablehnen sehen gleich aus. Ein hervorgehobener
   Zustimmen-Knopf neben einem blassen Ablehnen-Verweis gilt als
   unzulässige Beeinflussung, und er ist es auch. */
.einwilligung-knoepfe {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.einwilligung-knoepfe .knopf { flex: 0 0 auto; }
.einwilligung-knoepfe [data-keine] {
  background: transparent; color: var(--primaer-text);
  border: 1px solid var(--primaer-text);
}
.einwilligung-knoepfe [data-keine]:hover {
  background: var(--primaer); color: var(--auf-primaer); filter: none;
}
.einwilligung-knoepfe .knopf-leise {
  background: transparent; border: 0; padding: 12px 8px;
  font: inherit; font-size: 0.92rem; color: var(--leise);
  text-decoration: underline; cursor: pointer;
}
.einwilligung-knoepfe .knopf-leise:hover { color: var(--text); }

.fuss-unten a[data-einwilligung-aendern] { margin-left: 14px; }

@media (max-width: 700px) {
  .einwilligung-innen { padding: 18px var(--rand); max-height: 78vh; overflow-y: auto; }
  .einwilligung-knoepfe .knopf { flex: 1 1 auto; text-align: center; }
}

@media print {
  .einwilligung { display: none; }
  .einbettung { border: 1px dashed #999; }
  .kopf, .cookie-hinweis, .knopf { display: none; }
}
/* ---------------------------------------------- Vorlage: Klar */


.v-klar .hero-innen { max-width: 900px; margin-inline: auto; }
.v-klar h2 { letter-spacing: -0.01em; }
.v-klar .leistung { border-top-width: 2px; }
.v-klar section.lese .rechtstext { max-width: 66ch; }



/* Hintergrundbilder */
.hero-bild-1 { background-image: url("20260807-512a4cd5c6bc.webp"); }
.hero-bild-2 { background-image: url("20260807-4be0065993f8.webp"); }
.hero-bild-3 { background-image: url("20260810-1ca95c56e4f2.webp"); }
.hero-bild-4 { background-image: url("20260810-4973033b0161.webp"); }
.hero-bild-5 { background-image: url("20260810-0296056ff1df.webp"); }