/* ================================================================
   ENEVO · Version 3 · nach dem Stilbuch "Aker — darkroom gallery wall"
   Monumentale Schrift ueber gedaempfter Fotografie, ein einziger warmer
   Akzent, Haarlinien statt Rahmen, keine Schatten, keine Verlaeufe.

   Abweichung von der Vorlage: Proxima Nova ist kommerziell lizenziert
   und liesse sich nicht selbst hosten. Das Stilbuch nennt Montserrat
   als Ersatz; die Gewichte 300 bis 600 sind uebernommen.
   ================================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

:root {
  /* Farben */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-char: #1c1c1c;
  --color-midnight: #070707;
  --color-iron: #262626;
  --color-slate: #38464a;
  --color-mist: #e5e4e4;
  --color-smoke: #8d8d8d;
  --color-pewter: #666666;
  --color-ember: #b75928;
  --color-pine: #193f32;
  --color-tide: #002934;
  --color-driftwood: #537179;
  --color-cedar: #776157;
  --color-coral: #df6a6b;
  --color-primary-action-fill: #494949;

  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  --text-body: 15px;        --leading-body: 1.5;        --tracking-body: 0.15px;
  --text-subheading: 18px;  --leading-subheading: 1.5;  --tracking-subheading: 0.18px;
  --text-heading-sm: 22px;  --leading-heading-sm: 1.25; --tracking-heading-sm: -0.44px;
  --text-heading: 36px;     --leading-heading: 1.2;     --tracking-heading: -0.72px;
  --text-heading-lg: 62px;  --leading-heading-lg: 1.1;  --tracking-heading-lg: -1.55px;
  --text-display: 168px;    --leading-display: 0.8;     --tracking-display: -4.2px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --spacing-4: 4px;   --spacing-5: 5px;   --spacing-6: 6px;   --spacing-8: 8px;
  --spacing-10: 10px; --spacing-12: 12px; --spacing-13: 13px; --spacing-14: 14px;
  --spacing-16: 16px; --spacing-19: 19px; --spacing-20: 20px; --spacing-22: 22px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px;

  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 16px;
  --element-gap: 16px;

  --radius-small: 3.2px;
  --radius-cards: 8px;
  --radius-images: 8px;
  --radius-buttons: 80px;
  --radius-badges: 1584px;

  --surface-paper: #ffffff;
  --surface-mist: #e5e4e4;
  --surface-pine: #193f32;
  --surface-tide: #002934;
  --surface-char: #1c1c1c;
  --surface-midnight: #070707;

  /* Seitenrand: die Vorlage arbeitet mit 40px am Hero und 24px am Rand. */
  --rand: clamp(20px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-synthesis-weight: none;
}

/* Die Flaechen, die der Browser stellt, gehoeren zur Gestaltung. */
::selection { background: var(--color-ember); color: var(--color-paper); }
:root { accent-color: var(--color-ember); caret-color: var(--color-ink); scrollbar-color: var(--color-smoke) var(--color-paper); scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 3px; }

/* Text nur fuer Vorleseprogramme. Die Regel stand bisher allein in
   v1-bausteine.css, das nur zwei der vier Layouts laden. Auf den
   uebrigen Seiten standen die Beschriftungen der Netzschaltflaechen im
   Fuss sichtbar in den Kreisen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-char); color: var(--color-paper); padding: var(--spacing-16) var(--spacing-24); }
.sprung:focus { left: 0; }

/* --- Bahn ---------------------------------------------------------- */
.bahn { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--rand); }
.bahn--voll { max-width: none; padding-inline: 0; }
/* Fliesstext eines Beitrags liest sich schmaler besser als die volle Bahn. */
.bahn--schmal { max-width: 76ch; }

/* --- Schrift --------------------------------------------------------
   Die Stimme spricht im Gewicht 300, auch wenn sie laut wird. */
h1, h2, h3, h4 { margin: 0; font-weight: var(--font-weight-light); }

.wortmarke-gross {
  font-size: clamp(64px, 12vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: -0.025em;
  font-weight: var(--font-weight-light);
}
/* Lange Woerter wie "Personalstrategie" laufen bei 168px aus dem Rahmen.
   Sie bekommen eine eigene Staffelung, die dieselbe Wirkung behaelt. */
.wortmarke-gross--lang { font-size: clamp(34px, 7.4vw, 112px); }
.titel-lg {
  font-size: clamp(38px, 5.6vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: -0.025em;
  font-weight: var(--font-weight-light);
  text-wrap: balance;
}
.titel {
  font-size: clamp(28px, 3.4vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-light);
  text-wrap: balance;
}
.titel-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-regular);
}

/* Overline: im Stilbuch ausdruecklich vorgesehen, linksbuendig. */
.overline {
  font-size: var(--spacing-12); line-height: 1.4;
  letter-spacing: 0.12px; color: var(--color-pewter);
  margin: 0 0 var(--spacing-8); font-weight: var(--font-weight-regular);
}
.auf-dunkel .overline { color: var(--color-mist); }
/* Overline im Akzent. Reines Ember erreicht auf Char nur 3,63:1 und
   traegt bei 12px nicht; diese aufgehellte Fassung desselben Farbtons
   kommt auf 6,3:1. Auf hellem Grund gilt die dunklere Fassung. */
