/*
Theme Name: AND Solution
Theme URI: https://and-solution.de
Author: Eric Insel
Description: Handgebautes FSE-Block-Theme fuer AND Solution. Keine Page-Builder-Abhaengigkeit, Layout im Code, Redaktion nur auf Inhaltsebene.
Version: 0.2.0
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: and-solution
Tags: full-site-editing, block-templates, accessibility-ready
*/

/* =========================================================
   1. Design-Tokens (Source of Truth, gespiegelt in theme.json)
   ========================================================= */
:root{
  --and-green:#7CB817;
  --and-green-700:#527C10;
  --and-green-50:#F2F7E8;
  --and-teal:#16B4C7;

  --and-ink-900:#0F2230;
  --and-ink-700:#13212A;
  --and-ink-500:#54616B;
  --and-ink-300:#8A949B;

  --and-bg:#FFFFFF;
  --and-bg-soft:#F6F8F7;
  --and-border:#E6EAE8;

  /* Flaechen, keine Textfarben. Frueher stand hier `--and-ink-900`; im KI-Modus
     wurde daraus eine helle Farbe und damit Weiss auf Hellgrau, 1,17:1, von axe
     zehnmal gemeldet. B-025. */
  --and-flaeche-dunkel:#0F2230;
  --and-flaeche-dunkel-aktiv:#13212A;

  /* Schrift auf der Marke und die dunklere Markenflaeche. Getrennt von
     `--and-ink-900` und `--and-green-700`, weil Abschnitt 5z beide in dunklen
     Sektionen umdefiniert. Weiss auf `--and-green` waeren 2,41:1. */
  --and-auf-marke:#0F2230;
  --and-marke-aktiv:#527C10;

  --and-font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --and-font-display:"Space Grotesk","Inter",system-ui,sans-serif;

  --and-radius-card:14px;
  --and-radius-btn:8px;
  --and-radius-pill:999px;

  --and-shadow-rest:0 1px 2px rgba(15,34,48,.06);
  --and-shadow-raise:0 10px 30px rgba(15,34,48,.10);

  --and-container:1200px;
  --and-grad:linear-gradient(90deg,var(--and-green),var(--and-teal));
}

/* Der Seitenrand des Blocklayouts. Er kommt aus `theme.json`, dort steht er auf
   24px, und `theme.json` kennt keine Medienabfrage. Ab der Containerbreite
   sollen es 48px sein, wie in `.and-container`, deshalb steht der zweite Wert
   hier und nur hier.

   Warum das ueberhaupt noetig ist, gefunden in T-032: Mit
   `useRootPaddingAwareAlignments` gibt WordPress jeder Sektion die Klasse
   `has-global-padding` und setzt darauf `padding-inline` aus genau diesen zwei
   Eigenschaften. Sie standen bis T-032 auf `0`, seit dem Geruest aus T-001 und
   ohne dass das je eine Entscheidung war. Ergebnis: Jede Sektion auf jeder
   Seite hatte null Seitenrand, und auf schmalen Fenstern klebte der Text an der
   Fensterkante. `.and-container` haette das aufgefangen, kommt im Theme aber
   nur an zwei Stellen vor, in der KI-Leiste und im Kopf des KI-Modus. Keine
   Inhaltssektion steckt darin.

   `body` und nicht `:root`, und das ist der Unterschied zwischen wirkt und
   wirkt nicht: WordPress schreibt die Presets auf `:root`, diese vier
   Eigenschaften aber auf `body`. Wer sie auf `:root` ueberschreibt, setzt einen
   Wert, den `body` fuer alle Nachkommen sofort wieder ueberschreibt. Der Fehler
   stand hier und ist erst in der Gegenprobe zu T-032 aufgefallen, weil der
   Selbsttest den Fall nicht anschlagen liess. Gleiche Spezifitaet wie die Regel
   von WordPress, dieses Stylesheet kommt danach, also gewinnt es. */
@media(min-width:1024px){
  body{
    --wp--style--root--padding-left:48px;
    --wp--style--root--padding-right:48px;
  }
}

/* =========================================================
   2. Basis
   ========================================================= */
*{box-sizing:border-box}

/* `[hidden]` muss gewinnen. Die Regel des Browsers dafuer ist `[hidden]{display:none}`
   und damit schwaecher als **jede** Klasse. Wer irgendwo `display:flex` auf eine
   Klasse schreibt, macht ein `hidden`-Element unbemerkt wieder sichtbar. Genau
   das ist bei der KI-Leiste passiert, gefunden in T-019: Der Kopierknopf war
   ohne JavaScript sichtbar, obwohl er `hidden` trug. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* T-083 sichere Raender, Begruendung inc/kopf.php */
