/* ==========================================================================
   Drechslerei Zimmer — Design-System
   Entwurf 13.08.2026, Leitreferenz siehe design-inspo/2026-08-13-referenz-essex-woods.md
   Farbwerte stammen aus logo/_generate.py und bleiben damit deckungsgleich zur Marke.
   ========================================================================== */

/* ---- Schrift (lokal, keine externen Ressourcen) -------------------------
   Nur WOFF2: jeder Browser, der WordPress 6.3 trägt, kann das Format.
   Die früheren TTF-Fassungen wurden nie abgerufen und sind entfallen. */

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  /* Farben, aus dem Logo abgeleitet */
  --dunkel: #1C1714;      /* Überschriften, dunkle Flächen */
  --tinte: #3B342C;       /* Fließtext */
  --leise: #6E675E;       /* Nebentext */
  --gold: #C9A05A;        /* Grafik, Icons, große Flächen — nicht für Fließtext */
  --bronze: #7A5323;      /* Textakzente und Links, ausreichend Kontrast auf Weiß */
  --creme: #F6EEDF;       /* helle Schrift auf dunklem Grund */
  --sand: #FAF6F0;        /* ruhige Wechselflächen */
  --sand-linie: #E2D5C2;  /* Linien, Rahmen */
  --dunkel-weich: #272019; /* dunkle Karte, etwas angehoben statt tiefschwarz */
  --sand-tief: #F1E9DC;    /* helle Karte, etwas zurückgenommen statt fast weiß */
  --weiss: #FFFFFF;

  /* Schrift */
  --schrift: "Barlow", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Abstände: 8er-Raster */
  --a1: 0.5rem;
  --a2: 1rem;
  --a3: 1.5rem;
  --a4: 2rem;
  --a5: 3rem;
  --a6: 4.5rem;
  --a7: clamp(4.5rem, 9vw, 7.5rem);  /* Abschnittsabstand */

  --breite: 1450px;
  --rand: clamp(1.25rem, 4vw, 2.5rem);

  /* Komponenten nach shadcn-Prinzip: ein Radius-Paar, feine Borders, Ring */
  --radius: 0.75rem;
  --radius-klein: 0.5rem;
  --ring: 0 0 0 3px rgba(201, 160, 90, 0.45);
}

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

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--schrift);
  font-size: 1.0625rem;              /* 17px */
  line-height: 1.65;
  color: var(--tinte);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 var(--a2);
  color: var(--dunkel);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 var(--a2); }
p:last-child { margin-bottom: 0; }

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

a { color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dunkel); }

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

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

.abschnitt { padding-block: var(--a7); }
.abschnitt--sand { background: var(--sand); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--creme); }
.abschnitt--dunkel h2 { color: var(--creme); }

/* ---- Kleinteile ----------------------------------------------------------- */

/* Kicker: gesperrte Versalzeile über Abschnitten, wie in der Referenz */
.kicker {
  display: block;
  margin-bottom: var(--a3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
}
.abschnitt--dunkel .kicker { color: var(--gold); }

.vorspann { max-width: 34em; font-size: 1.1rem; }

/* Abschnittskopf im Stil eines Zeichnungs-Schriftfelds: Haarlinie,
   Nummer links, Bezeichnung rechts, darunter die große Überschrift.
   Ersetzt die früheren gesperrten Eyebrow-Zeilen. */
/* Abschnittskopf: die Überschrift trägt allein. Kein Label, keine Nummer,
   kein Zeichen davor. Wo ein Vorspann dazugehört, steht er als schmale
   zweite Spalte rechts daneben — die Asymmetrie ist die Gestaltung. */
.abschnitt-kopf { margin-bottom: var(--a6); }
.abschnitt-kopf h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 14em;
}
.abschnitt-kopf--zwei {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--a3) var(--a5);
  align-items: start;
}
.abschnitt-kopf--zwei .vorspann { margin: 0; padding-top: 0.35rem; }
@media (max-width: 820px) {
  .abschnitt-kopf--zwei { display: block; }
  .abschnitt-kopf--zwei .vorspann { margin-top: var(--a3); }
}

/* Zielgruppen-Zeile über den Weg-Überschriften, normaler Satz statt Eyebrow */
.zielgruppe {
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}
.leise { color: var(--leise); }

/* Knöpfe — shadcn-Schnitt: normaler Satz, weicher Radius, schneller Hover */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.78em 1.4em;
  border: 1px solid var(--dunkel);
  border-radius: var(--radius-klein);
  background: var(--dunkel);
  color: var(--creme);
  /* Zeilenhöhe 1: bei 1.2 hing die Schrift optisch leicht über der Mitte */
  font: 500 0.95rem/1 var(--schrift);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.knopf:hover { background: var(--bronze); border-color: var(--bronze); color: var(--creme); }
/* Nur der nachgestellte Pfeil wird golden, nicht ein vorangestelltes Symbol */
.knopf > svg:last-child:not(:first-child) { color: var(--gold); transition: transform 0.2s ease; }
.knopf:hover > svg:last-child:not(:first-child) { transform: translateX(3px); }
.knopf:focus-visible { outline: none; box-shadow: var(--ring); }
.knopf--hell {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dunkel);
}
.knopf--hell:hover { background: var(--creme); border-color: var(--creme); color: var(--dunkel); }
.knopf--hell > svg:last-child:not(:first-child) { color: var(--dunkel); }
.knopf svg { width: 1.05em; height: 1.05em; }

/* Zweiter Knopf auf dem Foto: nur Kontur, damit er neben dem goldenen
   sichtbar bleibt. Der dunkle Standardknopf verschwand im Bild. */
.knopf--rand {
  background: transparent;
  border-color: rgba(246, 238, 223, 0.65);
  color: #fff;
}
.knopf--rand:hover { background: var(--creme); border-color: var(--creme); color: var(--dunkel); }
.knopf--rand > svg:last-child:not(:first-child) { color: var(--gold); }
.knopf--rand:hover > svg:last-child:not(:first-child) { color: var(--bronze); }


/* Faktenliste: Zahlen statt Adjektive, Zeilen mit dünnen Linien */
.fakten {
  margin: var(--a4) 0;
  border-top: 1px solid var(--sand-linie);
}
.fakten > div {
  display: grid;
  grid-template-columns: minmax(7em, 10em) 1fr;
  gap: var(--a2);
  padding: 0.7em 0;
  border-bottom: 1px solid var(--sand-linie);
}
.fakten dt {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--leise);
  padding-top: 0.1em;
}
.fakten dd { margin: 0; }

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

/* Schwebende weiße Leiste, mittig über dem Hero, bleibt beim Scrollen oben.
   Die Goldkante oben ist der einzige Farbakzent. */
/* Durchgehend dunkle Leiste über die volle Breite. Der Inhalt läuft bis an
   die Seitenränder, nicht im schmalen Textcontainer. Beim Scrollen kommt
   nur ein Schatten dazu (Klasse kopf--fest aus navigation.js). */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  background: var(--dunkel);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Ueber dem Hero ohne Flaeche — das Foto ist dort dunkel genug.
   Ohne JavaScript bleibt die Leiste durchgehend gefuellt. */
html.js .kopf:not(.kopf--fest) { background: transparent; box-shadow: none; }
.kopf.kopf--fest { box-shadow: 0 12px 32px rgba(28, 23, 20, 0.35); }

/* Helle Kopfzeile für die Unterseiten. Dort gibt es keine Bühne, und eine
   dunkle Leiste über hellem Inhalt wirkt wie ein Fremdkörper. */
.kopf--hell {
  background: var(--weiss);
  border-bottom: 1px solid var(--sand-linie);
}
.kopf--hell.kopf--fest { box-shadow: 0 10px 26px rgba(28, 23, 20, 0.07); }
.kopf--hell .hauptnav a { color: var(--tinte); }
.kopf--hell .hauptnav a:hover,
.kopf--hell .hauptnav a:focus-visible { color: var(--dunkel); }
.kopf--hell .hauptnav a[aria-current="page"] { color: var(--bronze); }
.kopf--hell .kopf-telefon { color: var(--dunkel); border-color: var(--sand-linie); }
.kopf--hell .kopf-telefon:hover { color: var(--bronze); }
/* Der Schalter steht dauerhaft auf weißer Fläche, nicht erst beim Überfahren —
   auf der Holztextur wäre er sonst kaum als Bedienelement zu erkennen. */
.kopf--hell .nav-schalter { background: var(--weiss); color: var(--dunkel); border-color: var(--sand-linie); }
.kopf--hell .nav-schalter:hover { background: var(--sand); border-color: var(--dunkel); }
/* Die Leiste läuft über die volle Breite, ihr Inhalt darf deshalb einen
   breiteren Container nutzen als der Seiteninhalt — sonst kollidieren
   Logo, Slogan, Navigation und Telefonnummer in der 1450px-Spalte. */
