/*
 * Alibaba Security – gemeinsame Styles. Nur Tokens aus tokens.css, keine festen Farben, keine Schriftnamen.
 * Aufbau: 1 Grundlagen · 2 Layout · 3 Typo · 4 Buttons · 5 Kopfband · 6 Vollbildmenü · 7 Bausteine
 *         8 Formular · 9 Rechtsseite · 10 Fußzeile · 11 Aktionsleiste, Nach oben · 12 Bewegung
 * Seitenbezogenes Layout gehört nach pages/<slug>.css. Beschreibung der Bausteine: BAUSTEINE.md.
 */

/* ============================================================ 1 Grundlagen */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-compact) + var(--space-5));
  /* Vollbildmenü offen: Seite dahinter gesperrt (app.js setzt zusätzlich body fest, siehe 6). */
}

body {
  margin: 0;
  padding-top: var(--kopf-platz, var(--header-h));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

.haupt {
  flex: 1 0 auto;
}

.haupt:focus {
  outline: none;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote {
  margin: 0;
}

/* :where() hält die Spezifität bei null: Eine Liste bekommt ihren Innenabstand über die eigene Klasse. */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a,
button,
summary,
label,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fassung je Theme: geladen wird nur die sichtbare (ausgeblendete Lazy-Bilder lädt der Browser nicht). */
:root[data-theme="dark"] .nur-hell,
:root:not([data-theme="dark"]) .nur-dunkel {
  display: none;
}

/* Fokusring: nur bei Tastaturbedienung (app.js setzt data-eingabe), Eingabefelder behalten ihn immer. */
:focus-visible {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

html[data-eingabe="zeiger"] :focus-visible:not(input, textarea, select, [contenteditable]) {
  outline: none;
}

.ohne-ring:focus,
.ohne-ring:focus-visible {
  outline: none;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* Rufnummern, Lizenz- und Firmennummern brechen nie um und stehen in gleich breiten Ziffern. */
.tel,
.nummer {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Auf Logo-Blau und Blau dunkel: weiße Schrift, weißer Fokusring. */
.auf-blau,
.sektion--blau {
  --color-focus: var(--color-on-primary);
  color: var(--color-on-primary);
}

.auf-blau a:not(.btn),
.sektion--blau a:not(.btn) {
  color: inherit;
}

/* ============================================================ 2 Layout */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.container--schmal {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.container--breit {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

/* Sektion: Rahmen für jeden Abschnitt einer Seite. Ohne Zusatz steht sie auf der Seitenfläche. */
.sektion {
  padding-block: var(--section-y);
}

.sektion--getoent {
  background: var(--color-tint);
}

.sektion--flaeche {
  background: var(--color-surface);
}

.sektion--blau {
  background: var(--color-band);
}

.sektion--eng {
  padding-block: calc(var(--section-y) / 2);
}

/* Zwei gleichfarbige Sektionen nacheinander: Abstand nicht doppelt. */
.sektion:not([class*="sektion--"]) + .sektion:not([class*="sektion--"]) {
  padding-block-start: 0;
}

.sektion__kopf {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-7);
}

.sektion__kopf > * + * {
  margin-block-start: var(--space-3);
}

.stapel > * + * {
  margin-block-start: var(--stack);
}

/* Zweispalter: Text und Bild. Ab 60em nebeneinander, DOM-Reihenfolge bleibt die Lesereihenfolge. */
.zweispalter {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 60em) {
  .zweispalter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
  }

  .zweispalter--text-breit {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ============================================================ 3 Typo */

h1, h2, h3, h4,
.h1, .h2, .h3 {
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

h1,
.h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

h2,
.h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

h3,
.h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

.auf-blau .lead,
.sektion--blau .lead {
  color: var(--color-on-primary-2);
}

.klein {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.text-2 {
  color: var(--color-text-2);
}

.text-3 {
  color: var(--color-text-3);
}

strong,
b {
  font-weight: var(--weight-semibold);
}

/* Fließtext aus dem Editor und längere Texte. */
.prosa {
  max-width: var(--measure);
}

.prosa > * + * {
  margin-block-start: var(--stack);
}

.prosa h2 {
  margin-block-start: var(--space-8);
  scroll-margin-top: calc(var(--header-h-compact) + var(--space-5));
}

.prosa h3 {
  margin-block-start: var(--space-6);
}

.prosa h2:first-child,
.prosa h3:first-child {
  margin-block-start: 0;
}

.prosa p,
.prosa li {
  text-wrap: pretty;
}

.prosa ul,
.prosa ol {
  padding-inline-start: 1.25em;
}

.prosa li + li {
  margin-block-start: var(--space-2);
}

/* ============================================================ 4 Buttons */

/*
 * Drei Arten (Markenbuch): .btn--cta rot = die eine wichtigste Handlung je Ansicht, .btn--primaer blau,
 * .btn--umriss Nebenweg. Mindestens 48 px hoch, wird beim Drücken sofort dunkler.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-5);
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  line-height: var(--leading-button);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  background: var(--btn-bg-hover);
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}

@media (hover: hover) {
  .btn:hover {
    background: var(--btn-bg-hover);
  }
}

.btn--cta {
  --btn-bg: var(--color-cta);
  --btn-bg-hover: var(--color-cta-hover);
  --btn-fg: var(--color-on-cta);
}

.btn--primaer {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-fg: var(--color-on-primary);
}

.btn--umriss {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-tint);
  --btn-fg: var(--color-link);
  border-color: var(--color-line-strong);
}

/* Auf Blau: Der blaue Button wird weiß mit blauer Schrift, der Umriss weiß. Rot bleibt rot. */
.auf-blau .btn--primaer,
.sektion--blau .btn--primaer {
  --btn-bg: var(--color-on-primary);
  --btn-bg-hover: var(--color-tint);
  --btn-fg: var(--color-primary);
}

.auf-blau .btn--umriss,
.sektion--blau .btn--umriss {
  --btn-bg-hover: var(--color-on-primary-soft);
  --btn-fg: var(--color-on-primary);
  border-color: var(--color-on-primary);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Gruppe von Buttons: mobil untereinander in voller Breite, ab 36em nebeneinander. */
.aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 36em) {
  .aktionen {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Runder Icon-Link (Kontaktwege in Fußzeile und Menü). Tippfläche 44 px. */
.iconlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.iconlink:active {
  background: var(--color-tint);
}

.auf-blau .iconlink:active {
  background: var(--color-on-primary-soft);
}

@media (hover: hover) {
  .iconlink:hover {
    background: var(--color-tint);
  }

  .auf-blau .iconlink:hover {
    background: var(--color-on-primary-soft);
  }
}

/* ============================================================ 5 Kopfband */

/*
 * Aufbau und Verhalten wie vezoza.com: fest am oberen Rand, wird beim Scrollen kompakt (.ist-kompakt),
 * blendet unterhalb der Desktop-Breite beim Runterscrollen aus (.ist-versteckt) und beim Hochscrollen ein.
 * Helle Fläche mit dem farbigen Logo (dunkel: Nachtblau). body hält den Platz frei, deshalb springt nichts.
 */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-menu);
  background: var(--color-header);
  color: var(--color-text);
  box-shadow: 0 1px 0 var(--color-line);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.kopf.ist-kompakt {
  box-shadow: 0 1px 0 var(--color-line), var(--shadow-float);
}

.kopf.ist-versteckt {
  transform: translateY(-100%);
  box-shadow: none;
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  transition: height var(--dur) var(--ease-out);
}

.kopf.ist-kompakt .kopf__innen {
  height: var(--header-h-compact);
}

.kopf__logo {
  display: grid;
  align-items: center;
  flex: none;
  border-radius: var(--radius);
}

.kopf__logo .logo {
  transition: height var(--dur) var(--ease-out);
}

.kopf__marke {
  width: auto;
  height: var(--mark-h);
}

.kopf.ist-kompakt .kopf__marke {
  height: calc(var(--header-h-compact) - var(--space-4));
}

.hauptnav {
  display: none;
}

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kopf__anruf {
  display: none;
}

/* Knöpfe im Kopfband: 44 px, feiner heller Rahmen wie in der Beispielansicht des Markenbuchs. */
.kopfknopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap);
  height: var(--tap);
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.kopfknopf:active {
  background: var(--color-tint);
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}

@media (hover: hover) {
  .kopfknopf:hover {
    background: var(--color-tint);
  }
}

/* Hell/Dunkel: Sonne und Mond drehen ineinander. */
.theme-schalter {
  padding: 0;
}

.theme-schalter .icon {
  grid-area: 1 / 1;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}

.theme-schalter {
  display: inline-grid;
  place-items: center;
}

:root:not([data-theme="dark"]) .theme-schalter__sonne,
:root[data-theme="dark"] .theme-schalter__mond {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

/* Menü-Knopf: bleibt an seiner Stelle und wird zum Schließen-Knopf. */
.menue-knopf__icons {
  display: grid;
  place-items: center;
}

.menue-knopf__icons .icon {
  grid-area: 1 / 1;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}

.menue-knopf__zu,
.menue-knopf[aria-expanded="true"] .menue-knopf__auf {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}

.menue-knopf[aria-expanded="true"] .menue-knopf__zu {
  opacity: 1;
  transform: none;
}

.menue-knopf__text {
  min-width: 2.9em;
  text-align: start;
}

/* Ab 48em: Anruf-Button im Kopfband (mobil übernimmt ihn die Aktionsleiste). */
@media (min-width: 48em) {
  .kopf__anruf {
    display: inline-flex;
    min-height: var(--tap);
    white-space: nowrap;
  }

  .kopf__aktionen {
    gap: var(--space-3);
  }

  /* Der rote Anruf steht jetzt im Kopfband direkt über dem Menü: im Menü nicht noch einmal. */
  .mobilmenu__anruf {
    display: none;
  }
}

/* Ab 81em: Navigation im Kopfband, Logo links außen, Links in der Mitte, Bedienung rechts. */
@media (min-width: 81em) {
  .kopf__innen {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    gap: var(--space-5);
  }

  .kopf__logo {
    justify-self: start;
  }

  .kopf__logo .logo {
    max-width: none;
  }

  .kopf__aktionen {
    justify-self: end;
  }

  /* Schlankes Band: links nur die Bildmarke, kein herabhängendes Logo mehr (Sören 16.11.2026). */
  .kopf.ist-versteckt {
    transform: none;
  }

  .menue-knopf {
    display: none;
  }

  .hauptnav {
    display: block;
  }

  .hauptnav__liste {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .hauptnav__liste a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: var(--space-2);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }

  .hauptnav__liste a::after {
    color: var(--color-link);
  }

  /* Unterstrich wächst aus der Mitte; die aktuelle Seite trägt ihn dauerhaft. */
  .hauptnav__liste a::after {
    content: "";
    position: absolute;
    inset: auto var(--space-2) var(--space-2);
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease-out);
  }

  .hauptnav__liste a[aria-current="page"]::after,
  .hauptnav__liste .current-menu-item > a::after {
    transform: none;
  }
}

@media (min-width: 81em) and (hover: hover) {
  .hauptnav__liste a:hover::after {
    transform: none;
  }
}

/* ============================================================ 5a Kopfband breit, Titelblatt */

/* Ab 60em reicht das Kopfband bis an den Bildschirmrand (Sören 16.11.2026): Bildmarke links, Bedienung rechts,
   beide mit dem Rand des Titelblatts. Der Inhalt darunter bleibt bei seiner Containerbreite. */
.kopf__voll {
  display: none;
}

@media (min-width: 60em) {
  .kopf__innen {
    max-width: none;
    padding-inline: max(var(--cover-gutter), env(safe-area-inset-left)) max(var(--cover-gutter), env(safe-area-inset-right));
  }
}

/*
 * Titelblatt (body.hat-titelblatt, ab 60em), Ablauf wie der Startseiten-Held von vezoza.com, drei Zustände (app.js):
 *   .ist-titel            Seitenanfang: kein Band. Ganzes Logo groß oben links, Navigation und Bedienung oben rechts,
 *                         alles liegt auf dem Held. Der Held beginnt am oberen Bildschirmrand (--kopf-platz: 0).
 *   .ist-weg              beim Losscrollen fährt diese Anordnung nach oben weg (und ist für Tastatur gesperrt: inert)
 *   ohne beide Klassen    ab --cover-zone fährt das schlanke Kopfband ein, beim Hochscrollen wieder weg
 * Unter 60em wirkt nichts davon: dort bleibt das normale Kopfband mit Menü-Knopf.
 */
:root {
  --kopf-platz: var(--header-h);
}

/* Messmarken für app.js (IntersectionObserver statt Scroll-Handler): Seitenanfang und Zone bis zum Kopfband. */
.kopf-marke {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 0.75rem;
  pointer-events: none;
  visibility: hidden;
}

.kopf-marke--zone {
  height: var(--cover-zone);
}

@media (min-width: 60em) {
  body.hat-titelblatt {
    --kopf-platz: 0px;
    padding-top: 0;
  }

  /* Höhe und Logo wechseln hier nur, solange das Band verborgen ist: kein Übergang, sonst zöge es beim Einfahren nach. */
  .hat-titelblatt .kopf {
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

  .hat-titelblatt .kopf__innen,
  .hat-titelblatt .kopf__logo .logo {
    transition: none;
  }

  .kopf.ist-weg {
    transform: translateY(-100%);
    box-shadow: none;
  }

  html:not(.menue-offen) .kopf.ist-titel {
    background: transparent;
    box-shadow: none;
    /* Die freie Fläche zwischen Logo und Bedienung gehört dem Held darunter. */
    pointer-events: none;
  }

  html:not(.menue-offen) .kopf.ist-titel .kopf__innen > * {
    pointer-events: auto;
  }

  /* Weicher Auslauf in der Seitenfarbe: Navigation und Knöpfe bleiben über jedem Foto lesbar, hell wie dunkel. */
  html:not(.menue-offen) .kopf.ist-titel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%, color-mix(in srgb, var(--color-bg) 62%, transparent) 42%, transparent 100%);
    pointer-events: none;
  }

  html:not(.menue-offen) .kopf.ist-titel .kopf__innen {
    align-items: start;
    height: auto;
    padding-block: var(--cover-top) var(--space-8);
  }

  /* Logo steht links allein, Navigation rückt nach rechts zur Bedienung. */
  html:not(.menue-offen) .kopf.ist-titel .kopf__innen {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  html:not(.menue-offen) .kopf.ist-titel .hauptnav {
    justify-self: end;
  }

  html:not(.menue-offen) .kopf.ist-titel .kopf__marke {
    display: none;
  }

  html:not(.menue-offen) .kopf.ist-titel .kopf__voll {
    display: block;
    width: auto;
    height: var(--cover-logo-h);
  }

  /* Knöpfe auf dem Foto: eigene Fläche statt nur Rahmen. */
  html:not(.menue-offen) .kopf.ist-titel .kopfknopf {
    background: var(--color-surface);
  }

  /* Ohne Skript gibt es kein Einfahren: Das Titelblatt scrollt dann mit der Seite weg. */
  html:not(.js) .kopf.ist-titel {
    position: absolute;
  }
}

/* Knapp über 81em braucht die deutsche Navigation neben dem großen Logo jeden Platz: Links rücken zusammen. */
@media (min-width: 81em) and (max-width: 89.99em) {
  html:not(.menue-offen) .kopf.ist-titel .hauptnav__liste {
    gap: 0;
  }
}

@media (min-width: 60em) and (hover: hover) {
  html:not(.menue-offen) .kopf.ist-titel .kopfknopf:hover {
    background: var(--color-tint);
  }
}

/* ============================================================ 6 Vollbildmenü */

/*
 * Unterhalb von 81em. Die Fläche kommt aus dem Kopfband herab und deckt alles, auch die Aktionsleiste.
 * Seite dahinter gesperrt: html.menue-offen + body position:fixed mit gemerkter Scrollposition (app.js),
 * weil overflow:hidden allein auf iOS Safari nicht reicht. Das Menü selbst scrollt, ohne die Seite mitzuziehen.
 */
html.menue-offen,
html.dialog-offen {
  overflow: hidden;
}


html.menue-offen body,
html.dialog-offen body {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* Mit der Sperre verschwindet am Desktop die Bildlaufleiste. Ihre Breite (app.js misst sie) bleibt frei,
   sonst rückt die Seite hinter dem Dialog zur Seite. */
html.dialog-offen body {
  padding-inline-end: var(--rollbalken, 0px);
}

html.dialog-offen .kopf {
  inset-inline-end: var(--rollbalken, 0px);
}

.mobilmenu {
  position: fixed;
  inset: var(--kopf-aktuell, var(--header-h)) 0 auto;
  height: calc(100vh - var(--kopf-aktuell, var(--header-h)));
  height: calc(100dvh - var(--kopf-aktuell, var(--header-h)));
  display: flex;
  flex-direction: column;
  padding: var(--space-3) max(var(--gutter), env(safe-area-inset-left)) calc(var(--space-5) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-right));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
  color: var(--color-text);
  --color-focus: var(--color-link);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--space-3)));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.mobilmenu.ist-offen {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s;
}

/* Zeilen folgen leicht versetzt. */
.mobilmenu__liste > li,
.mobilmenu__fuss {
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mobilmenu.ist-offen .mobilmenu__liste > li,
.mobilmenu.ist-offen .mobilmenu__fuss {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * var(--stagger-menu) + 40ms), transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * var(--stagger-menu) + 40ms);
}

.mobilmenu__nav {
  padding-block-end: var(--space-4);
}

.mobilmenu__liste,
.mobilmenu__unter {
  margin: 0;
}

/* Haarlinie zwischen den Gruppen */
.mobilmenu__gruppe {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: var(--border) solid var(--color-line);
}

.mobilmenu__liste > .mobilmenu__gruppe:nth-child(2) {
  border-block-start: 0;
  margin-block-start: 0;
}

/* Hauptpunkt: Startseite, Kopf einer Gruppe, Kontakt */
.mobilmenu__punkt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.25rem;
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-tile);
  color: var(--color-text);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mobilmenu__punkt::-webkit-details-marker {
  display: none;
}

.mobilmenu__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-link);
}

.mobilmenu__pfeil {
  margin-inline-start: auto;
  transition: transform var(--dur) var(--ease-out);
}

details[open] > .mobilmenu__punkt .mobilmenu__pfeil {
  transform: rotate(180deg);
}

/* Unterpunkte: Icon in einer kleinen gerahmten Kachel */
.mobilmenu__unter {
  padding-block-end: var(--space-1);
  padding-inline-start: var(--space-8);
}

.mobilmenu__unter a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3rem;
  margin-inline: calc(-1 * var(--space-2)) calc(-1 * var(--space-3));
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-tile);
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mobilmenu__kachel {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-tile);
  background: var(--color-surface);
  color: var(--color-link);
}

.mobilmenu__punkt:active,
.mobilmenu__unter a:active {
  background: var(--color-tint);
  transition: none;
}

/* Aktive Seite: mit der Tönung hinterlegt */
.mobilmenu__punkt[aria-current="page"],
.mobilmenu__unter a[aria-current="page"] {
  background: var(--color-tint);
}

.mobilmenu__fuss {
  display: grid;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line);
}

