/*
 * konzeptico Theme 1.0.0 – Gestaltung der Bausteine (BAUPLAN §3), Kopf, Fuß, Dunkelmodus, Druck.
 * Werte aus docs/01-aufbau/DESIGN-KONZEPTICO.md (KSS konzeptico.css, Portal kunden.css). Umbrüche 1180 / 860 / 620.
 * Regeln: Grün nie als Text auf Hell; Grünflächen mit dunkler Schrift; Fokus #4A6D24 (hell) bzw. #A5D663/#B7DF82 (dunkel).
 */

/* ==========================================================================
   1. Tokens (Hell)
   ========================================================================== */

:root {
  --kz-charcoal: #292a30;
  --kz-charcoal-2: #36373e;
  --kz-charcoal-deep: #1b1c20;
  --kz-lime: #93c355;
  --kz-lime-bright: #a5d663;
  --kz-on-lime: #1e2517;
  --kz-lime-line: #5f8a2e;
  --kz-warning: #d88b28;

  --kz-card: #ffffff;
  --kz-card-hover-line: #b8c9a2;
  --kz-header-bg: #ffffff;
  --kz-hero-a: #ffffff;
  --kz-hero-b: #f4f7ef;
  --kz-focus: var(--wp--preset--color--accent-text);

  /* Knöpfe: Primär (fill) und Sekundär (outline) */
  --kz-btn-bg: var(--kz-charcoal);
  --kz-btn-fg: #ffffff;
  --kz-btn-line: var(--kz-charcoal);
  --kz-btn-hover: #18191d;
  --kz-btn-shadow: 0 8px 20px rgba(41, 42, 48, 0.15);
  --kz-btn2-bg: transparent;
  --kz-btn2-fg: var(--wp--preset--color--ink);
  --kz-btn2-line: var(--wp--preset--color--control-line);
  --kz-btn2-hover: var(--wp--preset--color--surface-soft);

  --kz-radius: 16px;
  --kz-radius-s: 12px;
  --kz-shadow-card: 0 6px 20px rgba(32, 33, 40, 0.035);
  --kz-shadow-hover: 0 8px 24px rgba(32, 33, 40, 0.06);
  --kz-shadow-raised: 0 14px 45px rgba(32, 33, 40, 0.08);
  --kz-gutter: clamp(16px, 4vw, 48px);
  --kz-wide: var(--wp--style--global--wide-size, 75rem);
  --kz-text: 46rem;
  --kz-header-h: 72px;
  --kz-ease: 0.16s ease;
}

/* ==========================================================================
   2. Dunkelmodus (Umschalter oben, html[data-theme="dark"], Standard hell) – App-Werte KSS 1.2;
      Kopf hell→dunkel, Fuß bleibt Charcoal
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;
  --wp--preset--color--surface: #1b1c20;
  --wp--preset--color--surface-soft: #23252a;
  --wp--preset--color--canvas: #222429;
  --wp--preset--color--band: #1f2125;
  --wp--preset--color--ink: #f1f2ef;
  --wp--preset--color--muted: #afb2b7;
  --wp--preset--color--line: #46494f;
  --wp--preset--color--control-line: #8d9097;
  --wp--preset--color--lime-soft: #324426;
  --wp--preset--color--accent-text: #b7df82;
  --wp--preset--color--link: #b7df82;
  --wp--preset--color--warning-soft: #4d3a20;
  --wp--preset--color--warning-text: #f5c27a;
  --wp--preset--color--danger: #ff9aa0;
  --kz-warning: #f2b544;
  --kz-lime-line: #a5d663;

  --kz-card: #292b30;
  --kz-card-hover-line: #6f9a3e;
  --kz-header-bg: #23252a;
  --kz-hero-a: #303238;
  --kz-hero-b: #26282d;

  --kz-btn-bg: var(--kz-lime);
  --kz-btn-fg: var(--kz-on-lime);
  --kz-btn-line: var(--kz-lime-bright);
  --kz-btn-hover: var(--kz-lime-bright);
  --kz-btn-shadow: none;
  --kz-btn2-hover: #303238;

  --kz-shadow-card: none;
  --kz-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.28);
  --kz-shadow-raised: 0 14px 45px rgba(0, 0, 0, 0.28);
}

/* Dunkle Flächen (Charcoal) in beiden Modi: lokale Umdeutung der Tokens */
.kz-hero--dark,
.kz-band--dark,
.kz-cta,
.kz-footer {
  --wp--preset--color--ink: #ffffff;
  --wp--preset--color--muted: #c9cbcf;
  --wp--preset--color--line: rgba(255, 255, 255, 0.14);
  --wp--preset--color--accent-text: var(--kz-lime-bright);
  --wp--preset--color--link: #ffffff;
  --wp--preset--color--lime-soft: rgba(255, 255, 255, 0.08);
  --kz-card: var(--kz-charcoal-2);
  --kz-focus: var(--kz-lime-bright);
  --kz-btn-bg: var(--kz-lime);
  --kz-btn-fg: var(--kz-on-lime);
  --kz-btn-line: var(--kz-lime);
  --kz-btn-hover: var(--kz-lime-bright);
  --kz-btn-shadow: none;
  --kz-btn2-bg: rgba(255, 255, 255, 0.06);
  --kz-btn2-fg: #ffffff;
  --kz-btn2-line: rgba(255, 255, 255, 0.45);
  --kz-btn2-hover: rgba(255, 255, 255, 0.12);
  color: #d8d9dc;
}

/* ==========================================================================
   3. Grundlagen
   ========================================================================== */

