/* site-baukasten – erzeugt beim Bau. Nicht von Hand ändern. */

/* ── Marke ── */
:root {
  --brand-primary: #00964C;
  --brand-primary-dark: #04703A;
  --brand-secondary: #655228;
  --brand-accent: #83C442;
  --brand-accent-ink: #9a561f;
  --brand-signal: #b3261e;
  --brand-signal-contrast: #ffffff;
  --brand-bg: #FDFCFA;
  --brand-bg-muted: #FFFFFF;
  --brand-bg-card: #ffffff;
  --brand-bg-dark: #00964C;
  --brand-border: #E4E0D8;
  --brand-text: #33322E;
  --brand-text-muted: #6E6B64;
  --brand-text-on-dark: #FFFFFF;
  --brand-text-on-accent: #1F2937;
  --brand-text-on-dark-strong: rgba(255, 255, 255, 1);
  --brand-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --brand-text-on-dark-faint: rgba(255, 255, 255, 0.5);
  --brand-success: #04703A;
  --brand-warning: #B8860B;
  --brand-danger: #A63A2E;
  --brand-font-heading: "Open Sans", sans-serif;
  --brand-font-body: 'Open Sans', system-ui, sans-serif;
  --brand-font-heading-weight: 700;
  --brand-fs-display: 44px;
  --brand-fw-display: 700;
  --brand-lh-display: 1.15;
  --brand-ls-display: -0.02em;
  --brand-fs-h1: 34px;
  --brand-fw-h1: 700;
  --brand-lh-h1: 1.2;
  --brand-ls-h1: -0.01em;
  --brand-fs-h2: 27px;
  --brand-fw-h2: 700;
  --brand-lh-h2: 1.25;
  --brand-ls-h2: -0.01em;
  --brand-fs-h3: 21px;
  --brand-fw-h3: 600;
  --brand-lh-h3: 1.3;
  --brand-ls-h3: 0;
  --brand-fs-subtitle: 18px;
  --brand-fw-subtitle: 600;
  --brand-lh-subtitle: 1.45;
  --brand-ls-subtitle: 0;
  --brand-fs-body: 17px;
  --brand-fw-body: 400;
  --brand-lh-body: 1.7;
  --brand-ls-body: 0;
  --brand-fs-small: 14px;
  --brand-fw-small: 400;
  --brand-lh-small: 1.55;
  --brand-ls-small: 0.01em;
  --brand-fs-eyebrow: 14px;
  --brand-fw-eyebrow: 400;
  --brand-lh-eyebrow: 1.5;
  --brand-ls-eyebrow: 0;
  --brand-fs-lead: 18px;
  --brand-fw-lead: 500;
  --brand-lh-lead: 1.5;
  --brand-ls-lead: 0;
  --brand-fs-quote: 21px;
  --brand-fw-quote: 600;
  --brand-lh-quote: 1.3;
  --brand-ls-quote: 0;
  --brand-space-xs: 8px;
  --brand-space-sm: 14px;
  --brand-space-md: 22px;
  --brand-space-lg: 34px;
  --brand-space-xl: 52px;
  --brand-space-2xl: 76px;
  --brand-section-wide: 88px;
  --brand-section-narrow: 56px;
  --brand-radius-none: 0px;
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 14px;
  --brand-shadow-none: none;
  --brand-border-thin: 1px;
  --brand-border-thick: 2px;
  --brand-content-width: 1180px;
  --brand-reading-width: 740px;
  --brand-shadow-sm: none;
  --brand-shadow-lg: none;
}

/* ── Schriften ── */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schriften/open-sans-400.4c0534ecba.woff2) format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/schriften/open-sans-600.5b8d567e4f.woff2) format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/schriften/open-sans-700.747b8091ea.woff2) format("woff2");
}

/* ── basis.css ── */
/* Grundstile – Nachbau von ompilot-bridge snippets/base-styles/base-styles.php (Stand 2.77.0).
   Rahmenmodell, Schriftglättung, Bildskalierung, kein horizontaler Überlauf,
   sichtbarer Fokus, Bewegungsreduktion, zusammenrückende Flächen. */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--brand-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--brand-text, #1a2226);
  background: var(--brand-bg, #ffffff);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-heading, inherit);
  font-weight: var(--brand-font-heading-weight, 700);
}
img, picture, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--brand-primary, #1a5f6a);
  outline-offset: 2px;
}
:target { scroll-margin-top: 1rem; }
[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Aufeinanderfolgende Blöcke gleicher Fläche rücken zusammen (SZ-27). Die Fläche
   steht als Klasse ompilot-surface--<token> am äußersten Element eines Bausteins;
   „Vom vorherigen Abschnitt trennen" setzt .ompilot-section--separate. */
.ompilot-surface--none         + .ompilot-surface--none:not(.ompilot-section--separate),
.ompilot-surface--primary      + .ompilot-surface--primary:not(.ompilot-section--separate),
.ompilot-surface--primary_dark + .ompilot-surface--primary_dark:not(.ompilot-section--separate),
.ompilot-surface--dark         + .ompilot-surface--dark:not(.ompilot-section--separate),
.ompilot-surface--muted        + .ompilot-surface--muted:not(.ompilot-section--separate) {
  padding-top: var(--brand-section-narrow, 40px);
}
.ompilot-surface--none:has(         + .ompilot-surface--none:not(.ompilot-section--separate)),
.ompilot-surface--primary:has(      + .ompilot-surface--primary:not(.ompilot-section--separate)),
.ompilot-surface--primary_dark:has( + .ompilot-surface--primary_dark:not(.ompilot-section--separate)),
.ompilot-surface--dark:has(         + .ompilot-surface--dark:not(.ompilot-section--separate)),
.ompilot-surface--muted:has(        + .ompilot-surface--muted:not(.ompilot-section--separate)) {
  padding-bottom: 0;
}

/* Sprungmarke „Zum Inhalt springen": unsichtbar bis zum Fokus (wie skip-link der Bridge). */
.sprungmarke {
  position: absolute; top: -100%; left: 16px; z-index: 9999;
  padding: 8px 16px; background: var(--brand-primary, #5A8B92); color: #fff;
  border-radius: 0 0 4px 4px; font-size: 14px; text-decoration: none; transition: top 0.2s;
}
.sprungmarke:focus { top: 0; }

/* Textseiten (Impressum, Datenschutz, 404, Platzhalter): Lesebreite wie im Kirby-Staging. */
.seite-text { max-width: 62rem; margin: 0 auto; padding: 2rem 1.25rem; overflow-wrap: anywhere; }

/* Bildausschnitt einer Datei (fokus, wie Kirbys Focus): wirkt, wo ein Baustein das
   Bild beschneidet (object-fit: cover). Wert je Bild über eine Exemplar-Klasse. */
img.bild-fokus { object-position: var(--bild-fokus); }

/* Akzentstrich über den Überschriften (Seiten-Einstellung ueberschrift_akzent,
   Baukasten-Erweiterung): kurzer Strich in der Markenfarbe über H1 und den
   Abschnittsüberschriften; mittig bei mittig gesetzten Köpfen, auf dunklen
   Flächen in der Akzentfarbe. Fuß und Banner bleiben ohne. */
.ue-akzent :is(.hf-rahmen__title, .cs-title, .td-headline, .td-content > h2, .it-headline, .og-title, .cg-title, .oh-title, .rv-title, .rf-head__title)::before {
  content: "";
  display: block;
  width: var(--ue-akzent-breite, 48px);
  height: var(--ue-akzent-hoehe, 4px);
  border-radius: 2px;
  background: var(--ue-akzent-farbe, var(--brand-primary));
  margin: 0 0 14px;
}
.ue-akzent :is(.og-head > .og-title, .cg-head > .cg-title, .rv-head > .rv-title, .rf-head > .rf-head__title, .oh-title)::before { margin-inline: auto; }
.ue-akzent :is(.td-headline, .td-content > h2)::before { margin-inline: var(--td-akzent-mi, 0); }
.ue-akzent .cg-section--head-links .cg-head > .cg-title::before { margin-inline: 0; }
.ue-akzent :is(.ompilot-surface--primary, .ompilot-surface--primary_dark, .ompilot-surface--dark) { --ue-akzent-farbe: var(--brand-accent, currentColor); }

/* ── helfer/knopf.css ── */
/* Schaltfläche – Nachbau von ompilot-bridge snippets/helpers/button.php (ompilotButtonCss).
   Farben je Umfeld über --ob-fill-bg/--ob-fill-color/--ob-outline-color/--ob-focus. */
.ompilot-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 18px; box-sizing: border-box; border: 2px solid transparent; border-radius: var(--brand-radius-md, 8px); font-family: var(--brand-font-heading, inherit); font-size: var(--brand-fs-button, 0.9375rem); font-weight: var(--brand-fw-button, 600); line-height: 1.2; text-decoration: none; transition: opacity .2s, background-color .2s, color .2s, border-color .2s; }
.ompilot-btn--gefuellt { background: var(--ob-fill-bg, var(--brand-accent, #E3C05C)); color: var(--ob-fill-color, var(--brand-text-on-accent, #1F2937)); border-color: var(--ob-fill-bg, var(--brand-accent, #E3C05C)); }
.ompilot-btn--umrandet { background: transparent; color: var(--ob-outline-color, currentColor); border-color: var(--ob-outline-color, currentColor); }
.ompilot-btn:hover { opacity: .9; }
.ompilot-btn:focus-visible { outline: 2px solid var(--ob-focus, currentColor); outline-offset: 2px; }

/* ── helfer/social-row.css ── */
/* Symbolzeile – Nachbau von ompilot-bridge snippets/helpers/social-row.php. Nur Layout;
   die Farbe erbt das Symbol vom Umfeld (currentColor). Berührfläche 44×44px. */
.sz-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sz-social__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.sz-social__link svg { width: 24px; height: 24px; display: block; }
.sz-social__link:hover { opacity: 0.85; }
.sz-social__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── bausteine/card-grid.css ── */
/* Kartenraster (card-grid) – Nachbau von ompilot-bridge snippets/blocks/card-grid.php.
   Gestaltungswerte aus card-grid.design.json; Fläche, Kachelfläche, Spalten und Farben
   je Exemplar (bx-…); Darstellungsarten als Klassen. */
.cg-section {
  --cg-bg: var(--brand-bg);
  --cg-pt: var(--brand-section-wide, 80px);
  --cg-pb: var(--brand-section-wide, 80px);
  --cg-max-w: var(--brand-content-width, 1200px);
  --cg-px: var(--brand-space-lg, 24px);
  --cg-title-size: var(--brand-fs-h2, 32px);
  --cg-sub-size: var(--brand-fs-lead, 1.125rem);
  --cg-eyebrow-size: var(--brand-fs-eyebrow, 0.875rem);
  --cg-group-size: var(--brand-fs-h3, 22px);
  --cg-gap: var(--brand-space-lg, 20px);
  --cg-min-col: 250px;
  --cg-cols-d: 3;
  --cg-cols-m: 2;
  --cg-card-radius: var(--brand-radius-lg, 12px);
  --cg-card-title-size: var(--brand-fs-subtitle, 18px);
  --cg-card-ratio: 4/3;
  --cg-media-fill: var(--brand-bg-muted, #f4f6f6);
  --cg-media-pad: var(--brand-space-lg, 24px);
  --cg-card-icon-size: 26px;
  --cg-card-desc-size: var(--brand-fs-body, 15px);
  --cg-list-size: var(--brand-fs-body, 15px);
  --cg-tile-bar-h: 6px;
  background: var(--cg-bg);
  padding: var(--cg-pt) 0 var(--cg-pb);
}
.cg-section__inner { max-width: var(--cg-max-w); margin: 0 auto; padding: 0 var(--cg-px); }
.cg-head { margin-bottom: 32px; text-align: center; }
.cg-eyebrow { margin: 0 0 8px; font-size: var(--cg-eyebrow-size); font-weight: var(--brand-eyebrow-fw, 600); letter-spacing: var(--brand-eyebrow-ls, 0.08em); text-transform: uppercase; font-variant-caps: var(--brand-eyebrow-caps, normal); color: var(--cg-eyebrow-color); font-family: var(--brand-font-heading, inherit); }
.cg-title { margin: 0 0 10px; font-size: var(--cg-title-size); font-weight: var(--brand-font-heading-weight, 700); color: var(--cg-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.15; }
.cg-subline { margin: 0 auto; max-width: 640px; font-size: var(--cg-sub-size); color: var(--cg-sub-color); line-height: 1.5; }
.cg-group { margin-top: 40px; }
.cg-group:first-of-type { margin-top: 0; }
.cg-group__title { margin: 0 0 20px; font-size: var(--cg-group-size); font-weight: 600; color: var(--cg-group-color); font-family: var(--brand-font-heading, inherit); }
.cg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cg-cols-d), 1fr); gap: var(--cg-gap); }
.cg-cell { min-width: 0; }
.cg-card { display: flex; flex-direction: column; height: 100%; background: var(--cg-card-bg); border: var(--brand-border-thin, 1px) solid var(--cg-card-border); border-radius: var(--cg-card-radius); overflow: hidden; text-decoration: none; color: inherit; }
.cg-card--link { transition: box-shadow 0.2s, transform 0.2s; min-height: 48px; }
.cg-card--link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.cg-card--link:focus-visible { outline: 2px solid var(--brand-primary, #5A8B92); outline-offset: 2px; }
.cg-card__media { position: relative; width: 100%; aspect-ratio: var(--cg-card-ratio); background: rgba(0,0,0,0.04); overflow: hidden; }
.cg-card__media picture { position: absolute; inset: 0; }
.cg-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-section--contain .cg-card__media { background: var(--cg-media-fill); }
.cg-section--contain .cg-card__img { padding: var(--cg-media-pad); box-sizing: border-box; object-fit: contain; }
.cg-card__body { padding: var(--cg-card-body-pad, 16px 18px 18px); display: flex; flex-direction: column; gap: 6px; }
.cg-card__badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--cg-badge-bg); color: var(--cg-badge-color); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.cg-card__title { margin: 0; font-size: var(--cg-card-title-size); font-weight: var(--cg-card-title-weight, 600); color: var(--cg-card-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.3; }
.cg-card__location { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--cg-card-loc-color); font-size: 14px; }
.cg-card__pin { flex: none; }
.cg-card__icon { color: var(--cg-card-icon-color); line-height: 0; margin-bottom: 4px; }
.cg-card__icon svg, .cg-card__icon img { width: var(--cg-card-icon-size); height: var(--cg-card-icon-size); }
.cg-card__icon img { object-fit: contain; display: block; }
.cg-card__desc { margin: 0; color: var(--cg-card-desc-color); font-size: var(--cg-card-desc-size); line-height: 1.55; overflow-wrap: break-word; }
.cg-card__list { list-style: disc; margin: 8px 0 0; padding: 0 0 0 1.2em; display: flex; flex-direction: column; gap: 4px; }
.cg-card__item { color: var(--cg-list-color); font-size: var(--cg-list-size); line-height: 1.5; overflow-wrap: break-word; }
.cg-card__tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-card__tag { padding: 2px 9px; border-radius: 999px; background: var(--cg-tag-bg); color: var(--cg-tag-color); font-size: 12px; line-height: 1.5; }
.cg-section--tile-bar .cg-card { border-top: var(--cg-tile-bar-h, 6px) solid var(--brand-accent, #c47f3d); }
.cg-section--frei .cg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--cg-min-col, 250px), calc((100% - (var(--cg-cols-d) - 1) * var(--cg-gap, 24px)) / var(--cg-cols-d)))), 1fr)); }
.cg-section--frei .cg-card { background: transparent; border: 0; }
.cg-section--frei .cg-card__body { padding: 0; }
.cg-section--frei .cg-card--link:hover { box-shadow: none; transform: none; }
.cg-card--row .cg-card__body { flex-direction: row; align-items: flex-start; gap: 14px; }
.cg-card--row .cg-card__icon { margin: 3px 0 0; flex: none; }
.cg-card__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-section--head-links .cg-head { text-align: left; }
.cg-section--head-links .cg-subline { margin-left: 0; margin-right: 0; }
.cg-section--badge-schlicht .cg-card__badge { background: none; padding: 0; border-radius: 0; color: var(--cg-badge-ink); font-size: 15px; letter-spacing: 0.1em; }
@media (max-width: 768px) {
  .cg-grid { grid-template-columns: repeat(var(--cg-cols-m), 1fr); }
}