/* Notfall im Menü: Karte, Text in Zeilen untereinander */
.mobilmenu .notfall {
  border-radius: var(--radius-tile);
}

.mobilmenu .notfall__link {
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-tile);
}

.mobilmenu .notfall__icon {
  width: 1.75rem;
  height: 1.75rem;
}

.mobilmenu .notfall__text {
  flex-direction: column;
}

.mobilmenu__schalter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
}

.mobilmenu__trenner {
  width: var(--border);
  height: var(--space-5);
  margin-inline: var(--space-3);
  background: var(--color-line);
}

.mobilmenu__angaben {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-block-start: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-variant-numeric: tabular-nums;
}

.mobilmenu__angaben li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.mobilmenu__angaben .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.05em;
  color: var(--color-text-3);
}

.mobilmenu__angaben li > span > span {
  display: block;
}

/* Offenes Menü: Der Menü-Knopf ist ein rundes X, Sprache und Hell/Dunkel stehen unten im Menü. */
.menue-knopf[aria-expanded="true"] {
  width: var(--tap);
  padding-inline: 0;
  justify-content: center;
}

.menue-knopf[aria-expanded="true"] .menue-knopf__text,
html.menue-offen .kopf__aktionen > .sprachschalter,
html.menue-offen .kopf__aktionen > .theme-schalter {
  display: none;
}

