@charset "UTF-8";
/* ==================================================================
   Steinmetzbetrieb Walter – Gestaltung
   ------------------------------------------------------------------
   Aufbau
     1  Schriften
     2  Werte (Farben, Raster, Typo)
     3  Grundlagen
     4  Typografie
     5  Bausteine (Buttons, Karten, Formulare)
     6  Kopf & Fuss
     7  Abschnitte
     8  Hero mit Gravur
     9  Balken unten (Handy), Cookie-Hinweis
    10  Elementor
    11  Bewegung & Barrierefreiheit

   Farbregel
     Weiss traegt die Seite. Gelb ist Handlung – Knoepfe, Akzente,
     der Strich unter einer Ueberschrift. Gruen ist Natur und
     Bestaetigung, es taucht im Garten-Umfeld und bei Zusagen auf.
     Anthrazit ist Text und Stein.
   ================================================================== */

/* ------------------------------------------------------------------
   1 · Schriften – lokal, damit beim Aufruf keine Verbindung zu
       Google entsteht (DSGVO).
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: normal;
  font-display: swap;
  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: "Fraunces";
  src: url("../fonts/fraunces-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Inter";
  src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}

/* ------------------------------------------------------------------
   2 · Werte
   ------------------------------------------------------------------ */

:root {
  /* Marke
     ------------------------------------------------------------------
     Zwei Hausfarben: Gelb aus dem Logo, Grün nach Vorgabe des Betriebs.
     Beide sind hell – auf weißem Grund taugen sie als Flächen, nicht
     als Schriftfarbe. Gemessen:

       #F7C307 auf Weiß  1,7:1      #7AB10D auf Weiß  2,6:1
       Anthrazit darauf  9,7:1      Anthrazit darauf  6,7:1

     Für Text auf Weiß gibt es deshalb je eine abgedunkelte Fassung
     (--gruen-text mit 4,9:1), die daneben noch wie dieselbe Farbe
     wirkt. Wo Gelb oder Grün flächig liegen, steht dunkler Text
     darauf – nie weißer.
     ------------------------------------------------------------------ */
  --gelb: #f7c307;
  --gelb-dunkel: #d9a800;
  --gelb-hell: #fde9a3;
  --gelb-blass: #fff8dd;

  --gruen: #7ab10d;
  --gruen-dunkel: #6a9a0b;
  --gruen-text: #557c09;
  --gruen-tief: #243209;
  --gruen-hell: #cfe58a;
  --gruen-blass: #f2f8e4;

  /* ------------------------------------------------------------------
     Grundfarbe der Kopfzeile – nach Vorgabe des Betriebs.

     Zum Kontrast, damit die Entscheidung bewusst bleibt: Auf #7AB10D
     erreicht weiße Schrift 2,6:1 und gelbe 1,6:1. Gefordert sind 4,5:1
     für Fließtext und 3:1 für große fette Schrift.

     Ein Abdunkeln dieser einen Zeile behebt das, ohne dass die Farbe
     merklich anders wirkt:
        #4D7008  Weiß 5,8:1   Gelb 3,5:1
        #456408  Weiß 6,8:1   Gelb 4,1:1
     ------------------------------------------------------------------ */
  --kopf-grund: #7ab10d;

  /* Grund des Zahlenbands – nach Vorgabe des Betriebs.
     Dunkel genug für helle Schrift: Markengelb erreicht darauf 4,5:1,
     Weiß 7,4:1. Die Zahlen brauchen deshalb keine Kontur mehr. */
  --band-grund: #02641c;

  /* Stein – die Neutralen sind leicht warm, nie blaustichig */
  --tinte: #1c1b19;
  --tinte-70: #4a4740;
  --tinte-50: #6f6b62;
  --tinte-30: #a8a49a;
  --stein-100: #faf9f7;
  --stein-200: #f2f0eb;
  --stein-300: #e6e2d9;
  --stein-400: #d3cec3;
  --weiss: #fff;

  --grund: var(--weiss);
  --text: var(--tinte);
  --gedaempft: var(--tinte-70);
  --linie: var(--stein-300);

  /* Raster */
  --breite: 1280px;
  --breite-schmal: 800px;
  --breite-weit: 1560px;
  --rand: clamp(1.15rem, 4.5vw, 3rem);
  --luft: clamp(4rem, 9vw, 8.5rem);
  --luft-klein: clamp(2.5rem, 5vw, 4.5rem);

  /* Typo */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ------------------------------------------------------------------
     Schriftgrößen.

     Die Skala ist auf Wunsch des Betriebs angehoben worden – die Seite
     soll auch von älteren Kunden ohne Mühe zu lesen sein. Maßgeblich
     ist dabei die kleinste Stufe: 0,78rem waren 12,5 Pixel, und
     darunter wird für viele Augen aus Lesen ein Entziffern. Die
     Untergrenze liegt jetzt bei 14 Pixeln, die üblicherweise als
     Mindestmaß für Fließtext gilt.

     Alle Stufen hängen an diesen vier Werten, deshalb genügt hier eine
     Änderung. Die Überschriften bleiben, wie sie waren: Sie sind
     bereits groß, und ein Mitwachsen hätte die Zeilenumbrüche in den
     Titeln verschoben.
     ------------------------------------------------------------------ */
  --t-xs: 0.875rem;
  --t-s: 0.97rem;
  --t-m: 1.075rem;
  --t-l: clamp(1.14rem, 1.04rem + 0.4vw, 1.36rem);
  --h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --h3: clamp(1.35rem, 1.15rem + 0.85vw, 1.95rem);
  --h2: clamp(1.85rem, 1.4rem + 2vw, 3.1rem);
  --h1: clamp(2.3rem, 1.6rem + 3.2vw, 4.35rem);
  --riesig: clamp(3rem, 1.5rem + 7vw, 8rem);

  /* Form */
  --radius-s: 4px;
  --radius: 8px;
  --radius-l: 16px;
  --schatten-s: 0 1px 2px rgb(28 27 25 / 0.05), 0 2px 8px rgb(28 27 25 / 0.04);
  --schatten: 0 2px 4px rgb(28 27 25 / 0.05), 0 12px 28px -8px rgb(28 27 25 / 0.12);
  --schatten-l: 0 4px 8px rgb(28 27 25 / 0.06), 0 24px 56px -12px rgb(28 27 25 / 0.18);

  --zeit: 0.32s;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);

  --kopf-hoehe: 76px;
  --balken-hoehe: 0px;
}

@media (min-width: 1000px) {
  :root {
    --kopf-hoehe: 92px;
  }
}

/* Sehr grosse Schirme: der Inhalt darf mitwachsen, sonst wirkt die
   Seite auf 4K wie eine Briefmarke in der Mitte. */
@media (min-width: 1900px) {
  :root {
    --breite: 1440px;
    --breite-weit: 1760px;
    --t-m: 1.14rem;
    --t-l: 1.42rem;
  }
}
@media (min-width: 2600px) {
  :root {
    --breite: 1600px;
    --breite-weit: 1960px;
    --t-m: 1.22rem;
    --t-l: 1.52rem;
  }
}

/* ------------------------------------------------------------------
   3 · Grundlagen
   ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: var(--balken-hoehe);
  /* Notbremse für alles, was in keine Zeile passt: lange Adressen,
     E-Mails, deutsche Bandwurmwörter. Bricht nur ein, wenn ein Wort
     allein schon zu breit ist – normale Umbrüche bleiben unberührt.
     Ohne das ragten auf 320 Pixel breiten Geräten Impressum, AGB und
     die Datenschutzerklärung über den Rand hinaus. */
  overflow-wrap: break-word;
}

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

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-color: currentColor;
}

button {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: var(--gelb);
  color: var(--tinte);
}

/* Nur fuer Screenreader */
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 999;
  background: var(--tinte);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  transition: top 0.2s;
}
.sprung:focus {
  top: 0.5rem;
}

/* Raster */
.huelle {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}
.huelle--weit {
  width: min(100% - 2 * var(--rand), var(--breite-weit));
}
.huelle--schmal {
  width: min(100% - 2 * var(--rand), var(--breite-schmal));
}

.abschnitt {
  padding-block: var(--luft);
  position: relative;
}
.abschnitt--eng {
  padding-block: var(--luft-klein);
}
.abschnitt--stein {
  background: var(--stein-100);
}
.abschnitt--stein-kraeftig {
  background: var(--stein-200);
}
/* Das Zahlenband in dunklem Grün. Anders als auf der hellen
   Kopfzeile trägt hier helle Schrift – Weiß erreicht 7,4:1. */
.abschnitt--dunkel {
  background: var(--band-grund);
  color: #eef3ea;
}
.abschnitt--dunkel .gedaempft,
.abschnitt--dunkel p {
  color: #cfdcc9;
}

/* Steinkorn – ein sehr feines Rauschen, das flaechigem Grau die
   Sterilitaet nimmt. Als Data-URI, damit es keinen Request kostet. */
.korn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}
.abschnitt--dunkel.korn::before {
  mix-blend-mode: screen;
  opacity: 0.14;
}

/* ------------------------------------------------------------------
   4 · Typografie
   ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
.serif {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  /* Deutsche Komposita sind lang: "siebenunddreißig" passt am Handy
     in keine Überschriftenzeile und schob die Seite seitwärts. Mit
     lang="de-AT" am <html> trennt der Browser nach den richtigen
     Regeln; die Notbremse (overflow-wrap) steht auf dem body und gilt
     hier ohnehin mit. */
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1 {
  font-size: var(--h1);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  font-weight: 650;
  line-height: 1.03;
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--h2);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  font-weight: 630;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--h3);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
}
h4 {
  font-size: var(--h4);
  font-variation-settings: "opsz" 28, "SOFT" 0, "WONK" 0;
}

p {
  margin: 0 0 1.15em;
  color: var(--gedaempft);
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Der Akzent in Überschriften: gelber Pinselstrich darunter. Nicht die
   Schrift einfärben – Gelb auf Weiß erreicht 1,7:1 und wäre nicht
   lesbar.

   Der Strich liegt als Hintergrund auf dem Wort, nicht als
   abgesetzter Kasten dahinter. Das ist der Unterschied, auf den es
   ankommt: Ein absolut gesetzter Kasten braucht ein Wort, das nie
   umbricht – und genau dafür stand hier `white-space: nowrap`. Am
   Handy schob eine Wendung wie "siebenunddreißig Jahren" damit die
   ganze Seite seitwärts, weil sie in keine Zeile passte und trotzdem
   nicht umbrechen durfte.

   Mit `box-decoration-break: clone` bekommt jede Zeile ihren eigenen
   Strich. Die Überschrift darf umbrechen, der Akzent bleibt
   vollständig.
   ------------------------------------------------------------------ */
.ak {
  color: inherit;
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 calc(100% - 0.06em);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
  margin-inline: -0.06em;
}
h1 .ak,
h2 .ak {
  background-size: 100% 0.26em;
  background-position: 0 calc(100% - 0.04em);
}
h1,
h2,
h3 {
  isolation: isolate;
}

/* Die kleine Zeile ueber einer Ueberschrift */
.dach {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-50);
  margin-bottom: 1rem;
}
.dach::before {
  content: "";
  width: 1.8rem;
  height: 3px;
  background: var(--gruen);
  border-radius: 2px;
  flex: none;
}
.abschnitt--dunkel .dach {
  color: var(--gelb);
}
.abschnitt--dunkel .dach::before {
  background: var(--gelb);
}

.kopfblock {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.kopfblock--mitte {
  margin-inline: auto;
  text-align: center;
}
.kopfblock--mitte .dach {
  justify-content: center;
}
.kopfblock p {
  font-size: var(--t-l);
  max-width: 42rem;
}
.kopfblock--mitte p {
  margin-inline: auto;
}

.fuehrung {
  font-size: var(--t-l);
  line-height: 1.6;
}

.gedaempft {
  color: var(--gedaempft);
}
.klein {
  font-size: var(--t-s);
}

/* Fliesstext aus dem Editor */
.text > * + * {
  margin-top: 1.1em;
}
.text ul,
.text ol {
  padding-left: 1.3em;
  color: var(--gedaempft);
}
.text li + li {
  margin-top: 0.4em;
}
.text a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 2px;
}
.text h2,
.text h3 {
  margin-top: 1.8em;
}
.text h2:first-child,
.text h3:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------------
   5 · Bausteine
   ------------------------------------------------------------------ */