body{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
body{
  font-family:var(--and-font-sans);
  color:var(--and-ink-500);
  background:var(--and-bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  /* `clip`, nicht `hidden`. Der Unterschied ist hier entscheidend und nicht
     kosmetisch: `overflow-x:hidden` zwingt `overflow-y` auf `auto` und macht
     den Body damit zu einem eigenen Scrollbereich. Ein `position:sticky`
     darin haelt sich dann an diesem Bereich fest statt am Fenster und klebt
     nicht mehr. `clip` schneidet genauso ab, erzeugt aber keinen
     Scrollbereich. Ohne diese Zeile klebt der Kopfbereich aus 5a nicht. */
  overflow-x:clip;
  /* Ein einzelnes Wort, das breiter ist als das Fenster, schiebt sonst die
     ganze Seite auf. Auf `/home/datenschutz/` stehen ausgeschriebene Adressen
     im Fliesstext, die laengste ist 387 Pixel breit, und bei 320 Pixeln
     Fensterbreite rollte die Seite dadurch 91 Pixel waagerecht. Sichtbar war
     davon nichts, weil `overflow-x:clip` eine Zeile darueber abschneidet.
     Gefunden in T-032. `break-word` und nicht `anywhere`: Es greift erst, wenn
     das Wort allein nicht in eine Zeile passt, und laesst die Berechnung der
     Mindestbreite unveraendert. */
  overflow-wrap:break-word;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

.and-container{max-width:var(--and-container);margin-inline:auto;padding-inline:24px}
@media(min-width:1024px){.and-container{padding-inline:48px}}

/* Rasterspalten duerfen schmaler werden als ihr laengstes Wort.
   `grid-template-columns:1fr` heisst `minmax(auto,1fr)`, und `auto` als
   Mindestwert ist die Breite des laengsten unteilbaren Inhalts. Auf einem
   Fenster von 320 Pixeln zog deshalb die Ueberschrift "AND FiberManagement" die
   Spalte des Unterseitenkopfes auf 335 Pixel, und beide Spalten liefen ueber
   den Rand. Mit `min-width:0` darf die Spalte schrumpfen, und das
   `overflow-wrap:break-word` aus Abschnitt 2 bricht dann das Wort.
   Gefunden in T-032 auf sechs Produktseiten. */
.and-hero__grid > *,
.and-hero-sub__grid > *,
.and-feature > *,
.and-standort > *,
.and-teaser-paar > *,
.and-gitter > *,
.and-news > *{min-width:0}

/* =========================================================
   3. Typografie
   ========================================================= */
h1,h2,h3{color:var(--and-ink-700);letter-spacing:-.015em;font-weight:300}
h1{font-family:var(--and-font-display);font-size:clamp(40px,6.4vw,66px);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-.02em}
h3{font-size:21px;font-weight:500;line-height:1.25}

.and-lead{font-size:18px;color:var(--and-ink-500);max-width:60ch}
.and-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--and-green-700);margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;
}
.and-eyebrow::before{content:"";width:22px;height:2px;background:var(--and-grad);display:inline-block}
.and-grad-text{background:var(--and-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   4. Buttons
   ========================================================= */
/* Die Gestalt gilt fuer beides: eine gewoehnliche Schaltflaeche und den
   Kernblock `core/button`.

   **Warum die zweite Selektorreihe noetig ist.** Das Blockmarkup traegt die
   Themeklassen am Wrapper `.wp-block-button`, der Kern legt seine eigene Pille
   aber auf das innere `a.wp-block-button__link`. Ohne diese Zeilen liegt eine
   dunkle Pille des Kerns in einer gruenen Pille des Themes, und zwar auf jeder
   Schaltflaeche des Themes. Gefunden auf der Startseite in T-023, sichtbar nur
   im Screenshot: Es ist kein Gate gerissen, das Ding war schlicht haesslich. */
/* `white-space:nowrap` stand hier bis T-032 und war auf schmalen Fenstern ein
   Fehler. Die Beschriftungen kommen aus der Redaktion, und
   "Jetzt zum deutschen Webinar »Intelligente Clusterbildung« registrieren" ist
   564 Pixel breit. In einem Fenster von 320 Pixeln lief der Knopf 268 Pixel
   ueber den Rand hinaus. Ein Knopf, dessen Aufschrift nicht mehr ganz zu lesen
   ist, ist kein Knopf mehr.

   Die Zeile bricht jetzt um. `line-height` steigt dafuer von 1 auf 1.25, sonst
   klebten zwei Zeilen aufeinander, und die feste Mindesthoehe von 46 Pixeln
   bleibt, damit ein einzeiliger Knopf genauso aussieht wie vorher. Der
   Kontaktknopf im Kopfbereich behaelt sein `nowrap`, dort ist die Aufschrift
   fest und der Platz gerechnet. */
.and-btn,
.and-btn .wp-block-button__link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;padding:13px 22px;
  border-radius:var(--and-radius-btn);border:1.5px solid transparent;
  cursor:pointer;transition:.2s;min-height:46px;line-height:1.25;
  text-decoration:none;
}
.and-btn--primary,
.and-btn--primary .wp-block-button__link{background:var(--and-green);color:var(--and-auf-marke)}
.and-btn--primary:hover,
.and-btn--primary .wp-block-button__link:hover{background:var(--and-marke-aktiv);color:#fff;box-shadow:var(--and-shadow-raise)}
.and-btn--secondary,
.and-btn--secondary .wp-block-button__link{background:transparent;color:var(--and-ink-700);border-color:var(--and-ink-700)}
.and-btn--secondary:hover,
.and-btn--secondary .wp-block-button__link:hover{background:var(--and-flaeche-dunkel-aktiv);color:#fff}
/* Der Wrapper traegt danach nichts mehr, sonst waere die Pille doppelt.
   Hoehere Spezifitaet als die Regeln darueber, damit die Reihenfolge nicht
   zufaellig entscheidet. */
.wp-block-button.and-btn,
.wp-block-button.and-btn:hover{background:none;border:0;padding:0;min-height:0;gap:0;box-shadow:none}

/* =========================================================
   5. Sektionen
   ========================================================= */
.and-section{padding-block:80px}
@media(min-width:1024px){.and-section{padding-block:108px}}
.and-section--soft{background:var(--and-bg-soft)}

/* =========================================================
   5a. Kopfbereich
   ========================================================= */

/* Der Template-Part-Wrapper verschwindet aus dem Kasten-Modell.
   Grund, damit ihn niemand versehentlich entfernt: `position:sticky` haelt ein
   Element nur so lange fest, wie sein **Elternelement** sichtbar ist. Steckt
   der klebende Kopfbereich in einem Wrapper, der nur so hoch ist wie er selbst,
   scrollt er nach wenigen Pixeln mit weg und das Kleben sieht kaputt aus.
   `display:contents` loest den Wrapper auf, der Kopfbereich wird damit direktes
   Flusskind und klebt ueber die ganze Seite. Der Wrapper traegt keine Semantik,
   deshalb ist das hier unbedenklich. */
.and-kopfbereich{display:contents}

/* Der milchige Hintergrund liegt auf einem Pseudo-Element, nicht auf dem
   Kopfbereich selbst. Das ist kein Umweg, sondern die Loesung eines echten
   Fehlers, gefunden in T-019:

   **`backdrop-filter` macht das Element zum Bezugsrahmen fuer alles
   `position:fixed` darin.** Die mobile Navigation des Kernblocks ist genau das.
   Mit dem Filter direkt auf `.and-header` spannte sich die Schicht ueber die
   Hoehe des Kopfbereichs statt ueber das Fenster, und das Menue erschien als
   abgeschnittener Streifen. Dasselbe gilt fuer `filter` und `transform`, es ist
   also eine Falle, die man leicht wieder einbaut.

   Auf dem Pseudo-Element wirkt der Filter genauso, betrifft aber die
   Nachkommen des Kopfbereichs nicht. */
.and-header{
  position:sticky;top:0;z-index:60;
  background:transparent;
  padding-block:14px;
  /* Die Linie ist von Anfang an da und wechselt nur die Farbe. Wer sie erst
     beim Scrollen hinzufuegt, verschiebt das Layout um einen Pixel und zahlt
     das im CLS. */
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
/* `z-index:-1` bleibt im Kopfbereich gefangen, weil `position:sticky` mit
   `z-index` einen eigenen Stapelkontext aufmacht. Die Schicht rutscht also
   nicht hinter den Seitenhintergrund. */
.and-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
}
.and-header.is-gescrollt{border-bottom-color:var(--and-border);box-shadow:var(--and-shadow-rest)}
.and-header__inner{gap:32px}

.and-header__aktionen{gap:12px;flex-shrink:0}

/* Auf dem Telefon passt die Zeile sonst nicht. Gemessen bei 320 Pixeln in
   T-032: Logo 60, Zwischenraum 32, Aktionen 230, macht 322 in einem Fenster von
   320. Der Ueberlauf war unsichtbar, weil `body{overflow-x:clip}` ihn
   abschneidet, und genau deshalb hat ihn niemand gefunden.

   Der Kontaktknopf faellt unter 768 Pixeln weg, nicht weil kein Platz waere,
   sondern weil dort die klebende Leiste am unteren Rand steht und mit "Demo und
   Angebot" und "Frage stellen" dasselbe Ziel zweimal anbietet. Derselbe Knopf
   ein drittes Mal im Kopfbereich ist Gedraenge, kein Angebot. Der
   Sprachumschalter bleibt, CLAUDE.md 4c. */
@media(max-width:767px){
  .and-header__inner{gap:12px}
  .and-header__cta{display:none}
}

/* Logo. Die Hoehe steht hier, die Breite ergibt sich aus dem viewBox. Beides
   zusammen haelt das Seitenverhaeltnis fest, es gibt also keinen Sprung, wenn
   das Stylesheet spaeter greift als das Markup. */
.and-logo-link{display:inline-flex;align-items:center;flex-shrink:0}
.and-logo{height:34px;width:auto;display:block}
.and-logo__text{fill:var(--and-ink-700)}
.and-logo__swoosh{fill:var(--and-green)}
.and-header__cta{margin:0}
/* Dunkle Schrift auf Gruen, nicht weisse. So macht es auch der Prototyp
   (`.btn-primary{background:var(--green);color:var(--ink-900)}`), und es ist
   der einzige Weg, der WCAG AA haelt: Weiss auf `--and-green` ergibt 2,4:1 und
   reisst Gate 2. Belegt ueber axe, T-019. Selbst das dunklere
   `--and-green-700` kaeme mit Weiss nur auf 4,1:1. Dunkles Ink darauf ergibt
   6,8:1. */
.and-header__cta a{
  display:inline-flex;align-items:center;
  background:var(--and-green);color:var(--and-auf-marke);
  font-size:14px;font-weight:600;white-space:nowrap;
  padding:9px 18px;border-radius:var(--and-radius-btn);
}
.and-header__cta a:hover{background:#8CCB1D}

/* ---- KI-Leiste, oberste Zeile -------------------------------------------
   Sie klebt nicht. Im Prototyp scrollt sie weg und nur der Kopfbereich bleibt,
   und das ist auch das richtige Verhalten: Auf dem Telefon waeren zwei klebende
   Zeilen uebereinander rund 120 Pixel, die dauerhaft fehlen. */
.and-kileiste{border-bottom:1px solid var(--and-border);background:var(--and-bg)}
.and-kileiste__in{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block:11px;font-size:13.5px;
}
.and-kileiste__label{color:var(--and-ink-500);font-weight:500}
.and-kileiste__dienste{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.and-kileiste__meldung{color:var(--and-green-700);font-size:13px;font-weight:600}

/* Der Aufklapper, T-046 und E-05.

   **Das Problem, das er loest.** Am Telefon brachen die vier Schaltflaechen
   zweizeilig um und verdraengten oben genau das, wofuer der Besucher gekommen
   ist. Jetzt steht dort ein Schalter, eine Zeile, und der Rest kommt auf Wunsch.

   **Warum das ohne JavaScript geht.** `details` und `summary`. Aufklappen,
   Tastaturbedienung und die Zustandsansage macht der Browser. Auf dem
   Schreibtisch wird das `details` per CSS wieder geoeffnet.

   **Und warum `::details-content` und nicht `display`.** Gemessen in T-046 mit
   Chromium 151: `display:flex !important` am Inhalt eines geschlossenen
   `details` bewirkt nichts, `checkVisibility()` bleibt `false` und der erste
   Verweis ist nicht fokussierbar. Erst `::details-content` mit
   `content-visibility:visible` macht ihn sichtbar und bedienbar. Wer die Regel
   fuer ueberfluessig haelt, misst nach.

   Das `@supports` ist kein Zierrat. Kennt ein Browser `::details-content`
   nicht, wuerde die Regel `summary{display:none}` allein den Schalter
   verstecken, ohne den Inhalt zu zeigen: eine Leiste, die es gibt, die aber
   niemand oeffnen kann. Mit dem `@supports` bleibt in diesem Fall schlicht der
   Schalter stehen, auch auf dem Schreibtisch. Nicht das Bild des Entwurfs,
   aber bedienbar. */
.and-kileiste__klapp{width:100%}
.and-kileiste__schalter{list-style:none;user-select:none}
.and-kileiste__schalter::-webkit-details-marker{display:none}
.and-kileiste__schalter::marker{content:""}
.and-kileiste__pfeil{opacity:.6;flex-shrink:0;transition:transform .2s}
.and-kileiste__klapp[open] .and-kileiste__pfeil{transform:rotate(180deg)}
.and-kileiste__inhalt{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block:10px 2px;
}

@supports selector(::details-content){
  @media(min-width:768px){
    /* Zwei Klassen, nicht eine. `.and-chip` traegt `display:inline-flex` und
       steht weiter unten in dieser Datei, bei gleicher Spezifitaet gewinnt
       also die spaetere Regel. Der Schalter blieb damit auf dem Schreibtisch
       stehen und die Leiste zweizeilig. Gemessen von
       build-tools/pruefe-kileiste.js, nicht am Bildschirm geraten. */
    .and-kileiste .and-kileiste__schalter{display:none}
    .and-kileiste__klapp::details-content{content-visibility:visible;block-size:auto}
    .and-kileiste__inhalt{padding-block:0}
  }
}

/* Auf dem Telefon zaehlt jede Zeile ueber dem Inhalt. Die Beschriftung sagt
   nichts, was die Schaltflaechen nicht selbst zeigen, und der Kopierknopf tut
   in zwei Schritten, was die vier Verweise in einem tun. */
@media(max-width:767px){
  .and-kileiste__label{display:none}
  .and-kileiste__in{justify-content:flex-start;gap:8px}
  .and-kileiste .and-chip{font-size:12px;padding:5px 9px;gap:5px}
  .and-kileiste .and-chip--kopie{display:none}
  /* Der Schalter ist die Trefferflaeche. 44 Pixel sind die Untergrenze aus
     WCAG 2.5.8, und er steht ganz oben, wo man ihn beim Halten des Geraets
     mit dem Daumen streift. */
  .and-kileiste__schalter{min-height:44px;padding-block:11px}
  .and-kileiste__inhalt{gap:8px}
}

.and-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--and-bg);border:1px solid var(--and-border);color:var(--and-ink-700);
  border-radius:var(--and-radius-pill);padding:6px 14px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.and-chip:hover{border-color:var(--and-green);transform:translateY(-1px);box-shadow:var(--and-shadow-rest)}
.and-chip__punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Erkennungsfarben der vier Dienste. Rein schmueckend, sie tragen keine
   Information: Daneben steht immer der Name. Deshalb greift hier auch keine
   Kontrastanforderung, WCAG 1.4.3 gilt fuer Text. */
.and-chip--vibe       .and-chip__punkt{background:#FA520F}
.and-chip--chatgpt    .and-chip__punkt{background:#10A37F}
.and-chip--claude     .and-chip__punkt{background:#D97757}
.and-chip--perplexity .and-chip__punkt{background:#20808D}

/* ---- Hauptnavigation, ohne den Navigationsblock des Kerns ---------------
   Begruendung und Aufbau stehen in inc/navigation.php. Kurz: Der Kernblock
   kostete 62,5 KB, davon 39,2 KB Interactivity-API fuer nichts als das
   Aufklappen auf dem Telefon. Ersetzt durch `details` auf dem Schreibtisch und
   ein natives `dialog` auf dem Telefon. Gemessene Ersparnis siehe T-022.

   `.screen-reader-text` steht in Abschnitt 6, nicht hier. */
.and-nav{display:none;position:relative}
.and-nav__bar,.and-nav__liste,.and-menue__bereiche{list-style:none;margin:0;padding:0}
.and-nav__bar{display:flex;align-items:center;gap:2px}

/* Der Standardmarker faellt weg, der eigene Pfeil steht im Markup. Beide
   Schreibweisen sind noetig, `list-style` allein reicht WebKit nicht. */
.and-nav summary,.and-menue summary{list-style:none;cursor:pointer}
.and-nav summary::-webkit-details-marker,
.and-menue summary::-webkit-details-marker{display:none}
.and-nav summary::marker,.and-menue summary::marker{content:""}

.and-nav summary{
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  padding:10px 13px;font-size:15px;font-weight:500;color:var(--and-ink-700);
  border-radius:var(--and-radius-btn);
}
.and-nav summary:hover{color:var(--and-green-700);background:var(--and-bg-soft)}
/* Der Zweig, in dem die aktuelle Seite liegt. Nicht ueber die Farbe allein,
   das waere WCAG 1.4.1. Die Linie darunter traegt die Unterscheidung, das
   `aria-current` am Eintrag traegt sie fuer den Screenreader. */
.and-nav summary.is-im-zweig{color:var(--and-green-700);box-shadow:inset 0 -2px 0 var(--and-green)}
.and-nav__pfeil{opacity:.6;flex-shrink:0;transition:transform .2s}
.and-nav details[open] .and-nav__pfeil{transform:rotate(180deg)}

.and-nav__panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:230px;z-index:10;
  background:var(--and-bg);border:1px solid var(--and-border);
  border-radius:var(--and-radius-card);box-shadow:var(--and-shadow-raise);padding:8px;
}
.and-nav__bereich{position:relative}
/* Das Mega-Menue der Software spannt sich ueber die ganze Leiste. `static`
   macht den Bereich zum Nicht-Bezugsrahmen, das Panel richtet sich damit an
   `.and-nav` aus statt am eigenen Listenpunkt. */
.and-nav__bereich--breit{position:static}
/* Inhaltsbreit statt leistenbreit, sonst bricht "AND FiberManagement" um und
   die Spalten stehen unterschiedlich hoch. Mittig ueber der Leiste, damit das
   Panel auf schmalen Schreibtischen nicht ueber den Rand laeuft. */
.and-nav__bereich--breit .and-nav__panel{
  left:50%;right:auto;transform:translateX(-50%);
  width:max-content;max-width:min(960px,calc(100vw - 32px));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 20px;padding:18px 20px;
}
.and-nav__bereich--breit .and-nav__panel a,
.and-nav__spaltentitel{white-space:nowrap}
.and-nav__spaltentitel{
  margin:0 0 6px;padding:0 12px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--and-ink-500);
}
.and-nav__panel a{
  display:block;padding:9px 12px;font-size:14px;color:var(--and-ink-500);
  border-radius:6px;
}
.and-nav__panel a:hover{background:var(--and-green-50);color:var(--and-ink-700)}
.and-nav__panel a[aria-current]{color:var(--and-green-700);font-weight:600}

/* Ausloeser der Schicht. Ein Verweis, kein Knopf, damit er ohne JavaScript
   nicht tot ist. Siehe inc/navigation.php. */
.and-nav__ausloeser{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;color:var(--and-ink-700);
}

@media(min-width:1000px){
  .and-nav{display:block}
  .and-nav__ausloeser{display:none}
}

/* ---- Die Schicht auf dem Telefon ---------------------------------------
   Fokusfalle, Escape-Taste, das Stilllegen des Hintergrunds und das
   Zuruecksetzen des Fokus kommen von `showModal()`. Ohne JavaScript oeffnet
   `:target` dieselbe Schicht, dann ohne diese vier Eigenschaften, aber
   bedienbar. */
.and-menue{
  border:0;padding:0;margin:0 auto 0 0;max-width:none;max-height:none;
  width:min(88vw,380px);height:100dvh;background:var(--and-bg);color:var(--and-ink-700);
}
.and-menue::backdrop{background:rgba(15,34,48,.45)}
.and-menue__inhalt{height:100%;overflow-y:auto;padding:20px 20px 48px}
.and-menue__inhalt{display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(48px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
.and-menue__sprache{margin:4px 0 8px}
.and-menue__direkt{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:12px}
.and-menue__direkt-titel{margin:0;font:700 12px var(--and-font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--and-green-700)}
.and-menue__direkt .and-btn{justify-content:center;min-height:56px;font-size:16px}
.and-menue__direkt .and-btn--secondary{border:2px solid var(--and-ink-900);color:var(--and-ink-900)}
.and-menue__schliessen-form{margin:0}
.and-menue__schliessen,.and-menue__zurueck{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:auto;
  background:var(--and-bg-soft);border:0;border-radius:50%;
  color:var(--and-ink-700);cursor:pointer;
}
/* Genau eines der beiden Schliessmittel ist sichtbar. Mit JavaScript der Knopf
   im `form method="dialog"`, ohne JavaScript der Verweis auf `#oben`, der den
   `:target`-Zustand aufhebt. Der jeweils andere waere wirkungslos. */
.and-js .and-menue__zurueck,
html:not(.and-js) .and-menue__schliessen-form{display:none}

.and-menue__bereiche summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 4px;font-size:17px;font-weight:500;color:var(--and-ink-700);
  border-bottom:1px solid var(--and-border);
}
.and-menue__bereiche summary.is-im-zweig{color:var(--and-green-700)}
.and-menue details[open] .and-nav__pfeil{transform:rotate(180deg)}
/* In der Schicht ist das Panel eine gewoehnliche Liste. Die Regeln des
   Mega-Menues muessen ausdruecklich zurueckgenommen werden, `position:static`
   allein genuegt nicht: `transform` und `width:max-content` wirken auch auf
   ein statisches Element und schieben den Inhalt aus dem Bild. Genau das ist
   beim ersten Schuss passiert. */
.and-menue .and-nav__panel{
  position:static;transform:none;width:auto;max-width:none;min-width:0;
  border:0;box-shadow:none;border-radius:0;
  padding:4px 0 10px 14px;display:block;
}
.and-menue .and-nav__panel a,
.and-menue .and-nav__spaltentitel{white-space:normal}
.and-menue .and-nav__spaltentitel{padding:10px 0 0}
.and-menue .and-nav__panel a{padding:9px 0;font-size:15px}
@media(min-width:1000px){.and-menue{display:none}}
html:not(.and-js) .and-menue:target{
  display:block;position:fixed;top:0;left:0;z-index:120;box-shadow:var(--and-shadow-raise);
}

/* Sprachumschalter. Der Ersatzverweis, also der auf die Startseite statt auf
   die entsprechende Seite, ist unterscheidbar, aber nicht ueber die
   Textfarbe:
   1. `--and-ink-300` auf Weiss ergibt 3,09:1 und reisst damit WCAG AA. Belegt
      ueber axe in T-016, siehe auch B-014.
   2. Farbe allein als Unterscheidungsmerkmal verstoesst gegen WCAG 1.4.1.
   Unterschieden wird deshalb ueber die Linienart, dazu sagt der `title` und
   das `aria-label` im Klartext, wohin der Verweis fuehrt. */
.and-sprachwechsel{
  font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--and-ink-500);white-space:nowrap;
  padding:6px 12px;border:1px solid var(--and-border);border-radius:var(--and-radius-pill);
}
.and-sprachwechsel:hover{color:var(--and-ink-900);border-color:var(--and-ink-700)}
.and-sprachwechsel--ersatz{border-style:dashed}

/* =========================================================
   5a. Bereichsnavigation, die Ebene zwischen Hauptmenue und Inhalt
   Anlass E-01. Aufbau und Begruendung: inc/bereichsnavigation.php.
   ========================================================= */

/* Der Kasten ueber die volle Breite, der Inhalt darin auf Containerbreite.
   Genau wie der Kopfbereich, damit die untere Kante der Navigation und die
   Kante der Leiste eine gemeinsame Linie ergeben und nicht zwei. */
.and-subnav{
  background:var(--and-bg-soft);
  border-bottom:1px solid var(--and-border);
}
.and-subnav__inner{
  max-width:var(--and-container);
  margin-inline:auto;
  padding-inline:var(--wp--style--root--padding-left,24px);
}

/* Der scrollende Kasten.

   `overflow-x:auto` ist die ganze Bedienung: Finger, Mausrad, Tastatur und
   Bildlaufleiste kommen vom Browser. Ohne eine Zeile JavaScript. Die zwei
   Pfeilknoepfe aus main.js sind Bequemlichkeit, kein Traeger.

   `scrollbar-width:none` blendet die Leiste aus, nicht das Scrollen. Auf
   Zeigergeraeten ohne Rad bleibt sie sonst dauerhaft sichtbar und schneidet
   drei Pixel vom Kasten ab.

   `scroll-padding-inline` sorgt dafuer, dass ein Eintrag, den die Tastatur
   anfaehrt, nicht am Rand klebt, sondern mit Abstand hereinkommt. */
.and-subnav__wrap{position:relative;min-width:0}
.and-subnav__track{
  display:flex;align-items:center;gap:18px;
  overflow-x:auto;overscroll-behavior-inline:contain;
  scrollbar-width:none;
  scroll-padding-inline:36px;
  padding-block:10px;
}
.and-subnav__track::-webkit-scrollbar{display:none}

/* Anschnitt am rechten Rand, T-044. Begruendung: docs/style-begruendungen.md */
.and-subnav__track{
  --and-subnav-links:0px;
  --and-subnav-rechts:34px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--and-subnav-links),#000 calc(100% - var(--and-subnav-rechts)),transparent);
          mask-image:linear-gradient(to right,transparent,#000 var(--and-subnav-links),#000 calc(100% - var(--and-subnav-rechts)),transparent);
}
/* Die zwei Werte setzt `assets/js/main.js` um, sobald gescrollt wurde: Die
   weiche Kante gehoert an die Seite, an der es weitergeht, und verschwindet
   am Ende. Ohne JavaScript bleiben die Vorgaben stehen, also rechts eine
   Kante und links keine. Das ist der Zustand beim Aufschlagen der Seite und
   damit der richtige, denn dort steht die Leiste am linken Anschlag. */

/* Platz fuer die Pfeilknoepfe, aber nur wenn es sie gibt. Die Klasse setzt
   main.js. Ohne sie laege der linke Knopf auf dem ersten Eintrag, gesehen an
   der Gruppenbeschriftung "AND CLIENTS" der Softwareleiste. */
@media not all and (pointer:coarse){.and-subnav__wrap--pfeile .and-subnav__track{padding-inline:38px}}
/* Wer die Leiste ausdruckt, braucht keinen Scrollhinweis, und ein
   ausgeblendeter letzter Eintrag waere auf Papier schlicht weg. */
@media print{
  .and-subnav__track{-webkit-mask-image:none;mask-image:none;overflow:visible;flex-wrap:wrap}
}

.and-subnav__liste{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:8px;
}

/* ---- Kategorie-Pills --------------------------------------------------- */
.and-subnav__pill{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 16px;
  /* 40px Hoehe. Auf dem Telefon werden daraus 44px, siehe unten. Die
     Trefferflaeche ist Bedingung 3 und die Vorstufe zu E-07. */
  min-height:40px;
  border:1px solid var(--and-border);border-radius:var(--and-radius-pill);
  background:var(--and-bg);
  color:var(--and-ink-500);font-size:13.5px;font-weight:600;
  transition:border-color .18s,color .18s,background-color .18s;
}
.and-subnav__pill:hover{border-color:var(--and-green);color:var(--and-green-700)}
/* Der aktive Eintrag traegt zusaetzlich `aria-current="page"`, Bedingung 4.
   Die Farbe allein duerfte ihn nicht tragen, WCAG 1.4.1. Sie tut es auch
   nicht: Flaeche, Rahmen und Schriftschnitt aendern sich mit.

   **Dunkles Ink auf Lime, nicht Weiss.** Der Entwurf zeigt weisse Schrift auf
   dem Lime. Gemessen sind das 2,4:1, und damit reisst die aktive Pille Gate 2.
   Zuerst gebaut, dann von axe gemeldet, hier steht die Korrektur. Dunkles Ink
   auf demselben Lime ergibt 6,8:1 und laesst die Flaeche, die den Entwurf
   ausmacht, unveraendert. Es ist ausserdem keine neue Erfindung: Die
   Hauptschaltflaeche `.and-btn--primary` macht es seit T-019 genauso. */
.and-subnav__pill.is-aktiv{
  background:var(--and-green);border-color:var(--and-green);
  color:var(--and-ink-900);font-weight:700;
}
.and-subnav__icon{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.and-subnav__pill .and-subnav__icon{color:var(--and-green-700)}
.and-subnav__pill.is-aktiv .and-subnav__icon{color:var(--and-ink-900)}

/* Die Gruppen des Software-Menues. Beschriftung, kein Verweis, siehe F-003.

   Seit T-051 steht der Gruppenname als Anreisser links neben der Leiste statt
   inline davor, in derselben Form wie beim Prozess-Stepper. Die Leiste zeigt
   nur noch die Gruppe der aktuellen Seite, nicht mehr alle siebzehn Eintraege.
   Die Begruendung mit den gemessenen Zahlen steht in inc/bereichsnavigation.php. */
.and-subnav__gruppe{display:flex;align-items:center;gap:10px}
.and-subnav__gruppentitel{
  white-space:nowrap;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--and-ink-500);
}

/* Der Bereich mit Gruppen bekommt dasselbe zweiteilige Gerüst wie der Stepper:
   Anreisser links, Leiste rechts. Ohne diese Regel stuende der Anreisser ueber
   der Leiste und die Zeile waere doppelt so hoch, und genau diese Hoehe geht
   dem Anschnitt der ersten Karte ab, siehe T-050. */
.and-subnav--gruppe .and-subnav__inner{display:flex;align-items:center;gap:22px}
.and-subnav--gruppe .and-subnav__lead{flex:0 0 auto}
.and-subnav--gruppe .and-subnav__wrap{flex:1 1 auto;min-width:0}
@media(max-width:899px){
  /* **Am Telefon faellt der Gruppenname weg, und das ist eine Abwaegung mit
     Zahlen.** Untereinander gestellt kostet er eine Zeile von 27 Pixeln. Diese
     27 Pixel gehen dem Anschnitt der ersten Karte ab, und der Anschnitt ist die
     Bedingung, die Eric am 01.09.2026 bestaetigt hat. Gemessen auf der
     Softwareuebersicht bei 390 Pixeln: mit Anreisser 29 Pixel Anschnitt, ohne
     ihn 56.

     Was verloren geht, ist Beiwerk: Der Gruppenname steht als Beschriftung an
     der Liste weiterhin im Barrierefreiheitsbaum, `aria-labelledby` bleibt.
     Sichtbar fehlt er, und die Pillen selbst sagen ohnehin, worum es geht. */
  .and-subnav--gruppe .and-subnav__lead{display:none}
}

/* ---- Prozess-Stepper, nur der Life-cycle -------------------------------- */
.and-subnav--schritte .and-subnav__inner{
  display:flex;align-items:center;gap:22px;
}
.and-subnav__lead{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.and-subnav__uebersicht{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--and-ink-500);
}
.and-subnav__uebersicht:hover{color:var(--and-green-700)}
.and-subnav__uebersicht.is-aktiv{color:var(--and-green-700);font-weight:700}
.and-subnav__eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--and-ink-500);white-space:nowrap;
}
.and-subnav--schritte .and-subnav__wrap{flex:1 1 auto;min-width:0}

.and-subnav__liste--schritte{
  gap:0;
  /* Gleich breite Spalten, damit die Verbindungslinie zwischen zwei Knoten
     immer dieselbe Laenge hat. Mit `flex` und unterschiedlich langen
     Beschriftungen waere sie mal kurz, mal lang, und die Kette saehe aus wie
     ein Fehler. */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);
}
.and-subnav__schritt{position:relative}
.and-subnav__schritt a{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;padding:4px 6px;color:var(--and-ink-500);
}
/* Die durchgehende Linie. Sie ist Schmuck und traegt keine Information, den
   Ablauf traegt die Reihenfolge der Liste. Deshalb ein Pseudo-Element und
   nichts im Markup. */
.and-subnav__schritt::before{
  content:"";position:absolute;top:26px;right:50%;
  width:100%;height:2px;background:var(--and-border);z-index:0;
}
.and-subnav__schritt:first-child::before{display:none}
.and-subnav__knoten{
  position:relative;z-index:1;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--and-bg);border:2px solid var(--and-border);
  color:var(--and-ink-300);
  transition:border-color .2s,color .2s,background-color .2s;
}
.and-subnav__knoten .and-subnav__icon{width:19px;height:19px}
.and-subnav__label{
  font-size:11.5px;font-weight:600;line-height:1.25;
  color:var(--and-ink-500);
  /* Kein `nowrap`: "Betriebsunterstuetzung" ist laenger als jede vertretbare
     Spaltenbreite. Sie darf umbrechen, die Kette bleibt dabei gerade, weil
     die Knoten oben ausgerichtet sind. */
}
.and-subnav__schritt a:hover .and-subnav__knoten{border-color:var(--and-green);color:var(--and-green-700)}
.and-subnav__schritt a:hover .and-subnav__label{color:var(--and-green-700)}
/* Dasselbe wie bei der Pille, und aus demselben Grund. Ein Symbol ist kein
   Text, axe misst es deshalb nicht, WCAG 1.4.11 verlangt aber auch fuer
   grafische Elemente 3:1. Weiss auf Lime waere mit 2,4:1 auch dort zu wenig. */
.and-subnav__schritt.is-aktiv .and-subnav__knoten{
  background:var(--and-green);border-color:var(--and-green);color:var(--and-auf-marke);
}
.and-subnav__schritt.is-aktiv .and-subnav__label{color:var(--and-green-700);font-weight:700}

/* ---- Die zwei Pfeilknoepfe ---------------------------------------------
   Sie entstehen in assets/js/main.js und stehen deshalb nicht im Markup. Ohne
   JavaScript gibt es sie nicht, und die Leiste bleibt trotzdem bedienbar. Das
   ist der Unterschied zwischen einer Verbesserung und einem Traeger. */
.and-subnav__pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--and-border);background:var(--and-bg);
  color:var(--and-ink-700);cursor:pointer;
  box-shadow:var(--and-shadow-rest);
}
.and-subnav__pfeil:hover{border-color:var(--and-green);color:var(--and-green-700)}
.and-subnav__pfeil--links{left:-6px}
.and-subnav__pfeil--rechts{right:-6px}
.and-subnav__pfeil[hidden]{display:none!important}
.and-subnav__pfeil svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
/* B-051: Pfeile am Eingabegeraet, nicht an der Breite */
@media(pointer:coarse){
  .and-subnav__track{scroll-snap-type:inline proximity}
  .and-subnav__pill,.and-subnav__schritt{scroll-snap-align:center}
}

/* T-083: auf Touch Pfeile, Verlauf und Zaehler; Zustaende aus main.js */
@media(pointer:coarse){
  .and-subnav__pfeil{width:44px;height:44px;z-index:3}
  .and-subnav__pfeil svg{width:18px;height:18px}
  .and-subnav__pfeil--links{left:-8px}
  .and-subnav__pfeil--rechts{right:-8px}
  .and-subnav__wrap::before,.and-subnav__wrap::after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}
  .and-subnav__wrap::before{left:0;background:linear-gradient(to right,var(--and-bg-soft) 35%,transparent)}
  .and-subnav__wrap::after{right:0;background:linear-gradient(to left,var(--and-bg-soft) 35%,transparent)}
  .and-subnav__wrap--links::before,.and-subnav__wrap--rechts::after{opacity:1}
  .and-subnav__zaehler{margin-left:auto;font-size:12px;font-weight:600;white-space:nowrap;color:var(--and-ink-500)}
}
@media not all and (pointer:coarse){.and-subnav__zaehler{display:none}}

