/* ============================================================
   uniek Wohnideen – Gestaltung
   Mobile-first, kein Framework, keine Build-Pipeline.

   Grundlage ist das Brand Manual "uniek – Wohnideen" (Stand Mai 2022):
   Signet, Farben, Schriften und das Höhenlinien-Motiv kommen von dort.
   Die Zusammenfassung mit allen Begründungen steht in
   design-system/uniek-wohnideen/MASTER.md.

   Farben: die CI-Farben des Manuals, unverändert in den Hexwerten
   (--ci-*). Die --color-*-Namen sind die Rollen, die der übrige Code
   benutzt; sie zeigen nur noch auf CI-Farben oder deren Rasterstufen.

   Schriften: Oswald SemiBold (Überschriften), Playfair Display
   (Überschriften 2) und Source Sans Pro (Fließtext) – so verlangt es
   das Manual auf Seite 8. Alle drei OFL-lizenziert und SELBST
   GEHOSTET. Keine Einbindung über fonts.googleapis.com – das überträgt
   die IP jedes Besuchers an Google und bricht die Richtlinie
   default-src 'self'.
   ============================================================ */

/* ---------------------------------------------------------- Schriften */

/* Nur die Schnitte, die das Manual nennt: Oswald SemiBold, Playfair
   Display Regular, Source Sans Pro Regular und Bold. Dazu zwei Kursive
   für Zitate und Hervorhebungen. Alle als Latin-Teilmenge (Umlaute, ß,
   deutsche Anführungszeichen und Gedankenstrich sind enthalten).
   Der Browser lädt einen Schnitt erst, wenn die Seite ihn braucht. */
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/Oswald-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/SourceSansPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/SourceSansPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/SourceSansPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------- Werte */

:root {
  /* CI-Farben, Brand Manual S. 5–7 – Hexwerte exakt wie dort.
     Von den zusätzlichen Farben kommen Hellblau und Braun vor; Schwarz
     und Kupfer nicht – Kupfer hat im Manual ohnehin keine Werte. */
  --ci-pastellorange: #F49B5E;
  --ci-altblau:       #4D7B8C;
  --ci-altrosa:       #DA9998;
  --ci-tiefgruen:     #00493E;
  --ci-perlenweiss:   #F0F0F1;
  --ci-dunkelgrau:    #3E3F3F;
  --ci-hellblau:      #BFE0DF;
  --ci-braun:         #A67256;

  /* Rasterstufen wie im Manual: Farbe in Prozent auf Weiß. */
  --ci-altblau-10:       #EDF2F4;
  --ci-pastellorange-10: #FEF5EF;
  --ci-pastellorange-70: #F7B98E;
  --ci-altrosa-40:       #F0D6D6;
  --ci-hellblau-30:      #ECF6F5;
  --ci-dunkelgrau-80:    #656565;
  --ci-dunkelgrau-60:    #8B8C8C;
  --ci-dunkelgrau-30:    #C5C5C5;
  --ci-dunkelgrau-20:    #D8D9D9;

  /* Abgeleitet, NICHT im Manual – aus Gründen der Lesbarkeit.
     Altblau erreicht auf Weiß 4,6:1, auf Perlenweiß aber nur 4,1:1 und
     fällt dort als Textfarbe unter die Mindestgrenze von 4,5:1. Für
     Links und kleine Schrift gilt deshalb Altblau mit 10 % Schwarz
     (Weiß 5,5:1, Perlenweiß 4,8:1, Altblau-Raster 10 % 4,9:1).
     Der Nachtton (20 % Schwarz) ist nur Fläche: Knöpfe beim Überfahren. */
  --ci-altblau-tief:  #456F7E;
  --ci-altblau-nacht: #3E6270;

  /* Rollen. Alle Text-Hintergrund-Paare erfüllen 4,5:1 – die Liste mit
     den gemessenen Werten steht in der MASTER.md.
     Pastellorange (2,2:1 auf Weiß) und Altrosa (2,3:1) sind NIE
     Textfarbe, sondern Fläche, Strich und Zierde. */
  --color-background:       #FFFFFF;
  --color-card:             #FFFFFF;
  --color-foreground:       var(--ci-dunkelgrau);    /* 10,6:1 auf Weiß */
  --color-muted:            var(--ci-perlenweiss);
  --color-muted-foreground: var(--ci-dunkelgrau-80); /* 5,8:1 auf Weiß, 5,1:1 auf Perlenweiß */
  --color-border:           var(--ci-dunkelgrau-20);
  --color-feldrand:         var(--ci-dunkelgrau-60); /* Eingabefelder auf Weiß: 3,4:1, Grenze für Bedienelemente 3:1 */
  --color-primary:          var(--ci-altblau);
  --color-on-primary:       #FFFFFF;                 /* 4,6:1 */
  --color-accent:           var(--ci-pastellorange);
  --color-on-accent:        var(--ci-dunkelgrau);    /* 4,9:1 – Weiß käme nur auf 2,2:1 */
  --color-accent-text:      var(--ci-altblau-tief);
  --color-ring:             var(--ci-altblau);
  --color-offen:            var(--ci-tiefgruen);
  --color-zu:               var(--ci-altrosa);
  /* Rot hat die CI nicht. Fehler müssen aber als Fehler erkennbar sein –
     Altrosa wäre dafür zu blass und als Text unlesbar. */
  --color-destructive:      #DC2626;   /* 4,8:1 auf Weiß */
  --color-on-destructive:   #FFFFFF;

  /* Dunkle Flächen: Fußzeile in Dunkelgrau, Einladungsband in Altblau.
     Auf Altblau ist nur Weiß als Schrift zulässig (4,6:1); Perlenweiß
     läge schon bei 4,1:1. Deshalb gibt es dort keine "leise" Abstufung. */
  --color-dunkel:           var(--ci-dunkelgrau);
  --color-auf-dunkel:       var(--ci-perlenweiss);   /* 9,3:1 */
  --color-auf-dunkel-leise: var(--ci-dunkelgrau-30); /* 6,1:1 */
  --color-auf-dunkel-link:  var(--ci-pastellorange); /* 4,9:1 */
  --color-band:             var(--ci-altblau);
  --color-auf-band:         #FFFFFF;

  /* Typografie – Brand Manual S. 8 */
  --schrift-kopf:  "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Playfair Display", Georgia, "Times New Roman", serif;
  --schrift-text:  "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Maße */
  --breite:        76rem;
  --breite-schmal: 44rem;
  --abstand:       clamp(3.25rem, 7vw, 6rem);
  --radius:        4px;
  --rand:          1px solid var(--color-border);
}