html {
  scroll-padding-top: calc(var(--kz-header-h) + 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

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

:where(.wp-site-blocks) > * { margin-block-start: 0; }
.kz-main { margin-block: 0; }
.kz-main .wp-block-post-content > .alignfull,
.kz-main > .alignfull { margin-block: 0; }

a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

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

::selection { background: var(--kz-lime); color: var(--kz-on-lime); }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kz-skip {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--kz-radius-s);
  background: var(--kz-charcoal);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
/* Fokusrahmen liegt außerhalb des Knopfs auf dem Kopf (hell Weiß, dunkel #23252A): dort 3:1 nötig */
.kz-skip:focus { top: 12px; outline: 3px solid var(--kz-focus); outline-offset: 2px; }

.kz-kicker {
  margin: 0 0 0.5rem;
  color: var(--wp--preset--color--accent-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.kz-kicker + :is(h1, h2, h3) { margin-block-start: 0.5rem; }

.kz-lead {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.55;
}

.kz-placeholder {
  color: var(--wp--preset--color--muted);
  font-style: italic;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Lange Komposita (z. B. „Gesundheitsschutzkennzeichnung“) dürfen bei 320 px / 400 % Zoom nicht seitlich überstehen */
body { overflow-wrap: break-word; }
@media (max-width: 619.98px) {
  /* nur lange Wörter trennen (≥ 10 Zeichen, je Teil ≥ 4), damit Fließtext ruhig bleibt */
  .kz-main :is(h1, h2, h3, h4, p, li, dt, dd, td, th, summary, figcaption) {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}

/* ==========================================================================
   4. Knöpfe (Block „Buttons“ und eigene .kz-button)
   ========================================================================== */

.wp-block-buttons { gap: 12px; }

/* Mindesthöhen gelten inklusive Innenabstand (Kopf-Knöpfe sonst 64 statt 44 px, Sprungmarken 54 statt 40 px) */
.kz-button,
.kz-toc a,
.kz-menu-toggle,
.kz-nav__toggle,
.kz-nav__link { box-sizing: border-box; }

.wp-block-button .wp-block-button__link,
.kz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--kz-btn-line);
  border-radius: var(--kz-radius-s);
  background: var(--kz-btn-bg);
  color: var(--kz-btn-fg);
  box-shadow: var(--kz-btn-shadow);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--kz-ease), background-color var(--kz-ease), box-shadow var(--kz-ease), border-color var(--kz-ease);
}
.wp-block-button .wp-block-button__link:hover,
.kz-button:hover {
  background: var(--kz-btn-hover);
  color: var(--kz-btn-fg);
  transform: translateY(-1px);
  text-decoration: none;
}
.wp-block-button .wp-block-button__link:focus-visible,
.kz-button:focus-visible {
  outline: 3px solid var(--kz-focus);
  outline-offset: 2px;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.kz-button--secondary {
  border: 1px solid var(--kz-btn2-line);
  background: var(--kz-btn2-bg);
  color: var(--kz-btn2-fg);
  box-shadow: none;
  padding: 0.7rem 1.25rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kz-button--secondary:hover {
  background: var(--kz-btn2-hover);
  border-color: var(--kz-btn2-fg);
  color: var(--kz-btn2-fg);
}

.kz-button--lime {
  border-color: var(--kz-lime-line);
  background: var(--kz-lime);
  color: var(--kz-on-lime);
  box-shadow: none;
}
.kz-button--lime:hover { background: var(--kz-lime-bright); color: var(--kz-on-lime); }

.kz-button .kz-icon,
.kz-kundenbereich-link .kz-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: none;
  color: inherit;
}
.kz-button .kz-icon::before,
.kz-kundenbereich-link .kz-icon::before { width: 18px; height: 18px; }

.kz-kundenbereich-link:not(.kz-button) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   5. Icons (CSS-Maske aus assets/icons/*.svg)
   ========================================================================== */

.kz-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--wp--preset--color--lime-soft);
  color: var(--wp--preset--color--accent-text);
  vertical-align: middle;
}
.kz-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--kz-icon) center / contain no-repeat;
  mask: var(--kz-icon) center / contain no-repeat;
}

.kz-icon--shield { --kz-icon: url("../icons/shield.svg"); }
.kz-icon--flame { --kz-icon: url("../icons/flame.svg"); }
.kz-icon--extinguisher { --kz-icon: url("../icons/extinguisher.svg"); }
.kz-icon--clipboard-check { --kz-icon: url("../icons/clipboard-check.svg"); }
.kz-icon--walk { --kz-icon: url("../icons/walk.svg"); }
.kz-icon--flask { --kz-icon: url("../icons/flask.svg"); }
.kz-icon--file-text { --kz-icon: url("../icons/file-text.svg"); }
.kz-icon--map { --kz-icon: url("../icons/map.svg"); }
.kz-icon--users { --kz-icon: url("../icons/users.svg"); }
.kz-icon--calendar-clock { --kz-icon: url("../icons/calendar-clock.svg"); }
.kz-icon--meeting { --kz-icon: url("../icons/meeting.svg"); }
.kz-icon--first-aid { --kz-icon: url("../icons/first-aid.svg"); }
.kz-icon--stethoscope { --kz-icon: url("../icons/stethoscope.svg"); }
.kz-icon--monitor { --kz-icon: url("../icons/monitor.svg"); }
.kz-icon--lock { --kz-icon: url("../icons/lock.svg"); }
.kz-icon--key { --kz-icon: url("../icons/key.svg"); }
.kz-icon--building { --kz-icon: url("../icons/building.svg"); }
.kz-icon--factory { --kz-icon: url("../icons/factory.svg"); }
.kz-icon--heart-hand { --kz-icon: url("../icons/heart-hand.svg"); }
.kz-icon--child { --kz-icon: url("../icons/child.svg"); }
.kz-icon--truck { --kz-icon: url("../icons/truck.svg"); }
.kz-icon--hammer { --kz-icon: url("../icons/hammer.svg"); }
.kz-icon--briefcase { --kz-icon: url("../icons/briefcase.svg"); }
.kz-icon--book { --kz-icon: url("../icons/book.svg"); }
.kz-icon--mail { --kz-icon: url("../icons/mail.svg"); }
.kz-icon--phone { --kz-icon: url("../icons/phone.svg"); }
.kz-icon--check { --kz-icon: url("../icons/check.svg"); }
.kz-icon--alert { --kz-icon: url("../icons/alert.svg"); }
.kz-icon--arrow-right { --kz-icon: url("../icons/arrow-right.svg"); }
.kz-icon--download { --kz-icon: url("../icons/download.svg"); }
.kz-icon--search { --kz-icon: url("../icons/search.svg"); }
.kz-icon--info { --kz-icon: url("../icons/info.svg"); }

/* Icon direkt vor einer Überschrift (html-Block + heading) */
.wp-block-html + :is(h2, h3) { margin-block-start: 1rem; }

/* Übersicht in der Musterseite */
.kz-icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kz-icon-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

/* ==========================================================================
   6. Kopf (weiß, Original-Logo, sticky) und Navigation
   ========================================================================== */

.kz-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-bar .kz-site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.kz-header {
  background: var(--kz-header-bg);
  border-bottom: 1px solid var(--wp--preset--color--line);
  box-shadow: inset 0 -3px 0 var(--kz-lime);
}

.kz-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--kz-wide);
  min-height: var(--kz-header-h);
  margin: 0 auto;
  padding: 0 var(--kz-gutter) 3px;
}