@media (min-width: 81em) {
  .mobilmenu {
    display: none !important;
  }
}

/* ============================================================ 7 Bausteine */

/* ---- Seitenkopf */
.seitenkopf {
  padding-block: var(--space-8) var(--space-7);
}

.seitenkopf__innen > * + * {
  margin-block-start: var(--space-4);
}

.seitenkopf__titel {
  max-width: 22ch;
}

.seitenkopf__aktionen {
  margin-block-start: var(--space-6);
}

@media (min-width: 48em) {
  .seitenkopf {
    padding-block: var(--space-11) var(--space-9);
  }
}

/* ---- Karten: weiße Fläche auf dem Flächenblau, ohne Rahmen und Schatten (Markenbuch). */
.karten {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.sektion--flaeche .karte {
  background: var(--color-bg);
}

.karte__icon {
  width: 2rem;
  height: 2rem;
  margin-block-end: var(--space-2);
  color: var(--color-link);
}

.karte__text {
  color: var(--color-text-2);
}

/* Ganze Karte als Link: Der Link im Titel spannt die Fläche auf. */
.karte--link .karte__titel a {
  color: inherit;
  text-decoration: none;
}

.karte--link .karte__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.karte--link {
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.karte--link:active {
  background: var(--color-tint);
  transform: scale(0.99);
}

.karte__pfeil {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  color: var(--color-link);
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .karte--link:hover .karte__pfeil {
    transform: translateX(var(--space-1));
  }
}

@media (min-width: 48em) {
  .karten {
    gap: var(--space-4);
  }

  .karte {
    padding: var(--space-6);
  }
}

/* ---- Merkmalliste mit Icons */
.merkmale {
  display: grid;
  gap: var(--space-4);
}

.merkmale li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.merkmale .icon {
  margin-block-start: 0.1em;
  color: var(--color-link);
}

.auf-blau .merkmale .icon,
.sektion--blau .merkmale .icon {
  color: var(--color-light);
}

/* ---- Linkliste (404, Verweise) */
.linkliste {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.linkliste__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.linkliste__link .icon {
  color: var(--color-link);
  transition: transform var(--dur) var(--ease-out);
}

.linkliste__link:active {
  background: var(--color-tint);
}

@media (hover: hover) {
  .linkliste__link:hover .icon {
    transform: translateX(var(--space-1));
  }
}

/* ---- Bild */
.bild {
  margin: 0;
}

.bild__rahmen {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-tint);
}

.bild__bild img {
  width: 100%;
  height: auto;
}

/* Festes Seitenverhältnis: class="bild bild--4-3" usw. */
.bild--16-9 .bild__bild img { aspect-ratio: 16 / 9; object-fit: cover; }
.bild--4-3 .bild__bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.bild--1-1 .bild__bild img { aspect-ratio: 1 / 1; object-fit: cover; }
.bild--3-4 .bild__bild img { aspect-ratio: 3 / 4; object-fit: cover; }

.bild__unterschrift {
  margin-block-start: var(--space-2);
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* KI-Label: Vorgabe Pflichtstandard §5, 1:1 von innovate-systems.de. Dezentes Wasserzeichen, nicht vergrößern. */
.bild__ki {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: var(--ki-label-bg);
  color: var(--ki-label-text);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ---- Logo auf Seitenflächen */
.logo--voll {
  width: var(--logo-w);
  height: auto;
}

.logo--marke {
  width: auto;
  height: var(--mark-h);
}

/* ---- FAQ */
.faq__titel {
  margin-block-end: var(--space-5);
}

.faq__liste {
  border-block-start: var(--border) solid var(--color-line);
}

.faq__eintrag {
  border-block-end: var(--border) solid var(--color-line);
}

.faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding-block: var(--space-4);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
  cursor: pointer;
  list-style: none;
}

.faq__frage::-webkit-details-marker {
  display: none;
}

.faq__pfeil {
  color: var(--color-link);
  transition: transform var(--dur) var(--ease-out);
}

.faq__eintrag[open] .faq__pfeil {
  transform: rotate(180deg);
}

.faq__antwort {
  padding-block-end: var(--space-5);
  color: var(--color-text-2);
}

/* Sanftes Aufklappen, wo der Browser es kann; sonst öffnet die Antwort sofort. */
@supports (interpolate-size: allow-keywords) {
  .faq__eintrag {
    interpolate-size: allow-keywords;
  }

  .faq__eintrag::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
  }

  .faq__eintrag[open]::details-content {
    block-size: auto;
  }
}

/* ---- Blaues Band */
.cta-band__innen {
  display: grid;
  gap: var(--space-6);
}

.cta-band__text > * + * {
  margin-block-start: var(--space-2);
}

@media (min-width: 60em) {
  .cta-band__innen {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-9);
  }
}

/* ---- Notfall: getönte Fläche, Symbol im Logo-Rot. Rot gefüllt bleibt allein der Button. */
.notfall {
  border-radius: var(--radius);
  background: var(--color-tint);
  color: var(--color-text);
}

.notfall__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  color: inherit;
  text-decoration: none;
}

