/* =====================================================================
   header.css – Kopfbereich: Topline + Suchfeld + Farbbalken mit Logo
   Später: _header.scss. Varianten laufen über data-Attribute am <html>
   (data-farbe, data-hoehe, data-vpos, data-logo, data-seite, data-a,
   data-topline, data-suche) – im Template werden sie zu festen Werten
   bzw. Theme-Einstellungen.

   Aufbau kompakt: .site-header ist display: contents; Suchleiste (sticky, CD-Orange bzw.
   data-leiste) und Farbbalken sind je ein eigenes page-grid im Body-Fluss, die Topline
   ist ausgeblendet (ihre Punkte kommen ins mobile Menü).
   Aufbau breit: .site-header ist ein Dreizeilen-Raster (Topline / – / Farbbalken),
   das Suchfeld liegt in Zeile 3 IM Balken gegenüber dem Logo – abgesprochene
   CD-Ausnahme, nur auf großen Bildschirmen.
   ===================================================================== */

/* ---------- Varianten → Tokens ---------- */

/* Logo-Größe A */
:root[data-a="s"] { --a: var(--a-s); }
:root[data-a="m"] { --a: var(--a-m); }
:root[data-a="l"] { --a: var(--a-l); }

/* Balkenfarbe – pro Fläche genau eine CD-Farbe */
:root,
:root[data-farbe="blau"]    { --bar-color: var(--lk-blau); }
:root[data-farbe="orange"]  { --bar-color: var(--lk-orange); }
:root[data-farbe="rot"]     { --bar-color: var(--lk-rot); }
:root[data-farbe="violett"] { --bar-color: var(--lk-violett); }

/* Dunklere Stufen der Balkenfarbe (Label, Hover) – folgen automatisch der Farbwahl */
:root {
  --bar-color-dark:   color-mix(in srgb, var(--bar-color) 82%, #000);
  --bar-color-darker: color-mix(in srgb, var(--bar-color) 68%, #000);
}

/* Balkenhöhe – Maße in Vielfachen von A (CD „Firmierung im Farbbalken“) */
:root,
:root[data-hoehe="2"]   { --bar-factor: 2; }
:root[data-hoehe="1.5"] { --bar-factor: 1.5; }
:root[data-hoehe="3"]   { --bar-factor: 3; }

/* Vertikale Logo-Position
   mitte: gleicher Abstand über und unter dem Logo, wie bei der Bauchbinde
          (1,5 A → ¼ A, 2 A → ½ A, 3 A → 1 A)
   oben:  CD „Anordnung oben“, Logo ⅓ A vom oberen Rand (1,5 A bleibt mittig) */
:root,
:root[data-vpos="mitte"] {
  --bar-pad-top:    calc((var(--bar-factor) - 1) * var(--a) / 2);
  --bar-pad-bottom: calc((var(--bar-factor) - 1) * var(--a) / 2);
}
:root[data-vpos="oben"] {
  --bar-pad-top:    calc(var(--a) / 3);
  --bar-pad-bottom: calc((var(--bar-factor) - 1) * var(--a) - var(--a) / 3);
}
:root[data-vpos="oben"][data-hoehe="1.5"] {
  --bar-pad-top:    calc(var(--a) / 4);
  --bar-pad-bottom: calc(var(--a) / 4);
}

/* Topline: Hintergrund weiß (Default), Schrift und Icons im dunkleren Balkenton
   (--bar-color-dark, 82 %, wie das Menü-Label) – die reine Balkenfarbe wirkt in den
   dünnen Linien heller als der Balken selbst (Jürgen, 22.10.2026).
   Orange als Textfarbe auf Weiß hätte nur 2,74:1 → dort das abgedunkelte Orange #B25F00.
   Variante „balken“: Hintergrund in Balkenfarbe, Schrift weiß (auf Orange dunkel). */
:root,
:root[data-topline="weiss"]  { --topline-bg: var(--lk-weiss);          --topline-fg: var(--bar-color-dark); }
:root[data-topline="hell"]   { --topline-bg: var(--lk-flaeche-hell-2);  --topline-fg: var(--bar-color-dark); }
:root[data-topline="weiss"][data-farbe="orange"],
:root[data-topline="hell"][data-farbe="orange"]   { --topline-fg: var(--lk-orange-text); }
:root[data-topline="balken"] { --topline-bg: var(--bar-color);         --topline-fg: var(--lk-weiss); }
:root[data-topline="balken"][data-farbe="orange"] { --topline-fg: var(--lk-text); }

/* ---------- Kopf ----------
   kompakt (Default, schmal): .site-header ist display: contents – Suchleiste und
       Farbbalken liegen direkt im Body-Fluss, jede Zeile ein eigenes page-grid; Topline aus.
       Nur so kann die Suchleiste über die ganze Seite kleben (sticky ist auf den
       Elternkasten begrenzt).
   breit (ab Breakpoint): .site-header ist ein Dreizeilen-Raster, das Suchfeld liegt
       in Zeile 3 im Farbbalken. */
.site-header { display: contents; }

/* ---------- Suchleiste: Suchfeld + Menü-Button ----------
   kompakt: oberste Zeile, weiß, klebt beim Scrollen oben */
.searchbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--lk-weiss);     /* weiß, bleibt beim Scrollen stehen (Entscheidung 22.10.2026) */
  transition: background-color 300ms ease-out;
}
/* Gescrollt (Klasse per js/searchbar.js ab 50 px): invertiert – Balkenfarbe als
   Hintergrund, Feld, Linie, Menü-Button und Label weiß, weicher Übergang */