.kz-logo {
  display: inline-flex;
  flex: none;
  padding: 6px 0;
  border-radius: 6px;
}
.kz-logo picture,
.kz-logo img { display: block; }
.kz-logo img { width: auto; height: 32px; }
/* Kopf-Logo: Original im hellen, helle Ableitung im dunklen Design */
.kz-logo .kz-logo__img--hell { display: none; }
html[data-theme="dark"] .kz-logo .kz-logo__img--original { display: none; }
html[data-theme="dark"] .kz-logo .kz-logo__img--hell { display: block; }

/* Umschalter Hell/Dunkel: nur mit JavaScript sichtbar (ohne Skript bleibt die Seite hell) */
.kz-theme-toggle { display: none; }
html.kz-js .kz-theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--control-line);
  border-radius: 10px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: border-color var(--kz-ease), background-color var(--kz-ease);
}
html.kz-js .kz-theme-toggle:hover { border-color: var(--kz-lime-line); background: var(--wp--preset--color--lime-soft); }
.kz-theme-toggle svg { width: 20px; height: 20px; }
.kz-theme-toggle__sonne { display: none; }
html[data-theme="dark"] .kz-theme-toggle__mond { display: none; }
html[data-theme="dark"] .kz-theme-toggle__sonne { display: block; }

.kz-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.kz-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kz-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.kz-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--wp--preset--color--ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--kz-ease);
}
.kz-nav__link:hover { background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--ink); }
.kz-nav__link[aria-current="page"],
.kz-nav__link.is-section {
  background: var(--wp--preset--color--lime-soft);
  color: var(--wp--preset--color--accent-text);
  font-weight: 700;
}

.kz-nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 44px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wp--preset--color--muted);
  cursor: pointer;
}
.kz-nav__toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--kz-ease);
}
.kz-nav__toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 4px; }
.kz-nav__toggle:hover { background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--ink); }

.kz-sub {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 60;
  min-width: 19rem;
  padding: 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  background: var(--kz-card);
  box-shadow: var(--kz-shadow-raised);
}
.kz-sub ul { margin: 0; padding: 0; list-style: none; }
.kz-sub a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--wp--preset--color--ink);
  font-size: 0.94rem;
  line-height: 1.35;
  text-decoration: none;
}
.kz-sub a:hover { background: var(--wp--preset--color--canvas); text-decoration: underline; }
.kz-sub a[aria-current="page"] {
  background: var(--wp--preset--color--lime-soft);
  color: var(--wp--preset--color--accent-text);
  font-weight: 700;
}
.kz-sub__title {
  margin: 4px 10px 6px;
  color: var(--wp--preset--color--accent-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kz-sub__all {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.kz-sub__all a { font-weight: 700; }

.kz-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kz-nav__actions .kz-button { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.95rem; }

.kz-menu-toggle { display: none; }

/* Desktop */
@media (min-width: 1180px) {
  .kz-theme-toggle { order: 3; }
  .kz-nav__toggle[aria-expanded="true"] + .kz-sub,
  .kz-has-sub:hover > .kz-sub { display: block; }
  html:not(.kz-js) .kz-has-sub:focus-within > .kz-sub { display: block; }

  .kz-sub--mega {
    width: min(54rem, calc(100vw - 2 * var(--kz-gutter)));
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 16px;
  }
  .kz-nav__toggle[aria-expanded="true"] + .kz-sub--mega,
  .kz-has-sub:hover > .kz-sub--mega,
  html:not(.kz-js) .kz-has-sub:focus-within > .kz-sub--mega { display: grid; }

  .kz-sub--cols { width: 36rem; }
  .kz-sub--cols ul { columns: 2; column-gap: 8px; }
  .kz-sub--cols li { break-inside: avoid; }
}

/* Handy und Tablet: Menü-Knopf, aufklappbares Panel */
@media (max-width: 1179.98px) {
  :root { --kz-header-h: 64px; }

  .kz-header__inner { flex-wrap: wrap; }
  .kz-logo img { height: 28px; }
  .kz-theme-toggle { margin-left: auto; }
  .kz-header__inner { column-gap: 10px; }

  html.kz-js .kz-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--wp--preset--color--control-line);
    border-radius: 10px;
    background: transparent;
    color: var(--wp--preset--color--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .kz-menu-toggle__bars,
  .kz-menu-toggle__bars::before,
  .kz-menu-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--kz-ease), opacity var(--kz-ease);
  }
  .kz-menu-toggle__bars { position: relative; }
  .kz-menu-toggle__bars::before,
  .kz-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .kz-menu-toggle__bars::before { top: -6px; }
  .kz-menu-toggle__bars::after { top: 6px; }
  .kz-menu-toggle[aria-expanded="true"] .kz-menu-toggle__bars { background: transparent; }
  .kz-menu-toggle[aria-expanded="true"] .kz-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .kz-menu-toggle[aria-expanded="true"] .kz-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

  .kz-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding: 8px 0 20px;
  }
  html.kz-js .kz-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    width: auto; /* sonst 100 % + Innenabstand → seitliches Scrollen bei offenem Menü */
    max-height: calc(100dvh - var(--kz-header-h) - 8px);
    overflow-y: auto;
    padding: 12px var(--kz-gutter) 24px;
    border-bottom: 3px solid var(--kz-lime);
    background: var(--kz-header-bg);
    box-shadow: var(--kz-shadow-raised);
  }
  html.kz-js .kz-menu-toggle[aria-expanded="true"] + .kz-nav { display: flex; }
  html:not(.kz-js) .kz-site-header { position: static; }

  .kz-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .kz-nav__item {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--wp--preset--color--line);
  }
  .kz-nav__link { min-height: 52px; padding: 0 8px; font-size: 1.05rem; }
  .kz-nav__toggle { width: 52px; height: 52px; margin: 0; }

  .kz-sub {
    position: static;
    grid-column: 1 / -1;
    min-width: 0;
    width: auto;
    margin: 0 0 12px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 2px solid var(--wp--preset--color--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html.kz-js .kz-sub { display: none; }
  html.kz-js .kz-nav__toggle[aria-expanded="true"] + .kz-sub,
  html:not(.kz-js) .kz-sub { display: block; }
  .kz-sub a { padding: 10px; font-size: 1rem; }

  .kz-nav__actions { flex-direction: column; align-items: stretch; }
  .kz-nav__actions .kz-button { min-height: 48px; }
}

/* ==========================================================================
   7. Brotkrumen
   ========================================================================== */

.kz-breadcrumb-bar {
  padding-block: 12px;
  border-bottom: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface-soft);
}
.kz-breadcrumb-bar:not(:has(.kz-breadcrumb)) { display: none; }
.kz-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--wp--preset--color--muted);
  font-size: 0.875rem;
}
.kz-breadcrumb li { display: inline-flex; align-items: center; }
.kz-breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 10px 0 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.kz-breadcrumb a { color: var(--wp--preset--color--link); }
.kz-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--ink); font-weight: 600; }

