/* =====================================================================
   antigewalt.com - Stylesheet
   Tokens und Masse stammen aus dem freigegebenen Mockup.
   Aufbau: 1 Tokens, 2 Grundlagen, 3 Bausteine, 4 Hilfsklassen, 5 Responsive
   ===================================================================== */

/* ---------- Schrift ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   1  Tokens
   ===================================================================== */
:root {
  /* Farbwelt */
  --akzent:        #C9702B;
  --akzent-dunkel: #A0653A;
  --dunkel:        #24262B;
  --tinte:         #23252A;
  --papier:        #F7F4EE;
  --papier-warm:   #EFEAE0;
  --papier-hell:   #FFFEFA;
  --auf-dunkel:    #F3EFE8;
  --auf-akzent:    #FFFDF8;

  --text-weich:    #55524C;
  --text-leise:    #6E6A63;
  --text-still:    #8B867C;
  --auf-dunkel-leise: #8E8A80;

  --linie:         #E1DCD1;
  --linie-stark:   #D9D3C7;
  --linie-feld:    #C6C0B3;
  --linie-dunkel:  rgba(255, 255, 255, .22);

  /* Typografie */
  --schrift: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --t-h1:      clamp(2.25rem, 1.2rem + 3.4vw, 3.875rem);
  --t-h1-klein: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 1.1rem + 2.1vw, 2.625rem);
  --t-h3:      clamp(1.375rem, 1.05rem + 1vw, 1.5625rem);
  --t-lead:    clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --t-body:    1.0625rem;
  --t-klein:   .9375rem;
  --t-mini:    .8125rem;
  --t-label:   .75rem;

  /* Raster */
  /* Waechst auf sehr breiten Bildschirmen etwas mit, bleibt aber
     begrenzt, damit Zeilen lesbar kurz bleiben. */
  --breite:    min(1600px, 92vw);
  --lesebreite: 68ch;
  --rand:      clamp(1.5rem, 5vw, 6rem);
  --abschnitt: clamp(3.5rem, 7vw, 6rem);
  --lucke:     clamp(2rem, 4vw, 4.5rem);

  --tempo: 180ms;
  --kurve: cubic-bezier(.2, .6, .3, 1);
}

/* =====================================================================
   2  Grundlagen
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  /* Auf breiten Bildschirmen liegt die Seite wie ein Blatt auf einem
     etwas dunkleren Untergrund. Ohne den Unterschied endet der Inhalt
     mit einer harten Kante und wirkt abgeschnitten. */
  background: var(--papier-warm);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: pretty;
}
h1 { font-size: var(--t-h1); letter-spacing: -.025em; line-height: 1.04; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

/* Sichtbarer Fokus auf allen bedienbaren Elementen (WCAG 2.4.7). */
:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* Bewegung nur, wenn gewuenscht (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Sprungmarke zum Inhalt */
.sprungmarke {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--dunkel);
  color: var(--auf-dunkel);
  padding: .875rem 1.25rem;
  font-weight: 700;
  font-size: var(--t-klein);
  transition: top var(--tempo) var(--kurve);
}
.sprungmarke:focus { top: 1rem; }

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

/* =====================================================================
   3  Grundmuster
   ===================================================================== */
.huelle {
  max-width: var(--breite);
  margin: 0 auto;
  background: var(--papier);
}

/* Erst ab der Breite, ab der links und rechts wirklich Platz frei wird.
   Darunter fuellt die Seite den Bildschirm und braucht keinen Rahmen. */
@media (min-width: 1500px) {
  .huelle {
    border-left: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
    /* Sehr flach gehalten. Ein kraeftiger Schatten wirkt wie eine
       Vorlage von der Stange, eine Haarlinie wirkt gebaut. */
    box-shadow: 0 0 0 1px rgba(35, 37, 42, .015),
                0 2px 24px rgba(35, 37, 42, .045);
  }
}

.abschnitt {
  padding: var(--abschnitt) var(--rand);
}
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.abschnitt--dunkel {
  background: var(--dunkel);
  color: var(--auf-dunkel);
  border-top: 0 !important;
}
.abschnitt--dunkel + .abschnitt { border-top: 0; }
.abschnitt--warm {
  background: var(--papier-warm);
  border-top: 0 !important;
}

/* Themenzeile über der Überschrift */
.themenzeile {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 1.125rem;
}

.abschnitt__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 1rem 1.875rem;
  font-family: inherit;
  font-size: var(--t-klein);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}
.knopf--primaer {
  background: var(--akzent);
  color: var(--auf-akzent);
  border-color: var(--akzent);
}
.knopf--primaer:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }

.knopf--sekundaer {
  border-color: var(--tinte);
  color: var(--tinte);
}
.knopf--sekundaer:hover { background: var(--tinte); color: var(--auf-dunkel); }

.abschnitt--dunkel .knopf--sekundaer,
.knopf--auf-dunkel {
  border-color: rgba(243, 239, 232, .45);
  color: var(--auf-dunkel);
}
.abschnitt--dunkel .knopf--sekundaer:hover,
.knopf--auf-dunkel:hover { background: var(--auf-dunkel); color: var(--tinte); }

.knopf--rahmen-dunkel {
  border-color: rgba(243, 239, 232, .45);
  color: var(--auf-dunkel);
}
.knopf--rahmen-dunkel:hover {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}

.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.knopf.laedt { position: relative; color: transparent; pointer-events: none; }
.knopf.laedt::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.125rem; height: 1.125rem;
  margin: -.5625rem 0 0 -.5625rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--auf-akzent);
  animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.knopfreihe {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Textlink mit Unterstreichung in Akzentfarbe */
.textlink {
  display: inline-block;
  font-size: var(--t-klein);
  font-weight: 700;
  border-bottom: 2px solid var(--akzent);
  padding-bottom: 2px;
  transition: color var(--tempo) var(--kurve);
}
.textlink:hover { color: var(--akzent); }
.textlink::after { content: '\00a0\2192'; }

/* =====================================================================
   4  Kopfbereich
   ===================================================================== */
.utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: .5625rem var(--rand);
  background: var(--dunkel);
  color: #C9C4BA;
  font-size: var(--t-mini);
}
.utility a { color: var(--auf-dunkel); }
.utility a:hover { color: var(--akzent); }
.utility__rechts { display: flex; gap: 1.5rem; align-items: center; }
.utility__telefon { font-weight: 600; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow var(--tempo) var(--kurve),
              padding var(--tempo) var(--kurve);
}
.kopf--kompakt {
  box-shadow: 0 2px 18px rgba(35, 37, 42, .09);
}

/* Der Kopf ist sticky und bildet damit einen eigenen Stapelkontext.
   Bei geoeffnetem Menue muss er ueber den Abdunkler steigen, sonst
   liegt dieser auch ueber der Navigation, die in ihm enthalten ist. */
.kopf--menue-offen { z-index: 160; }
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem var(--rand);
  transition: padding var(--tempo) var(--kurve);
}
.kopf--kompakt .kopf__innen { padding-top: .75rem; padding-bottom: .75rem; }

