/* Lokal gehostete Schrift Lora (DSGVO: keine externen Google-Fonts-Aufrufe, IP-Weitergabe vermieden) */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora-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;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora-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;
}

/* ===========================
   Mediation für Umwelt und Stadtplanung – Dr. Jörg Wagner
   Hauptstylesheet – Phase 1–6

   Designentscheidungen Phase 1:
   - Primärfarbe: #1B4332 (dunkelgrünes Waldgrün, aus einfarbigem Logo abgeleitet)
   - Hintergrundtint: #EEF5F0 (sehr helles Grün für Sektionswechsel)
   - Überschriften: Lora (Serifenschrift, klassisch, seriös – passend zum klassisch gesetzten Logo)
   - Fließtext: Arial (serifenlos, gut lesbar, Kundenwunsch)
   - Basisschrift: 18 px (großzügig, Kundenwunsch "große Schrift")
   - Keine Animationen, keine Übergänge
   =========================== */

/* 1. CSS-Variablen
   ================================ */
:root {
  --farbe-primaer:       #1B4332;
  --farbe-primaer-dunkel:#14532D;
  --farbe-akzent:        #425A3D;
  --farbe-tint:          #EEF5F0;
  --farbe-weiss:         #FFFFFF;
  --farbe-text:          #1A1A1A;
  --farbe-text-neben:    #4A5568;
  --farbe-rand:          #C9D7CE;
  --farbe-schatten:      rgba(27, 67, 50, 0.10);

  --font-serif:  Lora, Georgia, 'Times New Roman', serif;
  --font-sans:   Arial, Helvetica, sans-serif;

  --gr-basis:  1.125rem;   /* 18 px */
  --gr-klein:  0.9375rem;  /* 15 px */
  --gr-h1:     2.625rem;   /* 42 px */
  --gr-h2:     1.875rem;   /* 30 px */
  --gr-h3:     1.3125rem;  /* 21 px */

  --abst-xs:   0.5rem;
  --abst-s:    1rem;
  --abst-m:    1.5rem;
  --abst-l:    2.5rem;
  --abst-xl:   4rem;
  --abst-xxl:  6rem;

  --container-max: 72rem;
  --container-pad: 2rem;
  --kopf-hoehe:    5rem;
}


/* 2. Reset und Basis
   ================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--gr-basis);
  line-height: 1.75;
  color: var(--farbe-text);
  background-color: var(--farbe-weiss);
  -webkit-font-smoothing: antialiased;
}

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

ul, ol { list-style: none; }

address { font-style: normal; }

a {
  color: var(--farbe-primaer);
  text-decoration: underline;
}
a:hover { color: var(--farbe-akzent); }
a:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 3px;
  border-radius: 2px;
}


/* 3. Typografie
   ================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--farbe-primaer);
  line-height: 1.3;
  margin-bottom: var(--abst-s);
}
h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }

p { margin-bottom: var(--abst-s); }
p:last-child { margin-bottom: 0; }


/* 4. Layout
   ================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.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;
}


/* 5. Schaltflächen
   ================================ */
.taste-primaer,
.taste-sekundaer {
  display: inline-block;
  padding: 0.75rem 1.875rem;
  font-family: var(--font-sans);
  font-size: var(--gr-basis);
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
}

.taste-primaer {
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  border: 2px solid var(--farbe-primaer);
}
.taste-primaer:hover {
  background-color: var(--farbe-primaer-dunkel);
  border-color: var(--farbe-primaer-dunkel);
  color: var(--farbe-weiss);
}

.taste-sekundaer {
  background-color: transparent;
  color: var(--farbe-primaer);
  border: 2px solid var(--farbe-primaer);
}
.taste-sekundaer:hover {
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}


/* 6. Bildplatzhalter
   ================================ */
.bild-platzhalter {
  background-color: var(--farbe-tint);
  border: 2px dashed var(--farbe-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--abst-m);
}

.platzhalter-text {
  color: var(--farbe-text-neben);
  font-size: var(--gr-klein);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}


/* 7. Header und Navigation
   ================================ */
.seiten-kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--farbe-weiss);
  border-bottom: 1px solid var(--farbe-rand);
  box-shadow: 0 1px 6px var(--farbe-schatten);
}

.kopf-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--kopf-hoehe);
  gap: var(--abst-l);
  position: relative;
}

/* Logo */
.logo-link {
  display: flex;
  align-items: center;
  gap: var(--abst-s);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-platzhalter {
  width: 3rem;
  height: 3rem;
  background-color: var(--farbe-tint);
  border: 2px dashed var(--farbe-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  flex-shrink: 0;
}

.logo-ph-text {
  font-size: 0.625rem;
  color: var(--farbe-text-neben);
  text-align: center;
  line-height: 1.2;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.logo-bueroname {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--farbe-primaer);
}

.logo-person {
  font-size: 0.8125rem;
  color: var(--farbe-text-neben);
}

/* Hamburger (mobile, ausgebaut in Phase 6) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 1.75rem;
  height: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--farbe-text);
  border-radius: 1px;
}

/* Navigationsbereich */
#haupt-nav {
  display: flex;
  align-items: center;
  gap: var(--abst-m);
}

.nav-liste {
  display: flex;
  align-items: center;
}

.nav-punkt > .nav-link {
  display: block;
  padding: 0.5rem 0.875rem;
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--farbe-text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-punkt > .nav-link:hover {
  color: var(--farbe-primaer);
}

.nav-punkt > .nav-link[aria-current="page"] {
  color: var(--farbe-primaer);
  border-bottom: 2px solid var(--farbe-primaer);
}

/* Dropdown-Auslöser-Button (neben dem Link) */
.dropdown-btn {
  background: none;
  border: none;
  padding: 0.5rem 0.25rem 0.5rem 0;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--farbe-text);
  line-height: 1;
  vertical-align: middle;
}

.dropdown-btn:hover {
  color: var(--farbe-primaer);
}

.dropdown-btn:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dropdown-Menü */
.hat-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-menue {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 20rem;
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-rand);
  border-top: 3px solid var(--farbe-primaer);
  box-shadow: 0 6px 16px var(--farbe-schatten);
  z-index: 200;
}