.kopf .inhalt { max-width: 1680px; }
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 2rem);
  min-height: 5.5rem;
}

/* Das Logo nimmt knapp zwei Drittel der Leistenhöhe ein. Größer gesetzt
   drängt der Schriftzug die Navigation an den Rand und wirkt plakativ.
   Unter 1600px eine Stufe kleiner, damit die Navigation Platz behält. */
.kopf-logo { flex: none; display: inline-flex; }
.kopf-logo img { height: 3rem; width: auto; }
@media (min-width: 1600px) { .kopf-logo img { height: 3.5rem; } }

.hauptnav { margin-left: auto; }
.hauptnav ul {
  display: flex;
  gap: clamp(0.25rem, 0.9vw, 0.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Der aktive und der ueberfahrene Punkt bekommen einen goldenen Balken unter
   der Schrift. Ein reiner Farbwechsel war zu leise — der Balken laeuft beim
   Ueberfahren von links ein und steht auf der aktiven Seite dauerhaft. */
.hauptnav a {
  position: relative;
  display: inline-block;
  font: 500 var(--nav-schrift, 0.95rem)/1.2 var(--schrift);
  text-decoration: none;
  color: rgba(246, 238, 223, 0.82);
  padding: 0.55em var(--nav-polster, 0.6em) 0.7em;
  border-radius: var(--radius-klein);
  transition: color 0.15s ease;
}
/* Ab 1600px die luftige Fassung; darunter kompakter, damit alles passt. */
@media (min-width: 1600px) {
  .hauptnav { --nav-schrift: 1.02rem; --nav-polster: 0.8em; }
}
.hauptnav a::after {
  content: "";
  position: absolute;
  left: var(--nav-polster, 0.6em);
  right: var(--nav-polster, 0.6em);
  bottom: 0.28em;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.hauptnav a:hover,
.hauptnav a:focus-visible { color: #fff; }
.hauptnav a:hover::after,
.hauptnav a:focus-visible::after { transform: scaleX(1); }
.hauptnav a[aria-current="page"] { color: var(--gold); font-weight: 600; }
.hauptnav a[aria-current="page"]::after { transform: scaleX(1); }

/* Nummer als schlichter Text neben der Navigation, kein Knopf */
.kopf-telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  margin-left: clamp(0.5rem, 1.5vw, 1rem);
  border-left: 1px solid rgba(246, 238, 223, 0.22);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--creme);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.kopf-telefon svg { width: 1.05em; height: 1.05em; color: var(--gold); }
.kopf-telefon:hover { color: var(--gold); }
@media (min-width: 1600px) { .kopf-telefon { font-size: 1.08rem; } }

.nav-schalter {
  display: none;
  margin-left: auto;
  border: 1px solid rgba(246, 238, 223, 0.35);
  border-radius: var(--radius-klein);
  background: none;
  padding: 0.6em 0.7em;
  cursor: pointer;
  color: var(--creme);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nav-schalter:hover { background: rgba(246, 238, 223, 0.12); border-color: var(--creme); }
.nav-schalter svg { width: 1.3em; height: 1.3em; display: block; }
/* Offenes Menü: aus den drei Balken wird ein X zum Schließen */
.nav-schalter span { display: block; }
.nav-schalter .schalter-zu { display: none; }
.nav-schalter[aria-expanded="true"] .schalter-auf { display: none; }
.nav-schalter[aria-expanded="true"] .schalter-zu { display: block; }

/* Unterhalb von 1251px übernimmt das Burger-Menü: Logo, Navigation und
   Telefonnummer passen dort nicht mehr nebeneinander. Die Leiste behält
   bis 900px ihre volle Höhe, die Nummer bleibt neben dem Schalter stehen. */
@media (max-width: 1250px) {
  /* margin-left 0: den automatischen Rand trägt hier die Telefonnummer,
     sonst teilen sich beide den Freiraum und die Nummer hängt mittig. */
  .nav-schalter { display: inline-flex; order: 6; margin-left: 0; }
  /* Nummer wandert mit nach rechts, vor den Schalter; die Trennlinie
     stünde hier vor leerem Raum und entfällt. */
  .kopf-telefon {
    order: 5;
    margin-left: auto;
    border-left: 0;
    padding-left: 0;
  }

  /* Vollbreites Menü: füllt unter der Leiste den ganzen Bildschirm.
     Große Einträge mit Haarlinien, der goldene Balken steht senkrecht
     vor dem aktiven Punkt. Bei offenem Menü sperrt html.nav-offen das
     Scrollen der Seite (navigation.js). */
  .hauptnav {
    display: none;
    position: fixed;
    inset: 5.5rem 0 0 0;
    margin-left: 0;
    background: var(--weiss);
    border-top: 1px solid var(--sand-linie);
    padding: var(--a3) var(--rand) var(--a5);
    overflow-y: auto;
  }
  .hauptnav.offen { display: block; animation: nav-einblenden 0.22s ease; }
  body.admin-bar .hauptnav { top: calc(5.5rem + 32px); }
  .hauptnav ul { flex-direction: column; gap: 0; }
  .hauptnav li + li { border-top: 1px solid var(--sand-linie); }
  .hauptnav ul a {
    display: block;
    padding: 0.9em 0.25em 0.9em 1em;
    font-size: 1.15rem;
    color: var(--tinte);
    border-radius: 0;
  }
  /* Senkrechter Goldbalken am linken Rand des Eintrags */
  .hauptnav ul a::after {
    left: 0;
    right: auto;
    top: 0.9em;
    bottom: 0.9em;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .hauptnav ul a:hover { color: var(--dunkel); }
  .hauptnav ul a:hover::after { transform: scaleY(1); }
  .hauptnav ul a[aria-current="page"] { color: var(--bronze); font-weight: 600; }
  .hauptnav ul a[aria-current="page"]::after { transform: scaleY(1); }
}

/* Unter 901px wird die Leiste kompakt: kleinere Höhe und kleineres Logo,
   die Telefonnummer verschwindet (sie steht im Fußbereich), das Menü
   beginnt entsprechend höher. */
@media (max-width: 900px) {
  .kopf-zeile { gap: var(--a2); min-height: 4.25rem; }
  .kopf-logo img { height: 2.5rem; }
  .kopf-telefon { display: none; }
  .nav-schalter { margin-left: auto; }
  .hauptnav { inset: 4.25rem 0 0 0; }
  body.admin-bar .hauptnav { top: calc(4.25rem + 46px); }
}

html.nav-offen { overflow: hidden; }
@keyframes nav-einblenden {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hauptnav.offen { animation: none; }
}

/* ---- Bühne (Hero) ---------------------------------------------------------
   Schichtung wie in der Referenz: großes Bild, weiße Karte darüber versetzt.
   Die Goldfläche mit Maserung steht als ruhige Fläche dahinter am rechten
   Rand — ohne Bedienelemente darauf. */

/* Vollbild-Hero: Foto über den ganzen Viewport, zentrierte Komposition mit
   Span-Zeichen über der Überschrift, unten ein Faktenband mit Haarlinien. */
.buehne {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(540px, 100svh);
  overflow: clip;
}
.buehne-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.86) saturate(0.94);
}
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Drei Schichten: weicher Kern hinter dem Text, senkrechter Verlauf für
     Kopfzeile und Fuß, dazu ein gleichmäßiger Schleier. Das Foto ist hell,
     die Schrift weiß — ohne diese Staffelung wäre sie nicht lesbar. */
  background:
    radial-gradient(ellipse 78% 62% at 50% 52%, rgba(28, 23, 20, 0.5) 0%, rgba(28, 23, 20, 0.22) 62%, rgba(28, 23, 20, 0) 100%),
    linear-gradient(180deg, rgba(28, 23, 20, 0.6) 0%, rgba(28, 23, 20, 0.22) 26%, rgba(28, 23, 20, 0.28) 62%, rgba(28, 23, 20, 0.78) 100%),
    rgba(28, 23, 20, 0.22);
}
/* Unten ausgerichtet, asymmetrisch: links die Headline im Großformat,
   rechts eine schmale Spalte mit Fließtext und Aktionen. */
/* Alles in einer Spalte in der dunklen Bildhälfte. Zwei Textinseln
   nebeneinander wirkten beziehungslos, und rechts liegen die Werkstücke. */
.buehne-mitte {
  position: relative;
  z-index: 2;
  flex: 1;
  /* .inhalt bringt margin-inline: auto mit. In einem Spalten-Flexcontainer
     schrumpft ein Element mit automatischen Rändern sonst auf Inhaltsbreite
     und wird zentriert, statt links an der Rasterkante zu stehen. */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--a6);
}
/* Weiche Fläche hinter dem Text, damit die Mitte des Fotos ihn trägt */
.buehne-mitte::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(28, 23, 20, 0.62) 0%, rgba(28, 23, 20, 0.38) 45%, rgba(28, 23, 20, 0) 72%);
  pointer-events: none;
}
.buehne-mitte h1 {
  max-width: 14em;
  color: #fff;
  font-size: clamp(2.3rem, 5.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.buehne-seite { max-width: 40em; margin-top: var(--a3); }
.buehne-seite p {
  color: rgba(246, 238, 223, 0.95);
  font-size: 1.05rem;
  margin: 0;
}
.buehne-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--a4);
}


