/* FEXELION 3.0 – Grund-Stylesheet aller Themes (Blöcke, Raster, Abstände, Formulare …).
   Wird vom Kern vor dem Theme-Stylesheet eingebunden (/assets/fexelion/base.css). Themes enthalten nur noch ihre
   Gestaltung und überschreiben hier bei Bedarf. Erzeugt aus den bis 2.10 identischen Regeln aller mitgelieferten Themes. */
/* MAAL (Standard-Theme) – Design-Tokens kommen aus tokens.css (im Backend unter „Design“ anpassbar). */
:root {
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem;
  --line: color-mix(in srgb, var(--color-text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--color-text) 22%, transparent);
  --shadow: 0 1px 2px rgba(20, 24, 22, .05), 0 8px 24px -12px rgba(20, 24, 22, .18);
  --header-h: 4.5rem;
  --measure: 68ch;
  --narrow: 52rem; /* „Schmal“ – gemeinsam für Seitenkopf, Blöcke und Container, damit alles bündig steht */
  --gutter: clamp(1rem, 4vw, 2rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font: 400 1.0625rem/1.65 var(--font-body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: 1.2rem; font-family: var(--font-body); letter-spacing: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--color-text); color: var(--color-bg); padding: .6rem 1rem; border-radius: var(--radius); }
.skip-link:focus-visible { top: 1rem; }
main:focus { outline: none; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); }
/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font: 600 .95rem/1 var(--font-body); padding: .85rem 1.25rem; border-radius: var(--radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 86%, black); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn--sm { padding: .6rem .9rem; font-size: .875rem; }
.btn--lg { padding: 1rem 1.6rem; font-size: 1rem; }
.icon { flex: none; }
/* Header */
.site-header { background: color-mix(in srgb, var(--color-bg) 92%, transparent); border-bottom: 1px solid var(--line); z-index: 50; }
.site-header.is-sticky { position: sticky; top: 0; backdrop-filter: saturate(1.4) blur(10px); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--color-text); margin-right: auto; }
.brand__logo { max-height: 2.6rem; width: auto; }
/* Logo-Größe im Header (seit 3.7.1): Mittel 56 px, Groß 72 px – nur am Desktop; der Header wächst mit (Menü bleibt mittig),
   mitlaufend nach dem Scrollen wieder klein (Klasse is-scrolled aus header.js) */