.hat-dropdown:hover > .dropdown-menue,
.hat-dropdown.dropdown-offen > .dropdown-menue {
  display: block;
}

.dropdown-menue li a {
  display: block;
  padding: 0.625rem 1rem;
  font-size: var(--gr-klein);
  color: var(--farbe-text);
  text-decoration: none;
  border-bottom: 1px solid var(--farbe-tint);
}
.dropdown-menue li:last-child a { border-bottom: none; }
.dropdown-menue li a:hover {
  background-color: var(--farbe-tint);
  color: var(--farbe-primaer);
}

/* Sprachumschalter */
.sprachumschalter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--gr-klein);
  border-left: 1px solid var(--farbe-rand);
  padding-left: var(--abst-m);
  flex-shrink: 0;
}

.sprachumschalter a {
  font-weight: 700;
  text-decoration: none;
  color: var(--farbe-text-neben);
}

.sprachumschalter a.sprache-aktiv {
  color: var(--farbe-primaer);
}

.sprachumschalter .trenner {
  color: var(--farbe-rand);
}


/* 8. Seitenbereich-Kopf (Unterseiten)
   ================================ */
.bereich-kopf {
  background-color: var(--farbe-tint);
  padding-block: var(--abst-xl);
  border-bottom: 1px solid var(--farbe-rand);
}

.bereich-kopf p {
  color: var(--farbe-text-neben);
  font-size: 1.125rem;
  max-width: 48rem;
}

.brotpfad {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin-bottom: var(--abst-s);
}

.brotpfad a {
  color: var(--farbe-text-neben);
}

.platzhalter-hinweis {
  display: inline-block;
  background-color: #FFF8E1;
  border: 1px solid #F9C840;
  padding: 0.75rem 1rem;
  border-radius: 2px;
  font-size: var(--gr-klein);
  color: #7A5500;
  margin-top: var(--abst-s);
}

.bereich-inhalt {
  padding-block: var(--abst-xl);
}


/* 9. Hero (Startseite)
   ================================ */
.hero {
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  padding-block: var(--abst-xxl);
}

.hero-inhalt {
  max-width: 54rem;
}

.hero h1 {
  color: var(--farbe-weiss);
  font-size: var(--gr-h1);
  margin-bottom: var(--abst-s);
}

.hero-untertitel {
  font-size: 1.25rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--abst-l);
}

.hero .taste-primaer {
  background-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
  border-color: var(--farbe-weiss);
}
.hero .taste-primaer:hover {
  background-color: var(--farbe-tint);
  border-color: var(--farbe-tint);
}


/* 10. Kompetenz-Block (Startseite)
   ================================ */
.kompetenz-block {
  padding-block: var(--abst-xxl);
}

.kompetenz-layout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: var(--abst-xl);
  align-items: start;
}

.kompetenz-text h2 { margin-bottom: var(--abst-m); }
.kompetenz-text p  { margin-bottom: var(--abst-m); }

.kompetenz-bild {
  height: 28rem;
}


/* 11. Leistungen-Übersicht (Startseite)
   ================================ */
.leistungen-uebersicht {
  background-color: var(--farbe-tint);
  padding-block: var(--abst-xxl);
}

.leistungen-uebersicht > .container > h2 {
  margin-bottom: var(--abst-l);
}

.leistungen-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abst-m);
  margin-bottom: var(--abst-m);
}

/* Gleich hohe Leistungskacheln: Karte fuellt die gestreckte Gitterzelle */
.leistungen-raster > li { display: flex; }
.leistungen-raster > li > .leistungs-karte { flex: 1; height: 100%; }

.leistungs-karte {
  background-color: var(--farbe-weiss);
  padding: var(--abst-m);
  border: 1px solid var(--farbe-rand);
  border-top: 3px solid var(--farbe-primaer);
  display: flex;
  flex-direction: column;
}

.leistungs-karte h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--abst-xs);
}

.leistungs-karte h3 a {
  color: var(--farbe-primaer);
  text-decoration: none;
}
.leistungs-karte h3 a:hover { text-decoration: underline; }

.leistungs-bereich {
  font-size: 0.8125rem;
  color: var(--farbe-text-neben);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--abst-s);
}

.leistungs-karte > p {
  font-size: var(--gr-klein);
  flex-grow: 1;
}

.mehr-link {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--abst-s);
  font-weight: 700;
  font-size: var(--gr-klein);
  text-decoration: none;
  color: var(--farbe-primaer);
}
.mehr-link:hover { text-decoration: underline; }

.leistungen-gesamt-link {
  text-align: right;
}
.leistungen-gesamt-link a { font-weight: 700; }


/* 12. Kernkompetenzen (Startseite)
   ================================ */
.kernkompetenzen {
  padding-block: var(--abst-xxl);
  border-bottom: 1px solid var(--farbe-rand);
}