/* Wortmarke, zweizeilig gesetzt: Name oben, Domain darunter.
   Im Kopfbereich sind es span-Elemente, die ohne display:block
   nebeneinander laufen wuerden. Der Fussbereich verwendet dieselbe
   Gestaltung, damit die Marke an beiden Stellen gleich aussieht. */
.marke {
  display: inline-block;
  line-height: 1.15;
  flex-shrink: 0;
}
.marke__haupt {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.marke__unter {
  display: block;
  margin-top: .1875rem;
  /* An der Breite des Namens ausgerichtet, damit beide Zeilen
     buendig links und rechts abschliessen. */
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--text-still);
}
.kopf--kompakt .marke__unter { display: none; }

/* ---------- Hauptnavigation ---------- */
.navigation { display: flex; }
.navigation__liste {
  display: flex;
  flex-wrap: nowrap;
  /* Zwischen 1180 und 1440 Pixeln wird es eng. Statt umzubrechen,
     ruecken die Punkte enger zusammen. */
  gap: clamp(.9rem, 1.6vw, 1.625rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-klein);
  font-weight: 600;
}
.navigation__punkt { position: relative; }
.navigation__link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem 0;
  /* Ohne diese Zeile bricht "Für Organisationen" auf zwei Zeilen um
     und die Kopfzeile wirkt unruhig. */
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}
.navigation__link:hover,
.navigation__link[aria-expanded="true"] { color: var(--akzent); }
.navigation__link--aktiv {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}
.navigation__pfeil {
  font-size: .625rem;
  transition: transform var(--tempo) var(--kurve);
}
.navigation__link[aria-expanded="true"] .navigation__pfeil { transform: rotate(180deg); }

.navigation__klapp {
  position: absolute;
  top: calc(100% + .75rem);
  left: -1rem;
  min-width: 17rem;
  padding: .75rem 0;
  margin: 0;
  list-style: none;
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  box-shadow: 0 12px 32px rgba(35, 37, 42, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve),
              visibility var(--tempo);
}
.navigation__punkt--offen > .navigation__klapp {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navigation__klapp a {
  display: block;
  padding: .625rem 1.375rem;
  font-size: var(--t-klein);
  font-weight: 500;
  transition: background-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.navigation__klapp a:hover { background: var(--papier-warm); color: var(--akzent); }

.kopf__aktionen { display: flex; gap: .75rem; flex-shrink: 0; }

/* ---------- Kopfzeile bei schmalerem Fenster ----------
   Marke, Navigation und Schaltflaechen ergeben zusammen mehr Breite, als
   ab etwa 1500 Pixeln zur Verfuegung steht. Statt umzubrechen oder
   ueberzulaufen wird stufenweise reduziert. */

@media (max-width: 1680px) {
  /* Die zweite Schaltflaeche entfaellt zuerst, sie ist im Menue erreichbar */
  .kopf__aktionen .knopf--sekundaer { display: none; }
}

@media (max-width: 1340px) {
  .kopf__innen { gap: 1rem; }
  .kopf__aktionen .knopf { padding-left: .9rem; padding-right: .9rem; font-size: .8125rem; }
}

@media (max-width: 1180px) {
  /* Ab hier uebernimmt das Klappmenue, die Schaltflaechen stehen darin */
  .kopf__aktionen .knopf { display: none; }
}

/* Nur im geoeffneten mobilen Menue sichtbar */
.navigation__mobil-aktionen { display: none; }
.kopf__aktionen .knopf {
  min-height: 44px;
  padding: .75rem 1.25rem;
  font-size: .875rem;
}
.kopf--kompakt .kopf__aktionen .knopf--sekundaer { display: none; }

/* ---------- Mobiles Menü ---------- */
.menue-schalter {
  display: none;
  align-items: center;
  gap: .625rem;
  min-height: 44px;
  padding: .5rem .875rem;
  border: 1px solid var(--tinte);
  background: none;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.menue-schalter__balken {
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  transition: background-color var(--tempo) var(--kurve);
}
.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform var(--tempo) var(--kurve);
}
.menue-schalter__balken::before { top: -6px; }
.menue-schalter__balken::after  { top: 6px; }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken { background: transparent; }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken::before { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken::after  { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   5  Bausteine
   ===================================================================== */

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr minmax(0, 600px);
  gap: var(--lucke);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 5rem) var(--rand) clamp(3rem, 5.5vw, 5.5rem);
}
.hero__text { max-width: 40rem; }
.hero__lead {
  margin: 1.625rem 0 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-weich);
  max-width: 35rem;
}
.hero .knopfreihe { margin-top: 2.5rem; }

.hero__vertrauen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.75rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .90625rem;
  font-weight: 700;
}
.hero__vertrauen li { display: flex; align-items: center; gap: 1.75rem; }
.hero__vertrauen li + li::before {
  content: '';
  width: 1px; height: 1rem;
  background: #CFC9BD;
}

.hero__bild { position: relative; }
.hero__bild img { width: 100%; object-fit: cover; aspect-ratio: 600 / 680; }
.hero__portrait {
  position: absolute;
  left: -3.5rem;
  bottom: 2.5rem;
  padding: 6px;
  background: var(--papier-hell);
  box-shadow: 0 8px 24px rgba(35, 37, 42, .18);
}
.hero__portrait img {
  width: 170px;
  aspect-ratio: 170 / 200;
  object-fit: cover;
  filter: grayscale(1);
}
.bildunterschrift {
  margin: .75rem 0 0;
  font-size: .78125rem;
  color: var(--text-still);
  line-height: 1.5;
}

/* Platzhalter, solange kein Bild hinterlegt ist */
.bild-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  aspect-ratio: 600 / 680;
  background: repeating-linear-gradient(
    135deg, var(--papier-warm) 0 12px, #E7E1D5 12px 24px);
  border: 1px dashed var(--linie-feld);
  color: var(--text-still);
  font-size: var(--t-mini);
  font-weight: 600;
  text-align: center;
  padding: 1.5rem;
}

/* ---------- Seitenkopf ---------- */
.seitenkopf {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: var(--lucke);
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem) var(--rand) clamp(3rem, 5.5vw, 5.5rem);
}
.seitenkopf--ohne-bild { grid-template-columns: 1fr; max-width: 56rem; }
.seitenkopf h1 { font-size: var(--t-h1-klein); margin-top: 1.625rem; }
.seitenkopf__lead {
  margin: 1.375rem 0 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-weich);
  max-width: 35rem;
}
.seitenkopf .knopfreihe { margin-top: 2.25rem; }