.overline--akzent { color: #8f4520; }
.abschnitt--dunkel .overline--akzent,
.karte--dunkel .overline--akzent,
.karte--pine .overline--akzent,
.karte--tide .overline--akzent,
.karte--bild .overline--akzent,
.auf-dunkel .overline--akzent { color: #d98a5a; }

p { margin: 0 0 var(--spacing-16); }
p:last-child { margin-bottom: 0; }
.fliess { max-width: 600px; }
/* Der Abstand steht hier ausdruecklich am Absatz: v1-bausteine.css
   setzt auf den uebernommenen Seiten p { margin: 0 } und wird spaeter
   geladen. Ohne diese Regel klebten dort mehrere Absaetze aneinander. */
.fliess p { font-size: var(--text-body); line-height: var(--leading-body); margin: 0 0 var(--spacing-16); }
.fliess p:last-child { margin-bottom: 0; }
.fliess--gross p { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }
/* Lora nur als Fliesstext-Akzent, nie ueber 18px, nie als Ueberschrift. */
.serifensatz { font-family: var(--font-serif); font-size: var(--text-subheading); line-height: 1.5; letter-spacing: 0.011em; max-width: 600px; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.auf-dunkel { color: var(--color-paper); }
.auf-dunkel a { color: var(--color-paper); }

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

/* --- Aktionen -------------------------------------------------------
   Voreinstellung ist der Textknopf mit Pfeil, ohne Fuellung und ohne
   Rahmen. Der gefuellte dunkle Knopf bleibt die Ausnahme. */
.tat {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  font-size: var(--text-body); font-weight: var(--font-weight-regular);
  text-decoration: none; color: inherit;
}
.tat::after { content: "\2192"; font-size: 16px; line-height: 1; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.tat:hover::after { transform: translateX(4px); }
.tat:hover { text-decoration: underline; text-decoration-color: var(--color-ember); }
/* Als Schaltflaeche traegt .tat sonst die Voreinstellungen des Browsers. */
button.tat { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.tat--rahmen {
  border: 1px solid currentColor; border-radius: var(--radius-buttons);
  padding: var(--spacing-19) var(--spacing-16);
}
.tat--voll {
  background: var(--color-char); color: var(--color-paper);
  border-radius: var(--radius-buttons);
  padding: var(--spacing-19) var(--spacing-16);
  font-weight: var(--font-weight-medium); font-size: var(--spacing-13);
}
.tat--voll:hover { background: var(--color-primary-action-fill); text-decoration: none; }
/* button.tat setzt oben padding: 0 und background: none, und weil
   Element plus Klasse staerker wiegt als die Klasse allein, verlieren
   Schaltflaechen sonst ihre Polsterung und ihre Flaeche. */
/* Auf dunklem Grund faellt die gefuellte Schaltflaeche sonst mit der
   Flaeche zusammen und sieht aus wie ein blosser Verweis. */
.abschnitt--dunkel .tat--voll, .karte--dunkel .tat--voll {
  background: var(--color-paper); color: var(--color-char);
}
.abschnitt--dunkel .tat--voll:hover, .karte--dunkel .tat--voll:hover { background: var(--color-mist); }
button.tat--rahmen, button.tat--voll { padding: var(--spacing-19) var(--spacing-16); }
button.tat--voll { background: var(--color-char); }
@media (prefers-reduced-motion: reduce) { .tat::after { transition: none; } }

/* --- Kontaktwege ------------------------------------------------------
   Die Wege standen nur durch ein Leerzeichen getrennt nebeneinander und
   klebten aneinander. Sie liegen jetzt in einer eigenen Reihe mit
   festem Abstand und brechen auf schmalen Geraeten sauber um. */
.wege {
  display: flex; flex-wrap: wrap;
  gap: var(--spacing-20) var(--spacing-32);
  align-items: center;
}

/* --- Akzent im Satz --------------------------------------------------
   Ein Teil der Ueberschrift steht im Orange des Systems. Auf hellem
   Grund die dunklere Fassung (6,9:1), auf dunklem die aufgehellte
   (6,3:1); reines Ember traegt auf keinem von beiden. */
.hl { color: #8f4520; }
.abschnitt--dunkel .hl, .auf-dunkel .hl, .schluss .hl { color: #d98a5a; }

/* Kurze Linie unter der Overline, wie auf den uebrigen Seiten. */
.akzentlinie {
  display: block; width: 84px; height: 2px; border: 0; margin: 0 0 var(--spacing-24);
  background: #8f4520;
}
.abschnitt--dunkel .akzentlinie { background: #d98a5a; }

/* --- Abschnitte ------------------------------------------------------ */
.abschnitt { padding-block: var(--section-gap); }
/* Seitenkopf: wie die uebernommenen Koepfe der uebrigen Seiten
   (.hero--sub) bildschirmfuellend, mit derselben Polsterung. So fangen
   alle Unterseiten gleich an und das Bild darunter sitzt ueberall an
   derselben Stelle. */
.abschnitt--kopf {
  min-height: 100svh; padding-block: clamp(56px, 4rem + 3vw, 104px);
  display: grid; align-content: center;
}
.abschnitt--kopf .abschnitt__kopf { margin-bottom: var(--spacing-32); }
.abschnitt--dunkel { background: var(--color-char); color: var(--color-paper); }
.abschnitt--mist { background: var(--color-mist); }
.abschnitt__kopf { margin-bottom: var(--spacing-48); }
.abschnitt__kopf .titel, .abschnitt__kopf .titel-lg { margin-bottom: var(--spacing-24); }

/* --- Hero ------------------------------------------------------------
   Nach dem Vorbild gemessen: Rand 24px, die Wortmarke als gezeichnete
   Marke unten links (rund 510px breit), der Einleitungssatz in der
   Serifenschrift links auf halber Hoehe, und rechts ein schwebendes
   Feld aus halbtransparenten Karten. */
.hero { position: relative; min-height: 100svh; }
.hero__bild { position: absolute; inset: 0; overflow: hidden; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Hero-Video ------------------------------------------------------
   Voller Rahmen, kein Beschnitt. Die frueher gelieferte Aufnahme trug
   die Wortmarke eingebrannt oben rechts; dafuer stand hier 118 Prozent
   Hoehe und unten buendig. Die jetzige fuehrt die Marke mittig in Vor-
   und Nachspann, ein Beschnitt nach oben wuerde sie aus der Mitte
   ruecken. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; background: #070707 center/cover no-repeat;
}
/* Das Video wechselt zwischen sehr dunklen und sehr hellen Szenen
   (gemessene mittlere Helligkeit 20 bis 115). Ein gleichmaessiger
   Schleier muesste sich am hellsten Bild orientieren und wuerde die
   dunklen Szenen zudecken. Stattdessen zwei Verlaeufe, die genau dort
   abdunkeln, wo Schrift steht: links die Spalte mit Einleitung und
   Wortmarke, unten die Kante. */
.hero__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,7,7,.72) 0%, rgba(7,7,7,.45) 34%, rgba(7,7,7,.12) 62%, rgba(7,7,7,.12) 100%),
    linear-gradient(to top, rgba(7,7,7,.55) 0%, rgba(7,7,7,0) 38%);
}

.hero__inhalt {
  position: relative; z-index: 1; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: var(--spacing-32);
  padding: var(--spacing-24);
  color: var(--color-paper);
  align-items: center;
}
/* Einleitungssatz und Ton-Schalter bilden einen Block, der als Ganzes
   auf halber Hoehe sitzt. Vorher hatte der Schalter einen festen
   Abstand von oben; sobald der Satz laenger wurde, lagen beide
   uebereinander. */
.hero__einstieg {
  grid-column: 1; grid-row: 1; align-self: center;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--spacing-20); max-width: 460px;
}
.hero__intro {
  font-family: var(--font-serif); font-size: var(--text-body);
  line-height: 1.35; letter-spacing: 0.011em; margin: 0;
}
.hero__marke { grid-column: 1; grid-row: 2; align-self: end; margin: 0; }

/* --- Ton-Schalter -----------------------------------------------------
   Das Video startet stumm; Browser lassen einen Autostart mit Ton nicht
   zu. Der Schalter steht unter dem Einleitungssatz, in derselben Pille
   wie die Wege im Kartenfeld. Ohne JavaScript bleibt er verborgen, weil
   er dann nichts schalten koennte. */
.hero__ton {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  background: rgba(255,255,255,.2); color: var(--color-paper);
  border: 0; border-radius: var(--radius-badges);
  padding: var(--spacing-8) var(--spacing-16);
  font: inherit; font-size: var(--spacing-13); cursor: pointer;
}
.hero__ton[hidden] { display: none; }
.hero__ton:hover { background: rgba(255,255,255,.32); }
.hero__ton svg { display: block; flex: 0 0 auto; }
.hero__ton .hero__ton-an { display: none; }
.hero__ton[aria-pressed="true"] .hero__ton-an { display: block; }
.hero__ton[aria-pressed="true"] .hero__ton-aus { display: none; }

.hero__marke img, .hero__marke svg { display: block; width: min(510px, 62vw); height: auto; }
.hero__feld { grid-column: 2; grid-row: 1 / -1; align-self: end; width: min(514px, 42vw); }

/* --- Schwebendes Feld ------------------------------------------------
   Karten auf rgba(0,0,0,.6) mit 8px Radius, dazwischen zwei Pillen mit
   rgba(255,255,255,.2). Genau die Werte des Vorbilds. */
.feld { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); }
.feld__karte {
  background: rgba(0,0,0,.6); border-radius: var(--radius-cards);
  color: var(--color-paper); text-decoration: none;
  display: grid; overflow: hidden;
}
.feld__karte--breit { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
.feld__karte img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.feld__text { padding: var(--spacing-20); display: flex; flex-direction: column; gap: var(--spacing-8); }
/* Der Titel ist ein Flexcontainer, damit der Pfeil rechts sitzt. Der
   Wortlaut steht deshalb in einem eigenen Element: sonst wuerde ein
   angehaengtes Zeichen wie das (R) zu einem zweiten Flexkind und vom
   space-between abgerissen. */
.feld__titel { font-size: var(--text-body); font-weight: var(--font-weight-regular); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.feld__wort { display: inline; }
.feld__titel::after { content: "\2192"; font-size: 16px; flex: 0 0 auto; }
.feld__satz { font-size: var(--spacing-13); line-height: 1.45; color: var(--color-mist); margin: 0; }
.feld__karte--quadrat { aspect-ratio: 1; align-content: end; }
.feld__karte--quadrat.feld__karte--bild { position: relative; }
.feld__karte--quadrat.feld__karte--bild img { position: absolute; inset: 0; aspect-ratio: auto; }
/* Ohne Abdunklung steht die Beschriftung ungeschuetzt auf dem Foto. Der
   Verlauf laeuft nur ueber das untere Drittel, damit das Bild oben frei
   bleibt. */
.feld__karte--quadrat.feld__karte--bild::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgba(7,7,7,.86), rgba(7,7,7,0));
}
.feld__karte--quadrat .feld__text { position: relative; z-index: 1; }
.feld__karte:hover { background: rgba(0,0,0,.74); }
.feld__wege { grid-column: 1 / -1; display: flex; gap: var(--spacing-12); justify-content: center; }
.feld__pille {
  background: rgba(255,255,255,.2); color: var(--color-paper);
  border-radius: var(--radius-badges); padding: var(--spacing-10) var(--spacing-24);
  font-size: var(--spacing-13); text-decoration: none; white-space: nowrap;
}
.feld__pille:hover { background: rgba(255,255,255,.32); }

@media (max-width: 900px) {
  .hero__inhalt { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; align-items: start; padding-block: var(--spacing-64) var(--spacing-24); }
  .hero__einstieg { grid-column: 1; grid-row: 1; }
  .hero__feld { grid-column: 1; grid-row: 2; width: 100%; }
  .hero__marke { grid-column: 1; grid-row: 3; }
}

/* --- Zwei Bildkarten nebeneinander ---------------------------------- */
.paar { display: grid; gap: var(--element-gap); }
@media (min-width: 900px) { .paar { grid-template-columns: 1fr 1fr; } }
.karte {
  border-radius: var(--radius-cards); padding: var(--spacing-32);
  display: flex; flex-direction: column; gap: var(--spacing-24);
  min-height: 380px;
}
.karte.karte--mist { background: var(--color-mist); }
.karte.karte--pine { background: var(--color-pine); color: var(--color-paper); }
.karte.karte--tide { background: var(--color-tide); color: var(--color-paper); }
.karte--bild { position: relative; overflow: hidden; padding: 0; }
.karte--bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.karte--bild .karte__text { position: relative; z-index: 1; padding: var(--spacing-32); color: var(--color-paper); display: flex; flex-direction: column; gap: var(--spacing-24); height: 100%; }
.karte--bild .karte__schleier { position: absolute; inset: 0; background: rgba(7,7,7,.42); }
.karte__fuss { margin-top: auto; }

/* --- Nummerierte Liste -----------------------------------------------
   Im Vorbild eine sehr weite Zeile: links die Nummer, daneben
   Ueberschrift und Absatz, rechts ein abgesetztes Bild mit 8px Radius.
   Die Haarlinie laeuft ueber die volle Zeilenbreite. */
.nummern { margin: 0; padding: 0; list-style: none; counter-reset: nr; }
.nummern > li {
  counter-increment: nr; border-top: 1px solid var(--color-mist);
  padding: var(--spacing-48) 0; display: grid; gap: var(--spacing-16);
  /* Ausdruecklich 1fr: eine automatisch bemessene Spalte waechst ueber
     den Behaelter hinaus, sobald ein Wort breiter ist als der Platz. */
  grid-template-columns: minmax(0, 1fr);
}
.nummern > li::before {
  content: counter(nr, decimal-leading-zero);
  font-size: var(--spacing-12); color: var(--color-smoke);
}
.nummern__titel {
  /* Arbeitgeberstrategie, Vorsorgemanagement: bei 28px sind solche
     Woerter breiter als eine Spalte auf dem Telefon. Getrennt statt
     ueberstehend. */
  hyphens: auto; overflow-wrap: break-word;
  font-size: var(--text-heading); font-weight: var(--font-weight-light);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
/* Als Verweis traegt der Titel den Pfeil des Systems und faerbt beim
   Ueberfahren die ganze Zeile ein, damit klar ist, was anklickbar ist. */
a.nummern__titel {
  display: inline-flex; align-items: baseline; gap: var(--spacing-12);
  text-decoration: none; color: inherit;
}
a.nummern__titel::after {
  content: "\2192"; font-size: 0.5em; line-height: 1;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
a.nummern__titel:hover { text-decoration: underline; text-decoration-color: var(--color-ember); text-underline-offset: 0.12em; }
a.nummern__titel:hover::after { transform: translateX(5px); }
.nummern > li:has(a.nummern__titel:hover) .nummern__text { color: var(--color-ink); }
.abschnitt--dunkel .nummern > li:has(a.nummern__titel:hover) .nummern__text { color: var(--color-paper); }
@media (prefers-reduced-motion: reduce) { a.nummern__titel::after { transition: none; } }
.nummern__text { color: var(--color-ink); max-width: 460px; margin-top: var(--spacing-16); }
/* Merksatz zwischen Titel und Text. Die Personalstrategie kommt ohne
   aus, die Arbeitgeberstrategie fuehrt ihn zu jedem Baustein. */
.nummern__satz { color: #8f4520; margin-top: var(--spacing-8); }
.abschnitt--dunkel .nummern__satz, .section--espresso .nummern__satz { color: #d98a5a; }
.nummern__bild { margin: 0; }
.nummern__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius-images); aspect-ratio: 3 / 2; object-fit: cover; }
.abschnitt--dunkel .nummern > li { border-top-color: var(--color-iron); }
.abschnitt--dunkel .nummern__text { color: var(--color-mist); }
.abschnitt--dunkel .nummern > li::before { color: var(--color-mist); }
@media (min-width: 900px) {
  /* Der Abstand gilt nur zwischen den Spalten. Als gap wirkte er auch
     zwischen Titel und Text und riss die Zeile auseinander. */
  .nummern > li { grid-template-columns: 5ch minmax(0, 34ch) minmax(0, 1fr); column-gap: var(--spacing-48); row-gap: 0; align-items: start; }
  .nummern__bild { grid-column: 3; grid-row: 1 / span 2; }
  .nummern > li::before { grid-column: 1; grid-row: 1; }
  .nummern__titel { grid-column: 2; grid-row: 1; }
  .nummern__text { grid-column: 2; grid-row: 2; }
  .nummern__satz { grid-column: 2; grid-row: 2; }
  .nummern > li:has(.nummern__satz) .nummern__text { grid-row: 3; }
  /* Zeilen ohne Bild behalten die Textspalte, damit die Nummernspur steht. */
  .nummern > li:not(:has(.nummern__bild)) .nummern__titel,
  .nummern > li:not(:has(.nummern__bild)) .nummern__satz,
  .nummern > li:not(:has(.nummern__bild)) .nummern__text { grid-column: 2 / -1; max-width: 600px; }
}

/* --- Marke ----------------------------------------------------------
   Im Kopf steht das Logo als Datei, nicht als gesetzter Schriftzug: es
   ist dasselbe Zeichen wie unten im Hero. 26px Hoehe entspricht der
   Groesse, die der Schriftzug vorher hatte. */
.marke { display: inline-flex; align-items: center; text-decoration: none; }
/* Zwei Klassen, weil v1-bausteine.css auf den uebernommenen Seiten
   spaeter geladen wird und dort .marke img die Partnerlogos auf volle
   Breite setzt. */
.marke .marke__bild { display: block; height: 26px; width: auto; }

/* --- Kopf: kompakte dunkle Pille oben rechts ------------------------- */
.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
/* Der Kopf sitzt am Bildrand, nicht in der Inhaltsbahn: die Pille haelt
   24px Abstand zum Viewport, wie im Stilbuch. */
.kopf__bahn { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-24) var(--rand); max-width: none; }
/* Ueber einem Hero traegt die Seite ihre Wortmarke gross unten links.
   Eine zweite, kleine oben links waere die dritte Marke im Bild und
   liefe ausserdem in den Einleitungssatz. */
.kopf--dunkel .marke { display: none; }
.kopf--dunkel .kopf__bahn { justify-content: flex-end; }
.kopf__pille {
  display: inline-flex; align-items: center; gap: var(--spacing-12);
  background: var(--color-char); color: var(--color-paper);
  border-radius: var(--radius-badges);
  padding: var(--spacing-10) var(--spacing-13);
  font-size: var(--spacing-12); font-weight: var(--font-weight-medium);
  letter-spacing: 0.12px; border: 0; cursor: pointer;
}
.kopf__pille svg { display: block; }
.kopf--statisch { position: static; }
.kopf--statisch .kopf__bahn { border-bottom: 1px solid var(--color-mist); }

/* --- Menue -----------------------------------------------------------
   Oben ein Kartenraster mit Bild, darunter die vollstaendigen Listen.
   Das Menue fuehrt jede Seite der Website; die Karten sind der Einstieg,
   die Spalten das Verzeichnis. */
.menue { background: var(--color-midnight); color: var(--color-paper); }
.menue[hidden] { display: none; }
.menue__inhalt { padding-block: var(--spacing-32) var(--spacing-48); }
.menue__raster { display: grid; gap: var(--element-gap); }
@media (min-width: 700px) { .menue__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .menue__raster { grid-template-columns: repeat(4, 1fr); } }

.menue__spalten { display: grid; gap: var(--spacing-32); margin-top: var(--spacing-48); padding-top: var(--spacing-32); border-top: 1px solid var(--color-iron); }
@media (min-width: 700px) { .menue__spalten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .menue__spalten { grid-template-columns: repeat(4, 1fr); } }
.menue__lab { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-smoke); font-weight: var(--font-weight-regular); margin: 0 0 var(--spacing-12); }
.menue__spalten ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-8); }
.menue__spalten li { font-size: var(--text-body); color: var(--color-mist); }
.menue__spalten a { color: var(--color-paper); text-decoration: none; }
.menue__spalten a:hover { text-decoration: underline; text-decoration-color: var(--color-ember); }
.menue__karte {
  display: grid; grid-template-columns: 33% 1fr; gap: var(--spacing-16);
  background: var(--color-char); border-radius: var(--radius-cards);
  overflow: hidden; text-decoration: none; color: var(--color-paper);
}
.menue__karte img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.menue__text {
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-16) 0;
  align-self: center;
  /* Ohne Spaltenrichtung laufen Titel und Satz in einer Zeile. */
  display: flex; flex-direction: column; gap: var(--spacing-5);
}
.menue__titel { font-size: var(--text-body); font-weight: var(--font-weight-regular); }
.menue__satz { font-size: var(--spacing-12); line-height: 1.4; color: var(--color-mist); margin: 0; }
.menue__karte:hover { background: var(--color-iron); }

