/* =============================================================
   Obergreuter Weidemilch
   Design-System: Monoline / Emailschild-Editorial
   Radien-Regel: Flaechen, Bilder, Eingabefelder = 0. Buttons und Tags = Pille.
   Akzent: genau eine Farbe (Scheunenrot) auf der gesamten Seite.
   ============================================================= */

/* ---------- Fonts (selbst gehostet, DSGVO) ---------- */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/gabarito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/gabarito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrumentsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrumentsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --paper:     #eff1ea;
  --paper-2:   #e5e8dd;
  --paper-3:   #dadfd0;
  --ink:       #16211b;
  --ink-2:     #3a4a41;
  --ink-3:     #5a6a61;
  /* Ein Farbton, zwei Helligkeitsstufen, klar getrennte Aufgaben:
     --accent      Flaechen (Knoepfe, Baender). Schrift darauf ist immer --ink.
     --accent-hi   dieselbe Flaeche im Hover.
     --accent-ink  Akzent als SCHRIFT auf Papier. Das helle Orange waere dafuer
                   mit 2.4:1 unlesbar, deshalb die dunkle Stufe.
     --focus       Fokusring, braucht 3:1 gegen den Grund. */
  --accent:     #d37e1c;   /* exakter Farbwert aus dem Logo */
  --accent-hi:  #c9781a;
  --accent-ink: #8a5310;
  --focus:      #8a5310;
  --line:      #c9cfc0;
  --line-dark: #33443a;

  /* Invertierte Bloecke (Fusszeile, CTA-Band, Info-Karte, Mobilmenue).
     Eigene Tokens, damit sie im Dunkelmodus nicht zu hellen Fremdkoerpern werden. */
  --inv-bg:  #16211b;
  --inv-fg:  #eff1ea;
  --inv-ln:  #33443a;

  --wrap: 1320px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --sp-sect: clamp(4.5rem, 9vw, 9rem);

  --ff-display: 'Gabarito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.55rem, 6vw, 5.1rem);
  --fs-h2: clamp(1.95rem, 4vw, 3.35rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.6rem);
  --fs-lead: clamp(1.1rem, 1.35vw, 1.35rem);
  --fs-body: clamp(1rem, 0.95rem + 0.22vw, 1.1rem);
  --fs-small: 0.875rem;

  --r-btn: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-head: 40;
  --z-menu: 50;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  color-scheme: light dark;          /* Scrollbalken und native Bedienelemente mitfaerben */
  touch-action: manipulation;        /* kein Verzoegerungsfenster fuer Doppeltipp-Zoom */
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden: erzeugt keinen Scroll-Container und laesst position:sticky intakt */
  overflow-x: clip;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

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

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.018em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--inv-bg); color: var(--inv-fg);
  padding: 0.85rem 1.25rem; z-index: 100; font-weight: 600;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.sect { padding-block: var(--sp-sect); }
.sect--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}
.body-text { max-width: 62ch; color: var(--ink-2); }
.body-text p + p { margin-top: 1.1em; }
.body-text strong { color: var(--ink); font-weight: 600; }

.hr-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Sprungziele muessen unter der klebenden Kopfzeile hervorkommen. */
[id] { scroll-margin-top: calc(80px + 1.5rem); }

/* ---------- Marke ----------
   Bewusst als normale Bilddatei. Die CSS-Maskentechnik hing an einer SVG, die
   intern selbst mit <mask> und <filter> arbeitet, und wurde nicht in jedem
   Browser gezeichnet. Zwei Farbfassungen als PNG mit Transparenz, umgeschaltet
   per <picture> dort, wo der Untergrund je nach Farbmodus wechselt. */
.logo { display: block; width: 100%; height: auto; }
.logo-box { display: block; }

/* Klein oben links. Begrenzt wird die HOEHE, nicht die Breite: die Kopfleiste
   ist 80 px hoch, und bei Seitenverhaeltnis 1.695 waere ein 150 px breites
   Logo 88 px hoch und wuerde unten herauslaufen. */
.head__logo { width: auto; }
.head__logo .logo { width: auto; height: clamp(42px, 4.2vw, 54px); }
/* Gross im Auftakt und mit klarem Abstand nach unten. Der Ueberlappungsversuch
   liess die Hauptzeile durch den Hausbalken schneiden, das las sich als Fehler.
   Das Kuhzeichen als Wasserzeichen liegt weiterhin hinter dem Text. */