.brotkrume {
  font-size: var(--t-mini);
  color: var(--text-still);
}
.brotkrume ol {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brotkrume li + li::before { content: '/\00a0'; margin-right: .375rem; }
.brotkrume a:hover { color: var(--akzent); }
.brotkrume [aria-current] { color: var(--tinte); font-weight: 600; }

/* ---------- Eckdaten ---------- */
.eckdaten {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--linie-stark);
  border-bottom: 1px solid var(--linie-stark);
  margin-top: 2.25rem;
}
.eckdaten__punkt {
  padding: 1.125rem 2rem;
  border-left: 1px solid var(--linie-stark);
}
.eckdaten__punkt:first-child { padding-left: 0; border-left: 0; }
.eckdaten__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-still);
}
.eckdaten__wert { font-size: 1rem; font-weight: 700; margin-top: .3125rem; }

/* ---------- Zweispalter Ausgangslage ---------- */
.zweispalter {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: var(--lucke);
}
.zweispalter__text { font-size: 1.0625rem; line-height: 1.65; color: var(--text-weich); }
.zweispalter__aussage {
  margin: 2rem 0 0;
  font-size: 1.3125rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--tinte);
}

/* ---------- Zielgruppen-Teaser ---------- */
.teaser-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--lucke);
  margin-top: 3.5rem;
}
.teaser {
  display: flex;
  gap: 1rem;
  border-top: 1px solid var(--linie-stark);
  padding: 1.75rem 0 2.125rem;
}
.teaser__nummer {
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--akzent);
  padding-top: .375rem;
  font-variant-numeric: tabular-nums;
}
.teaser__titel {
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: color var(--tempo) var(--kurve);
}
a.teaser__titel:hover { color: var(--akzent); }
.teaser__situation {
  margin: .625rem 0 0;
  font-size: var(--t-klein);
  line-height: 1.55;
  color: var(--text-leise);
}
.teaser__ergebnis {
  margin-top: .75rem;
  font-size: var(--t-klein);
  font-weight: 600;
}
.teaser__ergebnis::before { content: '\2192\00a0'; color: var(--akzent); }

/* ---------- Kernangebote ---------- */
.angebote {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lucke);
  margin-top: 4rem;
}
.angebot {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 1.75rem;
}
.angebot__nummer { font-size: var(--t-mini); font-weight: 700; color: var(--akzent); }
.angebot__titel {
  font-size: 1.5625rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.angebot__feld dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--auf-dunkel-leise);
}
.angebot__feld dd {
  margin: .375rem 0 0;
  font-size: var(--t-klein);
  line-height: 1.55;
  color: rgba(243, 239, 232, .78);
}
.angebot .knopf { margin-top: auto; align-self: flex-start; }

.weitere {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie-dunkel);
}
.weitere__label {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--auf-dunkel-leise);
  margin-right: .75rem;
}
.weitere__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-klein);
  line-height: 1.9;
}
.weitere__liste li + li::before { content: '\00b7'; margin-right: .75rem; color: var(--auf-dunkel-leise); }
.weitere__liste a { font-weight: 600; }
.weitere__liste a:hover { color: var(--akzent); }

/* ---------- Wirkung und Nutzen ---------- */
.raster-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem var(--lucke);
  margin-top: 3.5rem;
}
.punkt { border-top: 1px solid var(--linie-stark); padding-top: 1.375rem; }
.abschnitt--dunkel .punkt { border-top-color: var(--linie-dunkel); }
.punkt__titel { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; }
.punkt__text {
  margin: .5rem 0 0;
  font-size: .90625rem;
  line-height: 1.55;
  color: var(--text-leise);
}
.punkt--gross .punkt__titel { font-size: 1.25rem; }
.punkt--gross .punkt__text { font-size: var(--t-klein); margin-top: .625rem; }

/* ---------- Person ---------- */
.person {
  display: grid;
  grid-template-columns: minmax(0, 500px) 1fr;
  gap: var(--lucke);
  align-items: center;
}
.person__bild img { width: 100%; aspect-ratio: 500 / 620; object-fit: cover; }
.person__bild .bild-platzhalter { aspect-ratio: 500 / 620; }
.person__text { font-size: 1.0625rem; line-height: 1.65; color: var(--text-weich); max-width: 35rem; margin-top: 1.5rem; }
.person h2 { margin-top: 1.125rem; }

.merkmale {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  max-width: 35rem;
}
.merkmale li {
  border-top: 1px solid var(--linie-stark);
  padding: .875rem 0;
  font-size: .96875rem;
  font-weight: 600;
}
.merkmale li:last-child { border-bottom: 1px solid var(--linie-stark); }
.merkmale__detail { font-weight: 400; color: var(--text-leise); }
.person .textlink { margin-top: 2rem; }

/* ---------- Auftraggeberband ---------- */
.auftraggeber {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .84375rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-still);
}
.auftraggeber--logos {
  gap: 2rem 3rem;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
}
.auftraggeber--logos img {
  max-height: 2.75rem;
  width: auto;
  filter: grayscale(1);
  opacity: .75;
  transition: opacity var(--tempo) var(--kurve), filter var(--tempo) var(--kurve);
}
.auftraggeber--logos img:hover { filter: none; opacity: 1; }

/* ---------- Zitate ---------- */
.zitate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lucke);
  margin-top: 4rem;
}
.zitat {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid var(--linie-stark);
  padding-top: 1.625rem;
  margin: 0;
}
.zitat__text {
  margin: 0;
  font-size: 1.03125rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.zitat__text::before { content: '\201E'; }
.zitat__text::after  { content: '\201C'; }
.zitat__quelle { margin-top: auto; font-style: normal; }
.zitat__name { font-size: .90625rem; font-weight: 700; }
.zitat__org  { font-size: var(--t-mini); color: var(--text-still); margin-top: .1875rem; }

.zitat--gross {
  display: block;
  border: 0;
  padding: 0;
  text-align: center;
  max-width: 55rem;
  margin: 0 auto;
}
.zitat--gross .zitat__text {
  font-size: clamp(1.125rem, .95rem + .8vw, 1.5rem);
  line-height: 1.5;
  font-weight: 600;
}
.zitat--gross .zitat__quelle { margin-top: 1.5rem; }

/* ---------- Fallbeispiel ---------- */
.fall {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: var(--lucke);
  margin-top: 3.5rem;
  align-items: start;
}
.fall__bild img { width: 100%; aspect-ratio: 420 / 460; object-fit: cover; filter: grayscale(1); }
.fall__bild .bild-platzhalter { aspect-ratio: 420 / 460; }
.fall__kontext { margin-top: .875rem; font-size: .875rem; color: var(--text-leise); line-height: 1.5; }

.platzhalter-marke {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-still);
  border: 1px dashed #B8B2A5;
  padding: .25rem .625rem;
  margin-left: 1.125rem;
  vertical-align: middle;
}

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 11.25rem) 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--linie-stark);
  padding: 1.25rem 0;
}
.schritte--nummeriert li { counter-increment: schritt; }
.schritte__nummer {
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.schritte__titel { font-size: 1.03125rem; font-weight: 800; }
.schritte__text { margin: 0; font-size: var(--t-klein); line-height: 1.55; color: var(--text-leise); }

/* Ablauf-Variante mit Text unter dem Titel */
.ablauf { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.ablauf li {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--linie-stark);
  padding: 1.25rem 0;
}
.ablauf__nummer {
  flex-shrink: 0;
  width: 1.375rem;
  font-size: .78125rem;
  font-weight: 700;
  color: var(--akzent);
  padding-top: .1875rem;
  font-variant-numeric: tabular-nums;
}
.ablauf__titel { font-size: 1.03125rem; font-weight: 800; }
.ablauf__text { margin: .375rem 0 0; font-size: .90625rem; line-height: 1.55; color: var(--text-leise); }

/* ---------- Inhaltsliste ---------- */
.inhaltsliste { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.inhaltsliste li {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  border-top: 1px solid var(--linie-stark);
  padding: 1rem 0;
}
.inhaltsliste__nummer {
  flex-shrink: 0;
  width: 1.375rem;
  font-size: .78125rem;
  font-weight: 700;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.inhaltsliste__titel { font-size: 1.03125rem; font-weight: 700; }
.inhaltsliste__text { font-size: var(--t-klein); color: var(--text-leise); }

.kasten {
  margin-top: 2.25rem;
  border: 1px solid var(--linie-stark);
  padding: 1.5rem 1.75rem;
}
.kasten__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-still);
}
.kasten__text { margin: .625rem 0 0; font-size: .90625rem; line-height: 1.7; color: var(--text-weich); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: var(--lucke); }
.faq__liste { margin: 0; }
.faq__eintrag { border-top: 1px solid var(--linie-stark); }
.faq__eintrag:last-child { border-bottom: 1px solid var(--linie-stark); }
.faq__frage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.375rem 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.faq__zeichen {
  flex-shrink: 0;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--text-still);
  transition: color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}