/* --- Knoepfe --- */
.btn {
  --btn-grund: var(--gelb);
  --btn-text: var(--tinte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-grund);
  color: var(--btn-text);
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--zeit) var(--kurve),
    box-shadow var(--zeit) var(--kurve), background-color var(--zeit),
    border-color var(--zeit), color var(--zeit);
}
.btn > span {
  position: relative;
  z-index: 1;
}
.btn .ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  position: relative;
  z-index: 1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten);
}
.btn:active {
  transform: translateY(0);
}

.btn--primaer {
  background: var(--gelb);
  color: var(--tinte);
  box-shadow: 0 1px 2px rgb(28 27 25 / 0.1);
}
.btn--primaer:hover {
  background: var(--gelb-dunkel);
}

.btn--zweit {
  background: var(--tinte);
  color: #fff;
}
.btn--zweit:hover {
  background: #322f2a;
}

.btn--geist {
  background: transparent;
  color: var(--tinte);
  border-color: var(--stein-400);
}
.btn--geist:hover {
  border-color: var(--tinte);
  background: var(--stein-100);
}

.btn--hell {
  background: #fff;
  color: var(--tinte);
}
.btn--hell:hover {
  background: var(--stein-200);
}

.btn--gruen {
  background: var(--gruen);
  color: #16240a;
}
.btn--gruen:hover {
  background: var(--gruen-dunkel);
  color: #fff;
}

.btn--gross {
  padding: 1.1rem 2rem;
  min-height: 58px;
  font-size: var(--t-m);
}
.btn--voll {
  width: 100%;
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}
.kopfblock--mitte .knoepfe {
  justify-content: center;
}

/* Textlink mit Pfeil */
.mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-s);
  font-weight: 650;
  text-decoration: none;
  color: var(--tinte);
  border-bottom: 2px solid var(--gelb);
  padding-bottom: 2px;
  transition: gap var(--zeit) var(--kurve), color var(--zeit);
}
.mehr .ico {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--zeit) var(--kurve);
}
.mehr:hover {
  gap: 0.7rem;
}
.mehr:hover .ico {
  transform: translateX(3px);
}
.abschnitt--dunkel .mehr {
  color: #fff;
}

/* --- Karten --- */
.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--zeit) var(--kurve),
    box-shadow var(--zeit) var(--kurve), border-color var(--zeit);
}
.karte__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--stein-200);
}
.karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--kurve);
}
.karte__inhalt {
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.karte__inhalt h3 {
  margin: 0;
}
.karte__inhalt p {
  font-size: var(--t-s);
  margin: 0;
  flex: 1;
}
.karte__fuss {
  margin-top: 0.9rem;
}
a.karte,
.karte a.deck {
  text-decoration: none;
}
/* Ganze Karte klickbar, ohne verschachtelte Links */
.karte .deck::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-l);
  border-color: var(--stein-400);
}
.karte:hover .karte__bild img {
  transform: scale(1.05);
}

/* Symbolkarte */
.ikarte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--zeit) var(--kurve),
    box-shadow var(--zeit) var(--kurve), border-color var(--zeit);
}
.ikarte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gruen);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--kurve);
}
.ikarte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
  border-color: var(--stein-400);
}
.ikarte:hover::before {
  transform: scaleY(1);
}
.ikarte h3 {
  margin: 0;
  font-size: var(--h4);
}
.ikarte p {
  font-size: var(--t-s);
  margin: 0;
}

.ikarte__ico,
.marke {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--gruen-blass);
  color: var(--tinte);
  flex: none;
  margin-bottom: 0.3rem;
}
.ikarte__ico .ico,
.marke .ico {
  width: 26px;
  height: 26px;
}
.ikarte--gruen .ikarte__ico {
  background: var(--gruen-blass);
}
.ikarte--gruen::before {
  background: var(--gruen);
}

/* Raster */
.raster {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.raster--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}
@media (min-width: 1900px) {
  .raster--3-fest {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Formulare --- */
.feld {
  position: relative;
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  font: inherit;
  font-size: var(--t-m);
  color: var(--tinte);
  background: #fff;
  border: 1.5px solid var(--stein-400);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  min-height: 56px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.feld textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236f6b62' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
  cursor: pointer;
}
.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--tinte-50);
  opacity: 1;
}
.feld input:hover,
.feld textarea:hover,
.feld select:hover {
  border-color: var(--tinte-30);
}
.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--gelb-dunkel);
  box-shadow: 0 0 0 4px rgb(247 195 7 / 0.22);
  background: #fffdf5;
}
/*
 * Die Klappliste bekommt beim Fokus keinen neuen Hintergrund.
 * Ändert sich die Hintergrundfarbe eines <select>, während die Liste
 * offen steht, klappen manche Browser sie sofort wieder zu. Rahmen
 * und Fokusring genügen als Rückmeldung.
 */
.feld select:focus {
  outline: none;
  border-color: var(--gelb-dunkel);
  box-shadow: 0 0 0 4px rgb(247 195 7 / 0.22);
}
.feld--fehler input,
.feld--fehler textarea,
.feld--fehler select {
  border-color: #c0392b;
  background: #fdf4f3;
}
.feld__hinweis {
  display: block;
  font-size: var(--t-xs);
  color: #a5342a;
  margin-top: 0.4rem;
}
/* Pflichtfeld-Punkt statt Sternchen im Text – die Beschriftung
   steckt ja im Platzhalter. */
.feld--pflicht::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 1.1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gelb);
  pointer-events: none;
  transition: opacity 0.2s;
}
/* Platz für den Punkt freihalten, sonst läuft ein langer Platzhalter
   darunter durch. */
.feld--pflicht input,
.feld--pflicht textarea {
  padding-right: 2.1rem;
}
.feld--pflicht:focus-within::after,
.feld--gefuellt::after {
  opacity: 0;
}
.feld--select::after {
  display: none;
}

.formular {
  display: grid;
  gap: 0.9rem;
}
.formular__paar {
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 640px) {
  .formular__paar {
    grid-template-columns: 1fr 1fr;
  }
}
.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.formular__recht {
  font-size: var(--t-xs);
  color: var(--tinte-50);
  line-height: 1.5;
  max-width: 30rem;
}
.formular__recht a {
  color: var(--tinte);
}

/* Zustimmung
   ------------------------------------------------------------------
   Die Kästchen sind selbst gezeichnet, nicht die des Browsers.
   Mit `accent-color` auf einem vergrößerten Systemkästchen fiel das
   Häkchen je nach Browser und Zoomstufe unterschiedlich groß aus –
   und im angehakten Zustand war kaum zu erkennen, ob es gesetzt ist.
   Hier ist der Haken ein eigenes Zeichen: 22 Pixel, grüner Grund,
   weißes Häkchen. Das eigentliche Eingabefeld bleibt vorhanden und
   bedienbar, es liegt nur unsichtbar darüber – Tastatur und
   Vorleseprogramme arbeiten damit weiter wie gewohnt.
   ------------------------------------------------------------------ */
.zustimmung {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--tinte-70);
  cursor: pointer;
  position: relative;
}
.zustimmung input {
  /* Nicht ausblenden – sonst verliert es den Fokus für die Tastatur. */
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.zustimmung__kaestchen {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--stein-400);
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background-color 0.18s, border-color 0.18s;
}
/* Das Häkchen: ein SVG, das erst beim Anhaken erscheint. */
.zustimmung__kaestchen::after {
  content: "";
  width: 13px;
  height: 13px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.18s var(--kurve);
}
.zustimmung:hover .zustimmung__kaestchen {
  border-color: var(--gruen-text);
}
.zustimmung input:checked + .zustimmung__kaestchen {
  background: var(--gruen-text);
  border-color: var(--gruen-text);
}
.zustimmung input:checked + .zustimmung__kaestchen::after {
  transform: scale(1);
}
.zustimmung input:focus-visible + .zustimmung__kaestchen {
  outline: 3px solid var(--gelb-dunkel);
  outline-offset: 2px;
}
.feld--fehler .zustimmung__kaestchen {
  border-color: #c0392b;
}

/* ==================================================================
   Contact Form 7

   Das Formular wird von CF7 gebaut, damit der Betrieb Felder selbst
   ändern kann. CF7 bringt dabei eigenes Markup mit, das sich nicht
   abschalten lässt: Jedes Feld steckt zusätzlich in einem
   <span class="wpcf7-form-control-wrap">, der Absendeknopf ist ein
   <input type="submit"> statt eines <button>, und die Rückmeldung
   erscheint in einem eigenen Kasten am Ende.

   Hier wird das eingefangen, damit die Seite aussieht wie vorher.
   Das CF7-Stylesheet selbst ist abgemeldet (siehe formular-cf7.php) –
   es bringt Farben mit, die mit dem Theme streiten.
   ================================================================== */

/* Der zusätzliche Wrapper darf die Feldbreite nicht antasten. */
.wpcf7-form-control-wrap {
  display: block;
}

/* CF7 versteckt seine eigenen Felder in einem fieldset. Ohne das hier
   setzt der Browser einen Rahmen und Innenabstand darum. */
.wpcf7-form .hidden-fields-container {
  display: contents;
  border: 0;
  margin: 0;
  padding: 0;
}

/* --- Fehlerhafte Felder ------------------------------------------
   Das Theme markiert Fehler über .feld--fehler am Container. CF7
   setzt stattdessen .wpcf7-not-valid direkt auf das Eingabefeld –
   beides soll gleich aussehen. */
.feld input.wpcf7-not-valid,
.feld textarea.wpcf7-not-valid,
.feld select.wpcf7-not-valid {
  border-color: #c0392b;
  background: #fdf4f3;
}
.wpcf7-not-valid-tip {
  display: block;
  font-size: var(--t-xs);
  color: #a5342a;
  margin-top: 0.4rem;
}

/* --- Der Pflichtfeld-Punkt ---------------------------------------
   Früher setzte PHP die Klasse .feld--gefuellt, sobald etwas im Feld
   stand. Das entfällt mit CF7 – die Prüfung übernimmt jetzt der
   Browser selbst: `:not(:placeholder-shown)` trifft genau dann, wenn
   der Platzhalter verschwunden ist, also etwas eingetippt wurde. */
.feld--pflicht:has(input:not(:placeholder-shown))::after,
.feld--pflicht:has(textarea:not(:placeholder-shown))::after {
  opacity: 0;
}

/* --- Zustimmung ---------------------------------------------------
   CF7 baut die Zustimmung als verschachtelte Spans mit einem echten
   Kästchen des Browsers. Das eigene Kästchen aus .zustimmung lässt
   sich hier nicht einhängen, weil kein Platz für ein zusätzliches
   Element ist. Stattdessen wird das Kästchen des Browsers selbst
   gezeichnet – dasselbe Bild, nur über appearance statt über ein
   Nachbarelement. */
