/* ==========================================================================
   hr machen wir – Stylesheet
   Eine Datei für alle Seiten. Farben, Schriften und Abstände stehen als
   Variablen ganz oben; wer das Design ändern will, beginnt dort.
   Grundlage: Styleguide hr machen wir, Version 0.1
   ========================================================================== */

/* ---------- 1. Schriften (lokal, keine Verbindung zu Google) ----------
   Variable Fonts: eine Datei enthält alle Schnitte von 200 bis 1000.
   Lizenz: SIL Open Font License 1.1 */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-variable.woff") format("woff");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-variable.woff") format("woff");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Variablen ---------- */
:root {
  /* Markenfarben (Styleguide Kapitel 02) */
  --aktenrot: #990000;          /* Leitfarbe: Logo, Hauptbuttons, Betonung */
  --aktenrot-dunkel: #7a0000;   /* Hover bei Buttons */
  --aktenrot-10: #f5e6e6;
  --anthrazit: #333333;         /* Fließtext, Headlines */
  --anthrazit-60: #666666;      /* Sekundärtext (5,7 : 1 auf Weiß) */
  --grau-40: #999999;           /* nur Linien, nie Text */
  --grau-20: #cccccc;
  --grau-10: #e6e6e6;
  --kontorblau: #1e4e57;        /* Flächen */
  --kontorblau-dunkel: #183e46;
  --kontorblau-80: #4b7179;
  --kontorblau-20: #d2dcdd;
  --kontorblau-10: #e8edee;
  --messing: #b8873b;           /* Akzent, nur Grafik */
  --messing-dunkel: #936c2f;    /* Kennzahlen als Text */
  --weiss: #ffffff;

  /* Schriften (Styleguide Kapitel 03) */
  --schrift-marke: "Nunito", "Nunito Sans", Arial, sans-serif;
  --schrift-text: "Nunito Sans", Arial, sans-serif;

  /* Schriftgrößen: fließend zwischen Smartphone und Desktop */
  --gr-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  --gr-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.2rem);
  --gr-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --gr-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --gr-text: 1.0625rem;         /* 17 px */
  --gr-klein: 0.875rem;
  --gr-label: 0.75rem;

  /* Abstände */
  --abstand-xs: 0.5rem;
  --abstand-s: 1rem;
  --abstand-m: 1.5rem;
  --abstand-l: 2.5rem;
  --abstand-xl: clamp(3rem, 2rem + 4vw, 6rem);

  --breite-inhalt: 72rem;       /* maximale Seitenbreite */
  --breite-text: 40rem;         /* rund 70 Zeichen je Zeile */
  --radius: 2px;
}

/* ---------- 3. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--anthrazit);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: 1.6;
  font-optical-sizing: auto;
}

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

h1, h2, h3 {
  font-family: var(--schrift-marke);
  color: var(--anthrazit);
  line-height: 1.15;
  margin: 0 0 var(--abstand-s);
  text-wrap: balance;
}
h1 { font-size: var(--gr-h1); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--gr-h2); font-weight: 600; }
h3 { font-size: var(--gr-h3); font-weight: 600; line-height: 1.3; }

p, ul, ol { margin: 0 0 var(--abstand-s); }
p, li { max-width: var(--breite-text); }

strong { font-weight: 600; }   /* Hervorhebung in Semibold, nie kursiv */

/* Firmenname im Fließtext: Markenschrift in Semibold, bricht nie um.
   Immer klein und ohne Klammern schreiben (Styleguide Kapitel 01). */
.firma { font-family: var(--schrift-marke); font-weight: 600; white-space: nowrap; }

a { color: var(--kontorblau); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--kontorblau-dunkel); text-decoration-thickness: 2px; }

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--kontorblau);
  outline-offset: 3px;
}