@media (max-width: 720px) {
  .buehne { min-height: max(480px, 100svh); }
  .buehne-mitte { padding-top: var(--a5); }
  .buehne-mitte h1 { font-size: clamp(2.1rem, 9vw, 3rem); line-height: 1.02; }
}

/* ---- Fertigungsfakten: Spalten mit Haarlinien ----------------------------- */

.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--a5) 0;
}
.merkmal {
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--sand-linie);
}
.merkmal-icon {
  display: block;
  width: clamp(3.25rem, 4vw, 4.25rem);
  height: auto;
  margin-bottom: var(--a3);
}
.merkmal h3 { margin-bottom: 0.4rem; font-size: 1.1rem; }
.merkmal p { font-size: 0.95rem; color: var(--leise); }

/* ---- Die Weggabelung als zwei Bildkacheln ---------------------------------
   Text liegt im Bild wie in der Bühne, damit beide zusammengehören. Hier steht
   nur die Entscheidung, die Einzelheiten folgen im Programm. */

.wege-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a4);
}
.weg {
  position: relative;
  display: block;
  aspect-ratio: 4 / 4.2;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.weg-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.94) saturate(0.96);
  transition: transform 1s ease;
}
.weg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(28, 23, 20, 0.2) 0%,
      rgba(28, 23, 20, 0.3) 30%,
      rgba(28, 23, 20, 0.82) 60%,
      rgba(28, 23, 20, 0.97) 100%
    ),
    rgba(28, 23, 20, 0.12);
  transition: background 0.4s ease;
}
.weg:hover .weg-foto { transform: scale(1.04); }
.weg:hover::before {
  background:
    linear-gradient(180deg, rgba(28,23,20,0.26) 0%, rgba(28,23,20,0.38) 30%, rgba(28,23,20,0.86) 60%, rgba(28,23,20,0.98) 100%),
    rgba(28, 23, 20, 0.16);
}
/* Feine Goldkontur, die beim Überfahren aufzieht */
.weg::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(246, 238, 223, 0.12);
  border-radius: var(--radius);
  transition: border-color 0.3s ease;
  pointer-events: none;
}
.weg:hover::after { border-color: rgba(201, 160, 90, 0.55); }

.weg-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
}
.weg-icon { width: clamp(2.5rem, 3vw, 3.25rem); height: auto; margin-bottom: var(--a3); }
.weg .zielgruppe { color: var(--gold); margin-bottom: 0.4rem; }
.weg h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin-bottom: 0.6rem;
}
.weg p {
  color: rgba(246, 238, 223, 0.94);
  font-size: 0.98rem;
  max-width: 26em;
  margin-bottom: var(--a3);
}
.weg .knopf { margin-top: 0.25rem; }
.weg:hover .knopf--hell { background: var(--creme); border-color: var(--creme); }

@media (max-width: 860px) {
  .wege-raster { grid-template-columns: 1fr; }
  .weg { aspect-ratio: 1 / 1; }
}

/* ---- Kennzahlen: vier harte Werte, genau einmal auf der Seite ------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a3) var(--a4);
  margin-top: var(--a6);
}
.kennzahl { border-top: 2px solid var(--gold); padding-top: var(--a2); }
.kennzahl strong {
  display: block;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dunkel);
  margin-bottom: 0.15rem;
}
.kennzahl span { font-size: 0.9rem; color: var(--leise); }
@media (max-width: 720px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; }
}

/* ---- Lieferprogramm: drei Spalten mit den echten Artikelnamen ------------- */

.programm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a5) var(--a4);
}
.programm-spalte { border-top: 2px solid var(--gold); padding-top: var(--a3); }
.programm-icon { width: 3rem; height: auto; margin-bottom: var(--a3); }
.programm-spalte h3 { font-size: 1.15rem; margin-bottom: var(--a3); }
.programm-spalte ul { list-style: none; margin: 0; padding: 0; }
.programm-spalte li {
  position: relative;
  padding: 0.55em 0 0.55em 1.1em;
  border-top: 1px solid var(--sand-linie);
  font-size: 0.95rem;
  color: var(--tinte);
}
.programm-spalte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
@media (max-width: 860px) {
  .programm { grid-template-columns: 1fr; }
}

/* ---- Bild mit versetzter Goldfläche (Werkstatt-Abschnitt) ------------------ */

[id] { scroll-margin-top: 6.5rem; }

/* ---- Zeitstrahl ------------------------------------------------------------
   Kurz, als Beleg. Keine Hauptattraktion. */

/* Zeitschiene mit Mittellinie: die Stationen wechseln die Seite, das goldene
   Linienstück wächst beim Scrollen von Station zu Station mit. */
.zeitstrahl {
  position: relative;
  list-style: none;
  max-width: 62rem;
  margin: var(--a6) auto 0;
  padding: 0;
}
.zeitpunkt {
  position: relative;
  width: 50%;
  padding-bottom: var(--a6);
}
.zeitpunkt:nth-child(odd) { padding-right: var(--a5); }
.zeitpunkt:nth-child(even) { margin-left: 50%; padding-left: var(--a5); }
.zeitpunkt:last-child { padding-bottom: 0; }

/* Linienstück bis zur nächsten Station, direkt auf der Mittellinie */
.zeitpunkt:not(:last-child)::before,
.zeitpunkt:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4.4rem;
  width: 2px;
  height: calc(100% - 4.4rem + 2.2rem);
}
.zeitpunkt:nth-child(odd):not(:last-child)::before,
.zeitpunkt:nth-child(odd):not(:last-child)::after { right: -1px; }
.zeitpunkt:nth-child(even):not(:last-child)::before,
.zeitpunkt:nth-child(even):not(:last-child)::after { left: -1px; }
.zeitpunkt:not(:last-child)::before { background: var(--sand-linie); }
.zeitpunkt:not(:last-child)::after {
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--verzoegerung, 0s) + 0.2s);
}
html.js .zeitpunkt.sichtbar:not(:last-child)::after { transform: scaleY(1); }

.zeitpunkt-marke {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid var(--sand-linie);
  border-radius: 50%;
  background: var(--weiss);
  transition: border-color 0.4s ease 0.4s, box-shadow 0.4s ease 0.4s;
}
.zeitpunkt:nth-child(odd) .zeitpunkt-marke { right: -2.2rem; }
.zeitpunkt:nth-child(even) .zeitpunkt-marke { left: -2.2rem; }
html.js .zeitpunkt.sichtbar .zeitpunkt-marke {
  border-color: var(--gold);
  box-shadow: 0 0 0 7px rgba(201, 160, 90, 0.12);
}
.zeitpunkt-marke img { width: 2.5rem; height: auto; }

/* Einflug jeweils von der eigenen Seite */
html.js .zeitpunkt.anim:nth-child(odd) { transform: translate(-28px, 6px); }
html.js .zeitpunkt.anim:nth-child(even) { transform: translate(28px, 6px); }
html.js .zeitpunkt.anim.sichtbar { transform: none; }

.zeitpunkt .jahr {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dunkel);
  margin-bottom: 0.35rem;
}
.zeitpunkt p { font-size: 0.98rem; color: var(--leise); margin: 0; }

/* Jede Station steht in einer eigenen Karte, mit Spitze zur Linie hin */
.zeitpunkt-karte {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--sand-linie);
  border-radius: var(--radius);
  padding: var(--a3);
  transition: border-color 0.4s ease 0.4s, box-shadow 0.4s ease;
}
html.js .zeitpunkt.sichtbar .zeitpunkt-karte { box-shadow: 0 10px 30px rgba(28, 23, 20, 0.06); }
.zeitpunkt-karte::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  width: 13px;
  height: 13px;
  background: var(--weiss);
  border: 1px solid var(--sand-linie);
  transform: rotate(45deg);
}
.zeitpunkt:nth-child(odd) .zeitpunkt-karte::after { right: -7.5px; border-left: 0; border-bottom: 0; }
.zeitpunkt:nth-child(even) .zeitpunkt-karte::after { left: -7.5px; border-right: 0; border-top: 0; }