.feld--zustimmung .wpcf7-list-item {
  display: block;
  margin: 0;
}
.feld--zustimmung label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--tinte-70);
  cursor: pointer;
}
.feld--zustimmung input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  border: 2px solid var(--stein-400);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.18s, border-color 0.18s;
}
.feld--zustimmung label:hover input[type="checkbox"] {
  border-color: var(--gruen-text);
}
.feld--zustimmung input[type="checkbox"]:checked {
  background-color: var(--gruen-text);
  border-color: var(--gruen-text);
  /* Das Häkchen als Maske – dieselbe Zeichnung wie überall sonst. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.feld--zustimmung input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--gelb-dunkel);
  outline-offset: 2px;
}
.feld--zustimmung input.wpcf7-not-valid {
  border-color: #c0392b;
  background-color: #fdf4f3;
}
.feld--zustimmung a {
  color: var(--tinte);
}

/* --- Der Absendeknopf --------------------------------------------
   CF7 gibt ein <input type="submit"> aus. Farbe, Größe und Rundung
   kommen aus den .btn-Klassen, die CF7 durchreicht.

   Das Briefsymbol tragen die übrigen Knöpfe als eigenes <svg> im
   Knopf – in ein <input> lässt sich kein Kindelement setzen. Es steht
   hier deshalb als Hintergrundbild links im Knopf, mit entsprechend
   mehr Innenabstand davor. Das Ergebnis ist dasselbe; nur der Weg
   dorthin ist ein anderer. */
.wpcf7-form input.wpcf7-submit {
  width: auto;
  min-height: 52px;
  font: inherit;
  font-size: var(--t-s);
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-left: 3.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1b19' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 3.5V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.6rem center;
  background-size: 1.15em 1.15em;
}

/* Der Ladepunkt neben dem Knopf, während gesendet wird. */
.wpcf7-spinner {
  margin: 0 0 0 0.6rem;
  background-color: var(--gelb-dunkel);
}

/* --- Die Rückmeldung ---------------------------------------------
   CF7 hängt sie ans Ende des Formulars. Sie bekommt dasselbe Bild wie
   die übrigen Meldungen der Seite: grüner Kasten bei Erfolg, roter
   bei einem Fehler. */
.wpcf7-response-output {
  border: 0 !important;
  border-radius: var(--radius);
  padding: 1rem 1.2rem !important;
  margin: 0.4rem 0 0 !important;
  font-size: var(--t-s);
  line-height: 1.55;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: var(--gruen-blass);
  color: var(--gruen-tief);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  background: var(--gelb-blass);
  color: #6a4e00;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: #fdf4f3;
  color: #8c2b20;
}

/* Honigtopf – fuer Menschen unsichtbar, fuer einfache Bots ein Koeder */
.honig {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Rueckmeldung */
.meldung {
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: var(--t-s);
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  line-height: 1.55;
}
.meldung .ico {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}
.meldung--gut {
  background: var(--gruen-blass);
  color: #33471a;
  border: 1px solid #cfe09b;
}
.meldung--schlecht {
  background: #fdf4f3;
  color: #8c2b20;
  border: 1px solid #f0cfc9;
}

/* Pruefung: unsichtbar, meldet sich nur wenn sie rechnet */
.pruefung {
  font-size: var(--t-xs);
  color: var(--tinte-30);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.2em;
}
.pruefung__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stein-400);
  flex: none;
  transition: background-color 0.3s;
}
.pruefung[data-stand="laeuft"] .pruefung__punkt {
  background: var(--gelb);
  animation: pulsieren 1s infinite;
}
.pruefung[data-stand="fertig"] .pruefung__punkt {
  background: var(--gruen);
}
@keyframes pulsieren {
  50% {
    opacity: 0.3;
  }
}

/* ------------------------------------------------------------------
   6 · Kopf & Fuss
   ------------------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--kopf-grund);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.kopf[data-gescrollt="1"] {
  border-bottom-color: rgb(0 0 0 / 0.12);
  box-shadow: 0 2px 22px rgb(28 27 25 / 0.16);
}

/* Infozeile ueber dem Kopf */
.infozeile {
  background: var(--gruen-tief);
  color: #d5dcc6;
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
}
.infozeile__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  flex-wrap: wrap;
}
.infozeile a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.infozeile a:hover {
  color: var(--gelb);
}
.infozeile .status__punkt {
  background: var(--gruen-hell);
}
.infozeile .ico {
  width: 15px;
  height: 15px;
  color: var(--gelb);
}
.infozeile__links,
.infozeile__rechts {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
@media (max-width: 899px) {
  .infozeile {
    display: none;
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.status__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinte-30);
  flex: none;
}
.status[data-offen="1"] .status__punkt {
  background: var(--gruen);
  box-shadow: 0 0 0 0 rgb(157 193 51 / 0.6);
  animation: puls 2.4s infinite;
}
@keyframes puls {
  70% {
    box-shadow: 0 0 0 7px rgb(157 193 51 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(157 193 51 / 0);
  }
}

.kopf__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--kopf-hoehe);
}

/* Die Wortmarke trägt currentColor – im Kopf grün, im Fuß gelb.
   Für Logos gilt die Kontrastanforderung nicht (sie sind vom
   WCAG-Textkriterium ausgenommen); bei dieser Größe und Strichstärke
   steht die Marke auch bei 2,6:1 klar auf dem Weiß. */
.logo {
  display: block;
  flex: none;
  color: var(--gelb);
  line-height: 0;
  text-decoration: none;
  transition: color var(--zeit);
}
.logo svg {
  width: clamp(148px, 20vw, 210px);
  height: auto;
}
.logo:hover {
  color: #fff;
}
.fuss .logo {
  color: var(--gelb);
}
.fuss .logo:hover {
  color: var(--gelb);
}
.schublade__kopf .logo {
  color: var(--gelb);
}
/* Im Fuß trägt die Wortmarke die Breite des Absatzes darunter – beide
   sitzen in .fuss__marke und laufen damit auf dieselbe Kante aus.
   Vorher stand hier eine feste Breite; das Logo blieb schmaler als der
   Text und die Spalte wirkte oben angeschnitten. */
.fuss__marke .logo {
  width: 100%;
}
.fuss .logo svg {
  width: 100%;
  height: auto;
}

/* Navigation */
.nav {
  display: none;
}
@media (min-width: 1000px) {
  .nav {
    display: block;
    margin-left: auto;
  }
  .nav ul {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav li {
    position: relative;
  }
  /* Die Menüpunkte tragen die Hausfarbe – in der abgedunkelten
     Fassung, weil das helle Grün auf Weiß nur 2,6:1 erreicht und
     damit für Schrift in dieser Größe nicht ausreicht. Der Unterstrich
     der aktiven Seite darf die volle Markenfarbe zeigen. */
  /* Weiß auf der grünen Fläche. Etwas mehr Gewicht als üblich,
     weil der Kontrast dieser Farbkombination knapp ist – jedes
     Zehntel hilft der Lesbarkeit. */
  /* Angehoben von ursprünglich 0,92rem auf Wunsch des Betriebs. Der
     seitliche Abstand geht im Gegenzug etwas zurück, damit die
     Menüleiste bei 1000 Pixel Fensterbreite nicht mit dem Knopf
     rechts kollidiert. */
  .nav a {
    display: block;
    padding: 0.6rem 0.68rem;
    font-size: 1.14rem;
    font-weight: 650;
    letter-spacing: 0.005em;
    text-decoration: none;
    border-radius: var(--radius-s);
    color: #fff;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
  }
  .nav a:hover {
    color: #fff;
    background: rgb(0 0 0 / 0.14);
  }
  /* Die aktive Seite in Gelb. Der kräftige Balken darunter trägt die
     Unterscheidung mit – Farbe allein wäre hier zu schwach, und für
     farbenblinde Besucher ohnehin kein Merkmal. */
  .nav .current-menu-item > a,
  .nav .current-page-ancestor > a {
    color: var(--gelb);
  }
  .nav .current-menu-item > a::after,
  .nav .current-page-ancestor > a::after {
    content: "";
    position: absolute;
    left: 0.68rem;
    right: 0.68rem;
    bottom: 0.1rem;
    height: 3px;
    background: var(--gelb);
    border-radius: 2px;
  }

  /* Untermenue */
  .nav .sub-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 16rem;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-l);
    padding: 0.4rem;
    display: block;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav .sub-menu a {
    padding: 0.6rem 0.8rem;
    color: var(--tinte-70);
    font-weight: 550;
  }
  .nav .sub-menu a:hover {
    color: var(--tinte);
    background: var(--gruen-blass);
  }
  .nav .sub-menu .current-menu-item > a {
    color: var(--gruen-text);
  }
  .nav .sub-menu a::after {
    display: none;
  }
}

.kopf__tat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}
/* ------------------------------------------------------------------
   Der Knopf "Angebot anfordern" erscheint erst ab 1220 Pixeln.

   Darunter reicht der Platz nicht: Logo, sechs Menüpunkte und der
   Knopf ergeben zusammen 1112 Pixel, die Hülle gibt bei 1000 Pixeln
   Fensterbreite aber nur 910 her. Vorher stand die Schwelle bei 1000 –
   der Knopf schob sich dort aus dem Kopf heraus und die ganze Seite
   ließ sich seitwärts schieben.

   Die Schwelle liegt bewusst nicht knapp über dem Bedarf: Bei 1260
   bleiben rund 50 Pixel Luft. Sonst stünde eine Änderung an der
   Schriftgröße oder ein siebenter Menüpunkt sofort wieder im Kopf.

   Die Navigation hat Vorrang vor dem Knopf: Der Weg zum Kontakt steht
   im Menü, und am Handy trägt ihn zusätzlich der Balken unten.
   ------------------------------------------------------------------ */
@media (max-width: 1259px) {
  .kopf__tat .btn--primaer {
    display: none;
  }
}
@media (max-width: 599px) {
  .kopf__tat .btn {
    padding: 0.7rem 1rem;
    min-height: 46px;
  }
}

/* Menueknopf */
.menuknopf {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgb(255 255 255 / 0.55);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: background-color 0.2s;
}
.menuknopf:hover {
  background: rgb(255 255 255 / 0.24);
}
.menuknopf .ico {
  width: 24px;
  height: 24px;
}
@media (min-width: 1000px) {
  .menuknopf {
    display: none;
  }
}

/* Schublade */
.schublade {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.schublade[data-offen="1"] {
  visibility: visible;
  pointer-events: auto;
}
.schublade__schleier {
  position: absolute;
  inset: 0;
  background: rgb(28 27 25 / 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.schublade[data-offen="1"] .schublade__schleier {
  opacity: 1;
}
.schublade__blatt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 25rem);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.36s var(--kurve);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.schublade[data-offen="1"] .schublade__blatt {
  transform: none;
}
.schublade__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--rand);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.schublade__kopf .logo svg {
  width: 150px;
}
.schublade__zu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  flex: none;
}
.schublade nav ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem var(--rand) 1rem;
}
.schublade nav li {
  border-bottom: 1px solid var(--stein-200);
}
.schublade nav a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}
.schublade nav .sub-menu {
  padding: 0 0 0.6rem 0.9rem;
  border-left: 2px solid var(--gelb);
  margin-bottom: 0.6rem;
}
.schublade nav .sub-menu li {
  border: 0;
}
.schublade nav .sub-menu a {
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 500;
  padding: 0.5rem 0;
  color: var(--gedaempft);
}
.schublade__fuss {
  margin-top: auto;
  padding: 1.2rem var(--rand) 1.6rem;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.6rem;
  background: var(--stein-100);
}

/* --- Fuss --- */
.fuss {
  /* Dunkelgrün statt Anthrazit – dieselbe Hausfarbe, so weit
     abgedunkelt, dass weiße Schrift darauf 13,7:1 erreicht. */
  background: var(--gruen-tief);
  color: #cfd3c2;
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  position: relative;

  /* ------------------------------------------------------------------
     Der Fuß hat auf Wunsch des Betriebs eine eigene, größere Skala –
     er liegt eine Stufe über dem Rest der Seite statt darunter.

     Das ist ungewöhnlich: Fußzeilen werden üblicherweise kleiner
     gesetzt als der Inhalt, weil dort das Kleingedruckte steht. Hier
     steht aber das, was jemand tatsächlich sucht, wenn er nach unten
     scrollt – Adresse, Telefonnummer, Öffnungszeiten. Genau das soll
     lesbar sein, ohne dass jemand das Gerät näher ans Gesicht hält.

     Die drei Werte gelten für alles im Fuß; eine Änderung hier reicht.
     ------------------------------------------------------------------ */
  --fuss-t: 1.1rem;      /* Adresse, Zeiten, Menüpunkte */
  --fuss-klein: 1rem;    /* Ortsliste, Zeile ganz unten */
  --fuss-titel: 1.02rem; /* Spaltenüberschriften in Versalien */
}
.fuss a {
  color: #e8e5df;
  text-decoration: none;
}
.fuss a:hover {
  color: var(--gelb);
}
/* Die Spaltenüberschriften stehen in Versalien und weit gesperrt –
   in dieser Auszeichnung liest sich Kleines besonders mühsam. */