/* ==========================================================================
   8. Abschnitte: gemeinsames Raster (unabhängig vom Layout-Attribut)
   ========================================================================== */

.wp-block-group:is(.kz-hero, .kz-section, .kz-band, .kz-cta) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--kz-wide)) minmax(0, 1fr);
  padding-inline: var(--kz-gutter);
  padding-block: var(--wp--preset--spacing--80);
}
.wp-block-group:is(.kz-hero, .kz-section, .kz-band, .kz-cta) > * {
  grid-column: 2;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto;
}

/* Lesebreite für Fließtext */
:is(.kz-section, .kz-band, .kz-cta) > :is(p, ul, ol, .wp-block-details, .kz-note, .kz-legal, .kz-faq, .wp-block-heading),
:is(.kz-section, .kz-band, .kz-cta) > .alignwide > :is(p, ul, ol, .wp-block-details, .kz-note, .kz-legal, .kz-faq, .wp-block-heading) {
  max-width: var(--kz-text);
}
:is(.kz-section, .kz-band) .alignwide > .kz-toc,
:is(.kz-section, .kz-band) > .kz-toc { max-width: none; }

.kz-section { background: var(--wp--preset--color--surface); }

.kz-band {
  background: var(--wp--preset--color--canvas);
  border-block: 1px solid var(--wp--preset--color--line);
}

.kz-band--dark {
  position: relative;
  overflow: hidden;
  background: var(--kz-charcoal);
  border-top: 4px solid var(--kz-lime);
  border-bottom: 0;
}

/* ==========================================================================
   9. Seitenkopf (kz-hero, kz-hero--dark)
   ========================================================================== */

.wp-block-group.kz-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
  background: linear-gradient(145deg, var(--kz-hero-a), var(--kz-hero-b));
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.kz-hero > * { position: relative; z-index: 1; }
.kz-hero h1 {
  max-width: 22ch;
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.kz-hero > :is(p, .wp-block-search) { max-width: 44rem; }
.kz-hero > .kz-kicker { max-width: none; }
.kz-hero .wp-block-buttons { margin-block-start: 2rem; }

.wp-block-group.kz-hero--dark {
  padding-block: clamp(56px, 8vw, 112px) clamp(48px, 7vw, 96px);
  background: linear-gradient(135deg, var(--kz-charcoal-2) 0%, var(--kz-charcoal) 45%, var(--kz-charcoal-deep) 100%);
  border-bottom: 0;
}
.kz-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 60%);
  pointer-events: none;
}
.kz-hero--dark::after,
.kz-cta::after,
.kz-band--dark::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -320px;
  width: 520px;
  height: 520px;
  border: 80px solid rgba(147, 195, 85, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.kz-hero--dark .kz-lead { color: #d8d9dc; }
/* Dunkelmodus: Verlauf endet in #1B1C20 = Seitengrund – Kante trennt Kopf und ersten Abschnitt */
html[data-theme="dark"] .wp-block-group.kz-hero--dark { border-bottom: 1px solid var(--wp--preset--color--line); }

/* ==========================================================================
   10. Karten
   ========================================================================== */

.kz-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-block-start: 1.75rem;
}
.kz-cards > * { margin: 0 !important; max-width: none !important; }
.wp-block-columns.kz-cards { flex-wrap: wrap; }
.wp-block-columns.kz-cards > .wp-block-column { flex-basis: auto !important; }

.kz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--kz-radius);
  background: var(--kz-card);
  box-shadow: var(--kz-shadow-card);
  overflow: hidden;
}
.kz-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--kz-lime);
}
.kz-card > * { margin-block: 0; }
.kz-card > * + * { margin-block-start: 0.6rem; }
.kz-card > .wp-block-html + * { margin-block-start: 1rem; }
.kz-card h3 { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }
.kz-card p { color: var(--wp--preset--color--muted); font-size: 0.98rem; }
.kz-card .kz-card__more,
.kz-card > p:last-child:has(> a:only-child) { margin-block-start: auto; padding-top: 1rem; }
.kz-card > p:last-child > a:only-child { font-weight: 700; }
.kz-card__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--link);
  font-weight: 700;
}
.kz-card__more a::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  transition: transform var(--kz-ease);
}