@media (min-width: 961px) {
  :root:has(.site-header--logo-md) { --header-h: 5.5rem; }
  :root:has(.site-header--logo-lg) { --header-h: 6.5rem; }
  .site-header--logo-md { --logo-h: 3.5rem; }
  .site-header--logo-lg { --logo-h: 4.5rem; }
  .site-header:is(.site-header--logo-md, .site-header--logo-lg) .brand__logo { max-height: var(--logo-h); transition: max-height .25s ease; }
  .site-header:is(.site-header--logo-md, .site-header--logo-lg) .site-header__bar { transition: min-height .25s ease; }
  .site-header.is-sticky.is-scrolled .site-header__bar { min-height: var(--header-h-base, 4.5rem); }
  .site-header.is-sticky.is-scrolled { --logo-h: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .site-header .brand__logo, .site-header .site-header__bar { transition: none !important; } }
/* Logo für den Dunkelmodus (seit 3.7.2): nur, wenn eines hinterlegt ist; niedrige Spezifität, damit Themes es ausblenden können */
.brand__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :where(:root:is([data-dark-mode="auto"], [data-dark-mode="toggle"]):not([data-color-scheme="light"])) .brand__logo--light { display: none; }
  :where(:root:is([data-dark-mode="auto"], [data-dark-mode="toggle"]):not([data-color-scheme="light"])) .brand__logo--dark { display: inline; }
}
:where(:root[data-dark-mode="toggle"][data-color-scheme="dark"]) .brand__logo--light { display: none; }
:where(:root[data-dark-mode="toggle"][data-color-scheme="dark"]) .brand__logo--dark { display: inline; }
.brand__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; margin: 0; }
.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav__extra { display: flex; align-items: center; gap: var(--space-4); }
.nav { list-style: none; margin: 0; padding: 0; }
.nav--l1 { display: flex; gap: var(--space-1); }
.nav__item { position: relative; }
.nav a { display: block; padding: .55rem .8rem; color: var(--color-text); text-decoration: none; border-radius: var(--radius); font-size: var(--nav-size, 1.04rem); }
.nav a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.nav__item.is-active > a { color: var(--color-primary-text); font-weight: 600; }
.nav--l2, .nav--l3 {
  position: absolute; left: 0; top: 100%; min-width: 14rem; background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .4rem; display: none; z-index: 60;
}
.nav--l3 { left: 100%; top: -.4rem; }
.nav__item.has-children:hover > .nav--l2, .nav__item.has-children:focus-within > .nav--l2,
.nav--l2 .has-children:hover > .nav--l3, .nav--l2 .has-children:focus-within > .nav--l3 { display: block; }
.icon-link { color: var(--color-text); display: inline-flex; padding: .4rem; border-radius: var(--radius); }
.icon-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
/* Hell/Dunkel-Umschalter: zeigt das Ziel (Mond im hellen, Sonne im dunklen Modus) */
.scheme-toggle { border: 0; background: none; cursor: pointer; font: inherit; }
.scheme-toggle__light { display: none; }
.scheme-toggle[aria-pressed="true"] .scheme-toggle__light { display: inline-flex; }
.scheme-toggle[aria-pressed="true"] .scheme-toggle__dark { display: none; }
.lang-switch { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; font-size: .82rem; letter-spacing: .04em; }
.lang-switch a { display: block; padding: .3rem .45rem; border-radius: 4px; color: var(--color-muted); text-decoration: none; font-weight: 600; }
.lang-switch a.is-active { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.lang-switch a.is-missing { opacity: .55; }
.nav-toggle { display: none; background: none; border: 0; color: var(--color-text); padding: .5rem; cursor: pointer; border-radius: var(--radius); }
.nav-toggle__close { display: none; }
/* Menü-Schaltfläche mit Text (seit 1.7.0): umrandet, 18 px, mindestens 48 × 48 px */
.nav-toggle--text { align-items: center; gap: .4rem; min-height: 48px; min-width: 48px; padding: .55rem 1.1rem; border: 2px solid currentColor; font: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1; }
.nav-toggle--text:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nav-toggle--text .nav-toggle__close { align-items: center; gap: .4rem; }
@media (max-width: 960px) {
  /* backdrop-filter würde das fixierte Menüpanel auf die Header-Höhe begrenzen */
  .site-header, .site-header.is-sticky { backdrop-filter: none; background: var(--color-bg); }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--color-bg); flex-direction: column; align-items: stretch;
    padding: var(--space-5) var(--gutter) var(--space-7); overflow-y: auto; display: none; gap: var(--space-5);
  }
  .site-nav.is-open { display: flex; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
  .nav-toggle--text[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }
  .nav--l1 { flex-direction: column; }
  /* seit 3.5.0 ohne Trennlinien – der aktive Punkt hat schon eine Markierung (sonst zwei Linien übereinander) */
  .nav a { font-size: 1.15rem; padding: .8rem .5rem; border-radius: 0; }
  .nav--l2, .nav--l3 { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent; }
  .site-nav__extra { flex-wrap: wrap; }
  body.nav-open { overflow: hidden; }
  /* Symbolreihe (3.5.0): mittig unter den Menüpunkten, Tippflächen 44 × 44 px; eigener Link steht hier statt im Header */
  .menu-icons { display: flex; justify-content: center; flex-wrap: nowrap; gap: 12px; list-style: none; margin: 0; padding: var(--space-3) 0 0; }
  .nav__item--desktop { display: none; }
  /* Suche, Kontakt usw. mittig und etwas größer als die Symbolreihe darüber (3.5.0) */
  .site-nav__extra { justify-content: center; gap: 12px; }
  .site-nav__extra .icon-link { width: 52px; height: 52px; padding: 0; align-items: center; justify-content: center; }
  .site-nav__extra .icon-link .icon { width: 28px; height: 28px; }
  /* Öffnungsstatus (Erweiterung Öffnungszeiten) mittig über der Symbolreihe */
  .menu-status { display: flex; justify-content: center; }
  .menu-status .oh-status { display: block; margin: 0; text-align: center; }
  .menu-status .oh-status::before { display: inline-block; margin-right: .5rem; vertical-align: .08em; }
}
@media (min-width: 961px) { .menu-icons, .menu-status { display: none; } }
.menu-icons__link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--color-text); text-decoration: none; }
.menu-icons__link:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.menu-icons__link .icon { width: 24px; height: 24px; }
/* Seitenkopf */
.page-header { padding: var(--space-8) 0 var(--space-6); }
.page-title { margin: 0; }
/* Seitenkopf: Breite und Ausrichtung (Design-Standard bzw. je Seite) */
.page-header__inner { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
.page-header--w-full .page-header__inner { width: 100%; padding-inline: var(--gutter); }
.page-header--w-wide .page-header__inner { width: min(100% - 2 * var(--gutter), calc(var(--container) + 12rem)); }
.page-header--w-default .page-header__inner { width: min(100% - 2 * var(--gutter), var(--container)); }
.page-header--al-center { text-align: center; }
.page-header--al-center .breadcrumbs ol, .page-header--al-center .post__terms { justify-content: center; }
.page-header--al-center .page-lead { margin-inline: auto; }
.page-lead { font-size: 1.2rem; color: var(--color-muted); max-width: var(--measure); margin-top: var(--space-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 var(--space-4); font-size: .875rem; color: var(--color-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumbs a { color: inherit; }
/* Prosa */
.prose { max-width: var(--measure); }
.zb-al-center .prose { margin-inline: auto; }
.zb-al-right .prose { margin-left: auto; } /* rechtsbündige Blöcke (3.1.14): Textspalte an den rechten Rand, wie Überschrift und Dachzeile */
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .3em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 3px solid var(--color-accent); color: var(--color-muted); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.prose code { font-family: ui-monospace, monospace; font-size: .9em; background: var(--color-soft); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: var(--color-dark); color: #eef; padding: 1rem; border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose img { border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
/* Block-Grundgerüst (kontrollierte Gestaltungsoptionen) */
.zb { position: relative; isolation: isolate; }
.zb-inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; position: relative; }
.zb-w-narrow > .zb-inner { width: min(100% - 2 * var(--gutter), var(--narrow)); }
/* seit 3.6.1: „Schmal (Lesebreite)“ ist schon die Lesebreite – der Text nutzt sie ganz (sonst endet er vor der Überschrift) */
.zb-w-narrow > .zb-inner .prose, .zb-w-narrow > .zb-inner .zb-intro { max-width: none; }
.zb-w-wide > .zb-inner { width: min(100% - 2 * var(--gutter), calc(var(--container) + 12rem)); }
.zb-w-full > .zb-inner { width: 100%; padding-inline: var(--gutter); }
.zb-pt-none { padding-top: 0; }
/* Stufen in Design → Weitere einstellbar (seit 3.1.7) */
.zb-pt-sm { padding-top: var(--block-space-sm, var(--space-5)); }
.zb-pt-md { padding-top: var(--block-space-md, var(--space-8)); }
.zb-pt-lg { padding-top: var(--block-space-lg, var(--space-9)); }
.zb-pt-xl { padding-top: var(--block-space-xl, calc(var(--space-9) * 1.5)); }
.zb-pb-none { padding-bottom: 0; }
.zb-pb-sm { padding-bottom: var(--block-space-sm, var(--space-5)); }
.zb-pb-md { padding-bottom: var(--block-space-md, var(--space-8)); }
.zb-pb-lg { padding-bottom: var(--block-space-lg, var(--space-9)); }
.zb-pb-xl { padding-bottom: var(--block-space-xl, calc(var(--space-9) * 1.5)); }
/* Seit 3.7.17: Smartphone – schmale Abstände oben/unten. Jede Stufe hat eine Obergrenze; eigene Werte aus
   Design → Weitere gelten, solange sie kleiner sind. Zwei Blöcke hintereinander: z. B. M = 24 + 24 px statt 72 + 72 px */
@media (max-width: 720px) {
  /* seit 3.7.18: Faktor aus Design → Layout „Abstände der Blöcke am Smartphone“ (S 1, M 1,5, L 2) */
  .zb { --bs-sm: min(var(--block-space-sm, var(--space-5)), calc(.75rem * var(--mobile-space, 1))); --bs-md: min(var(--block-space-md, var(--space-8)), calc(1.5rem * var(--mobile-space, 1)));
        --bs-lg: min(var(--block-space-lg, var(--space-9)), calc(2.25rem * var(--mobile-space, 1))); --bs-xl: min(var(--block-space-xl, calc(var(--space-9) * 1.5)), calc(3rem * var(--mobile-space, 1))); }
  .zb-pt-sm { padding-top: var(--bs-sm); } .zb-pb-sm { padding-bottom: var(--bs-sm); }
  .zb-pt-md { padding-top: var(--bs-md); } .zb-pb-md { padding-bottom: var(--bs-md); }
  .zb-pt-lg { padding-top: var(--bs-lg); } .zb-pb-lg { padding-bottom: var(--bs-lg); }
  .zb-pt-xl { padding-top: var(--bs-xl); } .zb-pb-xl { padding-bottom: var(--bs-xl); }
}
.zb-bg-dark { background: var(--color-dark); color: #f3f1ec; --color-muted: #b9bdb9; --line: rgba(255,255,255,.14); }
.zb-bg-dark a:not(.btn) { color: inherit; }
/* seit 3.7.25: Hintergrund „Primärfarbe“ und „Akzentfarbe“ sind zwei Flächen – bisher zeigte „Akzentfarbe“ die Primärfarbe.
   --zb-fill = Farbe der Fläche, --zb-on = lesbare Schrift darauf (Akzent: vom Kern berechnet, Schwarz oder Weiß). */
.zb-bg-primary { --zb-fill: var(--color-primary); --zb-on: var(--color-primary-contrast); }
.zb-bg-accent { --zb-fill: var(--color-accent); --zb-on: var(--accent-fill-on, var(--color-accent-contrast, #fff)); --zb-muted-mix: 92%; }
:is(.zb-bg-accent, .zb-bg-primary) { background: var(--zb-fill); color: var(--zb-on); --color-muted: color-mix(in srgb, var(--zb-on) var(--zb-muted-mix, 75%), transparent); --line: color-mix(in srgb, var(--zb-on) 22%, transparent); }
:is(.zb-bg-accent, .zb-bg-primary) a:not(.btn), :is(.zb-bg-accent, .zb-bg-primary) .zb-more { color: inherit; }
.zb-bg-dark .btn--primary { background: var(--color-primary-contrast); color: var(--color-primary); }
:is(.zb-bg-accent, .zb-bg-primary) .btn--primary { background: var(--zb-on); color: var(--zb-fill); border-color: var(--zb-on); }
.zb-bg-dark .btn--primary { background: var(--color-accent); color: var(--accent-fill-on, #1b1d1f); }
.zb-bg-image { color: #fff; --color-muted: rgba(255,255,255,.82); }
.zb-bgimg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.zb-bgimg picture { display: contents; }
/* Hintergrundbild an Blockfläche anpassen: proportional skaliert, bedeckt die gesamte (auch wachsende) Blockfläche,
   Überstand wird abgeschnitten – nie verzerrt. Position über den Fokuspunkt (object-position im img-Element). */
.zb-bgimg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.zb-bgfit-contain { background-color: var(--color-dark); }
.zb-bgfit-contain .zb-bgimg img { object-fit: contain; }
/* Überlagerung (seit 2.1.0): Farbton dunkel / hell / Designfarbe / keine, Stärke 10–90 % */
.zb-ovs-10{--ov:0.1;--ovp:10%}
.zb-ovs-15{--ov:0.15;--ovp:15%}
.zb-ovs-20{--ov:0.2;--ovp:20%}
.zb-ovs-25{--ov:0.25;--ovp:25%}
.zb-ovs-30{--ov:0.3;--ovp:30%}
.zb-ovs-35{--ov:0.35;--ovp:35%}
.zb-ovs-40{--ov:0.4;--ovp:40%}
.zb-ovs-45{--ov:0.45;--ovp:45%}
.zb-ovs-50{--ov:0.5;--ovp:50%}
.zb-ovs-55{--ov:0.55;--ovp:55%}
.zb-ovs-60{--ov:0.6;--ovp:60%}
.zb-ovs-65{--ov:0.65;--ovp:65%}
.zb-ovs-70{--ov:0.7;--ovp:70%}
.zb-ovs-75{--ov:0.75;--ovp:75%}
.zb-ovs-80{--ov:0.8;--ovp:80%}
.zb-ovs-85{--ov:0.85;--ovp:85%}
.zb-ovs-90{--ov:0.9;--ovp:90%}
.zb-bgimg::after { content: ""; position: absolute; inset: 0; background: rgb(10 14 13 / var(--ov, .55)); }
.zb-ov-design .zb-bgimg::after { background: color-mix(in srgb, var(--color-bg) var(--ovp, 80%), transparent); }
.zb-ov-none .zb-bgimg::after { content: none; }
.zb-ov-none.zb-bg-image { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.zb-bgfit-contain.zb-ov-design { background-color: var(--color-bg); }
/* Textschatten (seit 3.4.0) für Dachzeile, Überschrift und Text auf Hintergrundbildern. Farbe nach Überlagerung:
   dunkel/keine → dunkler Schatten (helle Schrift), hell → heller Schatten, Designfarbe → Hintergrundfarbe des Designs */
.zb-ts-soft, .zb-ts-strong { --ts-c: #000; }
.zb-ts-soft:is(.zb-ov-light, .zb-hero--overlay-light), .zb-ts-strong:is(.zb-ov-light, .zb-hero--overlay-light) { --ts-c: #fff; }
.zb-ts-soft:is(.zb-ov-design, .zb-hero--overlay-design), .zb-ts-strong:is(.zb-ov-design, .zb-hero--overlay-design) { --ts-c: var(--color-bg, #fff); }
.zb-ts-soft { --ts: 0 1px 3px color-mix(in srgb, var(--ts-c) 65%, transparent), 0 0 16px color-mix(in srgb, var(--ts-c) 55%, transparent); }
.zb-ts-strong { --ts: 0 1px 3px color-mix(in srgb, var(--ts-c) 85%, transparent), 0 0 10px color-mix(in srgb, var(--ts-c) 70%, transparent), 0 0 26px color-mix(in srgb, var(--ts-c) 55%, transparent); }
.zb.zb:is(.zb-ts-soft, .zb-ts-strong) :is(.zb-heading, .zb-eyebrow, .zb-intro, .zb-hero__title, .zb-hero__text, .prose) { text-shadow: var(--ts); }
.zb.zb:is(.zb-ts-soft, .zb-ts-strong) .prose :is(.btn, .card, input, select, textarea) { text-shadow: none; }
/* „Text hinterlegen“ hat eine eigene Fläche – dort kein Schatten */
.zb.zb.zb-band:is(.zb-ts-soft, .zb-ts-strong) :is(.zb-heading, .zb-eyebrow, .zb-intro, .prose) { text-shadow: none; }
/* Mindesthöhen (Block wächst mit dem Inhalt weiter) */
.zb-minh-sm { min-height: 16rem; }
.zb-minh-md { min-height: 26rem; }
.zb-minh-lg { min-height: 36rem; }
.zb-minh-screen { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.zb-minh-sm, .zb-minh-md, .zb-minh-lg, .zb-minh-screen { display: flex; flex-direction: column; justify-content: center; }
.zb-minh-sm > .zb-inner, .zb-minh-md > .zb-inner, .zb-minh-lg > .zb-inner, .zb-minh-screen > .zb-inner { margin-block: auto; }
.zb-al-center { text-align: center; }
.zb-al-right { text-align: right; }
.zb-al-center .zb-actions, .zb-al-center .zb-header { justify-content: center; margin-inline: auto; }
.zb-al-right .zb-header { margin-left: auto; } /* 3.7.3: rechtsbündig an den rechten Rand des Blocks (wie die Textspalte seit 3.1.14) */
/* Bruchteil-Breiten (1/4, 1/3, 1/2, 2/3): aufeinanderfolgende Blöcke bilden eine Zeile */
.zb-row { --row-gap: var(--space-6); width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--row-gap); align-items: stretch; }
/* Position je Block: automatische Ränder wirken nur, wenn in der Zeile Platz bleibt */
.zb-row > .zb-pos-center { margin-inline: auto; }
.zb-row > .zb-pos-right { margin-left: auto; }
.zb-row > .zb { flex: 0 0 auto; min-width: 0; container-type: inline-size; }
.zb-row > .zb > .zb-inner { width: 100%; }
/* 2.10.1: Blöcke nebeneinander gleich hoch – der höchste Block bestimmt die Höhe; auch Kästen innerhalb des Blocks (z. B. Öffnungszeiten) wachsen mit, Inhalt bleibt oben */
.zb-row > .zb { display: flex; flex-direction: column; }
.zb-row > .zb > .zb-inner { flex: 1 0 auto; align-content: start; }
.zb-row > .zb:not(.zb-bg-none) > .zb-inner { padding-inline: var(--space-5); }
.zb-row > .zb:not(.zb-bg-none) { border-radius: var(--radius); overflow: hidden; }
/* Breite = Anteil abzüglich des anteiligen Zeilenabstands, damit z. B. 3 × 1/3 exakt eine Zeile füllen */
.zb-row > .zb-w-quarter { width: calc(25% - var(--row-gap) * .75); }
.zb-row > .zb-w-third { width: calc(100% / 3 - var(--row-gap) * 2 / 3); }
.zb-row > .zb-w-half { width: calc(50% - var(--row-gap) * .5); }
.zb-row > .zb-w-two-thirds { width: calc(200% / 3 - var(--row-gap) / 3); }
.zb-row > .zb-w-three-quarters { width: calc(75% - var(--row-gap) * .25); } /* seit 3.1.2 */
@media (max-width: 960px) { .zb-row > .zb-w-quarter { width: calc(50% - var(--row-gap) * .5); } }
/* 3/4 + 1/4 bleiben auf dem Tablet nebeneinander (wie 2/3 + 1/3) */
@media (max-width: 960px) { .zb-row > .zb-w-three-quarters + .zb-w-quarter, .zb-row > .zb-w-quarter:has(+ .zb-w-three-quarters) { width: calc(25% - var(--row-gap) * .75); } } /* 3.1.3: nur das 1/4 direkt neben dem 3/4 */
@media (max-width: 640px) { .zb-row > .zb.zb-col { width: 100%; } }
/* Innenlayouts richten sich in schmalen Spalten nach der Spaltenbreite statt nach dem Bildschirm */
@container (max-width: 560px) {
  .zb-grid, .zb-gallery, .zb-stats { grid-template-columns: 1fr !important; }
  .zb-hero__grid, .zb-it__grid, .zb-cta { grid-template-columns: 1fr !important; }
  .zb-hero__media, .zb-it__media { order: 0 !important; }
}
@container (min-width: 561px) and (max-width: 860px) {
  .zb-cols-3, .zb-cols-4, .zb-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .zb-grid.zb-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .zb-hero__grid, .zb-it__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) { .zb-hide-sm { display: none !important; } }
@media (min-width: 641px) and (max-width: 1023px) { .zb-hide-md { display: none !important; } } /* Tablet (3.0.5) */
@media (min-width: 1024px) { .zb-hide-lg { display: none !important; } }
.zb-header { max-width: 46rem; margin-bottom: var(--space-6); }
.zb-heading { margin-bottom: .5em; }
/* Seit 3.1.3: einheitlicher Abstand unter jeder Block-Überschrift (24 px) – in allen Blöcken und Themes */
.zb .zb-heading { margin-bottom: 1.5rem; }
.zb-header:has(> .zb-heading:only-child) { margin-bottom: 1.5rem; }
/* Seit 3.1.2: Block-Überschrift als H3/H4 (Ebene je Block, automatisch nach Breite) – Überschriftenschrift, kleiner als H2 */
/* nur so spezifisch wie „h3“ – Themes mit eigener Überschriftenschrift (h1–h4) behalten ihre Schrift */
h1:where(.zb-heading), h3:where(.zb-heading), h4:where(.zb-heading) { font-family: var(--font-heading); }
.zb .zb-heading--h3 { font-size: clamp(1rem, calc((100cqi - 3rem) / (var(--hw, 20) * 0.66)), clamp(1.3rem, 1.05rem + .9vw, 1.7rem)); }
.zb .zb-heading--h4 { font-size: clamp(1rem, calc((100cqi - 3rem) / (var(--hw, 20) * 0.66)), 1.25rem); }
/* Seit 3.2.0: „Automatisch (nach Breite)“ – einzeilig; die Schriftgröße passt headings.js an (ohne Skript wie bisher umbrechend) */
.zb .zb-heading--nowrap { white-space: nowrap; overflow-wrap: normal; contain: inline-size; width: 100%; } /* contain: Die einzeilige Überschrift darf ihren Block nicht verbreitern (sonst misst headings.js „passt“, und die Seite wird auf dem Smartphone zu breit) */
/* Symbol vor der Überschrift (seit 3.1.2): Größe folgt der Schrift, Farbe Akzent oder wie der Text */
.zb-heading--icon { display: flex; align-items: center; gap: .45em; }
.zb-al-center .zb-heading--icon { justify-content: center; }
.zb-al-right .zb-heading--icon { justify-content: flex-end; }
.zb-heading__icon { flex: none; display: inline-flex; }
.zb-heading__icon .icon { width: .9em; height: .9em; }
/* seit 3.7.25: „Akzentfarbe“ ist die Akzentfarbe (bisher die Primärfarbe); neu „Primärfarbe“ */
.zb-heading--icon-primary .zb-heading__icon { color: var(--color-primary-text, var(--color-primary)); }
.zb-heading--icon-accent .zb-heading__icon { color: var(--color-accent-text, color-mix(in srgb, var(--color-accent) 72%, currentColor)); }
.zb:is(.zb-bg-dark, :is(.zb-bg-accent, .zb-bg-primary), .zb-bg-image) :is(.zb-heading--icon-accent, .zb-heading--icon-primary) .zb-heading__icon { color: inherit; }
.zb-heading__text { min-width: 0; }
.zb-heading--small { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-body); color: var(--color-muted); font-weight: 600; }
.zb-intro { font-size: 1.15rem; color: var(--color-muted); max-width: var(--measure); }
/* Akzentfarbe als Schrift: zur umgebenden Textfarbe hin gemischt, damit kleiner Text den Mindestkontrast (WCAG 1.4.3) erreicht */
.zb-eyebrow, .error-page__code, .person__role { --accent-text: color-mix(in srgb, var(--color-accent) 55%, currentColor); }
.zb-eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--color-accent); color: var(--accent-text); margin-bottom: 1rem; }
.zb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
/* Block „Buttons“ */
.zb-buttons { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-3); }
.zb-heading + .zb-buttons { margin-top: var(--space-5); }
.zb-buttons--row { flex-wrap: wrap; align-items: center; }
.zb-buttons--stack { flex-direction: column; align-items: flex-start; }
.zb-buttons--full { align-items: stretch; }
.zb-buttons--full .btn { width: 100%; justify-content: center; }
.zb-al-center .zb-buttons--row { justify-content: center; }
.zb-al-right .zb-buttons--row { justify-content: flex-end; }
.zb-al-center .zb-buttons--stack:not(.zb-buttons--full) { align-items: center; }
.zb-al-right .zb-buttons--stack:not(.zb-buttons--full) { align-items: flex-end; }
.zb-buttons .btn, .zb-textlink { display: inline-flex; align-items: center; gap: .5rem; }
.zb-buttons .btn { min-height: 44px; }
.zb-buttons a, .zb-actions .btn { flex-wrap: nowrap; }
.zb-buttons__icon { flex: none; }
.zb-buttons__label { min-width: 0; overflow-wrap: break-word; line-height: 1.2; text-align: start; }
.zb-textlink { font-weight: 600; min-height: 44px; text-underline-offset: .2em; }
.zb-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }
.zb-more:hover { text-decoration: underline; }
.zb-more-row { margin-top: var(--space-5); }
.zb-empty { color: var(--color-muted); }
.zb-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .zb-cols-2, .zb-cols-3, .zb-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .zb-cols-3 { grid-template-columns: repeat(3, 1fr); } .zb-cols-4 { grid-template-columns: repeat(4, 1fr); } }
/* seit 3.7.26: Kartenraster mit 5 Spalten – Tablet 3, Desktop (ab 1100 px) 5; 1 Spalte bleibt überall 1 */
@media (min-width: 640px) { .zb-grid.zb-cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .zb-grid.zb-cols-5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); } }
.zb-placeholder { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--color-soft); color: var(--color-muted); border-radius: var(--radius); }
/* Hero */
.zb-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.zb-hero__title { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.2rem); margin-bottom: .35em; }
.zb-hero__text { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--color-muted); max-width: 40rem; }
.zb-al-center .zb-hero__text { margin-inline: auto; }
/* Höhe (3.0.5): Mindesthöhe des ganzen Blocks (inklusive Abstand oben/unten), deutlich abgestuft; Inhalt senkrecht mittig.
   Hintergrundbild: Mittel 62 %, Hoch 84 % der Fensterhöhe, Bildschirmhöhe = Fenster ohne Kopfzeile.
   Bild rechts/links bzw. über dem Text: Mittel mit höherem Bildformat, Hoch und Bildschirmhöhe füllen die Höhe. */
.zb-hero--h-medium, .zb-hero--h-tall, .zb-hero--h-screen { display: flex; flex-direction: column; justify-content: center; }
.zb-hero--h-medium { min-height: max(28rem, 62svh); }
.zb-hero--h-tall { min-height: max(44rem, 84svh); }
/* Bildschirmhöhe (3.7.4): genau der sichtbare Bereich unter dem Kopf – ohne Mindesthöhe 44rem, die auf Smartphones und
   niedrigen Laptop-Fenstern über den Bildschirm hinausragte; mehr Inhalt macht den Hero weiterhin höher */
.zb-hero--h-screen { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.zb-hero--h-medium .zb-hero__media img { aspect-ratio: 4 / 3.8; }
@media (min-width: 900px) {
  :is(.zb-hero--split-right, .zb-hero--split-left):is(.zb-hero--h-tall, .zb-hero--h-screen) > .zb-hero__grid { flex: 1; align-items: stretch; }
  :is(.zb-hero--split-right, .zb-hero--split-left):is(.zb-hero--h-tall, .zb-hero--h-screen) .zb-hero__content { align-self: center; }
  :is(.zb-hero--split-right, .zb-hero--split-left):is(.zb-hero--h-tall, .zb-hero--h-screen) .zb-hero__media { position: relative; min-height: 18rem; }
  :is(.zb-hero--split-right, .zb-hero--split-left):is(.zb-hero--h-tall, .zb-hero--h-screen) .zb-hero__media picture { display: contents; }
  :is(.zb-hero--split-right, .zb-hero--split-left):is(.zb-hero--h-tall, .zb-hero--h-screen) .zb-hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 899px) {
  .zb-hero--h-tall .zb-hero__media img, .zb-hero--h-screen .zb-hero__media img { aspect-ratio: 4 / 4.8; }
}
/* Höhe „Schmal“ (1.4.0): kompakter Seitenkopf – weniger Abstand, kleinere Schrift, flaches Bild */
.zb-hero--h-compact:is(.zb-pt-md, .zb-pt-lg, .zb-pt-xl) { padding-top: var(--space-6); }
.zb-hero--h-compact:is(.zb-pb-md, .zb-pb-lg, .zb-pb-xl) { padding-bottom: var(--space-6); }
@media (max-width: 720px) { .zb-hero--h-compact:is(.zb-pt-md, .zb-pt-lg, .zb-pt-xl) { padding-top: var(--bs-md); } .zb-hero--h-compact:is(.zb-pb-md, .zb-pb-lg, .zb-pb-xl) { padding-bottom: var(--bs-md); } }
.zb-hero--h-compact .zb-hero__grid { gap: var(--space-5); }
.zb-hero--h-compact .zb-hero__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); margin-bottom: .25em; }
.zb-hero--h-compact .zb-hero__text { font-size: 1.05rem; }
.zb-hero--h-compact .zb-actions { margin-top: var(--space-4); }
.zb-hero--h-compact .zb-hero__media img { aspect-ratio: 16 / 7; }
.zb-hero--h-compact.zb-hero--background .zb-hero__grid { padding-block: var(--space-4); }
@media (min-width: 900px) {
  .zb-hero--split-right .zb-hero__grid, .zb-hero--split-left .zb-hero__grid { grid-template-columns: 1.05fr 1fr; }
  .zb-hero--split-left .zb-hero__media { order: -1; }
}
.zb-hero__media { margin: 0; }
.zb-hero__media img { border-radius: calc(var(--radius) * 1.4); width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; box-shadow: var(--shadow); }
/* Mehrere Hero-Bilder (3.0.4): Platz freihalten, bis hero.js das Bild eingesetzt hat – kein Springen der Seite */
.zb-hero__media[data-hero-random]:not(:has(img)) { aspect-ratio: 4 / 3.4; border-radius: calc(var(--radius) * 1.4); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.zb-hero--h-compact .zb-hero__media[data-hero-random]:not(:has(img)) { aspect-ratio: 16 / 7; }
.zb-hero--background { color: #fff; --color-muted: rgba(255,255,255,.85); }
/* Hintergrundbild füllt die Blockfläche: proportional gezoomt, an den Blockrändern abgeschnitten, nie verzerrt */
.zb-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.zb-hero__bg picture { display: contents; }
.zb-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Überlagerung (seit 2.1.0): Stärke gilt für die Textseite, zur Bildseite hin 45 % davon */
.zb-hero--ovs-10{--hov:0.1;--hovp:10%}
.zb-hero--ovs-15{--hov:0.15;--hovp:15%}
.zb-hero--ovs-20{--hov:0.2;--hovp:20%}
.zb-hero--ovs-25{--hov:0.25;--hovp:25%}
.zb-hero--ovs-30{--hov:0.3;--hovp:30%}
.zb-hero--ovs-35{--hov:0.35;--hovp:35%}
.zb-hero--ovs-40{--hov:0.4;--hovp:40%}
.zb-hero--ovs-45{--hov:0.45;--hovp:45%}
.zb-hero--ovs-50{--hov:0.5;--hovp:50%}
.zb-hero--ovs-55{--hov:0.55;--hovp:55%}
.zb-hero--ovs-60{--hov:0.6;--hovp:60%}
.zb-hero--ovs-65{--hov:0.65;--hovp:65%}
.zb-hero--ovs-70{--hov:0.7;--hovp:70%}
.zb-hero--ovs-75{--hov:0.75;--hovp:75%}
.zb-hero--ovs-80{--hov:0.8;--hovp:80%}
.zb-hero--ovs-85{--hov:0.85;--hovp:85%}
.zb-hero--ovs-90{--hov:0.9;--hovp:90%}
.zb-hero--overlay-dark .zb-hero__bg::after { background: linear-gradient(90deg, rgb(8 14 12 / var(--hov, .8)), rgb(8 14 12 / calc(var(--hov, .8) * .45))); }
.zb-hero--overlay-design .zb-hero__bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--color-bg) var(--hovp, 80%), transparent), color-mix(in srgb, var(--color-bg) calc(var(--hovp, 80%) * .45), transparent)); }
/* Richtung der Überlagerung (seit 3.1.14, Hero und Blöcke mit Hintergrundbild): Die Farbschicht ist gleichmäßig in der gewählten
   Stärke, eine Maske lässt sie zur anderen Seite hin weich auslaufen – unabhängig vom Farbton und vom Theme. */
.zb-hero[class*="zb-ovdir-"].zb-hero--overlay-dark .zb-hero__bg::after { background: rgb(8 14 12 / var(--hov, .8)); }
.zb-hero[class*="zb-ovdir-"].zb-hero--overlay-light .zb-hero__bg::after { background: rgb(255 255 255 / var(--hov, .9)); }
.zb-hero[class*="zb-ovdir-"].zb-hero--overlay-design .zb-hero__bg::after { background: color-mix(in srgb, var(--color-bg) var(--hovp, 80%), transparent); }
.zb-ovdir-left :is(.zb-bgimg, .zb-hero__bg)::after { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 32%, rgb(0 0 0 / .12) 88%, rgb(0 0 0 / .12) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 32%, rgb(0 0 0 / .12) 88%, rgb(0 0 0 / .12) 100%); }
.zb-ovdir-right :is(.zb-bgimg, .zb-hero__bg)::after { -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 32%, rgb(0 0 0 / .12) 88%, rgb(0 0 0 / .12) 100%); mask-image: linear-gradient(270deg, #000 0%, #000 32%, rgb(0 0 0 / .12) 88%, rgb(0 0 0 / .12) 100%); }
.zb-ovdir-center :is(.zb-bgimg, .zb-hero__bg)::after { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .12) 0%, #000 28%, #000 72%, rgb(0 0 0 / .12) 100%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .12) 0%, #000 28%, #000 72%, rgb(0 0 0 / .12) 100%); }
.zb-ovdir-bottom :is(.zb-bgimg, .zb-hero__bg)::after { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, rgb(0 0 0 / .12) 92%, rgb(0 0 0 / .12) 100%); mask-image: linear-gradient(0deg, #000 0%, #000 30%, rgb(0 0 0 / .12) 92%, rgb(0 0 0 / .12) 100%); }
.zb-ovdir-top :is(.zb-bgimg, .zb-hero__bg)::after { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgb(0 0 0 / .12) 92%, rgb(0 0 0 / .12) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgb(0 0 0 / .12) 92%, rgb(0 0 0 / .12) 100%); }
/* Smartphone: Text über die ganze Breite – links/rechts werden gleichmäßig */
@media (max-width: 720px) { :is(.zb-ovdir-left, .zb-ovdir-right) :is(.zb-bgimg, .zb-hero__bg)::after { -webkit-mask-image: none; mask-image: none; } }
.zb-hero--background .btn--ghost { color: inherit; }
.zb-hero--background.zb-hero--overlay-dark .btn--primary { background: var(--color-accent); color: var(--accent-fill-on, #1b1d1f); }
.zb--hero--minimal { background: none; }
/* Bild mit Text */
.zb-it__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .zb-it__grid { grid-template-columns: 1fr 1fr; }
  .zb-it--split-2-1 .zb-it__grid { grid-template-columns: 1.6fr 1fr; }
  .zb-it--split-1-2 .zb-it__grid { grid-template-columns: 1fr 1.6fr; }
  .zb-it--right .zb-it__media { order: 2; }
  .zb-it--right.zb-it--split-2-1 .zb-it__grid { grid-template-columns: 1fr 1.6fr; }
  .zb-it--right.zb-it--split-1-2 .zb-it__grid { grid-template-columns: 1.6fr 1fr; }
}
.zb-it__media { margin: 0; }
.zb-it__media img { border-radius: var(--radius); width: 100%; }
.zb-ratio--square img { aspect-ratio: 1; object-fit: cover; }
.zb-ratio--landscape img { aspect-ratio: 3 / 2; object-fit: cover; }
.zb-ratio--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
figcaption { font-size: .875rem; color: var(--color-muted); margin-top: .6rem; }
/* Galerie */
.zb-gallery { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .zb-gallery.zb-cols-3 { grid-template-columns: repeat(3, 1fr); } .zb-gallery.zb-cols-4 { grid-template-columns: repeat(4, 1fr); } .zb-gallery.zb-cols-5 { grid-template-columns: repeat(5, 1fr); } }
.zb-gallery figure { margin: 0; }
.zb-gallery a[data-lightbox] { display: block; cursor: zoom-in; }
/* Block „Bild“ (1.4.0) */
.zb-image { margin: 0; max-width: 100%; }
.zb-image--small { width: 340px; }
.zb-image--medium { width: 600px; }
.zb-image--large { width: 880px; }
.zb-image--full { width: 100%; }
.zb-image--align-center { margin-inline: auto; }
.zb-image--align-right { margin-inline-start: auto; }
.zb-image--align-center figcaption { text-align: center; }
.zb-image--align-right figcaption { text-align: end; }
.zb-image__img { display: block; width: 100%; height: auto; }
.zb-image__img.is-rounded { border-radius: var(--radius); }
.zb-image__img.has-shadow { box-shadow: var(--shadow); }
.zb-image--ratio-wide .zb-image__img { aspect-ratio: 16 / 9; }
.zb-image--ratio-landscape .zb-image__img { aspect-ratio: 3 / 2; }
.zb-image--ratio-square .zb-image__img { aspect-ratio: 1; }
.zb-image--ratio-portrait .zb-image__img { aspect-ratio: 4 / 5; }
.zb-image:not(.zb-image--ratio-auto) .zb-image__img { object-fit: cover; }
.zb-image:not(.zb-image--ratio-auto).zb-image--fit-contain .zb-image__img { object-fit: contain; background: var(--color-soft); }
.zb-image picture { display: contents; }
.zb-image__link { position: relative; display: block; }
.zb-image__link[data-lightbox] { cursor: zoom-in; }
.zb-image__zoom { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; opacity: .85; }
.zb-image__link:hover .zb-image__zoom, .zb-image__link:focus-visible .zb-image__zoom { opacity: 1; }
.zb-gallery img { width: 100%; border-radius: calc(var(--radius) * .6); }
/* Leistungen */
.zb-service { padding: var(--space-5) 0; } /* ohne Trennlinie (3.0.2) */
.zb-service__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: color-mix(in srgb, var(--zb-icon-color, var(--color-primary)) 10%, transparent); color: var(--color-primary-text); margin-bottom: var(--space-4); }
.zb-bg-dark .zb-service__icon, :is(.zb-bg-accent, .zb-bg-primary) .zb-service__icon, .zb-bg-image .zb-service__icon { background: rgba(255,255,255,.12); }
.zb-services:not(.zb-icons) .zb-service__icon { color: var(--color-primary-text); }
.zb-bg-dark .zb-services:not(.zb-icons) .zb-service__icon, :is(.zb-bg-accent, .zb-bg-primary) .zb-services:not(.zb-icons) .zb-service__icon { color: inherit; }
/* Icons aus der Icon-Auswahl (Größe und Farbe je Block) */
.zb-icons { --zb-icon-color: var(--color-primary); --zb-icon-box: 3rem; }
.zb-icons--sm { --zb-icon-box: 2.5rem; }
.zb-icons--lg { --zb-icon-box: 4rem; }
.zb-icons--xl { --zb-icon-box: 5.25rem; }
.zb-icons--accent { --zb-icon-color: var(--color-accent); }
.zb-icons--text { --zb-icon-color: var(--color-text); }
.zb-icons--muted { --zb-icon-color: var(--color-muted); }
.zb-icon { color: var(--zb-icon-color); }
.zb-icon .icon { display: block; }
.zb-icons .zb-service__icon { width: var(--zb-icon-box); height: var(--zb-icon-box); }
/* 3.1.4: Hintergrund der Symbole je Block (Leistungsübersicht) – überschreibt die Theme-Form; Standard „abgerundet, zart“ setzt keine Klasse */
.zb .zb-services--bg-round .zb-service__icon { border-radius: 50% !important; }
.zb .zb-services--bg-none .zb-service__icon { width: auto; height: auto; background: none !important; border: 0 !important; border-radius: 0 !important; }
.zb:not(.zb-bg-dark, :is(.zb-bg-accent, .zb-bg-primary), .zb-bg-image) .zb-services--bg-none .zb-service__icon { color: var(--zb-icon-color) !important; }
.zb:is(.zb-bg-dark, :is(.zb-bg-accent, .zb-bg-primary), .zb-bg-image) .zb-services--bg-none .zb-service__icon { color: inherit !important; }
.zb .zb-services--tone-strong .zb-service__icon { background: var(--zb-icon-color, var(--color-primary)) !important; color: #fff !important; color: oklch(from var(--zb-icon-color, var(--color-primary)) clamp(0, (0.62 - l) * 1000, 1) 0 0) !important; }
/* in dunklen/farbigen Abschnitten weiße Fläche (wie „zart“ mit weißem Hauch) – sonst verschwindet die Fläche, wenn die Icon-Farbe der Abschnittsfarbe entspricht */
.zb:is(.zb-bg-dark, :is(.zb-bg-accent, .zb-bg-primary), .zb-bg-image) .zb-services--tone-strong .zb-service__icon { background: #fff !important; color: #1a1a1a !important; }
.zb-bg-dark .zb-icons--primary .zb-icon, :is(.zb-bg-accent, .zb-bg-primary) .zb-icons--primary .zb-icon, .zb-bg-image .zb-icons--primary .zb-icon,
.zb-bg-dark .zb-icons--text .zb-icon, :is(.zb-bg-accent, .zb-bg-primary) .zb-icons--text .zb-icon, .zb-bg-image .zb-icons--text .zb-icon { color: inherit; }
.zb-stat__icon { display: block; margin-bottom: .6rem; line-height: 1; }
/* seit 2.0 im <dd> (gültige Definitionsliste) */
.card__icon { padding: var(--space-5) var(--space-5) 0; }
.zb-service__title { margin-bottom: .4em; }
.zb-service p { color: var(--color-muted); }
.zb--services--boxed .zb-service { background: var(--color-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
/* Karten */
.card { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow); color: var(--color-text); }
.zb--cards--bordered .card { box-shadow: none; border: 1px solid var(--line-strong); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card__body p { color: var(--color-muted); margin: 0; }
/* seit 3.7.16: Kartentext mit Markdown – Absätze und Listen mit kleinem Abstand, einfache Zeilenumbrüche bleiben erhalten */
.card__body .zb-card__text { color: var(--color-muted); }
.card__body .zb-card__text > * { margin: 0; }
.card__body .zb-card__text > * + * { margin-top: .6em; }
.card__body .zb-card__text :is(ul, ol) { padding-left: 1.2em; }
.card__title { margin: 0 0 .3rem; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { text-decoration: underline; }
.card .zb-more { margin-top: auto; padding-top: var(--space-3); color: var(--color-primary-text); }
/* Linkliste (seit 3.7.0) */
.zb-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .zb-linklist--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zb-linklist__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.zb-linklist__title { margin: 0; }
.zb-linklist__title a { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.zb-linklist__title--logo a { text-decoration: none; display: inline-block; }
.zb-linklist__logo { display: block; width: auto; height: auto; max-height: 3.5rem; max-width: min(100%, 16rem); object-fit: contain; }
.zb-linklist__text { margin: 0; color: var(--color-text); }
.zb-linklist__actions { margin-top: auto; display: flex; justify-content: flex-end; }
.zb-linklist--btn-left .zb-linklist__actions { justify-content: flex-start; }
/* Testimonials */
.testimonial { margin: 0; height: 100%; padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text); }
.testimonial__mark { color: var(--color-accent); }
.testimonial blockquote { margin: 0; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.5; flex: 1; }
.testimonial figcaption { display: flex; align-items: center; gap: .8rem; margin: 0; color: var(--color-text); }
.testimonial figcaption small { color: var(--color-muted); }
/* Zentrierte Blöcke (3.0.2): Icons, Anführungszeichen und Namenszeile mittig wie der Text */
.zb-al-center .zb-stat__icon .icon { margin-inline: auto; }
.zb-al-center .testimonial { align-items: center; }
.zb-al-center .testimonial figcaption { justify-content: center; }
/* Sterne (3.0.4): Goldgelb mit dunklerer Kontur (Kontrast ≥ 3 : 1 auch auf hellem Grund) oder Akzentfarbe */
.testimonial__stars { display: inline-flex; gap: 2px; color: #a87700; --zt-star: #f2b200; }
.testimonial__stars .icon { width: 20px; height: 20px; }
.testimonial__stars .is-on { fill: var(--zt-star); }
.testimonial__stars .is-off { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.testimonial__stars--accent { color: var(--color-accent-text, var(--color-accent)); --zt-star: currentColor; }
/* Nur eine Zeile: ohne JavaScript die ersten Stimmen je Spaltenzahl, mit Skript entscheidet testimonials.js */
.zb-testimonials--row:not(.is-ready) > li:nth-child(n+4) { display: none; }
@media (max-width: 959px) { .zb-testimonials--row:not(.is-ready) > li:nth-child(n+3) { display: none; } }
@media (max-width: 639px) { .zb-testimonials--row:not(.is-ready) > li:nth-child(n+2) { display: none; } }
.zb-testimonials--row > li[hidden] { display: none; }
/* seit 3.1.11: Smartphone – bis zu 3 Stimmen wischbar nebeneinander, die nächste angeschnitten; Zitat etwas kleiner */
.zb-testimonials.zb-testimonials--swipe { display: flex; gap: var(--space-4, 1rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px calc(50vw - 50% + 4px) 14px 4px; margin: -4px calc(50% - 50vw) -14px -4px; }
.zb-testimonials--swipe::-webkit-scrollbar { display: none; }
.zb-testimonials--swipe > li { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
.zb-testimonials--swipe:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.zb-testimonials--swipe .testimonial blockquote { font-size: 1.02rem; }
.testimonial[class*="testimonial--clamp-"] blockquote p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* 3.1.3: Zitat kürzen, „…“ am Ende */
.testimonial--clamp-3 blockquote p { -webkit-line-clamp: 3; line-clamp: 3; }
.testimonial--clamp-4 blockquote p { -webkit-line-clamp: 4; line-clamp: 4; }
.testimonial--clamp-5 blockquote p { -webkit-line-clamp: 5; line-clamp: 5; }
.testimonial--clamp-6 blockquote p { -webkit-line-clamp: 6; line-clamp: 6; }
.testimonial__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
/* Team */
.person { text-align: left; }
.person__photo { aspect-ratio: 4 / 5; background: var(--color-soft); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; color: var(--color-muted); margin-bottom: var(--space-4); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { margin: 0; }
.person__role { color: var(--color-accent); color: var(--accent-text); font-weight: 600; font-size: .92rem; margin: .2rem 0 .6rem; }
.person__bio { color: var(--color-muted); font-size: .97rem; }
.person__mail { font-size: .92rem; }
/* Team: Foto und Text anpassbar, E-Mail als Button (1.4.0) */
.zb-team--photo-square .person__photo { aspect-ratio: 1; }
.zb-team--photo-landscape .person__photo { aspect-ratio: 3 / 2; }
.zb-team--photo-circle .person__photo { aspect-ratio: 1; border-radius: 50%; }
.zb-team--photo-auto .person__photo { aspect-ratio: auto; display: block; }
.zb-team--photo-auto .person__photo img { height: auto; }
.zb-team--photo-auto .person__photo > span { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.zb-team--fit-contain .person__photo img { object-fit: contain; }
.zb-team--size-medium .person__photo { width: 70%; }
.zb-team--size-small .person__photo { width: 128px; }
.zb-team--text-center .person { text-align: center; }
.zb-team--text-center .person__photo { margin-inline: auto; }
.person__photo picture { display: contents; }
/* Foto füllt den Rahmen unabhängig vom Seitenverhältnis der Datei (Fokuspunkt bestimmt den Ausschnitt) */
.zb-team:not(.zb-team--photo-auto) .person__photo { position: relative; }
.zb-team:not(.zb-team--photo-auto) .person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.person__actions { margin: var(--space-5) 0 0; }
/* 2.9.2: Abstand über Schaltflächen wie im Hero */
.person__mail-btn { min-height: 44px; }
.btn--icon { width: 44px; padding: 0; }
/* Kennzahlen */
.zb-stats { display: grid; gap: var(--space-5); margin: 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .zb-stats.zb-cols-3 { grid-template-columns: repeat(3, 1fr); } .zb-stats.zb-cols-4 { grid-template-columns: repeat(4, 1fr); } .zb-stats.zb-cols-1 { grid-template-columns: 1fr; } }
.zb-stat { display: flex; flex-direction: column-reverse; padding-top: var(--space-4); } /* ohne Trennlinie (3.0.2) */
.zb-stat dd { margin: 0; font-family: var(--font-heading); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 600; line-height: 1.05; color: var(--color-primary-text); }
.zb-bg-dark .zb-stat dd, :is(.zb-bg-accent, .zb-bg-primary) .zb-stat dd { color: inherit; }
.zb-stat dt { color: var(--color-muted); margin-top: .4rem; }
/* CTA */
.zb-cta { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .zb-cta { grid-template-columns: 1.5fr auto; } .zb-al-center .zb-cta { grid-template-columns: 1fr; } }
.zb-cta .zb-actions { margin-top: 0; }
.zb .zb-cta > div > :last-child { margin-bottom: 0; } /* 3.1.3: untereinander genau 24 px (Rasterabstand) bis zu den Schaltflächen */
/* Logos */
.zb-logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7); align-items: center; justify-content: center; }
.zb-logos img { max-height: 3rem; width: auto; }
.zb-logos--gray img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.zb-logos--gray a:hover img, .zb-logos--gray a:focus img { filter: none; opacity: 1; }
/* 2.10.1: Kontaktinformationen untereinander – Überschrift, Angaben, Schaltfläche „Route planen“ */
.zb-contact { display: grid; gap: var(--space-5); align-content: start; }
.zb-contact__intro > :last-child { margin-bottom: 0; }
.zb .zb-contact__intro .zb-heading { margin-bottom: 0; } /* Abstand kommt vom Raster (1,5 rem) */
/* Social Media (seit 3.1.2): Liste oder Buttons, wahlweise mit Logo */
.zb-social__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.zb-social__link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.zb-social__icon { flex: none; }
.zb-social__link .zb-social__icon { color: var(--color-primary-text, var(--color-primary)); }
.zb-bg-dark .zb-social__link .zb-social__icon, :is(.zb-bg-accent, .zb-bg-primary) .zb-social__link .zb-social__icon { color: inherit; }
.zb-social__btns { display: grid; gap: .65rem; max-width: 26rem; }
.zb-social__btn { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; }
.zb-al-center .zb-social__list { justify-items: center; }
.zb-al-center .zb-social__btns { margin-inline: auto; }
.zb-al-right .zb-social__list { justify-items: end; }
.zb-al-right .zb-social__btns { margin-left: auto; }
.zb-contact__intro .prose { margin-top: var(--space-3); }
.zb-contact__list a, .zb-contact__list address { overflow-wrap: anywhere; }
.zb-contact__actions { margin-top: var(--space-2); }
.zb-contact__route { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.zb-contact__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.zb-contact__list li { display: flex; gap: .9rem; align-items: flex-start; }
.zb-contact__list .icon { color: var(--color-primary-text); margin-top: .15rem; }
.zb-bg-dark .zb-contact__list .icon, :is(.zb-bg-accent, .zb-bg-primary) .zb-contact__list .icon { color: inherit; }
/* Social-Media-Links der Kontaktkarte (3.0.5–3.1.1) seit 3.1.2 entfernt – dafür gibt es den Block „Social Media“ */
address { font-style: normal; }
/* Formulare */
/* Formular-Block (seit 3.7.3): nutzt die Inhaltsbreite des Blocks wie jeder andere Block (Schmal = Lesebreite) – bisher fest
   46rem und zentriert. Die Textausrichtung gilt für Überschrift und Einleitung; Beschriftungen und Felder bleiben linksbündig,
   der Absenden-Button folgt der Ausrichtung. */
.zb-formblock .zform { text-align: left; }
.zb-al-center .zb-formblock .zform__actions:not(.zform__nav) { text-align: center; }
.zb-al-right .zb-formblock .zform__actions:not(.zform__nav) { text-align: right; }
/* Farbige Flächen: Pflicht-Stern in der Schriftfarbe (Rot ist dort kaum lesbar), Absenden-Button in Kontrastfarbe */
:is(:is(.zb-bg-accent, .zb-bg-primary), .zb-bg-dark, .zb-bg-image) .zform abbr { color: inherit; }
:is(.zb-bg-accent, .zb-bg-primary) .zform .btn--primary { background: var(--zb-on); color: var(--zb-fill); border-color: var(--zb-on); }
/* Breite des Formulars im Block (3.7.3): Anteil der Inhaltsbreite, Lage nach Textausrichtung; Tablet mind. 75 %, Smartphone ganz */
.zb-al-center .zb-formblock__form { margin-inline: auto; }
.zb-al-right .zb-formblock__form { margin-left: auto; }
@media (min-width: 961px) {
  .zb-formblock__form--w75 { width: 75%; }
  .zb-formblock__form--w50 { width: 50%; }
  .zb-formblock__form--w25 { width: 25%; }
}
@media (min-width: 601px) and (max-width: 960px) { .zb-formblock__form:is(.zb-formblock__form--w50, .zb-formblock__form--w25, .zb-formblock__form--w75) { width: 75%; } }
:is(.zb-bg-accent, .zb-bg-primary) .zform .btn--primary:hover { background: color-mix(in srgb, var(--zb-on) 88%, var(--zb-fill)); }
.zform form { display: grid; gap: var(--space-4); }
/* Feldbreiten (3.7.3): 4 Spalten, Felder 25/50/75/100 % – nebeneinander, wenn sie in eine Zeile passen.
   Tablet: 25 % wird 50 %; Smartphone: alle Felder ganze Breite */
.zform form, .zform__step { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-5); }
.zform form > *, .zform__step > * { grid-column: 1 / -1; }
.zform .zform__field--w75 { grid-column: span 3; }
.zform .zform__field--w50 { grid-column: span 2; }
.zform .zform__field--w25 { grid-column: span 1; }
@media (max-width: 960px) { .zform .zform__field--w25 { grid-column: span 2; } }
@media (max-width: 600px) { .zform .zform__field:is(.zform__field--w25, .zform__field--w50, .zform__field--w75) { grid-column: 1 / -1; } }
.zform__field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.zform input[type=text], .zform input[type=email], .zform input[type=tel], .zform input[type=date], .zform input[type=number], .zform select, .zform textarea, .search-form input {
  width: 100%; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .75rem .9rem; transition: border-color .15s, box-shadow .15s;
}
/* seit 3.7.24: einzeilige Felder gleich hoch – Auswahlfelder waren niedriger, Datumsfelder höher als Textfelder */
.zform input[type=text], .zform input[type=email], .zform input[type=tel], .zform input[type=date], .zform input[type=number], .zform select:not([multiple]):not([size]) {
  box-sizing: border-box; line-height: inherit; min-height: 3.2rem; min-height: calc(1lh + 1.5rem + 2px); height: calc(1lh + 1.5rem + 2px);
}
.zform input:focus, .zform select:focus, .zform textarea:focus, .search-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* seit 3.7.21: Datum, Zahl, Farbe, Datei-Upload; Felder und Seiten mit Bedingung */
.zform input[type=color] { width: 4.5rem; height: 2.9rem; padding: .2rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; }
.zform input[type=file] { width: 100%; padding: .55rem .6rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; }
.zform input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: .8rem; padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--color-soft); color: inherit; cursor: pointer; }
.zform__hint, .zform__kept { margin: .35rem 0 0; font-size: .9rem; color: var(--color-muted); }
.zform__kept { font-weight: 600; }
.zform__cond.is-off { display: none; }
.zform__field.has-error input[type=file] { border-color: var(--danger); }
.zform__check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.zform__check input { margin-top: .3rem; accent-color: var(--color-primary); width: 1.05rem; height: 1.05rem; }
.zform__multi { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.zform { --danger: color-mix(in srgb, #d92d20 75%, var(--color-text)); }
.zform__field.has-error input, .zform__field.has-error textarea, .zform__field.has-error select { border-color: var(--danger); }
.zform__msg { color: var(--danger); font-size: .9rem; margin: .35rem 0 0; }
.zform__error { background: color-mix(in srgb, #d92d20 10%, var(--color-bg)); color: var(--danger); border: 1px solid color-mix(in srgb, #d92d20 35%, var(--color-bg)); padding: .8rem 1rem; border-radius: var(--radius); }
.zform__success { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); padding: 1.2rem 1.4rem; border-radius: var(--radius); color: var(--color-text); font-weight: 500; }
.zform__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.zform abbr { text-decoration: none; color: var(--danger); }
/* Mehrseitige Formulare (1.5.0) */
.zform__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-4); }
.zform__step[hidden] { display: none; }
.zform__step-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; padding: 0; margin: 0 0 var(--space-2); }
.zform__step-title:focus { outline: none; }
.zform__step-title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.zform__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.zform__nav .btn--primary:only-child { margin-left: auto; }
.zform__nav .btn { min-height: 44px; }
.zform__progress { margin-bottom: var(--space-2); }
.zform__progress-label, .zform__count { margin: 0 0 .4rem; font-size: .9rem; font-weight: 600; color: var(--color-muted); }
.zform__count { font-size: 1rem; font-variant-numeric: tabular-nums; }
.zform__bar { height: 8px; border-radius: 999px; background: var(--color-soft); overflow: hidden; }
.zform__bar span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .zform__bar span { transition: none; } }
.zform__dots { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; align-items: center; }
.zform__dots li { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-primary); background: transparent; }
.zform__dots li.is-done { background: var(--color-primary); }
.zform__dots li.is-current { background: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* FAQ */
.zb-faq { max-width: 52rem; }
/* FAQ in zwei Spalten (3.7.6): Spalten tragen die Listen-Gestaltung des Themes; darunter eine Liste in gewohnter Reihenfolge */
.zb-faq--2col { max-width: none; }
@media (max-width: 960px) { .zb-faq__col { display: contents; } }
@media (min-width: 961px) { .zb-faq__list.zb-faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); row-gap: 0; border-top: 0; align-items: start; } }
.zb-faq__list { border-top: 1px solid var(--line-strong); }
.faq { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-weight: 600; font-size: 1.08rem; text-align: left; }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { transition: transform .2s; color: var(--color-muted); }
.faq[open] .faq__icon { transform: rotate(180deg); }
.faq .prose { padding-bottom: 1.2rem; color: var(--color-muted); text-align: left; }
/* Trenner und Abstand */
.zb-divider { border: 0; border-top: 1px solid var(--line-strong); margin: 0; }
.zb-divider--short { width: 4rem; border-top: 3px solid var(--color-accent); }
.zb-al-center .zb-divider--short { margin-inline: auto; }
.zb-divider--dots { border-top: 3px dotted var(--line-strong); width: 6rem; margin-inline: auto; }
.zb-spacer--sm { height: var(--space-5); }
.zb-spacer--md { height: var(--space-7); }
.zb-spacer--lg { height: var(--space-8); }
.zb-spacer--xl { height: var(--space-9); }
/* Spalten */
.zb-columns { display: grid; gap: var(--space-6); }
@media (min-width: 800px) {
  .zb-columns--2 { grid-template-columns: 1fr 1fr; } .zb-columns--2.zb-columns--2-1 { grid-template-columns: 2fr 1fr; } .zb-columns--2.zb-columns--1-2 { grid-template-columns: 1fr 2fr; }
  .zb-columns--3 { grid-template-columns: repeat(3, 1fr); } .zb-columns--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .zb-columns--4 { grid-template-columns: repeat(4, 1fr); } }
.zb-column__media img { border-radius: var(--radius); margin-bottom: var(--space-4); width: 100%; }
/* Suche */
.search-form { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.search-results { padding-bottom: var(--space-9); }
.search-results__count { color: var(--color-muted); }
.search-results__list { list-style: none; padding: 0; margin: 0; }
.search-results__list li { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.search-results__list h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.search-results__list p { color: var(--color-muted); margin: 0; }
/* Fehlerseite */
.error-page { padding: var(--space-9) 0; }
.error-page__code { font-family: var(--font-heading); font-size: 5rem; line-height: 1; color: var(--color-accent); color: var(--accent-text); margin: 0 0 var(--space-4); }
/* seit 3.7.19: Farbe des Symbols auf der Wartungsseite (Einstellungen → Wartung) und Text mit Markdown */
.error-page__code.maintenance-icon--primary { color: color-mix(in srgb, var(--color-primary) 70%, currentColor); }
.error-page__code.maintenance-icon--text { color: var(--color-text); }
.error-page__code.maintenance-icon--muted { color: var(--color-muted); }
.error-page__code.maintenance-icon--custom { color: var(--maintenance-icon, var(--accent-text)); }
.error-page__code[class*="maintenance-icon--"] svg { -webkit-text-fill-color: currentColor; }
.maintenance-page__text > * { margin: 0; }
.maintenance-page__text > * + * { margin-top: .75em; }
.maintenance-page__text :is(ul, ol) { padding-left: 1.3em; text-align: start; }
.maintenance-page__text a { color: inherit; text-decoration: underline; }
/* Footer */
.site-footer { background: var(--color-dark); color: #d9dcd8; margin-top: 0; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--space-6); padding: var(--space-8) 0 var(--space-6); }
/* Ab 800 px: Markenspalte links, Kontakt und Menü rechts; das Menü endet bündig am rechten Rand des Inhaltsbereichs (Container-Breite) */
@media (min-width: 800px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: max-content; column-gap: var(--space-8); }
  .site-footer__brand { max-width: 36rem; }
  .site-footer__nav { justify-self: end; text-align: end; }
}
.site-footer .brand__name { color: #fff; margin-bottom: .8rem; }
/* Logo im Footer (3.0.6): Klein / Mittel (wie im Header) / Groß */
.site-footer__logo { margin: 0 0 .9rem; line-height: 0; }
.site-footer__logo picture { display: contents; }
.site-footer__logo-img { width: auto; max-width: min(100%, 16rem); height: auto; }
.site-footer__logo--sm .site-footer__logo-img { max-height: 2rem; }
.site-footer__logo--md .site-footer__logo-img { max-height: 2.6rem; }
.site-footer__logo--lg .site-footer__logo-img { max-height: 3.8rem; }
.site-footer__title { color: #fff; font-weight: 600; margin-bottom: .6rem; }
.footer-nav, .social { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.social { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: var(--space-4); }
.social__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.social__icon, .social__img { flex: none; }
.social__img { display: block; object-fit: contain; }
/* Social Media im Footer (1.5.0): Linktext oder Button, ohne Icons */
.social--links .social__link { text-decoration: underline; text-underline-offset: .2em; }
.social--buttons { gap: .5rem; }
/* Nur Icons (seit 3.1.3): Tippfläche 44 × 44 px, Logo 22 px; die Reihe rückt um den Überstand nach links,
   damit das erste Logo bündig mit den Symbolen von Anschrift, E-Mail und Menü steht */
.social--icons { gap: 0; margin-left: -11px; }
.social__iconlink { display: inline-grid; place-items: center; width: 44px; height: 44px; color: inherit; border-radius: 50%; }
.social__iconlink:hover { color: var(--color-accent-text, var(--color-accent)); }
.social__iconlink .social__icon { width: 22px; height: 22px; }
.site-footer .social__btn { color: #fff; border-color: rgba(255,255,255,.45); min-height: 44px; }
.site-footer .social__btn:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.icon-link--contact { color: var(--color-primary-text); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: var(--space-5) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: #9fa5a1; font-size: .85rem; }
.site-footer__bottom p { margin: 0; }
.site-footer .lang-switch a { color: #9fa5a1; }
.site-footer .lang-switch a.is-active { color: #fff; background: rgba(255,255,255,.1); }
/* Vorschau-Hinweise (nur im Editor sichtbar) */
.fexelion-preview-note { margin: 1rem auto; max-width: 40rem; padding: .8rem 1rem; border: 1px dashed #b26b00; background: #fff8eb; color: #6b4300; font: 500 .9rem/1.4 system-ui, sans-serif; border-radius: 6px; text-align: center; }
/* Vorschau (3.7.7): ausgeblendeter Block blass mit Hinweis – öffentlich wird er gar nicht ausgegeben */
[data-fexelion-hidden] { position: relative; outline: 2px dashed #b26b00; outline-offset: -2px; }
[data-fexelion-hidden] > :not(.fexelion-hidden-note) { opacity: .4; filter: grayscale(.7); }
[data-fexelion-hidden] > .fexelion-hidden-note { position: absolute; top: 8px; right: 8px; z-index: 50; opacity: 1; padding: .25rem .6rem; border-radius: 999px; background: #6b4300; color: #fff; font: 600 .78rem/1.3 system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .nav-toggle, .zform, .skip-link { display: none !important; } body { background: #fff; } }
/* Cookie-Einstellungen im Footer (öffnet den Einwilligungsbanner) */
/* Footer mit Symbolen (3.0.5, Design → Header & Footer): Kontakt und Menü mit Symbol vor dem Eintrag, linksbündig */
.site-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.site-footer__list li { display: flex; gap: .9rem; align-items: flex-start; }
.site-footer__list address { font-style: normal; }
.site-footer__icon { flex: none; color: var(--footer-icon, var(--color-accent)); }
.site-footer__list .site-footer__icon { margin-top: .1rem; }
.site-footer--icons .site-footer__nav { text-align: start; }
.site-footer--icons .footer-nav { gap: var(--space-4); }
.site-footer--icons .footer-nav a { display: inline-flex; align-items: center; gap: .9rem; }
.site-footer__consent { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.site-footer__consent:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Schwebende Schaltflächen unten rechts: Reihe Sprache · Barrierefreiheit, „Nach oben“ darüber (seit 2.3.1) */
.tools { position: fixed; z-index: 60; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; align-items: flex-end; pointer-events: none; }
/* Feste Plätze: Barrierefreiheit ganz rechts, links daneben Sprache. „Nach oben“ steht über dem Knopf ganz rechts
   (tools--stacked, Platz bleibt reserviert, auch solange er unsichtbar ist); ohne Sprache und Barrierefreiheit unten rechts. */
.tools__item { position: relative; pointer-events: auto; flex: 0 0 44px; width: 44px; height: 44px; }
.tools__item--lang { order: 1; }
.tools__item--a11y { order: 2; }
.tools__item--top { order: 3; }
.tools--stacked .tools__item--top { position: absolute; right: 0; bottom: calc(100% + 8px); }
.tools__panel { z-index: 2; }
/* geöffnetes Menü liegt über „Nach oben“ */
.tools__btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  border: 1px solid var(--line-strong); background: var(--color-surface); color: var(--color-text); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.tools__btn:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.tools__btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.tools__btn[aria-expanded="true"] { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.tools__badge { position: absolute; right: -4px; top: -4px; font: 700 .62rem/1 var(--font-body); background: var(--color-primary); color: var(--color-primary-contrast);
  border-radius: 99px; padding: 3px 4px; letter-spacing: .02em; }
.tools__top { visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.tools__top.is-visible { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.tools__panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; min-width: 15rem; max-width: calc(100vw - 24px);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0,0,0,.2); padding: .9rem 1rem; font-size: 1rem; }
.tools__title { font-weight: 700; margin: 0 0 .6rem; font-size: .95rem; }
.tools__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.tools__seg { display: inline-flex; align-items: center; gap: .3rem; }
.tools__seg button, .tools__reset { min-width: 44px; min-height: 40px; border: 1px solid var(--line-strong); background: var(--color-bg); color: var(--color-text);
  border-radius: var(--radius); font: 600 .95rem var(--font-body); cursor: pointer; }
.tools__seg button:disabled { opacity: .4; cursor: default; }
.tools__seg output { min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
.tools__switch { cursor: pointer; }
.tools__switch input { width: 2.6rem; height: 1.4rem; accent-color: var(--color-primary); margin: 0; }
.tools__reset { width: 100%; margin-top: .6rem; }
.tools__langs { list-style: none; margin: 0; padding: 0; }
.tools__langs a { display: flex; gap: .6rem; align-items: center; padding: .55rem .4rem; min-height: 44px; border-radius: 6px; text-decoration: none; color: inherit; }
.tools__langs a:hover { background: var(--color-soft); }
.tools__langs a[aria-current="true"] { font-weight: 700; color: var(--color-primary-text); }
.tools__code { font: 700 .75rem var(--font-body); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 5px; }
.tools__hint { color: var(--color-muted); font-size: .8rem; }
body.nav-open .tools { display: none; }
/* Platz für die Schaltflächen am Seitenende, damit der Footer nicht verdeckt wird */
.site-footer__bottom { padding-bottom: calc(var(--space-5) + 56px); }
body:has(.tools--stacked) .site-footer__bottom { padding-bottom: calc(var(--space-5) + 108px); }
@media (max-width: 640px) {
  /* seit 3.1.7: mit Abstand zu den abgerundeten Ecken großer Smartphones – rechts auf Höhe des Menü-Symbols, unten etwas höher */
  .tools { --tools-b: max(32px, calc(env(safe-area-inset-bottom) + 16px)); gap: 8px; right: max(24px, calc(env(safe-area-inset-right) + 12px)); bottom: var(--tools-b); }
  .tools__panel { position: fixed; left: 24px; right: max(24px, calc(env(safe-area-inset-right) + 12px)); bottom: calc(var(--tools-b) + 56px); width: auto; min-width: 0; max-width: none; }
  /* seit 3.5.1: Safari auf dem iPhone (ab iOS 27) endet die Seite über der Adressleiste – dort genügen 16 px (Web-App: 32 px) */
  .fx-ios-browser .tools { --tools-b: 16px; }
  .site-footer__bottom { padding-bottom: calc(var(--space-5) + 76px); }
  body:has(.tools--stacked) .site-footer__bottom { padding-bottom: calc(var(--space-5) + 128px); }
}
@media print { .tools { display: none !important; } }
/* Barrierefreiheit: Schriftgröße (alle Maße in rem), hoher Kontrast, Graustufen */
:root[data-a11y-size="1"] { font-size: 112.5%; }
:root[data-a11y-size="2"] { font-size: 125%; }
:root[data-a11y-size="3"] { font-size: 150%; }
:root[data-a11y-gray] { filter: grayscale(1); }
:root[data-a11y-contrast="high"] {
  --color-text: #000; --color-muted: #1c1c1c; --color-bg: #fff; --color-surface: #fff; --color-soft: #f0f0f0;
  --color-primary: #00473b; --color-primary-contrast: #fff; --color-primary-text: #00473b; --color-accent: #8a3b00; --color-dark: #000;
  --line: #000; --line-strong: #000;
}
:root[data-a11y-contrast="high"] a:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; }
:root[data-a11y-contrast="high"] .btn, :root[data-a11y-contrast="high"] input, :root[data-a11y-contrast="high"] select, :root[data-a11y-contrast="high"] textarea { border: 2px solid currentColor; }
:root[data-a11y-contrast="high"] :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
/* Hoher Kontrast im Dunkelmodus: Weiß auf Schwarz */
@media (prefers-color-scheme: dark) {
  :root[data-a11y-contrast="high"]:not([data-dark-mode="off"]):not([data-color-scheme="light"]) {
    --color-text: #fff; --color-muted: #e6e6e6; --color-bg: #000; --color-surface: #000; --color-soft: #141414;
    --color-primary: #7fffd4; --color-primary-contrast: #000; --color-primary-text: #7fffd4; --color-accent: #ffd36b; --color-dark: #000; --line: #fff; --line-strong: #fff;
  }
}
:root[data-a11y-contrast="high"][data-color-scheme="dark"] {
  --color-text: #fff; --color-muted: #e6e6e6; --color-bg: #000; --color-surface: #000; --color-soft: #141414;
  --color-primary: #7fffd4; --color-primary-contrast: #000; --color-primary-text: #7fffd4; --color-accent: #ffd36b; --color-dark: #000; --line: #fff; --line-strong: #fff;
}
/* Barrierefreiheit (seit 2.4.0): Animationen stoppen, Links hervorheben, mehr Abstand im Text (WCAG 1.4.12), deutlicher Fokus */
:root[data-a11y-motion] { scroll-behavior: auto !important; }
:root[data-a11y-motion] *, :root[data-a11y-motion] *::before, :root[data-a11y-motion] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
:root[data-a11y-links] a:not(.btn):not(.tools *) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em;
  background-color: color-mix(in srgb, var(--color-primary) 14%, transparent); border-radius: 2px; }
/* Schaltflächen: weiß-schwarzer Doppelrahmen – auf hellen wie dunklen Flächen sichtbar (seit 2.4.1, vorher Textfarbe: bei dunklen Schaltflächen weiß auf Weiß) */
:root[data-a11y-links] .btn, :root[data-a11y-links] button:not(.tools__btn):not(.tools *) { outline: 2px solid #111 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff !important; }
:root[data-a11y-spacing] body :not(.tools):not(.tools *) { letter-spacing: .12em !important; word-spacing: .16em !important; }
:root[data-a11y-spacing] body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, .prose):not(.tools *) { line-height: 1.8 !important; }
:root[data-a11y-spacing] body :is(h1, h2, h3, h4, h5, h6) { line-height: 1.4 !important; letter-spacing: .05em !important; }
/* große Schrift: weniger Sperrung */
:root[data-a11y-spacing] body p:not(.tools *) { margin-bottom: 2em; }
/* Deutlicher Fokus: bei jedem Fokus, auch nach Mausklick und Antippen (seit 2.4.1, vorher nur per Tastatur) */
:root[data-a11y-focus] :focus { outline: 4px solid #ffbf47 !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px #0b0c0c !important; border-radius: 3px; }
:root[data-a11y-focus] :focus:not(:focus-visible):is(main, [tabindex="-1"]:not(a, button, input, select, textarea)) { outline: none !important; box-shadow: none !important; }
/* programmatischer Fokus auf Abschnitte */
.tools__panel { max-height: calc(100vh - 90px); overflow-y: auto; }
/* Downloads */
.zb-download__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.zb-download__item { margin: 0; }
.zb-download__link { display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: 0 .5rem; font-weight: 600; text-decoration: none; }
.zb-download__link .zb-download__label { text-decoration: underline; text-underline-offset: .2em; }
.zb-download__link:hover .zb-download__label { text-decoration-thickness: 2px; }
.zb-download__icon { flex: none; margin-top: .15em; }
.zb-download__meta { font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.zb-download__desc { margin: .25rem 0 0 1.75rem; color: var(--color-muted); font-size: .95em; }
.zb-download--button .zb-download__list { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.zb-download--button .zb-download__item { display: flex; flex-direction: column; max-width: 100%; }
.zb-download--button .zb-download__desc { margin-left: 0; }
.zb-download__btn { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; }
.zb-download__btn .zb-download__icon { margin-top: 0; }
.zb-download__btn .zb-download__meta { color: inherit; opacity: .85; }
@media (max-width: 600px) { .zb-download--button .zb-download__item, .zb-download__btn { width: 100%; justify-content: center; } }
/* Links auf Überlagerung in Designfarbe: in Schriftfarbe (unterstrichen) – das Bild scheint durch, die Primärfarbe reicht dort nicht immer */
.zb-bg-image.zb-ov-design a:not(.btn), .zb-hero--overlay-design a:not(.btn) { color: inherit; }
/* Dachzeile nach der Überschrift (Hero, seit 2.9.0) */
.zb-eyebrow--after { margin-top: .25rem; margin-bottom: 1.25rem; }
/* Dachzeile im Block „Überschrift und Text“ (seit 3.1.14): dicht an der Überschrift, Abstand zum Text wie sonst unter der Überschrift */
.zb .zb-eyebrow--text { margin: 0 0 .6rem; }
.zb .zb-heading:has(+ .zb-eyebrow--text) { margin-bottom: .35rem; }
.zb .zb-eyebrow--text.zb-eyebrow--after { margin: 0 0 1.5rem; }
/* Überschriften richten sich nach der Breite ihres Blocks (Blöcke nebeneinander mit ½, ⅓, ¼ …; Größe = verfügbare
   Breite / (Zeichen des längsten Worts × mittlere Zeichenbreite); --hw setzt FEXELION je Überschrift, sonst 20), damit auch lange Wörter in schmalen Spalten ganz hineinpassen. Notbremse: Sehr lange Wörter brechen
   um, statt abgeschnitten zu werden. Spezifität bewusst niedrig (:where) – eigene Größen von Karten, Terminen usw. bleiben. */
.zb :is(h1, h2, h3, h4, .zb-hero__title) { overflow-wrap: break-word; }

/* Bildfilter (seit 3.3.0): gelten für alle Bilder eines Blocks, auch das Hintergrundbild; frei kombinierbar */
.zb-if img { filter: var(--if-tone,) var(--if-blur,) var(--if-b,) var(--if-c,) var(--if-s,); }
.zb-if-gray { --if-tone: grayscale(1); }
.zb-if-sepia { --if-tone: sepia(.85); }
/* Weichzeichnen in Prozent (seit 3.3.1): 100 % = 16 px */
.zb-if-blur-5 { --if-blur: blur(0.8px); }
.zb-if-blur-10 { --if-blur: blur(1.6px); }
.zb-if-blur-15 { --if-blur: blur(2.4px); }
.zb-if-blur-20 { --if-blur: blur(3.2px); }
.zb-if-blur-25 { --if-blur: blur(4px); }
.zb-if-blur-30 { --if-blur: blur(4.8px); }
.zb-if-blur-35 { --if-blur: blur(5.6px); }
.zb-if-blur-40 { --if-blur: blur(6.4px); }
.zb-if-blur-45 { --if-blur: blur(7.2px); }
.zb-if-blur-50 { --if-blur: blur(8px); }
.zb-if-blur-55 { --if-blur: blur(8.8px); }
.zb-if-blur-60 { --if-blur: blur(9.6px); }
.zb-if-blur-65 { --if-blur: blur(10.4px); }
.zb-if-blur-70 { --if-blur: blur(11.2px); }
.zb-if-blur-75 { --if-blur: blur(12px); }
.zb-if-blur-80 { --if-blur: blur(12.8px); }
.zb-if-blur-85 { --if-blur: blur(13.6px); }
.zb-if-blur-90 { --if-blur: blur(14.4px); }
.zb-if-blur-95 { --if-blur: blur(15.2px); }
.zb-if-blur-100 { --if-blur: blur(16px); }
.zb-if-b-less2 { --if-b: brightness(.6); } .zb-if-b-less { --if-b: brightness(.8); } .zb-if-b-more { --if-b: brightness(1.15); } .zb-if-b-more2 { --if-b: brightness(1.35); }
.zb-if-c-less2 { --if-c: contrast(.6); } .zb-if-c-less { --if-c: contrast(.8); } .zb-if-c-more { --if-c: contrast(1.2); } .zb-if-c-more2 { --if-c: contrast(1.45); }
.zb-if-s-less2 { --if-s: saturate(.3); } .zb-if-s-less { --if-s: saturate(.65); } .zb-if-s-more { --if-s: saturate(1.35); } .zb-if-s-more2 { --if-s: saturate(1.8); }
/* Weichgezeichnete Bilder leicht vergrößern, damit die Ränder nicht ausfransen */
.zb-if[class*="zb-if-blur-"] img { transform: scale(1.04); }
.zb-if[class*="zb-if-blur-"] picture, .zb-if[class*="zb-if-blur-"] figure { overflow: hidden; }

/* Text-Hinterlegung je Zeile (seit 3.3.0, Block „Überschrift und Text“): halbtransparentes Band hinter Dachzeile,
   Überschrift und Text – auch auf unruhigen Hintergrundbildern gut lesbar */
.zb-band .zb-band__l { -webkit-text-fill-color: currentColor; padding: .06em .32em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.zb-band--dark .zb-band__l { background: rgb(0 0 0 / var(--band-o, .6)); color: #fff; }
.zb-band--light .zb-band__l { background: rgb(255 255 255 / var(--band-o, .6)); color: #111; }
.zb-band--design .zb-band__l { background: color-mix(in srgb, var(--color-bg, #fff) calc(var(--band-o, .6) * 100%), transparent); color: var(--color-text, inherit); }
.zb-band--dark .zb-band__l a, .zb-band--light .zb-band__l a { color: inherit; }
.zb-band--lines .prose { line-height: 1.8; }
/* Variante Kasten: eine Fläche mit runden Ecken um Dachzeile, Überschrift und Text */
.zb-band--box .zb-band__box { display: inline-block; max-width: 100%; padding: clamp(18px, 3vw, 32px) clamp(18px, 3.5vw, 40px); border-radius: 18px; text-align: inherit; }
.zb-band--box .zb-band__box > :first-child { margin-top: 0; }
.zb-band--box .zb-band__box > :last-child, .zb-band--box .zb-band__box .prose > :last-child { margin-bottom: 0; }
.zb-band--box.zb-band--dark .zb-band__box { background: rgb(0 0 0 / var(--band-o, .6)); color: #fff; }
.zb-band--box.zb-band--light .zb-band__box { background: rgb(255 255 255 / var(--band-o, .6)); color: #111; }
.zb-band--box.zb-band--design .zb-band__box { background: color-mix(in srgb, var(--color-bg, #fff) calc(var(--band-o, .6) * 100%), transparent); color: var(--color-text, inherit); }
.zb-band--box.zb-band--dark .zb-band__box :is(h1, h2, h3, h4, .prose, a), .zb-band--box.zb-band--light .zb-band__box :is(h1, h2, h3, h4, .prose, a) { color: inherit; -webkit-text-fill-color: currentColor; }
.zb-band .zb-heading { line-height: 1.3; }
.zb-band-o40 { --band-o: .4; } .zb-band-o60 { --band-o: .6; } .zb-band-o80 { --band-o: .8; }
/* Helle Hinterlegung: Leuchten/Schatten der Themes aus, Dachzeile in abgedunkelter Akzentfarbe (Kontrast) */
.zb-band--light :is(.zb-heading, .zb-eyebrow, .prose, .zb-band__l) { text-shadow: none; }
.zb-band--light.zb-band--box .zb-eyebrow { color: color-mix(in srgb, var(--color-accent, #555) 55%, #000); -webkit-text-fill-color: currentColor; }

/* Eigene Button-Farben (seit 3.7.5, Hero): Füllung mit automatisch lesbarer Schrift bzw. Rahmen und Schrift ohne Füllung.
   !important, weil ausdrücklich gewählt – schlägt die Regeln für Hero-Hintergründe, farbige Flächen und Themes */
a.btn.btn--custom { background: var(--btn-bg) !important; color: var(--btn-fg) !important; border-color: var(--btn-bg) !important; }
a.btn.btn--custom:hover { background: color-mix(in srgb, var(--btn-bg) 86%, var(--btn-fg)) !important; }
a.btn.btn--custom-line { background: transparent !important; color: var(--btn-line) !important; border-color: var(--btn-line) !important; }
a.btn.btn--custom-line:hover { background: color-mix(in srgb, var(--btn-line) 12%, transparent) !important; }
/* Slider (seit 3.7.8): Hero-Slider und Bild-Slider. Ohne JavaScript nur die erste Folie, Steuerung erst nach dem Start von slider.js */
.fx-slider { position: relative; }
.fx-slider__track { position: relative; overflow: hidden; }
.fx-slider--fade .fx-slider__track { display: grid; }
.fx-slider--fade .fx-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.fx-slider--fade .fx-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.fx-slider--slide .fx-slider__track { display: flex; }
.fx-slider--slide .fx-slide { flex: 0 0 100%; min-width: 0; transform: translateX(calc(var(--fx-i, 0) * -100%)); transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
:root[dir="rtl"] .fx-slider--slide .fx-slide { transform: translateX(calc(var(--fx-i, 0) * 100%)); }
.fx-slider:not(.is-ready) .fx-slide:not(:first-child) { visibility: hidden; }
.fx-slider:not(.is-ready) .fx-slider__controls { display: none; }
.fx-slider__arrow { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / .55); background: rgb(12 14 16 / .5); color: #fff; cursor: pointer; transition: background .2s; }
.fx-slider__arrow:hover { background: rgb(12 14 16 / .75); }
.fx-slider__arrow--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.fx-slider__arrow--next { right: clamp(.5rem, 2vw, 1.5rem); }
.fx-slider__arrow:focus-visible, .fx-slider__dot:focus-visible, .fx-slider__pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #111; }
.fx-slider__bar { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.fx-slider__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.fx-slider__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: inherit; }
.fx-slider__dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; transition: background .2s, width .2s; }
.fx-slider__dot[aria-current="true"]::before { background: currentColor; width: 22px; border-radius: 6px; }
.fx-slider__pause { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid currentColor; background: none; color: inherit; cursor: pointer; }
.fx-slider__i-play, .fx-slider.is-paused .fx-slider__i-pause { display: none; }
.fx-slider.is-paused .fx-slider__i-play { display: contents; }
/* Hero-Slider: Abstand oben/unten gehört zu jeder Folie, damit das Bild die ganze Blockfläche füllt */
.zb-hslider { padding-block: 0 !important; --hs-pt: var(--block-space-md, var(--space-8)); --hs-pb: var(--block-space-md, var(--space-8)); }
.zb-hslider.zb-pt-none { --hs-pt: 0px; } .zb-hslider.zb-pb-none { --hs-pb: 0px; }
.zb-hslider.zb-pt-sm { --hs-pt: var(--block-space-sm, var(--space-5)); } .zb-hslider.zb-pb-sm { --hs-pb: var(--block-space-sm, var(--space-5)); }
.zb-hslider.zb-pt-lg { --hs-pt: var(--block-space-lg, var(--space-9)); } .zb-hslider.zb-pb-lg { --hs-pb: var(--block-space-lg, var(--space-9)); }
.zb-hslider.zb-pt-xl { --hs-pt: var(--block-space-xl, calc(var(--space-9) * 1.5)); } .zb-hslider.zb-pb-xl { --hs-pb: var(--block-space-xl, calc(var(--space-9) * 1.5)); }
@media (max-width: 720px) { /* seit 3.7.17: schmale Abstände am Smartphone wie bei den übrigen Blöcken */
  .zb-hslider { --hs-pt: var(--bs-md); --hs-pb: var(--bs-md); }
  .zb-hslider.zb-pt-sm { --hs-pt: var(--bs-sm); } .zb-hslider.zb-pb-sm { --hs-pb: var(--bs-sm); }
  .zb-hslider.zb-pt-lg { --hs-pt: var(--bs-lg); } .zb-hslider.zb-pb-lg { --hs-pb: var(--bs-lg); }
  .zb-hslider.zb-pt-xl { --hs-pt: var(--bs-xl); } .zb-hslider.zb-pb-xl { --hs-pb: var(--bs-xl); }
}
.zb-hslider > .fx-slider { flex: 1; display: flex; flex-direction: column; }
.zb-hslider .fx-slider__track { flex: 1; }
.zb-hslider .fx-slide { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--hs-pt); padding-bottom: calc(var(--hs-pb) + 3rem); }
.zb-hslider:not(:has(.fx-slider__bar > *)) .fx-slide, .zb-hslider .fx-slider:not([data-fx-slider]) .fx-slide { padding-bottom: var(--hs-pb); }
.zb-hslider .zb-hero__bg::after { content: ""; position: absolute; inset: 0; }
.zb-hslider .fx-slider__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(.75rem, calc(var(--hs-pb) / 3)); color: #fff; }
.zb-hslider .fx-slider__pause { background: rgb(12 14 16 / .45); }
.zb-hslider .fx-slider__dots { background: rgb(12 14 16 / .45); border-radius: 999px; padding: 0 .35rem; }
@media (min-width: 721px) { .zb-hslider .fx-slider--arrows .zb-hero__grid { padding-inline: 3.75rem; } }
@media (max-width: 720px) { .fx-slider__arrow { display: none; } }
/* Bild-Slider: festes Bildformat, Steuerung unter dem Bild */
.fx-slider--images .fx-slider__track { border-radius: calc(var(--radius) * 1.4); }
.fx-slider--images .fx-slide { margin: 0; aspect-ratio: var(--fx-ratio, 16 / 9); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.fx-slider--images .fx-slide picture { display: contents; }
.fx-slider--images .fx-slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.fx-slider--images .fx-slider__bar { margin-top: var(--space-3); }
.fx-slider--images:not(:has(.fx-slider__bar > *)) .fx-slider__bar { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-slide { transition: none !important; } }
:root[data-a11y-motion] .fx-slide { transition: none !important; }
@media (forced-colors: active) { .fx-slider__arrow, .fx-slider__pause, .fx-slider__dots { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; forced-color-adjust: none; } }

/* Preise (seit 3.7.8): Karten je Tarif; Farbe je Karte über --plan-c (sonst Akzentfarbe), Kontrastfarbe --plan-on automatisch */
.zb-pricing__switch { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 var(--space-6); border: 1px solid var(--line); border-radius: 999px; }
.zb-pricing__switch[hidden] { display: none; }
.zb-al-center .zb-pricing__switch { margin-inline: auto; }
.zb-al-right .zb-pricing__switch { margin-inline-start: auto; }
.zb-pricing__switch button { min-height: 44px; padding: .5rem 1.15rem; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.zb-pricing__switch button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-contrast); }
.zb-pricing__switch button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.zb-pricing__save { font-size: .8em; font-weight: 700; }
.zb-pricing[data-period="monthly"] .zb-plan__price--yearly, .zb-pricing[data-period="yearly"] .zb-plan__price--monthly { display: none; }
.zb-pricing__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: stretch; }
.zb-pricing__grid:has(.zb-plan__badge) { padding-top: .9rem; }
@media (min-width: 960px) { .zb-pricing__grid--3 { grid-template-columns: repeat(3, 1fr); } .zb-pricing__grid--4 { grid-template-columns: repeat(4, 1fr); } .zb-pricing__grid--2 { grid-template-columns: repeat(2, minmax(0, 26rem)); justify-content: center; } }
.zb-plan { position: relative; display: flex; flex-direction: column; text-align: start; padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); background: color-mix(in srgb, currentColor 3%, transparent); }
.zb-plan--color { border: 2px solid var(--plan-c); }
.zb-plan--highlight { border: 2px solid var(--plan-c, var(--color-primary)); box-shadow: var(--shadow); }
.zb-plan__badge { position: absolute; top: 0; left: 50%; translate: -50% -50%; white-space: nowrap; padding: .3rem .95rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  background: var(--plan-c, var(--color-primary)); color: var(--plan-on, var(--color-primary-contrast)); }
.zb-plan__name { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--space-3); }
.zb-plan__price { margin: 0; line-height: 1.1; }
.zb-plan__amount { font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.zb-plan__period { color: var(--color-muted); font-size: 1rem; }
.zb-plan__desc { margin: var(--space-3) 0 0; color: var(--color-muted); }
.zb-plan__note { margin: var(--space-4) 0 0; padding: .65rem .9rem; border-radius: var(--radius); text-align: center; font-weight: 600;
  background: color-mix(in srgb, var(--plan-c, var(--color-accent)) 14%, transparent); }
.zb-plan__features { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: .6rem; }
.zb-plan__features li { display: flex; gap: .6rem; align-items: flex-start; }
.zb-plan__mark { flex: none; margin-top: .2em; }
.zb-plan__features .is-in .zb-plan__mark { color: var(--plan-c, var(--color-primary-text, var(--color-primary))); }
.zb-plan__features .is-out { color: var(--color-muted); }
.zb-plan__action { margin-top: auto; padding-top: var(--space-5); }
.zb-plan__btn { width: 100%; justify-content: center; }
.zb-plan--color.zb-plan--highlight a.btn.zb-plan__btn { background: var(--plan-c) !important; color: var(--plan-on) !important; border-color: var(--plan-c) !important; }
.zb-al-center .zb-plan { text-align: center; }
/* Smartphone-Ausschnitt (seit 3.7.10): Der Hochformat-Ausschnitt ist schon zugeschnitten – Fokuspunkt des Desktop-Bildes gilt dort nicht */
@media (max-width: 720px) { img.fx-mcrop { object-position: 50% 50% !important; } }
@media (max-width: 720px) { .fx-slider--images .fx-slide { aspect-ratio: var(--fx-ratio-m, var(--fx-ratio, 16 / 9)); } }
/* Passwortabfrage geschützter Seiten (seit 3.7.11) */
.fx-locked { padding-block: var(--space-6) var(--space-9); }
.fx-locked__intro { display: flex; gap: .6rem; align-items: flex-start; }
.fx-locked__intro svg { flex: none; margin-top: .2em; }
.fx-locked__error { padding: .75rem 1rem; border-radius: var(--radius); border: 2px solid currentColor; font-weight: 600; }
.fx-locked__form { margin-top: var(--space-5); max-width: 32rem; }
.fx-locked__form label { display: block; font-weight: 600; margin-bottom: .4rem; }
.fx-locked__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.fx-locked__row input { flex: 1 1 14rem; min-height: 44px; padding: .55rem .8rem; font: inherit; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: var(--radius); }
.fx-locked__row input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Unterüberschrift (seit 3.7.13): Schriftgröße je Block unter Gestaltung */
/* seit 3.7.16: S, M, L (Standard des Themes), XL – als Faktor auf die Größe des Themes */
.zb.zb-ey-s .zb-eyebrow { zoom: .85; }
.zb.zb-ey-m .zb-eyebrow { zoom: .925; }
.zb.zb-ey-xl .zb-eyebrow { zoom: 1.2; }
/* seit 3.7.17: Farbe der Unterüberschrift – Akzent- und Primärfarbe mit der Textfarbe gemischt (wie der Standard), so bleibt
   die Schrift auf hellem und dunklem Hintergrund lesbar; -webkit-text-fill-color für Themes mit Verlaufsschrift */
.zb.zb-eyc-accent .zb-eyebrow { color: color-mix(in srgb, var(--color-accent) 55%, currentColor); -webkit-text-fill-color: currentColor; }
.zb.zb-eyc-primary .zb-eyebrow { color: color-mix(in srgb, var(--color-primary) 70%, currentColor); -webkit-text-fill-color: currentColor; }
.zb.zb-eyc-text .zb-eyebrow { color: inherit; -webkit-text-fill-color: currentColor; }
.zb.zb-eyc-muted .zb-eyebrow { color: var(--color-muted); -webkit-text-fill-color: currentColor; }
.zb.zb-eyc-custom .zb-eyebrow { color: var(--zb-eyc, inherit); -webkit-text-fill-color: currentColor; }
/* Primärfarbe auf dunklen Flächen (Dunkel, Bild mit dunkler Überlagerung) stärker aufgehellt */
.zb:is(.zb-bg-dark, :is(.zb-bg-accent, .zb-bg-primary), .zb-bg-image:not(.zb-ov-light), .zb-hero--background:not(.zb-hero--overlay-light)).zb-eyc-primary .zb-eyebrow { color: color-mix(in srgb, var(--color-primary) 30%, currentColor); }
.zb.zb.zb:is(.zb-bg-accent, .zb-bg-primary):is(.zb-eyc-accent, .zb-eyc-primary) .zb-eyebrow { color: inherit; } /* auf der Fläche in Haupt-/Akzentfarbe wäre die Farbe kaum lesbar – Textfarbe der Fläche */
.zb-header--common .zb-eyebrow:last-child { margin-bottom: 0; }
/* Ausrichtung (seit 3.7.13): „Mittig“ und „Rechts“ gelten für den ganzen Block – Kopf, Text, Listen, Karten, Formulare.
   „Links“ ist die Grunddarstellung des Blocks (z. B. bleiben Logos und Teamkarten wie im Theme). */
/* 3.7.14: Listen als Block mittig bzw. rechts, Zeilen linksbündig (Aufzählungszeichen und Symbole sauber untereinander) */
.zb-al-center .prose :is(ul, ol) { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.zb-al-right .prose :is(ul, ol) { width: fit-content; max-width: 100%; margin-left: auto; margin-right: 0; text-align: left; }
.zb-al-right .zb-intro, .zb-al-right .zb-hero__text { margin-left: auto; }
.zb-al-right :is(.zb-actions, .zb-buttons--row) { justify-content: flex-end; }
.zb-al-center :is(.zb-gallery, .zb-grid) { justify-content: center; }
.zb-al-center .zb-gallery:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 18rem)); }
.zb-al-right .zb-gallery:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 18rem)); justify-content: end; }
.zb-al-center :is(.card__body, .card__icon, .zb-service, .person, .zb-stat) { text-align: center; }
.zb-al-right :is(.card__body, .card__icon, .zb-service, .person, .zb-stat) { text-align: right; }
.zb-al-center .card__icon .icon, .zb-al-center .zb-stat__icon .icon { margin-inline: auto; }
.zb-al-right .card__icon .icon, .zb-al-right .zb-stat__icon .icon { margin-left: auto; }
.zb-al-right .zb-stat { align-items: flex-end; }
.zb-al-center .zb-stat { align-items: center; }
.zb-al-right .person__photo { margin-left: auto; margin-right: 0; }
.zb-al-center .person__photo { margin-inline: auto; }
.zb-al-right .testimonial { align-items: flex-end; }
.zb-al-right .testimonial figcaption { justify-content: flex-end; text-align: right; }
.zb-al-center .faq summary { text-align: center; } .zb-al-center .faq summary > :first-child { flex: 1; }
.zb-al-right .faq summary { text-align: right; } .zb-al-right .faq summary > :first-child { flex: 1; }
.zb-al-center .faq .prose { text-align: center; } .zb-al-right .faq .prose { text-align: right; }
.zb-al-center :is(.zb-contact__list, .zb-download__list) { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.zb-al-right :is(.zb-contact__list, .zb-download__list) { width: fit-content; max-width: 100%; margin-left: auto; text-align: left; }
.zb-al-center .zb-download__desc, .zb-al-right .zb-download__desc { margin-left: 0; }
.zb-al-right .zb-logos { justify-content: flex-end; }
.zb-al-center .zform__field label, .zb-al-center .zform__step-title { text-align: center; }
.zb-al-right .zform__field label, .zb-al-right .zform__step-title { text-align: right; }
.zb-al-center .zform__check { justify-content: center; } .zb-al-right .zform__check { flex-direction: row-reverse; text-align: right; }
.zb-al-center .zform__multi { justify-items: center; } .zb-al-right .zform__multi { justify-items: end; }
.zb-al-right .zb-plan { text-align: right; }
.zb-al-center .zb-plan__features { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.zb-al-right .zb-plan__features { width: fit-content; max-width: 100%; margin-left: auto; text-align: left; }
.zb-al-right .zb-pricing__switch { margin-left: auto; }
/* Unterüberschrift auf Flächen in der Hauptfarbe (seit 3.7.13): Akzentfarbe nur, wenn sie dort lesbar ist */
.zb-bg-primary .zb-eyebrow { color: var(--accent-on-primary, var(--accent-text)); }
.zb-bg-accent .zb-eyebrow { color: inherit; } /* Akzentfarbe auf der Akzentfläche wäre unsichtbar */

/* Ausrichtung Kopfbereich (seit 3.7.14): Unterüberschrift, Überschrift (mit Symbol), Einleitung – unabhängig vom Inhalt.
   Höhere Spezifität als die Inhalts-Ausrichtung (.zb-al-*) und die Theme-Regeln für .zb-intro. */
.zb.zb-alh-left :is(.zb-header, .zb-eyebrow, .zb-heading, .zb-intro, .zb-hero__title, .zb-hero__text) { text-align: left; }
.zb.zb-alh-center :is(.zb-header, .zb-eyebrow, .zb-heading, .zb-intro, .zb-hero__title, .zb-hero__text) { text-align: center; }
.zb.zb-alh-right :is(.zb-header, .zb-eyebrow, .zb-heading, .zb-intro, .zb-hero__title, .zb-hero__text) { text-align: right; }
.zb.zb-alh-left :is(.zb-header, .zb-intro, .zb-hero__text) { margin-left: 0; margin-right: auto; }
.zb.zb-alh-center :is(.zb-header, .zb-intro, .zb-hero__text) { margin-left: auto; margin-right: auto; }
.zb.zb-alh-right :is(.zb-header, .zb-intro, .zb-hero__text) { margin-left: auto; margin-right: 0; }
.zb.zb-alh-left .zb-header { justify-content: flex-start; } .zb.zb-alh-center .zb-header { justify-content: center; } .zb.zb-alh-right .zb-header { justify-content: flex-end; }
.zb.zb-alh-left .zb-heading--icon { justify-content: flex-start; } .zb.zb-alh-center .zb-heading--icon { justify-content: center; } .zb.zb-alh-right .zb-heading--icon { justify-content: flex-end; }
/* Textbreite (seit 3.7.15): Fließtext, Einleitung und Hero-Text nutzen die ganze Inhaltsbreite des Blocks –
   kürzere Zeilen gibt es mit „Schmal (Lesebreite)“ oder den Spaltenbreiten (1/4 … 3/4). */
.zb.zb :is(.prose, .zb-intro, .zb-hero__text) { max-width: none; }

/* Seit 3.7.16: Textgröße je Textfeld (Gestaltung → „Textgröße …“) – S, M, L (Standard des Themes), XL.
   zoom skaliert relativ zur Größe, die das Theme dem Feld gibt (Einleitung, Fließtext, Kartentext …) */
.zb .zb-ts-s { zoom: .85; }
.zb .zb-ts-m { zoom: .925; }
.zb .zb-ts-xl { zoom: 1.2; }