.fuss h3 {
  color: #fff;
  font-size: var(--fuss-titel);
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
/* Die Spalten brauchen mit der größeren Schrift etwas mehr Grundbreite,
   sonst bricht in der Adressspalte jede zweite Zeile um. */
.fuss__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.fuss__marke {
  grid-column: span 1;
  max-width: 25rem;
}
/* Die Spalten sind nicht gleich breit verteilt, sondern nach dem, was
   darin steht: "Grabsteine & Grabanlagen" braucht mehr Platz als
   "Über uns". Mit der größeren Schrift ist das Verhältnis
   nachgezogen – sonst bräche in der Leistungsspalte jeder zweite
   Eintrag um, während daneben die halbe Spalte leer bliebe. */
@media (min-width: 900px) {
  .fuss__raster {
    grid-template-columns: 1.3fr 1.25fr 0.9fr 1.4fr;
  }
}
.fuss__marke p {
  font-size: var(--fuss-t);
  color: #fff;
  margin-top: 1.1rem;
}
/* Etwas mehr Luft zwischen den Menüpunkten: Größere Schrift auf
   gleichem Abstand rückt die Zeilen optisch zusammen. */
.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  font-size: var(--fuss-t);
}
.fuss__zeile {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--fuss-t);
}
.fuss__zeile .ico {
  width: 19px;
  height: 19px;
  color: var(--gelb);
  flex: none;
  margin-top: 4px;
}
/* --- Auszeichnungen im Fuß --- */
.siegel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.siegel__text {
  font-size: var(--fuss-titel);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.siegel__reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.siegel__bild {
  height: auto;
  width: auto;
  /* Das Meisterzeichen ist dunkel gezeichnet und ginge auf dem
     grünen Grund unter – ein heller Kasten dahinter macht es sichtbar
     und lässt es zugleich wie ein aufgeklebtes Siegel wirken. */
  transition: transform var(--zeit) var(--kurve);
}
.siegel__bild--meister {
  max-height: 62px;
  background: #fff;
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
}
.siegel__bild--abc {
  max-height: 78px;
}
.siegel__bild:hover {
  transform: translateY(-2px);
}
@media (max-width: 599px) {
  .siegel {
    justify-content: center;
    text-align: center;
  }
  .siegel__bild--meister {
    max-height: 52px;
  }
  .siegel__bild--abc {
    max-height: 64px;
  }
}

.fuss__orte {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: 1.6rem;
  font-size: var(--fuss-klein);
  color: #fff;
  line-height: 1.75;
}
.fuss__orte strong {
  color: #fff;
  font-weight: 650;
}
.fuss__unten {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fuss-klein);
  color: #8b867d;
}
.fuss__unten ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: var(--fuss-klein);
}
/* Auch die Zeile mit dem Urheberrechtsvermerk steht in Weiß. */
.fuss__unten,
.fuss__unten > span,
.fuss__unten a,
.fuss__unten li {
  color: #fff;
}

/* ------------------------------------------------------------------
   7 · Abschnitte
   ------------------------------------------------------------------ */

/* --- Brotkrume --- */
.krume {
  font-size: var(--t-xs);
  color: var(--tinte-50);
  padding-top: 1.4rem;
}
.krume ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.krume a {
  text-decoration: none;
}
.krume a:hover {
  color: var(--tinte);
}
.krume li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--stein-400);
}

/* --- Seitenkopf --- */
.seitenkopf {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
  background: var(--stein-100);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf h1 {
  margin-bottom: 0.4em;
}
.seitenkopf p {
  font-size: var(--t-l);
  max-width: 44rem;
}
.seitenkopf--mitte {
  text-align: center;
}
.seitenkopf--mitte .dach {
  justify-content: center;
}
.seitenkopf--mitte p {
  margin-inline: auto;
}
.seitenkopf--mitte .krume ol {
  justify-content: center;
}

/* --- Leistungsraster --- */
/* Eigenes Raster: Bei sieben Kacheln und 17rem Mindestbreite kämen
   auf einem breiten Schirm fünf Spalten heraus – dann ist jede
   Kachel so schmal, dass Titel und Text übereinanderfallen. */
.raster--leistungen {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
@media (min-width: 1500px) {
  .raster--leistungen {
    grid-template-columns: repeat(4, 1fr);
  }
}

.leistung {
  display: block;
  text-decoration: none;
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--gruen-tief);
  aspect-ratio: 4 / 3.3;
  min-height: 15rem;
  isolation: isolate;
}
.leistung img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 0.8s var(--kurve), opacity 0.4s;
  z-index: -2;
}
/* Der Verlauf muss auch unter einem hellen Motiv tragen – die
   Musterplatte auf der Sanierungskachel ist nahezu weiss. */
.leistung::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(18 17 15 / 0.96) 0%,
    rgb(18 17 15 / 0.86) 32%,
    rgb(18 17 15 / 0.45) 62%,
    rgb(18 17 15 / 0.18) 100%
  );
  z-index: -1;
  transition: opacity 0.4s;
}
.leistung__inhalt {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.2rem, 2.5vw, 1.9rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.leistung__inhalt h3 {
  color: #fff;
  margin: 0;
  font-size: var(--h4);
}
.leistung__inhalt p {
  color: #ddd8ce;
  font-size: var(--t-s);
  /* Enger als im Fließtext (1,68): Auf der Karte stehen zwei bis fünf
     Zeilen in einem festen Rahmen – da zählt jede Zeilenhöhe. */
  line-height: 1.5;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--kurve), opacity 0.35s;
}
.leistung__ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gelb);
  color: var(--tinte);
  display: grid;
  place-items: center;
  margin-bottom: 0.2rem;
}
.leistung__ico .ico {
  width: 21px;
  height: 21px;
}
.leistung:hover img,
.leistung:focus-visible img {
  transform: scale(1.06);
  opacity: 0.7;
}
/* ------------------------------------------------------------------
   Wie weit der Text aufklappt.

   Hier standen 7rem – das reichte, solange die Grundschrift kleiner
   war. Seit der Anhebung brauchen die längsten Texte bis zu 9rem, und
   die letzte Zeile wurde abgeschnitten. Aufgefallen ist es nicht,
   weil es nur beim Darüberfahren sichtbar wird und nur auf den
   Karten mit dem längsten Text.

   11rem liegt bewusst über dem Bedarf: Der Wert begrenzt nur, er
   streckt nichts. Ein knapp bemessener Wert würde beim nächsten
   längeren Text wieder abschneiden.
   ------------------------------------------------------------------ */
.leistung:hover p,
.leistung:focus-visible p {
  max-height: 11rem;
  opacity: 1;
}
/* Auf Zeigegeraeten ohne Hover den Text immer zeigen */
@media (hover: none) {
  .leistung__inhalt p {
    max-height: 7rem;
    opacity: 1;
  }
}

/* --- Bild & Text --- */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .duo {
    grid-template-columns: 1fr 1fr;
  }
  .duo--breit-text {
    grid-template-columns: 0.85fr 1fr;
  }
  .duo--gedreht .duo__bild {
    order: 2;
  }
}
.duo__bild {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--stein-200);
  aspect-ratio: 4 / 3;
  /* Nicht auf die Höhe der Textspalte strecken – sonst wächst der
     Kasten über das Seitenverhältnis hinaus und unter dem Bild bleibt
     eine leere Fläche stehen. */
  align-self: start;
}
/*
 * Das Bild liegt absolut im Kasten und füllt ihn immer ganz aus.
 *
 * Mit width/height in Prozent allein reichte es nicht: Solange ein
 * Bild noch nicht geladen war (lazy loading), zog die globale Regel
 * `img { height: auto }` und der Kasten stand zur Hälfte grau da.
 * Absolut positioniert kann das nicht passieren – der Rahmen gibt die
 * Maße vor, nicht das Bild.
 */
.duo__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.duo__bild .ws-kein-bild {
  position: absolute;
  inset: 0;
}
/* Hochformat. 6:7 statt 4:5, weil die Aufnahmen des Betriebs
   ungefähr in diesem Verhältnis stehen – bei 4:5 wäre links und
   rechts zu viel weggefallen, beim Tiergrabstein etwa die Hälfte der
   Inschrift. */
.duo__bild--hoch {
  aspect-ratio: 6 / 7;
}
/* Gelbe Ecke als ruhiger Akzent */
.duo__bild::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(60px, 12%, 110px);
  height: clamp(60px, 12%, 110px);
  background: var(--gelb);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.duo__bild--ohne-ecke::after {
  display: none;
}

.merkmale {
  display: grid;
  gap: 0.85rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.merkmale li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t-s);
  color: var(--gedaempft);
}
.merkmale .ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--gruen-text);
  margin-top: 2px;
  stroke-width: 2.2;
}
.merkmale strong {
  color: var(--text);
  font-weight: 600;
}

/* --- Zahlen --- */
.zahlen {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 760px) {
  .zahlen {
    grid-template-columns: repeat(4, 1fr);
  }
}
.zahl__wert {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  display: block;
}
/* Die Zahlen im Markengelb – auf dem dunklen Grün mit 4,5:1 klar
   lesbar, eine Kontur wäre hier nur Schmutz. */
.abschnitt--dunkel .zahl__wert {
  color: var(--gelb);
}
.zahl__text {
  font-size: var(--t-s);
  color: var(--gedaempft);
  margin-top: 0.6rem;
  display: block;
  line-height: 1.4;
}
/* Auf dunklem Grund muss die Beschriftung mitziehen – sonst steht
   dort Dunkelgrau auf Schwarz. */
.abschnitt--dunkel .zahl__text {
  color: #cfdcc9;
}

/* --- Galerie ---
   ------------------------------------------------------------------
   Masonry über CSS-Spalten.

   Die Bilder des Betriebs haben sehr unterschiedliche Formate – vom
   hochkant freigestellten Grabstein bis zur breiten Werkstattaufnahme.
   Ein Raster mit festem Kachelformat müsste jedes zweite Motiv
   anschneiden; bei einem Grabstein wäre dann die Hälfte weg.

   Mit `columns` behält jedes Bild sein Seitenverhältnis vollständig,
   und zwar bei jeder Fensterbreite. Ein Grid mit berechneten Spannen
   wurde zuerst versucht und wieder verworfen: Dort zählt bei `gap`
   jede Rasterzeile den Abstand mit, die Höhen stimmten deshalb nur
   bei genau einer Fensterbreite.

   Der Preis ist die Leserichtung – die Bilder laufen spaltenweise
   statt zeilenweise. Bei einer Galerie fällt das nicht ins Gewicht.
   ------------------------------------------------------------------ */
/* Der Abstand zwischen den Kacheln steht an zwei Stellen: als
   column-gap zwischen den Spalten und als margin unter jeder Kachel.
   Beide müssen denselben Wert tragen, sonst sitzt das Raster schief.
   Deshalb einmal als Variable. */
.galerie {
  --galerie-luft: clamp(0.9rem, 1.9vw, 1.7rem);
  columns: 2;
  column-gap: var(--galerie-luft);
}
@media (min-width: 700px) {
  .galerie {
    columns: 3;
  }
}
@media (min-width: 1100px) {
  .galerie {
    columns: 4;
  }
}
@media (min-width: 1800px) {
  .galerie {
    columns: 5;
  }
}

.galerie__stueck {
  break-inside: avoid;
  /* Safari braucht beides, sonst reisst es Kacheln auseinander. */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  position: relative;
  display: block;
  margin: 0 0 var(--galerie-luft);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stein-200);
  isolation: isolate;
}
.galerie__stueck img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s var(--kurve);
}