/* ---------------------------------------------------------- Grundlagen */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Source Sans Pro hat eine kleinere x-Höhe als die frühere Work Sans und
   steht deshalb eine Stufe größer, damit der Fließtext gleich gut lesbar
   bleibt. */
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--schrift-text);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.65;
  /* Chrome unter Linux (und womöglich Android) wendet sonst die
     Hinting-Anweisungen von Source Sans Pro an und rundet dabei die
     Buchstabenbreiten: Wörter reißen auf ("Impre ssum", "wohnide en"),
     Wortabstände schrumpfen. geometricPrecision setzt die Schrift nach
     ihren echten Maßen. Die frühere Work Sans war davon nicht betroffen. */
  text-rendering: geometricPrecision;
  -webkit-text-size-adjust: 100%;
}

/* Formularelemente erben text-rendering nicht: Chrome setzt es dort im
   eigenen Stylesheet auf auto zurück – "Cookie-Einstellungen" oder
   "Nachricht senden" rissen sonst weiter auf. */
button, input, select, textarea { text-rendering: inherit; }

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

/* Rangfolge nach dem Manual: "Oswald SemiBold für Headers, Playfair
   Display für Headers 2". Die Hauptüberschrift einer Seite (h1) steht
   deshalb in Oswald – in Versalien und Altblau, so wie das Manual seine
   eigenen Überschriften setzt –, alle Zwischenüberschriften in Playfair
   Display. Altblau ist als Schrift erst ab dieser Größe unbedenklich
   (4,6:1 auf Weiß, für große Schrift genügen 3:1). */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--color-foreground);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.55rem + 2.4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ci-altblau);
}
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .5vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--color-foreground); }

/* Häkchen, Optionsfelder und Co. in Altblau statt im Blau des Browsers. */
:root { accent-color: var(--ci-altblau); }

/* Sichtbarer Fokusring auf allem, was Tastaturbedienung braucht. */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.klein { font-size: .875rem; color: var(--color-muted-foreground); }

hr { border: 0; border-top: var(--rand); margin: 2.5rem 0; }

::selection { background: var(--ci-altrosa-40); color: var(--color-foreground); }

/* Sprungmarke für Tastatur- und Screenreader-Nutzung. */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-dunkel);
  color: var(--color-auf-dunkel);
  padding: .85rem 1.4rem;
  text-decoration: none;
}
.sprungmarke:focus {
  left: .75rem;
  top: .75rem;
}

/* Honeypot: für Menschen unsichtbar, aber nicht display:none –
   manche Bots überspringen versteckte Felder gezielt. */