.kernkompetenzen > .container > h2 {
  margin-bottom: var(--abst-l);
}

.kompetenzen-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abst-l);
}

.kompetenz-eintrag {
  padding-left: var(--abst-m);
  border-left: 4px solid var(--farbe-primaer);
}

.kompetenz-eintrag h3 {
  font-size: 1.125rem;
  margin-bottom: var(--abst-xs);
}

.kompetenz-eintrag p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
}


/* 13. Kontakt-Aufruf (Startseite)
   ================================ */
.kontakt-aufruf {
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  padding-block: var(--abst-xxl);
}

.kontakt-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abst-xxl);
  align-items: start;
}

.kontakt-text h2 {
  color: var(--farbe-weiss);
  margin-bottom: var(--abst-m);
}

.kontakt-text p {
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--abst-l);
}

.kontakt-text .taste-primaer {
  background-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
  border-color: var(--farbe-weiss);
}
.kontakt-text .taste-primaer:hover {
  background-color: var(--farbe-tint);
  border-color: var(--farbe-tint);
}

.kontakt-adresse {
  color: rgba(255,255,255,0.9);
  font-size: var(--gr-klein);
  line-height: 2;
}
.kontakt-adresse strong { color: var(--farbe-weiss); }
.kontakt-adresse a { color: rgba(255,255,255,0.9); }
.kontakt-adresse a:hover { color: var(--farbe-weiss); }


/* 14. Footer
   ================================ */
.seiten-fuss {
  background-color: #111D16;
  color: rgba(255,255,255,0.75);
  padding-block: var(--abst-xl);
}

.fuss-layout {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--abst-xl);
  padding-bottom: var(--abst-l);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: var(--abst-l);
}

.fuss-logo {
  display: flex;
  align-items: flex-start;
  gap: var(--abst-s);
}

.logo-platzhalter-klein {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  flex-shrink: 0;
}

.fuss-bueroname {
  font-size: var(--gr-klein);
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin: 0;
}

.fuss-nav-liste li { margin-bottom: 0.4rem; }
.fuss-nav-liste a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: var(--gr-klein);
}
.fuss-nav-liste a:hover { color: var(--farbe-weiss); }

.fuss-copyright {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}


/* 15. Leistungen-Überblick Raster (5 Karten auf index.html)
   ================================ */
.leistungen-uebersicht-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abst-m);
  margin-bottom: var(--abst-xl);
}

.leistungs-karte-gross {
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-rand);
  border-top: 3px solid var(--farbe-primaer);
  padding: var(--abst-m);
}

.leistungs-karte-gross h3 {
  font-size: 1.1875rem;
  margin-bottom: var(--abst-xs);
}

.leistungs-karte-gross h3 a {
  color: var(--farbe-primaer);
  text-decoration: none;
}
.leistungs-karte-gross h3 a:hover { text-decoration: underline; }

.leistungs-karte-gross p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin-bottom: var(--abst-s);
}

.leistungs-karte-gross .mehr-link {
  display: inline-block;
  font-weight: 700;
  font-size: var(--gr-klein);
  color: var(--farbe-primaer);
  text-decoration: none;
}
.leistungs-karte-gross .mehr-link:hover { text-decoration: underline; }


/* 16. Kernkompetenzen-Bereich (Leistungen)
   ================================ */
.kernkomp-bereich {
  background-color: var(--farbe-tint);
  padding-block: var(--abst-xxl);
}

.kernkomp-bereich > .container > h2 {
  margin-bottom: var(--abst-l);
}


/* 17. Arbeitsweise
   ================================ */
.arbeitsweise-bereich {
  padding-block: var(--abst-xxl);
  border-bottom: 1px solid var(--farbe-rand);
}

.arbeitsweise-bereich > .container > h2 {
  margin-bottom: var(--abst-s);
}

.arbeitsweise-zitat {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--farbe-primaer);
  border-left: 4px solid var(--farbe-primaer);
  padding-left: var(--abst-m);
  margin-block: var(--abst-l);
  font-style: italic;
  line-height: 1.5;
}

.arbeitsweise-intro {
  color: var(--farbe-text-neben);
  max-width: 52rem;
  margin-bottom: var(--abst-l);
}

.abschnitt-untertitel {
  font-family: var(--font-serif);
  font-size: var(--gr-h3);
  color: var(--farbe-primaer);
  margin-bottom: var(--abst-m);
  margin-top: var(--abst-l);
}

.prinzipien-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abst-m);
  margin-bottom: var(--abst-xl);
}

.prinzip-karte {
  background-color: var(--farbe-tint);
  border: 1px solid var(--farbe-rand);
  border-top: 3px solid var(--farbe-primaer);
  padding: var(--abst-m);
}

.prinzip-nummer {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--farbe-rand);
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--abst-xs);
}

.prinzip-karte h4 {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--farbe-primaer);
  margin-bottom: var(--abst-xs);
}

.prinzip-karte p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
}

.phasen-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abst-m);
  margin-bottom: var(--abst-xl);
}

.phase-schritt {
  padding: var(--abst-m);
  border: 1px solid var(--farbe-rand);
}

.phase-nummer {
  display: inline-block;
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.2rem 0.625rem;
  border-radius: 2px;
  margin-bottom: var(--abst-s);
  letter-spacing: 0.02em;
}

.phase-schritt h4 {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--farbe-primaer);
  margin-bottom: var(--abst-xs);
}