.kz-card--link { transition: border-color var(--kz-ease), box-shadow var(--kz-ease), transform var(--kz-ease); }
/* Ganze Karte klickbar: nur wenn sie genau einen Ziel-Link hat (keine Linkliste in der Karte) */
.kz-card--link:not(:has(ul, ol)) > p:last-child > a:only-child::before,
.kz-card--link .kz-card__more a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--kz-radius);
}
.kz-card--link:hover {
  border-color: var(--kz-card-hover-line);
  box-shadow: var(--kz-shadow-hover);
  transform: translateY(-1px);
}
.kz-card--link:hover .kz-card__more a::after { transform: translateX(3px); }
.kz-card--link:not(:has(ul, ol)) > p:last-child > a:only-child:focus-visible,
.kz-card--link .kz-card__more a:focus-visible { outline: none; }
.kz-card--link:not(:has(ul, ol)):has(> p:last-child > a:only-child:focus-visible),
.kz-card--link:has(.kz-card__more a:focus-visible) {
  outline: 3px solid var(--kz-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   11. Ablaufschritte und Checkliste
   ========================================================================== */

ol.kz-steps {
  counter-reset: kz-step;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.kz-steps > li {
  position: relative;
  counter-increment: kz-step;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.3rem 0 1.4rem 3.25rem;
}
.kz-steps > li::before {
  content: counter(kz-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--kz-lime);
  color: var(--kz-on-lime);
  font-weight: 800;
  font-size: 0.95rem;
}
.kz-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 0.5px);
  top: 2.6rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--wp--preset--color--line);
}

ul.kz-checklist {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.kz-checklist > li {
  position: relative;
  margin: 0 0 0.7rem;
  padding-left: 2.1rem;
}
.kz-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--kz-lime);
}
.kz-checklist > li::after {
  content: "";
  position: absolute;
  left: 0.47rem;
  top: calc(0.18em + 0.3rem);
  width: 0.4rem;
  height: 0.62rem;
  border-right: 2px solid var(--kz-on-lime);
  border-bottom: 2px solid var(--kz-on-lime);
  transform: rotate(45deg);
}

/* ==========================================================================
   12. Kennzahlen
   ========================================================================== */

.kz-facts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(16px, 3vw, 32px);
  margin-block-start: 1.75rem;
}
.kz-facts > * { margin: 0 !important; }
.kz-fact {
  padding-left: 16px;
  border-left: 3px solid var(--kz-lime);
  color: var(--wp--preset--color--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}
.kz-fact strong {
  display: block;
  margin-bottom: 4px;
  color: var(--wp--preset--color--accent-text);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* ==========================================================================
   13. Hinweis, Warnung, Rechtsgrundlagen
   ========================================================================== */

.kz-note {
  position: relative;
  margin-block: 1.5rem;
  padding: 16px 20px 16px 56px;
  border-left: 4px solid var(--kz-lime-line);
  border-radius: 12px;
  background: var(--wp--preset--color--lime-soft);
  color: var(--wp--preset--color--ink);
}
.kz-note::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 22px;
  height: 22px;
  background: var(--wp--preset--color--accent-text);
  -webkit-mask: url("../icons/info.svg") center / contain no-repeat;
  mask: url("../icons/info.svg") center / contain no-repeat;
}
.kz-note > * { margin-block: 0; }
/* Hinweisbox mit eigenem Icon-Block: kein zweites Symbol */
.kz-note:has(.kz-icon) { padding-left: 20px; }
.kz-note:has(.kz-icon)::before { display: none; }
.kz-note .kz-icon { background: var(--kz-card); }
.kz-note--warn .kz-icon { color: var(--wp--preset--color--warning-text); }
.kz-note > * + * { margin-block-start: 0.6rem; }

.kz-note--warn {
  border-left-color: var(--kz-warning);
  background: var(--wp--preset--color--warning-soft);
}
.kz-note--warn::before {
  background: var(--wp--preset--color--warning-text);
  -webkit-mask-image: url("../icons/alert.svg");
  mask-image: url("../icons/alert.svg");
}

.kz-legal {
  margin-block: 1.5rem;
  padding: 22px 24px;
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--kz-charcoal);
  border-radius: 14px;
  background: var(--wp--preset--color--surface-soft);
}
.kz-legal > * { margin-block: 0; }
.kz-legal > * + * { margin-block-start: 0.75rem; }
.kz-legal h2,
.kz-legal h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.kz-legal :is(h2, h3)::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--wp--preset--color--accent-text);
  -webkit-mask: url("../icons/book.svg") center / contain no-repeat;
  mask: url("../icons/book.svg") center / contain no-repeat;
}
.kz-legal ul { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.kz-legal li {
  position: relative;
  margin: 0 0 0.45rem;
  padding-left: 1.2rem;
}
.kz-legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kz-lime);
}
.kz-legal__stand,
.kz-legal p:last-child:not(:first-child) { color: var(--wp--preset--color--muted); font-size: 0.875rem; }

/* ==========================================================================
   14. Handlungsaufforderung
   ========================================================================== */