/* --- Bildband -------------------------------------------------------- */
.band { margin: 0; }
.band img { display: block; width: 100%; height: auto; }
/* Kein zweiter Beschnitt: das Motiv ist bereits auf Bandformat
   zugeschnitten und wird hier vollstaendig gezeigt. Eine Hoehenbremse
   wuerde ein zweites Mal schneiden, ohne dass es jemand steuert. */
.band--voll img { object-fit: cover; }

/* Kennzeichnung KI-bearbeiteter Bilder nach Artikel 50 der KI-Verordnung.
   Sie muss beim Bild stehen, nicht nur an zentraler Stelle. Deshalb unten
   links im Bild, klein und zurueckhaltend, aber lesbar. */
.band, .image-band { position: relative; }
.ki-marke {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none;
}


/* --- Kennzahlen als Zeilen ------------------------------------------- */
/* Kennzahlen: links das Etikett, dann der Wert gross, rechts der Satz,
   der ihn einordnet. Keine Kachel mit grosser Zahl und kleinem Label
   darunter, sondern eine Zeile, die sich lesen laesst. */
.zahlen { margin: 0; padding: 0; list-style: none; }
.zahlen li { border-top: 1px solid var(--color-mist); padding: var(--spacing-24) 0; display: grid; gap: var(--spacing-6); }
.zahlen__lab { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-pewter); }
.zahlen__wert { font-size: var(--text-heading); font-weight: var(--font-weight-light); letter-spacing: var(--tracking-heading); line-height: 1; }
.zahlen__was { font-size: var(--text-subheading); }
.zahlen__her { font-size: var(--spacing-12); color: var(--color-pewter); }
.abschnitt--dunkel .zahlen li { border-top-color: var(--color-iron); }
.abschnitt--dunkel .zahlen__lab, .abschnitt--dunkel .zahlen__her { color: var(--color-mist); }
@media (min-width: 720px) {
  .zahlen li { grid-template-columns: minmax(0, 14ch) minmax(0, 10ch) minmax(0, 1fr); gap: var(--spacing-32); align-items: baseline; }
  /* Werte wie 200.000+ oder 29.000 € sind breiter als zehn Zeichen und
     brachen mitten in der Zahl um. Der Zusatz gibt der Wertspalte den
     Platz, den solche Angaben brauchen. */
  .zahlen--weit li { grid-template-columns: minmax(0, 12ch) minmax(0, 16ch) minmax(0, 1fr); }
}
.zahlen--weit .zahlen__wert { white-space: nowrap; }

/* --- Kleine Etiketten ------------------------------------------------ */
.etikett {
  display: inline-block; border-radius: var(--radius-badges);
  padding: var(--spacing-6) var(--spacing-14);
  background: var(--color-mist); color: var(--color-ink);
  font-size: var(--spacing-12); font-weight: var(--font-weight-medium);
}
.auf-dunkel .etikett { background: transparent; color: var(--color-paper); border: 1px solid var(--color-iron); }

/* --- Fuss ------------------------------------------------------------
   Vier Spalten wie in Version 1: Marke mit Beschreibung, Strategien,
   Unternehmen, Kontakt. Darunter die Bodenzeile mit Impressum und
   Datenschutz. */
.fuss { background: var(--color-midnight); color: var(--color-mist); padding-block: var(--spacing-64); font-size: var(--spacing-13); line-height: 1.55; }
.fuss a { color: var(--color-paper); text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-decoration-color: var(--color-ember); }
.fuss__raster { display: grid; gap: var(--spacing-32); }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-8); }
.fuss__lab { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-smoke); font-weight: var(--font-weight-regular); margin: 0 0 var(--spacing-12); }
.fuss__marke { margin-bottom: var(--spacing-16); }
.fuss__marke img { display: block; width: 180px; height: auto; }
.fuss__boden {
  margin-top: var(--spacing-48); padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-iron);
  display: flex; flex-wrap: wrap; gap: var(--spacing-16) var(--spacing-32);
  justify-content: space-between; align-items: baseline;
}
.fuss__boden ul { display: flex; gap: var(--spacing-24); }
.fuss__boden p { margin: 0; }
@media (min-width: 720px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--spacing-48); } }

/* --- Kontrast auf dunklen Flaechen -----------------------------------
   Pewter traegt auf Paper (5,7:1), auf Char nur 2,97:1. Das Stilbuch
   sieht dort Mist vor. Smoke als Herkunftsangabe erreicht auf Paper nur
   3,3:1 und weicht ebenfalls auf Pewter aus. */
.abschnitt--dunkel .overline:not(.overline--akzent),
.karte--dunkel .overline:not(.overline--akzent),
.karte--pine .overline:not(.overline--akzent),
.karte--tide .overline:not(.overline--akzent),
.karte--bild .overline:not(.overline--akzent) { color: var(--color-mist); }
.zahlen__her { color: var(--color-pewter); }
.abschnitt--dunkel .zahlen__her { color: var(--color-mist); }

/* --- Ringdiagramm ------------------------------------------------------
   Uebernommen aus der Vorlage und auf das System gelegt. Die Vorlage
   arbeitete mit Blau, Orange und Grau; hier tragen die drei Segmente
   eine Abstufung aus der eigenen Palette, damit Ember der einzige
   Akzent bleibt: der grosse, ungenutzte Teil in Mist, die Nutzung in
   Ember und Char. Schatten und Rundungen der Vorlage entfallen. */
.diagramm { display: grid; gap: var(--spacing-32); }
.diagramm__ring { position: relative; width: 100%; max-width: 320px; margin-inline: auto; }
.diagramm__ring svg { width: 100%; height: auto; display: block; overflow: visible; }

.diagramm__stueck { transition: transform .25s ease; transform-origin: 100px 100px; }
.diagramm__stueck--mist { stroke: var(--color-mist); }
.diagramm__stueck--ember { stroke: var(--color-ember); }
.diagramm__stueck--char { stroke: var(--color-char); }
.diagramm__stueck.ist-aktiv { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .diagramm__stueck { transition: none; } }

/* Die Mitte zeigt, was gerade betrachtet wird. */
.diagramm__mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.diagramm__zahl { font-size: 48px; font-weight: var(--font-weight-light); line-height: 1; letter-spacing: -0.03em; }
.diagramm__satz { color: var(--color-pewter); font-size: var(--spacing-13); line-height: 1.35; margin-top: var(--spacing-8); max-width: 15ch; }

.diagramm__liste { display: flex; flex-direction: column; gap: var(--spacing-8); margin: 0; padding: 0; list-style: none; }
.diagramm__zeile {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--spacing-12); align-items: center;
  padding: var(--spacing-12) 0; border-top: 1px solid var(--color-mist);
}
.diagramm__zeile > span:nth-child(2) { min-width: 0; }
.diagramm__name { display: block; }
.diagramm__zusatz { display: block; }
.diagramm__zeile:first-child { border-top: 0; }
.diagramm__feld { width: 12px; height: 12px; }
.diagramm__feld--mist { background: var(--color-mist); }
.diagramm__feld--ember { background: var(--color-ember); }
.diagramm__feld--char { background: var(--color-char); }
.diagramm__name { font-size: var(--text-body); }
.diagramm__zusatz { color: var(--color-pewter); font-size: var(--spacing-12); }
.diagramm__wert { text-align: right; }
.diagramm__wert b { display: block; font-size: var(--text-heading-sm); font-weight: var(--font-weight-light); line-height: 1; }
.diagramm__wert span { color: var(--color-pewter); font-size: var(--spacing-12); }
.diagramm__summe {
  display: flex; justify-content: space-between;
  margin-top: var(--spacing-8); padding-top: var(--spacing-12);
  border-top: 1px solid var(--color-mist); font-size: var(--spacing-13); color: var(--color-pewter);
}
.diagramm__summe b { color: var(--color-ink); font-weight: var(--font-weight-medium); }