.faq__frage[aria-expanded="true"] .faq__zeichen {
  color: var(--akzent);
  transform: rotate(45deg);
}
.faq__antwort { padding: 0 0 1.375rem; max-width: 42rem; }
.faq__antwort p { font-size: var(--t-klein); line-height: 1.6; color: var(--text-weich); }
.faq__antwort[hidden] { display: none; }

/* ---------- Leadmagnet ---------- */
.leadmagnet {
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: var(--lucke);
  align-items: center;
}
.leadmagnet h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.15; }
.vorteile {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  font-size: .96875rem;
  color: var(--text-weich);
}
.vorteile li { display: flex; gap: .75rem; }
.vorteile li::before { content: '\2013'; color: var(--akzent); font-weight: 700; }

.formularkarte {
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  padding: 2.25rem;
}

/* ---------- Formularelemente ---------- */
.feld { display: block; }
.feld + .feld { margin-top: 1.125rem; }
.feld__label {
  display: block;
  font-size: var(--t-mini);
  font-weight: 700;
  margin-bottom: .4375rem;
}
.feld__optional { font-weight: 400; color: var(--text-still); }
.feld__hinweis { margin: .375rem 0 0; font-size: .75rem; color: var(--text-leise); line-height: 1.45; }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="number"],
.feld input[type="password"],
.feld input[type="date"],
.feld select,
.feld textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .8125rem .9375rem;
  border: 1px solid var(--linie-feld);
  border-radius: 0;
  background: var(--papier-hell);
  font-family: inherit;
  font-size: var(--t-klein);
  color: var(--tinte);
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.feld textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.feld select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238B867C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9375rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  border-width: 2px;
  padding: calc(.8125rem - 1px) calc(.9375rem - 1px);
  box-shadow: 0 0 0 3px rgba(201, 112, 43, .18);
}
.feld--fehler input, .feld--fehler select, .feld--fehler textarea {
  border-color: #B34A32;
  border-width: 2px;
}
.feld__fehler {
  display: flex;
  gap: .4375rem;
  margin: .4375rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: #99392A;
}
.feld__fehler::before { content: '\26A0'; }

/* Auswahlkarten */
.wahlliste { display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 0; border: 0; }
.wahl {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: 48px;
  padding: 1rem 1.125rem;
  border: 1px solid var(--linie-feld);
  background: var(--papier-hell);
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve);
}
.wahl:hover { border-color: var(--text-still); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl__punkt {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid #B8B2A5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--tempo) var(--kurve);
}
.wahl__punkt::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--akzent);
  transform: scale(0);
  transition: transform var(--tempo) var(--kurve);
}
.wahl:has(input:checked) { border: 2px solid var(--akzent); padding: calc(1rem - 1px) calc(1.125rem - 1px); }
.wahl:has(input:checked) .wahl__punkt { border-color: var(--akzent); }
.wahl:has(input:checked) .wahl__punkt::after { transform: scale(1); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 3px; }
.wahl__titel { font-size: .96875rem; font-weight: 600; }
.wahl:has(input:checked) .wahl__titel { font-weight: 700; }
.wahl__text { font-size: var(--t-mini); color: var(--text-still); margin-top: .125rem; }

/* Umschaltknöpfe (Kontaktweg, Format) */
.schalterreihe { display: flex; gap: .625rem; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.schalter {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .625rem 1.25rem;
  border: 1px solid var(--linie-feld);
  background: var(--papier-hell);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-leise);
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter:has(input:checked) {
  border: 2px solid var(--akzent);
  padding: calc(.625rem - 1px) calc(1.25rem - 1px);
  color: var(--tinte);
  font-weight: 700;
}
.schalter:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Zustimmung */
.zustimmung { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.zustimmung input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zustimmung__kasten {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: .125rem;
  border: 2px solid #B8B2A5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--auf-akzent);
  font-size: .8125rem;
  font-weight: 800;
  transition: background-color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}
.zustimmung__kasten::after { content: '\2713'; opacity: 0; transition: opacity var(--tempo) var(--kurve); }
.zustimmung:has(input:checked) .zustimmung__kasten {
  background: var(--akzent);
  border-color: var(--akzent);
}
.zustimmung:has(input:checked) .zustimmung__kasten::after { opacity: 1; }
.zustimmung:has(input:focus-visible) .zustimmung__kasten { outline: 3px solid var(--akzent); outline-offset: 3px; }
.zustimmung__text { font-size: .84375rem; line-height: 1.55; color: var(--text-weich); }
.zustimmung__text a { font-weight: 700; text-decoration: underline; }

/* Koederfeld gegen Spam, fuer Screenreader ausgeblendet */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Mehrstufiges Formular ---------- */
.stufen { max-width: 34rem; }
.stufen__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.stufen__marke {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-still);
}
.stufen__zaehler { font-size: var(--t-mini); font-weight: 700; color: var(--akzent); }
.stufen__balken { display: flex; gap: 6px; margin-top: .875rem; }
.stufen__balken span {
  flex: 1;
  height: 3px;
  background: #DDD7CA;
  transition: background-color var(--tempo) var(--kurve);
}
.stufen__balken span.erledigt { background: var(--akzent); }
.stufen h2 { margin-top: 2rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem); letter-spacing: -.015em; line-height: 1.15; }
.stufen__inhalt { margin-top: 1.625rem; }
.stufen__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.stufen__fuss--nur-weiter { justify-content: flex-end; }
.zurueck {
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--text-leise);
  background: none;
  border: 0;
  padding: .75rem 0;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
}
.zurueck::before { content: '\2190\00a0'; }
.zurueck:hover { color: var(--tinte); }