/* ------------------------------------------------------------------
   Die ganze Kachel ist ein Knopf und öffnet die Großansicht.

   Beschriftungen liegen hier nicht mehr über dem Bild – der Betrieb
   wollte die Kacheln ohne Text. Der beschreibende Satz steht weiterhin
   im alt-Attribut: für die Bildersuche und für alle, die die Seite
   vorgelesen bekommen.

   An seiner Stelle zeigt eine Lupe, dass sich hier etwas öffnet. Ohne
   ein solches Zeichen sieht ein Bilderraster wie reine Dekoration aus,
   und niemand kommt auf die Idee zu klicken.
   ------------------------------------------------------------------ */
.galerie__knopf {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.galerie__lupe {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgb(16 15 13 / 0.62);
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.28s var(--kurve), transform 0.28s var(--kurve);
  pointer-events: none;
}
.galerie__lupe .ico {
  width: 21px;
  height: 21px;
}
.galerie__stueck:hover img,
.galerie__stueck:focus-within img {
  transform: scale(1.05);
}
.galerie__stueck:hover .galerie__lupe,
.galerie__stueck:focus-within .galerie__lupe {
  opacity: 1;
  transform: none;
}
/* Auf Geräten ohne Mauszeiger gibt es kein Hover – dort steht die
   Lupe dauerhaft, sonst bliebe die Kachel stumm. */
@media (hover: none) {
  .galerie__lupe {
    opacity: 1;
    transform: none;
    width: 36px;
    height: 36px;
  }
  .galerie__lupe .ico {
    width: 18px;
    height: 18px;
  }
}
.galerie__knopf:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: -3px;
}

/* Die Kacheln ziehen beim Hereinscrollen versetzt auf, damit eine
   Welle über die Galerie läuft statt alles gleichzeitig aufzublitzen. */
.reveal .galerie__stueck.auf {
  transform: translateY(20px) scale(0.98);
}
.reveal .galerie__stueck.auf[data-da="1"] {
  transform: none;
  transition: opacity 0.55s var(--kurve), transform 0.55s var(--kurve);
  transition-delay: var(--verzug, 0ms);
}

/* ------------------------------------------------------------------
   Großansicht der Bilder

   Der Rahmen liegt über allem, auch über dem Balken am Handy und dem
   Cookie-Hinweis – sonst ragten sie über das Bild.

   Der Grund ist sehr dunkles Grün statt Schwarz: Es gehört zur
   Hausfarbe und nimmt dem Bild weniger von seiner eigenen Tiefe als
   ein reines Schwarz.
   ------------------------------------------------------------------ */
/* Der dunkle Grund liegt auf dem Rahmen selbst, nicht auf einem
   eigenen Element darunter. Ein zusätzlicher Kasten dafür wäre eine
   Ebene mehr, die sich verschieben oder überdecken lässt – und genau
   das ist beim Bau hier auch passiert. */
.schau {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 2rem);
  background: rgb(9 14 4 / 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--kurve), visibility 0.28s;
}

/* ------------------------------------------------------------------
   Zugeklappt heißt zugeklappt – und zwar dreifach abgesichert.

   Hier steckte ein Fehler, der die ganze Website unbedienbar gemacht
   hat: Das `hidden`-Attribut im Markup wirkt über die Browser-Regel
   `[hidden] { display: none }`. Die verliert aber gegen jede
   Klassenregel mit eigenem `display` – und `.schau` setzt `grid`.
   Der Rahmen lag also unsichtbar (Deckkraft null), aber in voller
   Größe über der Seite und fing jeden Klick ab. Menü, Fußzeile,
   Knöpfe: nichts ging mehr, und der Mauszeiger zeigte die Lupe mit
   Minus, weil die Klickfläche zum Schließen darunter lag.

   Deshalb jetzt: `display: none` solange `hidden` steht,
   `visibility: hidden` als zweite Sperre für Zeiger und Tastatur
   (`opacity: 0` allein hält nämlich weder Klicks noch den Fokus auf),
   und `pointer-events: none`, falls beides einmal umgangen wird.
   ------------------------------------------------------------------ */
.schau[hidden] {
  display: none;
}
.schau:not([data-offen="1"]) {
  pointer-events: none;
}
.schau[data-offen="1"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Klickfläche zum Schließen. Der Zeiger zeigt das auf der ganzen
   Fläche neben dem Bild an, nicht nur auf dem äußeren Rand – am Handy
   ist dieser Rand nur 0,75 rem breit und der Platz links und rechts
   vom Bild gehört bereits zum Blatt. */
.schau__schleier {
  position: absolute;
  inset: 0;
}
.schau,
.schau__blatt,
.schau__schleier {
  cursor: zoom-out;
}
.schau__buehne,
.schau__knopf {
  cursor: default;
}
.schau__knopf {
  cursor: pointer;
}
.schau__blatt {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1500px);
  height: 100%;
  transform: scale(0.97);
  transition: transform 0.32s var(--kurve);
}
.schau[data-offen="1"] .schau__blatt {
  transform: none;
}

/* Die Bühne begrenzt das Bild in beide Richtungen. Ohne die Grenze
   nach unten würde ein hochformatiges Bild über den Bildschirmrand
   hinauswachsen und die Knöpfe mitnehmen. */
.schau__buehne {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: 100%;
}
.schau__bild {
  display: block;
  max-width: 100%;
  /* Platz für den Zähler unten und die Knöpfe oben lassen. */
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px -20px rgb(0 0 0 / 0.7);
  background: rgb(255 255 255 / 0.06);
}

/* Während die große Fassung lädt, dreht sich ein Ring über dem Bild.
   Er sitzt in der Mitte, weil dort ohnehin hingesehen wird. */
.schau__laedt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid rgb(255 255 255 / 0.28);
  border-top-color: var(--gelb);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.schau[data-laedt="1"] .schau__laedt {
  opacity: 1;
  animation: schau-dreht 0.8s linear infinite;
}
@keyframes schau-dreht {
  to {
    transform: rotate(360deg);
  }
}

.schau__knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(9 14 4 / 0.72);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.schau__knopf:hover {
  background: var(--gelb);
  border-color: var(--gelb);
  color: var(--tinte);
}
.schau__knopf:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 3px;
}
.schau__knopf .ico {
  width: 26px;
  height: 26px;
}
.schau__knopf--zu {
  top: 0;
  right: 0;
}
.schau__knopf--zurueck {
  top: 50%;
  left: 0;
  margin-top: -26px;
}
.schau__knopf--weiter {
  top: 50%;
  right: 0;
  margin-top: -26px;
}
.schau__knopf[hidden] {
  display: none;
}

.schau__zaehler {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgb(9 14 4 / 0.72);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}

/* Am Handy wandern die Pfeile nach unten neben den Zähler: An der
   Seite lägen sie mitten auf dem Bild und man träfe sie beim Wischen
   ständig aus Versehen. */
@media (max-width: 699px) {
  .schau__bild {
    max-height: calc(100vh - 10.5rem);
    max-height: calc(100dvh - 10.5rem);
  }
  .schau__knopf {
    width: 46px;
    height: 46px;
  }
  .schau__knopf .ico {
    width: 23px;
    height: 23px;
  }
  .schau__knopf--zurueck,
  .schau__knopf--weiter {
    top: auto;
    bottom: 0;
    margin-top: 0;
  }
  .schau__zaehler {
    bottom: 0.7rem;
  }
}

/* --- Preise --- */
.preise {
  display: grid;
  gap: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
}
.preis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 2rem);
}
.preis + .preis {
  border-top: 1px solid var(--stein-200);
}
.preis__name {
  flex: 1 1 14rem;
}
.preis__name h3 {
  margin: 0 0 0.15rem;
  font-size: var(--h4);
}
.preis__name p {
  margin: 0;
  font-size: var(--t-s);
}
.preis__wert {
  text-align: right;
  flex: none;
}
.preis__wert b {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  display: block;
  white-space: nowrap;
}
.preis__wert span {
  font-size: var(--t-xs);
  color: var(--tinte-50);
}

/* ------------------------------------------------------------------
   Standsicherheitsprüfung

   Bewusst schmal gehalten: ein Kasten, kein eigener Auftritt mit
   Bild. Das Thema ist sachlich, wer danach sucht, will eine Auskunft
   und eine Telefonnummer – keine Überredung.

   Der gelbe Streifen links und das Schild-Symbol setzen den Kasten
   vom Fließtext ab, ohne dass er wie eine Warnung wirkt. Ein roter
   oder ausrufezeichenartiger Auftritt wäre hier falsch: Es geht um
   eine Leistung des Betriebs, nicht um eine Gefahrenmeldung.
   ------------------------------------------------------------------ */
.pruefung-block {
  display: flex;
  gap: clamp(1.1rem, 2.5vw, 2rem);
  align-items: flex-start;
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-hell);
  border-left: 5px solid var(--gelb);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
}
.pruefung-block__marke {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gruen-hell);
  color: var(--gruen-text);
}
.pruefung-block__marke .ico {
  width: 28px;
  height: 28px;
}
.pruefung-block__text {
  min-width: 0;
}
.pruefung-block h2 {
  font-size: var(--h3);
  margin-bottom: 0.6rem;
}
.pruefung-block .knoepfe {
  margin-top: 1.6rem;
}

/* Die vier Punkte stehen zu zweit nebeneinander, sobald Platz ist –
   untereinander würde der Kasten sonst unnötig lang. */
.merkmale--zwei {
  gap: 0.85rem 2rem;
}
@media (min-width: 760px) {
  .merkmale--zwei {
    grid-template-columns: 1fr 1fr;
  }
}

/* Am Handy wandert das Symbol über den Text: nebeneinander bliebe für
   die Überschrift kaum Breite übrig. */
@media (max-width: 599px) {
  .pruefung-block {
    flex-direction: column;
    gap: 1.1rem;
  }
  .pruefung-block__marke {
    width: 48px;
    height: 48px;
  }
  .pruefung-block__marke .ico {
    width: 24px;
    height: 24px;
  }
}

/* --- Ablauf --- */
.ablauf {
  counter-reset: schritt;
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.schritt {
  position: relative;
  padding-top: 3.6rem;
}
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gruen-text);
}
.schritt::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 3.4rem;
  right: -1rem;
  height: 1px;
  background: var(--stein-300);
}
.schritt:last-child::after {
  display: none;
}
@media (max-width: 700px) {
  .schritt::after {
    display: none;
  }
}
.schritt h3 {
  font-size: var(--h4);
  margin-bottom: 0.35rem;
}
.schritt p {
  font-size: var(--t-s);
  margin: 0;
}

/* --- Stimmen --- */
.stimme {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.stimme__ico {
  color: var(--gelb);
}
.stimme__ico .ico {
  width: 32px;
  height: 32px;
  stroke-width: 1.2;
}
.stimme blockquote {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 32, "SOFT" 30;
  font-size: var(--t-l);
  line-height: 1.55;
  color: var(--text);
}
.stimme figcaption {
  font-size: var(--t-s);
  color: var(--tinte-50);
  margin-top: auto;
  padding-top: 0.4rem;
}
.stimme figcaption strong {
  color: var(--text);
  display: block;
  font-weight: 600;
}
.sterne {
  display: flex;
  gap: 2px;
  color: var(--gelb);
}
.sterne .ico {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke-width: 0;
}

/* --- Materialband --- */
.material {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--stein-300);
  isolation: isolate;
}
.material img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 0.8s var(--kurve);
}
/* Marmor und Kunststein sind fast weiss – ohne kräftigen Verlauf
   stünde die Beschriftung unlesbar auf dem Motiv. Der Fuss ist
   deshalb nahezu deckend und läuft erst darüber weich aus. */