/* ---- Telefon ------------------------------------------------------------ */
@media(max-width:700px){
  /* 44px Trefferflaeche, die Untergrenze aus WCAG 2.5.8. E-07 verlangt fuer
     die Formularfelder 48px, das ist die strengere Vorgabe und steht dort. */
  .and-subnav__pill{min-height:44px;padding-block:11px}
  .and-subnav__track{gap:14px}
  /* Der Stepper bricht in zwei Zeilen: erst die Bereichszeile, darunter die
     Kette. Nebeneinander bliebe fuer die Kette weniger als die Breite eines
     einzigen Schrittes. */
  .and-subnav--schritte .and-subnav__inner{flex-direction:column;align-items:stretch;gap:8px}
  .and-subnav__lead{flex-direction:row;align-items:center;gap:10px}
}

/* =========================================================
   5b. Brotkrumenpfad
   Ersetzt den globalen Avada-Baustein 118, der auf 58 Seiten lag.
   ========================================================= */
.and-crumb{font-size:13px;margin-bottom:26px}
.and-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.and-crumb li{display:flex;align-items:center;gap:8px}
.and-crumb li+li::before{content:"\203A";opacity:.5}
.and-crumb a{text-decoration:underline;text-underline-offset:3px}
.and-crumb [aria-current="page"]{opacity:.75}