/* Zusammenfassung */
.uebersicht {
  margin-top: 1.5rem;
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  padding: 1.5rem 1.625rem;
}
.uebersicht__zeile {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .625rem 0;
  border-bottom: 1px solid #EEE9DE;
}
.uebersicht__zeile:last-child { border-bottom: 0; }
.uebersicht__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-still);
}
.uebersicht__wert { font-size: .90625rem; font-weight: 600; margin-top: .1875rem; line-height: 1.5; }
.uebersicht__bearbeiten {
  flex-shrink: 0;
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--akzent);
  background: none;
  border: 0;
  padding: .25rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

/* Bestätigung */
.bestaetigung {
  background: var(--dunkel);
  color: var(--auf-dunkel);
  padding: 3.5rem 3rem;
  text-align: center;
  max-width: 30rem;
}
.bestaetigung__haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  color: var(--akzent);
  font-size: 1.625rem;
  font-weight: 800;
}
.bestaetigung h2 { margin-top: 1.75rem; color: var(--auf-dunkel); font-size: 1.75rem; }
.bestaetigung p { margin: 1.125rem auto 0; font-size: .96875rem; line-height: 1.6; color: rgba(243, 239, 232, .75); max-width: 22rem; }
.bestaetigung__zusatz {
  margin-top: 2rem;
  padding-top: 1.625rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .84375rem;
  line-height: 1.6;
  color: rgba(243, 239, 232, .6);
}
.bestaetigung__zusatz a { color: var(--auf-dunkel); font-weight: 700; text-decoration: underline; }

/* ---------- Hinweisbox ---------- */
.hinweis {
  border: 1px solid var(--linie-stark);
  padding: 1.25rem 1.5rem;
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--text-leise);
}
.hinweis__titel { font-size: var(--t-klein); font-weight: 700; color: var(--tinte); margin-bottom: .5rem; }
.hinweis strong { color: var(--tinte); }
.hinweis--wichtig { border-left: 3px solid var(--akzent); }
.hinweis--notfall {
  border-left: 3px solid #B34A32;
  background: var(--papier-warm);
}
.hinweis--notfall strong { color: #99392A; }

/* ---------- Abschlussfläche ---------- */
.abschluss { text-align: center; padding: clamp(4rem, 8vw, 7.5rem) var(--rand); }
.abschluss h2 {
  margin: 0 auto;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  max-width: 47rem;
  color: var(--auf-dunkel);
}
.abschluss p {
  margin: 1.375rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(243, 239, 232, .75);
  max-width: 37rem;
}
.abschluss .knopfreihe { justify-content: center; margin-top: 2.75rem; }
.abschluss__notiz { margin-top: 1.625rem; font-size: .84375rem; color: rgba(243, 239, 232, .6); }

.abschluss--band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lucke);
  text-align: left;
  padding: clamp(3rem, 5.5vw, 5.5rem) var(--rand);
}
.abschluss--band h2 { margin: 0; font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem); max-width: 40rem; }
.abschluss--band .knopfreihe { margin-top: 0; flex-shrink: 0; }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 3rem 0 0; padding: 0; }
.termin {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1.5rem var(--lucke);
  align-items: center;
  border-top: 1px solid var(--linie-stark);
  padding: 1.75rem 0;
}
.termin:last-child { border-bottom: 1px solid var(--linie-stark); }
.termin__datum { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.termin__jahr { font-size: var(--t-mini); color: var(--text-still); font-weight: 600; }
.termin__titel { font-size: 1.1875rem; font-weight: 700; }
.termin__meta { margin-top: .375rem; font-size: var(--t-klein); color: var(--text-leise); }
.termin__rechts { text-align: right; }
.termin__preis { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.status {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .5625rem;
  border: 1px solid currentColor;
}
.status--offen    { color: #3D6B4A; }
.status--wenige   { color: #8A5A16; }
.status--ausgebucht,
.status--abgesagt { color: var(--text-still); }
.status--warteliste { color: var(--akzent); }

.leer-hinweis {
  margin-top: 2.5rem;
  padding: 2rem;
  border: 1px dashed var(--linie-feld);
  font-size: var(--t-klein);
  color: var(--text-leise);
  line-height: 1.6;
  max-width: 40rem;
}

/* ---------- Beitragsteaser ---------- */
.beitraege {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem var(--lucke);
  margin-top: 3.5rem;
}
.beitrag { display: flex; flex-direction: column; gap: .875rem; }
.beitrag__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.beitrag__art {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
}
.beitrag__titel { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
a.beitrag__titel:hover { color: var(--akzent); }
.beitrag__teaser { font-size: var(--t-klein); line-height: 1.55; color: var(--text-leise); }
.beitrag__meta { margin-top: auto; font-size: var(--t-mini); color: var(--text-still); }

/* ---------- Kontaktwege ---------- */
.kontaktwege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--lucke);
  margin-top: 3rem;
}
.kontaktweg { border-top: 1px solid var(--linie-stark); padding-top: 1.375rem; }
.kontaktweg__titel { font-size: 1.1875rem; font-weight: 800; }
.kontaktweg__text { margin: .5rem 0 1rem; font-size: var(--t-klein); color: var(--text-leise); line-height: 1.55; }

/* ---------- Fließtext ---------- */
.fliesstext {
  max-width: var(--lesebreite);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-weich);
}
.fliesstext--voll { max-width: none; }

/* Auf breiten Bildschirmen klebte die Lesespalte links, waehrend rechts
   ueber tausend Pixel leer blieben. Rechtstexte und andere reine
   Textseiten stehen deshalb mittig. */
.rechtstext-seite .abschnitt > .fliesstext,
.rechtstext-seite .abschnitt > .themenzeile,
.rechtstext-seite .abschnitt > h2,
.artikel-seite .abschnitt > .fliesstext,
.artikel-seite .abschnitt > .themenzeile,
.artikel-seite .abschnitt > h2 {
  margin-left: auto;
  margin-right: auto;
}
.rechtstext-seite .abschnitt > h2,
.rechtstext-seite .abschnitt > .themenzeile,
.artikel-seite .abschnitt > h2,
.artikel-seite .abschnitt > .themenzeile {
  max-width: var(--lesebreite);
}

/* Auf Beitragsseiten gehoeren Kopf und Text zusammen. Der volle
   Abschnittsabstand zwischen beiden reisst eine Luecke auf. */
.artikel-seite .seitenkopf--ohne-bild {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
}
.artikel-seite .seitenkopf--ohne-bild + .abschnitt {
  padding-top: calc(var(--abschnitt) * .45);
  border-top: 0;
}
.fliesstext h2 { margin: 2.5rem 0 1rem; font-size: var(--t-h3); color: var(--tinte); }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin: 2rem 0 .75rem; font-size: 1.1875rem; color: var(--tinte); }
.fliesstext ul, .fliesstext ol { margin: 0 0 1.1em; padding-left: 1.375rem; }
.fliesstext li { margin-bottom: .4375rem; }
.fliesstext a { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }
.fliesstext blockquote {
  margin: 1.75rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--akzent);
  font-size: 1.125rem;
  color: var(--tinte);
}
.fliesstext hr { border: 0; border-top: 1px solid var(--linie-stark); margin: 2.5rem 0; }
.fliesstext .hinweis-platzhalter {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--linie-feld);
  font-size: var(--t-mini);
  color: var(--text-still);
}