.wp-block-group.kz-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--kz-charcoal-2) 0%, var(--kz-charcoal) 50%, var(--kz-charcoal-deep) 100%);
  border-top: 4px solid var(--kz-lime);
}
.kz-cta > * { position: relative; z-index: 1; }
.kz-cta h2 { margin-block-start: 0; }
.kz-cta p { color: #d8d9dc; font-size: var(--wp--preset--font-size--lead); }

/* ==========================================================================
   15. Fragen und Antworten (details)
   ========================================================================== */

.kz-faq { margin-block-start: 1.5rem; }
.kz-faq > * { margin-block: 0 !important; }
.kz-faq > * + * { margin-block-start: 10px !important; }

.wp-block-details {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  background: var(--kz-card);
  overflow: hidden;
}
.wp-block-details > summary {
  position: relative;
  display: block;
  box-sizing: border-box; /* sonst 56 px + Innenabstand = 88 px, Text oben, Pfeil tiefer */
  min-height: 56px;
  padding: 16px 56px 16px 20px;
  background: var(--wp--preset--color--surface-soft);
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--kz-ease);
}
.wp-block-details[open] > summary { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wp-block-details > summary:hover { background: var(--wp--preset--color--canvas); }
.wp-block-details > summary:focus-visible { outline-offset: -3px; border-radius: 14px; }
.wp-block-details > :not(summary) { margin: 0; padding: 14px 20px 0; }
.wp-block-details > :last-child:not(summary) { padding-bottom: 18px; }

/* ==========================================================================
   16. Tabellen
   ========================================================================== */

.wp-block-table.kz-table {
  margin-block: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  background: var(--kz-card);
}
.wp-block-table.kz-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.wp-block-table.kz-table thead { border-bottom: 0; }
.wp-block-table.kz-table :is(th, td) {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  text-align: left;
  vertical-align: top;
}
.wp-block-table.kz-table th {
  background: var(--wp--preset--color--canvas);
  color: var(--wp--preset--color--ink);
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--wp--preset--color--line);
}
.wp-block-table.kz-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.kz-table tbody tr:hover td { background: var(--wp--preset--color--surface-soft); }
/* Breite Tabellen (nav.js setzt .kz-table--scroll, tabindex, role=region): Schatten zeigt, dass es seitlich weitergeht */
.wp-block-table.kz-table.kz-table--scroll {
  background:
    linear-gradient(to right, var(--kz-card) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--kz-card) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) right / 14px 100% no-repeat scroll,
    var(--kz-card);
}
.kz-table--scroll table { min-width: 34rem; }
.kz-table--scroll:focus-visible { outline: 3px solid var(--kz-focus); outline-offset: 2px; border-radius: 14px; }
.kz-table-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1.5rem 0 -1rem !important;
  color: var(--wp--preset--color--muted);
  font-size: 0.85rem;
}
.kz-table-hint::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}
.kz-table-hint[hidden] { display: none; }
.wp-block-table.kz-table figcaption {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--muted);
  font-size: 0.85rem;
  text-align: left;
}

/* ==========================================================================
   17. Inhaltsverzeichnis
   ========================================================================== */

ul.kz-toc,
ol.kz-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.kz-toc li { margin: 0; }
.kz-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  background: var(--kz-card);
  color: var(--wp--preset--color--ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.kz-toc a:hover {
  border-color: var(--kz-card-hover-line);
  background: var(--wp--preset--color--lime-soft);
  text-decoration: underline;
}

/* ==========================================================================
   17b. Glossar (kz-glossary-group, dl.kz-glossary)
   ========================================================================== */

.kz-glossary-group {
  margin-block-start: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--line);
}
.kz-glossary-group > :is(h2, h3) { margin: 0 0 0.75rem; }

dl.kz-glossary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.kz-glossary dt {
  margin: 0;
  padding-top: 0.9rem;
  color: var(--wp--preset--color--ink);
  font-weight: 700;
}
.kz-glossary dd {
  margin: 0.2rem 0 0;
  padding: 0 0 0.9rem 1.25rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--muted);
}
.kz-glossary dd:last-of-type { border-bottom: 0; }

@media (min-width: 860px) {
  dl.kz-glossary {
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    column-gap: 24px;
  }
  .kz-glossary dt { padding: 0.9rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
  .kz-glossary dd { margin: 0; padding: 0.9rem 0; }
  .kz-glossary dt:last-of-type { border-bottom: 0; }
}

/* ==========================================================================
   18. Ansprechpartner
   ========================================================================== */

.kz-person {
  position: relative;
  padding: 24px 24px 24px 28px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--kz-radius);
  background: var(--kz-card);
  box-shadow: var(--kz-shadow-card), inset 4px 0 0 var(--kz-lime);
}
.kz-person > * { margin: 0; }
.kz-person > * + * { margin-top: 0.5rem; }
.kz-person > :is(h2, h3, h4) { font-size: 1.15rem; letter-spacing: -0.02em; }
.kz-person > .wp-block-buttons { margin-top: 1rem; }
.kz-person__name {
  margin-top: 0.4rem;
  color: var(--wp--preset--color--ink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.kz-person__role { color: var(--wp--preset--color--muted); }
.kz-person__contact {
  display: grid;
  gap: 8px;
  margin-top: 1rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--wp--preset--color--line);
  list-style: none;
}
.kz-person__contact li { display: flex; align-items: center; gap: 10px; }
.kz-person__contact .kz-icon { width: 34px; height: 34px; border-radius: 9px; }
.kz-person__contact .kz-icon::before { width: 18px; height: 18px; }
.kz-person__contact a { font-weight: 600; overflow-wrap: anywhere; }

/* ==========================================================================
   19. Text und Box (kz-split, Spalten 7/5)
   ========================================================================== */

.wp-block-columns.kz-split {
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
  margin-block-start: 0;
}
.kz-split > .wp-block-column > :first-child { margin-block-start: 0; }

@media (min-width: 1180px) {
  .kz-split > .wp-block-column:last-child {
    position: sticky;
    top: calc(var(--kz-header-h) + 24px);
  }
}

@media (max-width: 859.98px) {
  .wp-block-columns.kz-split { flex-wrap: wrap !important; }
  .wp-block-columns.kz-split > .wp-block-column { flex-basis: 100% !important; }
}

/* ==========================================================================
   20. Suche, Ergebnislisten, Seitennavigation
   ========================================================================== */

.wp-block-search.kz-search { margin-block-start: 1.75rem; }
.wp-block-search .wp-block-search__label {
  display: block;
  margin-bottom: 7px;
  color: var(--wp--preset--color--ink);
  font-size: 0.9rem;
  font-weight: 700;
}
.wp-block-search .wp-block-search__inside-wrapper { gap: 8px; }
.wp-block-search .wp-block-search__input {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--control-line);
  border-radius: 10px;
  background: var(--kz-card);
  color: var(--wp--preset--color--ink);
  font: inherit;
}
.wp-block-search .wp-block-search__input:focus-visible {
  outline: 3px solid var(--kz-focus);
  outline-offset: 1px;
  border-color: var(--kz-focus);
}
.wp-block-search .wp-block-search__button {
  margin: 0;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--kz-btn-line);
  border-radius: 10px;
  background: var(--kz-btn-bg);
  color: var(--kz-btn-fg);
  font-weight: 750;
}
.wp-block-search .wp-block-search__button:hover { background: var(--kz-btn-hover); }