.phase-schritt p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
}

.ebenen-spalten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abst-m);
}

.ebene-karte {
  padding-left: var(--abst-m);
  border-left: 4px solid var(--farbe-akzent);
}

.ebene-karte h4 {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--farbe-primaer);
  margin-bottom: var(--abst-xs);
}

.ebene-karte p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
}


/* 18. Zielgruppen
   ================================ */
.zielgruppen-bereich {
  background-color: var(--farbe-tint);
  padding-block: var(--abst-xxl);
}

.zielgruppen-bereich > .container > h2 {
  margin-bottom: var(--abst-l);
}

.zielgruppen-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abst-m);
}

.zielgruppe-karte {
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-rand);
  padding: var(--abst-m);
}

.zielgruppe-karte h3 {
  font-size: 1.1875rem;
  margin-bottom: var(--abst-s);
}

.zielgruppe-karte p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
}


/* 19. Leistungs-Detail-Seiten
   ================================ */
.leistungs-detail {
  padding-block: var(--abst-xxl);
}

.leistungs-abschnitt {
  max-width: 52rem;
  margin-bottom: var(--abst-xl);
}

.leistungs-abschnitt:last-child {
  margin-bottom: 0;
}

.leistungs-abschnitt h2 {
  margin-bottom: var(--abst-m);
}

.anlass-liste {
  margin-top: var(--abst-s);
}

.anlass-liste li {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--farbe-tint);
  font-size: var(--gr-basis);
  line-height: 1.6;
  align-items: flex-start;
}

.anlass-liste li::before {
  content: "–";
  color: var(--farbe-primaer);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.leistungs-intra-nav {
  background-color: var(--farbe-tint);
  padding-block: var(--abst-xl);
  border-top: 1px solid var(--farbe-rand);
  border-bottom: 1px solid var(--farbe-rand);
}

.leistungs-intra-nav h2 {
  font-size: var(--gr-h3);
  margin-bottom: var(--abst-m);
}

.intra-nav-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.intra-nav-liste li a {
  display: block;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--farbe-rand);
  background-color: var(--farbe-weiss);
  text-decoration: none;
  font-size: var(--gr-klein);
  color: var(--farbe-text);
}

.intra-nav-liste li a:hover {
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  border-color: var(--farbe-primaer);
}

.intra-nav-liste li a[aria-current="page"] {
  font-weight: 700;
  border-color: var(--farbe-primaer);
  color: var(--farbe-primaer);
  pointer-events: none;
  background-color: #EEF5F0;
}


/* 20. Responsive (Desktop-First; Mobile-Feinschliff in Phase 6)
   ================================ */
/* 15. Responsive (Desktop-First; Mobile-Feinschliff in Phase 6)
   ================================ */
@media (max-width: 1024px) {
  :root {
    --gr-h1: 2.125rem;
    --gr-h2: 1.625rem;
  }

  .leistungen-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .kompetenz-layout {
    grid-template-columns: 1fr;
  }

  .kompetenz-bild {
    width: 100%;
    height: 18rem;
  }

  .kompetenzen-liste {
    grid-template-columns: repeat(2, 1fr);
  }

  .fuss-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --abst-xxl: 3.5rem;
    --abst-xl:  2rem;
    --container-pad: 1.25rem;
  }

  .nav-toggle { display: flex; }

  #haupt-nav {
    display: none;
    position: absolute;
    top: var(--kopf-hoehe);
    left: 0;
    right: 0;
    background-color: var(--farbe-weiss);
    border-bottom: 1px solid var(--farbe-rand);
    padding: var(--abst-m);
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 6px 16px var(--farbe-schatten);
  }

  #haupt-nav.nav-offen { display: flex; }

  .nav-liste {
    flex-direction: column;
    width: 100%;
  }

  .hat-dropdown {
    flex-wrap: wrap;
    width: 100%;
  }

  .nav-punkt > .nav-link {
    padding: 0.75rem 0;
    flex-grow: 1;
    border-bottom: 1px solid var(--farbe-tint);
  }

  .dropdown-menue {
    position: static;
    border-top: none;
    border-left: 3px solid var(--farbe-primaer);
    box-shadow: none;
    min-width: 100%;
    margin-left: var(--abst-m);
  }

  .hat-dropdown:hover > .dropdown-menue {
    display: none;
  }

  .hat-dropdown.dropdown-offen > .dropdown-menue {
    display: block;
  }

  .sprachumschalter {
    border-left: none;
    padding-left: 0;
    padding-top: var(--abst-s);
    border-top: 1px solid var(--farbe-rand);
    width: 100%;
  }

  .hero h1 { font-size: 1.875rem; }
  .hero-untertitel { font-size: 1.0625rem; }

  .kontakt-layout,
  .fuss-layout,
  .kompetenzen-liste,
  .leistungen-raster {
    grid-template-columns: 1fr;
  }

  .leistungen-uebersicht-raster,
  .prinzipien-raster,
  .phasen-reihe,
  .ebenen-spalten,
  .zielgruppen-raster,
  .intra-nav-liste {
    grid-template-columns: 1fr;
  }

  /* Phase 3 Responsive */
  .person-profil-layout {
    grid-template-columns: 1fr;
  }

  .person-foto {
    aspect-ratio: 4/3;
    max-height: 22rem;
  }

  .motivation-raster {
    grid-template-columns: 1fr;
  }

  .referenz-eintrag {
    grid-template-columns: 1fr;
    gap: var(--abst-xs);
  }

  .referenz-meta {
    flex-direction: row;
    align-items: center;
    gap: var(--abst-s);
  }

  .referenz-kategorie {
    margin-top: 0;
  }

  /* Phase 4 Responsive */
  .formular-zeile {
    grid-template-columns: 1fr;
  }

  .fehler-zahl {
    font-size: 5rem;
  }

  .fehler-links {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 1024px) {
  /* Phase 4 */
  .kontakt-seite-layout {
    grid-template-columns: 1fr;
  }
}