.material::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(16 15 13 / 0.97) 0%,
    rgb(16 15 13 / 0.93) 22%,
    rgb(16 15 13 / 0.62) 42%,
    rgb(16 15 13 / 0.18) 66%,
    rgb(16 15 13 / 0.03) 100%
  );
  z-index: -1;
}
.material__inhalt {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  color: #fff;
}
.material__inhalt h3 {
  color: #fff;
  margin: 0 0 0.3rem;
  font-size: var(--h4);
}
.material__inhalt p {
  color: #d8d3c9;
  font-size: var(--t-xs);
  margin: 0;
  line-height: 1.5;
}
.material:hover img {
  transform: scale(1.06);
}

/* --- Laufband --- */
.band {
  overflow: hidden;
  background: var(--gelb);
  color: var(--tinte);
  padding-block: 0.9rem;
  border-block: 1px solid rgb(28 27 25 / 0.12);
  --band-tempo: 42s;
}
.band__spur {
  display: flex;
  width: max-content;
  animation: bandlauf var(--band-tempo) linear infinite;
}
.band__gruppe {
  display: flex;
  align-items: center;
  flex: none;
}
.band__wort {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  font-weight: 600;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.band__wort::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tinte);
  border-radius: 50%;
  flex: none;
  opacity: 0.5;
}
@keyframes bandlauf {
  to {
    transform: translateX(-50%);
  }
}
.band:hover .band__spur {
  animation-play-state: paused;
}

/* --- FAQ --- */
.faq {
  display: grid;
  gap: 0.75rem;
}
.frage {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--zeit), box-shadow var(--zeit);
}
.frage[open] {
  border-color: var(--stein-400);
  box-shadow: var(--schatten-s);
}
.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem clamp(1.1rem, 3vw, 1.6rem);
  font-family: var(--serif);
  font-variation-settings: "opsz" 28;
  font-size: var(--h4);
  font-weight: 600;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.frage summary::-webkit-details-marker {
  display: none;
}
.frage summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--gelb-dunkel);
  transition: transform 0.3s var(--kurve);
}
.frage[open] summary::after {
  transform: rotate(135deg);
}
.frage__text {
  padding: 0 clamp(1.1rem, 3vw, 1.6rem) 1.35rem;
  font-size: var(--t-s);
}
.frage__text p {
  margin-bottom: 0.8em;
}

/* --- Handlungsband am Seitenende --- */
.tatband {
  background: var(--gruen-tief);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tatband__inhalt {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) {
  .tatband__inhalt {
    grid-template-columns: 1.5fr auto;
  }
}
.tatband h2 {
  color: #fff;
  margin-bottom: 0.35em;
}
.tatband p {
  color: #c8d0b6;
  font-size: var(--t-l);
  margin: 0;
  max-width: 38rem;
}
.tatband .knoepfe {
  margin-top: 0;
}
@media (min-width: 900px) {
  .tatband .knoepfe {
    flex-direction: column;
    align-items: stretch;
    min-width: 15rem;
  }
}
/* Die schräge Fläche hinter den Knöpfen.
   Statt einer flachen gelben Fläche liegt dort ein Marmorausschnitt –
   dasselbe Material, über das der Text darüber spricht. Der gelbe
   Verlauf darüber hält den Farbklang der Marke und dämpft das Motiv
   so weit, dass die Knöpfe klar davor stehen. */
.tatband::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -30%;
  width: 42%;
  height: 160%;
  /* Nur ein Hauch Gold an der oberen Kante – ein flächiges gelbes
     Overlay würde den Marmor olivfarben kippen und die Adern
     zuschmieren. Den Rest macht eine warme Abdunklung. */
  background-image: linear-gradient(
      158deg,
      rgb(247 195 7 / 0.2) 0%,
      rgb(38 33 24 / 0.3) 42%,
      rgb(28 27 25 / 0.68) 100%
    ),
    url("../img/marmor-band.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: 0.5;
  transform: skewX(-14deg);
  z-index: -1;
  pointer-events: none;
}
/* Die Kante wird sonst hart abgeschnitten – ein Hauch Weichzeichnung
   am Rand lässt sie in den dunklen Grund laufen. */
.tatband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--gruen-tief) 8%,
    rgb(36 50 9 / 0.75) 26%,
    transparent 55%
  );
}

/* Am Handy stehen Text und Knöpfe untereinander und reichen weiter
   nach rechts – die Fläche rückt deshalb zurück und wird dunkler,
   damit kein Satz auf hellem Marmor endet. */
@media (max-width: 899px) {
  .tatband::after {
    width: 30%;
    right: -10%;
    opacity: 0.34;
  }
  .tatband::before {
    background: linear-gradient(
      to right,
      var(--gruen-tief) 30%,
      rgb(36 50 9 / 0.82) 62%,
      transparent 90%
    );
  }
}

/* --- Kontaktblock --- */
.kontaktblock {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 950px) {
  .kontaktblock {
    grid-template-columns: 1fr 1.1fr;
  }
}
.kontaktkarte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: var(--schatten-s);
}
.abschnitt--stein .kontaktkarte {
  box-shadow: var(--schatten);
}
.kontaktzeile {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding-block: 0.9rem;
  font-size: var(--t-s);
}
.kontaktzeile + .kontaktzeile {
  border-top: 1px solid var(--stein-200);
}
.kontaktzeile .marke {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.kontaktzeile .marke .ico {
  width: 20px;
  height: 20px;
}
.kontaktzeile strong {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-50);
  font-weight: 650;
  margin-bottom: 0.15rem;
}
.kontaktzeile a {
  font-size: var(--t-l);
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}
.kontaktzeile a:hover {
  color: var(--gelb-dunkel);
}

.zeitliste {
  display: grid;
  gap: 0;
  font-size: var(--t-s);
}
.zeitliste div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--stein-200);
}
.zeitliste div:last-child {
  border-bottom: 0;
}
.zeitliste dt {
  color: var(--gedaempft);
  margin: 0;
}
.zeitliste dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.zeitliste div[data-heute="1"] dt,
.zeitliste div[data-heute="1"] dd {
  color: var(--text);
}
.zeitliste div[data-heute="1"] {
  background: var(--gruen-blass);
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  border-radius: var(--radius-s);
  border-bottom-color: transparent;
}

/* --- Urlaubshinweis ---
   Steht bei den Öffnungszeiten. Ohne Eintrag ruhig und grün ("keine
   Urlaube geplant"), mit Eintrag gelb hervorgehoben – dann ist es
   eine Nachricht, die man nicht überlesen soll. */
.urlaub {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: var(--gruen-blass);
  border: 1px solid #dbe8bd;
  font-size: var(--t-s);
  line-height: 1.5;
  color: var(--tinte-70);
}
.urlaub .ico {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--gruen-text);
  stroke-width: 2.2;
}
.urlaub--aktiv {
  background: var(--gelb-blass);
  border-color: #f0dc9a;
  color: var(--text);
  font-weight: 500;
}
.urlaub--aktiv .ico {
  color: var(--gelb-dunkel);
}

/* Dieselbe Zeile in der Fußzeile */
.fuss__urlaub {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.fuss__urlaub .ico {
  color: var(--gelb);
}
.fuss__urlaub.ist-urlaub .ico {
  color: var(--gelb);
}
.fuss__urlaub.ist-urlaub span {
  color: #fff;
}

/* --- Standort (eine Adresse) ---
   Eine einzelne Karte in einer Dreierreihe sähe verloren aus. Der
   Standort bekommt deshalb die volle Breite: Adresse und Zeiten
   nebeneinander, mit dem gelben Eck als Anker. */
.standort {
  display: grid;
  gap: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten);
  position: relative;
}
@media (min-width: 800px) {
  .standort {
    grid-template-columns: 1.15fr 1fr;
  }
}
.standort__spalte {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Rasterspalten sind von Haus aus mindestens so breit wie ihr
     schmalster unteilbarer Inhalt. Die Knopfreihe darin ist breiter
     als ein 320 Pixel schmales Display – die Karte stand deshalb dort
     20 Pixel über den Rand hinaus. Mit min-width 0 darf die Spalte
     schrumpfen und der Inhalt umbrechen. */
  min-width: 0;
}
.standort__spalte--zeiten {
  background: var(--stein-100);
  border-top: 1px solid var(--linie);
}
@media (min-width: 800px) {
  .standort__spalte--zeiten {
    border-top: 0;
    border-left: 1px solid var(--linie);
  }
}
.standort__spalte h3 {
  margin: 0.4rem 0 0.2rem;
  font-size: var(--h3);
}
.standort__adresse {
  font-size: var(--t-l);
  color: var(--text);
  margin-bottom: 0.4rem;
}
.standort__adresse strong {
  font-weight: 650;
}
.standort .knoepfe {
  margin-top: auto;
  padding-top: 1.2rem;
}
.standort .zeitliste {
  margin-top: 0.3rem;
}
/* Das gelbe Eck, das auch die Bildkacheln tragen – es hält den
   Abschnitt sichtbar an die übrige Gestaltung. */
.standort::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(48px, 7%, 84px);
  height: clamp(48px, 7%, 84px);
  background: var(--gelb);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* --- Karte --- */
.karte-halter {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 340px;
  background: var(--stein-200);
  border: 1px solid var(--linie);
}
.karte-halter .leaflet-container {
  position: absolute;
  inset: 0;
  height: 100%;
  font-family: var(--sans);
  z-index: 1;
}
.karte-sperre {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: var(--stein-200);
  background-image: linear-gradient(
      45deg,
      var(--stein-300) 25%,
      transparent 25%,
      transparent 75%,
      var(--stein-300) 75%
    ),
    linear-gradient(45deg, var(--stein-300) 25%, transparent 25%, transparent 75%, var(--stein-300) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}
.karte-sperre__inhalt {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 26rem;
  box-shadow: var(--schatten);
}
.karte-sperre p {
  font-size: var(--t-s);
  margin-bottom: 1rem;
}

/* --- Platzhalter --- */
/* Auch ohne Bild muss die Beschriftung lesbar bleiben: Der Platzhalter
   gehoert unter den Verlauf, nicht darueber. */
.leistung .ws-kein-bild,
.material .ws-kein-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.ws-kein-bild {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: var(--stein-200);
  background-image: linear-gradient(
    135deg,
    var(--stein-300) 25%,
    transparent 25%,
    transparent 50%,
    var(--stein-300) 50%,
    var(--stein-300) 75%,
    transparent 75%
  );
  background-size: 18px 18px;
  opacity: 0.6;
}

/* ------------------------------------------------------------------
   8 · Hero mit Gravur
   ------------------------------------------------------------------
   Der Schriftzug liegt zweimal uebereinander: einmal als roher Stein
   (kaum sichtbar), einmal als fertige Gravur. Eine Maske faehrt von
   links nach rechts und deckt die Gravur auf – der Meissel laeuft
   mit, Staub fliegt weg. Zum Schluss wird die Schrift vergoldet, so
   wie es im Betrieb auch gemacht wird.
   ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--stein-100);
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3.5rem, 7vw, 6rem);
  isolation: isolate;
}
.hero__grund {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, #fffdf6 0%, transparent 55%),
    radial-gradient(80% 70% at 12% 100%, #efece5 0%, transparent 60%),
    var(--stein-100);
}

/* Die Fahrt über die Steinwand */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Standbild ist auch das Poster – solange das Video noch nicht
     läuft, sieht man dasselbe Motiv, nur unbewegt. */
  background: var(--stein-200) center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.1s var(--kurve);
}
.hero__video[data-laeuft="1"] {
  opacity: 1;
}