/* Skip-Link: erscheint erst bei Tastaturfokus */
.skip-link {
  position: absolute;
  left: var(--abstand-s);
  top: -10rem;
  z-index: 100;
  padding: var(--abstand-xs) var(--abstand-s);
  background: var(--anthrazit);
  color: var(--weiss);
  font-weight: 600;
}
.skip-link:focus { top: var(--abstand-s); color: var(--weiss); }

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Rubrik: Nunito Sans Bold, Versal, +17 % Laufweite (Styleguide „Label“).
   Sparsam einsetzen: nur über Listen und Kästen, nie über Überschriften. */
.rubrik {
  font-family: var(--schrift-text);
  font-size: var(--gr-label);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--anthrazit-60);
  margin: 0 0 var(--abstand-xs);
}

/* ---------- 4. Kopfbereich und Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-10);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-xs) var(--abstand-m);
  padding-block: 0.9rem;
}
.logo { display: inline-block; padding-block: 0.25rem; }
.logo img { height: 2.1rem; width: auto; }

/* Menü-Schalter: nur sichtbar, wenn main.js geladen ist (Attribut hidden) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  background: none;
  border: 1px solid var(--grau-20);
  border-radius: var(--radius);
  color: var(--anthrazit);
  font: 600 0.95rem var(--schrift-text);
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle-icon { width: 1.1rem; height: 1.1rem; }

/* Ohne JavaScript: Navigation steht immer sichtbar unter dem Logo */
.site-nav { width: 100%; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.55rem 0;
  color: var(--anthrazit);
  font-family: var(--schrift-marke);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--grau-20); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--aktenrot); }
.site-nav .sprache a {
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--anthrazit-60);
}

/* Mit JavaScript auf kleinen Bildschirmen: Menü zum Aufklappen */
@media (max-width: 47.99em) {
  .js-nav .site-nav { display: none; }
  .js-nav .site-nav.is-open { display: block; padding-bottom: var(--abstand-xs); }
  .js-nav .site-nav ul { flex-direction: column; gap: 0; }
  .js-nav .site-nav li { border-top: 1px solid var(--grau-10); }
  .js-nav .site-nav a { display: block; padding: 0.8rem 0; }
}
@media (min-width: 48em) {
  .nav-toggle { display: none; }
  .site-nav { width: auto; }
  .site-nav ul { gap: 0 1.6rem; align-items: center; }
}

/* ---------- 5. Startbereich (Hero) mit Klammer-Rahmen ----------
   Das eine prägende Element der Seite: die eckige Klammer aus dem Logo
   rahmt die zentrale Aussage. „Wir geben Personalthemen einen klaren Rahmen.“ */
.hero { padding-block: var(--abstand-xl) calc(var(--abstand-xl) * 0.8); }

.rahmen {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
  max-width: 64rem;
}
.rahmen::before,
.rahmen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(0.9rem, 2vw, 1.5rem);
  border: clamp(5px, 0.9vw, 9px) solid var(--aktenrot);
}
.rahmen::before { left: 0; border-right: 0; }
.rahmen::after { right: 0; border-left: 0; }

.hero h1 { margin-bottom: var(--abstand-m); text-wrap: wrap; }
.hero .lead { max-width: var(--breite-text); }
.hero .lead { margin-bottom: 0; }

.hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
}

.lead {
  font-size: var(--gr-lead);
  line-height: 1.55;
  color: var(--anthrazit);
}

/* Seitenkopf der Unterseiten: ruhig, ohne Rahmen */
.seitenkopf {
  padding-block: var(--abstand-xl) var(--abstand-l);
  border-bottom: 1px solid var(--grau-10);
}
.seitenkopf .lead { margin-bottom: 0; }