.text-zweispaltig { display: grid; grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--lucke); }
.text-zweispaltig .fliesstext { margin: 0; }

/* ---------- Fußbereich ---------- */
.fuss { padding: clamp(3rem, 5vw, 4.5rem) var(--rand) 3rem; border-top: 1px solid var(--linie); }
.fuss__raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--lucke);
}
.fuss__kontakt { margin-top: 1.25rem; font-size: .90625rem; line-height: 1.8; color: var(--text-weich); }
.fuss__kontakt a:hover { color: var(--akzent); }
.fuss__spalte { display: flex; flex-direction: column; gap: .625rem; font-size: .90625rem; }
.fuss__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-still);
  margin-bottom: .25rem;
}
.fuss__spalte a { transition: color var(--tempo) var(--kurve); }
.fuss__spalte a:hover { color: var(--akzent); }
.fuss__notfall {
  border: 1px solid var(--linie-stark);
  padding: 1.25rem 1.5rem;
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--text-leise);
  align-self: start;
}
.fuss__notfall strong { color: var(--tinte); }
.fuss__unten {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: var(--t-mini);
  color: var(--text-still);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ---------- Meldungen ---------- */
.meldung {
  display: flex;
  gap: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--akzent);
  background: var(--papier-warm);
  font-size: var(--t-klein);
  line-height: 1.55;
}
.meldung--fehler { border-left-color: #B34A32; }
.meldung--erfolg { border-left-color: #3D6B4A; }

/* ---------- Fehlerseite ---------- */
.fehlerseite {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--abschnitt) var(--rand);
  max-width: 42rem;
}
.fehlerseite__code {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
}
.fehlerseite h1 { margin: 1.125rem 0 0; font-size: var(--t-h2); }
.fehlerseite p { margin: 1.25rem 0 0; font-size: var(--t-lead); color: var(--text-weich); }
.fehlerseite .knopfreihe { margin-top: 2.25rem; }
.fehlerseite__referenz {
  margin-top: 2.5rem;
  font-size: var(--t-mini);
  color: var(--text-still);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Sanftes Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--kurve), transform 500ms var(--kurve);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   6  Responsive
   ===================================================================== */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr minmax(0, 480px); }
  .hero__portrait { left: -2rem; width: 140px; }
  .hero__portrait img { width: 128px; }
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; }
  .fuss__notfall { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .navigation { display: none; }
  .menue-schalter { display: inline-flex; }
  .kopf__aktionen .knopf--sekundaer { display: none; }

  .navigation--offen {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(24rem, 100%);
    z-index: 150;
    background: var(--papier);
    border-left: 1px solid var(--linie);
    padding: 5.5rem 1.5rem 2.5rem;
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(35, 37, 42, .16);
  }
  .navigation--offen .navigation__liste {
    flex-direction: column;
    gap: 0;
    font-size: 1.0625rem;
  }
  .navigation--offen .navigation__punkt { border-bottom: 1px solid var(--linie); }
  .navigation--offen .navigation__link {
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    min-height: 48px;
    border-bottom: 0;
  }
  .navigation--offen .navigation__klapp {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0 0 .75rem .875rem;
    display: none;
  }
  .navigation--offen .navigation__punkt--offen > .navigation__klapp { display: block; }
  .navigation--offen .navigation__klapp a { padding: .625rem 0; min-height: 44px; display: flex; align-items: center; }
  .navigation--offen .navigation__mobil-aktionen {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 2rem;
  }
  .navigation--offen .navigation__mobil-aktionen .knopf { width: 100%; }
  .menue-schalter { position: relative; z-index: 160; }

  .schleier {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(35, 37, 42, .42);
    border: 0;
  }

  .angebote, .raster-3, .zitate, .beitraege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zweispalter, .faq, .person, .leadmagnet, .fall, .seitenkopf, .text-zweispaltig {
    grid-template-columns: 1fr;
  }
  .person__bild, .fall__bild { max-width: 26rem; }
  .hero { grid-template-columns: 1fr; }
  .hero__bild { max-width: 32rem; }
  .hero__portrait { left: auto; right: 1.5rem; bottom: 1.5rem; }
}