.searchbar.is-scrolled { background: var(--bar-color); }
.searchbar.is-scrolled .search { --search-line: var(--lk-weiss); }
.searchbar.is-scrolled .search__input,
.searchbar.is-scrolled .search__input::placeholder { color: var(--lk-weiss); }
.searchbar.is-scrolled .search__input { caret-color: var(--lk-weiss); }
.searchbar.is-scrolled .menu-toggle,
.searchbar.is-scrolled .menu-toggle__label,
.searchbar.is-scrolled .menu-toggle:hover,
.searchbar.is-scrolled .menu-toggle:hover .menu-toggle__label { color: var(--lk-weiss); }
.searchbar.is-scrolled .menu-toggle:hover { opacity: 0.8; }
.searchbar__inner {
  grid-column: content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.7rem;                     /* Abstand Suchfeld ↔ Menü-Button */
  padding-block: 1.25rem;          /* 20 + 40 + 20 = 80 px Leiste */
}
.search {
  position: relative;              /* Bezug für die Linie (::after) */
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 18rem;                /* nur so breit wie nötig */
  display: flex;
  margin: 0;
}
/* Linie unter dem Feld: 2 px, fährt beim Fokus links und rechts etwas auseinander */
.search::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--search-line, var(--bar-color));
  transition: inset-inline 220ms ease-out, background-color 300ms ease-out;
  pointer-events: none;
}
.search:focus-within::after { inset-inline: -0.6rem; }
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.5rem;                  /* 40 px */
  padding: 0;                      /* kein Seitenpadding, Text auf der Inhaltskante */
  font: inherit;
  font-size: 1rem;                 /* ≥ 16 px: kein Auto-Zoom auf iOS */
  font-weight: 500;                /* Eingabe und Platzhalter Medium */
  color: var(--lk-text);
  background: transparent;
  border: 0;                       /* die Linie zeichnet .search::after */
  border-radius: 0;                /* Designentscheidung: durchgehend eckig */
  outline: none;                   /* Fokus = Linie fährt auseinander */
  appearance: none;
  -webkit-appearance: none;
  transition: color 300ms ease-out;
}
.search__input::placeholder {
  color: var(--bar-color);         /* kompakt: Platzhalter in Balkenfarbe (5,5:1 auf Weiß); nur hier, nicht global */
  font-weight: 500;
  opacity: 1;
  transition: color 300ms ease-out;
}
.search__input::-webkit-search-decoration,
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__input:focus-visible { outline: none; box-shadow: none; }
.search.is-open .search__input,
.search.has-value .search__input { padding-inline-end: 1.5rem; } /* Platz für das × (2,5 rem breit, 1 em nach außen versetzt) */
/* Zurücksetzen-× rechtsbündig im Feld, in Balkenfarbe (invertiert: weiß) */
.search__reset {
  position: absolute;
  inset-inline-end: -1em;          /* ragt 1 em (= 16 px, font: inherit) über die Linie hinaus */
  font: inherit;
  inset-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  color: var(--search-line, var(--bar-color));
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 300ms ease-out;
}
.search__reset[hidden] { display: none; }
.search__reset-icon { width: 1.1rem; height: 1.1rem; }
.search__reset:hover { color: var(--bar-color-darker); }
.searchbar.is-scrolled .search__reset:hover { color: var(--lk-weiss); opacity: 0.8; }
.search__reset:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* ---------- Suchergebnisse (Dummy) ----------
   Liegen in der Main-Spalte (page-grid) ANSTELLE des Seiteninhalts (Überblendung
   über die Grid-Stapelung in main, layout.css), kein eigenes Scrollfeld */