.notfall__icon {
  color: var(--color-accent);
}

.notfall__text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  line-height: var(--leading-small);
}

.notfall__text .tel {
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.notfall__zusatz {
  flex-basis: 100%;
  color: var(--color-text-2);
  font-size: var(--text-small);
}

/* Leiste unter dem Kopfband: nur mobil, eine Zeile, 44 px. Am Desktop steht der Anruf im Kopfband. */
.notfall--leiste {
  border-radius: 0;
}

.notfall--leiste .notfall__link {
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding-block: 0;
  padding-inline: var(--gutter);
  border-radius: 0;
  font-size: var(--text-small);
  white-space: nowrap;
}

.notfall--leiste .notfall__text {
  flex-wrap: nowrap;
  gap: 0 var(--space-1);
}

@media (min-width: 48em) {
  .notfall--leiste {
    display: none;
  }
}

/* ============================================================ 8 Formular */

/*
 * Felder weiß mit grauem Rahmen, Schrift 17 px (nie unter 16 px, sonst zoomt iOS).
 * Die Beschriftung steht im Feld und rückt beim Fokus oder Ausfüllen nach oben (Pflichtstandard §7, Vorbild vezoza.com).
 * Sie bleibt ein echtes <label for> und steht im Markup nach dem Feld; placeholder=" " dient nur :placeholder-shown.
 * Aktiv: blauer Rahmen. Fehler: roter Rahmen, Symbol und ein Satz.
 */
.formular__titel {
  margin-block-end: var(--space-4);
}

.formular__form {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40em) {
  .formular__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feld--breit {
    grid-column: 1 / -1;
  }
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Beschriftung über dem Feld: nur noch für Felder außerhalb von .feld__rahmen. */
.feld__label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-small);
}