/* ── bausteine/contact-bar.css ── */
/* Kontaktleiste (contact-bar) – Nachbau von ompilot-bridge snippets/blocks/contact-bar.php.
   Gestaltungswerte aus contact-bar.design.json als Variablen mit Rückfall. */
.cb-bar {
  --cb-bg: var(--brand-text);
  --cb-color: var(--brand-text-on-dark, #FFFFFF);
  --cb-link: var(--brand-text-on-dark, #FFFFFF);
  --cb-hover: var(--brand-primary);
  --cb-max-w: var(--brand-content-width, 1200px);
  --cb-px: var(--brand-space-lg, 24px);
  --cb-min-h: 40px;
  --cb-min-h-m: 48px;
  /* Abstand oben und unten, schmal 6 px, damit umrandete Knöpfe nicht an den Rand stoßen. */
  --cb-py: 0px;
  --cb-size: var(--brand-fs-small, 14px);
  --cb-gap: var(--brand-space-lg, 24px);
  --cb-stripe: var(--brand-primary);
  --cb-stripe-h: 3px;
  --cb-z: 110;
  --cb-action-gap: var(--brand-space-sm, 12px);
  --cb-action-px: var(--brand-space-sm, 12px);
  --cb-action-py: var(--brand-space-xs, 8px);
  --cb-action-min-h: 44px;
  --cb-action-radius: var(--brand-radius-sm, 6px);
  --cb-action-bw: var(--brand-border-thin, 1px);
  --cb-action-border: var(--brand-text-on-dark, #FFFFFF);
  --cb-action-size: var(--brand-fs-small, 14px);
  background: var(--cb-bg);
  color: var(--cb-color);
}
/* Mitlaufen: oben stehen. Ein ebenfalls mitlaufender Kopf steht darunter
   (contact-bar.js meldet die Höhe als --ompilot-topbar-height). */
.cb-bar--sticky { position: sticky; top: 0; z-index: var(--cb-z); }
.cb-bar__inner {
  max-width: var(--cb-max-w);
  margin: 0 auto;
  padding: var(--cb-py) var(--cb-px);
  min-height: var(--cb-min-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cb-gap);
  font-size: var(--cb-size);
}
.cb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cb-link);
  text-decoration: none;
  min-height: var(--cb-min-h);
  transition: color 0.2s, opacity 0.2s;
}
.cb-item:hover { color: var(--cb-hover); }
.cb-item:focus-visible { outline: 2px solid var(--cb-color); outline-offset: 2px; border-radius: 3px; }
.cb-item__icon { display: inline-flex; flex: none; }
.cb-item__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-item--address .cb-item__text { max-width: 52vw; }
.cb-bar__stripe { height: var(--cb-stripe-h); background: var(--cb-stripe); }

.cb-bar__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--cb-action-gap); }
.cb-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cb-action-py) var(--cb-action-px);
  border: var(--cb-action-bw) solid var(--cb-action-border);
  border-radius: var(--cb-action-radius);
  color: var(--cb-link);
  font-size: var(--cb-action-size);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.cb-action:hover { color: var(--cb-hover); border-color: var(--cb-hover); }
.cb-action:focus-visible { outline: 2px solid var(--cb-color); outline-offset: 2px; }

/* Schmal: Zeile bleibt stehen, Berührflächen ≥48px (Knöpfe ≥44px). Wird es eng, entfällt die
   Adresse; Nummer (tel:) und E-Mail (mailto:) bleiben und brechen bei Bedarf um.
   Abweichung von der Bridge, die auf dem Handy auch die E-Mail ausblendet. */
@media (max-width: 768px) {
  .cb-bar { --cb-py: 6px; }
  .cb-bar__inner { min-height: var(--cb-min-h-m); gap: 16px; }
  .cb-item { min-height: var(--cb-min-h-m); }
  .cb-action { min-height: var(--cb-action-min-h); }
}
@media (max-width: 480px) {
  .cb-item--address { display: none; }
  .cb-bar__inner { justify-content: center; flex-wrap: wrap; column-gap: 16px; row-gap: 0; padding: var(--cb-py) 16px; }
  .cb-item { min-width: 0; max-width: 100%; }
  .cb-bar--has-actions .cb-bar__inner { flex-wrap: wrap; }
  .cb-bar--has-actions .cb-bar__actions { flex-basis: 100%; margin-left: 0; margin-top: var(--cb-action-gap); }
  .cb-bar--has-actions .cb-action { flex: 1; }
}

/* Kompakt (contactbar_mobile_compact, Baukasten-Erweiterung): schmal nur Nummer und
   Route-Knopf in einer Zeile. Anschrift und E-Mail stehen im mobilen Menü. */
@media (max-width: 768px) {
  .cb-bar--kompakt .cb-item--address, .cb-bar--kompakt .cb-item--email { display: none; }
  .cb-bar--kompakt .cb-bar__inner,
  .cb-bar--kompakt.cb-bar--has-actions .cb-bar__inner { flex-wrap: nowrap; justify-content: space-between; column-gap: 12px; }
  .cb-bar--kompakt .cb-item--phone { min-width: 0; }
  .cb-bar--kompakt.cb-bar--has-actions .cb-bar__actions { flex-basis: auto; margin-left: auto; margin-top: 0; }
  .cb-bar--kompakt.cb-bar--has-actions .cb-action { flex: none; }
}

/* ── bausteine/contact-section.css ── */
/* Kontakt-Abschnitt (contact-section) – Nachbau von ompilot-bridge snippets/blocks/contact-section.php.
   Gestaltungswerte aus contact-section.design.json; Fläche je Exemplar (bx-…).
   Mobile-First: untereinander, Nummer als gefüllter Knopf; breit drei Spalten, Nummer als Textlink. */