.hero__logo {
  width: min(100%, 560px);
  margin-left: -1.5%;          /* optischer Ausgleich: links steht der Dachbalken vor */
  margin-bottom: clamp(1rem, 2vw, 1.9rem);
}
/* Kapitelzeichen */
.chapter__mark { width: clamp(48px, 4.4vw, 66px); margin-bottom: clamp(.9rem, 1.8vw, 1.4rem); }
/* Fusszeile */
.foot__logo { width: clamp(170px, 16vw, 210px); }
/* grosses Wasserzeichen, liegt hinter dem Inhalt */
.watermark {
  position: absolute; z-index: 0;
  pointer-events: none; user-select: none;
  opacity: .11;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--ff-display);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-btn);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .18s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: translateY(1px); }

/* Fuer Handlungen, die auffallen sollen */
.btn--gross { font-size: 1.08rem; padding: 1.05rem 2rem; gap: .7rem; }
.btn--gross svg { width: 1.3em; height: 1.3em; }

.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-hi); }

.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--onaccent { background: var(--ink); color: var(--paper); }
.btn--onaccent:hover { background: var(--inv-bg); color: var(--accent); }

.btn--onaccent-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--onaccent-ghost:hover { background: var(--ink); color: var(--accent); }

.btn--onink { border-color: color-mix(in srgb, var(--inv-fg) 50%, transparent); color: var(--inv-fg); background: transparent; }
.btn--onink:hover { background: var(--inv-fg); color: var(--inv-bg); border-color: var(--inv-fg); }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-display); font-weight: 600;
  text-decoration: none;
  color: var(--accent-ink);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.arrow-link svg { width: 1.05em; height: 1.05em; }
.arrow-link:hover { gap: .85rem; color: var(--ink); }

/* ---------- Header ---------- */
.head {
  position: sticky; top: 0; z-index: var(--z-head);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.head.is-stuck { border-bottom-color: var(--line); }
@supports not (backdrop-filter: blur(1px)) { .head { background: var(--paper); } }

.head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: 80px;   /* Obergrenze fuer die Kopfzeile, damit die Marke lesbar bleibt */
}
.head__brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }


.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav__link {
  font-family: var(--ff-display);
  font-weight: 600; font-size: 1rem;
  text-decoration: none; color: var(--ink);
  padding: .35rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--accent-ink); }

.nav__ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-btn);
  border: 1.5px solid var(--line); color: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav__ig svg { width: 20px; height: 20px; }
.nav__ig:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1.5px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger svg { width: 22px; height: 22px; }

/* Mobile-Panel */
.mobilenav {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--inv-bg); color: var(--inv-fg);
  display: flex; flex-direction: column;
  padding: max(1.25rem, env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) max(2.5rem, env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
  overscroll-behavior: contain;      /* Scrollen darf nicht auf die Seite dahinter durchschlagen */
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
  overflow-y: auto;
}
.mobilenav[data-open="true"] { transform: translateY(0); }
.mobilenav__top { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.mobilenav__top .head__logo .logo { height: 54px; }
.mobilenav__close {
  width: 44px; height: 44px; background: none; border: 1.5px solid color-mix(in srgb, var(--inv-fg) 35%, transparent);
  border-radius: var(--r-btn); color: var(--inv-fg); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobilenav__close svg { width: 22px; height: 22px; }
.mobilenav__list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; }
.mobilenav__list li { border-top: 1px solid var(--inv-ln); }
.mobilenav__list li:last-child { border-bottom: 1px solid var(--inv-ln); }
.mobilenav__list a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.6rem, 7vw, 2.2rem); letter-spacing: -0.02em;
  text-decoration: none; padding: 1.1rem 0;
}
.mobilenav__list a svg { width: 1rem; height: 1rem; opacity: .5; }
.mobilenav__foot { margin-top: auto; padding-top: 2.5rem; }

/* ---------- Hero (Startseite): asymmetrischer Split ---------- */
.hero { position: relative; }

/* Die linke Haelfte ist eine volle Akzentflaeche. Das Logo ist weiss angelegt
   und kommt darauf in seiner eigentlichen Form zur Geltung. */
.hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
  display: flex; align-items: center;
  padding: clamp(2.75rem, 7vw, 5.5rem) var(--gut);
}
/* Grosses Kuhzeichen als Wasserzeichen, liegt hinter dem Text.
   Sitzt weiterhin unten links, ragt aber nicht mehr ueber die Kante hinaus:
   der Kopf ist vollstaendig zu sehen. */