@media (max-width: 900px) {
  .zeitstrahl { padding-left: 4.5rem; }
  .zeitpunkt,
  .zeitpunkt:nth-child(odd),
  .zeitpunkt:nth-child(even) {
    width: auto;
    margin-left: 0;
    padding: 0 0 var(--a5) 0;
  }
  .zeitpunkt:last-child { padding-bottom: 0; }
  .zeitpunkt:nth-child(odd) .zeitpunkt-marke,
  .zeitpunkt:nth-child(even) .zeitpunkt-marke { left: -4.5rem; right: auto; width: 3.4rem; height: 3.4rem; }
  .zeitpunkt-marke img { width: 1.9rem; }
  .zeitpunkt:nth-child(odd):not(:last-child)::before,
  .zeitpunkt:nth-child(odd):not(:last-child)::after,
  .zeitpunkt:nth-child(even):not(:last-child)::before,
  .zeitpunkt:nth-child(even):not(:last-child)::after {
    left: -2.9rem;
    right: auto;
    top: 3.6rem;
    height: calc(100% - 3.6rem);
  }
  /* Kein seitlicher Einflug auf schmalen Schirmen: die Marken ragten dabei
     über den linken Rand hinaus. Stattdessen nur von unten einblenden. */
  html.js .zeitpunkt.anim:nth-child(odd),
  html.js .zeitpunkt.anim:nth-child(even) { transform: translate(0, 14px); }
  /* Spitze zeigt auf schmalen Schirmen immer nach links */
  .zeitpunkt:nth-child(odd) .zeitpunkt-karte::after,
  .zeitpunkt:nth-child(even) .zeitpunkt-karte::after {
    left: -7.5px;
    right: auto;
    border: 1px solid var(--sand-linie);
    border-right: 0;
    border-top: 0;
  }
}

/* ---- Betrieb ---------------------------------------------------------------- */

.werkstatt { position: relative; overflow: clip; background: var(--sand); }
.werkstatt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--a5);
  align-items: center;
}
@media (max-width: 860px) {
  .werkstatt-raster { display: block; }
  .werkstatt-bild { margin-top: var(--a4); }
}

/* ---- Bewegung ----------------------------------------------------------------
   Bilder zoomen leicht, Pfeile rücken nach, Abschnitte blenden beim Scrollen ein.
   Alles hinter prefers-reduced-motion abgesichert. */

.bild-zoom { position: relative; overflow: hidden; border-radius: var(--radius); }
.bild-zoom img { transition: transform 0.8s ease; }
.bild-zoom:hover img { transform: scale(1.04); }

/* Icons kommen einen Tick nach dem Text an und setzen sich von unten,
   als würden sie auf die Werkbank gelegt. Einmalig, nicht wiederholt. */
html.js .anim .merkmal-icon,
html.js .anim .programm-icon,
html.js .band-text.anim .band-icon,
html.js .zeitpunkt.anim .zeitpunkt-marke {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transform-origin: left bottom;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--verzoegerung, 0s) + 0.18s);
}
html.js .anim.sichtbar .merkmal-icon,
html.js .anim.sichtbar .programm-icon,
html.js .band-text.anim.sichtbar .band-icon,
html.js .zeitpunkt.anim.sichtbar .zeitpunkt-marke {
  opacity: 1;
  transform: none;
}

html.js .anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--verzoegerung, 0s);
}
html.js .anim.sichtbar {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .anim, .merkmal-icon, .programm-icon, .band-icon, .zeitpunkt-marke {
    opacity: 1 !important;
    transform: none !important;
  }
  .bild-zoom:hover img { transform: none; }
}

/* ---- Kontaktband ------------------------------------------------------------ */

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--a5);
  align-items: start;
}
.kontakt-nummer {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: var(--a1);
}
/* Telefon und E-Mail sind gleichwertige Kontaktwege und deshalb gleich groß.
   Beide sind anklickbar und tragen darum eine Unterstreichung. */
.kontakt-nummer svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--gold); }
.kontakt-nummer { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kontakt-nummer:hover { color: var(--creme); }
/* Kontaktdaten rechtsbündig, die Symbole bilden dabei eine Kante rechts.
   Auf schmalen Schirmen bleibt alles linksbündig, sonst wird es unruhig. */
@media (min-width: 760px) {
  .kontakt-raster > div:last-child,
  .fusszeile-raster > div:last-child { text-align: right; }
  .kontakt-raster > div:last-child .kontakt-liste li,
  .kontakt-raster > div:last-child .kontakt-nummer,
  .fusszeile-raster > div:last-child .kontakt-liste li,
  .fusszeile-raster > div:last-child .kontakt-nummer {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .kontakt-raster > div:last-child .kontakt-liste svg,
  .fusszeile-raster > div:last-child .kontakt-liste svg { margin-top: 0.25em; }
}

.kontakt-liste {
  margin: var(--a3) 0 0;
  padding: 0;
  list-style: none;
}
.kontakt-liste li {
  display: flex;
  gap: 0.8em;
  align-items: center;
  margin-bottom: var(--a3);
  color: var(--creme);
}
/* Bei der mehrzeiligen Anschrift sitzt das Symbol an der ersten Zeile */
.kontakt-liste li:has(address) { align-items: flex-start; }
.kontakt-liste li:has(address) svg { margin-top: 0.2em; }
.kontakt-liste svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--gold);
}
.kontakt-liste a {
  color: var(--gold);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.kontakt-liste a:hover { color: var(--creme); }
address { font-style: normal; font-size: 0.98rem; color: rgba(246, 238, 223, 0.85); }

/* ---- Unterseiten ------------------------------------------------------------
   Kopfzeile ist dort dauerhaft gefüllt, deshalb braucht der Seitenkopf Platz. */

/* Dunkles Kopfband der Unterseiten. Es liegt unter der hellen Kopfzeile und
   gibt jeder Seite denselben Auftakt wie der Startseite ihre Bühne. */
.seitenkopf {
  position: relative;
  background: var(--dunkel);
  color: rgba(246, 238, 223, 0.86);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  overflow: clip;
}
.seitenkopf .inhalt { position: relative; z-index: 2; }
.seitenkopf-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.8) saturate(0.9);
}
.seitenkopf--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(28, 23, 20, 0.72) 0%, rgba(28, 23, 20, 0.6) 60%, rgba(28, 23, 20, 0.82) 100%),
    rgba(28, 23, 20, 0.2);
}
.seitenkopf h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 16em;
  margin-bottom: var(--a3);
}
.seitenkopf .vorspann { max-width: 44em; color: rgba(246, 238, 223, 0.9); }
.seitenkopf + .abschnitt { padding-top: var(--a6); }

/* Heller Seitenkopf: weiße Fläche wie die helle Bühne, dunkle Schrift mit
   Kicker-Zeile. Mit Foto wird er zum Split-Hero: Text links in der
   Rasterhälfte, das Foto füllt die rechte Hälfte über die volle Bandhöhe
   und läuft bis an den Bildschirmrand. */
.seitenkopf--hell {
  background: var(--weiss);
  color: var(--tinte);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.seitenkopf--hell h1 {
  color: var(--dunkel);
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  max-width: 13em;
}
.seitenkopf--hell .vorspann { color: var(--leise); font-size: 1.1rem; }

.seitenkopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch;
}
/* Mit Foto bringt die Textspalte den Abstand selbst mit, damit das Foto
   oben und unten bündig mit dem Band abschließt. */
.seitenkopf--hell-foto { padding-block: 0; }
.seitenkopf--hell-foto .seitenkopf-raster { min-height: clamp(24rem, 52vh, 34rem); }
.seitenkopf--hell-foto .seitenkopf-text {
  align-self: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
/* Das Foto schiebt sich über den Inhaltsrand hinaus bis an den rechten
   Bildschirmrand (die Sektion schneidet Überstand durch die Scrollleiste ab). */
.seitenkopf-bild {
  position: relative;
  margin-block: 0;
  margin-left: 0;
  margin-right: calc(-1 * (max(100vw - var(--breite), 0px) / 2 + var(--rand)));
}
.seitenkopf-bild img,
.elementor .seitenkopf-bild img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px) {
  .seitenkopf-raster { grid-template-columns: 1fr; gap: 0; }
  .seitenkopf--hell-foto .seitenkopf-raster { min-height: 0; }
  .seitenkopf--hell-foto .seitenkopf-text { padding: var(--a5) 0 var(--a4); }
  .seitenkopf-bild {
    margin-inline: calc(-1 * var(--rand));
    height: clamp(14rem, 55vw, 22rem);
  }
}
.programm-spalte h2 { font-size: 1.15rem; margin-bottom: var(--a3); }