/* ---------- 6. Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--schrift-marke);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
}
.button-primaer { background: var(--aktenrot); color: var(--weiss); }
.button-primaer:hover { background: var(--aktenrot-dunkel); color: var(--weiss); }
.button-sekundaer { border-color: var(--kontorblau); color: var(--kontorblau); background: transparent; }
.button-sekundaer:hover { background: var(--kontorblau-10); color: var(--kontorblau-dunkel); }
.button-hell { background: var(--weiss); color: var(--kontorblau); }
.button-hell:hover { background: var(--kontorblau-10); color: var(--kontorblau-dunkel); }

/* ---------- 7. Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand-xl); }
.abschnitt-hell { background: var(--kontorblau-10); }
.abschnitt-kopf { margin-bottom: var(--abstand-l); }
.abschnitt-kopf p { color: var(--anthrazit); }

/* Raster: einspaltig auf dem Smartphone, mehrspaltig ab Tablet */
.raster { display: grid; gap: var(--abstand-l) var(--abstand-l); }
@media (min-width: 48em) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Themenblock: Problem in Zitatform, dann „Das machen wir“ */
.thema h3 { margin-bottom: var(--abstand-xs); }
.zitat {
  position: relative;
  margin: 0 0 var(--abstand-s);
  padding-left: 1rem;
  border-left: 3px solid var(--messing);  /* Zitatmarke in Messing */
  font-family: var(--schrift-marke);
  font-size: 1.15rem;
  line-height: 1.4;
}
.kasten {
  background: var(--weiss);
  padding: var(--abstand-m);
  border-top: 3px solid var(--kontorblau);
}
.abschnitt:not(.abschnitt-hell) .kasten { background: var(--kontorblau-10); }

/* Häkchen-Liste mit Inline-SVG über CSS-Maske (kein Icon-Font, keine externe Datei) */
.haken { list-style: none; padding: 0; margin: 0; }
.haken li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.55rem;
}
.haken li:last-child { margin-bottom: 0; }
.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 1.05rem;
  height: 0.8rem;
  background: var(--kontorblau);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5l4 4L14.5 1.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5l4 4L14.5 1.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Strich-Liste für Abgrenzungen („nicht enthalten“) */
.strich { list-style: none; padding: 0; margin: 0; }
.strich li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; }
.strich li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.8em;
  width: 0.75rem;
  border-top: 2px solid var(--grau-40);
}

/* ---------- 8. Pakete ---------- */
.paket {
  display: flex;
  flex-direction: column;
  padding: var(--abstand-m);
  background: var(--weiss);
  border: 1px solid var(--grau-20);
  border-top: 4px solid var(--kontorblau);
}
.paket-plus { border-top-color: var(--aktenrot); }  /* einziges rotes Element im Abschnitt */
.paket h3 { margin-bottom: 0.35rem; }
.paket .fuer { color: var(--anthrazit-60); margin-bottom: var(--abstand-m); }
.paket .haken { margin-bottom: var(--abstand-m); }
.paket .fakt {
  margin-top: auto;
  padding-top: var(--abstand-s);
  border-top: 1px solid var(--grau-10);
  font-size: var(--gr-klein);
  color: var(--anthrazit-60);
}

/* ---------- 9. Ablauf: echte Reihenfolge, deshalb nummeriert ---------- */
.schritte { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 var(--abstand-m);
  padding-block: var(--abstand-l);
  border-top: 1px solid var(--grau-20);
}
.schritt:last-child { border-bottom: 1px solid var(--grau-20); }
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--schrift-marke);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--aktenrot);
}
.schritt h2 { font-size: var(--gr-h3); margin-bottom: var(--abstand-xs); }
.schritt .dauer {
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--messing-dunkel);
  margin-bottom: var(--abstand-xs);
}
@media (min-width: 48em) {
  .schritt { grid-template-columns: 6rem minmax(0, 1fr); }
  .schritt::before { font-size: 2.6rem; }
}

/* Kurzfassung des Ablaufs auf der Startseite */
.ablauf-kurz { list-style: none; padding: 0; margin: 0 0 var(--abstand-l); counter-reset: kurz; }
.ablauf-kurz li { counter-increment: kurz; padding-top: var(--abstand-s); border-top: 2px solid var(--anthrazit); }
.ablauf-kurz li::before {
  content: counter(kurz);
  display: block;
  font-family: var(--schrift-marke);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--anthrazit-60);
  margin-bottom: var(--abstand-xs);
}