.feld__eingabe,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-4);
  border: var(--border) solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: max(16px, var(--text-input));
  line-height: 1.4;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.feld__eingabe:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-link);
  box-shadow: 0 0 0 var(--border-control) var(--color-link);
}

.feld__eingabe[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--border) var(--color-error);
}

/* ---- Beschriftung im Feld: <div class="feld__rahmen"> Feld, danach <label class="feld__label"> */
.feld__rahmen {
  position: relative;
  display: flex;
}

.feld__rahmen > .feld__eingabe {
  min-height: var(--field-h);
  padding-block: calc(var(--space-6) + var(--space-1)) var(--space-2);
}

.feld__rahmen > textarea.feld__eingabe {
  min-height: 9.5rem;
  padding-block-start: var(--space-7);
}

.feld__rahmen > select.feld__eingabe {
  padding-inline-end: var(--space-9);
  cursor: pointer;
}

/* Ruhend: in der Feldmitte, so groß wie die Eingabe. Oben: 15 px, halbfett. Bewegt wird nur transform. */
.feld__rahmen > .feld__label {
  position: absolute;
  inset-block-start: calc((var(--field-h) - 1.5rem) / 2);
  inset-inline: calc(var(--space-4) + var(--border)) var(--space-4);
  overflow: hidden;
  color: var(--color-text-3);
  font-size: max(16px, var(--text-input));
  font-weight: var(--weight-regular);
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

[dir="rtl"] .feld__rahmen > .feld__label {
  transform-origin: right top;
}

.feld__rahmen > .feld__eingabe:focus + .feld__label,
.feld__rahmen > .feld__eingabe:not(:placeholder-shown) + .feld__label,
.feld__rahmen > select + .feld__label {
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-1 * var(--space-3))) scale(var(--label-float-scale));
}