/* ---- Ablauf in Schritten (Unterseiten) ------------------------------------ */

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a4);
}
.schritt {
  border-top: 2px solid var(--gold);
  padding-top: var(--a3);
}
.schritt-nr {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: var(--a2);
  font-variant-numeric: tabular-nums;
}
.schritt h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.abschnitt--dunkel .schritt h3 { color: #fff; }
.schritt p { font-size: 0.95rem; color: var(--leise); }
.abschnitt--dunkel .schritt p { color: rgba(246, 238, 223, 0.75); }

/* Schmale Fassung: untereinander statt nebeneinander */
.schritte--schmal {
  grid-template-columns: 1fr;
  gap: var(--a3);
}
.schritte--schmal .schritt { display: grid; grid-template-columns: 3rem 1fr; gap: 0 var(--a2); }
.schritte--schmal .schritt-nr { grid-row: span 2; margin: 0; padding-top: 0.15rem; }

/* Bild neben Text, für Seiten ohne Spaltenraster */
.gegenstueck {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--a5);
  align-items: start;
}
.gegenstueck-bild { margin: 0; }
.gegenstueck-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Formenblatt auf der Treppenstäbe-Seite */
.formenblatt { margin: 0 0 var(--a5); }
.formenblatt img { width: 100%; height: auto; }
.formenblatt figcaption { margin-top: var(--a2); }
.formen-fuss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a5);
  border-top: 1px solid var(--sand-linie);
  padding-top: var(--a4);
}
.formen-fuss h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.formen-fuss p { color: var(--leise); }

@media (max-width: 900px) {
  .schritte { grid-template-columns: 1fr 1fr; }
  .gegenstueck, .formen-fuss { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .schritte { grid-template-columns: 1fr; }
}

/* ---- Kontaktkarten --------------------------------------------------------- */

.kontaktkarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a4);
}
.kontaktkarte { display: flex; flex-direction: column; }
.kontaktkarte-icon { color: var(--gold); margin-bottom: var(--a2); }
.kontaktkarte-icon svg { width: 2rem; height: 2rem; display: block; }
.kontaktkarte-etikett {
  font-size: 0.9rem;
  color: var(--leise);
  margin-bottom: 0.25rem;
}
.kontaktkarte-wert {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dunkel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  margin-bottom: var(--a2);
}
.kontaktkarte-wert:hover { color: var(--bronze); }
.kontaktkarte p { font-size: 0.95rem; color: var(--leise); margin: 0; }

/* Hinweiskasten mit goldener Kante */
.hinweis {
  margin-top: var(--a6);
  border-left: 3px solid var(--gold);
  background: var(--sand);
  padding: var(--a3) var(--a4);
  max-width: 46rem;
}
.hinweis strong { display: block; color: var(--dunkel); margin-bottom: 0.3rem; }
.hinweis p { margin: 0; color: var(--leise); }

@media (max-width: 860px) {
  .kontaktkarten { grid-template-columns: 1fr; }
}

/* ---- Ausstattung, Zitat und Karte (Unterseiten) --------------------------- */

.ausstattung {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a5) var(--a4);
}
.ausstattung-teil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ausstattung-icon { width: 3rem; height: auto; margin-bottom: var(--a2); }
.ausstattung-teil h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.ausstattung-teil p { font-size: 0.95rem; color: var(--leise); margin-bottom: var(--a2); }
.ausstattung-wert {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bronze);
  border-top: 2px solid var(--gold);
  padding-top: 0.5rem;
  width: 100%;
}

/* Zitat der Inhaberin, wörtlich von der bisherigen Website */
.zitat {
  margin: 0;
  max-width: 40rem;
  border-left: 3px solid var(--gold);
  padding-left: var(--a4);
}
.zitat p {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--dunkel);
  margin-bottom: var(--a2);
}
.zitat footer { font-size: 0.95rem; color: var(--leise); }

/* Karte plus Angaben daneben: die Angaben stehen mittig zur Kartenhöhe.
   Die Faktenliste verliert hier ihre äußeren Haarlinien (oben und unten),
   nur die Trennlinien zwischen den Zeilen bleiben. */
.karte-block {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--a5);
  align-items: center;
}
.karte-block .fakten { border-top: 0; }
.karte-block .fakten > div:first-child { padding-top: 0; }
.karte-block .fakten > div:last-child { padding-bottom: 0; border-bottom: 0; }
.karte { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand-linie); }
.karte img { width: 100%; height: auto; display: block; }
.karte iframe { display: block; width: 100%; height: clamp(20rem, 34vw, 26rem); border: 0; }
@media (max-width: 900px) {
  .ausstattung { grid-template-columns: 1fr 1fr; }
  .karte-block { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ausstattung { grid-template-columns: 1fr; }
}

/* ---- Freigestellte Teile ---------------------------------------------------
   Gleiche Hoehe, gleicher Abstand, kein Kasten. So wirken auch spaeter die
   echten Freisteller-Fotos wie eine Reihe und nicht wie eine Sammlung. */

.teile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--a5) var(--a4);
  align-items: end;
}
.teil { margin: 0; text-align: center; }
.teil img {
  display: block;
  width: 100%;
  height: clamp(9rem, 14vw, 13rem);
  object-fit: contain;
  object-position: bottom;
  margin-bottom: var(--a3);
  filter: drop-shadow(0 12px 18px rgba(28, 23, 20, 0.16));
}
.teile-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a3);
  margin-top: var(--a6);
}
.werkstatt-bild { margin: 0; }
.werkstatt-bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

.teil figcaption {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinte);
  border-top: 1px solid var(--sand-linie);
  padding-top: 0.7rem;
}

/* ---- Fußzeile --------------------------------------------------------------
   Auf allen Seiten identisch: Marke, Seiten, Kontakt, Anschrift, darunter eine
   schmale Zeile mit Rechtstexten. */

/* Die Fusszeile ist zugleich der Kontaktabschluss der Seite: links die
   Aufforderung, rechts die Daten, darunter in derselben dunklen Flaeche die
   Rechtszeile. Der frueher eigenstaendige Kontaktabschnitt ist darin
   aufgegangen, sonst stand derselbe Block zweimal untereinander. */
.fusszeile {
  background: var(--dunkel);
  color: rgba(246, 238, 223, 0.72);
  padding-top: clamp(4rem, 8vw, 7rem);
}
.fusszeile-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--a5) var(--a6);
  align-items: start;
  padding-bottom: var(--a6);
}
.fusszeile-raster h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--creme);
  margin: 0 0 var(--a3);
}
.fusszeile-raster p { max-width: 34em; margin: 0; }
.fusszeile address { font-style: normal; line-height: 1.7; }

.fusszeile a { color: rgba(246, 238, 223, 0.82); text-decoration: none; }
.fusszeile a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.fusszeile .kontakt-nummer,
.fusszeile .kontakt-liste a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.fusszeile .kontakt-nummer:hover,
.fusszeile .kontakt-liste a:hover { color: var(--creme); }

.fusszeile-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a4);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(246, 238, 223, 0.12);
  padding-block: var(--a3);
  font-size: 0.85rem;
  color: rgba(246, 238, 223, 0.5);
}

@media (max-width: 760px) {
  .fusszeile-raster { grid-template-columns: 1fr; }
}
.fusszeile-fuss p { margin: 0; }
.fusszeile-fuss ul { display: flex; gap: var(--a3); margin: 0; padding: 0; list-style: none; }



/* ==========================================================================
   WordPress- und Elementor-Anpassungen
   Alles ab hier existiert nur im Theme, nicht in der statischen Vorlage.
   ========================================================================== */

/* Adminleiste: die fixe Kopfzeile rückt darunter */
body.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kopf { top: 46px; } }

/* Elementor umhüllt jedes Widget: die Hüllen dürfen keinen Abstand einbringen,
   die Abschnitte bringen ihr Padding selbst mit */
.elementor-widget-container > .abschnitt,
.elementor-widget:not(:last-child) { margin-bottom: 0; }
.elementor-section .elementor-container { max-width: none; }

/* Screenreader-Text nach WordPress-Konvention */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* Das Sprungziel bekommt tabindex="-1", damit der Fokus mitwandert; der
   Fokusrahmen um den gesamten Inhalt wäre dabei aber nur Störung. */
#hauptinhalt:focus { outline: none; }

.screen-reader-text:focus {
  position: fixed !important;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  width: auto; height: auto;
  clip-path: none;
  padding: 0.75em 1.25em;
  background: var(--weiss);
  color: var(--dunkel);
  border-radius: var(--radius-klein);
  box-shadow: 0 10px 26px rgba(28, 23, 20, 0.2);
}

/* Fallback-Menü (wp_nav_menu ohne zugewiesenes Menü) verhält sich wie die Liste */
.hauptnav .menu { display: flex; margin: 0; padding: 0; list-style: none; }

/* Inhaltsseiten ohne Elementor (Impressum, Datenschutz, Beiträge) */
.inhaltsseite { padding-block: var(--a6); }
.inhaltsseite .inhalt { max-width: 52rem; }
.inhaltsseite h1 { margin-bottom: var(--a4); }