/* Zwei Spalten erst, wenn das Diagramm selbst breit genug ist. Eine
   Media Query misst das Fenster, nicht den Platz an dieser Stelle: neben
   dem Text steht dem Diagramm nur rund die halbe Spalte zur Verfuegung,
   und die Legende brach dort um. */
.beistueck { container-type: inline-size; }
@container (min-width: 560px) {
  .diagramm { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: var(--spacing-48); }
}
/* Rueckfall fuer Browser ohne Container-Abfragen: dort bleibt es
   einspaltig, was in jeder Breite traegt. */
@supports not (container-type: inline-size) {
  .diagramm { grid-template-columns: minmax(0, 1fr); }
}

/* --- Textstrecke mit Beistueck ---------------------------------------- */
@media (min-width: 1100px) {
  .strecke-mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: var(--spacing-64); align-items: start; }
  .strecke-mit-bild .fliess { max-width: none; }
}

/* --- Bausteinrad -------------------------------------------------------
   Uebernommen aus dem CI-Ordner und auf das System gelegt. Die Vorlage
   arbeitete mit Espresso, Terra und Cream; hier tragen die Segmente
   Char, der gewaehlte Ember, der Kern Mist. Schrift, Linien und
   Schaltflaechen folgen dem Stilbuch. */
/* Die eine Spalte ist ausdruecklich auf 1fr gesetzt. Ohne das waere
   sie automatisch bemessen und wuechse ueber den Behaelter hinaus,
   sobald ein Wort in der Tafel breiter ist als der Platz. */
.rad { display: grid; gap: var(--spacing-48); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 720px) {
  .rad { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: var(--spacing-64); }
}
@supports not (container-type: inline-size) { .rad { grid-template-columns: minmax(0, 1fr); } }