.cs-section {
  --cs-bg: var(--brand-bg);
  --cs-pt: var(--brand-section-wide, 80px);
  --cs-pb: var(--brand-section-wide, 80px);
  --cs-max-w: var(--brand-content-width, 1200px);
  --cs-px: var(--brand-space-lg, 24px);
  --cs-gap: var(--brand-space-lg, 32px);
  --cs-cols-d: 1.4fr 1fr 1fr;
  --cs-title-color: var(--brand-heading, var(--brand-text));
  --cs-title-size: var(--brand-fs-h2, 32px);
  --cs-intro-color: var(--brand-lead, var(--brand-text-muted, #6B7280));
  --cs-intro-size: var(--brand-fs-lead, 1.125rem);
  --cs-label-color: var(--brand-text-muted, #6B7280);
  --cs-label-size: var(--brand-fs-eyebrow, 0.875rem);
  --cs-body-color: var(--brand-text);
  --cs-body-size: var(--brand-fs-body, 15px);
  --cs-addr-name-color: var(--brand-heading, var(--brand-text));
  --cs-addr-name-weight: 600;
  --cs-link-color: var(--brand-primary);
  --cs-link-hover: var(--brand-primary-dark, var(--brand-primary));
  --cs-action-fill-bg: var(--brand-action, var(--brand-primary, #1a5f6a));
  --cs-action-fill-color: var(--brand-text-on-action, var(--brand-text-on-dark, #ffffff));
  background: var(--cs-bg);
  padding: var(--cs-pt) 0 var(--cs-pb);
}
.cs-section__inner { max-width: var(--cs-max-w); margin: 0 auto; padding: 0 var(--cs-px); }
.cs-grid { display: grid; grid-template-columns: 1fr; gap: var(--cs-gap); }
.cs-col { min-width: 0; }
.cs-title { margin: 0 0 10px; font-size: var(--cs-title-size); font-weight: var(--brand-font-heading-weight, 700); color: var(--cs-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.15; }
.cs-intro { margin: 0; font-size: var(--cs-intro-size); color: var(--cs-intro-color); line-height: 1.5; }
.cs-label { margin: 0 0 6px; font-size: var(--cs-label-size); font-weight: var(--brand-eyebrow-fw, 600); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-label-color); font-family: var(--brand-font-heading, inherit); }
.cs-address { font-style: normal; display: flex; flex-direction: column; gap: 2px; color: var(--cs-body-color); font-size: var(--cs-body-size); line-height: 1.5; }
.cs-address__name { font-weight: var(--cs-addr-name-weight); color: var(--cs-addr-name-color); }
.cs-col--reach { display: flex; flex-direction: column; gap: 20px; }
.cs-reach__item { display: flex; flex-direction: column; align-items: flex-start; }
.cs-phone-link, .cs-mail-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cs-link-color); font-size: var(--cs-body-size);
  text-decoration: none; word-break: break-word;
}
.cs-phone-link:hover, .cs-mail-link:hover { color: var(--cs-link-hover); text-decoration: underline; }
.cs-phone-link:focus-visible, .cs-mail-link:focus-visible { outline: 2px solid var(--cs-link-color); outline-offset: 2px; border-radius: 3px; }
/* Der Anruf-Knopf trägt die Handlungsfarbe über die geteilten Knopf-Variablen. */
.cs-phone-btn { --ob-fill-bg: var(--cs-action-fill-bg); --ob-fill-color: var(--cs-action-fill-color); --ob-focus: var(--cs-action-fill-bg); margin-top: 4px; }
/* Foto (cs_image, Baukasten-Erweiterung): volle Breite unter der Überschrift,
   darunter Anschrift und Erreichbarkeit nebeneinander. */
.cs-media__img { display: block; width: 100%; height: var(--cs-img-h, 240px); object-fit: cover; border-radius: var(--brand-radius-lg, 12px); }
.cs-route-btn { --ob-fill-bg: var(--cs-action-fill-bg); --ob-fill-color: var(--cs-action-fill-color); --ob-focus: var(--cs-action-fill-bg); margin-top: 16px; min-height: 48px; }
.cs-section--callbtn .cs-phone-link { display: none; }
.cs-section--callbtn .cs-phone-btn { display: inline-flex; }
@media (min-width: 768px) {
  .cs-grid { grid-template-columns: var(--cs-cols-d); align-items: start; }
  .cs-section--bild { --cs-cols-d: 1fr 1fr; --cs-img-h: 420px; }
  .cs-section--bild .cs-col--head, .cs-section--bild .cs-media { grid-column: 1 / -1; }
  .cs-section--callbtn .cs-phone-link { display: inline-flex; }
  .cs-section--callbtn .cs-phone-btn { display: none; }
}

/* cs_head_layout: zweispaltig (Baukasten-Erweiterung) – Kopf wie beim Kopfbild „eingerahmt“
   mit hero_head_layout zweispaltig: Überschrift in H1-Größe, ab 900 px links, Einleitung
   rechts daneben, unten bündig. Foto mit 16 px Radius wie dort. */
.cs-section--zweispaltig { --cs-title-size: var(--brand-fs-h1, 2.25rem); }
.cs-section--zweispaltig .cs-title { line-height: 1.1; }
.cs-section--zweispaltig .cs-media__img { border-radius: var(--brand-radius-xl, 16px); }
@media (min-width: 768px) { .cs-section--zweispaltig { --cs-title-size: 2.875rem; } }
@media (min-width: 900px) {
  .cs-section--zweispaltig .cs-col--head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
  .cs-section--zweispaltig .cs-title { margin-bottom: 0; }
}

/* ── bausteine/cta-banner.css ── */
/* CTA Banner (cta-banner) – Nachbau von ompilot-bridge snippets/blocks/cta-banner.php.
   Gestaltungswerte aus cta-banner.design.json; Fläche (Kennfarbe/Akzent) und Ausrichtung je
   Exemplar (bx-…). Gleiche Klassen wie die Bridge (.cb-banner, .cb-cta …). */
.cb-banner {
  --cb-bg: var(--brand-primary);
  --cb-pt: var(--brand-section-narrow, 64px);
  --cb-pb: var(--brand-section-narrow, 64px);
  --cb-max-w: var(--brand-reading-width, 740px);
  --cb-px: var(--brand-space-lg, 24px);
  --cb-align: center;
  --cb-h-color: var(--brand-text-on-dark, #FFFFFF);
  --cb-h-size: var(--brand-fs-h2, 30px);
  --cb-h-weight: var(--brand-font-heading-weight, 700);
  --cb-h-lh: var(--brand-lh-h2, 1.2);
  --cb-h-mb: var(--brand-space-md, 16px);
  --cb-body-color: rgba(255,255,255,0.85);
  --cb-body-size: var(--brand-fs-subtitle, 18px);
  --cb-body-lh: var(--brand-lh-body, 1.6);
  --cb-body-mb: var(--brand-space-xl, 32px);
  --cb-cta-bg: var(--brand-bg, #FFFFFF);
  --cb-cta-color: var(--brand-primary);
  --cb-cta-height: 52px;
  --cb-cta-px: var(--brand-space-xl, 32px);
  --cb-cta-radius: var(--brand-radius-md, 8px);
  --cb-cta-size: var(--brand-fs-body, 15px);
  --cb-cta-weight: 600;
  background: var(--cb-bg);
  padding: var(--cb-pt) 0 var(--cb-pb);
}
.cb-banner__inner { max-width: var(--cb-max-w); margin: 0 auto; padding: 0 var(--cb-px); text-align: var(--cb-align); }
.cb-headline { margin: 0 0 var(--cb-h-mb); font-size: var(--cb-h-size); font-weight: var(--cb-h-weight); line-height: var(--cb-h-lh); color: var(--cb-h-color); font-family: var(--brand-font-heading, inherit); }
.cb-body { margin: 0 0 var(--cb-body-mb); font-size: var(--cb-body-size); line-height: var(--cb-body-lh); color: var(--cb-body-color); }
.cb-cta { display: inline-flex; align-items: center; justify-content: center; height: var(--cb-cta-height); padding: 0 var(--cb-cta-px); background: var(--cb-cta-bg); color: var(--cb-cta-color); font-size: var(--cb-cta-size); font-weight: var(--cb-cta-weight); border-radius: var(--cb-cta-radius); text-decoration: none; transition: opacity 0.2s; min-height: 48px; min-width: 48px; white-space: nowrap; }
.cb-cta:hover { opacity: 0.9; }
.cb-cta:focus-visible { outline: 2px solid var(--cb-cta-bg); outline-offset: 2px; }
.cb-actions--pair { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.cb-actions--pair .cb-cta, .cb-actions--pair .ompilot-btn { min-height: var(--cb-cta-height); }
.cb-banner--row .cb-banner__inner { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: center; text-align: left; }
.cb-banner--row .cb-headline { grid-column: 1; }
.cb-banner--row .cb-body { grid-column: 1; margin-bottom: 0; }
.cb-banner--row .cb-actions { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; justify-content: flex-start; }
@media (max-width: 700px) {
  .cb-banner--row .cb-banner__inner { grid-template-columns: 1fr; }
  .cb-banner--row .cb-actions { grid-column: 1; grid-row: auto; margin-top: 24px; }
}

/* cb_image (Baukasten-Erweiterung): Foto als abgedunkelter Hintergrund. Das Bild liegt
   hinter dem Inhalt, darüber eine dunkle Schicht für lesbaren weißen Text (Stärke über
   --cb-abdunkeln). Der Abschnitt wird etwas höher. */
.cb-banner--bild {
  --cb-bg: var(--brand-text, #1F2937);
  --cb-h-color: #FFFFFF;
  --cb-body-color: rgba(255,255,255,0.9);
  --cb-cta-bg: var(--brand-bg, #FFFFFF);
  --cb-cta-color: var(--brand-primary);
  --cb-pt: 80px;
  --cb-pb: 80px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cb-banner--bild::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--cb-abdunkeln, 0.55)); }
.cb-banner__hintergrund { position: absolute; inset: 0; z-index: -2; }
.cb-banner__hintergrund picture { display: block; width: 100%; height: 100%; }
.cb-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-banner--bild .cb-headline { text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
@media (min-width: 768px) { .cb-banner--bild { --cb-pt: 112px; --cb-pb: 112px; } }

/* ── bausteine/footer-extended.css ── */
/* Erweiterte Fußfläche (footer-extended) – Nachbau von ompilot-bridge snippets/blocks/footer-extended.php.
   Gestaltungswerte aus footer-extended.design.json als Variablen mit Rückfall; die
   Varianten als Klassen. Seitenspezifische Maße (Spaltenzahl, Panel-Feinabstimmung)
   erzeugt der Bau aus rahmen.json (lib/rahmen.js rahmenCss). */
.fe-footer {
  --fe-pt: var(--brand-section-narrow, 64px);
  --fe-pb: var(--brand-space-2xl, 40px);
  --fe-max-w: var(--brand-content-width, 1200px);
  --fe-px: var(--brand-space-lg, 24px);
  --fe-col-gap: var(--brand-space-2xl, 40px);
  --fe-row-gap: var(--brand-space-xl, 32px);
  --fe-title-size: var(--brand-fs-body, 15px);
  --fe-text-size: var(--brand-fs-small, 14px);
  --fe-logo-max-h: 48px;
  --fe-logo-max-w: 160px;
  --fe-bottom-size: var(--brand-fs-small, 13px);
  --fe-bottom-bg: var(--brand-text, #1F2937);
  --fe-bottom-color: var(--brand-text-on-dark, #FFFFFF);
  --fe-cols: 3;
  background: var(--fe-bg); color: var(--fe-text); padding: var(--fe-pt) 0 0;
}
.fe-footer--marke {
  --fe-bg: var(--brand-primary);
  --fe-text: var(--brand-text-on-dark, #FFFFFF);
  --fe-title: var(--brand-text-on-dark, #FFFFFF);
  --fe-muted: rgba(255,255,255,0.72);
  --fe-link: var(--brand-text-on-dark, #FFFFFF);
  --fe-link-hover: var(--brand-text-on-dark, #FFFFFF);
  --fe-divider: rgba(255,255,255,0.22);
}
.fe-footer--marke_dunkel {
  --fe-bg: var(--brand-primary-dark, #0E2A4B);
  --fe-text: rgba(255,255,255,0.72);
  --fe-title: var(--brand-text-on-dark, #FFFFFF);
  --fe-muted: rgba(255,255,255,0.62);
  --fe-link: rgba(255,255,255,0.8);
  --fe-link-hover: var(--brand-accent, #E3C05C);
  --fe-divider: rgba(255,255,255,0.16);
}
.fe-footer--gedeckt {
  --fe-bg: var(--brand-bg-dark, #1A2226);
  --fe-text: rgba(255,255,255,0.82);
  --fe-title: var(--brand-text-on-dark, #FFFFFF);
  --fe-muted: rgba(255,255,255,0.55);
  --fe-link: rgba(255,255,255,0.82);
  --fe-link-hover: var(--brand-text-on-dark, #FFFFFF);
  --fe-divider: rgba(255,255,255,0.12);
}

/* Mittiger Einspalter */
.fe-center { text-align: center; max-width: var(--fe-max-w); margin: 0 auto; padding: 0 var(--fe-px) var(--fe-pb); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fe-center__logo { width: 48px; height: 48px; object-fit: contain; }
.fe-center__name { margin: 6px 0 0; font-family: var(--brand-font-heading, inherit); font-size: var(--brand-fs-subtitle, 1.125rem); color: var(--fe-text); }
.fe-center__addr { margin: 0; color: var(--fe-muted); line-height: 1.5; }
.fe-center__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-top: 4px; }
.fe-center__link { color: var(--brand-accent, #E3C05C); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.fe-center__link:hover, .fe-center__link:focus-visible { opacity: 0.85; }
.fe-center__sep { color: var(--fe-muted); }
.fe-center__copy { margin: 8px 0 0; font-size: var(--fe-bottom-size); color: var(--fe-muted); opacity: 0.75; }

/* Spalten */
.fe-footer__inner {
  max-width: var(--fe-max-w); margin: 0 auto; padding: 0 var(--fe-px);
  display: flex; gap: var(--fe-col-gap); align-items: stretch;
}
.fe-body { flex: 1 1 auto; min-width: 0; }
.fe-grid { display: grid; grid-template-columns: repeat(var(--fe-cols), 1fr); gap: var(--fe-row-gap) var(--fe-col-gap); }
.fe-col { min-width: 0; }
.fe-col__title { margin: 0 0 12px; font-size: var(--fe-title-size); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fe-title); font-family: var(--brand-font-heading, inherit); }
.fe-col__text { font-size: var(--fe-text-size); line-height: 1.6; color: var(--fe-text); }
.fe-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fe-col__note { margin: 10px 0 0; font-size: var(--fe-bottom-size, 13px); line-height: 1.65; color: var(--fe-muted); }
.fe-link { color: var(--fe-link); text-decoration: none; font-size: var(--fe-text-size); transition: color 0.2s; display: inline-flex; align-items: center; min-height: 48px; }
.fe-link:hover { color: var(--fe-link-hover); text-decoration: underline; }
.fe-link:focus-visible { outline: 2px solid var(--fe-link-hover); outline-offset: 2px; border-radius: 3px; }

.fe-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.fe-logo { display: inline-flex; align-items: center; background: rgba(255,255,255,0.92); border-radius: var(--brand-radius-sm, 6px); padding: 8px 10px; }
.fe-logo--link { min-height: 48px; min-width: 48px; justify-content: center; transition: opacity 0.2s; }
.fe-logo--link:hover { opacity: 0.85; }
.fe-logo--link:focus-visible { outline: 2px solid var(--fe-link-hover); outline-offset: 3px; }
.fe-logo__img { display: block; height: auto; width: auto; max-height: var(--fe-logo-max-h); max-width: var(--fe-logo-max-w); object-fit: contain; }
.fe-logos__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--fe-muted); }
.fe-logos--plain .fe-logo { background: transparent; border-radius: 0; padding: 0; }

.fe-verein { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fe-verein__logo { display: inline-flex; align-items: center; background: rgba(255,255,255,0.92); border-radius: var(--brand-radius-sm, 6px); padding: 8px 10px; }
.fe-verein__logo--plain { background: transparent; border-radius: 0; padding: 0; }
.fe-verein__logo--kreis { background: #fff; border-radius: 50%; padding: 5px; width: 64px; height: 64px; box-sizing: border-box; align-items: center; justify-content: center; }
.fe-verein__logo--kreis .fe-logo__img { max-height: none; max-width: none; width: 100%; height: 100%; object-fit: contain; }
.fe-verein__name { margin: 0; font-family: var(--brand-font-heading, inherit); font-weight: var(--brand-font-heading-weight, 700); font-size: var(--fe-title-size); line-height: 1.3; color: var(--fe-title); }
.fe-verein__addr { font-style: normal; margin: 0; font-size: var(--fe-text-size); line-height: 1.65; color: var(--fe-muted); }

.fe-contact { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.fe-contact__row { font-size: var(--fe-text-size); line-height: 1.5; }
/* Abweichend von der Bridge: Abstand zwischen Bezeichnung und Wert (im Flex-Element
   geht das Leerzeichen sonst verloren). */
.fe-link.fe-contact__row { gap: 0.3em; }
.fe-contact__row--plain { color: var(--fe-text); min-height: 0; }
.fe-contact__label { color: var(--fe-muted); }

.fe-image { flex: 0 0 320px; align-self: stretch; border-radius: var(--brand-radius-lg, 12px); overflow: hidden; }
.fe-image picture { display: block; height: 100%; }
.fe-image__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Abschlusszeile: eigener dunkler Grund wie die Kontaktleiste oben. */
.fe-bottom { margin-top: var(--fe-pb); background: var(--fe-bottom-bg); border-top: var(--brand-border-thin, 1px) solid var(--fe-divider); }
.fe-bottom--zentriert { border-top: 0; }
.fe-bottom--zentriert .fe-bottom__inner { border-top: var(--brand-border-thin, 1px) solid var(--fe-divider); }
.fe-bottom__inner {
  max-width: var(--fe-max-w); margin: 0 auto; padding: 16px var(--fe-px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.fe-bottom__note { margin: 0; font-size: var(--fe-bottom-size); color: var(--fe-bottom-color); }
.fe-bottom__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.fe-bottom__links .fe-link { font-size: var(--fe-bottom-size); min-height: 48px; }
.fe-bottom__right { margin-left: auto; font-size: var(--fe-bottom-size); min-height: 48px; }
.fe-bottom .fe-link { color: var(--fe-bottom-color); }
.fe-bottom .fe-link:hover { color: var(--fe-bottom-color); text-decoration: underline; }
.fe-bottom .fe-link:focus-visible { outline-color: var(--fe-bottom-color); }
.fe-center .sz-social-nav { color: var(--brand-accent, #E3C05C); margin-top: 2px; }
.fe-bottom__social { display: flex; justify-content: center; padding: 0 var(--fe-px) 14px; color: var(--brand-accent, #E3C05C); }

.fe-footer--titles-normal .fe-col__title { text-transform: none; letter-spacing: normal; }
.fe-footer--eng .fe-col__links { gap: 0; }
.fe-footer--eng .fe-link { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.fe-footer--bottom-eben .fe-bottom { background: transparent; }
.fe-footer--bottom-eben .fe-bottom__inner { padding-top: 20px; padding-bottom: 24px; justify-content: flex-start; gap: 20px; }
.fe-footer--bottom-eben .fe-bottom__note { color: var(--fe-text); font-size: var(--fe-bottom-size); }
.fe-footer--bottom-eben .fe-bottom .fe-link { color: var(--fe-link); }
.fe-footer--bottom-eben .fe-bottom .fe-link:hover { color: var(--fe-link-hover); }

/* Schmal: Spalten untereinander, Bild darunter oder ausgeblendet. Kein Überlauf. */
@media (max-width: 900px) {
  .fe-footer__inner { flex-direction: column; gap: var(--fe-row-gap); }
  .fe-grid { grid-template-columns: 1fr; }
  .fe-image { flex: none; }
  .fe-image--hidden { display: none; }
  .fe-image--below { order: 2; min-height: 200px; }
  .fe-bottom__inner { flex-direction: column; align-items: flex-start; }
  .fe-bottom__right { margin-left: 0; }
}
/* Handy: Rechtslinks und der Link rechts untereinander, linksbündig, gleiche Abstände */
@media (max-width: 767px) {
  .fe-bottom__inner { gap: 0; }
  .fe-bottom__links { flex-direction: column; gap: 0; }
}

/* ── bausteine/funnel-form.css ── */
/* Anfrageformular, Betriebsart „reservierung“ (funnel-form) – Nachbau von
   ompilot-bridge snippets/blocks/reservation-form.php (2.77.0). Werte aus
   reservation-form.design.json, Regeln wie in der Bridge. Ergänzt: Fehler je
   Feld, Hinweis ohne JavaScript, Ladezustand ohne Inline-Stil. */
.rf-section {
  --rf-pt: var(--brand-section-narrow, 64px);
  --rf-pb: var(--brand-section-narrow, 64px);
  --rf-max-w: var(--brand-reading-width, 740px);
  --rf-px: var(--brand-space-lg, 24px);
  --rf-head-title-color: var(--brand-text, #1F2937);
  --rf-head-title-size: var(--brand-fs-h2, 27px);
  --rf-head-sub-color: var(--brand-primary, #3A5F66);
  --rf-head-sub-size: var(--brand-fs-h5, 17px);
  --rf-head-text-color: var(--brand-text-muted, #6B7280);
  --rf-head-text-size: var(--brand-fs-body, 15px);
  --rf-p-circle: 28px;
  --rf-p-active-bg: var(--brand-primary, #3A5F66);
  --rf-p-active-text: var(--brand-text-on-dark, #FFFFFF);
  --rf-p-open-bg: var(--brand-bg, #FFFFFF);
  --rf-p-open-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-p-open-text: var(--brand-text-muted, #6B7280);
  --rf-p-line: var(--brand-border, rgba(0,0,0,0.14));
  --rf-p-line-done: var(--brand-primary, #3A5F66);
  --rf-p-label-active: var(--brand-primary-dark, #2C4A50);
  --rf-p-label-muted: var(--brand-text-muted, #6B7280);
  --rf-card-bg: var(--brand-bg-muted, #FFFFFF);
  --rf-card-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-card-radius: var(--brand-radius-lg, 14px);
  --rf-frage-color: var(--brand-text, #1F2937);
  --rf-frage-size: var(--brand-fs-h4, 19px);
  --rf-frage-sub-color: var(--brand-text-muted, #6B7280);
  --rf-frage-sub-size: var(--brand-fs-small, 14px);
  --rf-tile-bg: var(--brand-bg, #FFFFFF);
  --rf-tile-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-tile-radius: var(--brand-radius-md, 10px);
  --rf-tile-sel-bg: color-mix(in srgb, var(--brand-primary, #3A5F66) 8%, var(--brand-bg, #FFFFFF));
  --rf-tile-sel-border: var(--brand-primary, #3A5F66);
  --rf-tile-sym: var(--brand-primary, #3A5F66);
  --rf-tile-sym-sel: var(--brand-primary-dark, #2C4A50);
  --rf-tile-title: var(--brand-text, #1F2937);
  --rf-tile-sub: var(--brand-text-muted, #6B7280);
  --rf-step-btn: 46px;
  --rf-step-btn-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-step-btn-bg: var(--brand-bg, #FFFFFF);
  --rf-step-btn-color: var(--brand-primary-dark, #2C4A50);
  --rf-step-radius: var(--brand-radius-md, 10px);
  --rf-step-num-size: 34px;
  --rf-step-num-color: var(--brand-text, #1F2937);
  --rf-step-hint-color: var(--brand-text-muted, #6B7280);
  --rf-time-bg: var(--brand-bg, #FFFFFF);
  --rf-time-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-time-radius: var(--brand-radius-sm, 8px);
  --rf-time-sel-bg: color-mix(in srgb, var(--brand-primary, #3A5F66) 8%, var(--brand-bg, #FFFFFF));
  --rf-time-sel-border: var(--brand-primary, #3A5F66);
  --rf-time-sel-color: var(--brand-primary-dark, #2C4A50);
  --rf-field-label: var(--brand-text, #1F2937);
  --rf-field-opt: var(--brand-text-muted, #6B7280);
  --rf-field-bg: var(--brand-bg, #FFFFFF);
  --rf-field-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-field-radius: var(--brand-radius-sm, 8px);
  --rf-focus: var(--brand-primary, #3A5F66);
  --rf-sum-bg: color-mix(in srgb, var(--brand-secondary, #655228) 6%, var(--brand-bg, #FFFFFF));
  --rf-sum-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-sum-radius: var(--brand-radius-md, 10px);
  --rf-sum-label: var(--brand-secondary, #655228);
  --rf-sum-row: var(--brand-border, rgba(0,0,0,0.10));
  --rf-sum-key: var(--brand-text-muted, #6B7280);
  --rf-sum-value: var(--brand-text, #1F2937);
  --rf-consent-box: var(--brand-border, rgba(0,0,0,0.14));
  --rf-consent-accent: var(--brand-primary, #3A5F66);
  --rf-consent-text: var(--brand-text-muted, #6B7280);
  --rf-consent-link: var(--brand-primary-dark, #2C4A50);
  --rf-btn-bg: var(--brand-action, var(--brand-primary, #3A5F66));
  --rf-btn-text: var(--brand-text-on-action, var(--brand-text-on-dark, #FFFFFF));
  --rf-btn2-bg: var(--brand-bg, #FFFFFF);
  --rf-btn2-border: var(--brand-border, rgba(0,0,0,0.14));
  --rf-btn2-text: var(--brand-text-muted, #6B7280);
  --rf-btn-radius: var(--brand-radius-md, 10px);
  --rf-btn-height: 48px;
  --rf-phone-color: var(--brand-text-muted, #6B7280);
  --rf-phone-strong: var(--brand-text, #1F2937);
  --rf-ok-circle-bg: color-mix(in srgb, var(--brand-primary, #3A5F66) 12%, var(--brand-bg, #FFFFFF));
  --rf-ok-circle-color: var(--brand-primary-dark, #2C4A50);
  --rf-ok-title: var(--brand-text, #1F2937);
  --rf-ok-text: var(--brand-text-muted, #6B7280);
  --rf-touch: 48px;
  padding: var(--rf-pt) 0 var(--rf-pb);
}
.rf-section [hidden] { display: none !important; }
.rf-inner { position: relative; max-width: var(--rf-max-w); margin: 0 auto; padding: 0 var(--rf-px); }
.rf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf */
.rf-head { text-align: center; margin-bottom: 26px; }
.rf-head__title { margin: 0 0 6px; font-size: var(--rf-head-title-size); font-weight: 700; color: var(--rf-head-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.15; letter-spacing: -0.01em; }
.rf-head__sub { margin: 0 0 10px; font-size: var(--rf-head-sub-size); font-weight: 600; color: var(--rf-head-sub-color); }
.rf-head__text { margin: 0; font-size: var(--rf-head-text-size); line-height: 1.65; color: var(--rf-head-text-color); }

/* Fortschritt */
.rf-fort { list-style: none; display: flex; align-items: center; gap: 0; margin: 0 0 26px; padding: 0; }
.rf-fort__pkt { display: flex; align-items: center; gap: 9px; flex: none; }
.rf-fort__kreis { width: var(--rf-p-circle); height: var(--rf-p-circle); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; flex: none; background: var(--rf-p-open-bg); color: var(--rf-p-open-text); border: var(--brand-border-thin, 1px) solid var(--rf-p-open-border); }
.rf-fort__pkt[aria-current="step"] .rf-fort__kreis { background: var(--rf-p-active-bg); color: var(--rf-p-active-text); border-color: var(--rf-p-active-bg); }
.rf-fort__pkt[data-rf-done="1"] .rf-fort__kreis { background: var(--rf-p-active-bg); color: var(--rf-p-active-text); border-color: var(--rf-p-active-bg); }
.rf-fort__txt { font-size: 0.8125rem; font-weight: 400; color: var(--rf-p-label-muted); }
.rf-fort__pkt[aria-current="step"] .rf-fort__txt, .rf-fort__pkt[data-rf-done="1"] .rf-fort__txt { font-weight: 600; color: var(--rf-p-label-active); }
.rf-fort__strich { flex: 1; height: 2px; background: var(--rf-p-line); margin: 0 12px; }
.rf-fort__strich[data-done="1"] { background: var(--rf-p-line-done); }
@media (max-width: 560px) { .rf-fort__txt { display: none; } .rf-fort__strich { margin: 0 8px; } }

/* Karte */
.rf-card { background: var(--rf-card-bg); border: var(--brand-border-thin, 1px) solid var(--rf-card-border); border-radius: var(--rf-card-radius); padding: 28px; }
@media (max-width: 480px) { .rf-card { padding: 20px 18px; } }
.rf-frage { font-size: var(--rf-frage-size); font-weight: 700; margin: 0 0 4px; color: var(--rf-frage-color); font-family: var(--brand-font-heading, inherit); line-height: 1.25; }
.rf-frage:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 3px; border-radius: 3px; }
.rf-frage--klein { font-size: 1rem; margin: 20px 0 12px; }
.rf-frage-sub { font-size: var(--rf-frage-sub-size); color: var(--rf-frage-sub-color); margin: 0 0 20px; line-height: 1.55; }

/* Anlass-Kacheln */
.rf-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; }
@media (max-width: 480px) { .rf-kacheln { grid-template-columns: repeat(2, 1fr); gap: 10px; } .rf-kachel:last-child:nth-child(odd) { grid-column: span 2; } }
.rf-kachel { border: 1.5px solid var(--rf-tile-border); border-radius: var(--rf-tile-radius); padding: 16px 12px; text-align: center; background: var(--rf-tile-bg); cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: var(--rf-touch); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.rf-kachel:hover { border-color: var(--rf-tile-sel-border); }
.rf-kachel:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 2px; }
.rf-kachel[aria-pressed="true"] { border-color: var(--rf-tile-sel-border); background: var(--rf-tile-sel-bg); box-shadow: inset 0 0 0 1px var(--rf-tile-sel-border); }
.rf-kachel__sym { color: var(--rf-tile-sym); margin-bottom: 5px; display: inline-flex; }
.rf-kachel[aria-pressed="true"] .rf-kachel__sym { color: var(--rf-tile-sym-sel); }
.rf-kachel__titel { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--rf-tile-title); }
.rf-kachel__sub { font-size: 0.78rem; color: var(--rf-tile-sub); }

/* Personen-Stepper */
.rf-stepper { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 4px; }
.rf-stepper__btn { width: var(--rf-step-btn); height: var(--rf-step-btn); min-width: var(--rf-touch); min-height: var(--rf-touch); border-radius: var(--rf-step-radius); border: 1.5px solid var(--rf-step-btn-border); background: var(--rf-step-btn-bg); font-size: 1.375rem; color: var(--rf-step-btn-color); line-height: 1; cursor: pointer; }
.rf-stepper__btn:hover:not(:disabled) { border-color: var(--rf-focus); }
.rf-stepper__btn:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 2px; }
.rf-stepper__btn:disabled { opacity: 0.4; cursor: default; }
.rf-stepper__zahl { font-size: var(--rf-step-num-size); font-weight: 700; min-width: 70px; text-align: center; color: var(--rf-step-num-color); }
.rf-stepper__hint { text-align: center; font-size: 0.8125rem; color: var(--rf-step-hint-color); margin: 4px 0 0; }

/* Zeitkacheln */
.rf-zeiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 480px) { .rf-zeiten { grid-template-columns: repeat(3, 1fr); } }
.rf-zeiten__platz, .rf-zeiten__msg { grid-column: 1 / -1; margin: 0; color: var(--rf-frage-sub-color); font-size: 0.8125rem; }
.rf-zeiten[aria-busy="true"] { opacity: 0.65; }
.rf-zeiten__loading { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--rf-frage-sub-color); font-size: 0.8125rem; }
.rf-zeiten__spinner { width: 18px; height: 18px; flex: none; border: 2px solid var(--rf-time-border); border-top-color: var(--rf-focus); border-radius: 50%; animation: rf-spin 0.7s linear infinite; }
@keyframes rf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rf-zeiten__spinner { animation-duration: 2s; } }
.rf-zeit { border: 1.5px solid var(--rf-time-border); border-radius: var(--rf-time-radius); padding: 11px 4px; text-align: center; font-size: 0.9rem; font-weight: 600; background: var(--rf-time-bg); color: var(--rf-frage-color); cursor: pointer; font-family: inherit; min-height: var(--rf-touch); }
.rf-zeit:hover { border-color: var(--rf-time-sel-border); }
.rf-zeit:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 2px; }
.rf-zeit[aria-pressed="true"] { border-color: var(--rf-time-sel-border); background: var(--rf-time-sel-bg); color: var(--rf-time-sel-color); }
.rf-freetime { grid-column: 1 / -1; }

/* Felder */
.rf-feldreihe { display: flex; gap: 14px; margin-bottom: 14px; }
@media (max-width: 480px) { .rf-feldreihe { flex-direction: column; gap: 14px; } }
.rf-field { flex: 1; }
.rf-form:not([data-rf-wizard]) .rf-field { margin-bottom: 14px; }
.rf-label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 6px; color: var(--rf-field-label); }
.rf-opt { font-weight: 400; color: var(--rf-field-opt); font-size: 0.78rem; }
.rf-input { width: 100%; box-sizing: border-box; min-height: var(--rf-touch); border: var(--brand-border-thin, 1px) solid var(--rf-field-border); border-radius: var(--rf-field-radius); background: var(--rf-field-bg); padding: 0 12px; font: inherit; font-size: 0.9rem; color: var(--rf-frage-color); }
.rf-textarea { min-height: 88px; padding: 11px 12px; resize: vertical; }
.rf-input:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 1px; border-color: var(--rf-focus); }
.rf-input[aria-invalid="true"] { border-color: var(--rf-focus); }

/* Zusammenfassung */
.rf-zus { background: var(--rf-sum-bg); border: var(--brand-border-thin, 1px) solid var(--rf-sum-border); border-radius: var(--rf-sum-radius); padding: 16px 18px; margin-bottom: 18px; }
.rf-zus__titel { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--rf-sum-label); margin-bottom: 10px; }
.rf-zus__zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; padding: 5px 0; }
.rf-zus__zeile + .rf-zus__zeile { border-top: var(--brand-border-thin, 1px) solid var(--rf-sum-row); }
.rf-zus__k { color: var(--rf-sum-key); }
.rf-zus__v { font-weight: 600; color: var(--rf-sum-value); text-align: right; }

/* Einwilligung */
.rf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; color: var(--rf-consent-text); line-height: 1.55; margin: 18px 0 20px; }
.rf-consent__box { width: 18px; height: 18px; min-width: 18px; margin-top: 1px; accent-color: var(--rf-consent-accent); }
.rf-consent__box:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 2px; }
.rf-consent__link { color: var(--rf-consent-link); text-decoration: underline; }

/* Fehler */
.rf-errors .rf-lead-tel { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.rf-errors { margin: 0 0 16px; padding: 12px 14px; border: var(--brand-border-thin, 1px) solid var(--rf-focus); border-radius: var(--rf-field-radius); color: var(--rf-frage-color); font-size: 0.8125rem; }

/* Knöpfe */
.rf-knopfreihe { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.rf-btn { min-height: var(--rf-btn-height); height: var(--rf-btn-height); border-radius: var(--rf-btn-radius); font-size: 0.9375rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 26px; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; }
.rf-btn--primary { background: var(--rf-btn-bg); color: var(--rf-btn-text); flex: 1; }
.rf-btn--primary:hover:not(:disabled) { filter: brightness(0.94); }
.rf-btn--primary:disabled { opacity: 0.5; cursor: default; }
.rf-btn--zurueck { background: var(--rf-btn2-bg); color: var(--rf-btn2-text); border-color: var(--rf-btn2-border); padding: 0 20px; }
.rf-btn--zurueck:hover { border-color: var(--rf-focus); color: var(--rf-focus); }
.rf-btn:focus-visible { outline: 2px solid var(--rf-focus); outline-offset: 2px; }
.rf-btn__arrow { flex: none; }

/* Telefon-Alternative */
.rf-phone { text-align: center; font-size: 0.84rem; color: var(--rf-phone-color); margin: 14px 0 0; }
.rf-phone__link { color: var(--rf-phone-strong); font-weight: 700; text-decoration: none; min-height: var(--rf-touch); display: inline-flex; align-items: center; }
.rf-phone__link:hover { text-decoration: underline; }

/* Bestätigung */
.rf-ok { text-align: center; padding: 12px 0; }
.rf-ok__haken { width: 60px; height: 60px; border-radius: 50%; background: var(--rf-ok-circle-bg); color: var(--rf-ok-circle-color); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.rf-ok__title { font-size: 1.375rem; font-weight: 700; margin: 0 0 8px; color: var(--rf-ok-title); font-family: var(--brand-font-heading, inherit); }
.rf-ok__text { font-size: 0.9375rem; line-height: 1.65; color: var(--rf-ok-text); margin: 0 auto; max-width: 400px; }
.rf-ok__phone { margin: 16px 0 0; font-size: 0.875rem; color: var(--rf-phone-color); }
.rf-ok__phone a { color: var(--rf-phone-strong); font-weight: 700; text-decoration: none; }

/* Honeypot */
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ergänzungen im Baukasten */
.rf-feldfehler { margin: 6px 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--brand-danger, #B23B3B); }
.rf-input[aria-invalid="true"] { border-color: var(--brand-danger, #B23B3B); box-shadow: inset 0 0 0 1px var(--brand-danger, #B23B3B); }
.rf-consent__box[aria-invalid="true"] { outline: 2px solid var(--brand-danger, #B23B3B); outline-offset: 2px; }
.rf-consent + .rf-feldfehler { margin: -12px 0 16px 28px; }
.rf-errors:focus { outline: 2px solid var(--rf-focus); outline-offset: 2px; }
/* Telefon in der Ausfall-Meldung: eigene Zeile, damit die 48px-Zielhöhe keine Lücke in den Text reißt */
.rf-errors .rf-lead-tel { display: flex; width: fit-content; }
.rf-zeiten__label { grid-column: 1 / -1; display: block; font-size: 0.8125rem; font-weight: 600; margin: 4px 0 0; color: var(--rf-field-label); }
.rf-ohnejs { background: var(--rf-card-bg); border: var(--brand-border-thin, 1px) solid var(--rf-card-border); border-radius: var(--rf-card-radius); padding: 24px 28px; text-align: center; color: var(--rf-frage-color); }
.rf-ohnejs__text { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.6; }
.rf-ohnejs__wege { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.rf-ohnejs__wege a { display: inline-flex; align-items: center; min-height: var(--rf-touch); color: var(--rf-phone-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
/* Meldung der Plattform zu Anlass oder Datum/Uhrzeit (Feldfehler aus plugin_lead) */
.rf-schrittfehler { margin: 16px 0 0; padding: 12px 14px; border: var(--brand-border-thin, 1px) solid var(--brand-danger, #B23B3B); border-radius: var(--rf-field-radius); color: var(--rf-frage-color); font-size: 0.875rem; }

/* ── bausteine/gallery-grid.css ── */
/* Galerie (gallery-grid) – Nachbau von ompilot-bridge snippets/blocks/gallery-grid.css.
   Gestaltungswerte aus gallery-grid.design.json; Fläche, Spalten, Seitenverhältnis je
   Exemplar (bx-…). Begrenzung über <details>, Großansicht als Dialog. */
.og-section {
  --og-bg: var(--brand-bg, #FFFFFF);
  --og-pt: var(--brand-section-wide, 80px);
  --og-pb: var(--brand-section-wide, 80px);
  --og-max-w: var(--brand-content-width, 1200px);
  --og-px: var(--brand-space-lg, 24px);
  --og-gap: var(--brand-space-sm, 12px);
  --og-radius: var(--brand-radius-lg, 10px);
  --og-cols-d: 3;
  --og-cols-m: 2;
  --og-ratio: 1 / 1;
  --og-title-size: var(--brand-fs-h2, 30px);
  --og-overlay: rgba(0,0,0,0.35);
  --og-zoom-color: var(--brand-text-on-dark, #FFFFFF);
  --og-accent: var(--brand-primary);
  background: var(--og-bg);
  padding: var(--og-pt) 0 var(--og-pb);
}
.og-section__inner { max-width: var(--og-max-w); margin: 0 auto; padding: 0 var(--og-px); }
.og-head { text-align: center; margin-bottom: 32px; }
.og-title { margin: 0 0 8px; font-size: var(--og-title-size); font-weight: 600; color: var(--og-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.2; }
.og-subline { margin: 0; color: var(--og-subline-color); font-size: 1.0625rem; line-height: 1.6; }

.og-item { display: block; position: relative; width: 100%; overflow: hidden; border-radius: var(--og-radius); line-height: 0; }
.og-item picture { display: block; height: 100%; }
.og-item__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.og-item__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--og-zoom-color); background: var(--og-overlay); opacity: 0; transition: opacity 150ms ease; }
.og-item:hover .og-item__zoom, .og-item:focus-visible .og-item__zoom { opacity: 1; }
/* Ohne Großansicht (gallery_zoom: false): reines Bild, kein Link. */
.og-item--still { cursor: default; }

.og-featured { margin-bottom: var(--og-gap); }
.og-item--featured { aspect-ratio: 16 / 7; }
@media (max-width: 767px) { .og-item--featured { aspect-ratio: 4 / 3; } }

.og-grid { list-style: none; margin: 0; padding: 0; }
.og-grid--uniform { display: grid; gap: var(--og-gap); grid-template-columns: repeat(var(--og-cols-m), 1fr); }
@media (min-width: 768px) { .og-grid--uniform { grid-template-columns: repeat(var(--og-cols-d), 1fr); } }
.og-grid--uniform .og-item { aspect-ratio: var(--og-ratio, 1 / 1); }
.og-grid--uniform .og-cell--hoch { grid-row: span 2; }
.og-grid--uniform .og-cell--hoch .og-item { aspect-ratio: auto; height: 100%; }
.og-grid--asym { columns: var(--og-cols-m); column-gap: var(--og-gap); }
@media (min-width: 768px) { .og-grid--asym { columns: var(--og-cols-d); } }
.og-grid--asym .og-cell { break-inside: avoid; margin-bottom: var(--og-gap); }
.og-grid--asym .og-item__img { height: auto; }
.og-cell { margin: 0; padding: 0; }
.og-grid--weitere { margin-top: var(--og-gap); }

/* Schieber (gallery_layout "slider", Baukasten-Erweiterung): eine Reihe, blättert um
   die sichtbare Breite. Breit stehen die Pfeile neben der Reihe, schmal darunter neben
   der Positionsangabe, damit die Bilder die volle Breite bekommen. */
.og-slider { --og-sl-btn: 48px; }
.og-slider__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--og-gap); align-items: center; }
.og-slider__track { list-style: none; margin: 0; padding: 0; min-width: 0; display: flex; gap: var(--og-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.og-slider__track::-webkit-scrollbar { display: none; }
.og-slider__track .og-cell { flex: 0 0 calc((100% - (var(--og-cols-m) - 1) * var(--og-gap)) / var(--og-cols-m)); scroll-snap-align: start; }
.og-slider__track .og-item { aspect-ratio: var(--og-ratio, 1 / 1); }
.og-slider__btn { display: none; align-items: center; justify-content: center; width: var(--og-sl-btn); height: var(--og-sl-btn); background: var(--brand-bg, #FFFFFF); color: var(--brand-text, #1F2937); border: var(--brand-border-thin, 1px) solid var(--brand-border, rgba(0,0,0,0.12)); border-radius: var(--brand-radius-md, 8px); cursor: pointer; transition: color 0.2s, border-color 0.2s, opacity 0.2s; }
.og-slider__btn:hover:not(:disabled) { color: var(--og-accent); border-color: var(--og-accent); }
.og-slider__btn:disabled { opacity: 0.35; cursor: default; }
.og-slider__btn:focus-visible, .og-slider__track:focus-visible { outline: 3px solid var(--og-accent); outline-offset: 2px; }
.og-slider__status { margin: 12px 0 0; min-height: 1.5em; text-align: center; color: var(--brand-text-muted, #6B7280); font-size: var(--brand-fs-small, 14px); }
/* Mit JavaScript: ein Raster aus Reihe, Pfeilen und Positionsangabe. */
html.js .og-slider { display: grid; grid-template-columns: var(--og-sl-btn) minmax(0, 1fr) var(--og-sl-btn); grid-template-areas: "track track track" "prev status next"; column-gap: var(--og-gap); row-gap: 12px; align-items: center; }
html.js .og-slider__row { display: contents; }
html.js .og-slider__track { grid-area: track; }
html.js .og-slider__btn { display: inline-flex; }
html.js .og-slider__btn--prev { grid-area: prev; }
html.js .og-slider__btn--next { grid-area: next; }
html.js .og-slider__status { grid-area: status; margin: 0; }
@media (min-width: 768px) {
  .og-slider__track .og-cell { flex-basis: calc((100% - (var(--og-cols-d) - 1) * var(--og-gap)) / var(--og-cols-d)); }
  html.js .og-slider { grid-template-areas: "prev track next" ". status ."; }
}
/* gallery_show_status: false – Positionsangabe nur für Bildschirmleser, Pfeile ohne Lücke dazwischen */
.og-slider__status--leise { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.js .og-slider--ohne-status { grid-template-areas: "track track track" "prev . next"; }
@media (min-width: 768px) { html.js .og-slider--ohne-status { grid-template-areas: "prev track next"; } }
html:not(.js) .og-slider__track { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) { .og-slider__track { scroll-behavior: auto; } }

/* „Alle Bilder ansehen“: <details> statt Skript-Schalter; offen verschwindet die Zeile. */
.og-more { margin-top: 24px; }
.og-more__btn { list-style: none; width: max-content; margin: 0 auto; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 24px; border: 1px solid var(--og-accent); border-radius: var(--og-radius); background: none; color: var(--og-accent); font-size: 1rem; font-weight: 500; cursor: pointer; }
.og-more__btn::-webkit-details-marker { display: none; }
.og-more[open] > .og-more__btn { display: none; }
.og-more__count { opacity: 0.7; }

/* Großansicht */
.og-lightbox {
  --og-backdrop: rgba(0,0,0,0.92);
  --og-btn-bg: rgba(255,255,255,0.12);
  --og-btn-color: var(--brand-text-on-dark, #FFFFFF);
  --og-caption-color: rgba(255,255,255,0.9);
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--og-backdrop);
}
.og-lightbox[hidden] { display: none; }
.og-lightbox__backdrop { position: absolute; inset: 0; }
.og-lightbox__figure { position: relative; margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 1; }
.og-lightbox__img { max-width: 92vw; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; touch-action: pan-y; }
.og-lightbox__caption { color: var(--og-caption-color); font-size: 0.9375rem; text-align: center; max-width: 60ch; }
.og-lightbox__caption[hidden] { display: none; }
.og-lightbox__btn { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border: 0; border-radius: 50%; background: var(--og-btn-bg); color: var(--og-btn-color); cursor: pointer; }
.og-lightbox__btn[hidden] { display: none; }
.og-lightbox__close { top: 16px; right: 16px; }
.og-lightbox__nav { top: 50%; transform: translateY(-50%); }
.og-lightbox__prev { left: 12px; }
.og-lightbox__next { right: 12px; }
.og-lightbox__counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--og-caption-color); font-size: 0.875rem; z-index: 2; }
.og-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.dialog-offen, html.dialog-offen body { overflow: hidden; }

.og-item:focus-visible, .og-more__btn:focus-visible { outline: 3px solid var(--og-accent); outline-offset: 2px; }
.og-lightbox__btn:focus-visible { outline: 3px solid var(--og-btn-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .og-item__zoom { transition: none; }
}

/* ── bausteine/header-solid.css ── */
/* Mittiger Kopf (header-solid) – Nachbau von ompilot-bridge snippets/blocks/header-solid.php.
   Gestaltungswerte aus header-solid.design.json als Variablen mit Rückfall. */
.hs2-header {
  --hs2-bg: var(--brand-bg);
  --hs2-py: var(--brand-space-lg, 20px);
  --hs2-px: var(--brand-space-lg, 24px);
  --hs2-max-w: var(--brand-content-width, 1200px);
  --hs2-border: var(--brand-border, rgba(0,0,0,0.08));
  --hs2-shadow: var(--brand-shadow-sm, 0 2px 12px rgba(0,0,0,0.06));
  --hs2-z: 100;
  --hs2-logo-h: 48px;
  --hs2-logo-h-m: 36px;
  --hs2-nav-color: var(--brand-text);
  --hs2-nav-hover: var(--brand-primary);
  --hs2-nav-current: var(--brand-primary);
  --hs2-nav-size: var(--brand-fs-body, 15px);
  --hs2-nav-weight: 500;
  --hs2-nav-gap: var(--brand-space-xl, 32px);
  --hs2-nav-gap-top: var(--brand-space-md, 16px);
  --hs2-burger-color: var(--brand-text);
  --hs2-menu-bg: var(--brand-bg);
  --hs2-menu-link-size: var(--brand-fs-subtitle, 18px);
  --hs2-menu-link-color: var(--brand-text);
  --hs2-menu-link-py: var(--brand-space-sm, 12px);
  background: var(--hs2-bg);
  border-bottom: var(--brand-border-thin, 1px) solid var(--hs2-border);
}
/* top folgt der Höhe einer mitlaufenden Kontaktleiste (contact-bar.js). */
.hs2-header--sticky { position: sticky; top: var(--ompilot-topbar-height, 0); z-index: var(--hs2-z); transition: box-shadow 0.3s; }
.hs2-header--sticky.is-scrolled { box-shadow: var(--hs2-shadow); }
.hs2-header__inner {
  max-width: var(--hs2-max-w); margin: 0 auto; padding: var(--hs2-py) var(--hs2-px);
  display: flex; align-items: center;
}
.hs2-header__inner--below { flex-direction: column; gap: var(--hs2-nav-gap-top); }
.hs2-header__inner--beside { flex-direction: row; justify-content: center; gap: var(--hs2-nav-gap); flex-wrap: wrap; }

/* Logo */
.hs2-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hs2-logo img { height: var(--hs2-logo-h); width: auto; display: block; }
.hs2-logo__text {
  font-family: var(--brand-font-heading, inherit);
  font-weight: var(--brand-font-heading-weight, 700);
  font-size: 22px; color: var(--brand-text, #1F2937);
}

/* Menü */
.hs2-nav__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--hs2-nav-gap); list-style: none; margin: 0; padding: 0;
}
.hs2-nav--upper { text-transform: uppercase; letter-spacing: 0.06em; }
.hs2-nav__link {
  display: inline-block; font-size: var(--hs2-nav-size); font-weight: var(--hs2-nav-weight);
  color: var(--hs2-nav-color); text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.hs2-nav__link:hover, .hs2-nav__link:focus-visible { color: var(--hs2-nav-hover); }
/* Aktueller Punkt: nicht nur farblich (Unterstreichung) + aria-current */
.hs2-nav__link.is-current { color: var(--hs2-nav-current); border-bottom-color: var(--hs2-nav-current); }
.hs2-nav__link:focus-visible { outline: 2px solid var(--hs2-nav-hover); outline-offset: 3px; border-radius: 2px; }

/* Schaltfläche (mobil) */
.hs2-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 10px; background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs2-burger__line { display: block; width: 24px; height: 2px; background: var(--hs2-burger-color); border-radius: 1px; transition: transform 0.3s, opacity 0.3s; }
.hs2-burger[aria-expanded="true"] .hs2-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hs2-burger[aria-expanded="true"] .hs2-burger__line:nth-child(2) { opacity: 0; }
.hs2-burger[aria-expanded="true"] .hs2-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Menü. Abweichend von der Bridge beginnt die Fläche unter dem Kopf
   (--menue-oben, gesetzt beim Öffnen), damit Kontaktleiste und Schaltfläche den
   ersten Punkt nicht verdecken und die Schaltfläche zum Schließen sichtbar bleibt. */
.hs2-mobile-menu {
  display: none; position: fixed; top: var(--menue-oben, 0); left: 0; right: 0; bottom: 0;
  background: var(--hs2-menu-bg); z-index: calc(var(--hs2-z) + 10);
  padding: var(--brand-space-sm, 12px) var(--hs2-px) 24px; overflow-y: auto; flex-direction: column;
}
.hs2-mobile-menu.is-open { display: flex; }
.hs2-mobile-menu__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.hs2-mobile-menu__link {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  padding: var(--hs2-menu-link-py) 0; font-size: var(--hs2-menu-link-size);
  color: var(--hs2-menu-link-color); text-decoration: none;
  border-bottom: var(--brand-border-thin, 1px) solid rgba(0,0,0,0.06);
}
.hs2-mobile-menu__link.is-current { color: var(--hs2-nav-current); text-decoration: underline; text-underline-offset: 4px; }
.hs2-mobile-menu__link:focus-visible { outline: 2px solid var(--brand-primary, #5A8B92); outline-offset: -2px; border-radius: 4px; }

/* Schmal: Logo bleibt, das Menü klappt hinter die Schaltfläche – aber nur mit
   JavaScript (html.js). Ohne JavaScript bleibt die Liste sichtbar und umbricht. */
@media (max-width: 768px) {
  .hs2-header__inner { position: relative; }
  .hs2-logo img { height: var(--hs2-logo-h-m); }
  .hs2-header__inner--beside { gap: var(--hs2-nav-gap-top) var(--hs2-nav-gap); }
  html.js .hs2-header__inner, html.js .hs2-header__inner--below, html.js .hs2-header__inner--beside {
    flex-direction: row; justify-content: center; gap: 0;
  }
  html.js .hs2-nav { display: none; }
  html.js .hs2-burger { display: flex; position: absolute; right: var(--hs2-px); }
}
/* Scroll-Sperre am Wurzelelement. Der body muss dabei overflow: visible haben:
   Sein overflow-x: hidden (basis.css) wird sonst nicht mehr an den Viewport
   weitergereicht, der body wird zum Scroll-Container und der klebende Kopf
   rutscht beim Öffnen aus dem Bild (Menü „zu tief“ nach dem Herunterscrollen). */
html.menue-offen { overflow: hidden; }
html.menue-offen body { overflow: visible; }
.hs2-mobile-menu { overscroll-behavior: contain; }
/* Logo schmal linksbündig (logo_mobile_align: left, Baukasten-Erweiterung). */
@media (max-width: 768px) {
  html.js .hs2-header--logo-links .hs2-header__inner { justify-content: flex-start; padding-right: calc(var(--hs2-px) + 56px); }
}
/* Kontakt im mobilen Menü (mobile_menu_contact, Baukasten-Erweiterung). */
.hs2-mobile-contact {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: var(--brand-space-lg, 24px);
  text-align: center; color: var(--hs2-menu-link-color); font-size: var(--brand-fs-body, 1rem);
}
.hs2-mobile-contact__address { font-style: normal; display: flex; flex-direction: column; margin-bottom: 4px; line-height: 1.5; }
.hs2-mobile-contact__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  color: var(--brand-primary); text-decoration: none; word-break: break-word;
}
.hs2-mobile-contact__link:hover { text-decoration: underline; }
.hs2-mobile-contact__link:focus-visible { outline: 2px solid var(--brand-primary, #174076); outline-offset: 2px; border-radius: 4px; }
.hs2-mobile-contact__route { margin-top: var(--brand-space-sm, 12px); min-height: 48px; }

/* ── Aufklapp-Navigation (nur bei Unterpunkten; nav-tree.php navTreeCss('hs2')) ── */
.hs2-nav[data-nav-tree] {
  --hs2-submenu-bg: var(--brand-bg, #FFFFFF);
  --hs2-submenu-width: 13rem;
  --hs2-submenu-size: var(--brand-fs-small, 0.875rem);
  --hs2-submenu-color: var(--brand-text-muted, #595959);
  --hs2-submenu-current: var(--brand-text, #1F2937);
  --hs2-submenu-border: var(--brand-border, #E1E1E1);
  --hs2-submenu-hover-bg: var(--brand-bg-muted, #F8F8F8);
  --hs2-submenu-shadow: var(--brand-shadow-md, 0 4px 16px rgba(0,0,0,0.08));
  --hs2-submenu-focus: var(--brand-primary, #174076);
}
.hs2-nav__item { position: relative; display: flex; align-items: center; }
:where(button.hs2-nav__link, button.hs2-nav__sublink, button.hs2-mobile-menu__link) {
  background: none; border: 0; margin: 0; font: inherit; cursor: pointer; text-align: inherit;
  /* Abweichend von der Bridge: font erbt Großschreibung und Laufweite nicht mit. */
  text-transform: inherit; letter-spacing: inherit;
}
.hs2-nav__group { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }
.hs2-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; min-height: 48px; margin: 0 -12px 0 -8px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--hs2-nav-color, inherit);
  border-radius: 4px;
}
.hs2-nav__toggle:hover { color: var(--hs2-nav-hover, currentColor); }
.hs2-nav__toggle:focus-visible,
button.hs2-nav__group:focus-visible { outline: 2px solid var(--hs2-submenu-focus); outline-offset: 2px; border-radius: 2px; }
.hs2-nav__chevron { flex: none; transition: transform 0.2s; }
[aria-expanded="true"] > .hs2-nav__chevron { transform: rotate(180deg); }
.hs2-nav__sub {
  display: none; position: absolute; top: 100%; left: 0; z-index: 10;
  width: var(--hs2-submenu-width); margin: 0; padding: 0; list-style: none;
  background: var(--hs2-submenu-bg); box-shadow: var(--hs2-submenu-shadow);
  text-align: left; text-transform: none; letter-spacing: normal;
}
.hs2-nav__sub.is-open { display: block; }
.hs2-nav__sub.is-flip { left: auto; right: 0; }
.hs2-nav__sub .hs2-nav__sub { top: 0; left: 100%; }
.hs2-nav__sub .hs2-nav__sub.is-flip { left: auto; right: 100%; }
/* Ohne JavaScript: Hover und Fokus öffnen die Ebene (nav-disclosure.js setzt data-nav-js). */
.hs2-nav:not([data-nav-js]) .hs2-nav__item--has-sub:hover > .hs2-nav__sub,
.hs2-nav:not([data-nav-js]) .hs2-nav__item--has-sub:focus-within > .hs2-nav__sub { display: block; }
.hs2-nav__subitem { position: relative; display: flex; align-items: stretch; border-bottom: var(--brand-border-thin, 1px) solid var(--hs2-submenu-border); }
.hs2-nav__subitem:last-child { border-bottom: 0; }
.hs2-nav__sublink {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 48px; padding: 0 16px; box-sizing: border-box; width: 100%;
  font-size: var(--hs2-submenu-size); font-weight: 400; line-height: 1.3;
  color: var(--hs2-submenu-color); text-decoration: none;
}
.hs2-nav__sub .hs2-nav__toggle { margin: 0; color: var(--hs2-submenu-color); border-radius: 0; }
.hs2-nav__sub .hs2-nav__chevron,
.hs2-nav__sub [aria-expanded="true"] > .hs2-nav__chevron { transform: rotate(-90deg); }
.hs2-nav__sublink:hover, .hs2-nav__sublink:focus-visible,
.hs2-nav__sub .hs2-nav__toggle:hover, .hs2-nav__sub .hs2-nav__toggle:focus-visible { background: var(--hs2-submenu-hover-bg); }
.hs2-nav__sublink:focus-visible,
.hs2-nav__sub .hs2-nav__toggle:focus-visible { outline: 2px solid var(--hs2-submenu-focus); outline-offset: -2px; border-radius: 0; }
.hs2-nav__sublink[aria-current="page"] { color: var(--hs2-submenu-current); text-decoration: underline; text-underline-offset: 3px; }
.hs2-nav__item.is-ancestor > .hs2-nav__link { color: var(--hs2-nav-current); border-bottom-color: var(--hs2-nav-current); }

.hs2-mobile-menu__row { display: flex; align-items: stretch; justify-content: center; border-bottom: var(--brand-border-thin, 1px) solid rgba(0,0,0,0.06); }
.hs2-mobile-menu__row > .hs2-mobile-menu__link,
.hs2-mobile-menu__row > .hs2-mobile-menu__toggle { border-bottom: 0; }
.hs2-mobile-menu__row > .hs2-mobile-menu__link { flex: 0 1 auto; }
.hs2-mobile-menu__group { width: 100%; gap: 8px; box-sizing: content-box; }
.hs2-mobile-menu__toggle {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 48px; min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer;
  border-bottom: var(--brand-border-thin, 1px) solid rgba(0,0,0,0.06);
  color: inherit;
}
.hs2-mobile-menu__toggle:focus-visible,
button.hs2-mobile-menu__link:focus-visible { outline: 2px solid var(--brand-primary, #174076); outline-offset: -2px; border-radius: 4px; }
.hs2-mobile-menu__sub { list-style: none; margin: 0; padding: 0 0 0 16px; }
.hs2-mobile-menu__sub[hidden] { display: none; }
.hs2-mobile-menu__sub .hs2-mobile-menu__link { font-size: var(--brand-fs-body, 1rem); }
.hs2-mobile-menu__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ── bausteine/hero-fullscreen.css ── */
/* Breites Kopfbild (hero-fullscreen) – Nachbau von ompilot-bridge snippets/blocks/hero-fullscreen.php.
   Gestaltungswerte aus hero-fullscreen.design.json als Variablen mit Rückfall; Werte je
   Exemplar (Höhe, Bildausschnitt, Fläche, Zierbild) über die Klasse bx-… */
.hf-section {
  --hf-bg: var(--brand-bg);
  --hf-h: 460px;
  --hf-pos: center;
  --hf-empty-bg: var(--brand-bg-muted, #f4f6f6);
  --hf-cap-color: var(--brand-text-muted, #6B7280);
  --hf-cap-size: var(--brand-fs-small, 14px);
  --hf-cap-py: var(--brand-space-sm, 12px);
  --hf-cap-px: var(--brand-space-lg, 24px);
  --hf-cap-max-w: 1080px;
  --hf-decor-w: 40%;
  --hf-decor-w-mobile: 16rem;
  --hf-decor-opacity: 1;
  --hf-ov-eyebrow-color: var(--brand-accent, #E3C05C);
  --hf-ov-eyebrow-size: var(--brand-fs-small, 15px);
  --hf-ov-text-color: var(--brand-text-on-dark, #FFFFFF);
  --hf-ov-text-size: var(--brand-fs-quote, 1.5rem);
  --hf-ov-heading-size: var(--brand-fs-display, 3.25rem);
  --hf-ov-heading-weight: var(--brand-font-heading-weight, 700);
  --hf-ov-scrim: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 100%);
  --hf-ov-fade: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  --hf-ov-pad: var(--brand-space-lg, 24px);
  --hf-ov-max-w: 660px;
  --hf-color-max-w: var(--brand-reading-width, 740px);
  --hf-color-py: var(--brand-section-wide, 80px);
  --hf-color-px: var(--brand-space-lg, 24px);
  --hf-heading-size: var(--brand-fs-display, 3.25rem);
  --hf-heading-weight: var(--brand-font-heading-weight, 700);
  --hf-sub-size: var(--brand-fs-subtitle, 1.125rem);
  --hf-logo-max-w: 12rem;
  --hf-logo-mb: var(--brand-space-lg, 24px);
  background: var(--hf-bg);
}
.hf-section--empty { background: var(--hf-empty-bg); min-height: var(--hf-h); }

/* Foto */
.hf-figure { margin: 0; }
.hf-image { display: block; width: 100%; height: var(--hf-h); object-fit: cover; object-position: center; }
.hf-caption {
  max-width: var(--hf-cap-max-w); margin: 0 auto;
  padding: var(--hf-cap-py) var(--hf-cap-px);
  color: var(--hf-cap-color); font-size: var(--hf-cap-size);
  line-height: 1.5; text-align: center;
}
@media (max-width: 768px) {
  /* Bildausschnitt mobil (hero_focus_mobile) geht vor den Bildausschnitt der Datei */
  .hf-image, img.hf-image.bild-fokus { object-position: center var(--hf-pos); }
}

/* Textauflage auf dem Bild. Abweichend von der Bridge sitzt sie am Rand des Bildes
   (.hf-bild), nicht der ganzen figure – sonst verdeckt sie die Bildunterschrift. */
.hf-bild { position: relative; }
.hf-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--hf-ov-pad); background: var(--hf-ov-scrim); }
.hf-overlay::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6rem; background: var(--hf-ov-fade); pointer-events: none; }
.hf-overlay__inner { max-width: var(--hf-ov-max-w); }
.hf-overlay__eyebrow { display: block; margin: 0 0 6px; color: var(--hf-ov-eyebrow-color); font-size: var(--hf-ov-eyebrow-size); font-family: var(--brand-font-heading, inherit); letter-spacing: var(--brand-eyebrow-ls, 0.08em); text-transform: uppercase; font-variant-caps: var(--brand-eyebrow-caps, normal); font-weight: var(--brand-eyebrow-fw, 600); }
.hf-overlay__heading { margin: 0 0 8px; color: var(--hf-ov-text-color); font-family: var(--brand-font-heading, inherit); font-size: var(--hf-ov-heading-size); font-weight: var(--hf-ov-heading-weight); line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: break-word; }
.hf-overlay__text { margin: 0; color: var(--hf-ov-text-color); font-size: var(--hf-ov-text-size); font-family: var(--brand-font-heading, inherit); line-height: 1.4; }
.hf-figure--overlay .hf-actions { --ob-outline-color: var(--hf-ov-text-color); --ob-focus: var(--hf-ov-text-color); }

/* Farbfläche */
.hf-section--color {
  background: var(--hf-color-bg);
  color: var(--hf-color-text);
  min-height: var(--hf-h);
  display: flex; align-items: center; justify-content: center;
}
.hf-color {
  max-width: var(--hf-color-max-w); margin: 0 auto;
  padding: var(--hf-color-py) var(--hf-color-px);
  text-align: center; overflow-wrap: break-word;
}
.hf-logo { display: block; width: 100%; max-width: var(--hf-logo-max-w); height: auto; margin: 0 auto var(--hf-logo-mb); }
.hf-heading { margin: 0; font-family: var(--brand-font-heading, inherit); font-size: var(--hf-heading-size); font-weight: var(--hf-heading-weight); line-height: 1.15; letter-spacing: -0.025em; color: inherit; }
.hf-subheading { margin: 0.75em 0 0; font-size: var(--hf-sub-size); line-height: 1.5; color: inherit; }
.hf-color .hf-actions { justify-content: center; }

/* Schaltflächen */
.hf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Zierbild: hinter dem Inhalt, schmal beschnitten statt geschrumpft */
.hf-section--decor { position: relative; overflow: hidden; }
.hf-section--decor .hf-figure, .hf-section--color .hf-color { position: relative; z-index: 1; }
.hf-decor { position: absolute; z-index: 0; width: var(--hf-decor-w); max-width: none; height: auto; opacity: var(--hf-decor-opacity); pointer-events: none; }
.hf-decor--tr { top: 0; right: 0; }
.hf-decor--tl { top: 0; left: 0; }
.hf-decor--br { bottom: 0; right: 0; }
.hf-decor--bl { bottom: 0; left: 0; }
@media (max-width: 768px) { .hf-decor { width: var(--hf-decor-w-mobile); } }

/* Leichter Verlauf (hero_overlay_strength: leicht, Baukasten-Erweiterung): das Foto
   bleibt hell, die Schrift trägt ein weicher Schatten. */
.hf-figure--leicht {
  --hf-ov-scrim: linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.28) 100%);
  --hf-ov-fade: linear-gradient(to top, rgba(0,0,0,0.28), rgba(0,0,0,0));
}
.hf-figure--leicht .hf-overlay__heading,
.hf-figure--leicht .hf-overlay__text,
.hf-figure--leicht .hf-overlay__eyebrow { text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 2px 16px rgba(0,0,0,0.35); }

/* Eingerahmt (hero_layout: eingerahmt, Baukasten-Erweiterung): ruhige Fläche mit
   Überschrift oben, Foto in Inhaltsbreite. Die Fläche endet in der Bildmitte, die
   untere Bildhälfte ragt in den Seitenhintergrund und leitet in die Seite über. */
.hf-rahmen {
  --hf-r-bg: var(--brand-bg-muted, #f4f6f6);
  --hf-r-unten: var(--brand-bg, #FFFFFF);
  --hf-r-pt: 40px;
  --hf-r-max-w: var(--brand-content-width, 1200px);
  --hf-r-px: var(--brand-space-lg, 24px);
  --hf-r-gap: 24px;
  --hf-r-img-h: 240px;
  --hf-r-title-color: var(--brand-heading, var(--brand-text));
  --hf-r-title-size: var(--brand-fs-h1, 2.25rem);
  --hf-r-text-color: var(--brand-lead, var(--brand-text-muted, #6B7280));
  --hf-r-text-size: var(--brand-fs-lead, 1.125rem);
  background: linear-gradient(to bottom, var(--hf-r-bg) calc(100% - var(--hf-r-img-h) / 2), var(--hf-r-unten) calc(100% - var(--hf-r-img-h) / 2));
  padding: var(--hf-r-pt) 0 0;
}
.hf-rahmen__inner { max-width: var(--hf-r-max-w); margin: 0 auto; padding: 0 var(--hf-r-px); display: flex; flex-direction: column; gap: var(--hf-r-gap); }
.hf-rahmen__eyebrow { margin: 0 0 6px; font-size: var(--brand-fs-eyebrow, 0.875rem); font-weight: var(--brand-eyebrow-fw, 600); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-accent-ink, var(--brand-primary)); font-family: var(--brand-font-heading, inherit); }
.hf-rahmen__title { margin: 0 0 10px; font-size: var(--hf-r-title-size); font-weight: var(--brand-font-heading-weight, 700); color: var(--hf-r-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.1; overflow-wrap: break-word; }
.hf-rahmen__text { margin: 0; max-width: 62ch; font-size: var(--hf-r-text-size); color: var(--hf-r-text-color); line-height: 1.5; }
.hf-rahmen__head > :last-child { margin-bottom: 0; }
.hf-rahmen .hf-actions { margin-top: 16px; }
.hf-rahmen__media { margin: 0; }
.hf-rahmen__img { display: block; width: 100%; height: var(--hf-r-img-h); object-fit: cover; border-radius: var(--brand-radius-xl, 16px); }
.hf-rahmen__caption { margin: 10px 0 0; font-size: var(--brand-fs-small, 14px); color: var(--brand-text-muted, #6B7280); }
@media (min-width: 768px) { .hf-rahmen { --hf-r-img-h: 420px; --hf-r-pt: 64px; --hf-r-title-size: 2.875rem; } }
/* hero_head_layout: zweispaltig – ab 900 px steht die Überschrift links, Text und Knöpfe
   rechts daneben, unten bündig mit der Überschrift. Schmal untereinander wie sonst. */
@media (min-width: 900px) {
  .hf-rahmen--zweispaltig .hf-rahmen__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
  .hf-rahmen--zweispaltig .hf-rahmen__head > * { grid-column: 1; }
  .hf-rahmen--zweispaltig .hf-rahmen__head > :is(.hf-rahmen__text, .hf-actions) { grid-column: 2; }
  .hf-rahmen--zweispaltig .hf-rahmen__title { margin-bottom: 0; }
  .hf-rahmen--zweispaltig .hf-rahmen__text { max-width: none; grid-row: 1 / span 3; align-self: end; }
}

/* ── bausteine/image-text.css ── */
/* Bild-Text-Block (image-text) – Nachbau von ompilot-bridge snippets/blocks/image-text.php.
   Gestaltungswerte aus image-text.design.json; Fläche, Farben, Bildhöhe und Seitenverhältnis
   je Exemplar (bx-…). Die Bridge braucht einen Instanz-Scope, weil jeder Block sein eigenes
   <style> ausgibt; hier gibt es die Regeln nur einmal, die Werte stehen am Exemplar. */
.it-section {
  --it-bg: var(--brand-bg);
  --it-pt: var(--brand-section-wide, 80px);
  --it-pb: var(--brand-section-wide, 80px);
  --it-max-w: var(--brand-content-width, 1200px);
  --it-px: var(--brand-space-lg, 24px);
  --it-gap: var(--brand-space-2xl, 56px);
  --it-content-w: 50%;
  --it-h-size: var(--brand-fs-h2, 30px);
  --it-h-weight: var(--brand-font-heading-weight, 700);
  --it-h-mb: var(--brand-space-xs, 8px);
  --it-sub-size: var(--brand-fs-lead, 1.125rem);
  --it-sub-weight: 500;
  --it-sub-mb: var(--brand-space-lg, 20px);
  --it-eyebrow-size: var(--brand-fs-eyebrow, 0.875rem);
  --it-body-size: var(--brand-fs-body, 17px);
  --it-body-lh: var(--brand-lh-body, 1.65);
  --it-cta-h: 48px;
  --it-cta-px: var(--brand-space-lg, 26px);
  --it-cta-radius: var(--brand-radius-md, 8px);
  --it-cta-size: var(--brand-fs-body, 15px);
  --it-cta-weight: 500;
  --it-note-radius: var(--brand-radius-md, 8px);
  --it-img-h: 400px;
  --it-img-radius: var(--brand-radius-lg, 12px);
  --it-img-aspect: 3 / 4;
  --it-quote-size: var(--brand-fs-quote, 1.5rem);
  --it-heft-perspective: 1400px;
  --it-heft-ry: -13deg;
  --it-heft-rz: -1deg;
  --it-heft-max-w: 290px;
  --it-heft-shadow: 26px 26px 50px rgba(36,16,20,0.38);
  --it-heft-spine-w: 14px;
  --it-heft-spine: linear-gradient(to right, rgba(0,0,0,0.42), rgba(0,0,0,0.10) 55%, rgba(255,255,255,0.16));
  --it-heft-glare: linear-gradient(115deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 42%);
  --it-heft-bg: var(--brand-primary, #1a5f6a);
  --it-facts-gap: 22px;
  --it-fact-term-size: var(--brand-fs-subtitle, 18px);
  --it-fact-desc-size: var(--brand-fs-small, 15px);
  background: var(--it-bg);
  padding: var(--it-pt) 0 var(--it-pb);
}
.it-section__inner { max-width: var(--it-max-w); margin: 0 auto; padding: 0 var(--it-px); display: flex; align-items: center; gap: var(--it-gap); }
.it-section--right .it-section__inner { flex-direction: row-reverse; }
.it-media { flex: 0 0 var(--it-content-w); max-width: var(--it-content-w); min-width: 0; }
.it-media__img { display: block; width: 100%; height: var(--it-img-h); object-fit: cover; border-radius: var(--it-img-radius); }
.it-content { flex: 1; min-width: 0; }
/* Bildunterschrift (caption am Bild, Baukasten-Erweiterung) */
.it-media--caption { margin: 0; }
.it-caption { margin: 10px 0 0; font-size: var(--brand-fs-small, 14px); line-height: 1.4; color: var(--brand-text-muted, #6B7280); }
.it-eyebrow { margin: 0 0 8px; font-size: var(--it-eyebrow-size); font-weight: var(--brand-eyebrow-fw, 600); letter-spacing: var(--brand-eyebrow-ls, 0.08em); text-transform: uppercase; font-variant-caps: var(--brand-eyebrow-caps, normal); color: var(--it-eyebrow-color); font-family: var(--brand-font-heading, inherit); }
.it-headline { margin: 0 0 var(--it-h-mb); font-size: var(--it-h-size); font-weight: var(--it-h-weight); line-height: 1.15; color: var(--it-h-color); font-family: var(--brand-font-heading, inherit); }
.it-subline { margin: 0 0 var(--it-sub-mb); font-size: var(--it-sub-size); font-weight: var(--it-sub-weight); color: var(--it-sub-color); }
.it-body { font-size: var(--it-body-size); line-height: var(--it-body-lh); color: var(--it-body-color); }
.it-note { margin: 20px 0 0; padding: 14px 18px; background: var(--it-note-bg); border-left: 3px solid var(--it-note-border); border-radius: var(--it-note-radius); color: var(--it-note-color); font-size: var(--it-body-size); line-height: 1.55; }
/* it_note_style: schlicht – ohne Kasten, feine Linie darüber */
.it-note.it-note--schlicht { background: none; border: 0; border-top: var(--brand-border-thin, 1px) solid var(--brand-border, #E5E7EB); border-radius: 0; padding: 16px 0 0; }
.it-cta-wrap { margin-top: 28px; }
.it-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; height: var(--it-cta-h); padding: 0 var(--it-cta-px); background: var(--it-cta-bg); color: var(--it-cta-color); border: var(--it-cta-border, none); border-radius: var(--it-cta-radius); font-size: var(--it-cta-size); font-weight: var(--it-cta-weight); text-decoration: none; transition: opacity 0.2s; }
.it-cta:hover { opacity: 0.9; }
.it-cta:focus-visible { outline: 2px solid var(--it-cta-bg); outline-offset: 2px; }
@media (max-width: 768px) {
  .it-section__inner, .it-section--right .it-section__inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .it-media { flex: none; max-width: 100%; }
}

/* Zitat */
.it-quote { margin: 24px 0 0; padding-left: 18px; border-left: 3px solid currentColor; color: var(--it-quote-color); font-family: var(--brand-font-heading, inherit); font-size: var(--it-quote-size); line-height: 1.35; }
.it-quote::before { content: "„"; }
.it-quote::after { content: "“"; }
.it-content .it-body + .it-body, .it-content .it-quote + .it-body { margin-top: 1em; }

/* Bilddarstellung: einpassend und Heft (Heft hat Vorrang) */
.it-media--contain .it-media__img { height: auto; aspect-ratio: var(--it-img-aspect); object-fit: contain; }
.it-media--heft { position: relative; max-width: var(--it-heft-max-w); aspect-ratio: var(--it-img-aspect); margin: 0 auto; background: var(--it-heft-bg); box-shadow: var(--it-heft-shadow); transform: perspective(var(--it-heft-perspective)) rotateY(var(--it-heft-ry)) rotateZ(var(--it-heft-rz)); }
.it-media--heft .it-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.it-media--heft::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--it-heft-spine-w); z-index: 2; background: var(--it-heft-spine); }
.it-media--heft::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--it-heft-glare); }
@media (max-width: 768px) { .it-media--heft { width: var(--it-heft-max-w); max-width: 100%; } }

/* Faktenzeilen */
.it-facts { display: flex; flex-wrap: wrap; gap: var(--it-facts-gap); margin: 20px 0 0; }
.it-fact__term { display: block; font-family: var(--brand-font-heading, inherit); font-size: var(--it-fact-term-size); color: var(--it-fact-term-color); font-weight: 500; }
.it-fact__desc { color: var(--it-fact-desc-color); font-size: var(--it-fact-desc-size); }
.it-facts--liste { display: grid; flex-wrap: nowrap; gap: 12px; margin: 22px 0 0; }
.it-facts--liste .it-fact { position: relative; padding-left: 30px; }
.it-facts--liste .it-fact::before { content: ''; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-accent, #EFC00A); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #EFC00A) 22%, transparent); }
.it-facts--liste .it-fact__desc { font-size: 17px; line-height: 1.55; }
.it-fact--icon { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; }
.it-fact--icon .it-fact__icon { grid-column: 1; grid-row: 1 / 3; color: var(--it-fact-term-color); line-height: 0; }
.it-fact--icon .it-fact__icon svg { width: 20px; height: 20px; }
.it-fact--icon .it-fact__term { grid-column: 2; grid-row: 1; }
.it-fact--icon .it-fact__desc { grid-column: 2; grid-row: 2; }
.it-facts--liste .it-fact--icon { padding-left: 0; }
.it-facts--liste .it-fact--icon::before { content: none; }

/* ── bausteine/opening-hours.css ── */
/* Öffnungszeiten (opening-hours) – Nachbau von ompilot-bridge snippets/blocks/opening-hours.php.
   Gestaltungswerte aus opening-hours.design.json. Zustand nie nur farblich: das Wort trägt
   die Aussage, der Punkt begleitet. */
.oh-section {
  --oh-bg: var(--brand-bg, #FFFFFF);
  --oh-pt: var(--brand-section-wide, 80px);
  --oh-pb: var(--brand-section-wide, 80px);
  --oh-max-w: 960px;
  --oh-px: var(--brand-space-lg, 24px);
  --oh-title-color: var(--brand-heading, var(--brand-text));
  --oh-title-size: var(--brand-fs-h2, 30px);
  --oh-card-bg: var(--brand-bg, #FFFFFF);
  --oh-card-border: var(--brand-border, rgba(0,0,0,0.08));
  --oh-card-radius: var(--brand-radius-lg, 12px);
  --oh-text-color: var(--brand-text, #374151);
  --oh-meta-color: var(--brand-text-muted, #6B7280);
  --oh-open: var(--brand-success, #2E7D32);
  --oh-closed: var(--brand-danger, #B23B3B);
  --oh-today-bg: rgba(0,0,0,0.04);
  --oh-note-bg: color-mix(in srgb, var(--brand-warning, #b7791f) 12%, var(--brand-bg, #ffffff));
  --oh-note-color: var(--brand-text, #1F2937);
  background: var(--oh-bg);
  padding: var(--oh-pt) 0 var(--oh-pb);
}
.oh-section__inner { max-width: var(--oh-max-w); margin: 0 auto; padding: 0 var(--oh-px); }
.oh-title { margin: 0 0 28px; font-size: var(--oh-title-size); font-weight: 600; color: var(--oh-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.2; text-align: center; }
.oh-units { display: grid; grid-template-columns: 1fr; gap: 24px; }
.oh-units--multi { gap: 32px; }
@media (min-width: 720px) { .oh-units--multi { grid-template-columns: repeat(2, 1fr); } }
.oh-units--einzeln { max-width: var(--oh-einzeln-max-w, 560px); margin-inline: auto; }
.oh-unit { background: var(--oh-card-bg); border: var(--brand-border-thin, 1px) solid var(--oh-card-border); border-radius: var(--oh-card-radius); padding: 24px; min-width: 0; }
.oh-title:has(+ .oh-season) { margin-bottom: 6px; }
.oh-season { margin: 0 0 28px; text-align: center; font-size: 1.125rem; color: var(--oh-title-color); font-family: var(--brand-font-heading, inherit); }
.oh-unit__name { margin: 0 0 12px; font-size: 1.25rem; font-weight: 600; color: var(--oh-title-color); font-family: var(--brand-font-heading, inherit); }
.oh-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--oh-text-color); font-size: 1.0625rem; }
.oh-status[hidden], .oh-note[hidden], .oh-special__item[hidden], .oh-special[hidden] { display: none; }
.oh-status__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--oh-meta-color); }
.oh-status__dot.is-open { background: var(--oh-open); }
.oh-status__dot.is-closed { background: var(--oh-closed); }
.oh-status__word { font-weight: 600; }
.oh-status__detail { color: var(--oh-meta-color); }
.oh-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 14px; background: var(--oh-note-bg); color: var(--oh-note-color); border-radius: 8px; font-size: 0.9375rem; line-height: 1.5; }
.oh-week { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.9375rem; }
.oh-week__caption { text-align: left; color: var(--oh-meta-color); padding-bottom: 8px; font-size: 0.875rem; }
.oh-week tr { border-top: var(--brand-border-thin, 1px) solid var(--oh-card-border); }
.oh-week tr.is-today { background: var(--oh-today-bg); }
.oh-week__day { text-align: left; font-weight: 500; color: var(--oh-text-color); padding: 8px 12px 8px 0; white-space: nowrap; }
.oh-week__today { color: var(--oh-meta-color); font-weight: 400; }
.oh-week__time { text-align: right; color: var(--oh-text-color); padding: 8px 0; }
.oh-week__closed { color: var(--oh-meta-color); }
/* Abweichung von der Bridge: kommende Sonderzeiten als Liste unter den Einheiten. */
.oh-special { margin-top: 28px; padding: 18px 24px; background: var(--oh-note-bg); color: var(--oh-note-color); border-radius: var(--oh-card-radius); }
.oh-special__title { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 600; font-family: var(--brand-font-heading, inherit); }
.oh-special__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.5; }
.oh-special__date { font-weight: 600; }

/* ── bausteine/partner-row.css ── */
/* Partnerzeile (partner-row) – Nachbau von ompilot-bridge snippets/blocks/partner-row.php.
   Gestaltungswerte aus partner-row.design.json; Spalten und Logohöhe je Exemplar (bx-…). */
.pr-section {
  --pr-bg: var(--brand-bg);
  --pr-pt: var(--brand-section-narrow, 56px);
  --pr-pb: var(--brand-section-narrow, 56px);
  --pr-max-w: 1080px;
  --pr-px: var(--brand-space-lg, 24px);
  --pr-title-color: var(--brand-heading, var(--brand-text));
  --pr-title-size: var(--brand-fs-h3, 26px);
  --pr-eyebrow-color: var(--brand-accent-ink, #9a561f);
  --pr-eyebrow-size: var(--brand-fs-small, 13px);
  --pr-subline-color: var(--brand-lead, var(--brand-text-muted, #6B7280));
  --pr-subline-size: var(--brand-fs-subtitle, 18px);
  --pr-cols: 3;
  --pr-cols-m: 2;
  --pr-fuge: var(--brand-border-thick, 2px);
  --pr-fuge-color: var(--brand-bg-muted, #EFE7D8);
  --pr-radius: var(--brand-radius-lg, 12px);
  --pr-cell-bg: var(--brand-bg-card, #FFFFFF);
  --pr-cell-h: 96px;
  --pr-cell-pad: var(--brand-space-lg, 24px);
  --pr-name-color: var(--brand-text);
  --pr-name-size: var(--brand-fs-subtitle, 18px);
  --pr-logo-max-h: 72px;
  background: var(--pr-bg);
  padding: var(--pr-pt) 0 var(--pr-pb);
}
.pr-section__inner { max-width: var(--pr-max-w); margin: 0 auto; padding: 0 var(--pr-px); }
.pr-title { margin: 0 0 24px; font-size: var(--pr-title-size); font-weight: 700; color: var(--pr-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.2; }
.pr-eyebrow { margin: 0 0 8px; color: var(--pr-eyebrow-color); font-size: var(--pr-eyebrow-size); font-weight: var(--brand-eyebrow-fw, 600); letter-spacing: var(--brand-eyebrow-ls, 0.08em); text-transform: uppercase; font-variant-caps: var(--brand-eyebrow-caps, normal); }
.pr-subline { margin: 0 0 24px; max-width: 640px; color: var(--pr-subline-color); font-size: var(--pr-subline-size); line-height: 1.5; }
.pr-head--mitte { text-align: center; }
.pr-head--mitte .pr-subline { margin-left: auto; margin-right: auto; }
.pr-grid { display: grid; grid-template-columns: repeat(var(--pr-cols), 1fr); gap: var(--pr-fuge); background: var(--pr-fuge-color); border: var(--pr-fuge) solid var(--pr-fuge-color); border-radius: var(--pr-radius); overflow: hidden; }
.pr-cell { background: var(--pr-cell-bg); min-height: var(--pr-cell-h); display: flex; align-items: center; justify-content: center; padding: var(--pr-cell-pad); text-align: center; text-decoration: none; min-width: 0; }
.pr-cell--link { transition: opacity 0.2s; }
.pr-cell--link:hover { opacity: 0.85; }
.pr-cell--link:focus-visible { outline: 2px solid var(--brand-primary, #5A8B92); outline-offset: -3px; }
.pr-cell__img { display: block; height: auto; width: auto; max-height: var(--pr-logo-max-h); max-width: 100%; object-fit: contain; }
.pr-cell__name { color: var(--pr-name-color); font-size: var(--pr-name-size); font-family: var(--brand-font-heading, inherit); line-height: 1.3; }
@media (max-width: 640px) {
  .pr-grid { grid-template-columns: repeat(var(--pr-cols-m), 1fr); }
  .pr-title { text-align: center; }
}

/* ── bausteine/reviews.css ── */
/* Bewertungen (reviews) – Nachbau von ompilot-bridge snippets/blocks/reviews.php.
   Gestaltungswerte aus reviews.design.json. Abweichung: Kürzel statt Autorenbild. */
.rv-section {
  --rv-bg: var(--brand-bg, #FFFFFF);
  --rv-pt: var(--brand-section-wide, 80px);
  --rv-pb: var(--brand-section-wide, 80px);
  --rv-max-w: 1080px;
  --rv-px: var(--brand-space-lg, 24px);
  --rv-title-color: var(--brand-heading, var(--brand-text));
  --rv-title-size: var(--brand-fs-h2, 30px);
  --rv-card-bg: var(--brand-bg, #FFFFFF);
  --rv-card-border: var(--brand-border, rgba(0,0,0,0.08));
  --rv-card-radius: var(--brand-radius-lg, 12px);
  --rv-text-color: var(--brand-text, #374151);
  --rv-meta-color: var(--brand-text-muted, #6B7280);
  --rv-star: var(--brand-primary);
  --rv-link-color: var(--brand-primary);
  --rv-note-color: var(--brand-text-muted, #6B7280);
  --rv-note-size: var(--brand-fs-small, 14px);
  --rv-note-mt: var(--brand-space-lg, 24px);
  --rv-cr-gap: var(--brand-space-lg, 20px);
  --rv-cr-btn-size: 48px;
  --rv-cr-btn-bg: var(--brand-bg, #FFFFFF);
  --rv-cr-btn-color: var(--brand-text, #1F2937);
  --rv-cr-btn-border: var(--brand-border, rgba(0,0,0,0.12));
  --rv-cr-btn-hover: var(--brand-primary, #174076);
  --rv-cr-radius: var(--brand-radius-md, 8px);
  --rv-cr-status-color: var(--brand-text-muted, #6B7280);
  --rv-cr-status-size: var(--brand-fs-small, 14px);
  background: var(--rv-bg);
  padding: var(--rv-pt) 0 var(--rv-pb);
}
.rv-section__inner { max-width: var(--rv-max-w); margin: 0 auto; padding: 0 var(--rv-px); }
.rv-head { text-align: center; margin-bottom: 40px; }
.rv-title { margin: 0 0 12px; font-size: var(--rv-title-size); font-weight: 600; color: var(--rv-title-color); font-family: var(--brand-font-heading, inherit); line-height: 1.2; }
.rv-rating { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; color: var(--rv-title-color); }
.rv-rating__stars, .rv-card__stars { display: inline-flex; gap: 2px; }
.rv-stern { fill: none; stroke: var(--rv-star); stroke-width: 1.5; }
.rv-stern--voll { fill: var(--rv-star); stroke: none; }
.rv-rating__value { font-weight: 600; font-size: 1.25rem; }
.rv-rating__sep { color: var(--rv-meta-color); }
.rv-rating__count { color: var(--rv-meta-color); font-size: 0.9375rem; }
.rv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .rv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .rv-grid { grid-template-columns: repeat(3, 1fr); } }
.rv-card { position: relative; background: var(--rv-card-bg); border: var(--brand-border-thin, 1px) solid var(--rv-card-border); border-radius: var(--rv-card-radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-card__text { margin: 0; color: var(--rv-text-color); line-height: 1.7; font-size: 1rem; overflow-wrap: anywhere; }
.rv-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; color: var(--rv-meta-color); font-size: 0.9375rem; }
.rv-card__initialen { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-bg-muted, #f4f6f6); color: var(--rv-text-color); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; }
.rv-card__author { font-weight: 600; color: var(--rv-text-color); }
.rv-card__date, .rv-card__source { color: var(--rv-meta-color); }
.rv-card__link { color: var(--rv-link-color); text-decoration: underline; margin-left: auto; min-height: 48px; display: inline-flex; align-items: center; }
.rv-card__link:focus-visible, .rv-note__link:focus-visible { outline: 2px solid var(--rv-link-color); outline-offset: 2px; border-radius: 2px; }
.rv-note, .rv-authenticity { margin: var(--rv-note-mt) 0 0; text-align: center; color: var(--rv-note-color); font-size: var(--rv-note-size); line-height: 1.5; }
.rv-note__link { color: var(--rv-link-color); text-decoration: underline; }
.rv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Karussell: bis zu drei Karten nebeneinander, Blättern vor/zurück. */
.rv-carousel__row { display: flex; align-items: center; gap: var(--rv-cr-gap); }
.rv-carousel__btn { flex: none; width: var(--rv-cr-btn-size); height: var(--rv-cr-btn-size); min-width: 48px; min-height: 48px; display: none; align-items: center; justify-content: center; background: var(--rv-cr-btn-bg); color: var(--rv-cr-btn-color); border: var(--brand-border-thin, 1px) solid var(--rv-cr-btn-border); border-radius: var(--rv-cr-radius); cursor: pointer; transition: color 0.2s, border-color 0.2s, opacity 0.2s; }
html.js .rv-carousel__btn { display: inline-flex; }
.rv-carousel__btn:hover:not(:disabled) { color: var(--rv-cr-btn-hover); border-color: var(--rv-cr-btn-hover); }
.rv-carousel__btn:focus-visible { outline: 2px solid var(--rv-cr-btn-hover); outline-offset: 2px; }
.rv-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.rv-carousel__track { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: flex; gap: var(--rv-cr-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.rv-carousel__track::-webkit-scrollbar { display: none; }
.rv-carousel__track:focus-visible { outline: 2px solid var(--rv-cr-btn-hover); outline-offset: 2px; border-radius: var(--rv-cr-radius); }
.rv-carousel__track .rv-card { flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; }
@media (min-width: 640px) { .rv-carousel__track .rv-card { flex-basis: calc((100% - var(--rv-cr-gap)) / 2); } }
@media (min-width: 960px) { .rv-carousel__track .rv-card { flex-basis: calc((100% - 2 * var(--rv-cr-gap)) / 3); } }
.rv-carousel__status { text-align: center; margin: 12px 0 0; color: var(--rv-cr-status-color); font-size: var(--rv-cr-status-size); min-height: 1.5em; }
/* Ohne JavaScript: alle Karten untereinander bzw. als Raster, nichts versteckt. */
html:not(.js) .rv-carousel__track { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) { .rv-carousel__track { scroll-behavior: auto; } }

/* ── bausteine/text-default.css ── */
/* Text / Freitext (text-default) – Nachbau von ompilot-bridge snippets/blocks/text-default.php.
   Gestaltungswerte aus text-default.design.json; Breite und Ausrichtung je Exemplar (bx-…). */
.td-section {
  --td-bg: var(--brand-bg, #FFFFFF);
  --td-pt: var(--brand-section-wide, 80px);
  --td-pb: var(--brand-section-wide, 80px);
  --td-max-w: var(--brand-reading-width, 740px);
  --td-align: left;
  --td-px: var(--brand-space-lg, 24px);
  --td-h1-color: var(--brand-heading, var(--brand-text));
  --td-h1-size: var(--brand-fs-h1, 36px);
  --td-h1-weight: var(--brand-font-heading-weight, 700);
  --td-h1-mb: var(--brand-space-xl, 32px);
  --td-body-color: var(--brand-text-muted, #444444);
  --td-body-size: var(--brand-fs-body, 16px);
  --td-body-lh: var(--brand-lh-body, 1.8);
  --td-h2-size: var(--brand-fs-h3, 24px);
  --td-h2-weight: 600;
  --td-h2-mt: var(--brand-space-2xl, 40px);
  --td-h2-mb: var(--brand-space-md, 16px);
  --td-h3-size: var(--brand-fs-subtitle, 18px);
  --td-h3-weight: 600;
  --td-h3-mt: var(--brand-space-xl, 28px);
  --td-link-color: var(--brand-primary);
  --td-link-decoration: underline;
  background: var(--td-bg);
  padding: var(--td-pt) 0 var(--td-pb);
}
.td-section__inner { max-width: var(--td-max-w); margin: 0 auto; padding: 0 var(--td-px); text-align: var(--td-align, left); }
.td-headline { margin: 0 0 var(--td-h1-mb); font-size: var(--td-h1-size); font-weight: var(--td-h1-weight); color: var(--td-h1-color); font-family: var(--brand-font-heading, inherit); line-height: 1.2; }
.td-content { font-size: var(--td-body-size); line-height: var(--td-body-lh); color: var(--td-body-color); }
.td-content p { margin: 0 0 1em; }
.td-content h2 { font-size: var(--td-h2-size); font-weight: var(--td-h2-weight); margin: var(--td-h2-mt) 0 var(--td-h2-mb); color: var(--td-h1-color); font-family: var(--brand-font-heading, inherit); line-height: 1.3; }
.td-content h3 { font-size: var(--td-h3-size); font-weight: var(--td-h3-weight); margin: var(--td-h3-mt) 0 12px; color: var(--td-h1-color); font-family: var(--brand-font-heading, inherit); line-height: 1.4; }
.td-content a { color: var(--td-link-color); text-decoration: var(--td-link-decoration); transition: opacity 0.2s; }
.td-content a:hover { opacity: 0.8; }
.td-content a:focus-visible { outline: 2px solid var(--td-link-color); outline-offset: 2px; border-radius: 2px; }
.td-content ul, .td-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.td-content li { margin-bottom: 0.4em; }
.td-content strong { font-weight: 600; }
.td-content em { font-style: italic; }

/* Rahmen: Logo-Höhe aus rahmen.json */
.hs2-header {
  --hs2-logo-h: 64px;
  --hs2-logo-h-m: 52px;
}
/* Rahmen: Einstellungen des Fußes aus rahmen.json */
.fe-footer {
  --fe-cols: 2;
}

/* Bausteine: Werte je Exemplar */
.bx-007b0ef03a {
  --bild-fokus: 55% 55%;
}
.bx-0384e61198 {
  --bild-fokus: 60% 45%;
}
.bx-15cbc7a746 {
  --bild-fokus: 22.7% 64.5%;
}
.bx-2097f51b94 {
  --og-bg: var(--brand-bg, #FFFFFF);
  --og-cols-d: 4;
  --og-cols-m: 2;
  --og-ratio: 1 / 1;
  --og-title-color: var(--brand-heading, var(--brand-text));
  --og-subline-color: var(--brand-lead, var(--brand-text-muted, #6B7280));
}
.bx-5851121f51 {
  --cb-bg: var(--brand-text, #1F2937);
  --cb-max-w: var(--brand-reading-width, 740px);
  --cb-align: center;
  --cb-h-color: var(--brand-text-on-dark, #FFFFFF);
  --cb-body-color: rgba(255,255,255,0.85);
  --cb-cta-bg: var(--brand-accent, #EFC00A);
  --cb-cta-color: var(--brand-text-on-accent, #0E2A4B);
}
.bx-646d0e25fe {
  --bild-fokus: 40% 78%;
}
.bx-74edb45081 {
  --it-bg: var(--brand-bg);
  --it-h-color: var(--brand-heading, var(--brand-text));
  --it-sub-color: var(--brand-lead, var(--brand-primary));
  --it-eyebrow-color: var(--brand-accent-ink, #9a561f);
  --it-body-color: var(--brand-text-muted, #5A6470);
  --it-cta-bg: var(--brand-action, var(--brand-primary));
  --it-cta-color: var(--brand-text-on-action, var(--brand-text-on-dark, #FFFFFF));
  --it-cta-border: none;
  --it-note-bg: color-mix(in srgb, var(--brand-primary, #1a5f6a) 10%, var(--brand-bg, #ffffff));
  --it-note-border: var(--brand-primary);
  --it-note-color: var(--brand-text);
  --it-img-h: 400px;
}
.bx-7d9d536644 {
  --cg-bg: var(--brand-bg);
  --cg-title-color: var(--brand-heading, var(--brand-text));
  --cg-sub-color: var(--brand-lead, var(--brand-text-muted, #6B7280));
  --cg-eyebrow-color: var(--brand-accent-ink, #9a561f);
  --cg-group-color: var(--brand-text);
  --cg-cols-d: 3;
  --cg-cols-m: 2;
  --cg-card-bg: var(--brand-bg, #FFFFFF);
  --cg-card-border: var(--brand-border, rgba(0,0,0,0.08));
  --cg-card-title-color: var(--brand-heading, var(--brand-text));
  --cg-card-loc-color: var(--brand-text-muted, #6B7280);
  --cg-badge-bg: color-mix(in srgb, var(--brand-primary, #1a5f6a) 12%, var(--brand-bg, #ffffff));
  --cg-badge-color: var(--brand-primary);
  --cg-card-icon-color: var(--brand-primary);
  --cg-card-desc-color: var(--brand-text-muted, #6B7280);
  --cg-list-color: var(--brand-text-muted, #6B7280);
  --cg-tag-bg: var(--brand-bg-muted, #f4f6f6);
  --cg-tag-color: var(--brand-text-muted, #6B7280);
}
.bx-88d14ff310 {
  --bild-fokus: 70.1% 67.6%;
}
.bx-905bb5daaa {
  --hf-r-bg: var(--brand-bg-muted, #f4f6f6);
  --hf-r-title-color: var(--brand-heading, var(--brand-text, #1a2226));
  --hf-r-text-color: var(--brand-lead, var(--brand-text, #1a2226));
}
.bx-992fabdaa8 {
  --td-max-w: var(--brand-reading-width, 740px);
  --td-align: center;
  --td-akzent-mi: auto;
}
.bx-9ba705ce60 {
  --cs-bg: var(--brand-bg-muted, #f4f6f6);
  --cs-title-color: var(--brand-heading, var(--brand-text, #1a2226));
  --cs-intro-color: var(--brand-lead, var(--brand-text, #1a2226));
  --cs-label-color: var(--brand-text, #1a2226);
  --cs-body-color: var(--brand-text, #1a2226);
  --cs-addr-name-color: var(--brand-heading, var(--brand-text, #1a2226));
  --cs-link-color: var(--brand-text, #1a2226);
  --cs-link-hover: var(--brand-text, #1a2226);
}
.bx-aa2ffed46d {
  --td-max-w: var(--brand-reading-width, 740px);
  --td-align: left;
  --td-akzent-mi: 0;
}
.bx-cbcbb059d4 {
  --cb-bg: var(--brand-primary);
  --cb-max-w: var(--brand-reading-width, 740px);
  --cb-align: center;
  --cb-h-color: var(--brand-text-on-dark, #FFFFFF);
  --cb-body-color: rgba(255,255,255,0.85);
  --cb-cta-bg: var(--brand-bg, #FFFFFF);
  --cb-cta-color: var(--brand-primary);
}
.bx-e0ca83e156 {
  --td-max-w: calc(var(--brand-reading-width, 740px) * 2 / 3);
  --td-align: center;
  --td-akzent-mi: auto;
}
.bx-e57b9c7e45 {
  --og-bg: var(--brand-bg, #FFFFFF);
  --og-cols-d: 4;
  --og-cols-m: 2;
  --og-ratio: 4 / 3;
  --og-title-color: var(--brand-heading, var(--brand-text));
  --og-subline-color: var(--brand-lead, var(--brand-text-muted, #6B7280));
}
.bx-ea6c11a047 {
  --bild-fokus: 72% 55%;
}
.bx-f2a55ad397 {
  --bild-fokus: 50% 20%;
}
.bx-f45de5b2b9 {
  --bild-fokus: 52% 45%;
}