/* Abschnitts-Modifikatoren für die Widgets: Abstände stapelbarer Sektionen */
.abschnitt--oben-kompakt { padding-top: var(--a5); }
.abschnitt--unten-kompakt { padding-bottom: var(--a5); }
.abschnitt--oben-null { padding-top: 0; }
.abschnitt--unten-null { padding-bottom: 0; }

/* Abstand unter der hellen, fixen Kopfzeile: über die Body-Klasse gelöst,
   damit er auch greift, wenn Elementor mit dem Layout „Gesamte Breite“
   das Seiten-Template des Themes umgeht. Auf Seiten mit Bühne (Body-Klasse
   dz-kopf-dunkel) liegt die Leiste transparent auf dem Foto — kein Abstand. */
/* Muss der Höhe der Kopfzeile entsprechen (.kopf-zeile min-height),
   sonst bleibt zwischen Leiste und erstem Widget ein heller Streifen. */
body.dz-unterseite { padding-top: 5.5rem; }
@media (max-width: 900px) { body.dz-unterseite { padding-top: 4.25rem; } }

/* Elementors CSS-Reset (.elementor img { height: auto; }) ist spezifischer
   als die Foto-Klassen der Vorlage und drückt die füllenden Bilder platt.
   Hier werden die betroffenen Regeln mit höherer Spezifität zurückgeholt:
   Kachel-, Bühnen- und Seitenkopf-Fotos füllen ihre Fläche (object-fit
   cover bringt die Grundregel mit), die Teile behalten ihre feste Höhe. */
.elementor .weg-foto,
.elementor .buehne-foto,
.elementor .seitenkopf-foto {
  width: 100%;
  height: 100%;
}
.elementor .teil img {
  height: clamp(9rem, 14vw, 13rem);
}

/* Elementors Reset nullt Figure-Margins — damit verliert das Formenblatt
   seinen Abstand zur Spaltenreihe darunter. Der Abstand liegt deshalb
   zusätzlich auf .formen-fuss; außerhalb von Elementor kollabiert er mit
   dem Figure-Margin der Vorlage und bleibt so exakt gleich groß. */
.formen-fuss { margin-top: var(--a5); }

/* Zweispaltige Layouts: die rechte Spalte steht mittig zur linken.
   Betrifft die Faktenliste neben der Anfahrtskarte, die Schritte mit Bild
   daneben und den Vorspann rechts neben der Abschnittsüberschrift.
   (Der Werkstatt-Raster von „Text und Bild“ ist bereits zentriert.) */
.gegenstueck { align-items: center; }
.abschnitt-kopf--zwei { align-items: center; }
.abschnitt-kopf--zwei .vorspann { padding-top: 0; }

/* Textabschnitt- und Faktenlisten-Widget: schmale Lesespalte als Option,
   Standard ist die volle Inhaltsbreite (linksbündig). */
.textabschnitt--schmal { max-width: 46rem; }
.fakten--schmal { max-width: 46rem; }

/* Links: Unterstreichung erst beim Überfahren, nirgendwo dauerhaft.
   Gilt auch für die Kontaktwege in Fußzeile und Kontaktkarten, die in der
   Vorlage dauerhaft unterstrichen waren. Bedienelemente (Navigation,
   Knöpfe, schwebender Kontakt) bleiben grundsätzlich ohne Unterstreichung. */
a { text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.kontakt-nummer,
.kontakt-liste a,
.fusszeile .kontakt-nummer,
.fusszeile .kontakt-liste a,
.kontaktkarte-wert { text-decoration: none; }
.kontakt-nummer:hover,
.kontakt-liste a:hover,
.fusszeile .kontakt-nummer:hover,
.fusszeile .kontakt-liste a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kontaktkarte-wert:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.knopf:hover,
.hauptnav a:hover,
.kopf-logo:hover { text-decoration: none; }

/* Telefonnummer in der Kopfzeile: beim Überfahren unterstrichen wie andere Links */
.kopf-telefon:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---- Holz-Kopfzeile ---------------------------------------------------------
   Hirnholz-Textur über die volle Leiste, auf allen Seiten. Ein hauchdünner
   heller Schleier liegt über dem Foto, damit Navigation und Telefonnummer
   auch über dunkleren Maserungszonen sicher lesbar bleiben. Die früher über
   der Bühne transparente Leiste entfällt damit bewusst. */
.kopf--holz {
  background:
    linear-gradient(rgba(255, 252, 246, 0.3), rgba(255, 252, 246, 0.3)),
    url("../img/kopf-holz.jpg") center 30% / cover no-repeat;
  /* Kein Abschlussstrich — null statt erben, sonst käme die Sand-Haarlinie
     der hellen Kopfzeile (.kopf--hell) wieder zum Vorschein. */
  border-bottom: 0;
}
html.js .kopf--holz:not(.kopf--fest) {
  background:
    linear-gradient(rgba(255, 252, 246, 0.3), rgba(255, 252, 246, 0.3)),
    url("../img/kopf-holz.jpg") center 30% / cover no-repeat;
  box-shadow: none;
}
.kopf--holz.kopf--fest { box-shadow: 0 10px 26px rgba(28, 23, 20, 0.16); }

/* „Natürlich Holz“ mittig zwischen Logo und Navigation; die automatischen
   Ränder teilen sich den freien Raum mit dem der Navigation. */
.kopf-slogan {
  flex: none;
  height: 3.6rem;
  width: auto;
  margin-inline: auto;
  padding-inline: var(--a2);
}
/* Der Schriftzug braucht die luftige Fassung der Leiste — darunter würde
   er Navigation und Nummer aus dem Container drücken. */
@media (max-width: 1599px) { .kopf-slogan { display: none; } }

/* ---- Aktuelles --------------------------------------------------------------
   Kartenraster der Nachrichtenliste und Lesespalte der Einzelansicht. */

.aktuelles-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a4);
}
@media (max-width: 980px) { .aktuelles-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .aktuelles-raster { grid-template-columns: 1fr; } }

.aktuell-karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--sand-linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.aktuell-bild { display: block; }
.aktuell-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.aktuell-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--a3);
}
.aktuell-datum { display: block; font-size: 0.85rem; margin-bottom: 0.35rem; }
.aktuell-text h3 { margin-bottom: 0.45rem; }
.aktuell-text h3 a { color: var(--dunkel); text-decoration: none; }
.aktuell-text h3 a:hover { color: var(--bronze); text-decoration: none; }
.aktuell-text p { font-size: 0.95rem; color: var(--leise); margin-bottom: var(--a3); }
.aktuell-text .knopf { margin-top: auto; align-self: flex-start; }

/* Einzelansicht: Text in der Lesespalte, Bilder mit weichem Radius */
.aktuell-inhalt { max-width: 52rem; }
.aktuell-inhalt img { border-radius: var(--radius); }
.aktuell-inhalt h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: var(--a4); }
.aktuell-inhalt h3 { margin-top: var(--a3); }

/* ---- Produktgalerie ---------------------------------------------------------
   Freigestellte Produktfotos auf weißen Karten. Der weiße Kartengrund
   nimmt die JPG-Freisteller nahtlos auf, auch auf Sandflächen. */

.produkte-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a4);
}
.produkte-raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .produkte-raster, .produkte-raster--zwei { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .produkte-raster, .produkte-raster--zwei { grid-template-columns: 1fr; }
}