@media (max-width: 720px) {
  .utility { font-size: .75rem; padding-inline: 1.25rem; }
  .utility__rechts { gap: 1rem; }
  .utility span:first-child { display: none; }

  .angebote, .raster-3, .zitate, .beitraege, .teaser-raster { grid-template-columns: 1fr; }
  .teaser-raster { margin-top: 2.5rem; }

  .abschnitt__kopf { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  .schritte li { grid-template-columns: 1.5rem 1fr; gap: .75rem 1rem; }
  .schritte__text { grid-column: 2; }

  .eckdaten__punkt {
    flex: 1 1 45%;
    padding: 1rem 1rem 1rem 0;
    border-left: 0;
    border-top: 1px solid var(--linie-stark);
  }
  .eckdaten { border-top: 0; }

  .termin { grid-template-columns: 1fr; gap: .75rem; }
  .termin__rechts { text-align: left; }

  .abschluss--band { flex-direction: column; align-items: flex-start; }
  .abschluss--band .knopfreihe { width: 100%; }

  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe .knopf { width: 100%; }

  .fuss__raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .formularkarte { padding: 1.5rem; }
  .bestaetigung { padding: 2.5rem 1.75rem; }

  .hero__vertrauen { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .hero__vertrauen li + li::before { display: none; }
  .hero__portrait { display: none; }
}

/* ---------- Druck ---------- */
@media print {
  .utility, .kopf, .menue-schalter, .navigation, .abschluss, .leadmagnet, .fuss__notfall { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding: 1rem 0; border-top: 1px solid #ccc; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* =====================================================================
   7  Hilfsklassen
   Ersetzen inline gesetzte Stile. Die Content-Security-Policy erlaubt
   keine style-Attribute, weil eine Nonce diese nicht abdeckt.
   ===================================================================== */
.o-blank        { border: 0; padding: 0; margin: 0; }
.o-legende      { padding: 0; }
.o-kein-abstand-oben { padding-top: 0; }
.o-abstand-oben-l    { margin-top: 2.5rem; }
.o-abstand-oben-m    { margin-top: 1.75rem; }
.o-abstand-oben-s    { margin-top: 1rem; }
.o-abstand-oben-xs   { margin-top: .875rem; }
.o-ohne-abstand      { margin: 0; }
.o-breit-voll        { width: 100%; }
.o-mittig            { text-align: center; }
.o-inline            { display: inline-block; }
.o-oben              { align-items: start; }

.o-max-schmal   { max-width: 38rem; }
.o-max-mittel   { max-width: 45rem; }
.o-max-breit    { max-width: 52rem; }
.o-max-inhalt   { max-width: 56rem; }
.o-max-liste    { max-width: 26rem; }

.o-zweispaltig-gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .o-zweispaltig-gleich { grid-template-columns: 1fr; } }

.o-hinweis-fein { font-size: .8125rem; color: var(--text-still); }
.o-fein         { font-size: .8125rem; }
.o-hell         { color: var(--auf-dunkel); }

.o-vorschau {
  background: var(--dunkel);
  color: var(--auf-dunkel);
  padding: .875rem var(--rand);
  font-size: .8125rem;
  font-weight: 600;
}

.o-danke-huelle { display: flex; justify-content: center; }

/* Mehrstufiges Formular: Fieldsets ohne Browserrahmen */
.stufen__block { border: 0; padding: 0; margin: 0; }
.stufen__block + .stufen__block { margin-top: 2.5rem; }
.stufen__block legend { padding: 0; }
.stufen__einleitung { max-width: 38rem; margin-bottom: 2.5rem; }
.stufen__zusicherung {
  margin-top: .875rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--text-still);
}
.o-titel-abstand { margin-bottom: 1.75rem; }

/* =====================================================================
   7  Zurueckhaltende Bewegung
   
   Grundsatz: Bewegung erklaert etwas oder bestaetigt eine Handlung.
   Sie schmueckt nicht. Wo sie nichts erklaert, gibt es sie nicht.
   Alles bleibt unter 250 Millisekunden und unter drei Pixeln Weg.
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt
   nichts davon zu sehen, das regelt der Block weiter oben.
   ===================================================================== */

/* ---------- Navigation: Unterstrich waechst von links ---------- */
.navigation__link {
  position: relative;
}
.navigation__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .125rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--kurve);
}
.navigation__link:hover::after,
.navigation__link:focus-visible::after {
  transform: scaleX(1);
}
/* Der aktive Punkt hat bereits eine Markierung, hier stoert der Strich */
.navigation__link[aria-current="page"]::after { display: none; }

/* ---------- Schaltflaechen: minimale Rueckmeldung ---------- */
.knopf {
  transition: background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              transform 120ms var(--kurve);
}
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

/* ---------- Bilder: kaum merkliche Annaeherung ---------- */
.beitrag__bild,
.fall__bild,
.person__bild {
  overflow: hidden;
}
.beitrag__bild img,
.fall__bild img,
.person__bild img {
  transition: transform 400ms var(--kurve);
}
/* Nur bei verlinkten Bildern, sonst verspricht die Bewegung eine
   Handlung, die es nicht gibt. */
a:hover .beitrag__bild img,
.beitrag:hover .beitrag__bild img,
a:hover .fall__bild img {
  transform: scale(1.02);
}

/* ---------- Karten: Linie wird deutlicher, kein Schweben ---------- */
.karte,
.angebot,
.beitrag {
  transition: border-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
.karte:hover,
.angebot:hover,
.beitrag:hover {
  border-color: var(--linie-stark);
}

/* ---------- Aufklappbares: Zeichen dreht sich ---------- */
.faq__frage::after,
.faq__zeichen {
  transition: transform 220ms var(--kurve);
}
.faq__eintrag[open] .faq__frage::after,
.faq__eintrag[open] .faq__zeichen {
  transform: rotate(45deg);
}

/* ---------- Tastaturbedienung sichtbar machen ---------- */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* ---------- Abschnitte erscheinen leicht versetzt ----------
   Die vorhandene Einblendung bekommt eine kleine Staffelung, damit
   nebeneinanderliegende Elemente nicht gleichzeitig aufspringen. */
.reveal:nth-child(2).sichtbar  { transition-delay:  60ms; }
.reveal:nth-child(3).sichtbar  { transition-delay: 120ms; }
.reveal:nth-child(4).sichtbar  { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .navigation__link::after { transition: none; }
  .knopf:hover { transform: none; }
  a:hover .beitrag__bild img,
  .beitrag:hover .beitrag__bild img,
  a:hover .fall__bild img { transform: none; }
  .reveal.sichtbar { transition-delay: 0ms !important; }
}

/* =====================================================================
   Anfrageseite: Formular links, Orientierung rechts

   Das Formular bleibt schmal, weil lange Zeilen in Eingabefeldern schwer
   zu erfassen sind. Die freie Flaeche daneben traegt das, was Anfragende
   vor dem Ausfuellen wissen wollen. Unter 1100 Pixeln rutscht die Spalte
   unter das Formular, damit auf dem Telefon zuerst das Formular kommt.
   ===================================================================== */
.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 21rem);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.anfrage__spalte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 6.5rem;
}

.anfrage__kasten {
  padding: 1.5rem 1.625rem;
  background: var(--papier-warm);
  border-left: 3px solid var(--akzent);
}
.anfrage__kasten--ruhig {
  background: transparent;
  border-left-color: var(--linie-stark);
}

.anfrage__ablauf {
  list-style: none;
  counter-reset: schritt;
  margin: .875rem 0 0;
  padding: 0;
}
.anfrage__ablauf li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2.125rem;
  margin-bottom: 1.125rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-weich);
}
.anfrage__ablauf li:last-child { margin-bottom: 0; }
.anfrage__ablauf li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -.0625rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 800;
  color: var(--auf-akzent);
  background: var(--akzent);
}
.anfrage__ablauf strong { display: block; color: var(--tinte); font-weight: 700; }

.anfrage__telefon { margin: .625rem 0 .5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.anfrage__telefon a { color: var(--tinte); text-decoration: none; }
.anfrage__telefon a:hover { color: var(--akzent); }

.anfrage__punkte { margin: .75rem 0 .625rem; padding-left: 1.125rem; }
.anfrage__punkte li { font-size: .9375rem; color: var(--text-weich); margin-bottom: .375rem; }

.anfrage__klein { font-size: .875rem; color: var(--text-still); line-height: 1.6; margin: 0; }
.anfrage__klein a { color: var(--akzent); }

@media (max-width: 1100px) {
  .anfrage__raster { grid-template-columns: 1fr; }
  .anfrage__spalte { position: static; max-width: 34rem; margin-top: 1rem; }
}

/* ---------------------------------------------------------------------
   Hinweis auf die technische Umsetzung im Impressum

   Bewusst zurueckhaltend: Ein Impressum ist eine Pflichtangabe, kein
   Werbeplatz. Der Hinweis steht abgesetzt am Ende und tritt gegenueber
   den gesetzlichen Angaben zurueck.
   --------------------------------------------------------------------- */
.umsetzung {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
}

.umsetzung__logo {
  display: block;
  width: auto;
  height: 2.75rem;
  max-width: 13.75rem;
  opacity: .85;
  transition: opacity var(--tempo) var(--kurve);
}
a:hover .umsetzung__logo { opacity: 1; }

.umsetzung__text { min-width: 0; }

.umsetzung__label {
  margin: 0 0 .1875rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-still);
}
.umsetzung__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinte);
}
.umsetzung__name a { color: var(--tinte); text-decoration: none; }
.umsetzung__name a:hover { color: var(--akzent); }