.rad__bild { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.rad__bild svg { width: 100%; height: auto; display: block; overflow: visible; }

.rad__stueck { cursor: pointer; transform-origin: 200px 200px; transition: transform .2s ease; }
.rad__stueck path { fill: var(--color-char); transition: fill .2s ease; }
.rad__stueck:hover path { fill: var(--color-iron); }
.rad__stueck.ist-aktiv path { fill: var(--color-ember); }
.rad__stueck.ist-aktiv { transform: scale(1.03); }
.rad__stueck text { fill: var(--color-paper); font-size: 13px; font-weight: var(--font-weight-medium); letter-spacing: .1em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rad__stueck .rad__nr { font-size: 11px; letter-spacing: .05em; fill: var(--color-mist); font-weight: var(--font-weight-regular); }
.rad__stueck--schmal text { font-size: 11px; }
/* Segmente mit langen Schildern im Sechserrad der Arbeitgeberstrategie:
   bei 13px liefe der Schriftzug ueber den Ring hinaus. Klasse statt
   gesetztem Schriftgrad, die Auslieferung erlaubt keine Formatangaben
   im Element. */
.rad__stueck--eng text { font-size: 10.5px; letter-spacing: .07em; }
.rad__stueck--sehr-eng text { font-size: 9px; letter-spacing: .05em; }

.rad__kern { cursor: pointer; }
.rad__kern circle { fill: var(--color-mist); transition: fill .2s ease; }
.rad__kern:hover circle { fill: #dcdbdb; }
.rad__kern.ist-aktiv circle { fill: var(--color-mist); stroke: var(--color-ember); stroke-width: 3; }
.rad__kern text { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rad__kern .rad__k1 { font-size: 10px; letter-spacing: .2em; fill: var(--color-pewter); }
.rad__k2 { font-size: 26px; fill: var(--color-ink); font-weight: var(--font-weight-light); letter-spacing: -.01em; }
.rad__kern .rad__k3 { font-size: 10px; fill: var(--color-pewter); }
/* Im Rad der Arbeitgeberstrategie traegt die Mitte nur die Bezeichnung
   und ist nicht anwaehlbar. */
.rad__kern--fest { cursor: default; }
.rad__kern--fest:hover circle { fill: var(--color-mist); }

.rad__tafel, .kreis__tafel { min-height: 300px; }
.rad__marke, .kreis__marke { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-pewter); }
/* Lange Komposita wie Personalmanagement sind bei 28px breiter als
   eine Spalte auf dem Telefon. Sie werden getrennt statt zu ragen. */
.rad__tafel h3, .kreis__tafel h3 { hyphens: auto; overflow-wrap: break-word; }
.rad__tafel h3, .kreis__tafel h3 { font-size: var(--text-heading); font-weight: var(--font-weight-light); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); margin: 0 0 var(--spacing-16); }
.rad__tafel h3 sup, .kreis__tafel h3 sup { font-size: .42em; vertical-align: super; }
.rad__tafel p, .kreis__tafel p { font-size: var(--text-subheading); line-height: var(--leading-subheading); margin: 0 0 var(--spacing-24); max-width: 46ch; }
.rad__tafel .rad__satz, .kreis__tafel .kreis__satz { color: #8f4520; font-size: var(--text-subheading); margin: 0 0 var(--spacing-16); }
/* Zwei Wege unter einer Expertise, die selbst keine eigene Seite hat.
   Container-Abfrage, weil die Tafel je nach Platz halb oder ganz breit
   steht; ein Medienabfrage wuesste davon nichts. */
.rad__wege { display: grid; gap: var(--spacing-12); margin: 0 0 var(--spacing-24); }
@container (min-width: 420px) { .rad__wege { grid-template-columns: 1fr 1fr; } }
.rad__weg {
  display: block; text-decoration: none; color: inherit;
  background: var(--color-mist); border: 1px solid transparent;
  border-radius: var(--radius-cards); padding: var(--spacing-16);
  transition: border-color .2s ease;
}
.rad__weg:hover { border-color: var(--color-char); }
.rad__weg b { display: block; font-size: var(--text-body); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-4); }
.rad__weg span { display: block; font-size: var(--spacing-13); line-height: 1.5; color: var(--color-pewter); }
@media (prefers-reduced-motion: reduce) { .rad__weg { transition: none; } }

/* Was in eine andere Seite fuehrt, traegt in der Tafel einen orangen
   Strich: die Wegkarten sind ganzflaechig anklickbar, das sieht man
   ihnen sonst nicht an, und "Mehr erfahren" stand nur mit Pfeil da.
   Nur hier, damit die Verweise der uebrigen Seiten unberuehrt bleiben. */
.rad__tafel .rad__weg b,
.rad__tafel .tat {
  text-decoration: underline;
  text-decoration-color: #8f4520;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.abschnitt--dunkel .rad__tafel .rad__weg b,
.abschnitt--dunkel .rad__tafel .tat { text-decoration-color: #d98a5a; }

/* "Vier Expertisen" waere bei 26px breiter als der Kern. */
.rad__kern--schmal .rad__k2 { font-size: 21px; }

.rad__notiz { font-size: var(--spacing-13); color: var(--color-pewter); border-top: 1px solid var(--color-mist); padding-top: var(--spacing-14); }

.rad__wahl, .kreis__wahl { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-top: var(--spacing-24); }
.rad__wahl button, .kreis__wahl button {
  font: inherit; font-size: var(--spacing-12); letter-spacing: .08em;
  padding: var(--spacing-10) var(--spacing-16);
  background: none; border: 1px solid var(--color-char); color: var(--color-char);
  border-radius: var(--radius-buttons); cursor: pointer;
}
.rad__wahl button:hover, .kreis__wahl button:hover { background: var(--color-char); color: var(--color-paper); }
.rad__wahl button.ist-aktiv, .kreis__wahl button.ist-aktiv { background: var(--color-char); color: var(--color-paper); }
.rad__wahl button.ist-kern.ist-aktiv { background: var(--color-ember); border-color: var(--color-ember); color: var(--color-paper); }

.rad__wechsel, .kreis__wechsel { animation: radEin .3s ease; }
@keyframes radEin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rad__wechsel, .kreis__wechsel { animation: none; }
  .rad__stueck { transition: none; }
}

/* --- Enevo Circle ------------------------------------------------------
   Uebernommen aus dem CI-Ordner. Die Vorlage wechselte die Boegen
   zwischen Terra und Linie ab; bei sieben Segmenten trifft dabei am
   Umlauf gleiche Farbe auf gleiche Farbe. Hier tragen alle Boegen Char,
   die gewaehlte Phase Ember. Die Tafel daneben ist dasselbe Bauteil wie
   beim Bausteinrad. */
.kreis { display: grid; gap: var(--spacing-48); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 720px) {
  .kreis { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: var(--spacing-64); }
}
@supports not (container-type: inline-size) { .kreis { grid-template-columns: minmax(0, 1fr); } }

.kreis__bild { width: 100%; max-width: 420px; margin-inline: auto; }
.kreis__bild svg { width: 100%; height: auto; display: block; overflow: visible; }

.kreis__phase { cursor: pointer; }
.kreis__phase path { fill: none; stroke-width: 12; stroke-linecap: butt; transition: stroke .2s ease, stroke-width .2s ease; }
.kreis__bogen { stroke: var(--color-char); }
/* Breite, unsichtbare Bahn: 12px sind als Trefferflaeche zu schmal. */
.kreis__griff { stroke: transparent; stroke-width: 44; }
.kreis__phase:hover .kreis__bogen { stroke-width: 16; }
.kreis__phase.ist-aktiv .kreis__bogen { stroke: var(--color-ember); stroke-width: 16; }
.kreis__phase text { font-size: 11px; letter-spacing: .12em; fill: var(--color-pewter); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .2s ease; }
.kreis__phase.ist-aktiv text { fill: var(--color-ink); font-weight: var(--font-weight-medium); }

.kreis__kern text { text-anchor: middle; pointer-events: none; }
.kreis__kern .kreis__zahl { font-size: 76px; fill: var(--color-ink); font-weight: var(--font-weight-light); letter-spacing: -.03em; }
.kreis__kern .kreis__wort { font-size: 11px; letter-spacing: .3em; fill: var(--color-pewter); }

@media (prefers-reduced-motion: reduce) { .kreis__phase path { transition: none; } }

/* --- Drei Punkte nebeneinander, der vierte darunter ---------------------
   Die Vorgabe von .steps ist auto-fit; bei vier Eintraegen legt sie vier
   Spalten an und der vierte stuende nicht unter den drei anderen. Deshalb
   hier drei feste Spalten, der letzte Eintrag ueber die volle Breite.
   Darunter steht ohnehin alles untereinander. */
/* Doppelt gefuehrt, weil v1-bausteine.css nach dieser Datei geladen wird
   und .steps sonst gleich stark waere. */
.steps.steps--drei-und-eins { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 840px) {
  .steps.steps--drei-und-eins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps.steps--drei-und-eins .step--breit { grid-column: 1 / -1; }
  /* Der Balken laeuft ueber die volle Breite, der Satz nicht: ueber
     1100px waeren es rund 150 Zeichen je Zeile. */
  .steps.steps--drei-und-eins .step--breit .step__text { max-width: 74ch; }
}

/* --- Menschpruefung am Formular ----------------------------------------
   Kleiner Kreis, grosser Kreis, dazwischen ein Weg. Gebaut wird der
   Bereich aus JavaScript; ohne JavaScript bleibt er leer und das
   Formular funktioniert unveraendert. Die Verschiebung laeuft ueber eine
   eigene Eigenschaft, damit im Markup keine Formatangabe steht. */
.mensch { margin: var(--spacing-24) 0; }
.mensch__feld {
  position: relative; height: 88px; max-width: 320px;
  /* Nicht Mist: der helle Grund der Kontaktseite traegt dieselbe Farbe,
     die Kante waere dort unsichtbar. */
  border: 1px solid rgba(0,0,0,.16); border-radius: var(--radius-cards);
  touch-action: none;
}
.mensch__ziel {
  position: absolute; top: 50%; right: 24px; width: 60px; height: 60px;
  margin-top: -30px; border: 2px dashed var(--color-smoke); border-radius: 50%;
  transition: border-color .2s ease;
}
.mensch__punkt {
  position: absolute; top: 50%; left: 24px; width: 30px; height: 30px;
  margin-top: -15px; padding: 0; border: 0; border-radius: 50%;
  background: #8f4520; cursor: grab; touch-action: none;
  transform: translateX(var(--verschiebung, 0px));
}
.mensch__punkt:active, .mensch.ist-in-bewegung .mensch__punkt { cursor: grabbing; }
.mensch__punkt:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.mensch.ist-geloest .mensch__ziel { border-style: solid; border-color: #8f4520; }
.mensch.ist-geloest .mensch__punkt { cursor: default; }
.mensch.ist-offen .mensch__feld { border-color: #8f4520; }
.mensch__hinweis { font-size: var(--spacing-13); color: var(--color-pewter); margin: var(--spacing-10) 0 0; }

/* Auf dunklem Grund: der Weg braucht helle Kanten, der Punkt den
   helleren Ember. */
.abschnitt--dunkel .mensch__feld, .section--espresso .mensch__feld,
.auf-dunkel .mensch__feld, .gc-root .mensch__feld { border-color: rgba(245,241,232,.24); }
.abschnitt--dunkel .mensch__ziel, .section--espresso .mensch__ziel,
.auf-dunkel .mensch__ziel, .gc-root .mensch__ziel { border-color: rgba(245,241,232,.46); }
.abschnitt--dunkel .mensch__punkt, .section--espresso .mensch__punkt,
.auf-dunkel .mensch__punkt, .gc-root .mensch__punkt { background: #d98a5a; }
.abschnitt--dunkel .mensch.ist-geloest .mensch__ziel, .section--espresso .mensch.ist-geloest .mensch__ziel,
.auf-dunkel .mensch.ist-geloest .mensch__ziel, .gc-root .mensch.ist-geloest .mensch__ziel { border-color: #d98a5a; }
.abschnitt--dunkel .mensch.ist-offen .mensch__feld, .section--espresso .mensch.ist-offen .mensch__feld,
.auf-dunkel .mensch.ist-offen .mensch__feld, .gc-root .mensch.ist-offen .mensch__feld { border-color: #d98a5a; }
.abschnitt--dunkel .mensch__hinweis, .section--espresso .mensch__hinweis,
.auf-dunkel .mensch__hinweis, .gc-root .mensch__hinweis { color: rgba(245,241,232,.72); }
.abschnitt--dunkel .mensch__punkt:focus-visible, .section--espresso .mensch__punkt:focus-visible,
.auf-dunkel .mensch__punkt:focus-visible, .gc-root .mensch__punkt:focus-visible { outline-color: var(--color-paper); }

@media (prefers-reduced-motion: reduce) { .mensch__ziel { transition: none; } }

/* --- Bild an einem Benefit ---------------------------------------------
   Steht in der Zelle des Benefits und wird nie breiter als sie. Die
   Vorlagen liegen bei 3:2 und werden nicht beschnitten. */
.leistung__bild { margin: 0 0 var(--spacing-16); }
.leistung__bild img {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-images);
}

/* --- Kopfbereich der Unterseiten ---------------------------------------
   Die Seiten mit .abschnitt--kopf (Personalstrategie, System,
   Lohnverbuchung) fuellen mit ihrem dunklen Kopf das Fenster und tragen
   den Text mittig zwischen oben und unten. Die uebrigen Seiten benutzen
   .hero--sub, das sich bisher nur an seinem Inhalt bemessen hat: der
   Text stand dort weiter oben. Beide Bauteile verhalten sich jetzt
   gleich. Doppelt gefuehrt, weil v1-bausteine.css nach dieser Datei
   geladen wird. */
.hero.hero--sub { min-height: 100svh; display: grid; align-content: center; }

/* Landingpage-Kopf: gleiches Videobett wie die Startseite, aber ein
   linksbuendiger Textblock statt des Kachelfeldes. */
/* safe center haelt den Block auch dann im Bild, wenn er hoeher wird als
   der Bildschirm: sonst wird oben abgeschnitten, hier die Wortmarke. */
.hero.hero--landing { display: grid; align-content: safe center; }
.hero__landing {
  position: relative; z-index: 1; color: var(--color-paper);
  padding-block: clamp(88px, 9vh, 120px); max-width: 760px;
}
.hero__landing .fliess { color: var(--color-mist); }
.hero__landing .wege { margin-top: var(--spacing-32); }
.hero__landing .hero__ton { margin-top: var(--spacing-32); }
.hero__landing-marke { margin: 0 0 var(--spacing-24); }
.hero__landing-marke img { display: block; width: min(250px, 46vw); height: auto; }
/* Der Text steht hier weiter in der Flaeche als auf der Startseite, der
   Verlauf von links traegt dort nicht mehr. Deshalb eine zusaetzliche
   gleichmaessige Abdunklung. */
.hero--landing .hero__schleier { background:
  linear-gradient(to right, rgba(7,7,7,.82) 0%, rgba(7,7,7,.62) 46%, rgba(7,7,7,.38) 100%),
  linear-gradient(to top, rgba(7,7,7,.55) 0%, rgba(7,7,7,.15) 42%); }
@supports not (min-height: 100svh) { .hero.hero--sub { min-height: 100vh; } }

/* --- Rad auf dunklem Grund ---------------------------------------------
   Char als Segmentfarbe waere auf dem Char des Abschnitts unsichtbar.
   Die Segmente stehen deshalb eine Stufe heller, der gewaehlte in Ember,
   sein Schild in Papier: Mist auf Ember ergaebe nur 4,5:1. */
.abschnitt--dunkel .rad__stueck path { fill: #333333; }
.abschnitt--dunkel .rad__stueck:hover path { fill: #3f3f3f; }
.abschnitt--dunkel .rad__stueck.ist-aktiv path { fill: var(--color-ember); }
.abschnitt--dunkel .rad__stueck.ist-aktiv .rad__nr { fill: var(--color-paper); }

.abschnitt--dunkel .rad__marke { color: var(--color-mist); }
.abschnitt--dunkel .rad__tafel p { color: var(--color-mist); }
.abschnitt--dunkel .rad__weg { background: rgba(245,241,232,.06); }
.abschnitt--dunkel .rad__weg b { color: var(--color-paper); }
.abschnitt--dunkel .rad__weg span { color: var(--color-mist); }
.abschnitt--dunkel .rad__weg:hover { border-color: var(--color-mist); }
.abschnitt--dunkel .rad__wahl button { border-color: var(--color-mist); color: var(--color-mist); }
.abschnitt--dunkel .rad__wahl button:hover,
.abschnitt--dunkel .rad__wahl button.ist-aktiv { background: var(--color-paper); color: var(--color-char); }

/* --- Wofuer Enevo steht -------------------------------------------------
   Die fuenf Begriffe sind ein Akronym: die Anfangsbuchstaben ergeben
   ENEVO. Sie stehen deshalb untereinander, damit die Buchstabenspur am
   linken Rand lesbar wird; das ist keine Verzierung, sondern der Grund
   fuer die Reihenfolge.
   Die japanischen Begriffe stehen in der Systemschrift fuer CJK: weder
   Montserrat noch Lora fuehren diese Zeichen, und geladen wird von
   ausserhalb nichts. */
.akronym { margin: 0 0 var(--spacing-48); padding: 0; list-style: none; display: grid; }
.akronym li {
  /* Kein Spaltenraster: der Anfangsbuchstabe bleibt am Wort, er ist nur
     eingefaerbt. Getrennt gesetzt sah er aus wie ein Satzfehler. Die
     Buchstabenspur entsteht ohnehin, weil alle Zeilen links anschlagen. */
  padding-block: var(--spacing-12);
  border-top: 1px solid var(--color-iron);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--font-weight-light);
  letter-spacing: -0.01em; line-height: 1.15;
}
.akronym li:last-child { border-bottom: 1px solid var(--color-iron); }
.akronym__b { color: #d98a5a; font-weight: var(--font-weight-regular); }

/* Die Trennlinien liegen als Rahmen an den Feldern, nicht als
   durchscheinender Grund unter einem Raster mit Luecken. Bei fuenf
   Feldern in drei Spalten bleibt sonst die sechste Zelle als heller
   Block stehen. */
.leitworte {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0;
  border-top: 1px solid var(--color-iron);
}
.leitwort {
  border-bottom: 1px solid var(--color-iron);
  padding: var(--spacing-32) 0;
  display: flex; flex-direction: column; gap: var(--spacing-8);
}
@media (min-width: 760px) {
  .leitworte { grid-template-columns: 1fr 1fr; }
  .leitwort { padding-inline: var(--spacing-32); }
  .leitworte > .leitwort:nth-child(2n+1) { padding-left: 0; }
  .leitworte > .leitwort:nth-child(2n) { border-left: 1px solid var(--color-iron); }
}
@media (min-width: 1100px) {
  .leitworte { grid-template-columns: repeat(3, 1fr); }
  .leitworte > .leitwort:nth-child(2n+1) { padding-left: var(--spacing-32); }
  .leitworte > .leitwort:nth-child(2n) { border-left: 0; }
  .leitworte > .leitwort:nth-child(3n+1) { padding-left: 0; }
  .leitworte > .leitwort:not(:nth-child(3n+1)) { border-left: 1px solid var(--color-iron); }
}
/* Jedes Feld traegt oben den Begriff aus dem Namen, darunter das
   japanische Wort als kleine Marke im Akzent. */
.leitwort__wert {
  font-size: var(--text-heading-sm); line-height: 1.25;
  letter-spacing: -0.02em; font-weight: var(--font-weight-light);
  color: var(--color-paper); margin: 0;
}
.leitwort__lat {
  font-size: var(--spacing-12); letter-spacing: 0.18em;
  color: #d98a5a; text-transform: uppercase;
}
.leitwort__satz {
  font-family: var(--font-serif); font-size: var(--text-subheading);
  line-height: 1.45; letter-spacing: 0.011em; color: var(--color-paper);
  margin: var(--spacing-6) 0 0;
}
.leitwort__text { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-mist); margin: 0; }

.schlusssatz {
  margin: var(--spacing-64) 0 0;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.25;
  letter-spacing: -0.02em; font-weight: var(--font-weight-light);
  max-width: 22ch;
}
.schlusssatz .hl { color: #d98a5a; }

/* --- Soziale Netzwerke im Fuss -----------------------------------------
   Runde Umrisse in der Pillenform des Systems, keine Fuellung, kein
   Fremdlogo als Datei: die Zeichen stehen als Pfade im Markup. */
.fuss__netze { display: flex; flex-wrap: wrap; gap: var(--spacing-10); margin: var(--spacing-24) 0 0; }
.fuss__netz {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-badges);
  border: 1px solid var(--color-iron); color: var(--color-mist);
  text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.fuss__netz svg { display: block; fill: currentColor; }
.fuss__netz:hover { border-color: #d98a5a; color: #d98a5a; }
.fuss__netz:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fuss__netz { transition: none; } }

/* --- Interner Zugang ----------------------------------------------------
   Ein Passwortfeld auf dunklem Grund und darunter das Kachelraster der
   Werkzeuge. Der Bereich ist nirgends verlinkt; er hat deshalb keine
   eigene Navigation, sondern nutzt die der Website. */
.zugang {
  --zugang-hoehe: 54px;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--spacing-16); margin: var(--spacing-32) 0 0;
}
.zugang__feld { display: flex; flex-direction: column; gap: var(--spacing-8); }
.zugang__lab { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-mist); }
.zugang input[type="password"] {
  font: inherit; font-size: var(--text-body); color: var(--color-paper);
  background: transparent; border: 1px solid var(--color-iron);
  border-radius: var(--radius-cards); padding: var(--spacing-14) var(--spacing-16);
  width: min(320px, 70vw); height: var(--zugang-hoehe);
}
.zugang input[type="password"]:focus-visible { outline: 2px solid #d98a5a; outline-offset: 2px; }
/* Die Schaltflaeche steht neben dem Feld und soll genauso hoch sein.
   Sonst sitzt eine flache Pille neben einem hohen Eingabefeld. */
.zugang .tat--voll {
  background: var(--color-paper); color: var(--color-char);
  height: var(--zugang-hoehe); padding: 0 var(--spacing-32);
  font-size: var(--text-body); letter-spacing: 0.15px;
}
.zugang .tat--voll:hover { background: var(--color-mist); }
.zugang .tat--voll:focus-visible { outline: 2px solid #d98a5a; outline-offset: 2px; }
.zugang__fehler {
  flex-basis: 100%; margin: 0; color: #d98a5a;
  font-size: var(--text-body);
}
.zugang__hinweis { margin: var(--spacing-32) 0 0; font-size: var(--spacing-13); color: var(--color-mist); max-width: 62ch; }
.zugang__ende { margin-top: var(--spacing-48); }

.werkzeuge { display: grid; gap: var(--element-gap); }
@media (min-width: 700px) { .werkzeuge { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .werkzeuge { grid-template-columns: repeat(3, 1fr); } }
.werkzeuge .karte { display: flex; flex-direction: column; }

/* --- Mitarbeitermeldung ------------------------------------------------
   Ein Formular fuer zwei Faelle. Die Auswahl oben steht als grosse
   Flaeche, damit auf dem Telefon nicht danebengetippt wird. */
/* Kompakt halten: zwei Spalten auf breiten Geraeten, kurze Felder
   paarweise, engere Abstaende. Ziel ist eine Meldung, die auf einen
   Blick zu ueberschauen ist. */
.form.form--meldung { max-width: 1040px; display: grid; gap: 0 var(--spacing-48); }
@media (min-width: 1000px) {
  .form.form--meldung { grid-template-columns: 1fr 1fr; align-items: start; }
  .form--meldung > fieldset:nth-of-type(1) { grid-column: 1 / -1; }
  .form--meldung > fieldset:nth-of-type(2),
  .form--meldung > fieldset:nth-of-type(3),
  .form--meldung > fieldset:nth-of-type(4),
  .form--meldung > fieldset:nth-of-type(5) { grid-column: 1; }
  /* Hinweise und Absenden stehen rechts neben den Angaben. */
  .form--meldung > fieldset:nth-of-type(6) { grid-column: 2; grid-row: 2 / 99; }
}
.form--meldung input[type="text"], .form--meldung input[type="date"],
.form--meldung input[type="email"], .form--meldung input[type="tel"],
.form--meldung select { padding-block: var(--spacing-10); }
.form--meldung label { margin-bottom: var(--spacing-4); }
.abschnitt--schmal { padding-block: clamp(32px, 4vw, 56px); }
.raster2 { display: grid; gap: 0 var(--spacing-24); }
@media (min-width: 640px) { .raster2 { grid-template-columns: 1fr 1fr; } }
.form--meldung .field { margin-bottom: var(--spacing-12); }
.form--meldung .field__hint { margin-top: var(--spacing-4); }
.form--meldung .feldgruppe { margin-bottom: var(--spacing-32); }
.form--meldung .feldgruppe__titel { margin-bottom: var(--spacing-16); }
.form--meldung textarea { min-height: 72px; }
/* Die Ankreuzlisten bleiben einspaltig: zweispaltig brachen die langen
   Bezeichnungen um und liefen ineinander. */
.feldgruppe { border: 0; padding: 0; margin: 0 0 var(--spacing-48); }
.feldgruppe__titel {
  padding: 0; margin: 0 0 var(--spacing-24);
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  border-bottom: 1px solid var(--color-mist); padding-bottom: var(--spacing-8); width: 100%;
}
.wahl { display: grid; gap: var(--spacing-16); }
@media (min-width: 700px)  { .wahl { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .wahl { grid-template-columns: repeat(3, 1fr); } }
.wahl__feld {
  display: flex; gap: var(--spacing-16); align-items: flex-start; cursor: pointer;
  background: var(--color-paper); border: 1px solid var(--color-mist);
  border-radius: var(--radius-cards); padding: var(--spacing-24);
}
.wahl__feld:hover { border-color: var(--color-pewter); }
/* Die getroffene Wahl steht auf schwarzer Flaeche. Der Rahmen faellt
   damit weg, der Satz darunter braucht die helle Schrift. */
.wahl__feld:has(input:checked) {
  background: var(--color-char); border-color: var(--color-char);
  color: var(--color-paper);
}
.wahl__feld:has(input:checked) .wahl__satz { color: var(--color-mist); }
.wahl__feld:has(input:checked):hover { border-color: var(--color-char); }
.wahl__feld:has(input:focus-visible) { outline: 2px solid #8f4520; outline-offset: 2px; }
.wahl__feld input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-ember); }
.wahl__text { display: grid; gap: var(--spacing-6); }
.wahl__titel { font-size: var(--text-body); font-weight: var(--font-weight-medium); }
.wahl__satz { font-size: var(--spacing-13); color: var(--color-pewter); }

.field--gruppe { border: 0; padding: 0; margin-bottom: var(--spacing-24); }
.field--gruppe legend { padding: 0; margin-bottom: var(--spacing-8); font-size: var(--spacing-13); color: var(--color-pewter); }
/* v1-bausteine.css setzt .field label auf display: block und laedt
   spaeter. Zwei Klassen heben die Zeile wieder auf eine Zeile. */
.form label.feld--check, .feld--check {
  display: flex; gap: var(--spacing-10); align-items: flex-start;
  margin-bottom: var(--spacing-8); cursor: pointer; font-weight: var(--font-weight-regular);
}
.form label.feld--check span { font-weight: var(--font-weight-regular); }
/* v1-bausteine.css gibt allen Feldern in .field die volle Breite. Fuer
   Ankreuz- und Auswahlfelder ist das falsch: das Kaestchen schob den
   Text aus der Spalte. */
.form input[type="checkbox"], .form input[type="radio"] { width: auto; flex: 0 0 auto; }

/* Probezeit: Auswahl als Schaltflaechen, daneben ein Zahlenfeld. */
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-12); }
.chip {
  display: inline-flex; align-items: center; gap: var(--spacing-8); cursor: pointer;
  font-size: var(--spacing-13); font-weight: var(--font-weight-regular);
  padding: var(--spacing-8) var(--spacing-16); margin: 0;
  background: var(--color-paper); border: 1px solid var(--color-mist);
  border-radius: var(--radius-buttons);
}
.chip:hover { border-color: var(--color-pewter); }
.chip:has(input:checked) { border-color: var(--color-ember); box-shadow: inset 0 0 0 1px var(--color-ember); }
.chip:has(input:focus-visible) { outline: 2px solid #8f4520; outline-offset: 2px; }
.chip input { accent-color: var(--color-ember); }
.chip span { font-weight: var(--font-weight-regular); }
.form .chip__zahl {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  font-size: var(--spacing-13); font-weight: var(--font-weight-regular);
  color: var(--color-pewter); margin: 0;
}
.form .chip__zahl input { width: 118px; padding-block: var(--spacing-8); }
/* Dateiablage: Dateien hineinziehen oder ueber den Dialog waehlen.
   Das Feld liegt unsichtbar ueber der Flaeche, damit ein Klick irgendwo
   in der Flaeche den Auswahldialog oeffnet. */
.ablage {
  position: relative; display: grid; gap: var(--spacing-8);
  min-height: 92px; align-content: center; justify-items: start;
  padding: var(--spacing-16);
  background: var(--color-paper);
  border: 1px dashed var(--color-smoke); border-radius: var(--radius-cards);
  transition: border-color .2s ease, background .2s ease;
}
.ablage.ist-bereit { border-color: var(--color-ember); background: #faf6f3; }
.ablage input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.ablage__text { margin: 0; font-size: var(--spacing-13); color: var(--color-pewter); }
.ablage__text[hidden] { display: none; }
.ablage__link { color: #8f4520; text-decoration: underline; text-underline-offset: 0.2em; }
.ablage__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-8); width: 100%; }
.ablage__liste[hidden] { display: none; }
.ablage__liste li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
  font-size: var(--spacing-13); background: var(--color-mist);
  border-radius: var(--radius-buttons); padding: var(--spacing-8) var(--spacing-12);
}
.ablage__name { overflow-wrap: anywhere; }
/* Der Knopf muss ueber dem unsichtbaren Feld liegen, sonst oeffnet er
   den Auswahldialog statt zu entfernen. */
.ablage__weg {
  position: relative; z-index: 1; flex: 0 0 auto;
  font: inherit; font-size: var(--spacing-12); color: #8f4520;
  background: none; border: 0; padding: 0 var(--spacing-4); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.ablage__weg:hover { color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .ablage { transition: none; } }
.feld--check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-ember); }
[data-nur][hidden] { display: none; }

/* --- Blaetterbuch der Fachreporte -------------------------------------
   Eine Seite je Ansicht, Bedienung darunter. Ohne JavaScript stehen
   alle Seiten untereinander und bleiben lesbar. */
.blaetterbuch { display: grid; gap: var(--spacing-24); justify-items: center; }
.blaetterbuch__buehne { width: min(760px, 100%); display: grid; gap: var(--spacing-24); }
.blaetterbuch__seite { display: block; }
.blaetterbuch__seite[hidden] { display: none; }
.blaetterbuch__seite img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-cards); box-shadow: 0 2px 24px rgba(7,7,7,.14);
}
.blaetterbuch__leiste { display: flex; align-items: center; gap: var(--spacing-24); flex-wrap: wrap; justify-content: center; }
.blaetterbuch__stand { margin: 0; font-size: var(--spacing-13); color: var(--color-pewter); }
.blaetterbuch button[disabled] { opacity: .35; cursor: default; }
.blaetterbuch button[disabled]:hover { text-decoration: none; }

/* --- Balkenwerte aus den Fachreporten --------------------------------- */
.balken { margin: 0 0 var(--spacing-24); padding: 0; list-style: none; display: grid; gap: var(--spacing-16); max-width: 600px; }
.balken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-4) var(--spacing-16); align-items: baseline; }
.balken__lab { font-size: var(--text-body); }
.balken__wert { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.balken__spur { grid-column: 1 / -1; height: 4px; background: var(--color-mist); border-radius: 2px; overflow: hidden; }
.balken__fuell { display: block; height: 100%; width: 0; background: var(--color-ember); }

/* Grafik aus einem Fachreport. */
.beitragsseite__grafik { margin: 0 0 var(--spacing-24); }
.beitragsseite__grafik svg { display: block; max-width: 100%; height: auto; }

/* --- Rechenbeispiel ---------------------------------------------------
   Zwei Regler, zwei Vergleichskarten, ein Ergebnis. Die Regler tragen
   die Systemfarben; ohne eigene Angabe zeichnet der Browser sie in
   seinem eigenen Blau. */
.rechner { display: grid; gap: var(--element-gap); }
.rechner__regler { display: grid; gap: var(--element-gap); }
@media (min-width: 700px) { .rechner__regler { grid-template-columns: 1fr 1fr; } }
.rechner__feld { display: grid; gap: var(--spacing-8); }
.rechner__lab { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-pewter); margin: 0; }
.rechner__wert { font-size: var(--text-heading); font-weight: var(--font-weight-light); line-height: 1; margin: 0; }
.rechner__spanne { display: flex; justify-content: space-between; font-size: var(--spacing-12); color: var(--color-pewter); margin: 0; }

.rechner input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; margin: var(--spacing-8) 0;
  background: var(--color-smoke); border-radius: 2px; cursor: pointer;
}
.rechner input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-ember); border: 0; cursor: pointer;
}
.rechner input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-ember); border: 0; cursor: pointer;
}
.rechner input[type="range"]:focus-visible { outline: 2px solid #8f4520; outline-offset: 4px; }

.rechner__paar { display: grid; gap: var(--element-gap); }
@media (min-width: 700px) { .rechner__paar { grid-template-columns: 1fr 1fr; } }
.rechner__karte {
  background: var(--color-paper); border-radius: var(--radius-cards);
  padding: var(--spacing-32); display: flex; flex-direction: column; gap: var(--spacing-16);
}
.rechner__karte--empf { background: var(--color-char); color: var(--color-paper); }
.rechner__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-16); margin: 0; }
.rechner__mark { font-size: var(--spacing-12); letter-spacing: 0.12px; color: var(--color-pewter); }
.rechner__karte--empf .rechner__mark { color: var(--color-mist); }
.rechner__abzeichen { font-size: var(--spacing-12); letter-spacing: 0.12px; color: #d98a5a; }
.rechner__zeile { display: flex; justify-content: space-between; gap: var(--spacing-16); margin: 0; padding-block: var(--spacing-8); border-top: 1px solid var(--color-mist); }
.rechner__karte--empf .rechner__zeile { border-color: var(--color-iron); }
.rechner__zeile span:first-child { color: var(--color-pewter); }
.rechner__karte--empf .rechner__zeile span:first-child { color: var(--color-mist); }
.rechner__jahr { margin: auto 0 0; padding-top: var(--spacing-16); }
.rechner__jahr-lab { display: block; font-size: var(--spacing-12); color: var(--color-pewter); }
.rechner__karte--empf .rechner__jahr-lab { color: var(--color-mist); }
.rechner__jahr-wert { display: block; font-size: var(--text-heading); font-weight: var(--font-weight-light); line-height: 1.1; }
.rechner__fazit { margin: 0; max-width: 70ch; }
.rechner__hinweis { margin: 0; font-size: var(--spacing-13); color: var(--color-pewter); max-width: 70ch; }

/* --- Fragen und Antworten --------------------------------------------- */
.fragen { border-top: 1px solid var(--color-mist); }
.fragen details { border-bottom: 1px solid var(--color-mist); }
.fragen summary {
  list-style: none; cursor: pointer; padding: var(--spacing-24) var(--spacing-32) var(--spacing-24) 0;
  position: relative; font-size: var(--text-subheading); line-height: var(--leading-subheading);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 1px solid var(--color-pewter); border-bottom: 1px solid var(--color-pewter);
  transform: rotate(45deg); transition: transform .2s ease;
}
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fragen summary:focus-visible { outline: 2px solid #8f4520; outline-offset: -2px; }
.fragen__antwort { padding: 0 var(--spacing-32) var(--spacing-24) 0; max-width: 70ch; }
.fragen__antwort p { margin: 0 0 var(--spacing-16); }
.fragen__antwort p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .fragen summary::after { transition: none; } }

/* Drei Zusagen ueber dem Formular. */
.zusagen { display: flex; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-16); margin: 0 0 var(--spacing-32); padding: 0; list-style: none; }
.zusagen li {
  font-size: var(--spacing-13); letter-spacing: 0.06em;
  padding: var(--spacing-10) var(--spacing-16);
  background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--radius-buttons);
}