.produkt {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--sand-linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.produkt-bild {
  background: var(--weiss);
  padding: var(--a3);
}
.produkt-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
/* Elementors Bild-Reset (height: auto) mit Spezifität übersteuern */
.elementor .produkt-bild img { height: auto; aspect-ratio: 4 / 3; }
.produkt figcaption {
  border-top: 1px solid var(--sand-linie);
  padding: var(--a3);
  flex: 1;
}
.produkt figcaption h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.produkt figcaption p { font-size: 0.95rem; color: var(--leise); margin: 0; }

/* Anschrift in der Fußzeile: eine Zeile, gleiche Größe und Farbe wie
   Telefonnummer und E-Mail. Die Inhaberin steht in der Copyright-Zeile. */
.kontakt-liste .kontakt-ort {
  font-style: normal;
  color: var(--gold);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Bei der einzeiligen Anschrift sitzt das Orts-Symbol mittig wie bei der
   E-Mail — die Erste-Zeile-Ausrichtung galt der früheren mehrzeiligen. */
.kontakt-liste li:has(.kontakt-ort) { align-items: center; }
.kontakt-liste li:has(.kontakt-ort) svg { margin-top: 0; }

/* Teile-Galerie mit Fotos statt Freistellern: JPGs bringen ihren weißen
   Grund mit — der Freisteller-Schatten würde das ganze Rechteck nachzeichnen
   und entfällt deshalb, das Motiv sitzt mittig statt auf der Grundlinie. */
.teil--foto img,
.elementor .teil--foto img {
  filter: none;
  object-position: center;
}

/* Merkmal-Spalten auf dunkler Fläche (Nachhaltigkeits-Band): helle Schrift,
   Haarlinien in Creme, die Duotone-Icons stehen auf einem Creme-Plättchen,
   damit ihre dunklen Linien auf dem dunklen Grund lesbar bleiben. */
.abschnitt--dunkel .merkmal { border-left-color: rgba(246, 238, 223, 0.18); }
.abschnitt--dunkel .merkmal h3 { color: #fff; }
.abschnitt--dunkel .merkmal p { color: rgba(246, 238, 223, 0.75); }
.abschnitt--dunkel .merkmal-icon {
  background: var(--creme);
  border-radius: var(--radius-klein);
  padding: 0.55rem;
}

/* Zertifikate: vierspaltige Fassung des Produktkarten-Rasters */
.produkte-raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .produkte-raster--vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .produkte-raster--vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .produkte-raster--vier { grid-template-columns: 1fr; } }
.produkt figcaption h3 a { color: var(--dunkel); text-decoration: none; }
.produkt figcaption h3 a:hover { color: var(--bronze); }

/* ---- Förderhinweis (EFRE) ---------------------------------------------------
   Publizitätspflicht des Förderprogramms: Logos nebeneinander, darunter der
   vorgeschriebene Text — mittig, zurückhaltend, auf weißer Fläche (die
   Logo-Dateien bringen weißen Grund mit). */
.foerderhinweis {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.foerderhinweis-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--a3) var(--a5);
  margin-bottom: var(--a4);
}
.foerderhinweis-logos img,
.elementor .foerderhinweis-logos img {
  height: clamp(3rem, 5vw, 4rem);
  width: auto;
}
.foerderhinweis p { font-size: 0.95rem; margin-bottom: var(--a2); }
.foerderhinweis-titel { font-weight: 600; color: var(--dunkel); }
.foerderhinweis-schluss { color: var(--leise); }

/* Text-und-Bild mobil: der Abstand zwischen Text/Knopf und Bild liegt auf
   der Textspalte (div), NICHT auf der Figure — Elementors Reset
   (.elementor .elementor-widget … figure { margin: 0 }) übersteuert jeden
   Figure-Margin mit höherer Spezifität, deshalb klebte der Knopf am Bild. */
@media (max-width: 860px) {
  .werkstatt-raster > div { margin-bottom: var(--a5); }
}

/* Rechtszeile der Fußzeile mobil: Copyright und die Links zu Impressum und
   Datenschutz stehen zentriert untereinander statt linksbündig verteilt. */
@media (max-width: 760px) {
  .fusszeile-fuss {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--a2);
    text-align: center;
  }
}

/* Abschnittskopf mit Knopf: Überschrift links, Knopf rechts daneben,
   der Vorspann läuft darunter. Auf schmalen Schirmen bricht der Knopf
   unter die Überschrift. */
.abschnitt-kopf-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3) var(--a4);
  flex-wrap: wrap;
}
.abschnitt-kopf-zeile .knopf { flex: none; }
/* In der Zeile darf die Überschrift weder Restmargen mitbringen (H1/H3
   behalten sonst ihren unteren Abstand und hängen über der Mitte) noch
   künstlich schmal umbrechen — beides verschiebt den Knopf aus der Mitte. */
.abschnitt-kopf-zeile h1,
.abschnitt-kopf-zeile h2,
.abschnitt-kopf-zeile h3 {
  margin: 0;
  max-width: none;
}
.abschnitt-kopf--knopf .vorspann { margin: var(--a3) 0 0; }

/* Kontaktkarten: die Spaltenzahl folgt der Kartenzahl (Klasse aus dem
   Widget) — zwei Karten teilen sich die Breite statt eine Leerspalte
   zu hinterlassen. */
.kontaktkarten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kontaktkarten--eins { grid-template-columns: 1fr; max-width: 32rem; }
@media (max-width: 860px) {
  .kontaktkarten--zwei { grid-template-columns: 1fr; }
}

/* Abschnittskopf, gestapelte Fassung: der Vorspann steht unter der
   Überschrift statt rechts daneben (Option im Widget-Abschnittskopf). */
.abschnitt-kopf--gestapelt .vorspann { margin: var(--a3) 0 0; }

/* Anfahrt: der Lage-Satz steht unter den Routen, vor dem Routen-Knopf */
.karte-satz {
  font-size: 0.95rem;
  color: var(--leise);
  max-width: 34em;
  margin: var(--a3) 0;
}

/* Knopfreihe im Text-und-Bild-Widget: mehrere Knöpfe nebeneinander,
   auf schmalen Schirmen umbrechend */
.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a3);
  margin-top: var(--a4);
}

/* Sekundäre Knopfstile auf hellen Flächen: „Nur Kontur“ war für Fotos
   gedacht (weiße Schrift, Creme-Hover) und der Gold-Knopf wechselte beim
   Überfahren auf Creme — beides verschwindet auf Weiß und Sand. Innerhalb
   heller Abschnitte tragen beide deshalb dunkle Schrift und deutliche
   Hover-Zustände; auf der Bühne und dunklen Flächen bleibt alles wie gehabt. */
.abschnitt:not(.abschnitt--dunkel) .knopf--rand {
  background: transparent;
  border-color: var(--dunkel);
  color: var(--dunkel);
}
.abschnitt:not(.abschnitt--dunkel) .knopf--rand > svg:last-child:not(:first-child) { color: var(--bronze); }
.abschnitt:not(.abschnitt--dunkel) .knopf--rand:hover {
  background: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--creme);
}
.abschnitt:not(.abschnitt--dunkel) .knopf--rand:hover > svg:last-child:not(:first-child) { color: var(--gold); }

.abschnitt:not(.abschnitt--dunkel) .knopf--hell:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--creme);
}
.abschnitt:not(.abschnitt--dunkel) .knopf--hell:hover > svg:last-child:not(:first-child) { color: var(--gold); }

/* Ausnahme zu den hellen Knopf-Fassungen: Die Gold-Knöpfe AUF den
   Weggabelung-Fotokacheln liegen zwar in einem hellen Abschnitt, stehen
   aber auf dunklem Foto — dort gilt weiter das Creme-Verhalten der
   Vorlage (Knopf hellt beim Kachel- wie beim Knopf-Hover auf). */
.abschnitt:not(.abschnitt--dunkel) .weg .knopf--hell:hover,
.abschnitt:not(.abschnitt--dunkel) .weg:hover .knopf--hell {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--dunkel);
}
.abschnitt:not(.abschnitt--dunkel) .weg .knopf--hell:hover > svg:last-child:not(:first-child) { color: var(--dunkel); }

/* Adminbar ist zwischen 783 und 900 px nur 32 px hoch — das vollbreite
   Mobilmenü rückte dort um 14 px zu tief. */
@media (min-width: 783px) and (max-width: 900px) {
  body.admin-bar .hauptnav { top: calc(4.25rem + 32px); }
}

/* Knopfgruppe rechts neben der Abschnittsüberschrift: mehrere Knöpfe
   stehen als Reihe beieinander und brechen gemeinsam um. */
.abschnitt-kopf-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a2) var(--a3);
}

/* ---- Gesellenstücke-Galerie -------------------------------------------------
   Bildraster im Hochformat mit Zoom beim Überfahren; die Bezeichnung des
   Stücks steht wie bei den Teilen unter einer Haarlinie. */
.galerie {
  columns: 3;
  column-gap: var(--a4);
}
.galerie--zwei { columns: 2; }
@media (max-width: 980px) {
  .galerie, .galerie--zwei { columns: 2; }
}
@media (max-width: 620px) {
  .galerie, .galerie--zwei { columns: 1; }
}

.galerie-stueck {
  /* Abstand als Padding statt Margin: Elementors Figure-Reset
     (figure { margin: 0 }) würde einen Margin-Abstand nullen. */
  margin: 0;
  padding-bottom: var(--a4);
  break-inside: avoid;
}
.galerie-bild { display: block; }
.galerie-bild img,
.elementor .galerie-bild img {
  width: 100%;
  height: auto;
}

/* ---- Zeitstrahl-Einleitung --------------------------------------------------
   Unter der Überschrift: Text links, rechts ein gestaffeltes Bildpaar —
   das kleine Bild legt sich mit weißem Rahmen über die Ecke des großen.
   Darunter beginnt der Zeitstrahl (dessen eigener Abstand nach oben greift). */