.hero__mark {
  left: 3%; top: auto; bottom: 4%;
  width: clamp(230px, 38%, 400px);
  opacity: .12;
}
.hero__copy { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.hero__copy { width: 100%; max-width: 38rem; }
.hero h1 { font-size: clamp(1.95rem, 3.3vw, 3.05rem); margin-bottom: 1.2rem; }
/* Auf der Akzentflaeche braucht die Zeile keine zweite Hervorhebung mehr. */
.hero h1 em { font-style: normal; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.5; color: color-mix(in srgb, var(--ink) 90%, transparent); max-width: 36ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(calc(100dvh - 80px), 900px);
  }
  /* Text am Satzspiegel ausrichten, Flaeche laeuft trotzdem bis zum Rand */
  .hero__panel { justify-content: flex-end; padding-right: clamp(2rem, 4vw, 3.5rem); }
  .hero__panel > .hero__copy { margin-right: 0; }
  .hero__media img { aspect-ratio: auto; height: 100%; }
}
@media (min-width: 1400px) {
  .hero__panel { padding-left: max(var(--gut), calc(50vw - var(--wrap) / 2)); }
}

/* ---------- Split (Bild + Text) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split__body h2 { margin-bottom: 1.1rem; }
.split__body .body-text { margin-bottom: 1.9rem; }
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip .split__media { order: 2; }
  .split__media img { aspect-ratio: 4 / 3; }
}

/* ---------- Volle Breite: Bildband ---------- */
.band { position: relative; }
.band__img { width: 100%; }
.band__img img { width: 100%; object-fit: cover; }
.band--pano img { aspect-ratio: 1971 / 429; }
.band__img--ruled { border-block: 5px solid var(--accent); }
@media (max-width: 700px) { .band--pano img { aspect-ratio: 16 / 10; } }

.band__note {
  display: grid; gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 880px) {
  .band__note { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.band__note h2 { letter-spacing: -0.03em; }

/* ---------- Kapitelband ----------
   Auf einer durchgehenden Seite braucht das Auge Marken. Jedes Kapitel
   oeffnet mit einer orangen Flaeche: das ist zugleich Gliederung, Sprungziel
   der Navigation und der Ort, an dem die Marke wieder auftaucht. */
.chapter {
  background: var(--accent); color: var(--ink);
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
}
.chapter__grid { display: grid; gap: clamp(1.25rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .chapter__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; } }
.chapter h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); max-width: 15ch; }
.chapter .lead { color: color-mix(in srgb, var(--ink) 90%, transparent); }

/* Foto direkt an die Farbflaeche stossen lassen, kein schmaler Papierstreifen */
.chapter + .band, .chapter + .sect--tight.band { padding-top: 0; }

/* ---------- Faktenblock (gruppiert, kein Zeilenraster) ---------- */
.facts { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .facts { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr); } }
.fact { border-top: 3px solid var(--accent); padding-top: 1.1rem; }
.fact h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.fact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; color: var(--ink-2); }
.fact li { display: flex; gap: .6rem; align-items: flex-start; }
.fact li svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .38rem; color: var(--accent-ink); stroke-width: 2.2; }

/* ---------- Info-Karte (Akzent) ---------- */
.callout {
  background: var(--accent); color: var(--ink);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .callout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.callout h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.callout p { color: color-mix(in srgb, var(--ink) 90%, transparent); margin-top: .9rem; max-width: 46ch; }
.callout__hours { display: grid; gap: .1rem; }
.callout__gross {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.15; letter-spacing: -0.02em;
}
/* Die Kernaussage der Seite, deshalb so gross wie der Platz es zulaesst.
   Doppelter Klassenname, weil sonst die 82-Prozent-Regel von .callout p greift
   und die Zahl blass statt schwarz erscheint. */
.callout .callout__zahl {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(3.8rem, 9.5vw, 7rem);
  line-height: .82; letter-spacing: -0.055em;
  margin-block: .3rem .7rem;
  color: var(--ink);
}
.callout__unter {
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  max-width: 30ch;
}
.callout__row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  font-family: var(--ff-display); font-weight: 600;
}
.callout__row:first-child { border-top: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); }
.callout__row span:last-child { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 90%, transparent); font-weight: 400; font-family: var(--ff-body); }