.koeder {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------- Bausteine */

.huelle {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
.huelle--schmal { width: min(100% - 2.5rem, var(--breite-schmal)); }

/* Drei Flächen im Wechsel mit dem weißen Grund: Perlenweiß ("hell" – der
   Name stammt aus der Zeit des cremefarbenen Grundes, auf dem Weiß die
   hellere Fläche war), das 10-%-Raster von Pastellorange ("gedämpft")
   und Altblau als Band für die abschließende Einladung ("dunkel"). */
.abschnitt { padding-block: var(--abstand); }
.abschnitt--hell { background: var(--color-muted); }
.abschnitt--gedaempft { background: var(--ci-pastellorange-10); }
.abschnitt--dunkel {
  background: var(--color-band);
  color: var(--color-auf-band);
}
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 { color: var(--color-auf-band); }
/* :not(.knopf), weil die Regel sonst die Knöpfe mit erfasst: Sie ist
   spezifischer als .knopf--akzent und färbte dessen Schrift weiß – auf
   Pastellorange nur 2,2:1. Knöpfe bringen ihre Farben selbst mit. */
.abschnitt--dunkel a:not(.knopf) { color: var(--color-auf-band); }
.abschnitt--dunkel a:not(.knopf):hover { color: var(--color-auf-band); text-decoration-thickness: 2px; }

/* --color-muted-foreground ist für den hellen Grund gedacht. Auf Altblau
   hält nur reines Weiß die 4,5:1 (4,6:1) – jede blassere Abstufung fiele
   darunter. Leisere Zeilen bleiben dort also weiß und unterscheiden sich
   nur durch die Größe. */
.abschnitt--dunkel .klein,
.abschnitt--dunkel .zeiten__zu,
.abschnitt--dunkel .abschnitt__kopf p { color: var(--color-auf-band); }

/* Höhenlinien-Motiv aus dem Manual (S. 3, "Holzdessin und Freiberger
   Höhenlinien") als Wasserzeichen im Band: weiße Linien, stark
   zurückgenommen, vom Rand angeschnitten. Reine Zierde – es darf nicht
   hinter dem Fließtext liegen, dünne helle Linien quer durch weiße Schrift
   stören beim Lesen. Deshalb hängt es an der Textspalte (44rem, mittig)
   und beginnt erst rechts daneben; wo dafür kein Platz ist, sitzt es klein
   in der Ecke oben rechts, abseits der Absätze.
   Eingebettetes SVG (motiv_linien()), damit es sich beim Heranscrollen
   zeichnen kann – siehe "Linien zeichnen" weiter unten. */
.abschnitt--dunkel { position: relative; overflow: hidden; isolation: isolate; }
.band__motiv {
  position: absolute;
  z-index: -1;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  color: var(--color-auf-band);
  opacity: .22;
  stroke-width: 1.1;
  pointer-events: none;
}
@media (min-width: 62rem) {
  .band__motiv {
    top: 50%;
    right: auto;
    left: calc(50% + 24rem);
    width: 34rem;
    height: 34rem;
    transform: translateY(-50%);
    stroke-width: .4;
  }
}

/* Kopfzeile eines Abschnitts mit kurzem Zierstrich in Pastellorange.
   Das ist die einzige großzügige Verwendung von --color-accent –
   als Fläche, nicht als Text. */
.abschnitt__kopf { max-width: 44rem; margin-bottom: 2.5rem; }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf p { color: var(--color-muted-foreground); }

/* Zierstrich über der Überschrift.
   Er zeichnet sich beim Heranscrollen von selbst – das ist die einzige
   Bewegung, die eine Überschrift hier bekommt. Bewusst NUR die Linie:
   Der Text ist immer voll sichtbar. Eine Animation, die Text erst
   einblendet, hat auf dieser Seite schon einmal dafür gesorgt, dass gar
   nichts zu lesen war.
   Der Ausgangswert 1 steht in der Rückfallposition der Variablen – ohne
   JavaScript ist der Strich also von Anfang an da. Das Skript setzt ihn
   erst auf 0, wenn es wirklich läuft. */
.strich::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: 1.25rem;
  transform: scaleX(var(--strich-mass, 1));
  transform-origin: left;
  transition: transform .55s ease-out;
}
.abschnitt__kopf--mitte .strich::before {
  margin-inline: auto;
  transform-origin: center;
}

/* Überzeile in der Kopfschrift: Oswald in Versalien, klein und gesperrt –
   wie die Rubriken im Manual. Altblau in der Textabstufung, weil die
   Zeile klein ist (5,5:1). */
.ueberzeile {
  display: block;
  font-family: var(--schrift-kopf);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: .75rem;
}

/* ---------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;              /* Touch-Ziel */
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  /* Keine Sperrung: Schon .01em reißt in Source Sans Pro Bold sichtbare
     Lücken ("Kon takt", "Anf ahrt"), weil Chrome bei gesperrter Schrift
     anders zusammensetzt. Ohne Sperrung steht das Wort geschlossen. */
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Weiß auf Altblau 4,6:1, beim Überfahren auf dem Nachtton 6,6:1. */
.knopf:hover { background: var(--ci-altblau-nacht); color: var(--color-on-primary); }

/* Pastellorange-Knopf: Dunkelgrau darauf erreicht 4,9:1, beim Überfahren
   auf dem 70-%-Raster 6,2:1. Weiße Schrift käme nur auf 2,2:1 und wäre
   unzulässig. */
.knopf--akzent { background: var(--color-accent); color: var(--color-on-accent); }
.knopf--akzent:hover { background: var(--ci-pastellorange-70); color: var(--color-on-accent); }

.knopf--rand {
  background: transparent;
  color: var(--color-foreground);
  border-color: var(--color-primary);
}
.knopf--rand:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.knopf--klein { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }

/* Anrufknopf in der Kopfzeile. Rund statt eckig, weil ein Rechteck mit
   hellem Grund und feinem Rahmen wie ein Eingabefeld aussieht – zumal an
   der Stelle, an der auf anderen Seiten die Suche sitzt. Die Rundung, das
   Hörersymbol und der gefüllte Zustand beim Überfahren machen daraus
   erkennbar eine Schaltfläche. Ziffern tabellarisch, damit die Nummer nicht
   löchrig wirkt. */
.knopf--telefon {
  background: transparent;
  color: var(--color-foreground);
  border-color: var(--color-border);
  border-radius: 999px;
  padding-inline: 1.1rem;
  font-variant-numeric: tabular-nums;
}
/* Der Hörer soll auf Höhe der Ziffern sitzen, nicht auf Höhe der Zeilenbox.
   Ziffern haben keine Unterlängen: Ihre Zeilenbox reicht unten weiter als
   die Ziffern selbst, und ein mittig ausgerichtetes Symbol rutscht dadurch
   sichtbar nach unten. line-height: 1 lässt die Box um die Ziffern
   zusammenschrumpfen, danach stimmen beide Mitten überein. */
.knopf--telefon span { line-height: 1; }
.knopf--telefon svg { color: var(--color-accent-text); flex: none; display: block; }
.knopf--telefon:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.knopf--telefon:hover svg { color: var(--color-on-primary); }

.abschnitt--dunkel .knopf--rand { color: var(--color-auf-band); border-color: var(--color-auf-band); }
.abschnitt--dunkel .knopf--rand:hover { background: var(--color-auf-band); color: var(--color-accent-text); }

.alsLink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------- Hinweisbalken */

.testbalken, .hinweisbanner {
  padding: .8rem 1.25rem;
  text-align: center;
  font-size: .9rem;
  line-height: 1.5;
}
.testbalken {
  background: var(--color-destructive);
  color: var(--color-on-destructive);
}
.testbalken a { color: #FFFFFF; }
/* Altblau wie die Hauptüberschrift, Weiß darauf: 4,6:1. */
.hinweisbanner {
  background: var(--ci-altblau);
  color: #FFFFFF;
  font-weight: 600;
}
.hinweisbanner a { color: #FFFFFF; }

/* ---------------------------------------------------------- Signet */

/* Das Signet aus dem Manual als eingebettetes SVG (inc/layout.php,
   schriftzug()). Es färbt sich über currentColor – vollfarbig und nur in
   CI-Farben, wie das Manual es verlangt: Dunkelgrau auf hellem Grund,
   Weiß ("1-farbig weiß") in der Fußzeile.
   Mindestbreite laut Manual 25 mm, am Bildschirm rund 95 px. Unter 3rem
   Höhe (97 px Breite) geht es deshalb nirgends. */
.marke {
  display: block;
  height: 3rem;
  width: auto;
  aspect-ratio: 219.3 / 108.4;
  color: var(--ci-dunkelgrau);
}
.marke--fuss { height: 3.5rem; color: #FFFFFF; }

/* ---------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-background);
  border-bottom: var(--rand);
}
.kopf__innen {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Schutzraum nach dem Manual (S. 4): rund um das Signet frei bleiben muss
   die doppelte Höhe des Schriftzugs "Wohnideen" – das sind 37 % der
   Signethöhe. Bei 3rem Signet also 1.125rem darüber und darunter, bevor
   die Trennlinie der Kopfzeile kommt. Daraus ergibt sich die Höhe der
   Kopfzeile; eine feste Mindesthöhe braucht es nicht mehr. */
.kopf__marke { display: block; text-decoration: none; padding-block: 1.125rem; }

/* Handy und Tablet: ein Hörer und drei Striche, ohne Rahmen und ohne Wort.
   Beide Flächen bleiben 44 × 44 px groß (Touch-Ziel), auch wenn nur das
   Zeichen zu sehen ist. Der negative Rand rückt das letzte Zeichen bündig an
   die Satzkante, statt es um die halbe Tippfläche einzurücken. */
.kopf__mobil {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-right: -.6rem;
}
.kopf__schalter,
.kopf__anruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.kopf__schalter:hover,
.kopf__anruf:hover { background: var(--ci-altblau-10); color: var(--color-accent-text); }
/* Das Wort bleibt im Knopf – es ist dessen Name für Vorleseprogramme –,
   nur sehen kann man es nicht mehr. */
.kopf__schalter-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kopf__schalter-balken {
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.kopf__schalter-balken::before,
.kopf__schalter-balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.kopf__schalter-balken::before { top: -7px; }
.kopf__schalter-balken::after  { top: 7px; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken { background: transparent; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::before { transform: translateY(7px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::after  { transform: translateY(-7px) rotate(-45deg); }

.kopf__nav { display: none; }
.kopf__nav.istOffen {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-background);
  border-bottom: var(--rand);
  padding: .5rem 1.25rem 1.5rem;
}
.kopf__nav ul { list-style: none; margin: 0; padding: 0; }
.kopf__nav ul a {
  display: block;
  padding: .85rem .25rem;
  color: var(--color-foreground);
  text-decoration: none;
  border-bottom: var(--rand);
}
.kopf__nav ul a:hover { color: var(--color-accent-text); }
.kopf__nav ul a[aria-current="page"] { color: var(--color-accent-text); font-weight: 700; }
.kopf__aktionen { margin-top: 1.25rem; }

@media (min-width: 62rem) {
  /* Breiter Bildschirm: Signet eine Stufe größer, Schutzraum wächst mit. */
  .kopf .marke { height: 3.5rem; }
  .kopf__marke { padding-block: 1.3rem; }

  .kopf__mobil { display: none; }
  .kopf__nav {
    display: flex !important;
    position: static;
    align-items: center;
    gap: 2rem;
    padding: 0;
    border: 0;
    background: none;
  }
  .kopf__nav ul { display: flex; gap: 1.75rem; }
  .kopf__nav ul a {
    padding: .35rem 0;
    border-bottom: 0;          /* die Trennlinie gilt nur dem Klappmenü */
    font-size: 1.0625rem;
    position: relative;
  }

  /* Strich in Pastellorange unter dem Wort. Er wächst beim Überfahren von links herein
     und steht auf der aktuellen Seite dauerhaft.
     Bewusst ein ::after statt border-bottom: Ein Rahmen ließe sich nicht
     einrollen, und ein Rahmen in transparent würde beim Umschalten springen.
     transform ist außerdem die einzige Eigenschaft, die der Browser ohne
     Neuberechnung des Layouts bewegen kann.
     Bei prefers-reduced-motion greift die Regel ganz oben und der Strich
     erscheint ohne Bewegung – sichtbar bleibt er in jedem Fall. */
  .kopf__nav ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.3rem;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease-out;
  }
  .kopf__nav ul a:hover::after,
  .kopf__nav ul a:focus-visible::after,
  .kopf__nav ul a[aria-current="page"]::after { transform: scaleX(1); }

  .kopf__aktionen { margin-top: 0; }
}

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

/* Bewusst KEIN Vollbild-Foto: Die späteren echten Fotos kommen aus dem
   Google-Profil bzw. Instagram und liefern höchstens rund 1080 px
   Kantenlänge. Ein Layout, das 2560 px voraussetzt, bräche beim Tausch
   sichtbar zusammen. Ein Mosaik mittelgroßer Bilder verträgt das – und
   passt zu einem Sortiment aus vielen kleinen Einzelstücken. */
/* Unten bewusst knapper als --abstand: Der Aufmacher soll auf einem
   Notebook-Bildschirm nicht die ganze erste Ansicht füllen – der erste
   Sortimentsabschnitt darf angeschnitten hereinragen, sonst wirkt die Seite
   wie eine Titelkarte, hinter der man nichts vermutet. */
.hero {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: var(--rand);
}

/* Der Abschnitt direkt unter dem Aufmacher rückt deutlich näher heran.
   Ursprünglich addierten sich Aufmacher-Unterrand und Abschnitts-Oberrand
   zu über 150 Pixeln, und "Was Sie bei uns finden" begann unnötig weit
   unten – erst recht, seit die Textspalte oben ausgerichtet ist und links
   darüber ohnehin Platz frei bleibt.
   Zusammen bleiben rund 60 Pixel um die Trennlinie. Weniger sollte es
   nicht werden: Sonst kleben die Bilder des Mosaiks an der Linie. */
.hero + .abschnitt { padding-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.hero__raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.hero__text p {
  font-size: 1.1rem;
  color: var(--color-muted-foreground);
  max-width: 34rem;
}
.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.75rem;
  padding: .4rem .9rem .4rem .7rem;
  border: var(--rand);
  border-radius: 999px;
  background: var(--color-card);
  font-size: .9375rem;
  font-weight: 700;
}
/* Geöffnet in Tiefgrün, geschlossen in Altrosa. Der Punkt ist Beiwerk –
   was gilt, steht ohnehin als Text daneben. */
.hero__punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-zu);
  flex: none;
}
.hero__status.istOffen .hero__punkt { background: var(--color-offen); }

/* Untereinander bestimmen die Kacheln ihre Höhe selbst (aspect-ratio).
   Hier stand einmal grid-auto-rows: 1fr – das zog die Reihe der beiden
   Quadrate auf die Höhe der breiten Kachel darüber und ließ unter ihnen
   50 bis 100 px leere Fläche stehen. Ab 56rem gibt ohnehin die feste
   Gesamthöhe weiter unten den Ton an. */
.hero__mosaik {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.hero__kachel { overflow: hidden; border-radius: var(--radius); background: var(--color-muted); }
.hero__kachel img { width: 100%; height: 100%; object-fit: cover; }
/* Die erste Kachel geht über beide Spalten – sonst wirkt das Mosaik
   wie eine Miniaturgalerie statt wie ein Aufmacher. */
.hero__kachel:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.hero__kachel:not(:first-child) { aspect-ratio: 1 / 1; }

@media (min-width: 56rem) {
  .hero__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    /* Nicht mittig: Die Textspalte ist gut 400 px hoch, das Bildmosaik über
       900 – zentriert entstanden dadurch rund 240 px Leerraum über der
       Überschrift, und die begann erst weit unterhalb des ersten Bildes.
       Oben ausgerichtet liegt die erste Zeile auf Höhe der Bildoberkante. */
    align-items: start;
  }
  /* Kleiner Ausgleich: Über Großbuchstaben sitzt durch die Zeilenhöhe etwas
     Luft. Ohne diesen Zug nach oben stünde die Schrift optisch tiefer als
     die Bildkante, obwohl beide Kästen bündig sind. */
  .hero__text { margin-top: -.35rem; }

  /* Ab hier gibt eine feste Gesamthöhe den Ton an, nicht mehr das
     Seitenverhältnis der einzelnen Kacheln.
     Grund: Solange jede Kachel ihre eigene Form behält, bestimmt die Summe
     dieser Formen die Höhe des Aufmachers – und damit, wie weit der
     Abschnitt darunter nach unten rutscht. Über die Abstände allein war
     nichts mehr zu holen, ohne dass die Bilder an der Trennlinie kleben.
     Mit einer Gesamthöhe lässt sich der Aufmacher an einer einzigen Stelle
     einstellen; die Bilder füllen ihre Felder über object-fit: cover, es
     wird also beschnitten statt verzerrt.
     Der obere Streifen bekommt etwas mehr als die Hälfte – das große Bild
     soll führen. */
  .hero__mosaik {
    height: 37.5rem;
    grid-template-rows: 1.35fr 1fr;
  }
  /* Absichtlich mit .hero__mosaik davor: Die Grundregeln stehen als
     .hero__kachel:first-child und :not(:first-child) da und sind damit
     spezifischer als ein schlichtes .hero__kachel – ohne diesen Zusatz
     behalten die Kacheln ihr Seitenverhältnis und laufen unten aus dem
     Kasten heraus. */
  .hero__mosaik .hero__kachel { aspect-ratio: auto; }

  /* Die Textspalte reicht bis zur Unterkante des Mosaiks (stretch), damit
     die Vase unten in ihr stehen kann. Der Text selbst bleibt oben. */
  .hero__text { position: relative; align-self: stretch; }
}

/* Linien zeichnen.
   Im Aufmacher zeichnet sich beim Laden eine Vase, Strich für Strich:
   pathLength="1" macht jede Linie gleich "lang", eine Strichlücke von 1
   versteckt sie, das Zurückfahren auf 0 zeichnet sie. Reine CSS.
   Im Band zeichnen sich die Höhenlinien erst beim Heranscrollen: Dort setzt
   seite.js zuerst .wartet und dann .zeichnet. Ohne JavaScript bekommt es
   keine der beiden Klassen und steht einfach fertig da. Bei abgeschalteter
   Bewegung sorgt die Regel ganz oben dafür, dass alles sofort im
   Endzustand ist. */
.hero__vase path,
.band__motiv.wartet path,
.band__motiv.zeichnet path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero__vase path,
.band__motiv.zeichnet path {
  animation: linie-zeichnen 2.4s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(.35s + var(--i, 0) * .14s);
}
.hero__vase path { animation-duration: 1.6s; animation-delay: calc(.3s + var(--i, 0) * .22s); }
@keyframes linie-zeichnen { to { stroke-dashoffset: 0; } }

/* Die Vase – kein Motiv aus dem Manual, aber in Altblau und mit welligen
   Bändern, die die Höhenlinien aufnehmen. Sie muss ganz zu sehen sein (ein
   angeschnittenes Gefäß sähe nach Fehler aus) und darf keinen Text kreuzen.
   Handy und Tablet: klein rechts neben der Überschrift.
   56–75rem: ausgeblendet – die Textspalte ist dort zu schmal, die Vase
   stieße an die Knöpfe.
   Ab 75rem: unten rechts in der Textspalte, neben den Knöpfen, auf Höhe der
   Unterkante des Mosaiks. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__vase {
  position: absolute;
  z-index: -1;
  top: 1.25rem;
  right: 1rem;
  height: 6.75rem;
  width: auto;
  aspect-ratio: 200 / 280;
  color: var(--ci-altblau);
  opacity: .55;
  stroke-width: 2.4;
  pointer-events: none;
}
@media (min-width: 56rem) {
  .hero__vase { display: none; }
}
@media (min-width: 75rem) {
  .hero .hero__vase {
    display: block;
    top: auto;
    bottom: 0;
    right: 0;
    height: 15rem;
    opacity: .6;
    stroke-width: 1.5;
  }
}
/* Erst ab 80rem ist neben den Knöpfen Platz für die größere Vase. */
@media (min-width: 80rem) {
  .hero .hero__vase { height: 18rem; }
}

/* Langsame Kamerafahrt im großen Aufmacherbild: Es kommt über 20 Sekunden
   um wenige Prozent heran. Beschnitten statt verschoben – die Kachel bleibt,
   wo sie ist, nur ihr Bild bewegt sich darin. */
.hero__kachel:first-child img {
  animation: heranfahren 20s ease-out both;
  transform-origin: 60% 45%;
}
@keyframes heranfahren { from { transform: scale(1.09); } to { transform: scale(1); } }

/* ---------------------------------------------------------- Karten */

.raster {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* Sechs Sortiment-Kacheln: auf breiten Bildschirmen zwei Reihen à drei
   statt vier plus zwei. */
@media (min-width: 62rem) { .raster--sortiment { grid-template-columns: repeat(3, 1fr); } }

.karte {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
a.karte:hover { border-color: var(--color-primary); transform: translateY(-2px); }
a.karte:hover .karte__titel { color: var(--color-accent-text); }

.karte__bild { aspect-ratio: 4 / 3; background: var(--color-muted); overflow: hidden; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.karte:hover .karte__bild img { transform: scale(1.03); }

.karte__text { padding: 1.4rem 1.5rem 1.6rem; flex: 1; }
.karte__titel { margin-bottom: .4rem; transition: color .2s ease; }
.karte__text p { color: var(--color-muted-foreground); font-size: .95rem; }

/* Zwei Textblöcke nebeneinander, z. B. Beratung / Lieferung. */
.doppel {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.block {
  background: var(--color-card);
  border: var(--rand);
  border-radius: var(--radius);
  padding: 1.75rem;
}

/* Gutschein-Block: Text links, daneben eine Gutscheinkarte – Signet weiß
   auf Altblau, wie die "Beispiel Kombination" im Brand Manual. Die Karte
   ist Abbildung, kein Formular; leicht schräg, als läge sie auf dem Tisch. */
.block--gutschein {
  margin-top: 1.5rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .block--gutschein { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3rem; }
}
.gutschein {
  --kerbe: .9rem;
  position: relative;
  display: grid;
  /* Alles in der Karte wächst mit ihrer Breite (cqi) – so bleibt sie auch
     auf einem schmalen Handy eine Karte und kein abgeschnittener Text. */
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr) 12.5%;
  aspect-ratio: 1.75 / 1;
  /* Feste Breite statt Zentrieren über margin: Mit container-type hat die
     Karte keine Breite aus ihrem Inhalt und schrumpfte sonst zusammen. */
  width: min(100%, 26rem);
  justify-self: center;
  color: #FFFFFF;
  background: var(--ci-altblau);
  border-radius: 6px;
  box-shadow: 0 14px 30px -14px rgba(62, 63, 63, .45);
  transform: rotate(-2.5deg);
  transition: transform .4s ease;
  /* Zwei halbrunde Kerben oben und unten an der Abrisslinie. */
  -webkit-mask:
    radial-gradient(circle var(--kerbe) at 87.5% 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--kerbe) at 87.5% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--kerbe) at 87.5% 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--kerbe) at 87.5% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.gutschein:hover { transform: rotate(0deg); }
.gutschein__haupt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2cqi;
  padding: 5cqi 6cqi;
  min-width: 0;
}
.marke--gutschein { height: 10cqi; color: #FFFFFF; margin-bottom: 1.5cqi; }
.gutschein__wort {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 10.5cqi;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
.gutschein__zeile { font-family: var(--schrift-titel); font-style: italic; font-size: max(.7rem, 4.2cqi); }
.gutschein__fuer {
  margin-top: 3cqi;
  font-size: max(.65rem, 3.4cqi);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  padding-bottom: .15rem;
  max-width: 55%;
}
.gutschein__abriss {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px dashed rgba(255, 255, 255, .6);
  background: var(--ci-pastellorange);
  color: var(--ci-dunkelgrau);
}
.gutschein__abriss > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--schrift-kopf);
  font-size: max(.55rem, 3cqw);   /* cqw, nicht cqi: senkrechte Schrift misst inline in der Höhe */
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
@container (max-width: 18rem) { .gutschein__strasse { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .gutschein, .gutschein:hover { transform: none; transition: none; }
}

/* Blog: Kacheln unter Aktuelles und die Beitragsseite. */
.karte__datum {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--schrift-kopf);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.karte__weiter {
  display: inline-block;
  margin-top: .8rem;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.beitrag__zurueck a:not(.knopf) { font-size: .95rem; }
.beitrag__titel { margin-top: .4rem; }
.beitrag__bild { margin: 1.5rem 0 2rem; border-radius: var(--radius); overflow: hidden; }
.beitrag__bild img { width: 100%; height: auto; display: block; }
.beitrag__text p { font-size: 1.08rem; line-height: 1.75; margin-bottom: 1.1rem; }
.beitrag__bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: .75rem;
  margin-top: 2rem;
}
.beitrag__bilder a { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.beitrag__bilder img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.beitrag__bilder a:hover img { transform: scale(1.04); }

/* Wechselnde Bild-Text-Reihen auf der Sortimentsseite. */
.reihe {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: var(--rand);
}
.reihe:first-of-type { border-top: 0; padding-top: 0; }
.reihe__bild { border-radius: var(--radius); overflow: hidden; background: var(--color-muted); aspect-ratio: 4 / 3; }
.reihe__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Diaschau in den Sortiment-Reihen: Fotos derselben Kategorie überblenden
   nacheinander, das aktive kommt dabei langsam ein Stück heran. Ohne
   Skript ist nur das erste sichtbar – es trägt istAktiv schon im HTML. */
.diaschau { position: relative; }
.diaschau__bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.diaschau__bild.istAktiv { opacity: 1; }
.diaschau__bild picture { display: block; height: 100%; }
.diaschau__bild img { transform: scale(1.06); transition: transform 7s ease-out; }
.diaschau__bild.istAktiv img { transform: scale(1); }
.diaschau__pause {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ci-dunkelgrau);
  cursor: pointer;
}
.diaschau__pause svg { fill: currentColor; }
.diaschau__pause:hover { background: #FFFFFF; }
.diaschau__zeichen-start,
.diaschau.istAngehalten .diaschau__zeichen-pause { display: none; }
.diaschau.istAngehalten .diaschau__zeichen-start { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .diaschau__bild, .diaschau__bild img { transition: none; transform: none; }
}

@media (min-width: 52rem) {
  .reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe--gedreht .reihe__bild { order: 2; }
}

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

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.filter a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border: var(--rand);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-foreground);
  text-decoration: none;
  font-size: .9375rem;
}
.filter a:hover { border-color: var(--color-primary); }
.filter a[aria-current="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.galerie {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.galerie__feld {
  display: block;
  padding: 0;
  border: 0;
  background: var(--color-muted);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
}
.galerie__feld img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galerie__feld:hover img { transform: scale(1.04); }

/* Galerie-Ausschnitt auf der Startseite: Auf dem Handy standen acht Bilder
   einzeln untereinander – eine lange Strecke, bevor es weitergeht. Dort
   nur fünf, als kleines Mosaik: eins breit, darunter vier im Quadrat.
   Die übrigen bleiben im HTML und erscheinen ab 40rem Breite. */
@media (max-width: 39.99rem) {
  .galerie--vorschau { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .galerie--vorschau .galerie__feld:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .galerie--vorschau .galerie__feld:nth-child(n+6) { display: none; }
}

/* Leuchtkasten. Kein Fremdcode, nur ein <dialog>. */
.leuchtkasten {
  border: 0;
  padding: 0;
  max-width: min(94vw, 1100px);
  max-height: 94vh;
  background: transparent;
  overflow: visible;
}
.leuchtkasten::backdrop { background: rgba(38, 39, 39, .9); }   /* Dunkelgrau, abgedunkelt */
.leuchtkasten img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
}
.leuchtkasten__unterschrift {
  margin: .85rem 0 0;
  color: var(--ci-perlenweiss);
  font-size: .9rem;
  text-align: center;
}
.leuchtkasten__zu {
  position: absolute;
  top: -2.75rem;
  right: 0;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------- Aktuelles */

.termine { list-style: none; margin: 0; padding: 0; }
.termin {
  display: grid;
  gap: .35rem 1.75rem;
  padding-block: 1.6rem;
  border-top: var(--rand);
}
.termin:first-child { border-top: 0; padding-top: 0; }
.termin__datum {
  font-family: var(--schrift-kopf);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.termin__titel { margin-bottom: .35rem; }
.termin__text { color: var(--color-muted-foreground); }
.termin__bild { border-radius: var(--radius); overflow: hidden; margin-top: 1rem; max-width: 22rem; }

@media (min-width: 44rem) {
  .termin { grid-template-columns: 9rem minmax(0, 1fr); }
  .termin__datum { padding-top: .2rem; }
}

/* ---------------------------------------------------------- Zahlen */

.zahlen {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin: 0;
  text-align: center;
}
.zahlen__wert {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: clamp(2.8rem, 1.9rem + 3.2vw, 4.4rem);
  line-height: 1;
  /* Altblau ist hier unbedenklich: Ziffern dieser Größe gelten als große
     Schrift (Grenze 3:1), und auch auf dem Pastellorange-Raster bleiben
     4,3:1. */
  color: var(--ci-altblau);
  /* Ziffern gleich breit: Beim Hochzählen wechselt sonst die Breite mit
     jeder Ziffer und die Beschriftung darunter zappelt. */
  font-variant-numeric: tabular-nums;
}
.zahlen__text {
  margin: .7rem 0 0;
  font-size: .95rem;
  color: var(--color-muted-foreground);
}

/* ---------------------------------------------------------- Stimmen */

.stimme {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem;
  background: var(--color-card);
  border: var(--rand);
  border-radius: var(--radius);
}
/* Sterne in Braun (zusätzliche CI-Farbe, 4,1:1 auf Weiß): Wie viele
   Sterne gefüllt sind, ist eine Aussage und braucht die 3:1 für Grafiken.
   Pastellorange käme nur auf 2,2:1 und wäre von den leeren Sternen kaum
   zu unterscheiden. */
.stimme__sterne {
  color: var(--ci-braun);
  font-size: 1.05rem;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}
/* Die nicht vergebenen Sterne blass, damit man auf einen Blick fünf sieht
   und nicht zählen muss. */
.stimme__leer { color: var(--color-border); }

/* Höchstens vier Zeilen, danach "…" – wie die gekürzten Stimmen beim
   Landgasthof. Der volle Wortlaut steht bei Google, dorthin führt der Link
   unter dem Namen; im HTML bleibt er vollständig, Vorleseprogramme lesen
   ihn also ganz. Gekürzt wird hier und nicht im Text, weil die Inhaberin die
   Stimmen selbst einträgt. Der flex-Platz (flex: 1) bleibt, damit Namen und
   Links aller Karten auf einer Höhe stehen. */
.stimme blockquote {
  margin: 0;
  flex: 1;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  align-self: stretch;
}
.stimme blockquote p { margin: 0; display: inline; }
.stimme blockquote p + p::before { content: " "; }
/* Anführungszeichen nur um das GANZE Zitat, nicht um jeden Absatz.
   Bei einer mehrteiligen Bewertung stünde sonst mittendrin ein Paar. */
.stimme blockquote p:first-of-type::before { content: "„"; }
.stimme blockquote p:last-of-type::after   { content: "“"; }

.stimme figcaption {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--rand);
  font-size: .9375rem;
  font-weight: 700;
}
.stimme__datum { font-weight: 400; color: var(--color-muted-foreground); }
.stimme__quelle {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  font-size: .875rem;
}

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

.zeiten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.25rem;
  margin: 0;
}
.zeiten dt { font-weight: 700; }
.zeiten dd { margin: 0; text-align: right; }
.zeiten__zu { color: var(--color-muted-foreground); }

.zeiten--gross {
  font-size: 1.02rem;
  border: var(--rand);
  border-radius: var(--radius);
  background: var(--color-card);
  padding: 1.5rem 1.75rem;
  gap: .6rem 1.5rem;
}

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

.formular { display: grid; gap: 1.15rem; }
.feld { display: grid; gap: .4rem; }
.feld label { font-weight: 700; font-size: .95rem; }
.feld__notiz { font-size: .875rem; color: var(--color-muted-foreground); }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: .7rem .9rem;
  border: 1px solid var(--color-feldrand);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
textarea { min-height: 9rem; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-foreground) 50%),
                    linear-gradient(135deg, var(--color-foreground) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-ring); }

.pflicht { color: var(--color-destructive); }

.meldung {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: 1.75rem;
}
/* Fehler bleiben rot (siehe --color-destructive). Die Erfolgsmeldung
   steht in Tiefgrün auf dem Hellblau-Raster: 9,4:1. */
.meldung--fehler { background: #FBEAEA; border-color: var(--color-destructive); color: #7A1616; }
.meldung--gut    { background: var(--ci-hellblau-30); border-color: var(--ci-tiefgruen); color: var(--ci-tiefgruen); }

/* Fehlerübersicht am Formularkopf: nennt die Probleme gesammelt und
   verlinkt auf das jeweilige Feld – wer mit der Tastatur oder einem
   Vorleseprogramm arbeitet, muss sonst das ganze Formular absuchen. */
.fehlerliste { margin: .6rem 0 0; padding-left: 1.2rem; }
.fehlerliste a { color: inherit; }

/* ---------------------------------------------------------- Besuch */

/* Zweite Überschrift in der Spalte bekommt Luft, damit die beiden Blöcke
   nicht ineinanderlaufen. */
.besuch__zweiter { margin-top: 2.75rem; }

.besuch__adresse { font-style: normal; line-height: 1.75; }

/* Telefon und E-Mail untereinander, mit etwas Abstand zur Anschrift –
   vorher standen vier Zeilen ohne jede Pause untereinander. */
.besuch__wege {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-top: 1rem;
}

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

/* Karte und Wegbeschreibung nebeneinander, die Karte bekommt den größeren
   Anteil. In der schmalen Spalte war sie auf gut ein Drittel gedrückt. */
.anfahrt {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .anfahrt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.anfahrt__text { color: var(--color-muted-foreground); }


.karte-bild {
  border: var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-muted);
}
.karte-bild img { width: 100%; }

/* Fläche, in der entweder das eigene Kartenbild oder – nach Zustimmung –
   die Google-Karte sitzt. Das Seitenverhältnis ist festgelegt, damit beim
   Austausch nichts springt. */
.karte-bild__flaeche {
  position: relative;
  aspect-ratio: 880 / 620;
  background: var(--color-muted);
}
.karte-bild__flaeche img,
.karte-bild__flaeche iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Aufforderung über dem Kartenbild. Bewusst deckend hinterlegt statt nur
   halbtransparent: Auf einer kleinteiligen Karte wäre der Text sonst je nach
   Bildausschnitt kaum lesbar. */
.karte-bild__anfrage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(62, 63, 63, .94);   /* Dunkelgrau, fast deckend */
  color: var(--color-auf-dunkel);
}
.karte-bild__anfrage p { margin: 0; max-width: 30rem; font-size: .9rem; line-height: 1.55; }
.karte-bild__anfrage .klein { color: var(--color-auf-dunkel-leise); }
.karte-bild__anfrage label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  cursor: pointer;
}
.karte-bild__anfrage input { width: 18px; height: 18px; }

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

.einwilligung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-card);
  border-top: 2px solid var(--color-dunkel);
  box-shadow: 0 -6px 28px rgba(62, 63, 63, .18);
}
.einwilligung__inhalt {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  padding: 1.4rem 0 1.6rem;
}
.einwilligung__inhalt h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.einwilligung__inhalt p { font-size: .9375rem; color: var(--color-muted-foreground); max-width: 52rem; }

/* Beide Knöpfe gleich groß und gleich auffällig nebeneinander. Ein
   kleingemachtes oder ausgegrautes "Ablehnen" gilt als unwirksame
   Einwilligung – die Ablehnung muss so leicht sein wie die Zustimmung. */
.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.1rem;
}
.einwilligung__knoepfe .knopf { flex: 1 1 12rem; }

@media (min-width: 48rem) {
  .einwilligung__knoepfe .knopf { flex: 0 0 auto; min-width: 11rem; }
}
.karte-bild__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-top: var(--rand);
  background: var(--color-card);
  font-size: .82rem;
  color: var(--color-muted-foreground);
}