/* 23. Kontakt-Seite – Phase 4
   ================================ */
.kontakt-seite-layout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: var(--abst-xl);
  align-items: start;
  padding-block: var(--abst-xxl);
}

.formular-gruppe {
  margin-bottom: var(--abst-m);
}

.formular-label {
  display: block;
  font-weight: 700;
  font-size: var(--gr-klein);
  margin-bottom: 0.375rem;
  color: var(--farbe-text);
}

.formular-label .pflicht {
  color: #B91C1C;
  margin-left: 0.25rem;
  aria-hidden: true;
}

.formular-feld {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--gr-basis);
  color: var(--farbe-text);
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-rand);
  border-radius: 2px;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.formular-feld:focus {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
  border-color: var(--farbe-primaer);
}

textarea.formular-feld {
  resize: vertical;
  min-height: 10rem;
}

.formular-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abst-m);
}

.formular-einwilligung {
  display: flex;
  gap: var(--abst-s);
  align-items: flex-start;
  padding: var(--abst-m);
  background-color: var(--farbe-tint);
  border: 1px solid var(--farbe-rand);
  border-radius: 2px;
  margin-bottom: var(--abst-m);
}

.formular-einwilligung input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  cursor: pointer;
  accent-color: var(--farbe-primaer);
}

.formular-einwilligung label {
  font-size: var(--gr-klein);
  color: var(--farbe-text);
  line-height: 1.6;
  cursor: pointer;
}

.formular-pflichtfeld-hinweis {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin-bottom: var(--abst-l);
}

.formular-absenden {
  display: block;
  width: 100%;
  padding: 0.875rem 1.875rem;
  font-family: var(--font-sans);
  font-size: var(--gr-basis);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  border: 2px solid var(--farbe-primaer);
  border-radius: 2px;
}

.formular-absenden:hover {
  background-color: var(--farbe-primaer-dunkel);
  border-color: var(--farbe-primaer-dunkel);
}

.formular-absenden:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 3px;
}

.formular-bestaetigung {
  display: none;
  padding: var(--abst-m);
  background-color: #ECFDF5;
  border: 1px solid #059669;
  border-radius: 2px;
  margin-top: var(--abst-m);
}

.formular-bestaetigung.sichtbar {
  display: block;
}

.formular-bestaetigung h3 {
  color: #065F46;
  font-size: 1.125rem;
  margin-bottom: var(--abst-xs);
}

.formular-bestaetigung p {
  color: #065F46;
  font-size: var(--gr-klein);
  margin: 0;
}

/* Kontakt-Info (rechte Spalte) */
.kontakt-info-block {
  background-color: var(--farbe-tint);
  border: 1px solid var(--farbe-rand);
  border-top: 3px solid var(--farbe-primaer);
  padding: var(--abst-m);
  margin-bottom: var(--abst-m);
}

.kontakt-info-block h2 {
  font-size: var(--gr-h3);
  margin-bottom: var(--abst-s);
}

.kontakt-dl {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--gr-klein);
}

.kontakt-dl dt {
  font-weight: 700;
  color: var(--farbe-primaer);
}

.kontakt-dl dd {
  margin-left: 0;
  margin-bottom: 0.5rem;
  color: var(--farbe-text);
}

.kontakt-hinweis-box {
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-akzent);
  padding: var(--abst-m);
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  line-height: 1.65;
}

.kontakt-hinweis-box strong {
  display: block;
  color: var(--farbe-text);
  margin-bottom: 0.375rem;
}


/* 24. Blog – Phase 4
   ================================ */
.blog-raster {
  display: flex;
  flex-direction: column;
  gap: var(--abst-m);
  max-width: 52rem;
  margin-bottom: var(--abst-xl);
}

.blog-karte {
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-primaer);
  background-color: var(--farbe-weiss);
  padding: var(--abst-m);
}

.blog-karte-meta {
  display: flex;
  gap: var(--abst-s);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--abst-xs);
}

.blog-karte-datum {
  font-size: 0.8125rem;
  color: var(--farbe-text-neben);
}

.blog-karte-kategorie {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--farbe-akzent);
  background-color: var(--farbe-tint);
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
}

.blog-karte h3 {
  font-size: 1.125rem;
  margin-bottom: var(--abst-xs);
}

.blog-karte h3 a {
  color: var(--farbe-primaer);
  text-decoration: none;
}

.blog-karte h3 a:hover {
  text-decoration: underline;
}

.blog-karte-auszug {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin-bottom: var(--abst-xs);
  line-height: 1.65;
}

.blog-karte-mehr {
  display: inline-block;
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--farbe-primaer);
  text-decoration: none;
}

.blog-karte-mehr:hover {
  text-decoration: underline;
}

.blog-noch-keine {
  background-color: var(--farbe-tint);
  border: 1px solid var(--farbe-rand);
  padding: var(--abst-l);
  text-align: center;
  color: var(--farbe-text-neben);
  font-size: var(--gr-klein);
  max-width: 52rem;
}