.umsetzung__claim {
  margin: .1875rem 0 0;
  font-size: .875rem;
  color: var(--text-weich);
}

@media (max-width: 480px) {
  .umsetzung { gap: 1rem; }
  .umsetzung__logo { height: 2.25rem; }
}

/* ---------------------------------------------------------------------
   Einwilligung beim Leadmagneten

   Klartext statt Kleingedrucktem: Was passiert, steht ueber dem Knopf,
   nicht darunter. Der Verteiler ist ein eigenes Haekchen und nicht
   vorausgewaehlt.
   --------------------------------------------------------------------- */
.einwilligung__klar {
  margin: .875rem 0 0;
  padding: .75rem .875rem;
  background: var(--papier-warm);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-weich);
}

.einwilligung {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-top: .875rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-weich);
  cursor: pointer;
}
.einwilligung input {
  flex-shrink: 0;
  margin-top: .1875rem;
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: var(--akzent);
}
.einwilligung strong { color: var(--tinte); font-weight: 700; }



/* =====================================================================
   Bedienhilfen

   Knopf und Feld nehmen die Formensprache der Seite auf: keine runden
   Ecken, dieselben Farben, dieselbe Themenzeile in Versalien. Ein
   zugekauftes Widget erkennt man sofort daran, dass es aussieht wie von
   einer anderen Website.
   ===================================================================== */
.bedienhilfen-knopf {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  background: var(--papier);
  color: var(--tinte);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 2px 14px rgba(35, 37, 42, .08);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve);
}
.bedienhilfen-knopf:hover,
.bedienhilfen-knopf[aria-expanded="true"] {
  background: var(--tinte);
  color: var(--auf-dunkel);
  border-color: var(--tinte);
}
.bedienhilfen-knopf__zeichen { display: flex; color: var(--akzent); }
.bedienhilfen-knopf:hover .bedienhilfen-knopf__zeichen,
.bedienhilfen-knopf[aria-expanded="true"] .bedienhilfen-knopf__zeichen { color: var(--auf-akzent); }

@media (max-width: 620px) {
  .bedienhilfen-knopf { right: .75rem; bottom: .75rem; padding: .5625rem .625rem; }
  .bedienhilfen-knopf__text { display: none; }
}

/* ---------- Das Feld ---------- */
.bedienhilfen {
  position: fixed;
  right: 1.25rem;
  bottom: 4.5rem;
  z-index: 61;
  width: min(20.5rem, calc(100vw - 2.5rem));
  max-height: min(32rem, calc(100vh - 7rem));
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 6px 34px rgba(35, 37, 42, .16);
}
.bedienhilfen[hidden] { display: none; }

.bedienhilfen__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linie);
}
.bedienhilfen__titel {
  margin: 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
}
.bedienhilfen__zu {
  background: none;
  border: 0;
  padding: 0 .25rem;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--text-still);
  cursor: pointer;
}
.bedienhilfen__zu:hover { color: var(--tinte); }

.bedienhilfe { margin-bottom: 1.125rem; }
.bedienhilfe:last-of-type { margin-bottom: .5rem; }

.bedienhilfe__titel {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--tinte);
}
.bedienhilfe__hinweis {
  margin: .25rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-still);
}

/* Schalter */
.bedienhilfe__schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .5rem .625rem;
  background: var(--papier-warm);
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve);
}
.bedienhilfe__schalter:hover { border-color: var(--linie-stark); }

.bedienhilfe__laempchen {
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--linie-feld);
  position: relative;
  transition: background-color var(--tempo) var(--kurve);
}
.bedienhilfe__laempchen::after {
  content: "";
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  width: .875rem;
  height: .875rem;
  background: var(--papier-hell);
  transition: transform var(--tempo) var(--kurve);
}
.bedienhilfe__schalter[aria-pressed="true"] .bedienhilfe__laempchen { background: var(--akzent); }
.bedienhilfe__schalter[aria-pressed="true"] .bedienhilfe__laempchen::after { transform: translateX(1rem); }

/* Stufen */
.bedienhilfe__stufen { display: flex; gap: .3125rem; margin-top: .4375rem; }
.bedienhilfe__stufe {
  flex: 1;
  padding: .4375rem .25rem;
  background: var(--papier-warm);
  border: 1px solid transparent;
  font: inherit;
  font-size: .8125rem;
  color: var(--text-weich);
  cursor: pointer;
}
.bedienhilfe__stufe:hover { border-color: var(--linie-stark); }
.bedienhilfe__stufe[aria-pressed="true"] {
  background: var(--tinte);
  color: var(--auf-dunkel);
  font-weight: 700;
}

.bedienhilfen__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--linie);
  font-size: .8125rem;
}
.bedienhilfen__zuruecksetzen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .8125rem;
  color: var(--text-still);
  text-decoration: underline;
  cursor: pointer;
}
.bedienhilfen__zuruecksetzen:hover { color: var(--tinte); }
.bedienhilfen__link { color: var(--akzent); }

@media print { .bedienhilfen-knopf, .bedienhilfen { display: none; } }

/* =====================================================================
   Wirkung der Bedienhilfen
   ===================================================================== */
html[data-schrift="1"] { font-size: 112.5%; }
html[data-schrift="2"] { font-size: 125%; }

html[data-kontrast="an"] {
  --papier:        #FFFFFF;
  --papier-warm:   #F4F1EA;
  --papier-hell:   #FFFFFF;
  --tinte:         #16181C;
  --text-weich:    #2E3036;
  --text-still:    #45474D;
  --linie:         #C9C3B6;
  --linie-stark:   #A9A296;
  --akzent:        #A2521A;
}
html[data-kontrast="an"] .abschnitt--dunkel,
html[data-kontrast="an"] .kopf--dunkel { --text-weich: #E6E2DA; }

html[data-unterstrichen="an"] .fliesstext a,
html[data-unterstrichen="an"] main a:not(.knopf) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-ruhig="an"] *,
html[data-ruhig="an"] *::before,
html[data-ruhig="an"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html[data-ruhig="an"] .reveal { opacity: 1 !important; transform: none !important; }

html[data-luft="an"] .fliesstext,
html[data-luft="an"] .fliesstext li,
html[data-luft="an"] main p { line-height: 1.9; }
html[data-luft="an"] .fliesstext p { margin-bottom: 1.5em; }