/* ---------------------------------------------------------- Fließtext */

.fliesstext { max-width: 42rem; }
.fliesstext h2 { margin-top: 2.5rem; }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: 2rem; }
.fliesstext ul { padding-left: 1.25rem; }
.fliesstext li { margin-bottom: .4rem; }

.hinweiskasten {
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-muted);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-size: .93rem;
}

/* Widerspruchsrecht in der Datenschutzerklärung: sichtbar abgesetzt,
   wie Art. 21 Abs. 4 DSGVO es verlangt. */
.widerspruch {
  border-left: 4px solid var(--ci-altblau);
  background: var(--color-muted);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.widerspruch h3 { margin-top: 0; }
.widerspruch p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Fußzeile */

/* KEIN margin-top.
   Vorher stand hier einer, und er hat den Hintergrund der Seite als hellen
   Streifen zwischen dem letzten Abschnitt und der Fußzeile durchscheinen
   lassen. Endet eine Seite mit einem dunklen Abschnitt – wie die Startseite
   mit "Kommen Sie vorbei" –, sieht das aus wie ein Fehler: zwei dunkle
   Flächen mit einem weißen Spalt dazwischen.
   Abstand brauchen die Abschnitte auch nicht von hier: Jeder bringt mit
   padding-block: var(--abstand) seinen eigenen mit.
   Stattdessen ein schmaler Strich in Pastellorange als bewusste Kante –
   unter dem Altblau-Band der Startseite ein kleiner Farbakzent. */
.fuss {
  background: var(--color-dunkel);
  color: var(--color-auf-dunkel);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--abstand);
}
.fuss__innen {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: 3rem;
}
.fuss h2 {
  font-family: var(--schrift-kopf);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-auf-dunkel-leise);
  margin-bottom: 1.1rem;
}
.fuss a { color: var(--color-auf-dunkel-link); text-decoration: none; }
.fuss a:hover { color: #FFFFFF; text-decoration: underline; }
.fuss__adresse { margin-top: 1.25rem; }
.fuss__block .zeiten dd { text-align: left; }
.fuss__block .zeiten__zu { color: var(--color-auf-dunkel-leise); }
.fuss__block .klein { color: var(--color-auf-dunkel-leise); }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: .5rem; }
.fuss__sozial a { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }

.fuss__leiste {
  border-top: 1px solid rgba(240, 240, 241, .18);
  padding-block: 1.25rem;
}
.fuss__leiste,
.fuss__leiste nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
}
.fuss__leiste {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--color-auf-dunkel-leise);
}
.fuss__leiste p { margin: 0; }

.fuss__urheber {
  width: min(100% - 2.5rem, var(--breite));
  margin: 0 auto;
  padding-bottom: 1.75rem;
  font-size: .8125rem;
  color: var(--color-auf-dunkel-leise);
  text-align: center;
}
/* Der Link steht mitten im Satz. Pastellorange hebt sich vom grauen Text
   nur mit 1,25:1 ab – zu wenig, um ihn allein an der Farbe zu erkennen.
   Deshalb hier unterstrichen, anders als die frei stehenden Fußzeilenlinks. */
.fuss__urheber a { text-decoration: underline; }

/* ---------------------------------------------------------- Einblenden

   ENTFERNT, mit Absicht.

   Hier stand eine Einblendung beim Heranscrollen: .einblenden startete auf
   opacity 0, und ein IntersectionObserver hat sie sichtbar geschaltet.

   Das Verfahren hat einen Konstruktionsfehler, der jede hübsche Wirkung
   aufwiegt: Der Text ist dann erst lesbar, wenn JavaScript durchgelaufen ist.
   Klemmt das Skript – blockiert, von einem Optimierer des Hosters verstümmelt,
   zu spät geladen –, bleibt die Seite dauerhaft leer, ohne jede Fehlermeldung.
   Genau das ist im Betrieb aufgefallen.

   Inhalt darf nie von JavaScript abhängen, um überhaupt sichtbar zu sein.
   Die Klasse .einblenden steht noch im HTML, hat aber keine Wirkung mehr;
   sie schadet nicht und markiert die Stellen, falls je wieder eine Bewegung
   gewünscht wird. Dann aber andersherum aufbauen: sichtbar als Ausgangslage,
   Bewegung nur als Zugabe.
   ---------------------------------------------------------------------- */

/* ---------------------------------------------------------- Druck */

@media print {
  .kopf, .fuss__innen, .hero__mosaik, .filter, .testbalken { display: none; }
  body { background: #FFFFFF; font-size: 11pt; }
  a { text-decoration: none; color: #000000; }
}