/* ==========================================================================
   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); }
.kopf--hell .nav-schalter { color: var(--dunkel); border-color: var(--sand-linie); }
.kopf--hell .nav-schalter:hover { background: var(--sand); border-color: var(--dunkel); }
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: var(--a4);
  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. */
.kopf-logo { flex: none; display: inline-flex; }
.kopf-logo img { height: 3.5rem; width: auto; }

.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 1.02rem/1.2 var(--schrift);
  text-decoration: none;
  color: rgba(246, 238, 223, 0.82);
  padding: 0.55em 0.8em 0.7em;
  border-radius: var(--radius-klein);
  transition: color 0.15s ease;
}
.hauptnav a::after {
  content: "";
  position: absolute;
  left: 0.8em;
  right: 0.8em;
  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: 1.08rem;
  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); }

.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; }

@media (max-width: 900px) {
  .kopf-zeile { gap: var(--a2); min-height: 4.25rem; }
  .kopf-logo img { height: 2.5rem; }
  .nav-schalter { display: inline-flex; }
  .kopf-telefon { display: none; }

  /* 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, unten der Telefon-Knopf. Bei offenem Menü
     sperrt html.nav-offen das Scrollen der Seite (navigation.js). */
  .hauptnav {
    display: none;
    position: fixed;
    inset: 4.25rem 0 0 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(4.25rem + 46px); }
  .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); }
}

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); }
.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 */
.karte-block {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--a5);
  align-items: start;
}
.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;
  border-bottom: 1px solid rgba(122, 83, 35, 0.28);
}
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);
}
@media (max-width: 1280px) { .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);
}