/* Der Schleier darüber.
   Oben durchsichtiger, damit der Stein zu sehen ist; nach unten
   dichter, weil dort Überschrift, Text und Knöpfe stehen. Ohne ihn
   stünde dunkler Text auf einem bewegten, fleckigen Grund – das
   liest niemand. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      rgb(250 249 247 / 0.62) 0%,
      rgb(250 249 247 / 0.72) 26%,
      rgb(250 249 247 / 0.9) 52%,
      rgb(250 249 247 / 0.97) 72%,
      var(--stein-100) 100%
    ),
    linear-gradient(to right, rgb(250 249 247 / 0.35) 0%, transparent 45%);
}
/* Solange nur das Standbild steht, darf der Schleier dünner sein. */
.hero__grund:has(.hero__video:not([data-laeuft="1"])) .hero__schleier {
  background: linear-gradient(
    to bottom,
    rgb(250 249 247 / 0.72) 0%,
    rgb(250 249 247 / 0.82) 30%,
    rgb(250 249 247 / 0.94) 58%,
    var(--stein-100) 100%
  );
}

/* Feines Korn über allem – nimmt dem Verlauf das Bandartige. */
.hero__grund::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.024 0.05' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23s)'/%3E%3C/svg%3E");
}

.hero__inhalt {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__inhalt {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* Die Gravurbuehne.
   Drei Ebenen mit demselben Wort liegen genau uebereinander:
     roh   der unbearbeitete Stein, nur als Praegung sichtbar
     nut   die fertige Gravur – wird von links nach rechts aufgedeckt
     gold  die Vergoldung, kommt zum Schluss dazu
   Aufgedeckt wird ueber --schnitt: 100% heisst "noch nichts
   graviert", 0% heisst "fertig". */
.gravur {
  position: relative;
  width: 100%;
  user-select: none;
  margin-block: clamp(0.5rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 3rem);
  --schnitt: 100%;
  --gravur-breite: 100%;
}
.gravur__buehne {
  position: relative;
  display: block;
  width: var(--gravur-breite);
  /* Verhältnis der Wortmarke – hält die Höhe, bevor das SVG geladen
     ist, und verhindert damit ein Springen des Layouts. */
  aspect-ratio: 6.15 / 1;
}

/* Die vier Ebenen liegen deckungsgleich übereinander. */
.gravur__wort {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 0;
}
.gravur__wort svg {
  width: 100%;
  height: 100%;
  display: block;
}
.gravur__wort--nut,
.gravur__wort--gold,
.gravur__wort--glanz {
  clip-path: inset(0 var(--schnitt) 0 0);
}

/* Roher Stein: kaum mehr als eine Prägung im Material */
.gravur__wort--roh {
  color: #e4e0d6;
  filter: drop-shadow(0 1px 0 #fffdf8) drop-shadow(0 -1px 1px rgb(28 27 25 / 0.09));
}

/* Die Gravur: dunkle Nut, darunter der helle Grat, den der Meißel
   aufwirft. Zusammen wirkt es eingeschlagen statt aufgedruckt. */
.gravur__wort--nut {
  color: #24211d;
  filter: drop-shadow(0 2px 0 rgb(255 255 255 / 0.85))
    drop-shadow(0 -1px 2px rgb(0 0 0 / 0.4));
}

/* Die Vergoldung – im Betrieb tatsächlich der letzte Arbeitsschritt.
   Die dunkle Kontur ist kein Zierrat: Blattgold in einer Nut wirft
   einen Schattenrand, und erst der macht die Marke auf hellem Stein
   lesbar. Ohne ihn stünde Gelb auf Weiß mit 1,7:1. */
.gravur__wort--gold {
  color: var(--gelb);
  opacity: 0;
  filter: drop-shadow(0 0 1.5px #2b2721) drop-shadow(0 0 1.5px #2b2721)
    drop-shadow(0 1px 0 rgb(255 255 255 / 0.5));
}

/* Der Lichtreflex auf dem Blattgold.
   Er wandert langsam über die Schrift, sobald die Gravur fertig ist –
   so wie die Sonne über eine frisch vergoldete Inschrift streicht.
   Damit steht der Schriftzug nach der Animation nicht tot da. */
.gravur__wort--glanz {
  color: #fffdf0;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent 38%,
    rgb(0 0 0 / 0.25) 45%,
    #000 50%,
    rgb(0 0 0 / 0.25) 55%,
    transparent 62%
  );
  mask-image: linear-gradient(
    100deg,
    transparent 38%,
    rgb(0 0 0 / 0.25) 45%,
    #000 50%,
    rgb(0 0 0 / 0.25) 55%,
    transparent 62%
  );
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 190% 0;
  mask-position: 190% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.gravur[data-fertig="1"] .gravur__wort--glanz {
  opacity: 0.9;
  animation: glanzlauf 9s cubic-bezier(0.5, 0, 0.5, 1) 1.2s infinite;
}
@keyframes glanzlauf {
  0% {
    -webkit-mask-position: 190% 0;
    mask-position: 190% 0;
  }
  /* Der Reflex läuft in gut zwei Sekunden durch, danach ist Ruhe –
     ein Dauerblinken wäre unerträglich. */
  26%,
  100% {
    -webkit-mask-position: -90% 0;
    mask-position: -90% 0;
  }
}

.gravur__staub {
  position: absolute;
  inset: -10% -4%;
  width: 108%;
  height: 120%;
  pointer-events: none;
  z-index: 3;
}
.gravur__meissel {
  position: absolute;
  bottom: -6%;
  left: 0;
  width: clamp(38px, 5.5vw, 72px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 14px rgb(28 27 25 / 0.35));
}

/* Ohne JavaScript ist die Gravur einfach fertig – nie darf der
   Schriftzug an einer nicht gestarteten Animation haengen bleiben. */
html:not(.js) .gravur {
  --schnitt: 0%;
}
html:not(.js) .gravur__wort--gold {
  opacity: 1;
}

/* Die Metazeile steht über dem bewegten Video. Ein helles Grau geht
   dort unter – sie bekommt deshalb mehr Gewicht und eine feine helle
   Aura, die sie auch über einer dunklen Stelle im Bild hält. */
.hero__zeile {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-70);
  text-shadow: 0 1px 6px rgb(250 249 247 / 0.9), 0 0 14px rgb(250 249 247 / 0.7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin-bottom: 1.4rem;
}
.hero__zeile span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero__zeile .ico {
  width: 15px;
  height: 15px;
  color: var(--gelb-dunkel);
}
.hero__zeile em {
  font-style: normal;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--stein-400);
}

.hero h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  margin-bottom: 0.5em;
}
.hero__text {
  font-size: var(--t-l);
  max-width: 34rem;
}
.hero .knoepfe {
  margin-top: 2rem;
}

.hero__belege {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--stein-300);
}

/* ------------------------------------------------------------------
   Ab der zweispaltigen Fassung stehen die Belege in einem festen
   Raster statt im freien Umbruch.

   Es sind drei: eigene Produktion, Erfahrung, Einzugsgebiet. Der
   vierte ("Fixpreis nach Aufmaß") ist auf Wunsch des Betriebs
   entfallen.

   Drei nebeneinander, nicht zwei plus einer: Bei zwei Spalten stünde
   der dritte Beleg allein in einer zweiten Zeile und sähe aus wie
   vergessen. Das war schon bei vier Belegen der Grund für das feste
   Raster – damals als zwei mal zwei, jetzt als eine Reihe.

   Die Spalten sind auf max-content gesetzt, nicht auf gleiche Breite:
   "Friedhöfe rund um Wiener Neustadt" braucht mehr Platz als
   "Erfahrung". Bei gleich breiten Spalten bräche der lange Beleg auf
   drei Zeilen um, während daneben Platz frei bliebe.
   ------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .hero__belege {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 1.3rem clamp(1.4rem, 2.2vw, 2.4rem);
  }
}
/* Die vier Belege unter dem Einstiegstext. Sie standen in der
   kleinsten Stufe – für die Angaben, die einen Interessenten am
   ehesten überzeugen (eigene Produktion, 37 Jahre, Fixpreis), war das
   zu bescheiden. Eine Stufe größer, das Symbol wächst mit. */
.beleg {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-s);
  color: var(--gedaempft);
  line-height: 1.4;
}
.beleg .ico {
  width: 25px;
  height: 25px;
  color: var(--gelb-dunkel);
  flex: none;
}
.beleg b {
  display: block;
  color: var(--text);
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 2px;
}

/* Hinweis zum Weiterscrollen */
.hero__ab {
  display: none;
}
@media (min-width: 1000px) and (min-height: 720px) {
  .hero__ab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinte-30);
    text-decoration: none;
  }
  .hero__ab .ico {
    width: 18px;
    height: 18px;
    animation: sinken 2.2s var(--kurve) infinite;
  }
}
@keyframes sinken {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   9 · Balken unten (Handy) und Cookie-Hinweis
   ------------------------------------------------------------------ */

.balken {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-top: 1px solid var(--linie);
  box-shadow: 0 -2px 18px rgb(28 27 25 / 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform 0.35s var(--kurve);
}
.balken[data-sichtbar="1"] {
  transform: none;
}
/* Solange der Datenschutzhinweis offen ist, bleibt der Balken unten.
   Zwei fixierte Leisten übereinander verdecken zusammen ein Drittel
   des Bildschirms – und die obere ist dann ohnehin nicht bedienbar. */
.hinweis-offen .balken[data-sichtbar="1"] {
  transform: translateY(110%);
}
.balken--drei {
  grid-template-columns: 1fr 1fr 1fr;
}
.balken a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.6rem 0.4rem 0.7rem;
  min-height: 60px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--tinte-70);
  text-align: center;
  line-height: 1.2;
}
.balken a + a {
  border-left: 1px solid var(--stein-200);
}
.balken .ico {
  width: 21px;
  height: 21px;
}
.balken a:first-child {
  background: var(--gelb);
  color: var(--tinte);
}
.balken a:first-child .ico {
  color: var(--tinte);
}
.balken a:active {
  background: var(--stein-200);
}
.balken a:first-child:active {
  background: var(--gelb-dunkel);
}
@media (min-width: 900px) {
  .balken {
    display: none;
  }
}

/* --- Hinweiskasten über der Seite ---
   Für Betriebsurlaub und Neuigkeiten. Er trägt dieselbe Gestaltung
   wie die übrige Seite: weiße Karte, gelber Akzent, dieselbe
   Typografie. Ein Fremdkörper im Layout würde eher nach Werbung
   aussehen als nach einer Nachricht des Betriebs. */