/* Eigene Regel: Kennt ein Browser :autofill nicht, verwirft er sonst die ganze Liste darüber. */
.feld__rahmen > .feld__eingabe:autofill + .feld__label {
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-1 * var(--space-3))) scale(var(--label-float-scale));
}

.feld__rahmen > .feld__eingabe:-webkit-autofill + .feld__label {
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-1 * var(--space-3))) scale(var(--label-float-scale));
}

.feld__rahmen > .feld__eingabe:focus + .feld__label {
  color: var(--color-link);
}

/* Mehrzeiliges Feld: Streifen hinter der Beschriftung, damit gescrollter Text nicht unter ihr durchläuft. */
.feld__rahmen--text::before {
  content: "";
  position: absolute;
  inset: var(--border-control) var(--space-4) auto var(--border-control);
  height: calc(var(--space-7) - var(--border-control));
  border-start-start-radius: var(--radius);
  background: var(--color-surface);
  pointer-events: none;
}

.feld__rahmen--text > .feld__label {
  z-index: 1;
}

/* Auswahlfeld: Pfeil rechts, die Beschriftung steht immer oben (ein Auswahlfeld ist nie leer). */
.feld__rahmen--wahl::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--field-h) / 2 - var(--space-2));
  inset-inline-end: var(--space-5);
  width: var(--space-2);
  height: var(--space-2);
  border-block-end: var(--border-control) solid var(--color-text-3);
  border-inline-end: var(--border-control) solid var(--color-text-3);
  transform: rotate(45deg);
  pointer-events: none;
}

.feld__hinweis {
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-error);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-small);
}

.feld__fehler:empty {
  display: none;
}

.feld__fehler .icon,
.formular__status .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.formular__topf {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__absenden {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.formular__absenden .btn {
  width: 100%;
}

@media (min-width: 36em) {
  .formular__absenden .btn {
    width: auto;
    min-width: 12rem;
  }
}

.formular__hinweis {
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* Statuszeile: Fehler und Erfolg nie als gefüllte Fläche in Rot oder Grün, immer Symbol und Text. */
.formular__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-tint);
  font-weight: var(--weight-semibold);
}

.formular__status:empty {
  display: none;
}

.formular__status:focus {
  outline: none;
}

.formular__status.ist-erfolg .icon {
  color: var(--color-success);
}

.formular__status.ist-fehler .icon {
  color: var(--color-error);
}

/* ---- Anfrage als Dialog (template-parts/anfragedialog.php) */

/*
 * Aufbau wie das Kontakt-Popup von vezoza.com. Unter 48em echtes Vollbild über Kopfband und Aktionsleiste,
 * ab 48em eine mittige Karte auf abgedunkelter Seite. Seite dahinter gesperrt wie beim Vollbildmenü
 * (html.dialog-offen, app.js). Nur das Blatt scrollt, ohne die Seite mitzuziehen.
 */
.anfragedialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.anfragedialog[hidden] {
  display: none;
}

.anfragedialog.ist-offen {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out), visibility 0s;
}

.anfragedialog__blatt {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
  color: var(--color-text);
  transform: translateY(var(--space-3));
  transition: transform var(--dur-fast) var(--ease-out);
}

.anfragedialog.ist-offen .anfragedialog__blatt {
  transform: none;
  transition: transform var(--dur-slow) var(--ease-out);
}

.anfragedialog__blatt:focus {
  outline: none;
}

/* Kopf bleibt beim Scrollen stehen: Titel links, Schließen-Knopf rechts oben. */
.anfragedialog__kopf {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: calc(var(--space-3) + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) var(--space-3) max(var(--gutter), env(safe-area-inset-left));
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-line);
}

.anfragedialog__titel {
  margin: 0;
}

.anfragedialog__zu {
  flex: none;
  width: var(--tap);
  padding: 0;
}

.anfragedialog__inhalt {
  padding: var(--space-5) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-7) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}

/* Der stehende Kopf darf Meldung und Feld nicht verdecken, wenn das Skript dorthin springt. */
.anfragedialog .formular__status,
.anfragedialog .feld__rahmen > .feld__eingabe {
  scroll-margin-block: var(--space-11) var(--space-5);
}

.anfragedialog__lead {
  max-width: var(--measure);
  margin-block-end: var(--space-5);
  color: var(--color-text-2);
}