/* ---------- 10. Über uns ---------- */
.person { display: grid; gap: var(--abstand-l); align-items: start; }
@media (min-width: 48em) {
  .person { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Bildplatzhalter im Format 4:5, bis ein echtes Foto vorliegt */
.bildplatzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: var(--abstand-m);
  background: var(--grau-10);
  border: 1px dashed var(--grau-40);
  color: var(--anthrazit-60);
  font-size: var(--gr-klein);
  text-align: center;
}
.portraet { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.platzhalter { background: #fff3cd; outline: 1px dashed var(--messing-dunkel); padding: 0 0.2em; }

/* ---------- 11. Kontakt ---------- */
.kontaktliste { list-style: none; padding: 0; margin: 0 0 var(--abstand-l); }
.kontaktliste li {
  display: flex;
  gap: var(--abstand-s);
  align-items: flex-start;
  padding-block: var(--abstand-s);
  border-top: 1px solid var(--grau-20);
}
.kontaktliste li:last-child { border-bottom: 1px solid var(--grau-20); }
.kontaktliste svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; color: var(--kontorblau); }
.kontaktliste .art { display: block; font-size: var(--gr-klein); color: var(--anthrazit-60); }
.kontaktliste a { font-family: var(--schrift-marke); font-weight: 700; font-size: 1.2rem; }

/* ---------- 12. Kennenlernen-Band (Kontorblau, Logo weiß) ---------- */
.kennenlernen { background: var(--kontorblau); color: var(--weiss); padding-block: var(--abstand-xl); }
.kennenlernen h2, .kennenlernen p { color: var(--weiss); }
.kennenlernen a:not(.button) { color: var(--weiss); }
.kennenlernen .inhalt { display: grid; gap: var(--abstand-l); align-items: end; }
@media (min-width: 48em) { .kennenlernen .inhalt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.kennenlernen .wege { display: flex; flex-direction: column; gap: var(--abstand-s); align-items: flex-start; }
.kennenlernen .telefon { font-family: var(--schrift-marke); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.kennenlernen .telefon:hover { text-decoration: underline; }
.kennenlernen :focus-visible { outline-color: var(--weiss); }

/* ---------- 13. Rechtstexte ---------- */
.rechtstext h2 { font-size: var(--gr-h3); margin-top: var(--abstand-l); }
.rechtstext h3 { font-size: 1.05rem; margin-top: var(--abstand-m); }
.hinweis {
  max-width: var(--breite-text);
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--aktenrot-10);
  border-left: 4px solid var(--aktenrot);
  margin-bottom: var(--abstand-l);
}

/* ---------- 14. Fußbereich: roter Strich wie im Briefbogen ---------- */
.site-footer {
  border-top: 3px solid var(--aktenrot);
  padding-block: var(--abstand-l);
  font-size: var(--gr-klein);
  color: var(--anthrazit-60);
}
.site-footer .container { display: grid; gap: var(--abstand-m); }
@media (min-width: 48em) {
  .site-footer .container { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.site-footer .claim { font-family: var(--schrift-marke); font-weight: 600; font-size: 1.05rem; color: var(--anthrazit); margin: var(--abstand-s) 0 0; }
.site-footer address { font-style: normal; margin-top: var(--abstand-xs); }
.site-footer img { height: 1.8rem; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.footer-links a { color: var(--anthrazit); display: inline-block; padding-block: 0.35rem; }

/* ---------- 15. 404 ---------- */
.fehlerseite { padding-block: var(--abstand-xl); }
.fehlerseite .sprachblock + .sprachblock { margin-top: var(--abstand-l); padding-top: var(--abstand-l); border-top: 1px solid var(--grau-20); }

/* ---------- 16. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 17. Druck ---------- */
@media print {
  .site-header, .kennenlernen, .skip-link, .hero-aktionen { display: none; }
  .site-header { position: static; }
  a { color: var(--anthrazit); }
}

/* ---------- 18. Häufige Fragen: Aufklapp-Liste ohne JavaScript ---------- */
.faq { display: grid; gap: var(--abstand-m); }
@media (min-width: 48em) { .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--abstand-l); } }
.faq-liste { border-top: 1px solid var(--grau-20); }
.faq-liste details { border-bottom: 1px solid var(--grau-20); }
.faq-liste summary {
  position: relative;
  padding: var(--abstand-s) 2.5rem var(--abstand-s) 0;
  font-family: var(--schrift-marke);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-liste summary::-webkit-details-marker { display: none; }
/* Plus-Zeichen, wird beim Öffnen zum Minus */
.faq-liste summary::before,
.faq-liste summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.9rem;
  border-top: 2px solid var(--kontorblau);
}
.faq-liste summary::after { transform: rotate(90deg); }
.faq-liste details[open] summary::after { transform: none; }
.faq-liste summary:hover { color: var(--kontorblau); }
.faq-liste .antwort { padding-bottom: var(--abstand-s); }
.faq-liste .antwort p:last-child { margin-bottom: 0; }

/* ---------- 19. Branchenkacheln (Über uns) ---------- */
.branchen article { padding-top: var(--abstand-s); border-top: 2px solid var(--kontorblau); }
.branchen h3 { margin-bottom: var(--abstand-xs); }
.branchen p { margin-bottom: 0; }
.branchen-weitere { margin-top: var(--abstand-l); margin-bottom: 0; }

/* Fußnote, z. B. Erklärung des Sternchens */
.fussnote { margin: var(--abstand-s) 0 0; font-size: var(--gr-klein); color: var(--anthrazit-60); }

/* Zwischenüberschrift innerhalb eines Textblocks */
.raster > div > h3 { margin-top: var(--abstand-m); }

/* ---------- 20. Seitennavigation (Leistungen) ----------
   Bleibt beim Scrollen unter dem Kopfbereich stehen. Auf dem Smartphone
   lässt sich die Leiste seitlich wischen. main.js setzt die Höhe des
   Kopfbereichs und markiert den Abschnitt, in dem man sich befindet. */
.seitennav {
  position: sticky;
  top: var(--kopf-hoehe, 4.5rem);
  z-index: 40;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-20);
}
.seitennav ul {
  display: flex;
  gap: 0 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
}
.seitennav li { max-width: none; }
.seitennav a {
  display: inline-block;
  padding: 0.8rem 0 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--anthrazit-60);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.seitennav a:hover { color: var(--anthrazit); }
.seitennav a[aria-current="true"] { color: var(--kontorblau); border-bottom-color: var(--kontorblau); }
.seitennav a:focus-visible { outline-offset: -3px; }

/* Sprungziele nicht unter Kopf und Seitennavigation verstecken */
html:has(.seitennav) { scroll-padding-top: calc(var(--kopf-hoehe, 4.5rem) + 3.5rem); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.seitennav) { scroll-behavior: smooth; }
}
@media print { .seitennav { display: none; } }

/* ---------- 21. Klammer-Rahmen im Seitenkopf (Leistungen) ----------
   Gleiches Element wie auf der Startseite, etwas zurückhaltender. */
.seitenkopf .rahmen-klein { padding-block: clamp(1rem, 2.5vw, 2rem); width: fit-content; max-width: 58rem; }
.seitenkopf .rahmen-klein h1 { margin-bottom: var(--abstand-s); }
.seitenkopf .rahmen-klein .lead { max-width: var(--breite-text); }

/* ---------- 22. Ablauf: Schritte direkt an den Seitenkopf anschließen ---------- */
.abschnitt-schritte { padding-top: 0; }
.abschnitt-schritte .schritt:first-child { border-top: 0; }