/* Blog-Filter (Kategorie-Tags) */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abst-xs);
  max-width: 52rem;
  margin-bottom: var(--abst-l);
}

.blog-filter-taste {
  font-family: var(--font-sans);
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--farbe-primaer);
  background-color: transparent;
  border: 2px solid var(--farbe-rand);
  border-radius: 2px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.blog-filter-taste:hover {
  border-color: var(--farbe-primaer);
}

.blog-filter-taste.ist-aktiv {
  background-color: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}

.blog-filter-taste:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

/* Blog-Einzelbeitrag */
.blog-artikel {
  padding-block: var(--abst-xxl);
}

.artikel-kopf {
  max-width: 52rem;
  margin-bottom: var(--abst-xl);
  padding-bottom: var(--abst-l);
  border-bottom: 2px solid var(--farbe-rand);
}

.artikel-kopf h1 {
  margin-bottom: var(--abst-s);
}

.artikel-meta {
  display: flex;
  gap: var(--abst-m);
  align-items: center;
  flex-wrap: wrap;
}

.artikel-inhalt {
  max-width: 52rem;
}

.artikel-inhalt h2 {
  margin-top: var(--abst-l);
  margin-bottom: var(--abst-s);
  font-size: var(--gr-h3);
}

.artikel-inhalt p {
  margin-bottom: var(--abst-m);
}

.artikel-inhalt ul,
.artikel-inhalt ol {
  margin-bottom: var(--abst-m);
  padding-left: var(--abst-l);
  list-style: disc;
}

.artikel-inhalt ol {
  list-style: decimal;
}

.artikel-inhalt li {
  margin-bottom: 0.375rem;
  font-size: var(--gr-basis);
}

.artikel-nav {
  border-top: 1px solid var(--farbe-rand);
  padding-top: var(--abst-l);
  margin-top: var(--abst-xl);
  max-width: 52rem;
}


/* 25. 404-Seite – Phase 4
   ================================ */
.fehler-404-bereich {
  padding-block: var(--abst-xxl);
  text-align: center;
}

.fehler-zahl {
  font-family: var(--font-serif);
  font-size: 8rem;
  font-weight: 600;
  color: var(--farbe-rand);
  line-height: 1;
  margin-bottom: var(--abst-m);
}

.fehler-404-bereich h1 {
  font-size: var(--gr-h2);
  margin-bottom: var(--abst-m);
}

.fehler-404-bereich > .container > p {
  color: var(--farbe-text-neben);
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: var(--abst-l);
}

.fehler-links {
  display: flex;
  gap: var(--abst-m);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--abst-l);
}


/* 26. Rechtsseiten (Impressum, Datenschutz) – Phase 4
   ================================ */
.rechts-inhalt {
  padding-block: var(--abst-xxl);
  max-width: 48rem;
}

.rechts-inhalt h2 {
  font-size: var(--gr-h3);
  margin-top: var(--abst-xl);
  margin-bottom: var(--abst-s);
  padding-top: var(--abst-l);
  border-top: 1px solid var(--farbe-rand);
}

.rechts-inhalt h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.rechts-inhalt h3 {
  font-size: 1.0625rem;
  margin-top: var(--abst-m);
  margin-bottom: var(--abst-xs);
}

.rechts-inhalt p,
.rechts-inhalt address {
  font-size: var(--gr-basis);
  line-height: 1.75;
  margin-bottom: var(--abst-s);
}

.rechts-inhalt a {
  color: var(--farbe-primaer);
}

.inhalt-platzhalter-box {
  background-color: #FFF8E1;
  border: 1px solid #F9C840;
  border-left: 4px solid #F59E0B;
  padding: var(--abst-m);
  border-radius: 2px;
  margin-bottom: var(--abst-m);
}

.inhalt-platzhalter-box strong {
  display: block;
  color: #92400E;
  font-size: var(--gr-klein);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.inhalt-platzhalter-box p {
  color: #7A5500;
  font-size: var(--gr-klein);
  margin: 0;
}


/* 21. Person-Seite – Phase 3
   ================================ */

/* Scroll-Offset für sticky Header */
.person-abschnitt[id] {
  scroll-margin-top: calc(var(--kopf-hoehe) + 1rem);
}

/* Anker-Navigation */
.person-anker-nav {
  border-bottom: 1px solid var(--farbe-rand);
  padding-block: 0.875rem;
  background-color: var(--farbe-weiss);
}

.person-anker-liste {
  display: flex;
  gap: var(--abst-l);
  flex-wrap: wrap;
  list-style: none;
}

.person-anker-liste a {
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--farbe-primaer);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
}

.person-anker-liste a:hover {
  border-bottom-color: var(--farbe-primaer);
}

/* Abschnitte */
.person-abschnitt {
  padding-block: var(--abst-xxl);
  border-bottom: 1px solid var(--farbe-rand);
}

.person-abschnitt:last-child {
  border-bottom: none;
}

.person-abschnitt-tint {
  background-color: var(--farbe-tint);
}

.person-abschnitt > .container > h2 {
  margin-bottom: var(--abst-l);
}

/* Profil-Layout */
.person-profil-layout {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: var(--abst-xl);
  align-items: start;
}

.person-foto {
  width: 100%;
  aspect-ratio: 2/3;
}

.person-profil-text p {
  margin-bottom: var(--abst-m);
}

.person-profil-text p:last-child {
  margin-bottom: 0;
}

/* Motivation */
.motivation-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abst-m);
}