.kz-results { margin: 0; padding: 0; list-style: none; }
.kz-results > li {
  max-width: var(--kz-text);
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.kz-results .wp-block-post-title { margin: 0; }
.kz-results .wp-block-post-title a { color: var(--wp--preset--color--link); }
.kz-results .wp-block-post-excerpt { margin-top: 0.4rem; color: var(--wp--preset--color--muted); }
.kz-results .wp-block-post-excerpt__excerpt { margin: 0; }

.wp-block-query-pagination { margin-block-start: 2rem; }

/* ==========================================================================
   20b. Anfrageformular (Plugin konzeptico-anfrage: kz-form, kz-field, kz-check, kz-error)
   Feldrand control-line (hell #767982 4,35:1, dunkel #8D9097), Fokus wie überall, Tippflächen ≥ 44 px.
   ========================================================================== */

.kz-anfrage { max-width: 40rem; }
.kz-form { display: grid; gap: 1.25rem; margin-block-start: 1.25rem; }
.kz-form > * { margin: 0; }
.kz-form__hinweis { color: var(--wp--preset--color--muted); font-size: 0.9rem; }

.kz-form .kz-field { display: grid; gap: 6px; margin: 0; }
.kz-form .kz-field > label,
.kz-form .kz-field > legend {
  padding: 0;
  color: var(--wp--preset--color--ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}
.kz-form .kz-field > legend { margin-bottom: 8px; }
.kz-pflicht { color: var(--wp--preset--color--danger); font-weight: 700; }
.kz-optional { color: var(--wp--preset--color--muted); font-weight: 400; }
.kz-field__hilfe {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.kz-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--control-line);
  border-radius: 10px;
  background-color: var(--kz-card);
  color: var(--wp--preset--color--ink);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--kz-ease), box-shadow var(--kz-ease);
}
.kz-form select { padding-right: 10px; cursor: pointer; }
.kz-form textarea { min-height: 10rem; resize: vertical; }
.kz-form :is(input, select, textarea):hover { border-color: var(--wp--preset--color--ink); }
.kz-form :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--kz-focus);
  outline-offset: 1px;
  border-color: var(--kz-focus);
}

.kz-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 2px 16px;
}
.kz-form .kz-check {
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  line-height: 1.45;
}
.kz-form .kz-check > label { cursor: pointer; }
.kz-form input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--kz-lime-line);
  cursor: pointer;
}
.kz-field--einwilligung .kz-check {
  padding: 14px 16px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  background: var(--wp--preset--color--surface-soft);
}

/* Fehlerzustand (aria-invalid, kz-field--fehler, kz-error, kz-error-summary) */
.kz-form [aria-invalid="true"] {
  border-color: var(--wp--preset--color--danger);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--danger);
}
.kz-field--fehler.kz-field--einwilligung .kz-check { border-color: var(--wp--preset--color--danger); }
.kz-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--wp--preset--color--danger);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}
.kz-error::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("../icons/alert.svg") center / contain no-repeat;
  mask: url("../icons/alert.svg") center / contain no-repeat;
}
.kz-error-summary h2 { font-size: 1.15rem; letter-spacing: -0.01em; }
.kz-error-summary ul { margin: 0; padding-left: 1.2rem; }
.kz-error-summary li + li { margin-top: 4px; }
.kz-error-summary a { color: var(--wp--preset--color--ink); font-weight: 600; }

.kz-form__aktionen { margin-block-start: 0.25rem; }
.kz-form button[type="submit"]:disabled { opacity: 0.7; cursor: progress; transform: none; }

/* ==========================================================================
   21. Fuß (Charcoal, 4px Grün oben)
   ========================================================================== */