.search-results { padding-block: var(--gap-big); }
.search-results > * { grid-column: main; }
.search__count {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  font-weight: var(--lk-weight-regular);
  color: var(--lk-grau-logo);
}
/* Zweiteilung: links (2/3) die Trefferliste, rechts (1/3) die Kategorie-Buttons;
   kompakt gestapelt, die Kategorien als umbrechende Reihe über der Liste */
.search__layout { display: grid; grid-template-columns: 100%; gap: 2rem; align-items: start; }
.search__filter { order: -1; }
.search__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--lk-flaeche-hell);
}
/* Deutlich sichtbares Schließen über den Kategorien (das × im Feld ist leicht zu übersehen):
   eckig, Rahmen in Balkenfarbe, beim Hover gefüllt; tut dasselbe wie das × */
.search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 2rem;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: var(--lk-weight-semibold);
  color: var(--bar-color-dark);
  background: var(--lk-weiss);
  border: 2px solid var(--bar-color);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.search__close:hover { background: var(--bar-color); color: var(--lk-weiss); }
.search__close:focus-visible { outline-offset: 3px; }
.search__close-icon { width: 1em; height: 1em; flex: 0 0 auto; }
.search__filter-title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: var(--lk-weight-semibold);
  color: var(--lk-text);
}
.search__filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.search__filter-btn {
  display: inline-flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 500;
  text-align: start;
  color: var(--bar-color-dark);
  background: var(--lk-flaeche-hell-2);
  border: 0;
  border-radius: 0;                /* eckig wie alles */
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.search__filter-btn:hover { background: var(--lk-flaeche-hell); color: var(--bar-color-darker); }
.search__filter-btn[aria-pressed="true"] { background: var(--bar-color); color: var(--lk-weiss); }
.search__filter-btn:disabled { color: var(--lk-grau-logo); background: var(--lk-flaeche-hell-2); opacity: 0.6; cursor: default; }
.search__filter-btn:focus-visible { outline-offset: 2px; }
.search__filter-count { font-weight: var(--lk-weight-regular); }
/* unter 768 px: Kategorie-Buttons kleiner (Reihe über der Liste), kein
   „Suchergebnisse schließen“ – dort reicht das × in der klebenden Suchleiste */
@media (max-width: 767.98px) {
  .search__close { display: none; }
  .search__layout { gap: 1.5rem; }
  .search__filter-title { font-size: 1rem; margin-block-end: 0.5rem; }
  .search__filter-list { gap: 0.4rem; }
  .search__filter-btn { width: auto; padding: 0.4rem 0.7rem; font-size: 0.9rem; gap: 0.4rem; }
}
@media (min-width: 768px) {
  .search__layout { grid-template-columns: 2fr 1fr; gap: 3rem; }
  .search__filter { order: 0; }
  .search__filter-list { flex-direction: column; gap: 0.5rem; }
  .search__filter-list > li { display: block; }
}
.search__item { border-block-end: 1px solid var(--lk-flaeche-hell); }
.search__item-link {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}
.search__item-link:hover .search__item-title,
.search__item-link:focus-visible .search__item-title { text-decoration: underline; text-underline-offset: 0.2em; }
.search__item-link:focus-visible { outline-offset: 4px; }
.search__item-image {
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  background: var(--lk-flaeche-hell);
}
.search__item-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.search__item-title {
  font-size: 1.125rem;
  font-weight: var(--lk-weight-semibold);
  color: var(--bar-color);
  line-height: 1.3;
}
.search__item-text { line-height: 1.5; }
.search__mark {
  background: color-mix(in srgb, var(--bar-color) 18%, #fff);
  color: var(--lk-text);
  font-weight: var(--lk-weight-semibold);
  padding-inline: 0.1em;
}
.search__item-url {
  font-size: 0.8rem;
  color: var(--lk-grau-logo);
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .search__item-image { width: 4rem; height: 4rem; }
  .search__item-link { gap: 0.9rem; }
}

/* Menü-Button: Label „Menü“ links, daneben drei Balken 28 × 4 px in Balkenfarbe,
   so hoch wie das Suchfeld. Geöffnet (aria-expanded="true") werden die Balken zum ×
   und das Label zu „Schließen“. */
.menu-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.5rem;                  /* so hoch wie das Suchfeld */
  padding: 0;
  font: inherit;                   /* Label exakt wie der Platzhalter: 1 rem, gleiche Zeilenhöhe,
                                      beide vertikal in 40 px zentriert → gleiche Grundlinie */
  color: var(--bar-color);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 300ms ease-out, opacity 150ms ease-out;
}
.menu-toggle:hover { color: var(--bar-color-dark); }        /* Balken, ein Tick dunkler */
.menu-toggle__label { color: var(--bar-color-dark); transition: color 300ms ease-out; }   /* Label etwas dunkler als der Hamburger */
.menu-toggle:hover .menu-toggle__label { color: var(--bar-color-darker); }
.menu-toggle[aria-expanded="true"]  .menu-toggle__label--closed,
.menu-toggle[aria-expanded="false"] .menu-toggle__label--open { display: none; }
.menu-toggle__box {
  position: relative;
  display: block;
  width: 1.75rem;                  /* 28 px */
  height: 1.375rem;                /* 22 px: 3 Balken à 4 px, Abstand 5 px */
}
.menu-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: currentColor;
  transition: transform 200ms ease-out, opacity 150ms ease-out, top 200ms ease-out;
}
.menu-toggle__bar:nth-child(1) { top: 0; }
.menu-toggle__bar:nth-child(2) { top: calc(50% - 2px); }
.menu-toggle__bar:nth-child(3) { top: calc(100% - 4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  top: calc(50% - 2px);
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  top: calc(50% - 2px);
  transform: rotate(-45deg);
}

/* ---------- Topline (Service-Navigation) ----------
   Nur breit. Kompakt ausgeblendet: Gemeindebrief · Leichte Sprache · English ·
   Spenden wandern dort ins mobile Menü (Entwurf 02). */
.topline {
  display: none;
  grid-column: full;
  background: var(--topline-bg);
  font-size: var(--fs-topline);
  line-height: 1.3;
}
.topline__inner {
  grid-column: content;
  container-type: inline-size;     /* Bezug für die cqi-Schriftgröße der Links
                                      (cqi am Element selbst würde auf den Viewport fallen) */
}
.topline__links {
  display: flex;
  align-items: center;
  gap: 2.35em;                     /* Abstand zwischen den Einträgen */
  padding-block: 0.25rem;
  min-height: 2.25rem;
  white-space: nowrap;             /* immer eine Zeile … */
  /* … auf Mini-Smartphones schrumpft die Schrift, statt umzubrechen:
     Breite der vier Links mit Icons + drei Lücken ≈ 34 × Schriftgröße (Noto Sans 400);
     kompakt ist die Topline ohnehin ausgeblendet */
  font-size: min(var(--fs-topline), 2.9cqi);
}
.topline__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;                     /* Icon ↔ Wort */
  padding-block: 1em;              /* Zeilenhöhe der Topline */
  color: var(--topline-fg);
  text-decoration: none;
}
.topline__icon {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex: 0 0 auto;
}
.topline__link:hover,
.topline__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.topline__link:focus-visible { outline-color: var(--lk-text); box-shadow: 0 0 0 3px var(--lk-weiss); }