@media (min-width: 48em) {
  .anfragedialog {
    align-items: center;
    justify-content: center;
    padding: var(--space-7);
    background: var(--color-scrim);
  }

  .anfragedialog__blatt {
    flex: 0 1 auto;
    width: 100%;
    max-width: 42rem;
    max-height: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
  }

  .anfragedialog__kopf,
  .anfragedialog__inhalt {
    padding-inline: var(--space-7);
  }

  .anfragedialog__kopf {
    padding-block: var(--space-5) var(--space-4);
  }

  .anfragedialog__inhalt {
    padding-block: var(--space-6) var(--space-7);
  }
}

/* ============================================================ 9 Rechtsseite */

/* Aufbau wie vezoza.com: Inhaltsverzeichnis am Desktop neben dem Text und mitlaufend, mobil aufklappbar darüber. */
.recht-kopf__art {
  color: var(--color-text-3);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-small);
}

.recht-kopf__kontakt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-2);
}

.recht-kopf__kontakt .icon {
  color: var(--color-link);
}

.recht-kopf__kontakt a {
  font-weight: var(--weight-semibold);
}

.recht {
  padding-block-start: 0;
}

.recht__raster {
  display: grid;
  gap: var(--space-5);
}

.recht__toc {
  display: none;
}

.recht__toc-mobil {
  border-radius: var(--radius);
  background: var(--color-surface);
}

.recht__toc-mobil summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding-inline: var(--space-4);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

.recht__toc-mobil summary::-webkit-details-marker {
  display: none;
}

.recht__toc-mobil summary .icon {
  color: var(--color-link);
  transition: transform var(--dur) var(--ease-out);
}

.recht__toc-mobil[open] summary .icon {
  transform: rotate(180deg);
}

.recht__toc-mobil ol {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  list-style: none;
}

.recht__toc-mobil a,
.recht__toc a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  text-decoration: none;
}

.recht__text {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-surface);
  max-width: none;
}

.recht__text > * {
  max-width: var(--measure);
}

.recht__text p,
.recht__text li {
  color: var(--color-text-2);
}

.recht__text strong {
  color: var(--color-text);
}

/* Offene Angaben in der Vorschau: sichtbar markiert, bis sie bestätigt und ersetzt sind. */
.platzhalter {
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  outline: var(--border) dashed var(--color-line-strong);
  background: var(--color-tint);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.recht__stand {
  margin-block-start: var(--space-8) !important;
  color: var(--color-text-3) !important;
  font-size: var(--text-small);
}

@media (min-width: 64em) {
  .recht__raster {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-9);
    align-items: start;
  }

  .recht__toc-mobil {
    display: none;
  }

  .recht__toc {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h-compact) + var(--space-6));
    max-height: calc(100dvh - var(--header-h-compact) - var(--space-9));
    overflow-y: auto;
  }

  .recht__toc-titel {
    margin-block-end: var(--space-2);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .recht__toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: var(--border) solid var(--color-line);
  }

  .recht__toc a {
    min-height: 2.25rem;
    margin-inline-start: -1px;
    padding: var(--space-1) var(--space-4);
    border-inline-start: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }

  .recht__toc a.ist-aktiv {
    border-inline-start-color: var(--color-link);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  .recht__text {
    padding: var(--space-9);
  }
}

@media (min-width: 64em) and (hover: hover) {
  .recht__toc a:hover {
    color: var(--color-text);
  }
}

/* ============================================================ 10 Fußzeile */

/* Steht in assets/css/fuss.css (eigene Datei seit 16.11.2026), samt Platz für die mobile Aktionsleiste. */

/* ============================================================ 11 Aktionsleiste, Nach oben */

/*
 * Mobile Aktionsleiste (Pflichtstandard §17): eine feste Leiste, nur Icons. Der Anruf ist die Hauptaktion
 * und trägt als einziges Element das CTA-Rot. Nichts schwebt darüber.
 */
.aktionsleiste {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-actionbar);
  padding: var(--space-2) max(var(--space-3), env(safe-area-inset-left)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-right));
  background: var(--color-surface);
  box-shadow: var(--shadow-bar);
}

.aktionsleiste__liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1.5fr);
  gap: var(--space-2);
  margin: 0;
}

.aktionsleiste__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-link);
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.aktionsleiste__knopf:active {
  background: var(--color-tint);
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}

.aktionsleiste__knopf--haupt {
  background: var(--color-cta);
  color: var(--color-on-cta);
}

.aktionsleiste__knopf--haupt:active {
  background: var(--color-cta-hover);
}

.aktionsleiste__knopf:not(.aktionsleiste__knopf--haupt) {
  background: var(--color-tint);
}

.aktionsleiste__knopf:not(.aktionsleiste__knopf--haupt):active {
  background: var(--color-line);
}

.aktionsleiste__knopf .icon {
  flex: none;
}

/* Platz für die Leiste am Seitenende hält die Fußzeile frei (fuss.css). */

@media (min-width: 48em) {
  .aktionsleiste {
    display: none;
  }
}

/* Nach oben: nur ab 48em (mobil gibt es keine schwebenden Knöpfe). Der Ring zeigt den Lesefortschritt. */
.nach-oben {
  display: none;
}