/* ---------- Hinweisbox ---------- */
.notice {
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  padding: 1.25rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.notice svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--accent-ink); margin-top: .15rem; }
.notice p { font-size: var(--fs-small); color: var(--ink-2); }
.notice strong { color: var(--ink); }

/* ---------- Karte (Zwei-Klick / DSGVO) ---------- */
.mapbox { position: relative; background: var(--paper-2); }
.mapbox__ph { position: relative; }
.mapbox__ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.35) contrast(.9); }
.mapbox__ph::after { content: ""; position: absolute; inset: 0; background: rgba(22,33,27,.55); }
.mapbox__ask {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 1.5rem; color: var(--paper);
}
.mapbox__ask p { font-size: var(--fs-small); max-width: 42ch; color: rgba(239,241,234,.85); }
.mapbox iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 640px) { .mapbox__ph img, .mapbox iframe { aspect-ratio: 4 / 5; } }

/* ---------- Kontaktzeile / Adresse ---------- */
.adr { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); font-style: normal; }
@media (min-width: 760px) { .adr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adr__item { display: flex; gap: .85rem; align-items: flex-start; }
.adr__item svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accent-ink); margin-top: .18rem; stroke-width: 1.6; }
.adr__item a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.adr__item a:hover { color: var(--accent-ink); }

/* ---------- Bildraster ----------
   Vier Bilder, gleichmaessig ueber die volle Breite verteilt. Vorher war das
   ein waagerechter Scroller; mit nur vier Bildern lohnt sich das nicht und ein
   Raster ohne verstecktes Scrollen ist fuer alle einfacher zu bedienen. */
.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.15rem);
}
@media (min-width: 760px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.strip figure { margin: 0; overflow: hidden; }
.strip img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .6s var(--ease);
}
.strip figure:hover img { transform: scale(1.05); }

/* ---------- Ausstattungs-Gruppen ---------- */
.groups { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.group h3 { font-size: 1.1rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 3px solid var(--accent); }
.group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: var(--ink-2); }
.group li { display: flex; gap: .6rem; }
.group li svg { width: 1rem; height: 1rem; flex: none; margin-top: .42rem; color: var(--accent-ink); stroke-width: 2.4; }

/* ---------- Formular ---------- */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--ff-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: .7rem 0;
  transition: border-color .25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent-ink); }
/* Ring nur bei Mausklick entfernen, bei Tastaturbedienung bleibt er stehen. */
.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) { outline: none; }
.field:focus-within label { color: var(--accent-ink); }
.field__hint { font-size: .8rem; color: var(--ink-3); }
.field__err { font-size: .8rem; color: var(--accent-ink); font-weight: 600; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-2); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .28rem; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formstate { display: none; padding: 1.1rem 1.35rem; font-size: var(--fs-small); }
.formstate[data-show="true"] { display: block; }
.formstate--ok { background: var(--inv-bg); color: var(--inv-fg); }
.formstate--err { background: var(--paper-2); border-left: 4px solid var(--accent); color: var(--ink); }
.btn[data-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- CTA-Band ---------- */
.ctaband { background: var(--accent); color: var(--ink); position: relative; overflow: hidden; isolation: isolate; }

.ctaband__inner {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
@media (min-width: 900px) { .ctaband__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ctaband h2 { max-width: 18ch; }
.ctaband p { color: color-mix(in srgb, var(--ink) 90%, transparent); margin-top: 1rem; max-width: 44ch; }
.ctaband__act { display: flex; flex-wrap: wrap; gap: .85rem; }
@media (min-width: 900px) { .ctaband__act { justify-content: flex-end; } }

/* ---------- Footer ---------- */
.foot { background: var(--inv-bg); color: var(--inv-fg); border-top: 1px solid var(--inv-ln); }
.foot__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 780px) { .foot__grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); } }

.foot__brand p { color: color-mix(in srgb, var(--inv-fg) 75%, transparent); margin-top: 1.25rem; max-width: 34ch; font-size: var(--fs-small); }
.foot h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--inv-fg) 68%, transparent); font-weight: 600; margin-bottom: 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot a { text-decoration: none; color: color-mix(in srgb, var(--inv-fg) 88%, transparent); transition: color .2s var(--ease); }
.foot a:hover { color: var(--inv-fg); }
.foot__ig { display: inline-flex; align-items: center; gap: .5rem; }
.foot__ig svg { width: 1.1rem; height: 1.1rem; }
.foot__bar {
  border-top: 1px solid var(--inv-ln);
  padding-block: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  justify-content: space-between;
  font-size: .8rem; color: color-mix(in srgb, var(--inv-fg) 68%, transparent);
}
.foot__bar ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 72ch; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 2.75rem; margin-bottom: .9rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.legal h4 { font-size: .98rem; margin-top: 1.25rem; margin-bottom: .35rem; color: var(--ink); }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: 1em; }
.legal ul { padding-left: 1.15rem; display: grid; gap: .35rem; margin: .75rem 0; }
/* Lange Web-Adressen in den Rechtstexten muessen umbrechen duerfen,
   sonst ragen sie auf dem Handy aus dem Satzspiegel heraus. */