.kasten {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--rand);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--kurve), visibility 0.32s;
}
.kasten[data-offen="1"] {
  opacity: 1;
  visibility: visible;
}
.kasten__schleier {
  position: absolute;
  inset: 0;
  background: rgb(20 26 8 / 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.kasten__blatt {
  position: relative;
  width: min(100%, 34rem);
  max-height: calc(100dvh - 2 * var(--rand));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: var(--radius-l);
  box-shadow: 0 24px 70px -12px rgb(0 0 0 / 0.45);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.36s var(--kurve);
}
.kasten[data-offen="1"] .kasten__blatt {
  transform: none;
}
/* Der gelbe Streifen oben nimmt den Akzent der Seite auf. */
.kasten__blatt::before {
  content: "";
  display: block;
  height: 5px;
  background: var(--gelb);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.kasten__zu {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--tinte);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  transition: background-color 0.2s, transform 0.2s;
}
.kasten__zu .ico {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
.kasten__zu:hover {
  background: var(--gelb);
  transform: rotate(90deg);
}

/* Das Bild nimmt die volle Breite des Kastens und behält dabei sein
   eigenes Seitenverhältnis – ein fester 16:9-Ausschnitt hätte bei
   hochformatigen Aufnahmen den halben Inhalt abgeschnitten.

   Nach oben ist es begrenzt: Ein sehr hohes Bild würde den Kasten
   sonst über den Bildschirm hinaus wachsen lassen und Überschrift und
   Knöpfe nach unten drücken. Greift die Grenze, wird beschnitten
   statt verzerrt (object-fit). */
.kasten__bild {
  overflow: hidden;
  background: var(--stein-200);
  line-height: 0;
}
.kasten__bild img {
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 599px) {
  .kasten__bild img {
    max-height: 38vh;
  }
}

.kasten__inhalt {
  padding: clamp(1.4rem, 4vw, 2.2rem);
}
.kasten__inhalt h2 {
  font-size: var(--h3);
  margin-bottom: 0.5rem;
}
.kasten__text {
  font-size: var(--t-s);
  line-height: 1.6;
}
.kasten__text p {
  margin-bottom: 0.7em;
}
.kasten__text p:last-child {
  margin-bottom: 0;
}
.kasten__text a {
  color: var(--tinte);
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 2px;
}
.kasten__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.kasten__knoepfe .btn {
  flex: 1 1 auto;
}

@media (prefers-reduced-motion: reduce) {
  .kasten__blatt {
    transform: none;
  }
  .kasten__zu:hover {
    transform: none;
  }
}

/* Im Elementor-Editor bleibt der Kasten weg – er läge sonst über der
   Vorschau und man käme nicht an die Abschnitte darunter. */
.elementor-editor-active .kasten,
body[data-editor="1"] .kasten {
  display: none;
}

/* --- Cookie-Hinweis ---
   Am Rechner ein schlanker Streifen unten, am Handy eine kleine Karte,
   die nur den unteren Rand belegt. In beiden Faellen bleibt die Seite
   sichtbar und bedienbar. */

.hinweis {
  position: fixed;
  z-index: 300;
  background: #fff;
  color: var(--text);
  box-shadow: 0 -4px 30px rgb(28 27 25 / 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, transform 0.35s var(--kurve), visibility 0.35s;
}
.hinweis[data-offen="1"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Rechner: Streifen unten */
@media (min-width: 900px) {
  .hinweis {
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 3px solid var(--gelb);
    transform: translateY(100%);
  }
  .hinweis__inhalt {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: 0.95rem;
  }
  .hinweis__text {
    flex: 1;
  }
  .hinweis__knoepfe {
    flex: none;
  }
}

/* Handy: kleine Karte unten, verdeckt so wenig wie möglich */
@media (max-width: 899px) {
  .hinweis {
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom));
    border-radius: var(--radius-l);
    border: 1px solid var(--linie);
    border-top: 3px solid var(--gelb);
    transform: translateY(20px) scale(0.97);
  }
  .hinweis__inhalt {
    padding: 0.9rem 1rem 1rem;
  }
  .hinweis__text {
    font-size: 0.78rem;
    line-height: 1.45;
  }
  .hinweis__text b {
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
  }
  .hinweis__knoepfe {
    margin-top: 0.75rem;
    gap: 0.4rem;
  }
  .hinweis__knoepfe .btn {
    min-height: 42px;
    padding: 0.5rem 0.7rem;
    font-size: 0.76rem;
  }
  /* Die beiden Entscheidungen nebeneinander, die Feineinstellung
     darunter als schmale Zeile – spart eine ganze Knopfreihe. */
  .hinweis__knoepfe [data-hinweis-mehr] {
    order: 3;
    flex: 1 0 100%;
    min-height: 34px;
    border: 0;
    background: none;
    text-decoration: underline;
    color: var(--tinte-50);
    padding: 0.2rem;
  }
  .hinweis__knoepfe [data-hinweis-mehr]:hover {
    background: none;
    color: var(--tinte);
  }
}

/* Kurzfassung am Handy, ausführlich am Rechner */
.hinweis__kurz {
  display: inline;
}
.hinweis__lang {
  display: none;
}
@media (min-width: 900px) {
  .hinweis__kurz {
    display: none;
  }
  .hinweis__lang {
    display: inline;
  }
}

.hinweis__text {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--gedaempft);
}
.hinweis__text b {
  display: block;
  color: var(--text);
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: 1rem;
  font-weight: 650;
  margin-bottom: 0.2rem;
}
.hinweis__text a {
  color: var(--text);
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 2px;
}
.hinweis__knoepfe {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hinweis__knoepfe .btn {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-size: var(--t-xs);
  flex: 1 1 auto;
}
@media (min-width: 900px) {
  .hinweis__knoepfe .btn {
    flex: none;
  }
}
.hinweis__wahl {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--stein-200);
}
.hinweis__wahl[hidden] {
  display: none;
}
.wahl {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--gedaempft);
}
.wahl {
  position: relative;
}
.wahl input {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.wahl__kaestchen {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--stein-400);
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background-color 0.18s, border-color 0.18s;
}
.wahl__kaestchen::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.18s var(--kurve);
}
.wahl input:checked + .wahl__kaestchen {
  background: var(--gruen-text);
  border-color: var(--gruen-text);
}
.wahl input:checked + .wahl__kaestchen::after {
  transform: scale(1);
}
.wahl input:disabled + .wahl__kaestchen {
  opacity: 0.6;
  background: var(--stein-300);
  border-color: var(--stein-400);
}
.wahl input:disabled:checked + .wahl__kaestchen {
  background: var(--tinte-30);
  border-color: var(--tinte-30);
}
.wahl input:focus-visible + .wahl__kaestchen {
  outline: 3px solid var(--gelb-dunkel);
  outline-offset: 2px;
}
.wahl b {
  color: var(--text);
  display: block;
  font-weight: 650;
  font-size: var(--t-s);
}

/* ------------------------------------------------------------------
   10 · Elementor
   ------------------------------------------------------------------
   Regel: Das Theme greift Elementor nirgends mit !important an. Die
   Abschnitte bringen ihr Aussehen selbst mit, Elementor liefert nur
   den Rahmen. Deshalb kann Speichern im Editor das Design nicht
   verstellen – es gibt keine zwei Stellen, die sich widersprechen.
   ------------------------------------------------------------------ */

.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: none;
}
.elementor-widget-container > .abschnitt:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------------
   Der Texteditor von Elementor

   Auf Impressum, Datenschutz und AGB steht der Text in einem ganz
   normalen Texteditor-Widget – dort lassen sich Schrift, Farbe und
   Abstände im Editor einstellen, ohne dass jemand in den Code sieht.

   Damit das nicht wie ein Fremdkörper aussieht, bekommt das Widget
   hier die Lesebreite und den Rhythmus des übrigen Fließtextes.

   Wichtig ist dabei, WO die Werte stehen: auf dem Widget selbst, nicht
   auf den Absätzen darin. Elementors eigene Typografie-Einstellungen
   greifen ebenfalls am Widget an (.elementor-element-xxxx) und stehen
   im Stylesheet weiter hinten – sie gewinnen damit. Stünde hier
   dagegen eine Regel für `p`, würde sie jede Einstellung des Betriebs
   aushebeln: Eine direkte Regel schlägt einen geerbten Wert immer,
   ganz gleich wie spezifisch der ist.

   Die Lesebreite hängt dagegen am Container (.ws-lesebreite), nicht
   am Widget. Am Widget hatte es nicht gegriffen: Elementor setzt dort
   selbst max-width: 100% und Außenabstand null, und das gewinnt. Der
   Text lief über die volle Fensterbreite – auf 1280 Pixeln standen
   180 Zeichen in einer Zeile, was niemand mehr liest.
   ------------------------------------------------------------------ */
.elementor-widget-text-editor {
  font-size: var(--t-m);
  line-height: 1.75;
  color: var(--gedaempft);
}

/* Lesebreite auf den drei Rechtstextseiten.
   ------------------------------------------------------------------
   Angesetzt wird an der Seite, nicht am Widget und nicht über eine
   CSS-Klasse am Container. Beides war versucht und ging nicht: Am
   Widget setzt Elementor selbst max-width: 100% und gewinnt, und eine
   Klasse aus den Rohdaten gibt Elementor am Container nicht aus.

   Über die Seitenklasse greift die Regel verlässlich – und sie gilt
   nur dort, wo sie gemeint ist. Ein Textblock, den der Betrieb später
   auf einer anderen Seite einsetzt, bleibt davon unberührt und lässt
   sich frei einstellen.

   Getroffen wird der Container über seinen Inhalt (:has), nicht über
   seine Stellung im Baum. Der Grund: Im Editor schiebt Elementor
   einen .elementor-section-wrap dazwischen. Eine Regel mit direktem
   Kindbezug greift dort nicht – die Vorschau im Editor sähe dann
   anders aus als die fertige Seite, und genau das verwirrt beim
   Bearbeiten am meisten.

   Der Seitenkopf braucht dadurch keine Ausnahme: Die Regel trifft nur
   Container, in denen wirklich ein Textblock steht. */
.seite-impressum .elementor-element:has(> .elementor-widget-text-editor),
.seite-datenschutz .elementor-element:has(> .elementor-widget-text-editor),
.seite-agb .elementor-element:has(> .elementor-widget-text-editor) {
  max-width: calc(var(--breite-schmal) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.seite-impressum .elementor-widget-text-editor,
.seite-datenschutz .elementor-widget-text-editor,
.seite-agb .elementor-widget-text-editor {
  padding-block: var(--luft);
}
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3 {
  color: var(--text);
  margin-top: 1.8em;
}
.elementor-widget-text-editor h2:first-child,
.elementor-widget-text-editor h3:first-child {
  margin-top: 0;
}
.elementor-widget-text-editor a {
  color: var(--text);
  text-decoration-color: var(--gelb-dunkel);
  text-underline-offset: 3px;
}
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  padding-left: 1.3em;
}
.elementor-widget-text-editor li {
  margin-bottom: 0.5em;
}

/* Im Editor: Bewegungen ruhen, damit sich Abschnitte anklicken
   lassen und nicht unter dem Mauszeiger wegwandern. */
.elementor-editor-active .band__spur,
body[data-editor="1"] .band__spur {
  animation: none;
}

/* Nichts bleibt im Editor unsichtbar.
   Elementor lädt Abschnitte einzeln nach; die Einblendung beim
   Scrollen erwischt sie nicht mehr, und die Vorschau stünde leer da.
   Das !important ist hier ausnahmsweise richtig: Es überstimmt keine
   Elementor-Einstellung, sondern nur die eigene Animation – und zwar
   auch dann, wenn das Skript gar nicht erst angelaufen ist. */
.elementor-editor-active .auf,
body[data-editor="1"] .auf,
.elementor-editor-active .reveal .auf,
body[data-editor="1"] .reveal .auf {
  opacity: 1 !important;
  transform: none !important;
}
.elementor-editor-active .balken,
.elementor-editor-active .hinweis,
body[data-editor="1"] .balken,
body[data-editor="1"] .hinweis {
  display: none;
}
.elementor-editor-active .gravur__meissel {
  opacity: 0;
}
.elementor-editor-active .gravur__gold {
  opacity: 1;
}

/* Ein Hinweis, wenn ein Abschnitt im Editor leer bliebe */
.ws-editor-hinweis {
  border: 2px dashed var(--stein-400);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--tinte-50);
  font-size: var(--t-s);
  background: var(--stein-100);
}

/* ------------------------------------------------------------------
   11 · Bewegung & Barrierefreiheit
   ------------------------------------------------------------------ */

/* Elemente, die beim Hereinscrollen aufziehen.
   Versteckt wird erst, wenn das Skript den Beobachter wirklich
   aufgesetzt hat (Klasse "reveal"). Fehlt JavaScript, schlaegt es
   fehl oder ist Bewegung abgeschaltet, steht der Inhalt einfach da.
   Ein unsichtbarer Text, weil eine Animation nicht angelaufen ist,
   waere der schlimmste denkbare Fehler auf einer Firmenseite. */
.reveal .auf {
  opacity: 0;
  transform: translateY(18px);
}
.reveal .auf[data-da="1"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--kurve), transform 0.6s var(--kurve);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal .auf,
  .auf {
    opacity: 1;
    transform: none;
  }
  .band__spur {
    animation: none;
  }
  .gravur__gold {
    opacity: 1;
  }
  .gravur__meissel {
    display: none;
  }
}

@media print {
  .kopf,
  .fuss,
  .balken,
  .hinweis,
  .schublade,
  .tatband,
  .gravur__meissel,
  .gravur__staub {
    display: none !important;
  }
  body {
    padding-bottom: 0;
  }
  .abschnitt {
    padding-block: 1.5rem;
    break-inside: avoid;
  }
}