@media (min-width: 48em) {
  .nach-oben {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: var(--z-totop);
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--color-surface);
    color: var(--color-link);
    box-shadow: var(--shadow-float);
    cursor: pointer;
    /* --hub setzt app.js: So weit ragt die unterste Fußzeile ins Bild, der Knopf bleibt darüber. */
    translate: 0 calc(-1 * var(--hub, 0px));
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-3)) scale(0.92);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }

  .nach-oben.ist-sichtbar {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
  }

  .nach-oben.ist-sichtbar:active {
    transform: scale(var(--press-scale));
  }

  .nach-oben > * {
    grid-area: 1 / 1;
  }

  .nach-oben__ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .nach-oben__ring circle {
    fill: none;
    stroke: var(--color-link);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--fortschritt, 0) * 100);
  }
}

/* ---- Verweis mit Pfeil: Textlink im Fließlayout, Tippfläche 44 px. Markup: <a class="pfeillink"><span>Text</span>icon</a> */
.pfeillink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  color: var(--color-link);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.pfeillink .icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--dur) var(--ease-out);
}

.pfeillink:active {
  opacity: 0.7;
}

@media (hover: hover) {
  .pfeillink:hover span {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
  }

  .pfeillink:hover .icon {
    transform: translateX(var(--space-1));
  }
}

/* ---- Große Ziffer (Preis, Maß, Anzahl) in der Linkfarbe. Rot bleibt dem Anruf vorbehalten. */
.ziffer {
  display: block;
  color: var(--color-link);
  font-size: var(--text-figure);
  font-weight: var(--weight-bold);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================ 12 Bewegung */

/*
 * Einblenden beim Scrollen: data-reveal am Element, optional data-reveal-gruppe am Elternteil (Kinder versetzt).
 * app.js markiert nur Elemente unterhalb des ersten Bildschirms (data-reveal-wartet); was beim Laden sichtbar
 * ist, steht sofort da (kein Aufblitzen, LCP unberührt). Ohne Skript ist alles sichtbar.
 */
[data-reveal-wartet] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
}

[data-reveal-fertig] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)), transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger));
}

/*
 * Überschrift Wort für Wort aus einer Maske: data-worte am Element (nur reiner Text). app.js setzt jedes Wort in
 * .wort > .wort__innen und lässt nur Überschriften unterhalb des ersten Bildschirms warten. Der ganze Satz bleibt
 * für Bildschirmleser als ein Stück erhalten. Ohne Skript und bei reduzierter Bewegung steht der Text einfach da.
 */
.wort {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.04em;
  vertical-align: bottom;
  /* Platz für Unterlängen, damit die Maske nichts abschneidet. */
  padding-block-end: 0.14em;
  margin-block-end: -0.14em;
}

.wort__innen {
  display: inline-block;
}

[data-worte-wartet] .wort__innen {
  transform: translateY(110%);
}

[data-worte-fertig] .wort__innen {
  transform: none;
  transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger) * 0.75);
}

/* Hell/Dunkel wechselt weich statt hart (nur während des Umschaltens, app.js setzt die Klasse kurz). */
html.theme-wechsel,
html.theme-wechsel *,
html.theme-wechsel *::before,
html.theme-wechsel *::after {
  transition: background-color var(--dur) var(--ease-in-out), color var(--dur) var(--ease-in-out), border-color var(--dur) var(--ease-in-out), fill var(--dur) var(--ease-in-out), stroke var(--dur) var(--ease-in-out) !important;
}

/* Weniger Bewegung: Systemeinstellung oder Schalter "Animations off" in der Fußzeile (data-motion="aus"). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  [data-reveal-wartet] {
    opacity: 1;
    transform: none;
  }

  [data-worte-wartet] .wort__innen {
    transform: none;
  }

  /* Kopfband der Titelblatt-Seiten: ohne Fahrt, nur ein- und ausblenden. */
  .kopf.ist-weg {
    transform: none !important;
    opacity: 0;
    visibility: hidden;
  }

  .anfragedialog__blatt,
  .mobilmenu,
  .mobilmenu__liste > li,
  .mobilmenu__fuss,
  .btn:active,
  .kopfknopf:active {
    transform: none !important;
  }
}

html[data-motion="aus"] *,
html[data-motion="aus"] *::before,
html[data-motion="aus"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}

html[data-motion="aus"] .kopf.ist-weg {
  transform: none;
  opacity: 0;
  visibility: hidden;
}

html[data-motion="aus"] [data-reveal-wartet] {
  opacity: 1;
  transform: none;
}

html[data-motion="aus"] [data-worte-wartet] .wort__innen {
  transform: none;
}

/* Hoher Kontrast: Rahmen an Flächen, die sich sonst nur über die Farbe abheben. */
@media (prefers-contrast: more) {
  .karte,
  .linkliste__link,
  .recht__text,
  .notfall {
    outline: var(--border) solid var(--color-line-strong);
  }
}

@media (forced-colors: active) {
  .btn,
  .kopfknopf {
    border: var(--border-control) solid ButtonText;
  }
}

@media print {
  .kopf,
  .aktionsleiste,
  .nach-oben,
  .fuss__schalter {
    display: none !important;
  }

  body {
    padding: 0;
  }
}

/* ============================================================ 13 Sprache */

/* Kopfband: ein Knopf mit dem Kürzel der anderen Sprache. Vollbildmenü: beide Sprachen, die aktuelle markiert. */
.sprachschalter {
  text-decoration: none;
  letter-spacing: 0.04em;
}

.sprachwahl {
  display: inline-flex;
  gap: var(--space-2);
}

.sprachwahl__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: var(--tap);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-text-2);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.sprachwahl__link[aria-current] {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.sprachwahl__link:active {
  background: var(--color-tint);
}

/* Sehr schmale Geräte: Sprache steht im Vollbildmenü, im Kopfband bleiben Design-Schalter und Menü. */
@media (max-width: 22.49em) {
  .kopf .sprachschalter {
    display: none;
  }
}