.legal a { color: var(--accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Platzhalter-Markierung (vor Livegang entfernen) ---------- */
/* Auch a.todo ansprechen: sonst gewinnt die Linkfarbe (z. B. .legal a) und
   ein markierter Link stuende orange auf gelb, nur 3.6:1. */
.todo, a.todo {
  background: #fff3b0; color: #4a3a00;
  padding: 0 .3em; border-radius: 2px;
  font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Utilities ---------- */
.u-mt-s { margin-top: 1rem; }
.u-mt-m { margin-top: 1.75rem; }
.u-mt-l { margin-top: 2.75rem; }
.u-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Scroll-Reveal ----------
   Bewusst als animation (nicht transition) umgesetzt, damit Hover-Transitions
   auf denselben Elementen nicht ueberschrieben werden.
   Fail-safe: ohne JS bleibt alles sichtbar (Regel greift nur unter html.js). */
.js .reveal { opacity: 0; }
.js .reveal.is-in {
  animation: reveal-up .75s var(--ease) forwards;
}
.js .reveal.is-in[data-delay="1"] { animation-delay: .09s; }
.js .reveal.is-in[data-delay="2"] { animation-delay: .18s; }
.js .reveal.is-in[data-delay="3"] { animation-delay: .27s; }
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; animation: none; transform: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Dunkelmodus ----------
   Gleiche Marke, gleiche Hierarchie, nur andere Grundfarbe. Die Logos sind
   CSS-Masken auf currentColor und passen sich automatisch an. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #111713;
    --paper-2:   #19211c;
    --paper-3:   #222c26;
    --ink:       #e9eee7;
    --ink-2:     #b4c0b7;
    --ink-3:     #8fa096;
    --accent:     #d37e1c;   /* derselbe Logoton, auch im Dunkelmodus */
    --accent-hi:  #e08f30;   /* hier wird beim Hover aufgehellt statt abgedunkelt */
    --accent-ink: #eba85c;  /* im Dunkeln ist die HELLE Stufe die lesbare Schriftfarbe */
    --focus:      #eba85c;
    --line:      #2c3831;
    --line-dark: #3a4841;

    --inv-bg:    #1d2621;
    --inv-fg:    #e9eee7;
    --inv-ln:    #3a4841;
  }
  /* Alles, was auf dem hellen Akzent liegt, braucht dunkle Schrift. Ohne diese
     Zeilen erbt das orange Band das im Dunkelmodus helle --ink und wird
     unlesbar (gemessen 1.98:1). */
  .btn--primary { color: #14100e; }
  ::selection { background: var(--accent); color: #14100e; }
  .ctaband, .hero__panel, .chapter, .callout { color: #14100e; }
  .callout .callout__zahl { color: #14100e; }
  .ctaband p, .hero__sub, .chapter .lead, .callout p, .callout__unter, .callout__row span:last-child { color: rgba(20, 16, 14, .9); }
  .callout__row { border-color: rgba(20, 16, 14, .3) !important; }

  /* Nicht var(--paper) nehmen: das ist im Dunkelmodus selbst fast schwarz
     und der Knopf haette schwarze Schrift auf schwarzem Grund. */
  .btn--onaccent { background: #14100e; color: #eff1ea; }
  .btn--onaccent:hover { background: #050706; color: var(--accent); }
  .btn--onaccent-ghost { border-color: #14100e; color: #14100e; }
  .btn--onaccent-ghost:hover { background: #14100e; color: var(--accent); }
  /* Bilder eine Spur zurueckgenommen, damit sie nachts nicht blenden. */
  .band__img img, .split__media img, .strip img { filter: brightness(.92); }
  .todo, a.todo { background: #6b5a12; color: #ffeaa0; }
}

/* ---------- Responsive Header ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 901px) {
  .mobilenav { display: none; }
}