/* ---------- Zustand „breit“ ab wählbarem Breakpoint (data-suche), Default 1024 px.
   Im Theme später nur EIN Block mit dem festen Breakpoint; hier dreifach erzeugt. ---------- */
@media (min-width: 768px) {
  :root[data-suche="768"] .site-header {
    display: grid;                 /* Dreizeilen-Raster (Spalten aus .page-grid) */
    grid-template-rows: auto auto auto;
  }
  :root[data-suche="768"] .mainnav { display: grid; }
  :root[data-suche="768"] .sticky-nav {
    top: 0;
    margin-top: calc(-1 * (var(--mainnav-overlap) + var(--mainnav-pad)));
    --mainnav-shrink: calc(var(--mainnav-h) - var(--mainnav-h-stuck) + 2 * (var(--mainnav-pad) - var(--mainnav-pad-stuck)));
  }
  :root[data-suche="768"] .topline  { display: grid; grid-row: 1; }
  :root[data-suche="768"] .brandbar { grid-row: 3; }
  :root[data-suche="768"].is-search-open .brandbar { display: grid; }
  :root[data-suche="768"] .searchbar {
    position: static;
    border: 0;
    display: block;
    grid-column: content;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    z-index: 1;
    background: none;
    width: min(18rem, calc(100% - var(--a) * var(--logo-ratio) - var(--a)));
  }
  :root[data-suche="768"][data-seite="links"] .searchbar { justify-self: end; }
  :root[data-suche="768"] .searchbar__inner { padding: 0; }
  :root[data-suche="768"] .search { width: 100%; }
  /* Suchfeld im Balken wie kompakt: transparent, kein Seitenpadding, nur Linie unten –
     hier in Weiß (Text, Platzhalter, Caret ebenfalls weiß); Fokus: Linie fährt auseinander */
  :root[data-suche="768"] .search { --search-line: var(--lk-weiss); }
  :root[data-suche="768"] .search__input {
    color: var(--lk-weiss);
    caret-color: var(--lk-weiss);
  }
  :root[data-suche="768"] .search__input::placeholder { color: var(--lk-weiss); }
  :root[data-suche="768"] .search__reset:hover { color: var(--lk-weiss); opacity: 0.8; }
  :root[data-suche="768"] .menu-toggle { display: none; }
  :root[data-suche="768"] .topline__links { font-size: var(--fs-topline); }
}
@media (min-width: 1024px) {
  :root[data-suche="1024"] .site-header {
    display: grid;                 /* Dreizeilen-Raster (Spalten aus .page-grid) */
    grid-template-rows: auto auto auto;
  }
  :root[data-suche="1024"] .mainnav { display: grid; }
  :root[data-suche="1024"] .sticky-nav {
    top: 0;
    margin-top: calc(-1 * (var(--mainnav-overlap) + var(--mainnav-pad)));
    --mainnav-shrink: calc(var(--mainnav-h) - var(--mainnav-h-stuck) + 2 * (var(--mainnav-pad) - var(--mainnav-pad-stuck)));
  }
  :root[data-suche="1024"] .topline  { display: grid; grid-row: 1; }
  :root[data-suche="1024"] .brandbar { grid-row: 3; }
  :root[data-suche="1024"].is-search-open .brandbar { display: grid; }
  :root[data-suche="1024"] .searchbar {
    position: static;
    border: 0;
    display: block;
    grid-column: content;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    z-index: 1;
    background: none;
    width: min(18rem, calc(100% - var(--a) * var(--logo-ratio) - var(--a)));
  }
  :root[data-suche="1024"][data-seite="links"] .searchbar { justify-self: end; }
  :root[data-suche="1024"] .searchbar__inner { padding: 0; }
  :root[data-suche="1024"] .search { width: 100%; }
  /* Suchfeld im Balken wie kompakt: transparent, kein Seitenpadding, nur Linie unten –
     hier in Weiß (Text, Platzhalter, Caret ebenfalls weiß); Fokus: Linie fährt auseinander */
  :root[data-suche="1024"] .search { --search-line: var(--lk-weiss); }
  :root[data-suche="1024"] .search__input {
    color: var(--lk-weiss);
    caret-color: var(--lk-weiss);
  }
  :root[data-suche="1024"] .search__input::placeholder { color: var(--lk-weiss); }
  :root[data-suche="1024"] .search__reset:hover { color: var(--lk-weiss); opacity: 0.8; }
  :root[data-suche="1024"] .menu-toggle { display: none; }
  :root[data-suche="1024"] .topline__links { font-size: var(--fs-topline); }
}
@media (min-width: 1280px) {
  :root[data-suche="1280"] .site-header {
    display: grid;                 /* Dreizeilen-Raster (Spalten aus .page-grid) */
    grid-template-rows: auto auto auto;
  }
  :root[data-suche="1280"] .mainnav { display: grid; }
  :root[data-suche="1280"] .sticky-nav {
    top: 0;
    margin-top: calc(-1 * (var(--mainnav-overlap) + var(--mainnav-pad)));
    --mainnav-shrink: calc(var(--mainnav-h) - var(--mainnav-h-stuck) + 2 * (var(--mainnav-pad) - var(--mainnav-pad-stuck)));
  }
  :root[data-suche="1280"] .topline  { display: grid; grid-row: 1; }
  :root[data-suche="1280"] .brandbar { grid-row: 3; }
  :root[data-suche="1280"].is-search-open .brandbar { display: grid; }
  :root[data-suche="1280"] .searchbar {
    position: static;
    border: 0;
    display: block;
    grid-column: content;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    z-index: 1;
    background: none;
    width: min(18rem, calc(100% - var(--a) * var(--logo-ratio) - var(--a)));
  }
  :root[data-suche="1280"][data-seite="links"] .searchbar { justify-self: end; }
  :root[data-suche="1280"] .searchbar__inner { padding: 0; }
  :root[data-suche="1280"] .search { width: 100%; }
  /* Suchfeld im Balken wie kompakt: transparent, kein Seitenpadding, nur Linie unten –
     hier in Weiß (Text, Platzhalter, Caret ebenfalls weiß); Fokus: Linie fährt auseinander */
  :root[data-suche="1280"] .search { --search-line: var(--lk-weiss); }
  :root[data-suche="1280"] .search__input {
    color: var(--lk-weiss);
    caret-color: var(--lk-weiss);
  }
  :root[data-suche="1280"] .search__input::placeholder { color: var(--lk-weiss); }
  :root[data-suche="1280"] .search__reset:hover { color: var(--lk-weiss); opacity: 0.8; }
  :root[data-suche="1280"] .menu-toggle { display: none; }
  :root[data-suche="1280"] .topline__links { font-size: var(--fs-topline); }
}