.motivation-karte {
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-rand);
  border-top: 3px solid var(--farbe-primaer);
  padding: var(--abst-m);
}

.motivation-karte h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--abst-s);
}

.motivation-karte p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin: 0;
}

/* Werdegang-Zeitleiste */
.werdegang-zeitleiste {
  position: relative;
  padding-left: 2.5rem;
  max-width: 52rem;
}

.werdegang-zeitleiste::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background-color: var(--farbe-rand);
}

.werdegang-eintrag {
  position: relative;
  padding-bottom: var(--abst-l);
}

.werdegang-eintrag:last-child {
  padding-bottom: 0;
}

.werdegang-punkt {
  position: absolute;
  left: -2.0625rem;
  top: 0.3125rem;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--farbe-primaer);
  border-radius: 50%;
  border: 3px solid var(--farbe-weiss);
  box-shadow: 0 0 0 2px var(--farbe-primaer);
}

.werdegang-eintrag.aktuell .werdegang-punkt {
  background-color: var(--farbe-akzent);
  box-shadow: 0 0 0 2px var(--farbe-akzent);
}

.werdegang-zeitraum {
  display: block;
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--farbe-akzent);
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.werdegang-eintrag h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.werdegang-eintrag > p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin-bottom: 0;
}

/* Veröffentlichungen */
.pub-gruppe {
  margin-bottom: var(--abst-xl);
}

.pub-gruppe:last-child {
  margin-bottom: 0;
}

.pub-gruppe h3 {
  font-size: var(--gr-h3);
  margin-bottom: var(--abst-m);
  padding-bottom: var(--abst-xs);
  border-bottom: 2px solid var(--farbe-rand);
}

.pub-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abst-s);
}

.pub-eintrag {
  padding: var(--abst-s) var(--abst-m);
  border-left: 4px solid var(--farbe-primaer);
  background-color: var(--farbe-tint);
}

.pub-eintrag cite {
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--farbe-text);
  display: block;
  margin-bottom: 0.25rem;
}

.pub-detail {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin: 0;
}

/* Text-Platzhalter (sichtbar für Kundenabgleich) */
.text-ph {
  font-style: normal;
  background-color: #FFF8E1;
  border: 1px solid #F9C840;
  padding: 0.125rem 0.375rem;
  border-radius: 2px;
  font-size: 0.875em;
  color: #7A5500;
}


/* 22. Referenzen-Seite – Phase 3
   ================================ */

.referenzen-bereich {
  padding-block: var(--abst-xxl);
}

.referenzen-bereich > .container > h2 {
  margin-bottom: var(--abst-l);
}

.referenz-liste {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.referenz-eintrag {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--abst-m);
  padding: var(--abst-m);
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-primaer);
  background-color: var(--farbe-weiss);
}

.referenz-eintrag.platzhalter {
  border-left-color: var(--farbe-rand);
  opacity: 0.6;
}

.referenz-meta {
  display: flex;
  flex-direction: column;
  padding-top: 0.2rem;
}

.referenz-jahr {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--farbe-primaer);
  line-height: 1.2;
}

.referenz-kategorie {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--farbe-text-neben);
  margin-top: 0.375rem;
}

.referenz-inhalt h3 {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.referenz-inhalt p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin: 0;
}


/* ============================================================
   Phase 6: Mobil und Feinschliff
   ============================================================ */

/* 27. Skip-to-content-Link
   ================================ */
.skip-link {
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: var(--gr-klein);
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--farbe-weiss);
  outline-offset: 2px;
}


/* 28. Mobile Navigation – Hamburger-Zustand
   ================================ */

/* Hamburger zeigt X wenn geöffnet (nur auf Mobile relevant) */
@media (max-width: 768px) {
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}


/* 29. Touch-Targets (min. 44 × 44 px nach WCAG 2.5.5)
   ================================ */

/* Hamburger-Button: größeres Touch-Target (nur auf Mobile) */
@media (max-width: 768px) {
  .nav-toggle {
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem;
  }
}

.dropdown-menue li a {
  min-height: 2.75rem;
}

.taste-primaer,
.taste-sekundaer {
  min-height: 2.75rem;
}

.formular-absenden {
  min-height: 3rem;
}


/* 30. Mobile Logo – langer Büroname
   ================================ */
@media (max-width: 860px) {
  .logo-bueroname {
    font-size: 0.875rem;
  }

  .logo-text {
    max-width: 14rem;
  }
}

@media (max-width: 600px) {
  .logo-bueroname {
    display: none;
  }

  .logo-person {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--farbe-primaer);
  }
}


/* 31. Person-Seite – Anker-Navigation mobilfreundlich
   ================================ */