/* =========================================================
   5c. Sektion: Kopf einer Unterseite
   Dunkel, mit Farbverlauf, nach AND_vorplanung_v1.html.
   ========================================================= */
.and-hero-sub{
  position:relative;overflow:hidden;
  padding-block:60px 56px;
  background:#0A0E13;color:rgba(255,255,255,.78);
}
.and-hero-sub::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 480px at 12% -10%,rgba(124,184,23,.30),transparent 60%),
    radial-gradient(680px 480px at 92% 6%,rgba(22,180,199,.22),transparent 60%);
}
.and-hero-sub>*{position:relative}
.and-hero-sub .and-eyebrow{color:#A6E04B}
.and-hero-sub .and-eyebrow::before{background:#A6E04B}
.and-hero-sub h1{color:#fff;margin-bottom:20px}
.and-hero-sub .and-lead{color:rgba(255,255,255,.78);font-size:18px}
.and-hero-sub .and-crumb{color:rgba(255,255,255,.62)}
.and-hero-sub .and-crumb a{color:rgba(255,255,255,.86)}
.and-hero-sub .and-crumb a:hover{color:#A6E04B}
.and-hero-sub__claim{
  font-size:clamp(18px,2.2vw,22px);font-weight:500;line-height:1.4;
  color:#fff;margin-bottom:16px;max-width:48ch;
}
/* B-058: start, damit Text und Bild an der Containerkante beginnen. Entschieden von Eric am 15.09. */
.and-hero-sub__grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media(min-width:900px){.and-hero-sub__grid{grid-template-columns:1.04fr .96fr}}
.and-hero-sub__art img{
  display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}


/* ---- Kopf einer Bereichsuebersicht, T-045 -------------------------------
   Anlass E-02: zu niedrig, Text auf halber Breite, rechte Haelfte leer.

   **Die Bedingung, die ueber allem steht:** Die erste Inhaltskarte muss
   angeschnitten sichtbar bleiben. Ein bildschirmfuellender Kopf zeigt auf einer
   Uebersichtsseite eine Ueberschrift und sonst nichts, obwohl die Karten der
   Zweck der Seite sind. Deshalb `min-height` und nicht `height`, und deshalb
   ein Wert, der beides einhaelt: grosszuegig, aber nicht bis zur Kante.

   Gemessen wird das nicht hier, sondern von `build-tools/miss-kopfbereich.js`
   bei 1440 und bei 390 Pixeln. Eine Zusicherung im Kommentar ist kein Messwert,
   CLAUDE.md 3a. */
.and-hero-sub--bereich{padding-block:64px 60px}

/* Der Text bleibt schmal. Die Aufgabe sagt das ausdruecklich: Die Leere rechts
   wird gefuellt, nicht der Text verbreitert. 68 Zeichen liegen im Korridor der
   gut lesbaren Zeilenlaenge und unter der Obergrenze von etwa 75. */
.and-hero-sub--bereich .and-lead{max-width:68ch}

@media(min-width:900px){
  .and-hero-sub--bereich{
    /* 56 Prozent der Fensterhoehe, gedeckelt. Ohne den Deckel waechst der Kopf
       auf einem hohen Bildschirm weiter, waehrend die Karten darunter gleich
       gross bleiben, und der Anschnitt geht verloren. */
    min-height:min(56vh,520px);
    display:flex;align-items:center;
    padding-block:56px;
  }
  .and-hero-sub--bereich>.wp-block-group,
  .and-hero-sub--bereich>.and-hero-sub__grid{width:100%}
  .and-hero-sub--bereich .and-hero-sub__grid{
    grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  }
}

/* Die Grafik. Sie steht in der zweiten Spalte und traegt keine Information,
   siehe inc/bereichsgrafik.php. */
.and-hero-sub__grafik{display:none}
@media(min-width:900px){
  .and-hero-sub__grafik{display:block}
}
.and-grafik{display:block;width:100%;height:auto;max-height:380px;overflow:visible}
.and-grafik__linien{
  fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.1;
}
.and-grafik__zweig{fill:var(--and-green)}
.and-grafik__verteiler{fill:var(--and-teal);opacity:.85}
.and-grafik__wurzel{fill:#fff;opacity:.92}
.and-grafik__ring{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
.and-grafik__ebene{stroke:rgba(255,255,255,.10);stroke-width:1}
.and-grafik__hof{fill:rgba(124,184,23,.14)}

/* Auf dem Telefon faellt die Grafik weg, nicht der Kopf. Zwei Gruende, beide
   messbar: Unter der Ueberschrift und dem Anleser blieben ihr rund 140 Pixel,
   in denen sie zu einem Fleck wird, und sie schiebt die erste Karte unter die
   Fensterkante. Die Bedingung aus der Aufgabe waere damit gerissen, und zwar
   genau auf dem Geraet, auf dem die meisten Besucher ankommen. */
@media(max-width:899px){
  /* Enger als auf dem Schreibtisch, und das ist keine Kosmetik, sondern die
     Bedingung der Aufgabe. Gerechnet bei 390 mal 844 Pixeln: Der Kopf endete
     bei y=767, die erste Karte begann bei y=847, und die klebende
     Schnellkontakt-Leiste nimmt die untersten 49 Pixel. Vom Kartenraster war
     damit nichts zu sehen. 34 Pixel weniger Innenabstand im Kopf und 48 Pixel
     weniger Aussenabstand darunter holen die Karte um 82 Pixel herauf.
     Nachgemessen mit build-tools/miss-kopfbereich.js. */
  .and-hero-sub--bereich{padding-block:24px 26px}
  .and-hero-sub--bereich+.and-section{padding-top:32px}
}

/* =========================================================
   5d. Sektion: Anleser
   ========================================================= */
.and-anleser{max-width:820px}
.and-anleser h2{margin-bottom:14px}

/* =========================================================
   5e. Sektion: Fliesstext
   ========================================================= */
.and-prosa{max-width:820px}
.and-prosa p{font-size:16.5px;line-height:1.75;margin:0 0 20px}
.and-prosa figure{margin:34px 0}
.and-prosa img{
  display:block;width:100%;height:auto;
  border-radius:var(--and-radius-card);border:1px solid var(--and-border);
}
.and-prosa figcaption{font-size:13px;color:var(--and-ink-300);margin-top:10px}

/* =========================================================
   5f. Sektion: Bildband ueber die volle Breite
   ========================================================= */
.and-bildband{padding-block:0}
/* Hoehe und Anschnitt sind gemessen. Begruendung und Messwerte: B-053, die
   Nachbesserung B-055 in worker/BUG_QUEUE.md. Zwei Groessen haengen zusammen:
   Eine feste Hoehengrenze macht das Band auf breiten Fenstern flacher, und je
   flacher es wird, desto mehr schneidet `cover` vom Motiv weg. `clamp` haelt das
   Verhaeltnis ab 1920px deshalb bei etwa 4:1, statt es weiter fallen zu lassen.
   Wer einen dieser Werte aendert, prueft wieder alle 43 Motive im flachsten
   Verhaeltnis, das dabei entsteht, nicht im guenstigsten. Genau dieser Fehler
   war B-055. */
.and-bildband img{
  display:block;width:100%;height:auto;
  aspect-ratio:2560/950;max-height:clamp(480px,25vw,620px);
  object-fit:cover;
  object-position:center var(--and-band-fokus,32%);
}
/* Drei Motive vertragen den Standardwert bei 4:1 nicht. Belegt an gerenderten
   Ausschnitten, nicht geschaetzt: Ohne diese Zeilen fehlen der Person auf der
   Netzbetreiber-Seite die Augen, den beiden Personen auf der Beratungsseite die
   Koepfe, und von der Ortschaft bei den Planungsbueros bleibt nur Himmel.
   Haengt am Dateinamen: Tauscht die Redaktion das Bild, gilt wieder 32%. */
.and-bildband img[src*="and-nutzer-netzbetreiber-wie-der-digitale"]{--and-band-fokus:20%}
.and-bildband img[src*="and-beratung-ausfuehrliche-beratung"]{--and-band-fokus:20%}
.and-bildband img[src*="and-nutzergruppen-planungsbueros"]{--and-band-fokus:72%}
@media(max-width:780px){.and-bildband img{aspect-ratio:16/9;max-height:300px}}

/* =========================================================
   5g. Hakenliste
   ========================================================= */
.and-hakenliste{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px}
.and-hakenliste li{position:relative;padding-left:32px;line-height:1.6}
.and-hakenliste li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:18px;height:18px;border-radius:50%;
  background:var(--and-green-50);
}
.and-hakenliste li::after{
  content:"";position:absolute;left:5px;top:.62em;
  width:9px;height:5px;border-left:2px solid var(--and-green-700);
  border-bottom:2px solid var(--and-green-700);transform:rotate(-45deg);
}

/* =========================================================
   5h. Abschlussband mit Verweis
   Ersetzt den globalen Avada-Baustein 73, der auf 56 Seiten lag.
   ========================================================= */
/* Die einzelne Aktionsbox, E-08.

   **Linksbuendig, nicht zentriert.** Vorher standen Ueberschrift und Fliesstext
   zentriert und der Knopf linksbuendig. Das liest sich als Versehen, weil es
   eines war. Da die uebrige Seite linksbuendig ist, wird es auch diese Box.
   Entschieden von Eric am 01.09.2026.

   **Zum Kontrast, R-02.** Die Vermutung war, der hellere Fliesstext koenne am
   tuerkisen Ende des Verlaufs unter 4,5:1 fallen. Gemessen mit
   `build-tools/pruefe-aktionsflaechen.js` an **beiden Enden**, nicht in der
   Mitte, und mit der Deckkraft von 0,86 verrechnet:
   am gruenen Ende **5,32:1**, am tuerkisen **5,10:1**. Beide ueber 4,5.
   **Die Textfarbe bleibt deshalb, wie sie ist.** Die Vermutung hat sich nicht
   bestaetigt, und das ist auch ein Ergebnis. */
.and-band{
  background:linear-gradient(120deg,var(--and-green),var(--and-teal));
  border-radius:24px;padding:52px 44px;text-align:left;color:var(--and-ink-900);
}
.and-band h2{color:var(--and-ink-900);margin-bottom:12px}
/* B-050: gegen margin-inline:auto!important aus dem constrained-Layout */
.and-band>:is(h2,p,.wp-block-buttons){margin-inline:0!important}
.and-band .wp-block-buttons.is-layout-flex{justify-content:flex-start}
.and-band p{color:rgba(15,34,48,.86);font-size:18px;max-width:60ch;margin:0 0 26px}
.and-band .and-btn,
.and-band .and-btn .wp-block-button__link{background:var(--and-flaeche-dunkel);color:#fff;border-color:var(--and-flaeche-dunkel)}
.and-band .and-btn:hover,
.and-band .and-btn .wp-block-button__link:hover{background:var(--and-flaeche-dunkel-aktiv);border-color:var(--and-flaeche-dunkel-aktiv)}
@media(max-width:560px){
  .and-band{padding:36px 24px}
  /* Am Telefon ueber die volle Breite der Box. Hier ist es richtig, denn es ist
     **eine** Aktion. Fuer Karten in einem Raster waere dieselbe Regel falsch,
     siehe die Begruendung weiter unten bei `.and-teaser`. */
  .and-band .wp-block-buttons{display:block}
  .and-band .and-btn,
  .and-band .and-btn .wp-block-button__link{display:block;width:100%;text-align:center}
}

/* =========================================================
   5i. Kontaktformular
   ========================================================= */
.and-kontakt{max-width:680px}
.and-kontakt__form{display:grid;gap:20px}
.and-kontakt__reihe{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:600px){.and-kontakt__reihe{grid-template-columns:1fr 1fr}}
.and-kontakt__feld{display:grid;gap:7px}
.and-kontakt__feld label{font-size:14px;font-weight:600;color:var(--and-ink-700)}
/* Zwei Masse aus E-07, und beide sind Zahlen, keine Geschmacksfrage.

   **16 Pixel Schriftgroesse.** Darunter zoomt iOS beim Antippen automatisch in
   das Feld hinein, und danach muss der Besucher seitwaerts scrollen, um das
   Formular ueberhaupt noch zu sehen. Der Wert stand hier schon vor T-047.

   **48 Pixel Hoehe.** Der Wert stand hier nicht. Gemessen ergaben Polsterung,
   Schrift und Rahmen zusammen 46 Pixel, beim Absendeknopf 47. Beides knapp
   darunter und beides unsichtbar, solange niemand nachmisst. `min-height` statt
   mehr Polsterung: So steht die Zahl aus der Aufgabe im Code, und wer sie
   spaeter sucht, findet sie. Nachpruefbar mit
   `node build-tools/pruefe-formular.js`. */
.and-kontakt__feld input,
.and-kontakt__feld select,
.and-kontakt__feld textarea{
  font-family:inherit;font-size:16px;color:var(--and-ink-700);
  padding:12px 14px;border:1px solid var(--and-border);
  border-radius:var(--and-radius-btn);background:var(--and-bg);width:100%;
  min-height:48px;
}
.and-kontakt__feld textarea{resize:vertical;min-height:140px;line-height:1.6}
.and-kontakt button[type="submit"]{min-height:48px}

/* Die Breite eines Feldes ist ein stummer Hinweis darauf, wieviel erwartet
   wird. Ein Nachrichtenfeld ueber die volle Breite laedt zum Schreiben ein,
   ein E-Mail-Feld ueber die volle Breite wirkt nur unaufgeraeumt.

   Deshalb bekommen die kurzen Felder dieselbe Breite wie eine Spalte der Reihe
   aus Name und Unternehmen. Das Formular liest sich damit als Rhythmus, nicht
   als Stapel unterschiedlich langer Balken. **Nur auf dem Schreibtisch:** Am
   Telefon steht ohnehin alles einspaltig ueber die volle Breite, dort waere
   eine Begrenzung sinnlos. */
@media(min-width:600px){
  .and-kontakt__feld > select,
  .and-kontakt__feld > input[type="email"]{max-width:330px}
}
.and-kontakt__feld input:focus-visible,
.and-kontakt__feld select:focus-visible,
.and-kontakt__feld textarea:focus-visible{
  outline:2px solid var(--and-green-700);outline-offset:1px;border-color:var(--and-green-700);
}
.and-kontakt__feld [aria-invalid="true"]{border-color:#B3261E}
.and-kontakt__pflicht{color:#B3261E}
.and-kontakt__pflichtnote{font-size:13px;color:var(--and-ink-500);margin:0}
.and-kontakt__fehler{font-size:13px;color:#B3261E;margin:0}
.and-kontakt__hinweis{
  padding:14px 18px;border-radius:var(--and-radius-btn);
  font-size:15px;margin-bottom:24px;border-left:3px solid;
}
.and-kontakt__hinweis--gut{background:var(--and-green-50);border-color:var(--and-green-700);color:var(--and-ink-700)}
.and-kontakt__hinweis--schlecht{background:#FDECEA;border-color:#B3261E;color:#5F1512}
.and-kontakt button[type="submit"]{justify-self:start}

/* Honigtopf. Nicht display:none, darauf pruefen manche Bots. Stattdessen aus
   dem sichtbaren Bereich geschoben, dazu tabindex -1 und aria-hidden im
   Markup, damit weder Tastatur noch Screenreader ihn erreichen. */
.and-kontakt__topf{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}

/* =========================================================
   5i-2. Video-Vorschaufassung
   Aufbau und Begruendung: inc/videovorschau.php.
   Kurz: Das Standbild liegt lokal, YouTube wird erst nach dem Klick geladen.
   Vor dem Klick geht keine Anfrage an eine fremde Domain, Gate 5 bleibt heil.
   ========================================================= */
.and-video{
  position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--and-radius-card);background:var(--and-flaeche-dunkel);
}
.and-video__bild{display:block;width:100%;height:100%;object-fit:cover}

/* Der Ausloeser liegt ueber dem ganzen Bild. Ein Knopf von 88 Pixeln in der
   Mitte waere die kleinere Trefferflaeche, und das Bild sieht ohnehin aus wie
   ein Video, also klickt man irgendwohin. Dieselbe Ueberlegung wie bei den
   Karten in T-049. */
.and-video__ausloeser{
  position:absolute;inset:0;display:grid;place-items:center;
}
.and-video__knopf{
  display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  background:var(--and-green);
  transition:transform .18s ease,background-color .18s ease;
}
/* Das Dreieck ist ein Rahmen-Trick, kein Bild und kein Schriftzeichen: Es
   braucht keine Datei und keine Schrift, die fehlen koennte. `aria-hidden`
   steht am Traeger, der zugaengliche Name haengt am Verweis. */
.and-video__knopf::before{
  content:"";display:block;width:0;height:0;margin-left:6px;
  border-left:26px solid var(--and-flaeche-dunkel);
  border-top:16px solid transparent;border-bottom:16px solid transparent;
}
.and-video__ausloeser:hover .and-video__knopf{transform:scale(1.06);background:#fff}
.and-video__ausloeser:focus-visible{outline:3px solid var(--and-green);outline-offset:-3px}
.and-video__ausloeser:focus-visible .and-video__knopf{transform:scale(1.06);background:#fff}

/* Die Beschriftung liegt ueber dem Bild und faengt keine Klicks ab. Ohne
   `pointer-events:none` waere der untere Rand des Bildes tot, und zwar genau
   dort, wo der Titel steht. */
.and-video__cap{
  position:absolute;left:0;right:0;bottom:0;padding:28px 32px;
  display:grid;gap:4px;color:#fff;pointer-events:none;
  background:linear-gradient(to top,rgba(15,34,48,.82),rgba(15,34,48,0));
}
.and-video__titel{
  font-family:var(--and-font-display);font-weight:400;
  font-size:clamp(20px,2.6vw,30px);line-height:1.15;letter-spacing:-.01em;
}
.and-video__hinweis{font-size:clamp(13px,1.3vw,15px);color:rgba(255,255,255,.82)}

@media(max-width:560px){
  .and-video__cap{padding:18px 20px}
  .and-video__knopf{width:64px;height:64px}
  .and-video__knopf::before{border-left-width:20px;border-top-width:12px;border-bottom-width:12px}
}

/* Ist das Video geladen, fuellt der Rahmen den Kasten. */
.and-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =========================================================
   5j. Hinweis in Testumgebungen
   ========================================================= */
.and-testumgebung{
  margin:0;padding:8px 16px;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  background:var(--and-flaeche-dunkel);color:#fff;
}
/* Auf schmalen Fenstern brach der Satz auf zwei Zeilen um und das Band wurde
   58 Pixel hoch. Das ist mehr, als der Anschnitt der ersten Karte am Telefon
   ueberhaupt zur Verfuegung hat, gemessen in T-050.

   **Das Band gibt es auf Staging und Live nicht**, siehe `inc/staging.php`; die
   Messung rechnet es deshalb heraus. Wer aber auf der Testinstanz durch die
   Seiten geht, und genau das tut Eric, sieht diese 58 Pixel und damit ein
   Telefonbild, das es so nie geben wird. Deshalb hier kleiner, nicht in der
   Messung geschoent: eine Zeile statt zwei. */
@media(max-width:560px){
  .and-testumgebung{padding:6px 12px;font-size:11px;letter-spacing:0}
}

/* =========================================================
   5k. Fussbereich
   Aufbau nach AND_prototyp_v3.html, Zeile 599 bis 618.
   ========================================================= */
/* T-068 */
.and-mitgliedschaften{background:var(--and-bg-soft);border-top:1px solid var(--and-border);padding:22px 24px}
.and-mitgliedschaften__innen,.and-mitgliedschaften ul{display:flex;flex-wrap:wrap;align-items:center;gap:12px 48px}
.and-mitgliedschaften h2{color:var(--and-ink-500);margin:0}
.and-mitgliedschaften ul{gap:8px 12px;list-style:none;margin:0;padding:0}
.and-mitgliedschaften a{--h:min(60px,13.4vw);display:block;opacity:.9;transition:.2s}
.and-mitgliedschaften a:is(:hover,:focus-visible){opacity:1;translate:0 -2px}
.and-mitgliedschaften img{height:calc(var(--h)*var(--f,1));width:auto;display:block}
a.is-hoch{--f:1.25}
a.is-scte{--f:1.4}

/* Seitenabstand ausdruecklich hier, nicht ueber die globale Polsterung des
   Blocklayouts. Auf schmalen Bildschirmen ist die Inhaltsbreite groesser als
   das Fenster, dann bleibt von der Zentrierung nichts uebrig und der Text
   klebte am linken Rand. Gefunden in T-020. Werte wie in `.and-container`. */
.and-fusszeile{
  background:var(--and-flaeche-dunkel);
  color:rgba(255,255,255,.72);
  padding-block:72px 0;
  padding-inline:24px;
}
@media(min-width:1024px){.and-fusszeile,.and-mitgliedschaften{padding-inline:48px}}
.and-fusszeile a{color:rgba(255,255,255,.72)}
.and-fusszeile a:hover{color:#A6E04B}

/* Die Marke bekommt mehr Platz als die Verweisspalten, sie traegt Logo, Satz
   und die sozialen Verweise. Vier Verweisspalten statt der drei des Prototyps,
   der Grund steht in build-tools/erzeuge-footer.php. */
.and-fusszeile__raster{
  display:grid;grid-template-columns:1fr;gap:40px;
  padding-bottom:48px;
}
@media(min-width:640px){.and-fusszeile__raster{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.and-fusszeile__raster{grid-template-columns:1.6fr repeat(4,1fr)}}

.and-fusszeile .and-logo__text{fill:#fff}
.and-fusszeile .and-logo{height:40px}
.and-fusszeile__intro{font-size:14px;max-width:36ch;margin:18px 0}

.and-fusszeile__social{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.and-fusszeile__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.and-fusszeile__social a:hover{background:rgba(255,255,255,.14)}

.and-fusszeile__titel,.and-mitgliedschaften__titel{
  color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 16px;
}
.and-fusszeile__spalte ul{list-style:none;margin:0;padding:0}
.and-fusszeile__spalte a{display:block;padding:6px 0;font-size:14px}

/* ---- Kontaktzeile mit Ampel -------------------------------------------- */
.and-fusszeile__kontakt{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  padding-block:18px;border-top:1px solid rgba(255,255,255,.12);
}
.and-fusszeile__telefon{
  display:inline-flex;align-items:center;gap:9px;
  color:rgba(255,255,255,.86);font-size:14.5px;font-weight:600;
}
.and-fusszeile__telefon:hover{color:#fff}
.and-fusszeile__telefon svg{color:#A6E04B}
.and-fusszeile__zeiten{font-size:13px;color:rgba(255,255,255,.62)}

.and-ampel{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--and-radius-pill);padding:7px 15px;
}
.and-ampel__punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--and-ink-300)}

/* Der Zustand steht als Klasse im HTML, serverseitig gesetzt. Die Farbe ist
   nicht das einzige Unterscheidungsmerkmal: Daneben steht der Zustand im
   Klartext. Farbe allein waere ein Verstoss gegen WCAG 1.4.1. */
.and-ampel.is-offen .and-ampel__punkt{background:#4ECB4E;animation:and-puls 2s ease-out infinite}
.and-ampel.is-zu .and-ampel__punkt{background:#E0533D;box-shadow:0 0 0 4px rgba(224,83,61,.16)}
@keyframes and-puls{
  0%{box-shadow:0 0 0 0 rgba(78,203,78,.55)}
  70%{box-shadow:0 0 0 8px rgba(78,203,78,0)}
  100%{box-shadow:0 0 0 0 rgba(78,203,78,0)}
}

/* ---- Schlusszeile ------------------------------------------------------ */
.and-fusszeile__schluss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 24px;padding-block:20px 28px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;
}
.and-fusszeile__copyright{margin:0}
.and-fusszeile__rechtliches{
  display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0;
}
.and-fusszeile__rechtliches a{text-decoration:underline;text-underline-offset:3px}

/* Der Sprachumschalter erbt seine helle Fassung nicht, er ist fuer den
   Kopfbereich auf hellem Grund gebaut. */
.and-fusszeile .and-sprachwechsel{
  color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.24);
}
.and-fusszeile .and-sprachwechsel:hover{color:#fff;border-color:rgba(255,255,255,.6)}

/* =========================================================
   5l. Schnellkontakt: Schicht und klebende Schaltflaechen
   Entspricht `.oc` und `.sticky-cta` aus AND_prototyp_v3.html.
   ========================================================= */

/* Natives `dialog`. Der Browser bringt Fokusfalle, Escape und das Stilllegen
   des Hintergrunds mit, das muss hier nichts nachbauen. Gestaltet wird nur,
   was er offen laesst: Lage, Groesse und das Hereinfahren von rechts. */
.and-schicht{
  position:fixed;inset:0;margin:0;
  width:100%;max-width:100%;height:100%;max-height:100%;
  padding:0;border:0;background:transparent;
  overflow:hidden;
}
.and-schicht::backdrop{background:rgba(15,34,48,.5)}

.and-schicht__inhalt{
  position:absolute;top:0;right:0;
  width:min(92vw,440px);height:100%;
  overflow-y:auto;
  background:var(--and-bg);color:var(--and-ink-500);
  padding:32px;
  padding-right:calc(32px + env(safe-area-inset-right,0px));
  padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
/* `[open]` statt einer eigenen Klasse: Das Attribut setzt der Browser selbst,
   eine zweite Quelle fuer denselben Zustand waere eine Fehlerquelle. */
.and-schicht[open] .and-schicht__inhalt{transform:translateX(0)}

.and-schicht__schliessen-form{margin:0}
.and-schicht__schliessen{
  position:absolute;top:18px;right:18px;
  width:40px;height:40px;border:0;border-radius:50%;
  background:var(--and-bg-soft);color:var(--and-ink-700);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.and-schicht__schliessen:hover{background:var(--and-border)}

.and-schicht h2{font-size:26px;margin:0 0 8px}
.and-schicht__sub{font-size:15px;margin:0 0 22px}

.and-schicht__wege{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.and-schicht__weg{
  display:block;padding:14px 16px;
  border:1px solid var(--and-border);border-radius:var(--and-radius-card);
  transition:border-color .18s,background .18s;
}
.and-schicht__weg:hover{border-color:var(--and-green);background:var(--and-green-50)}
.and-schicht__weg-titel{
  display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--and-green-700);margin-bottom:4px;
}
.and-schicht__weg-wert{display:block;font-size:16px;color:var(--and-ink-700);font-weight:500}
.and-schicht__weg--haupt{background:var(--and-bg-soft)}

/* Die Ampel steht hier auf hellem Grund, im Fussbereich auf dunklem. */
.and-schicht .and-fusszeile__kontakt{
  border-top:1px solid var(--and-border);gap:10px 16px;
}
.and-menue .and-fusszeile__kontakt{gap:10px 16px;padding-block:8px 0;border:0}
.and-menue .and-fusszeile__telefon{min-height:44px;font-size:17px}
:is(.and-schicht,.and-menue) .and-fusszeile__telefon{color:var(--and-ink-700)}
:is(.and-schicht,.and-menue) .and-fusszeile__telefon svg{color:var(--and-green-700)}
:is(.and-schicht,.and-menue) .and-fusszeile__zeiten{color:var(--and-ink-500)}
:is(.and-schicht,.and-menue) .and-ampel{
  color:var(--and-ink-500);background:var(--and-bg-soft);border-color:var(--and-border);
}

/* ---- Klebende Schaltflaechen ------------------------------------------- */
/* `position:fixed`, damit ausserhalb des Flusses und ohne Beitrag zum CLS. */
/* `align-items:flex-end` ist nicht kosmetisch. Ohne die Angabe gilt `stretch`,
   und dann zieht der Flex-Container jeden Knopf auf die Breite des breitesten.
   Zusammen mit einem Hover, der die Breite aendert, hiess das: Ein Zeiger auf
   dem einen Knopf bewegte sichtbar auch den anderen. Gemessen in T-032, der
   nicht ueberfahrene Knopf ging von 43 auf 47 Pixel. B-033. */
/* B-048: Versatz aus main.js, per transform, weil top beim Scrollen CLS kostet */
.and-schnellkontakt{
  position:fixed;right:env(safe-area-inset-right,0px);top:50%;transform:translateY(calc(-50% + var(--and-leiste-versatz,0px)));
  z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.and-schnellkontakt__knopf{
  writing-mode:vertical-rl;
  display:flex;align-items:center;gap:8px;
  padding:18px 11px;border-radius:10px 0 0 10px;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  background:var(--and-flaeche-dunkel);color:#fff;
  transition:transform .2s,background .2s;
}
.and-schnellkontakt__knopf svg{transform:rotate(90deg)}
/* Das Herausfahren laeuft ueber `transform`, nicht ueber `padding`. Beides
   sieht gleich aus, aber `padding` aendert die Groesse des Elements und zwingt
   den Browser bei jedem Ueberfahren zu einem neuen Layout. `transform` laeuft
   ohne Neulayout und kann die Nachbarn gar nicht erst mitziehen. */
.and-schnellkontakt__knopf:hover{transform:translateX(-4px)}
.and-schnellkontakt__knopf--haupt{background:var(--and-green);color:var(--and-auf-marke)}
.and-schnellkontakt__knopf--haupt:hover{background:#8CCB1D}
/* B-048: niedrige Fenster, Masse in T-064 */
@media(min-width:768px) and (max-height:640px){.and-schnellkontakt__knopf{padding-block:12px}}
@media(min-width:768px) and (max-height:540px){.and-schnellkontakt__knopf svg{display:none}}

/* Auf dem Telefon eine Leiste am unteren Rand, wie im Prototyp. */
@media(max-width:767px){
  .and-schnellkontakt{
    right:0;left:0;top:auto;bottom:0;transform:none;
    flex-direction:row;gap:0;
  }
  .and-schnellkontakt__knopf{
    writing-mode:horizontal-tb;
    flex:1;justify-content:center;border-radius:0;padding:14px;
  }
  /* T-083 Gestenbalken: Rand in den Knoepfen, damit ihre Farbe bis unten reicht */
  .and-schnellkontakt__knopf{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .and-schnellkontakt__knopf:first-child{padding-left:calc(14px + env(safe-area-inset-left,0px))}
  .and-schnellkontakt__knopf:last-child{padding-right:calc(14px + env(safe-area-inset-right,0px))}
  .and-schnellkontakt__knopf svg{transform:none}
  /* Die Leiste liegt hier ueber die volle Breite am unteren Rand. Ein Knopf,
     der daraus zur Seite faehrt, hat keinen Platz, wohin. */
  .and-schnellkontakt__knopf:hover{transform:none}

  /* Die Leiste liegt ueber dem Inhalt. Ohne diesen Abstand waere das Ende der
     Seite dauerhaft verdeckt, und zwar genau die Zeile mit Impressum und
     Datenschutz. Ein klebendes Element, das Inhalt verschluckt, ist ein
     Fehler und keine Gestaltung. */
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
}

/* ---- Die Leiste kommt erst beim Scrollen, T-052. Begruendung: docs/style-begruendungen.md */
@supports (animation-timeline: scroll()){
  @media(max-width:767px) and (prefers-reduced-motion:no-preference){
    .and-schnellkontakt{
      animation:and-schnellkontakt-ein linear both;
      animation-timeline:scroll(root block);
      /* Eine halbe Fensterhoehe. Kurz genug, dass die Leiste beim Lesen sofort
         da ist, lang genug, dass ein Wisch sie nicht flackern laesst. */
      animation-range:0 50vh;
    }
  }
}
@keyframes and-schnellkontakt-ein{
  0%{transform:translateY(100%);visibility:hidden}
  55%{visibility:visible}
  100%{transform:translateY(0);visibility:visible}
}

.and-fusszeile__nachoben{margin:0}
.and-fusszeile__nachoben a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------------------------------------------------------
   5m. Bausteine der Startseite
   ---------------------------------------------------------
   Abgeleitet aus AND_prototyp_v3.html, Abschnitt "Startseite". Die Klassen
   sind bewusst allgemein benannt: Dieselben Bausteine tragen ab T-024 auch die
   Uebersichtsseiten, sie sind keine Startseiten-Sonderloesung.
   --------------------------------------------------------- */

/* Kopf einer Sektion: Ueberzeile, Ueberschrift, Anreisser. */
.and-abschnitt-kopf{max-width:760px;margin-bottom:52px}
.and-abschnitt-kopf p:not(.and-eyebrow){color:var(--and-ink-500);font-size:18px;margin-top:14px}
.and-abschnitt-kopf--mitte{margin-inline:auto;text-align:center}
.and-abschnitt-kopf--mitte .and-eyebrow{justify-content:center}

/* Verweis mit Pfeil. Der Pfeil ist Schmuck, der Text traegt die Aussage. */
.and-pfeil-link{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;color:var(--and-green-700);font-size:15px;
}
.and-pfeil-link svg{width:16px;height:16px;transition:transform .2s}
.and-pfeil-link:hover svg{transform:translateX(4px)}

/* Kartenraster. Drei oder vier Spalten, dazwischen zwei und eine.

   Die Schwellen sind gemessen, nicht geschaetzt, und zwar an der Frage, ab
   welcher Kartenbreite eine Zeile noch traegt. Unter rund 280 Pixeln bleiben in
   einer Karte Zeilen mit sieben bis zehn Zeichen stehen, das Raster sieht dann
   zerquetscht aus. Belegt mit `pruefe-layout.js`, Pruefung L3, T-032.

   Vier Spalten brauchen deshalb 1280 Pixel Fensterbreite: erst dort ist die
   Inhaltsbreite gross genug, dass (Inhalt minus drei Luecken) geteilt durch
   vier ueber 280 liegt. Bei 1024, wo die Regel vorher ansetzte, waren es 259.
   Zwischen 640 und 1280 stehen zwei Spalten, das ist der ruhige Fall. */
.and-gitter{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:640px){.and-gitter{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.and-gitter--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.and-gitter--4{grid-template-columns:repeat(4,1fr)}}

.and-karte{
  background:var(--and-bg);border:1px solid var(--and-border);
  border-radius:var(--and-radius-card);padding:28px;
  display:flex;flex-direction:column;gap:12px;height:100%;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}

/* Silbentrennung, und zwar nur in Karten. Deutsche Komposita sind lang, eine
   Karte ist schmal, und ohne Trennung bleiben Zeilen mit sieben Zeichen und
   grossen Loechern daneben stehen. "Komponenteneinstellungen" fuellt in einer
   Kartenspalte von 238 Pixeln eine ganze Zeile allein, die Zeile davor bleibt
   dann halb leer. Der Browser trennt anhand des `lang` am html-Element, das
   Theme setzt es. Fehlt ihm das Woerterbuch, trennt er nicht und die Karte
   sieht aus wie vorher, es geht also nichts kaputt. Gemessen in T-032: die
   laengste Nachrichtenueberschrift faellt von drei Zeilen auf zwei.
   Im Fliesstext ausserhalb von Karten bleibt es bei ungetrenntem Satz, dort
   sind die Zeilen lang genug. */
.and-karte,
.and-medienkarte__text,
.and-teaser{hyphens:auto}
.and-karte:hover{transform:translateY(-4px);box-shadow:var(--and-shadow-raise);border-color:rgba(124,184,23,.4)}
.and-karte h3{font-size:19px;margin:0}
.and-karte p{color:var(--and-ink-500);font-size:15px;margin:0;flex:1}
.and-karte__nummer{
  font-family:var(--and-font-display);font-size:15px;font-weight:700;
  color:var(--and-auf-marke);background:var(--and-green-50);
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}

/* Karte mit Bild. Das Seitenverhaeltnis steht im CSS **und** die Masse stehen
   am `img`. Beides zusammen haelt den Platz frei, bevor das Bild da ist. Der
   schlechteste Wert der alten Seite ist ein CLS von 0,32 aus genau diesem
   Fehler, siehe CLAUDE.md 4a-2. */
.and-medienkarte{
  background:var(--and-bg);border:1px solid var(--and-border);
  border-radius:var(--and-radius-card);overflow:hidden;height:100%;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.and-medienkarte:hover{transform:translateY(-4px);box-shadow:var(--and-shadow-raise);border-color:rgba(124,184,23,.4)}
.and-medienkarte figure,.and-medienkarte .wp-block-image{margin:0}
.and-medienkarte img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.and-medienkarte__text{padding:22px;display:flex;flex-direction:column;gap:6px;flex:1}
.and-medienkarte__text h3{font-size:19px;margin:0}
.and-medienkarte__text p{color:var(--and-ink-500);font-size:14px;margin:0;flex:1}

/* Eine Karte, die vor allem eine Zahl zeigt. Ersetzt die Kreiszaehler von
   Avada auf der Marktstatus-Seite. Ohne Animation: Der Wert ist die Aussage,
   nicht das Hochzaehlen, und ein Zaehler, der bei 0 anfaengt, zeigt eine
   Sekunde lang eine falsche Zahl an. */
.and-zahlkarte{text-align:center;justify-content:center;gap:6px}
.and-zahlkarte__zahl{
  font-family:var(--and-font-display);font-weight:700;
  font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.02em;
  color:var(--and-ink-900);flex:none;
}
.and-zahlkarte p:not(.and-zahlkarte__zahl){flex:none}

/* Zwei grosse Teaser nebeneinander, im Prototyp Netztypen und Netzebenen. */
.and-teaser-paar{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.and-teaser-paar{grid-template-columns:1fr 1fr}}
.and-teaser{
  border:1px solid var(--and-border);border-radius:18px;padding:38px;
  background:var(--and-bg);position:relative;overflow:hidden;
}
/* Der Lichtfleck in der Ecke. Rein schmueckend, deshalb auf einem
   Pseudo-Element und nicht als Bild: kein zusaetzlicher Aufruf, kein Alt-Text,
   nichts, was fehlen kann. */
.and-teaser::after{
  content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;
  border-radius:50%;background:radial-gradient(circle,rgba(124,184,23,.14),transparent 70%);
  /* `pointer-events:none`, seit die ganze Karte klickbar ist. Der Lichtfleck
     ist ein Pseudo-Element der Karte und wird deshalb **nach** allen Kindern
     gezeichnet, also auch nach der Trefferflaeche des Verweises. Er fing damit
     die rechte obere Ecke ab. Gemessen: 8 von 9 Punkten trafen den Verweis,
     einer nicht, und zwar immer derselbe. Schmuck darf nichts abfangen. */
  pointer-events:none;
}
.and-teaser>*{position:relative}

/* Karten in einem Raster, E-09. **Die ganze Karte wird zur Trefferflaeche, der
   Knopf wird zum Textverweis mit Pfeil.**

   **Warum nicht der vollbreite Knopf wie in der Aktionsbox.** Fuenf vollbreite
   Knoepfe untereinander ergeben ein Treppenhaus aus Balken, in dem keiner mehr
   heraussticht. Gemessen auf `/home/netzebenen/` bei 390 Pixeln: vier Karten,
   Knoepfe zwischen 138 und 173 Pixeln in einer Karte von 342. Statt vier Balken
   von 342 Pixeln ist die Trefferflaeche jetzt die ganze Karte.

   **Und warum die Karte nicht in ein `a` gepackt wird.** Ein Screenreader liest
   dann Bild, Ueberschrift, Fliesstext und Aufschrift als **einen einzigen
   langen Verweis** vor. Die Flaeche entsteht deshalb ueber ein Pseudo-Element
   am vorhandenen Verweis. Der Verweis behaelt seinen Text, die Vorlesung bleibt
   kurz, und es kommt kein zweiter Verweis dazu.

   **Bedingung, die das Werkzeug prueft und nicht das CSS:** Genau ein Verweis
   je Karte. Bei zweien waere nicht mehr entscheidbar, welcher die Flaeche
   bekommt. `build-tools/pruefe-aktionsflaechen.js` faellt durch, sobald eine
   Karte einen zweiten Verweis bekommt.

   `position:static` am Knopfbehaelter ist keine Kosmetik: Ohne die Zeile
   bezieht sich `inset:0` auf den Behaelter, weil `.and-teaser>*` ihn
   positioniert. Die Flaeche waere dann so gross wie der Knopf, also genau das,
   was hier abgeschafft wird. */
.and-teaser .wp-block-buttons{position:static;margin:0}
.and-teaser .and-btn,
.and-teaser .and-btn .wp-block-button__link{
  background:none;border:0;padding:0;box-shadow:none;
  color:var(--and-green-700);font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
}
.and-teaser .and-btn:hover,
.and-teaser .and-btn .wp-block-button__link:hover{
  background:none;border:0;box-shadow:none;color:var(--and-green-700);
  text-decoration:underline;text-underline-offset:4px;
}
/* Der Pfeil steht hinter dem Text, erzeugt wird er davor. `order` dreht das um.
   Das `::after` ist fuer die Trefferflaeche belegt und kann den Pfeil nicht
   tragen. */
.and-teaser .and-btn .wp-block-button__link::before{
  content:"\2192";order:1;font-weight:400;transition:transform .2s;
}
.and-teaser .and-btn .wp-block-button__link:hover::before{transform:translateX(3px)}
.and-teaser .and-btn .wp-block-button__link::after{
  content:"";position:absolute;inset:0;border-radius:18px;
}
/* Eine klickbare Flaeche ohne Rueckmeldung ist eine Falle. Das ist nicht die
   Hover-Kosmetik aus E-03, die auf das Kundenfeedback wartet, sondern der
   Hinweis, dass die Karte jetzt ein Bedienelement ist. */
.and-teaser:hover{border-color:rgba(124,184,23,.45);box-shadow:var(--and-shadow-rest)}
.and-teaser:has(.wp-block-button__link:focus-visible){
  outline:2px solid var(--and-green-700);outline-offset:2px;
}

/* **`.and-karte` bekommt diese Flaeche ausdruecklich nicht, und zwar aus einem
   gemessenen Grund.** Die erste Fassung hatte die Regel auch dort. Gezaehlt auf
   der Startseite: 24 Karten mit 0, 1 und 2 Verweisen, drei davon mit zwei. Bei
   zwei Verweisen ist nicht entscheidbar, welcher die Flaeche bekommt, und der
   zweite waere unter dem Pseudo-Element des ersten begraben. Bei null Verweisen
   gibt es nichts zu verlinken.

   `.and-teaser` ist der Fall aus E-09 und hat gemessen immer genau einen
   Verweis. Dort greift die Regel, dort ist sie richtig. Das Kartenraster
   braucht eine Loesung je Muster und gehoert damit in die seitenweise Runde
   nach dem Kundenfeedback, nicht hierher. */
.and-teaser h3{font-size:26px;font-weight:300;margin:0 0 12px}
.and-teaser p{color:var(--and-ink-500);margin:0 0 18px}
.and-teaser figure,.and-teaser .wp-block-image{margin:0 0 22px}
/* `figure.wp-block-image` schrumpft im Kern auf die Bildbreite. In einer Karte
   soll es die Karte fuellen. Gefunden auf dem Screenshot in T-023. */
.and-teaser .wp-block-image,.and-medienkarte .wp-block-image,.and-feature .wp-block-image{display:block;width:100%}
.and-teaser img{width:100%;height:auto;border-radius:var(--and-radius-card);display:block}

/* Bild und Text nebeneinander, im Prototyp `.feature`. */
.and-feature{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.and-feature{grid-template-columns:1fr 1fr;gap:64px}}
.and-feature figure,.and-feature .wp-block-image{margin:0}
.and-feature img{
  width:100%;height:auto;display:block;
  border-radius:var(--and-radius-card);border:1px solid var(--and-border);box-shadow:var(--and-shadow-rest);
}
/* Was auf `.and-feature` folgt, stiess bisher ohne einen Pixel Abstand daran.
   Den Abstand innerhalb einer Sektion traegt sonst `.and-abschnitt-kopf` mit
   seinem `margin-bottom`, und der steckt hier eine Ebene tiefer, naemlich in
   der Textspalte von `.and-feature`. Betroffen sind die Nutzer- und die
   Life-cycle-Sektion der Startseite, auf jeder Fensterbreite. B-036, T-032.
   Derselbe Wert wie bei `.and-abschnitt-kopf`, damit die Sektion einen Rhythmus
   hat und nicht zwei. */
.and-section > .and-feature + *{margin-top:52px}

/* Der dunkle Hinweiskasten am Ende der Life-cycle-Sektion. */
.and-hinweisband{
  margin-top:40px;background:var(--and-flaeche-dunkel);color:#fff;
  border-radius:var(--and-radius-card);padding:38px 42px;border-left:3px solid var(--and-green);
}
/* Auf Dunkel traegt `--and-green-700` nur 3,29:1 und reisst WCAG AA, siehe
   B-014. Deshalb hier ausdruecklich eine hellere Marke. */
.and-hinweisband .and-eyebrow{color:#A6E04B}
/* Derselbe Grund fuer den Pfeilverweis: `--and-green-700` erreicht auf ink-900
   nur 3,28:1 und reisst WCAG AA. Gemessen von axe auf der Startseite, nicht
   geschaetzt. Gehoert zur Familie aus B-025: ein Token fuer helle Flaechen auf
   einer dunklen Flaeche. */
.and-hinweisband .and-pfeil-link,
.and-hero .and-pfeil-link,
.and-hero-sub .and-pfeil-link{color:#A6E04B}
.and-hinweisband h2,.and-hinweisband h3{color:#fff;font-weight:300;margin:0}
.and-hinweisband p{color:rgba(255,255,255,.86);font-size:18px;max-width:64ch;margin:10px 0 0}

/* Die Zahl, die fuer sich steht. Im Prototyp lag darunter ein Logoband mit
   erfundenen Firmennamen, ausdruecklich als Platzhalter markiert. Es ist nicht
   uebernommen, siehe worker/reports/startseite.md. */
.and-zahlenband{text-align:center;max-width:820px;margin-inline:auto}
.and-zahlenband h2{font-size:clamp(22px,3vw,30px)}

/* Aufklapper im Inhalt. `details` und `summary`, dieselbe Technik wie in der
   Navigation seit T-022: Aufklappen, Tastaturbedienung und Zustandsansage
   kommen vom Browser. Avada braucht dafuer jQuery. */
.and-aufklapper{border-bottom:1px solid var(--and-border)}
.and-aufklapper summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 0;font-size:17px;font-weight:500;color:var(--and-ink-700);
}
.and-aufklapper summary::-webkit-details-marker{display:none}
.and-aufklapper summary::marker{content:""}
/* Das Pluszeichen steht in CSS, weil es reiner Schmuck ist: Den Zustand liest
   der Browser am `details` ab und sagt ihn an. */
.and-aufklapper summary::before{
  content:"+";flex:none;width:22px;text-align:center;
  color:var(--and-green-700);font-weight:700;
}
.and-aufklapper[open] summary::before{content:"‘2"}
.and-aufklapper summary:hover{color:var(--and-green-700)}
.and-aufklapper__inhalt{padding:0 0 18px 34px;color:var(--and-ink-500)}
.and-aufklapper__inhalt p{margin:0 0 12px}
.and-aufklapper__inhalt p:last-child{margin-bottom:0}

/* Standort. */
.and-standort{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1024px){.and-standort{grid-template-columns:1fr 1fr;gap:64px}}

/* Der Lageplan, T-048 und E-06. Gezeichnet statt eingebettet, die Begruendung
   steht vollstaendig in inc/standortkarte.php. Kurz: Eine Maps-Einbettung laedt
   fremde Skripte und setzt Kennungen, bevor der Besucher etwas angeklickt hat.
   Damit faellt Gate 5, und der Cookie-Satz der Datenschutzerklaerung waere am
   Tag seiner Freigabe falsch. */
.and-standort__karte{min-width:0}
.and-karte{
  display:block;width:100%;height:auto;
  border-radius:var(--and-radius-card);border:1px solid var(--and-border);
  box-shadow:var(--and-shadow-rest);
}
.and-karte__grund{fill:var(--and-bg-soft)}
/* Die Strassen sind Linien, keine Flaechen. Eine Flaeche muesste eine Breite
   behaupten, die niemand nachgemessen hat. */
.and-karte__strasse{fill:none;stroke:var(--and-bg);stroke-width:34;stroke-linecap:round}
.and-karte__strasse--klein{stroke-width:22}
.and-karte__platz{fill:var(--and-bg);stroke:var(--and-border);stroke-width:1.5}
.and-karte__platz-innen{fill:var(--and-green-50);stroke:none}
.and-karte__block{fill:#E9EDEB}
/* Die zwei Ringe um die Marke. Sie geben ihr Gewicht, ohne dass sie groesser
   werden muss, und sind dasselbe Mittel wie in der Bereichsgrafik. */
.and-karte__welle{fill:rgba(124,184,23,.14)}
.and-karte__marke{fill:var(--and-green-700)}
.and-karte__marke-punkt{fill:#fff}
.and-karte__name{
  font-family:var(--and-font-display);font-size:19px;font-weight:600;
  fill:var(--and-ink-700);
}
.and-karte__ort{font-size:12px;font-weight:700;letter-spacing:.12em;fill:var(--and-ink-500)}
.and-karte__haus{font-size:15px;font-weight:600;fill:var(--and-ink-700)}

/* ---------------------------------------------------------
   5n. Statement-Sektion
   ---------------------------------------------------------
   Der Satz waechst beim Scrollen. Im Prototyp haengt die Groesse an einer
   Rechnung in JavaScript, die bei jedem Scroll-Ereignis laeuft. Hier macht es
   `animation-timeline: view()`, also der Browser. Wo er das nicht kennt, steht
   der Satz einfach in voller Groesse da, und das ist kein Verlust: Die Aussage
   ist der Satz, nicht die Bewegung. Kein JavaScript, kein Layout-Sprung, weil
   `transform` den Fluss nicht anfasst.
   --------------------------------------------------------- */
.and-statement{background:var(--and-bg-soft);padding-block:120px;text-align:center}
.and-statement__satz{
  font-family:var(--and-font-display);font-weight:700;
  font-size:clamp(28px,5vw,58px);line-height:1.08;letter-spacing:-.025em;
  color:var(--and-ink-700);max-width:20ch;margin-inline:auto;
}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .and-statement{padding-block:min(26vh,200px)}
    .and-statement__satz{
      animation:and-statement-wachsen linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 45%;
    }
  }
}
/* Nur Groesse, keine Deckkraft. Die erste Fassung startete bei `opacity:.35`,
   und axe misst den Startzustand: 2,13:1 statt der geforderten 3:1 fuer grossen
   Text. Ein Effekt, der einen Barrierefreiheitsverstoss erzeugt, wird nicht
   genommen, CLAUDE.md 1a. Gefunden in T-023. */
@keyframes and-statement-wachsen{
  from{transform:scale(.62)}
  to{transform:scale(1)}
}

/* ---------------------------------------------------------
   5o. Newsteaser
   --------------------------------------------------------- */
/* Dieselbe Rechnung wie bei `.and-gitter`, und hier war der Sprung noch
   groesser: von einer Spalte direkt auf drei, ab 768 Pixeln. Das ergab Karten
   von 225 Pixeln, also deutlich unter der Grenze von 280. Der Fall stand in
   keinem Befund und ist in T-032 aufgefallen, weil das Werkzeug bei 768 und 900
   misst und ein Mensch dort selten hinsieht. */
.and-news{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.and-news{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.and-news{grid-template-columns:repeat(3,1fr)}}
.and-news__datum{font-size:13px;color:var(--and-ink-500);margin:0}
.and-news__titel{font-size:19px;margin:0}
.and-news__titel a:hover{color:var(--and-green-700)}
.and-news__text{color:var(--and-ink-500);font-size:15px;margin:0;flex:1}

/* Das Newsarchiv nutzt dieselben Medienkarten wie die uebrigen Raster. */
.and-newsliste{list-style:none;margin:0;padding:0}
.and-newsliste .and-news__titel{font-size:20px;font-weight:500;line-height:1.3}

/* Blaetterfunktion. Echte Verweise auf echte Adressen, deshalb eine Liste in
   einem `nav` und kein Karussell. */
.and-blaettern{margin-top:44px}
.and-blaettern ul{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  list-style:none;margin:0;padding:0;
}
.and-blaettern a,.and-blaettern__hier{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;min-height:42px;padding:0 14px;
  border:1px solid var(--and-border);border-radius:var(--and-radius-btn);
  font-size:15px;font-weight:600;color:var(--and-ink-700);
}
.and-blaettern a:hover{border-color:var(--and-green);color:var(--and-green-700)}
/* Die aktuelle Seite traegt `aria-current`, die Auszeichnung ist also nicht
   allein die Farbe. WCAG 1.4.1. */
.and-blaettern__hier{background:var(--and-flaeche-dunkel);border-color:var(--and-flaeche-dunkel);color:#fff}

/* ---------------------------------------------------------
   5p. Kopf der Startseite
   ---------------------------------------------------------
   Der Prototyp hat hier einen Umschalter hell gegen dunkel. Er ist nicht
   uebernommen: Zwei Erscheinungsbilder derselben Seite sind zwei Dinge, die
   gepflegt und geprueft werden muessen, und die Entscheidung, wie die Seite
   aussieht, gehoert nicht in die Hand des Besuchers. Uebernommen ist die
   dunkle Fassung, die im Prototyp die Ausgangslage ist.
   --------------------------------------------------------- */
.and-hero{
  position:relative;overflow:hidden;
  padding-top:60px;padding-bottom:56px;
  background:#0A0E13;color:rgba(255,255,255,.74);
}
/* Die zwei Lichtkegel. Auf einem Pseudo-Element, damit sie die Nachkommen
   nicht beeinflussen und keinen Bezugsrahmen aufmachen. Derselbe Grund wie
   beim Kopfbereich in 5a. */
.and-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 480px at 12% -10%,rgba(124,184,23,.30),transparent 60%),
    radial-gradient(680px 480px at 92% 6%,rgba(22,180,199,.22),transparent 60%);
}
.and-hero>*{position:relative}
.and-hero .and-eyebrow{color:#A6E04B}
.and-hero .and-eyebrow::before{background:#A6E04B}
.and-hero h1{color:#fff;margin-bottom:22px}
.and-hero__klar{
  font-size:clamp(18px,2.2vw,22px);font-weight:500;line-height:1.4;
  color:#fff;margin-bottom:18px;max-width:48ch;
}
.and-hero .and-lead{color:rgba(255,255,255,.74);font-size:18px;margin-bottom:30px}
/* Weiss auf Dunkel statt Ink auf Dunkel. `--and-ink-700` ergaebe hier 1,3:1. */
.and-hero .and-btn--secondary,
.and-hero .and-btn--secondary .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.28)}
.and-hero .and-btn--secondary:hover .wp-block-button__link,
.and-hero .and-btn--secondary .wp-block-button__link:hover{background:#fff;color:#0A0E13;border-color:#fff}
.and-hero__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.and-hero__grid{grid-template-columns:1.05fr .95fr;gap:64px}}
.and-hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* `aspect-ratio` haelt den Platz frei, bevor das SVG gezeichnet ist. Es ist
   kein Netzwerkobjekt, aber die Rechnung ist dieselbe: kein Sprung. */
.and-hero__bild svg{
  display:block;width:100%;height:auto;aspect-ratio:560/440;
  border-radius:var(--and-radius-card);border:1px solid rgba(255,255,255,.1);
}

/* =========================================================
   5z. Textfarben auf dunklen Flaechen. B-014.
   Gegen `--and-flaeche-dunkel` gerechnet mit `build-tools/kontraste.js`:
   ink-500 2,55:1 und green-700 3,29:1 reissen AA, ink-300 5,26:1,
   green 6,75:1 und Weiss 16,26:1 halten. Die zwei, die reissen, sind
   genau die zwei, die im Editor mit zwei Klicks entstehen: ink-500 ist
   die Standard-Textfarbe, green-700 die Marke ueber jeder Sektion.
   Deshalb erzwungen statt der Redaktion ueberlassen, und in beiden
   Quellen: eigene Tokens fuer das Theme-CSS, Presets fuer den Editor.
   Ohne die zweite Haelfte greift die Regel dort nicht, wo der Fehler
   entsteht.
   ========================================================= */
.and-fusszeile,.and-testumgebung,.and-hinweisband,.and-hero-sub{
  --and-ink-900:#FFFFFF;--and-ink-700:#FFFFFF;
  --and-ink-500:#FFFFFF;--and-ink-300:#8A949B;
  --and-green-700:#7CB817;
  --wp--preset--color--ink-900:#FFFFFF;--wp--preset--color--ink-700:#FFFFFF;
  --wp--preset--color--ink-500:#FFFFFF;--wp--preset--color--ink-300:#8A949B;
  --wp--preset--color--green-700:#7CB817;
}

/* =========================================================
   6. Zugaenglichkeit
   ========================================================= */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--and-green-700);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .and-mitgliedschaften a{translate:none!important}
}

/* =========================================================
   9. KI-Modus
   =========================================================
   Der Schalter aus dem Prototyp, der dort nichts tat. Vorbild ist die
   Markdown- und Terminalansicht auf inseleric.de. Eine Klasse am `body`,
   damit die Ebenen darueber mitziehen. Begruendung, Belege und der Vergleich
   mit dem Vorbild: worker/reports/ki-modus.md, T-027.

   Kurz gehalten aus einem Grund: Die Umschaltung laeuft ueber die Tokens aus
   Abschnitt 1. Alles, was sie benutzt, zieht von allein mit, auch die
   Schriftart. Ueberschrieben wird nur, was feste Farben oder Schmuck traegt.
   Ein `* { font-family: inherit !important }` waere der naheliegende, aber
   falsche Weg gewesen.

   Die Markdown-Zeichen stehen mit leerem Alternativtext ("# " / ""), damit
   der Screenreader die Ueberschrift vorliest und nicht die Doppelkreuze. */
.and-kimodus-kopf{display:none}
.and-kimodus .and-kimodus-kopf{display:block;padding-block:14px 6px}
.and-kimodus-kopf__zeile{margin:0;font-size:13px;line-height:1.7;color:var(--and-green)}
.and-kimodus-kopf__zeile+.and-kimodus-kopf__zeile{color:#7C8A94}
.and-kimodus{
  --and-font-sans:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--and-font-display:var(--and-font-sans);
  --and-bg:#0B141B;--and-bg-soft:#111E27;--and-border:#26343E;--and-grad:none;--and-green-50:#16241B;
  /* Auf Dunkel traegt `--and-green-700` nur 3,76:1 und reisst WCAG AA. Gemessen
     von axe auf der Startseite, 17 Fundstellen, alle die Ueberzeile ueber einer
     Sektion. Auf hellem Grund ist der Ton richtig, hier braucht es den hellen.
     Dieselbe Familie wie B-014 und B-025. */
  --and-green-700:#A6E04B;
  /* Eigener Wert, statt dass eine nachtraegliche Regel die Flaechen
     zurueckbiegt. Genau die Reparatur, die B-025 "keine Loesung" nennt. */
  --and-flaeche-dunkel:#111E27;--and-flaeche-dunkel-aktiv:#26343E;
  --and-ink-900:#E8EDF0;--and-ink-700:#E8EDF0;--and-ink-500:#B4C0C8;--and-ink-300:#8FA0AB;
  --and-shadow-rest:none;--and-shadow-raise:none;--and-radius-card:0;--and-radius-btn:0;--and-radius-pill:0;
  background:var(--and-bg);color:var(--and-ink-500);
}
.and-kimodus h1,.and-kimodus h2,.and-kimodus h3{font-weight:400;letter-spacing:normal;line-height:1.4}
.and-kimodus h1{font-size:26px}.and-kimodus h2{font-size:22px}.and-kimodus h3{font-size:18px}
.and-kimodus h1::before{content:"# " / ""}
.and-kimodus h2::before{content:"## " / ""}
.and-kimodus h3::before{content:"### " / ""}
/* Die Marke gehoert an Aufzaehlungen im Inhalt, nicht an jede Liste.
   Navigation, KI-Leiste und Brotkrumenpfad sind Listen im Markup und bekamen
   im ersten Lauf ebenfalls ein `[*]`. Alle drei stecken in einem `nav`, das
   ist die Unterscheidung. Gefunden auf dem Screenshot, von keinem Gate. */
.and-kimodus main li:not(nav li){list-style:none}
.and-kimodus main li:not(nav li)::before{content:"[\2022] " / ""}
.and-kimodus s,.and-kimodus del{text-decoration:none}
.and-kimodus s::before,.and-kimodus del::before,.and-kimodus s::after,.and-kimodus del::after{content:"~~" / ""}
.and-kimodus :is(h1,h2,h3)::before,
.and-kimodus main li:not(nav li)::before{color:var(--and-green)}
.and-kimodus a{text-decoration:underline;text-underline-offset:3px;color:var(--and-ink-900)}
/* Auch das innere `a` des Kernblocks. Seit T-023 traegt es die Farbe, nicht der
   Wrapper. Ohne die zweite Zeile blieb die gruene Pille stehen, und darauf stand
   im KI-Modus helles Ink: 2,04:1. Von axe gemeldet, nicht geschaetzt. */
.and-kimodus :is(.and-btn,.and-header__cta a,.and-schnellkontakt__knopf),
.and-kimodus :is(.and-btn,.and-header__cta a) .wp-block-button__link{background:none;border:1px solid var(--and-border);color:var(--and-ink-900);box-shadow:none}
.and-kimodus :is(.and-btn,.and-header__cta a)::before{content:"[ "}
.and-kimodus :is(.and-btn,.and-header__cta a)::after{content:" ]"}
/* Bereichsleiste im KI-Modus. Dieselbe Familie wie die Schaltflaechen eine
   Zeile darueber: Die gefuellte Pille traegt auf Dunkel helles Ink, und das
   sind auf dem Lime 2,04:1. Von axe gemeldet, nicht geschaetzt, gemessen auf
   `/home/uebersicht-unternehmen/historie/` in T-044. Die Fuellung faellt
   deshalb weg, den aktiven Zustand traegt der helle Rahmen, den auch der Rest
   des KI-Modus benutzt, dazu weiterhin `aria-current`. */
.and-kimodus .and-subnav__pill.is-aktiv,
.and-kimodus .and-subnav__schritt.is-aktiv .and-subnav__knoten{
  background:none;border-color:var(--and-green-700);color:var(--and-green-700);
}
.and-kimodus .and-subnav__pill.is-aktiv .and-subnav__icon{color:var(--and-green-700)}

.and-kimodus .and-grad-text{background:none;color:var(--and-green);-webkit-text-fill-color:currentColor}
.and-kimodus .and-eyebrow::before{background:var(--and-green)}
.and-kimodus .and-header::before{background:var(--and-bg);backdrop-filter:none}
.and-kimodus img{box-shadow:none;filter:grayscale(1) contrast(.9)}
.and-kimodus :is(.and-schicht__inhalt,.and-menue,.and-menue__inhalt){background:var(--and-bg);color:var(--and-ink-500)}
.and-kimodus :is(.and-schicht,.and-menue)::backdrop{background:rgba(0,0,0,.75)}
/* Die Liste von acht zurueckzubiegenden Flaechen ist mit T-054 entfallen: Sie
   benutzen `--and-flaeche-dunkel`, und das Token traegt seinen KI-Wert selbst.
   Uebrig bleibt der Unterseitenkopf, dessen Flaeche als einzige fest im
   Regelwerk steht, weil sie einen Farbverlauf traegt. */
.and-kimodus .and-hero-sub{background:var(--and-bg-soft);border-color:var(--and-border)}
.and-kimodus .and-hero-sub::before{display:none}
.and-kimodus .and-chip--kimodus{border-color:var(--and-green);color:var(--and-green)}