/* ---------- Hauptnavigation ----------
   Vier eckige Buttons in den CD-Farben auf der unteren Kante des Farbbalkens: eigene
   Kopfzeile, per negativem Außenabstand nach oben über die Kante gezogen (ca. 40 % der
   Höhe im Balken, 60 % darunter = „ein Stückchen nach unten geschoben“). Hover: Grund
   etwas dunkler (color-mix 82 %). Der Button in der aktuellen Balkenfarbe bekommt den
   dunkleren Ton, damit er sich vom Balken abhebt. Kompakt ausgeblendet (mobiles Menü).
   Klebt beim Scrollen oben (position: sticky; steht dafür außerhalb des <header>):
   js/mainnav.js setzt is-stuck (an .sticky-nav), sobald die Leiste den oberen Rand erreicht →
   weißer Grund, 10 px Innenabstand, Buttons niedriger. Im Fluss ist der Innenabstand oben/unten
   (0,75 rem) da; oben wird er durch einen negativen Außenabstand am Kasten .sticky-nav
   neutralisiert (Buttons liegen 18 px im Balken), unten bleibt er als Luft zur Breadcrumb.
   Die beim Kleben gesparte Höhe gleicht .sticky-nav aus. Kleben übernimmt .sticky-nav. */
.mainnav {
  display: none;                   /* kompakt: nicht sichtbar, breit: s. Media-Blöcke */
  padding-block: var(--mainnav-pad);
  background: transparent;
  transition: background-color 200ms ease-out, padding 200ms ease-out;
}
/* geklebt: weißer Grund wie die Breadcrumb, 10 px Innenabstand oben/unten (Jürgen, 23.10.2026;
   vorher Balkenfarbe); Buttons niedriger – nur die Höhe, Breite und Schrift bleiben, damit sich
   nichts seitlich bewegt */