.kz-footer {
  background: var(--kz-charcoal);
  border-top: 4px solid var(--kz-lime);
  color: #d8d9dc;
  font-size: 0.95rem;
}
.kz-footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 4fr;
  gap: 40px;
  max-width: var(--kz-wide);
  margin: 0 auto;
  padding: 56px var(--kz-gutter) 40px;
}
.kz-footer__brand > * { margin: 0 0 1rem; }
.kz-footer .kz-logo img { height: 30px; }
.kz-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.kz-footer__title {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.kz-footer ul { margin: 0; padding: 0; list-style: none; }
.kz-footer li { margin: 0 0 8px; }
.kz-footer a {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.kz-footer a:hover { color: var(--kz-lime-bright); text-decoration-color: currentColor; }
.kz-footer__nav a { text-decoration: none; }
.kz-footer__nav a:hover { text-decoration: underline; }
.kz-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: var(--kz-wide);
  margin: 0 auto;
  padding: 18px var(--kz-gutter) 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #b8bac0;
  font-size: 0.875rem;
}
.kz-footer__legal ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.kz-footer__legal li { margin: 0; }
.kz-footer__legal p { margin: 0; }

/* ==========================================================================
   22. Umbrüche 1180 / 860 / 620
   ========================================================================== */

@media (max-width: 1179.98px) {
  .kz-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .kz-footer__brand { max-width: 40rem; }
}

@media (max-width: 859.98px) {
  .kz-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-group.kz-hero--dark::after,
  .kz-cta::after,
  .kz-band--dark::after { width: 360px; height: 360px; right: -160px; bottom: -220px; border-width: 56px; }
}

@media (max-width: 619.98px) {
  .kz-footer__nav { gap: 28px 20px; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  .kz-footer__inner { padding-block: 44px 32px; }
  .kz-footer__legal { flex-direction: column; align-items: flex-start; }
  .wp-block-buttons > .wp-block-button { width: 100%; }
  .wp-block-buttons > .wp-block-button .wp-block-button__link { width: 100%; }
  .kz-card, .kz-person { padding: 20px; }
  .wp-block-table.kz-table :is(th, td) { padding: 10px 12px; }
  .kz-note { padding-left: 48px; }
  .kz-note::before { left: 14px; }
}

@media (max-width: 359.98px) {
  .kz-footer__nav { grid-template-columns: 1fr; }
}

/* ==========================================================================
   23. Bewegung reduzieren
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .kz-card--link:hover,
  .wp-block-button .wp-block-button__link:hover,
  .kz-button:hover { transform: none; }
}

/* Erzwungene Farben (Windows-Kontrastmodus) */
@media (forced-colors: active) {
  .kz-icon::before,
  .kz-card__more a::after,
  .kz-note::before,
  .kz-legal :is(h2, h3)::before { background: CanvasText; }
  .kz-steps > li::before,
  .kz-checklist > li::before { border: 1px solid CanvasText; }
  .kz-card, .kz-note, .kz-legal, .kz-person, .wp-block-details { border: 1px solid CanvasText; }
}

/* ==========================================================================
   24. Druck (Dokumentkopf-Stil: Logo, 2px Grün, schlicht)
   ========================================================================== */

@media print {
  @page { margin: 18mm 16mm 20mm; }

  html:root {
    --wp--preset--color--surface: #ffffff;
    --wp--preset--color--canvas: #ffffff;
    --wp--preset--color--surface-soft: #ffffff;
    --wp--preset--color--ink: #202128;
    --wp--preset--color--muted: #4e5158;
    --wp--preset--color--line: #c9d3d3;
    --wp--preset--color--link: #202128;
    --wp--preset--color--accent-text: #4a6d24;
    --kz-card: #ffffff;
    /* Dunkelmodus-Tokens zurücksetzen: Papier ist immer hell (sonst dunkle Hinweisflächen mit dunkler Schrift) */
    color-scheme: light;
    --wp--preset--color--band: #ffffff;
    --wp--preset--color--control-line: #767982;
    --wp--preset--color--lime-soft: #eef7e3;
    --wp--preset--color--warning-soft: #fff2df;
    --wp--preset--color--warning-text: #8a591c;
    --wp--preset--color--danger: #a8323a;
    --kz-warning: #d88b28;
    --kz-lime-line: #5f8a2e;
    --kz-header-bg: #ffffff;
    --kz-hero-a: #ffffff;
    --kz-hero-b: #ffffff;
    --kz-focus: #4a6d24;
  }

  body { background: #ffffff; color: #202128; font-size: 10.5pt; }

  /* Sprungmarken-Überschrift ohne Inhaltsverzeichnis weglassen */
  p:has(+ .kz-toc), .kz-table-hint { display: none !important; }
  .kz-note, .kz-note--warn { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .kz-site-header { position: static; }
  .kz-header { box-shadow: none; border-bottom: 2px solid var(--kz-lime); }
  .kz-header__inner { min-height: 0; padding: 0 0 8px; }
  .kz-logo img { height: 26px; }
  .kz-nav, .kz-menu-toggle, .kz-skip, .kz-breadcrumb-bar,
  .wp-block-buttons, .kz-cta, .kz-footer__nav, .kz-footer__brand,
  .wp-block-search, .kz-toc { display: none !important; }

  .kz-footer { background: none; border-top: 1px solid #c9d3d3; color: #4e5158; }
  .kz-footer__inner { display: none; }
  .kz-footer__legal { padding: 8px 0 0; border: 0; color: #4e5158; }
  .kz-footer__legal ul { display: none; }
  .kz-footer a { color: #202128; }

  .wp-block-group:is(.kz-hero, .kz-section, .kz-band, .kz-cta) {
    display: block;
    padding: 12pt 0;
    border: 0;
    background: none !important;
  }
  .kz-hero--dark, .kz-band--dark {
    --wp--preset--color--ink: #202128;
    --wp--preset--color--muted: #4e5158;
    --wp--preset--color--accent-text: #4a6d24;
    --wp--preset--color--link: #202128;
    color: #202128;
  }
  .kz-hero--dark .kz-lead { color: #4e5158; }
  .kz-hero--dark::before, .kz-hero--dark::after, .kz-band--dark::after, .kz-cta::after { display: none; }
  .kz-hero h1 { font-size: 22pt; max-width: none; }
  .kz-main h2 { font-size: 15pt; }
  .kz-main h3 { font-size: 12pt; }
  .kz-lead { font-size: 12pt; }
  .kz-main .kz-icon { display: none; }

  .kz-card, .kz-person, .kz-note, .kz-legal, .wp-block-details, .wp-block-table.kz-table {
    box-shadow: none !important;
    break-inside: avoid;
  }
  .kz-cards { grid-template-columns: repeat(2, 1fr); }
  .kz-card--link a::before { display: none; }

  h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  .wp-block-post-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    color: #4e5158;
    font-size: 0.85em;
    word-break: break-all;
  }
  .kz-card__more a::after { content: none; }

  details::details-content { content-visibility: visible; display: block; }
  .wp-block-details > summary::after { display: none; }
  .wp-block-details > summary { min-height: 0; padding: 8pt 12pt; background: none; }
  .wp-block-details > :not(summary) { padding: 6pt 12pt 0; }
  .wp-block-details > :last-child:not(summary) { padding-bottom: 8pt; }
}

/* Druck im dunklen Design: auf Papier immer das Originallogo auf hellem Kopf */
@media print {
  html[data-theme="dark"] .kz-logo .kz-logo__img--original { display: block; }
  html[data-theme="dark"] .kz-logo .kz-logo__img--hell { display: none; }
  .kz-theme-toggle { display: none !important; }
}