.zeit-intro--bilder {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--a5);
  align-items: center;
}
.zeit-intro-text { max-width: 36em; }
.zeit-intro-bilder { position: relative; }
.zeit-intro-bild1 { width: 92%; }
.zeit-intro-bild1 img,
.elementor .zeit-intro-bild1 img {
  width: 100%;
  height: auto;
}
.zeit-intro-bild2 {
  position: absolute;
  right: 0;
  bottom: -2.5rem;
  width: 46%;
  border: 6px solid var(--weiss);
  box-shadow: 0 18px 44px rgba(28, 23, 20, 0.16);
}
.zeit-intro-bild2 img,
.elementor .zeit-intro-bild2 img {
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .zeit-intro--bilder { display: block; }
  .zeit-intro-bilder { margin-top: var(--a4); }
}

/* Die Einleitung rückt näher an die Überschrift (der Standardabstand des
   Abschnittskopfs ist für die hohe Bild-Collage zu luftig), und der Text
   beginnt auf Höhe der Bildoberkante statt in der Mitte zu schweben. */
.abschnitt-kopf:has(+ .zeit-intro) { margin-bottom: var(--a4); }


/* Abschnittskopf innerhalb der Zeitstrahl-Einleitung: Überschrift und Text
   stehen zusammen in der linken Spalte, mittig zum großen Bild. */
.abschnitt-kopf--intro { margin-bottom: var(--a3); }
.abschnitt-kopf--intro .vorspann { margin: var(--a2) 0 0; }

/* Elementor-Editor: die Scroll-Einblendungen sind hier abgeschaltet.
   Nach jedem Re-Render eines Widgets stünden die .anim-Elemente sonst
   dauerhaft auf unsichtbar, weil der Beobachter aus animation.js die neu
   eingesetzten Elemente nicht kennt — Inhalte wären im Editor nicht zu
   sehen. Im Frontend bleibt alles unverändert. */
body.elementor-editor-active .anim,
body.elementor-editor-active .anim .merkmal-icon,
body.elementor-editor-active .anim .programm-icon,
body.elementor-editor-active .band-text .band-icon,
body.elementor-editor-active .zeitpunkt .zeitpunkt-marke {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.elementor-editor-active .zeitpunkt:not(:last-child)::after {
  transform: scaleY(1) !important;
}

/* Zeitstrahl-Stationen mit Titelzeile zwischen Jahr und Text */
.zeitpunkt-titel {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  color: var(--dunkel);
}

/* ---- Bühne, helle Fassung --------------------------------------------------
   Weiße Fläche statt Vollbild-Foto: links eine Collage aus zwei bis drei
   Produktfotos, rechts Willkommenszeile (Kicker), Überschrift, Text und
   Knöpfe in dunkler Schrift. Die Kopfzeile bleibt fix darüber, deshalb
   bringt die Sektion ihren Kopf-Abstand selbst mit (Body hat auf
   Bühnen-Seiten kein padding-top). */
.buehne--hell {
  background: var(--weiss);
  justify-content: center;
  padding: calc(5.5rem + var(--a6)) 0 var(--a6);
}
.buehne--hell::after { content: none; }

.buehne-hell-raster {
  width: 100%; /* siehe .buehne-mitte: auto-Ränder im Flex-Spaltenlayout */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* Textspalte: dunkle Schrift auf Weiß, Knöpfe linksbündig */
.buehne-hell-text .kicker { margin-bottom: var(--a2); }
.buehne-hell-text h1,
.buehne-hell-text h2 {
  margin: 0;
  color: var(--dunkel);
  font-size: clamp(2.2rem, 3.9vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.buehne-hell-text p {
  max-width: 36em;
  margin: var(--a3) 0 0;
  color: var(--tinte);
  font-size: 1.05rem;
}
.buehne--hell .buehne-knoepfe { justify-content: flex-start; }

/* Knopf-Fassungen für die weiße Fläche (wie auf hellen Abschnitten) */
.buehne--hell .knopf--rand {
  background: transparent;
  border-color: var(--dunkel);
  color: var(--dunkel);
}
.buehne--hell .knopf--rand > svg:last-child:not(:first-child) { color: var(--bronze); }
.buehne--hell .knopf--rand:hover {
  background: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--creme);
}
.buehne--hell .knopf--rand:hover > svg:last-child:not(:first-child) { color: var(--gold); }
.buehne--hell .knopf--hell:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--creme);
}
.buehne--hell .knopf--hell:hover > svg:last-child:not(:first-child) { color: var(--gold); }

/* Collage: gestaffeltes Raster ohne Rahmen und Schatten. Die Fotos stehen
   auf weißem Grund und verschmelzen mit der Fläche; jedes Bild behält sein
   natürliches Format und wird nicht beschnitten. */
.buehne-produkte {
  width: 100%;
  max-width: 640px;
  justify-self: center;
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: var(--a3);
  align-items: start;
}
.buehne-produkt img,
.elementor .buehne-produkt img {
  display: block;
  width: 100%;
  height: auto;
}
/* B sitzt versetzt zum großen Bild, C darunter leicht eingerückt */
.buehne-produkt--b { margin-top: var(--a5); }
.buehne-produkt--c {
  grid-column: 1 / -1;
  width: 74%;
  margin-left: 13%;
}

@media (max-width: 900px) {
  .buehne--hell {
    min-height: 0;
    padding: calc(4.25rem + var(--a5)) 0 var(--a6);
  }
  .buehne-hell-raster { grid-template-columns: 1fr; gap: var(--a5); }
  .buehne-produkte { order: 2; max-width: 480px; }
}

/* ---- Mobil: zentrierte Texte -----------------------------------------------
   Überschriften, Kicker und Fließtexte stehen auf schmalen Schirmen mittig,
   ebenso Komponenten mit Icon oder Goldnummer (Merkmale, Kennzahlen,
   Schritte, Kontaktkarten; die Ausstattung hat weiter unten eine eigene
   Listen-Fassung). Aufzählungen und Faktenzeilen
   bleiben linksbündig, genauso Kompositionen mit eigener Ausrichtung:
   Fotokacheln (Weggabelung), Zeitstrahl-Karten, Zitat, Leistungsspalten
   und die Fußzeile. */
@media (max-width: 720px) {
  h1, h2, h3, h4,
  p,
  .kicker,
  figcaption,
  .abschnitt-kopf,
  .merkmal,
  .kennzahl,
  .schritt,
  .kontaktkarte {
    text-align: center;
  }
  .vorspann,
  .karte-satz { margin-inline: auto; }

  /* Geblockte Icons ziehen mit dem zentrierten Text in die Mitte */
  .merkmal-icon,
  .kontaktkarte-icon svg { margin-inline: auto; }
  .merkmal { border-left: 0; }

  /* Abschnittskopf mit Knopf neben der Überschrift sowie die Knöpfe der
     hellen Bühne rücken mittig unter den zentrierten Text */
  .abschnitt-kopf-zeile { justify-content: center; }
  .buehne--hell .buehne-knoepfe { justify-content: center; }

  /* Ausnahmen: Aufzählungen und tabellarische Angaben bleiben linksbündig */
  ul, ol, dl, li, dt, dd,
  li p {
    text-align: left;
  }
  /* Ausnahmen: Kompositionen mit eigener Ausrichtung */
  .weg-text h3, .weg-text p,
  .zeitpunkt-karte h3, .zeitpunkt-karte p, .zeitpunkt-titel,
  .zitat p, .zitat footer,
  .programm-spalte h2, .programm-spalte h3,
  .schritte--schmal .schritt,
  .schritte--schmal .schritt h3, .schritte--schmal .schritt p,
  .fusszeile-raster h2, .fusszeile-raster p {
    text-align: left;
  }
}

/* ---- Ausstattung mobil: kompakte Liste --------------------------------------
   Untereinander gestapelte, zentrierte Blöcke mit vollbreiter Goldkante
   wirkten zerrissen. Auf schmalen Schirmen wird jedes Teil eine Zeile:
   Icon links, Text rechts linksbündig, feine Trennlinien dazwischen; der
   Wert steht als kleine Bronze-Zeile unter dem Text statt auf der Goldlinie. */
@media (max-width: 720px) {
  .ausstattung { grid-template-columns: 1fr; gap: 0; }
  .ausstattung-teil {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: var(--a3);
    align-items: start;
    text-align: left;
    padding-block: var(--a4);
    border-top: 1px solid var(--sand-linie);
  }
  .ausstattung-teil:first-child { border-top: 0; padding-top: 0; }
  .ausstattung-teil:last-child { padding-bottom: 0; }
  .ausstattung-icon { grid-row: span 3; width: 3.25rem; margin: 0; }
  .ausstattung-teil h3 { text-align: left; margin-bottom: 0.3rem; }
  .ausstattung-teil p { text-align: left; margin-bottom: 0.35rem; }
  .ausstattung-wert {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
    width: auto;
  }
}