/* --- Beitragsuebersichten -----------------------------------------------
   Kachelraster fuer Magazin und Insights, dazu die Themenleiste. Die
   Leiste ist ohne JavaScript verborgen: ein Filter, der nicht filtert,
   waere eine Schaltflaeche ohne Wirkung. */
.filter { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: 0 0 var(--spacing-48); }
.filter[hidden] { display: none; }
.filter__knopf {
  font: inherit; font-size: var(--spacing-13); letter-spacing: 0.06em;
  padding: var(--spacing-10) var(--spacing-16);
  /* Paper statt transparent: die Leiste steht auf einer Mist-Flaeche,
     ein Rahmen in Mist waere dort unsichtbar. */
  background: var(--color-paper); border: 1px solid var(--color-mist); color: var(--color-pewter);
  border-radius: var(--radius-buttons); cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.filter__knopf:hover { border-color: var(--color-char); color: var(--color-ink); }
.filter__knopf.ist-aktiv { background: var(--color-char); border-color: var(--color-char); color: var(--color-paper); }
.filter__knopf:focus-visible { outline: 2px solid #8f4520; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .filter__knopf { transition: none; } }

.beitraege__leer { color: var(--color-pewter); max-width: 62ch; }
/* Themen und Reihenfolge stehen nebeneinander, auf schmalen Geraeten
   untereinander. */
.filterleiste { display: flex; flex-wrap: wrap; gap: var(--spacing-16) var(--spacing-32); align-items: flex-start; margin: 0 0 var(--spacing-48); }
.filterleiste .filter { margin: 0; }
.filter--sortierung { flex: 0 0 auto; }
/* Kennzeichen an der Kachel: Aktualitaet und vorhandene Broschuere.
   Beide stehen in einer Zeile und brechen auf schmalen Geraeten um. */
.kennzeichen { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-8); }
.kennzeichen--neu, .kennzeichen--druck {
  display: inline-block;
  font-size: var(--spacing-12); letter-spacing: 0.12px; line-height: 1.3;
  padding: var(--spacing-4) var(--spacing-10);
  border: 1px solid transparent; border-radius: var(--radius-buttons);
}
.kennzeichen--neu { border-color: #8f4520; color: #8f4520; }
.kennzeichen--druck { background: var(--color-char); color: var(--color-paper); border-color: var(--color-char); }
/* Die Kachel ist eine .card--motiv und traegt damit display: flex aus
   v1-bausteine.css. Das schlaegt das display: none, das der Browser fuer
   [hidden] mitbringt, also muss die Regel hier ausdruecklich stehen. */
.beitragskarte[hidden] { display: none; }
.beitraege__fuss { margin: var(--spacing-48) 0 0; font-size: var(--spacing-13); color: var(--color-pewter); max-width: 70ch; }

/* Einzelner Beitrag. */
/* Aufzaehlung mit Ember-Strich, CI S.09. ul bekommt in v1-bausteine.css
   list-style: none, deshalb steht der Strich als eigenes Element davor. */
.beitragsseite__liste { margin: 0 0 var(--spacing-24); padding: 0; list-style: none; }
.beitragsseite__liste > li {
  position: relative; padding-left: 24px; margin-top: var(--spacing-8);
  max-width: 600px; font-size: var(--text-body); line-height: var(--leading-body);
}
.beitragsseite__liste > li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 12px; height: 2px; background: var(--color-ember);
}
.beitragsseite__gegenueber { margin: 0 0 var(--spacing-24); padding-left: var(--spacing-24);
  border-left: 2px solid var(--color-mist); }
.beitragsseite__gegenueber .overline { margin-bottom: var(--spacing-8); }
/* v1-bausteine.css setzt Ueberschriften auf margin 0, deshalb hier beide
   Abstaende. Der Abstand nach oben ist deutlich groesser als der nach
   unten, damit die Ueberschrift zum folgenden Text gehoert. */
.beitragsseite h2 { margin: var(--spacing-48) 0 var(--spacing-16); }
.beitragsseite h3 { margin: var(--spacing-32) 0 var(--spacing-8); }
.beitragsseite h2:first-child, .beitragsseite h3:first-child { margin-top: 0; }
/* Die Overline gehoert zur Ueberschrift darunter. Der Abstand des neuen
   Abschnitts steht deshalb vor der Overline, nicht zwischen beiden,
   sonst schwebt die Overline zwischen zwei Bloecken. */
.beitragsseite .overline { margin-top: var(--spacing-48); }
.beitragsseite .overline + h2, .beitragsseite .overline + h3 { margin-top: 0; }
.beitragsseite .overline:first-child,
.beitragsseite .karte .overline,
.beitragsseite__gegenueber .overline { margin-top: 0; }
/* In einer Kennzahlenreihe folgt Label auf Wert auf Label. Dort waere der
   Abschnittsabstand zu viel: die Reihe gehoert zusammen. */
.beitragsseite p.zahlen__wert + .overline { margin-top: var(--spacing-24); }
.beitragsseite h3 + .overline { margin-top: var(--spacing-16); }
/* Karten im Beitrag sind Hinweiskaesten, keine Kacheln im Raster. Die
   Mindesthoehe von 380 px stammt aus dem Kachelraster und hinterliesse
   unter drei Zeilen Text ein halbes Bildschirmfenster Leerraum. */
.beitragsseite .karte { min-height: 0; }
/* Fundstelle unter einem Abschnitt: Gericht, Datum, Aktenzeichen. */
.beitragsseite__quelle { margin: 0 0 var(--spacing-24); font-size: var(--spacing-13); color: var(--color-pewter); }
.beitragsseite__klausel {
  margin: 0 0 var(--spacing-24); padding: var(--spacing-24);
  background: var(--color-mist); border-radius: var(--radius-cards); max-width: 600px;
}
.beitragsseite__klausel p { margin: 0; }
.beitragsseite table { width: 100%; border-collapse: collapse; margin: 0 0 var(--spacing-24); font-size: var(--text-body); }
.beitragsseite th, .beitragsseite td { text-align: left; padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) 0; border-bottom: 1px solid var(--color-mist); vertical-align: top; }
.beitragsseite th { font-weight: var(--font-weight-medium); color: var(--color-pewter); }
/* Im Beitrag ist .fliess der Absatz selbst, nicht sein Behaelter. v1-bausteine.css
   setzt p { margin: 0 }, deshalb hier ein eigener Abstand. */