.sticky-nav.is-stuck .mainnav {
  background: var(--lk-weiss);
  padding-block: var(--mainnav-pad-stuck);
}
.sticky-nav.is-stuck .mainnav__link { height: var(--mainnav-h-stuck); }
.mainnav__list {
  grid-column: content;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mainnav__link {
  display: inline-flex;
  align-items: center;
  height: var(--mainnav-h);
  padding-inline: 1.5rem;
  font-size: 0.95rem;              /* 15,2 px */
  font-weight: 500;
  color: var(--lk-weiss);
  background: var(--mainnav-bg);
  text-decoration: none;
  transition: background-color 200ms ease-out, height 200ms ease-out;
}
.mainnav__link:hover,
.mainnav__link:focus-visible { background: color-mix(in srgb, var(--mainnav-bg) 82%, #000); }
.mainnav__link:focus-visible { outline-offset: 3px; }
.mainnav__item--blau    { --mainnav-bg: var(--lk-blau); }
.mainnav__item--orange  { --mainnav-bg: color-mix(in srgb, var(--lk-orange) 90%, #000); }
  /* CD-Orange nur leicht abgedunkelt (#D67200): Weiß darauf 3,3:1 – bewusst unter AA (Jürgen, 22.10.2026:
     #B25F00 wirkt zu dunkel/„dreckig“, Schrift bleibt gut lesbar); Schrift weiß wie bei den anderen */
.mainnav__item--rot     { --mainnav-bg: var(--lk-rot); }
.mainnav__item--violett { --mainnav-bg: var(--lk-violett); }
:root[data-farbe="blau"]    .mainnav__item--blau,
:root[data-farbe="orange"]  .mainnav__item--orange,
:root[data-farbe="rot"]     .mainnav__item--rot,
:root[data-farbe="violett"] .mainnav__item--violett { --mainnav-bg: var(--bar-color-dark); }
/* Variante nav=einfarbig: alle vier Buttons im dunkleren Balkenton (bei Blau #005A8C wie „Über uns“
   in der bunten Fassung), folgt dem Farbschalter. Default bunt (Jürgen, 23.10.2026: zum Vergleich für den Kunden) */
:root[data-nav="einfarbig"] .mainnav__item { --mainnav-bg: var(--bar-color-dark); }
/* bei offenen Suchergebnissen entfallen Hauptnavigation und Breadcrumb (höhere Spezifität als die Media-Blöcke) */
:root[data-suche].is-search-open .mainnav,
:root.is-search-open .breadcrumb { display: none; }

/* ---------- Klebender Kasten: Hauptnavigation + Breadcrumb ----------
   Beide kleben gemeinsam, damit „Startseite“ beim Scrollen erreichbar bleibt –
   das Logo scrollt weg. Kompakt klebt der Kasten unter der Suchleiste (80 px, s. .searchbar),
   breit oben am Rand (Media-Blöcke). Breit zieht ein negativer Außenabstand den Kasten so
   weit hoch, dass die Buttons 1,1 rem im Balken liegen – am Kasten, nicht an der
   Hauptnavigation, weil body ein Flex-Container ist (keine Margin-Collapsing).
   Geklebt werden Hauptnavigation und Breadcrumb niedriger (Jürgen, 23.10.2026: sonst zu
   viel oben). Damit der Inhalt darunter dabei nicht hochspringt, gleicht ein Außenabstand
   unten die gesparte Höhe aus (gleiche Übergangszeit → Summe bleibt konstant).
   --mainnav-shrink ist kompakt 0 (keine Hauptnavigation), breit in den Media-Blöcken gesetzt. */
.sticky-nav {
  --mainnav-h: 3rem;               /* 48 px Buttonhöhe */
  --mainnav-h-stuck: 2rem;         /* 32 px, geklebt */
  --mainnav-overlap: 1.1rem;       /* so viel ragt in den Balken */
  --mainnav-pad: 0.75rem;          /* Innenabstand oben/unten (sichtbar, wenn geklebt) */
  --mainnav-pad-stuck: 0.625rem;   /* 10 px, geklebt (Jürgen, 23.10.2026) */
  --mainnav-shrink: 0px;
  --breadcrumb-pad: 0.6rem;        /* Innenabstand oben/unten der Breadcrumb */
  --breadcrumb-pad-stuck: 0.3rem;  /* geklebt */
  --searchbar-h: 5rem;             /* 1,25 rem + 40 px Feld + 1,25 rem */
  position: sticky;
  top: var(--searchbar-h);
  z-index: 3;                      /* über Balken und Inhalt, unter der Suchleiste (20) */
  transition: margin-bottom 200ms ease-out;
}
.sticky-nav.is-stuck {
  margin-bottom: calc(var(--mainnav-shrink) + 2 * (var(--breadcrumb-pad) - var(--breadcrumb-pad-stuck)));
}

/* ---------- Breadcrumb ----------
   Weißer Streifen direkt unter der Hauptnavigation, beginnt mit „Startseite“ (Text, kein Icon).
   Links im dunkleren Balkenton (bei Orange #B25F00 wegen des Kontrasts), aktuelle Seite in
   Textfarbe, Trenner als eckiger Winkel (Pfeile fehlen in Noto Sans). Geklebt feine Linie unten,
   damit der Inhalt sichtbar darunter verschwindet, und weniger Innenabstand.
   Immer der komplette Pfad, alle Wörter ausgeschrieben (Jürgen, 23.10.2026). Passt er nicht in
   eine Zeile, bricht er um:
   – Jeder Eintrag ist ein inline-block und wandert als Ganzes in die nächste Zeile (samt Trenner
     am Zeilenende), Einträge werden nicht mitten im Namen getrennt.
   – text-wrap: balance verteilt die Einträge gleichmäßig auf die Zeilen, damit kein einzelner
     Eintrag allein in der letzten Zeile hängt.
   – Silbentrennung (hyphens: auto, lang="de") greift nur im Notfall: erst wenn ein einzelner
     Eintrag breiter ist als die ganze Zeile, wird er in seinem Kasten umbrochen. */
:root { --link-color: var(--bar-color-dark); --breadcrumb-fg: var(--link-color); }   /* Textlinks: dunklerer Balkenton */
:root[data-farbe="orange"] { --link-color: var(--lk-orange-text); }
.breadcrumb {
  background: var(--lk-weiss);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out;
}
.sticky-nav.is-stuck .breadcrumb { border-bottom-color: var(--lk-flaeche-hell); }
.breadcrumb__list {
  grid-column: content;
  margin: 0;
  padding-block: var(--breadcrumb-pad);
  padding-inline: 0;
  list-style: none;
  font-size: 0.875rem;             /* 14 px */
  line-height: 1.6;
  text-wrap: balance;
  transition: padding 200ms ease-out;
}
.sticky-nav.is-stuck .breadcrumb__list { padding-block: var(--breadcrumb-pad-stuck); }
.breadcrumb__item {
  display: inline-block;
  max-width: 100%;                 /* breiter als die Zeile → Umbruch im Eintrag (Notfall) */
  margin-inline-end: 0.35rem;      /* + Leerzeichen aus dem Markup ≈ 0,6 rem */
  vertical-align: top;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;   /* nur Wörter ab 10 Zeichen, mindestens 4 vor/nach dem Trennstrich */
  text-wrap: wrap;
}
.breadcrumb__item:last-child { margin-inline-end: 0; }
.breadcrumb__item:not(:last-child)::after {  /* Trenner: eckiger Winkel ›, bleibt am Zeilenende beim vorderen Eintrag */
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline: 0.5rem 0.1em;
  border-top: 1.5px solid var(--lk-grau-logo);
  border-right: 1.5px solid var(--lk-grau-logo);
  transform: rotate(45deg);
  vertical-align: 0.1em;
}
.breadcrumb__link {
  color: var(--breadcrumb-fg);
  text-decoration: none;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.breadcrumb__current { color: var(--lk-text); }

/* ---------- Farbbalken mit Logo ---------- */
.brandbar {
  grid-column: full;
  background: var(--bar-color);
  padding-block: var(--bar-pad-top) var(--bar-pad-bottom);
  align-items: start;
}
/* Balkenbreite (Schalter breite): voll = Bildschirmbreite (Default), 1350 / 1600 =
   Farbbalken UND Footer bis max. 1350 bzw. 1600 px, zentriert; Inhalt und Logo
   bleiben auf der Inhaltskante, weil beide Raster dieselben Spalten mittig aufbauen */
:root[data-breite="1350"] .brandbar,
:root[data-breite="1600"] .brandbar,
:root[data-breite="1350"] .site-footer,
:root[data-breite="1600"] .site-footer {
  width: 100%;
  margin-inline: auto;             /* Flex-Kind von body (Footer; Balken kompakt) */
  justify-self: center;            /* Balken breit: Raster-Kind von .site-header */
}
:root[data-breite="1350"] .brandbar,
:root[data-breite="1350"] .site-footer { max-width: 1350px; }
:root[data-breite="1600"] .brandbar,
:root[data-breite="1600"] .site-footer { max-width: 1600px; }
/* Kompakt: bei offenen Suchergebnissen entfällt der Farbbalken, damit die Treffer
   gleich unter der klebenden Suchleiste beginnen (breit bleibt er, s. Media-Blöcke) */
:root.is-search-open .brandbar { display: none; }
.brandbar__logo {
  grid-column: content;
  justify-self: end;               /* Default: Logo rechts an der Inhaltskante */
  display: block;
  width: calc(var(--a) * var(--logo-ratio));
  height: var(--a);
}
.brandbar__logo img {
  width: 100%;
  height: 100%;
}
:root[data-seite="links"] .brandbar__logo { justify-self: start; }

/* Variante: Logo ½ A vom Bildschirmrand (CD-Print-Logik), unabhängig von der Inhaltskante */
:root[data-logo="rand"] .brandbar__logo {
  grid-column: full;
  margin-inline-end: calc(var(--a) / 2);
}
:root[data-seite="links"][data-logo="rand"] .brandbar__logo {
  margin-inline-end: 0;
  margin-inline-start: calc(var(--a) / 2);
}

/* Platzhalter für spätere Bausteine (Hauptnavigation, Menüpanel) kommen als
   weitere Zeilen in .site-header – siehe Kommentare im Markup. */