@media (max-width: 768px) {
  .person-anker-liste {
    gap: var(--abst-m);
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .person-anker-liste::-webkit-scrollbar {
    display: none;
  }

  .person-anker-liste a {
    white-space: nowrap;
  }
}


/* 32. Breakpoint ≤ 480 px – sehr kleine Geräte
   ================================ */
@media (max-width: 480px) {
  :root {
    --gr-h1:    1.625rem;
    --gr-h2:    1.375rem;
    --gr-h3:    1.125rem;
    --abst-xxl: 2.5rem;
    --abst-xl:  1.5rem;
    --abst-l:   1.5rem;
    --container-pad: 1rem;
  }

  .hero {
    padding-block: 2.5rem;
  }

  .hero-untertitel {
    font-size: 1rem;
    margin-bottom: var(--abst-m);
  }

  .taste-primaer,
  .taste-sekundaer {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.875rem 1rem;
  }

  .fehler-zahl {
    font-size: 4.5rem;
  }

  .fehler-links {
    flex-direction: column;
  }

  .fehler-links .taste-primaer,
  .fehler-links .taste-sekundaer {
    width: auto;
    display: inline-block;
  }

  .bereich-kopf {
    padding-block: var(--abst-xl);
  }
}


/* 33. Druckstile
   ================================ */
@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* URL nach Links ausgeben – nur für externe Links */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .seiten-kopf,
  .nav-toggle,
  #haupt-nav,
  .skip-link,
  .kontakt-aufruf,
  .leistungs-intra-nav,
  .person-anker-nav,
  .seiten-fuss,
  .taste-primaer,
  .taste-sekundaer,
  .mehr-link,
  .brotpfad {
    display: none !important;
  }

  .hero {
    background: none;
    border: 2px solid #000;
    padding: 1.5rem;
  }

  .hero h1,
  .hero-untertitel {
    color: #000;
  }

  .container {
    max-width: 100%;
    padding-inline: 0;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    color: #000;
  }

  .leistungs-karte,
  .leistungs-karte-gross,
  .referenz-eintrag,
  .blog-karte {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    border-top-color: #000 !important;
    box-shadow: none;
  }

  .leistungen-raster,
  .leistungen-uebersicht-raster {
    grid-template-columns: 1fr 1fr;
  }

  .bild-platzhalter,
  .logo-platzhalter,
  .logo-platzhalter-klein {
    display: none;
  }

  .pub-eintrag {
    background: none;
    border-left: 2px solid #000;
  }

  .formular-bestaetigung {
    display: none;
  }

  .inhalt-platzhalter-box {
    border: 1px solid #999;
    background: none;
  }

  .platzhalter-hinweis {
    border: 1px solid #999;
    background: none;
    color: #555;
  }
}


/* ============================================================
   Textupdate 2026-09: echte Fotos + Dropdown-Hover-Intent
   ============================================================ */

/* Echte Fotos (ersetzen Platzhalter) */
.bild-figur {
  margin: 0;
  overflow: hidden;
  background-color: var(--farbe-tint);
}
.bild-figur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person-foto.bild-figur img {
  object-position: 50% 15%;
}

/* Foto auf Leistungsseiten (im Textfluss, begrenzte Breite) */
.leistungs-foto {
  margin: 0;
  max-width: 30rem;
}
.leistungs-foto img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--farbe-rand);
  border-radius: 2px;
}
.leistungs-foto.foto-hoch {
  max-width: 24rem;
}
.leistungs-foto.foto-hoch img {
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}
.leistungs-foto figcaption {
  font-size: var(--gr-klein);
  color: var(--farbe-text-neben);
  margin-top: var(--abst-xs);
}

/* Dropdown: Hover-Intent-Puffer gegen Hover-Lücke zwischen Auslöser und Menü */
.hat-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
}
@media (max-width: 768px) {
  .hat-dropdown::after { content: none; }
}

/* Referenzen: gegliederte Gruppenliste (Textupdate 2026-09) */
.referenz-gruppe {
  margin-bottom: var(--abst-xl);
  max-width: 60rem;
}
.referenz-gruppe:last-child { margin-bottom: 0; }
.referenz-gruppe > h2 {
  font-size: var(--gr-h3);
  margin-bottom: var(--abst-m);
  padding-bottom: var(--abst-xs);
  border-bottom: 2px solid var(--farbe-rand);
}
.referenz-gruppen-liste {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.referenz-gruppen-liste li {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--farbe-primaer);
  background-color: var(--farbe-tint);
  font-size: var(--gr-klein);
  line-height: 1.6;
  align-items: flex-start;
}
.referenz-gruppen-liste li::before {
  content: "–";
  color: var(--farbe-primaer);
  font-weight: 700;
  flex-shrink: 0;
}

/* Person: Referenzprojekte-Narrative */
.referenzprojekte-text { max-width: 52rem; }
.referenzprojekte-text p { margin-bottom: var(--abst-m); }

/* Honeypot gegen Spam (visuell verborgen, fuer Nutzer unsichtbar) */
.honeypot-feld { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================================================
   Mobil-Haertung 2026-09-11 (Revision): Kaskadenreihenfolge + Wortumbruch
   Die Basisregeln der Phase-3/4-Layouts stehen im Stylesheet NACH ihren
   @media-Stapelregeln; bei gleicher Spezifitaet gewann daher die mehrspaltige
   Basis auch auf Mobil (Ueberlauf der rechten Spalte). Diese Overrides am
   Dateiende stellen die beabsichtigte Stapelung wieder her.
   Belegt per Playwright (iPhone 13 / 360px-Android, getBoundingClientRect).
   ============================================================ */
@media (max-width: 1024px) {
  .kontakt-seite-layout { grid-template-columns: 1fr; }
  .person-profil-layout { grid-template-columns: 1fr; }
  .motivation-raster    { grid-template-columns: 1fr; }
  .referenz-eintrag     { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .formular-zeile { grid-template-columns: 1fr; }
}

/* Lange Fachbegriffe umbrechen statt ueber den Rand ragen */
p, li, dd, dt, address, figcaption, blockquote, cite,
.brotpfad, .pub-detail, .anlass-liste li,
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}
p, li, dd, .anlass-liste li {
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Flex-Textzeilen duerfen unter ihre Wortbreite schrumpfen */
.anlass-liste li { min-width: 0; }