.beitragsseite p.fliess { margin: 0 0 var(--spacing-16); }
/* Einzelne Kennzahl im Beitragsfluss, nicht in einer .zahlen-Liste. */
.beitragsseite p.zahlen__wert { margin: 0 0 var(--spacing-16); }
.hinweis p.fliess { margin: 0 0 var(--spacing-16); }
.beitragsseite .lede { margin: 0; }
.beitragsseite__meta { color: var(--color-pewter); font-size: var(--spacing-13); margin: 0 0 var(--spacing-32); }
.beitragsseite__zurueck { margin-top: var(--spacing-48); }

/* Die dunkle Karte fuer den geschuetzten Bereich auf der Auswahlseite. */
.karte.karte--dunkel { background: var(--color-char); color: var(--color-paper); border: 0; }
.karte--dunkel .fliess { color: var(--color-mist); }

/* Abstand ueber einem eingeschobenen Baustein. */
.abstand-oben { margin-top: var(--spacing-64); }
.abstand-unten { margin-bottom: var(--spacing-64); }

/* --- Team-Area --------------------------------------------------------
   Eine Kachel steht noch nicht bereit. Sie bleibt sichtbar, damit klar
   ist, was kommt, traegt aber keine Flaeche und keinen Verweis. */
.karte.karte--wartet { background: transparent; border: 1px dashed var(--color-smoke); }
.karte__status {
  align-self: flex-start;
  padding: 5px 14px; border-radius: 999px;
  background: var(--color-mist); color: var(--color-pewter);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.karte__spaeter { color: var(--color-pewter); }
.karte__fuss--zwei { display: flex; flex-wrap: wrap; gap: var(--spacing-16); }

/* Die Terminkachel traegt vier Verweise: zwei Ansprechpartner, je online
   und vor Ort. Sie laeuft deshalb ueber beide Spalten des Rasters, damit
   die Schalter nebeneinander stehen und nicht zu viert stapeln. */
.karte--quer { grid-column: 1 / -1; min-height: 0; }
/* v1-bausteine.css deckelt .karte__text auf 52ch. In den halbbreiten
   Kacheln faellt das nicht auf, in der durchlaufenden schon: dort soll
   der Text die ganze Breite nutzen duerfen. */
.karte--quer .karte__text { max-width: none; }
.buchung__kopf { display: flex; flex-direction: column; gap: var(--spacing-24); }
.buchung { margin-top: auto; display: grid; gap: var(--spacing-32); }
@media (min-width: 700px) { .buchung { grid-template-columns: 1fr 1fr; gap: var(--spacing-48); } }
/* Ab 900px steht links die Ansprache, rechts die vier Verweise. Die
   Personen liegen dann untereinander, damit beide Schalter einer Person
   nebeneinander bleiben. */
@media (min-width: 900px) {
  .karte--quer .karte__text {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-48); align-content: center;
  }
  .karte--quer .buchung { margin-top: 0; grid-template-columns: 1fr; gap: var(--spacing-32); }
}
.buchung__name { margin: 0; font-size: var(--text-subheading); font-weight: var(--font-weight-medium); }
.buchung__rolle { margin: var(--spacing-4) 0 var(--spacing-16); font-size: var(--spacing-13); color: var(--color-pewter); }
.karte--bild .buchung__rolle { color: var(--color-mist); }
.buchung__tasten { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin: 0; }

/* --- Begleitung: Portraet neben dem Abschnittskopf ---------------------
   Auf der Landingpage steht neben der Praxisstudie das Gesicht, das die
   Einfuehrung begleitet. Unterhalb von 1000px stapeln sich beide. */
.begleitung { display: grid; gap: var(--spacing-48); align-items: start; }
@media (min-width: 1000px) { .begleitung { grid-template-columns: minmax(0, 1fr) 320px; } }
.begleitung .abschnitt__kopf { margin-bottom: var(--spacing-32); }
.begleitung__person { max-width: 420px; }
.begleitung__bild {
  margin: 0; border-radius: var(--radius-images);
  overflow: hidden; background: var(--color-mist);
}
.begleitung__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.begleitung__name { margin: var(--spacing-16) 0 0; font-size: var(--text-subheading); font-weight: var(--font-weight-medium); }
.begleitung__rolle { margin: var(--spacing-4) 0 0; font-size: var(--spacing-13); color: var(--color-pewter); }
.begleitung__marke { margin: var(--spacing-24) 0 var(--spacing-8); }
.begleitung__satz { margin: 0; font-size: var(--text-subheading); line-height: var(--leading-subheading); }
.begleitung__text { margin: var(--spacing-12) 0 0; color: var(--color-ink); }

/* Die Wahl zwischen den beiden Wegen beim Eintritt steht innerhalb
   eines Feldblocks und darf deshalb nicht so raumgreifend sein wie die
   Wahl der Meldeart ganz oben. */
/* Die Wahl steht in einer Spalte des Formulars, nicht im vollen
   Fenster. Ob zwei Karten nebeneinander passen, entscheidet deshalb
   die Breite des Feldblocks und nicht die des Fensters. */
.form--meldung > fieldset { container-type: inline-size; }
.wahl--eng {
  margin-bottom: var(--spacing-32); grid-template-columns: 1fr;
  /* Ein heller Ember-Grund setzt diese Wahl von der Wahl der Meldeart
     ganz oben ab: dort geht es um den Vorgang, hier um den Weg. */
  background: #faf2ec; border-radius: var(--radius-cards);
  padding: var(--spacing-16); gap: var(--spacing-12);
}
.wahl--eng .wahl__feld { padding: var(--spacing-16) var(--spacing-20); border-color: #e8d3c5; }
.wahl--eng .wahl__feld:hover { border-color: var(--color-ember); }
.wahl--eng .wahl__satz { font-size: var(--spacing-12); }
/* Die getroffene Wahl bleibt hier hell: Schwarz ist oben schon der
   Meldeart vorbehalten, hier genuegt die Ember-Flaeche mit Rahmen. */
.wahl--eng .wahl__feld:has(input:checked) {
  background: #f4e0d1; border-color: var(--color-ember);
  box-shadow: inset 0 0 0 1px var(--color-ember);
  color: var(--color-char);
}
.wahl--eng .wahl__feld:has(input:checked) .wahl__satz { color: var(--color-pewter); }
@container (min-width: 560px) { .wahl--eng { grid-template-columns: 1fr 1fr; } }

/* --- Stellenboerse ----------------------------------------------------
   Drei gleichrangige Karten nebeneinander, eine helle Kartenfarbe fuer
   den Einsatz auf Mist, eine Hakenliste und ein gerahmtes Vorschaubild
   fuer die Praesentation. */
.drei { display: grid; gap: var(--element-gap); }
@media (min-width: 760px) { .drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.drei .karte { min-height: 0; }

.karte.karte--hell { background: var(--color-paper); }

.haken { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-12); }
.haken li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--spacing-12); font-size: var(--text-body); }
.haken li::before { content: "\2713"; color: #d98a5a; line-height: 1.4; }
.karte--mist .haken li::before, .karte--hell .haken li::before { color: #8f4520; }

.vorschau { margin: 0; }
.vorschau img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-mist); border-radius: var(--radius-images);
}
.karte--mist .vorschau img { border-color: var(--color-paper); }

/* In der Team-Area liegt das Bild nur als Textur hinter der Kachel.
   Der Schleier der Startseite ist dafuer zu duenn: dort traegt das Bild
   die Aussage, hier soll es die Schrift nicht stoeren. */
.karte--bild.karte--ruhig .karte__schleier { background: rgba(7, 7, 7, .58); }
/* Die Mooswand ist heller als die anderen Kachelbilder, deshalb liegt
   der Schleier hier dichter. Ab 900px steht der Text nur links: dann
   laeuft der Schleier nach rechts aus und gibt das Moos frei. */
.karte--bild.karte--ruhig.karte--quer .karte__schleier { background: rgba(7, 7, 7, .72); }
@media (min-width: 900px) {
  .karte--bild.karte--ruhig.karte--quer .karte__schleier {
    background: linear-gradient(to right, rgba(7, 7, 7, .84) 0%, rgba(7, 7, 7, .74) 52%, rgba(7, 7, 7, .5) 100%);
  }
}
.karte--bild.karte--ruhig img { filter: grayscale(.15); }
/* Das Schaubild zu Onboarding und Offboarding verliert seinen Sinn,
   wenn die beiden Enden wegfallen. Es steht deshalb vollstaendig in der
   Kachel; sein eigener Grund ist ohnehin dieselbe dunkle Flaeche. */
.karte--bild.karte--ruhig.karte--ganz { background: var(--color-char); }
.karte--bild.karte--ruhig.karte--ganz img { object-fit: contain; object-position: center; }
}

/* Ein Hinweis im Formular, der nicht zu einem einzelnen Feld gehoert,
   sondern zum ganzen Vorgang: was mit den Leistungen geschieht. */
.formhinweis {
  background: #f5f4f2; border-radius: var(--radius-cards);
  padding: var(--spacing-16) var(--spacing-20); margin-bottom: var(--spacing-24);
}
.formhinweis__lab {
  margin: 0 0 var(--spacing-6); font-size: var(--spacing-12);
  font-weight: var(--font-weight-semibold); letter-spacing: .16em;
  text-transform: uppercase; color: #8f4520;
}
.formhinweis p:last-child { margin: 0; font-size: var(--spacing-13); line-height: 1.55; color: var(--color-ink); }

/* Die Deutschlandkarte steht neben dem Abschnitt zur Expertise. Sie
   soll den Text nicht ueberstimmen, sondern nur zeigen, wie weit die
   Arbeit reicht: helle Flaeche, Ember-Punkte, kein Rahmen. */
@media (min-width: 1000px) { .begleitung--karte { grid-template-columns: minmax(0, 1fr) 360px; } }
.karte-land { align-self: end; max-width: 420px; }
.karte-land__bild { margin: 0; }
.karte-land__bild img { display: block; width: 100%; height: auto; }
.karte-land__bild figcaption {
  margin-top: var(--spacing-12); font-size: var(--spacing-12);
  line-height: 1.5; color: var(--color-pewter);
}