/* ==========================================================================
   Kanzlei Dr. Johannsen – Stylesheet
   Grundlage: Designsystem „Kanzlei Dr. Johannsen“
   Klassisch-seriös, präzise, ruhig. Linien statt Schatten, eckige Formen.
   ========================================================================== */

/* ---------- Schriften (lokal eingebunden, keine Verbindung zu Google) ---------- */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("EB Garamond"), url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("EB Garamond Medium"), url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("EB Garamond Italic"), url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Source Sans 3"), url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: local("Source Sans 3 SemiBold"), url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --kanzleiblau: #1f3049;
  --kanzleiblau-tief: #17263b;
  --ocker: #c68a2c;
  --ocker-dunkel: #8c5a12;
  --ocker-hell: #d9a048;
  --anthrazit: #2b2f36;
  --text-gedaempft: #4a4f57;
  --steingrau: #6b7079;
  --linie: #c9ccd1;
  --papier: #f5f4f0;
  --weiss: #ffffff;

  --serif: "EB Garamond", Garamond, "Garamond Premier Pro", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", Calibri, Arial, sans-serif;

  --container: 1200px;
  --gutter: 24px;
  --section: 96px;
  --akzent: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 92px;
}
@media (max-width: 760px) {
  :root { --section: 64px; --header-h: 68px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--weiss); color: var(--anthrazit);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kanzleiblau); text-decoration-color: var(--ocker); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ocker-dunkel); }
:focus-visible { outline: 2px solid var(--ocker); outline-offset: 3px; }
::selection { background: var(--ocker-hell); color: var(--kanzleiblau); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--kanzleiblau); margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(36px, 5vw, 48px); line-height: 1.15; }
h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; }
h3 { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.2; }
p { margin: 0 0 1em; }
.lead { font-size: 19px; line-height: 1.6; color: var(--text-gedaempft); max-width: 62ch; }
.muted { color: var(--text-gedaempft); }
.small { font-size: 15px; line-height: 1.55; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--papier { background: var(--papier); }
.section--blau { background: var(--kanzleiblau); color: #fff; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--kanzleiblau); color: #fff; padding: 10px 16px; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Rubrik (Versalien, Ocker-Linie davor) ---------- */
.rubrik {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ocker-dunkel); line-height: 1.4;
}
.rubrik::before { content: ""; flex: 0 0 var(--akzent); height: 2px; background: var(--ocker); }
.section--blau .rubrik, .on-blau .rubrik { color: var(--ocker-hell); }
.section-head { margin-bottom: 48px; max-width: 760px; }
.section-head h2 + p { margin-top: 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border: 1px solid var(--kanzleiblau);
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: .02em; text-decoration: none;
  background: var(--kanzleiblau); color: #fff; border-radius: 0; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--kanzleiblau-tief); color: #fff; }
.btn .pfeil { transition: transform .25s var(--ease); }
.btn:hover .pfeil { transform: translateX(4px); }
.btn--linie { background: transparent; color: var(--kanzleiblau); }
.btn--linie:hover { background: var(--kanzleiblau); color: #fff; }
.btn--ocker { background: var(--ocker-hell); border-color: var(--ocker-hell); color: var(--kanzleiblau); }
.btn--ocker:hover { background: #e4b263; border-color: #e4b263; color: var(--kanzleiblau-tief); }
.btn--weiss-linie { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--weiss-linie:hover { background: #fff; color: var(--kanzleiblau); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
  letter-spacing: .04em; text-decoration: none; color: var(--kanzleiblau);
}
.textlink .pfeil { transition: transform .25s var(--ease); color: var(--ocker); }
.textlink:hover .pfeil { transform: translateX(5px); }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97);
  border-bottom: 1px solid transparent; transition: border-color .3s, height .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--linie); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.logo { display: block; flex: 0 0 auto; }
.logo img { height: 58px; width: auto; transition: height .3s var(--ease); }
.site-header.is-scrolled .logo img { height: 50px; }
@media (max-width: 760px) { .logo img, .site-header.is-scrolled .logo img { height: 42px; } }

.nav { display: flex; align-items: center; gap: 32px; }
.nav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  position: relative; display: inline-block; padding: 8px 0; text-decoration: none;
  font-size: 16px; font-weight: 600; color: var(--anthrazit); letter-spacing: .01em;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--ocker);
  transition: width .3s var(--ease);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { width: var(--akzent); }
.nav__list a[aria-current="page"] { color: var(--kanzleiblau); }
.nav .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--linie); background: #fff; padding: 0; cursor: pointer;
  position: relative;
}
.nav-toggle span { position: absolute; left: 11px; width: 20px; height: 2px; background: var(--kanzleiblau); transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; width: 12px; background: var(--ocker); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 20px; background: var(--kanzleiblau); }

@media (max-width: 960px) {
  .nav-toggle { display: block; z-index: 60; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--kanzleiblau);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 32px var(--gutter) 40px;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    overflow-y: auto;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list li { border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav__list a { display: block; padding: 18px 0; font-family: var(--serif); font-weight: 500; font-size: 30px; color: #fff; }
  .nav__list a::after { bottom: 12px; }
  .nav__list a[aria-current="page"] { color: var(--ocker-hell); }
  .nav .btn { margin-top: 32px; background: var(--ocker-hell); border-color: var(--ocker-hell); color: var(--kanzleiblau); min-height: 52px; }
  .nav__kontakt { display: block !important; margin-top: 28px; color: rgba(255,255,255,.8); font-size: 16px; }
  .nav__kontakt a { color: #fff; text-decoration: none; }
  body.nav-open { overflow: hidden; }
}
.nav__kontakt { display: none; }

/* ---------- Hero (Startseite) ---------- */
.hero { position: relative; background: var(--papier); overflow: hidden; padding: 112px 0 104px; }
.hero::before { /* feine Linierung wie Kanzleipapier, rechts auslaufend */
  content: ""; position: absolute; inset: 0 0 0 48%;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, rgba(201,204,209,.55) 47px, rgba(201,204,209,.55) 48px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
          mask-image: linear-gradient(to right, transparent, #000 35%);
  pointer-events: none;
}
.hero__paragraf { /* großes Paragrafenzeichen als Konturlinie */
  position: absolute; right: -2%; top: 50%; transform: translateY(-52%);
  font-family: var(--serif); font-size: clamp(320px, 42vw, 640px); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px var(--linie); pointer-events: none; user-select: none;
}
.hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.display { font-size: clamp(40px, 6.2vw, 68px); line-height: 1.08; letter-spacing: -.01em; max-width: 14ch; }
.hero .lead { margin: 28px 0 40px; }
.cursor {
  display: inline-block; width: .13em; height: .66em; margin-left: .14em; background: var(--ocker);
  vertical-align: baseline; animation: blinken 1.15s steps(1, end) infinite;
}
@keyframes blinken { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.fakten { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); background: rgba(255,255,255,.72); }
.fakten li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--linie); align-items: baseline; }
.fakten dt, .fakten .k { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--steingrau); }
.fakten .v { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--kanzleiblau); }
.fakten .v small { display: block; font-family: var(--sans); font-size: 14px; color: var(--text-gedaempft); margin-top: 2px; }
.fakten li.hervor { border-top: 4px solid var(--ocker); margin-top: -1px; background: #fff; }

@media (max-width: 960px) {
  .hero { padding: 72px 0 64px; }
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .hero::before { inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%); mask-image: linear-gradient(to bottom, transparent, #000 60%); }
  .hero__paragraf { right: -18%; top: 22%; opacity: .7; }
}
@media (max-width: 480px) { .fakten li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-hero { position: relative; background: var(--papier); padding: 72px 0 64px; overflow: hidden; border-bottom: 1px solid var(--linie); }
.page-hero::after { /* Ocker-Akzentlinie am Anfang der Haarlinie */
  content: ""; position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: -1px; width: var(--akzent); height: 2px; background: var(--ocker);
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: 20px; }
.page-hero__mark {
  position: absolute; right: 4%; bottom: -0.32em; font-family: var(--serif); font-size: clamp(180px, 24vw, 340px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--linie); pointer-events: none; user-select: none;
}
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; font-size: 14px; color: var(--steingrau); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--linie); }
.breadcrumb a { color: var(--steingrau); text-decoration: none; }
.breadcrumb a:hover { color: var(--kanzleiblau); }

/* ---------- Linien-Raster mit Karten ---------- */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karte { position: relative; background: var(--weiss); padding: 40px 32px 36px; display: flex; flex-direction: column; }
.section--papier .karte { background: var(--weiss); }
.karte::before {
  content: ""; position: absolute; left: 32px; top: -1px; width: var(--akzent); height: 2px; background: var(--ocker);
  transition: left .45s var(--ease), width .45s var(--ease);
}
.karte:hover::before, .karte:focus-within::before { left: 0; width: 100%; }
.karte__nr { font-family: var(--serif); font-size: 22px; color: var(--ocker-dunkel); margin-bottom: 20px; font-feature-settings: "lnum"; }
.karte h3 { margin-bottom: 14px; }
.karte p { color: var(--text-gedaempft); font-size: 16px; }
.karte .textlink { margin-top: auto; padding-top: 12px; }
a.karte { text-decoration: none; color: inherit; }
a.karte:hover h3 { color: var(--kanzleiblau); }
@media (max-width: 960px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .raster, .raster--2 { grid-template-columns: 1fr; } .karte { padding: 32px 24px 28px; } .karte::before { left: 24px; } }

/* ---------- Zitat / Haltung ---------- */
.haltung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.zitat { margin: 0; position: relative; padding-top: 72px; }
.zitat p { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.25; color: var(--kanzleiblau); margin: 0; }
.zitat::before { content: "\201C"; position: absolute; left: -4px; top: -18px; font-family: var(--serif); font-size: 128px; line-height: 1; color: var(--ocker); }
.zitat footer { margin-top: 24px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--steingrau); font-weight: 600; }
.punkte { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.punkte li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.punkte .nr { font-family: var(--serif); color: var(--ocker-dunkel); font-size: 19px; }
.punkte strong { display: block; color: var(--kanzleiblau); font-weight: 600; }
@media (max-width: 860px) { .haltung { grid-template-columns: 1fr; gap: 56px; } }

/* ---------- „Was nun?“ – Anliegen ---------- */
.anliegen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 1px solid var(--linie); }
.anliegen li { border-bottom: 1px solid var(--linie); }
.anliegen a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 20px 0;
  text-decoration: none; color: var(--anthrazit); font-size: 18px; line-height: 1.4; position: relative;
}
.anliegen a::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--ocker); transition: width .45s var(--ease); }
.anliegen a:hover::before { width: 100%; }
.anliegen a:hover { color: var(--kanzleiblau); }
.anliegen .tag { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--steingrau); font-weight: 600; margin-top: 4px; }
.anliegen .pfeil { color: var(--ocker); font-size: 20px; transition: transform .3s var(--ease); }
.anliegen a:hover .pfeil { transform: translateX(6px); }
@media (max-width: 760px) { .anliegen { grid-template-columns: 1fr; } }

/* ---------- Phasen / Ablauf ---------- */
.phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: phase; }
.phasen::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--linie); }
.phase { position: relative; padding: 0 32px 0 0; }
.phase__marke {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  background: var(--weiss); border: 1px solid var(--kanzleiblau); font-family: var(--serif); font-size: 22px; color: var(--kanzleiblau); margin-bottom: 28px;
}
.section--papier .phase__marke { background: var(--papier); }
.phase--hervor .phase__marke { background: var(--kanzleiblau); color: #fff; }
.phase--hervor .phase__marke::after { content: ""; position: absolute; right: -9px; top: 12px; width: 6px; height: 30px; background: var(--ocker); }
.phase h3 { margin-bottom: 8px; }
.phase__preis { font-family: var(--serif); font-size: 19px; color: var(--ocker-dunkel); margin-bottom: 12px; }
.phase p { color: var(--text-gedaempft); font-size: 16px; }
@media (max-width: 860px) {
  .phasen { grid-template-columns: 1fr; gap: 40px; }
  .phasen::before { left: 27px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .phase { padding: 0 0 0 84px; }
  .phase__marke { position: absolute; left: 0; top: 0; }
}

/* ---------- Preis-Karte ---------- */
.preis { border: 1px solid var(--linie); border-top: 4px solid var(--ocker); background: #fff; padding: 40px; }
.preis__betrag { font-family: var(--serif); font-size: clamp(64px, 8vw, 96px); line-height: 1; color: var(--kanzleiblau); display: flex; align-items: baseline; gap: 12px; }
.preis__betrag span { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: .12em; color: var(--steingrau); }
.preis__neben { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); display: flex; align-items: baseline; gap: 16px; }
.preis__neben b { font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--kanzleiblau); }
.preis ul { margin: 24px 0 0; }

/* ---------- Zweispaltig mit Seitenleiste ---------- */
.spalten { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 80px; align-items: start; }
.spalten aside { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 960px) { .spalten { grid-template-columns: 1fr; gap: 48px; } .spalten aside { position: static; } }

/* ---------- Fließtext ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(26px, 3vw, 32px); margin: 56px 0 16px; }
.prose h2:first-child, .prose .rubrik + h2 { margin-top: 0; }
.prose h3 { font-size: 22px; margin: 36px 0 10px; }
.prose ul, .liste { list-style: none; padding: 0; margin: 0 0 1.2em; }
.prose ul li, .liste li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.prose ul li::before, .liste li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 2px; background: var(--ocker); }
.prose address { font-style: normal; }
.prose .hinweis { background: var(--papier); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 20px 24px; margin: 28px 0; }

/* ---------- Infobox / Seitenleiste ---------- */
.infobox { border: 1px solid var(--linie); background: #fff; }
.infobox__kopf { background: var(--kanzleiblau); color: #fff; padding: 24px 28px; }
.infobox__kopf .rubrik { color: var(--ocker-hell); margin-bottom: 6px; }
.infobox__kopf h3 { color: #fff; }
.infobox__inhalt { padding: 24px 28px 28px; }
.infobox dl { margin: 0; }
.infobox dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--steingrau); font-weight: 600; margin-top: 16px; }
.infobox dt:first-child { margin-top: 0; }
.infobox dd { margin: 2px 0 0; }
.infobox dd a { text-decoration: none; }

/* ---------- Zeitleiste (Werdegang) ---------- */
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 111px; top: 8px; bottom: 8px; width: 1px; background: var(--linie); }
.station { display: grid; grid-template-columns: 96px 1fr; gap: 32px; padding: 0 0 36px; position: relative; }
.station::before { content: ""; position: absolute; left: 107px; top: 9px; width: 9px; height: 9px; background: var(--weiss); border: 1px solid var(--kanzleiblau); }
.station--aktuell::before { background: var(--ocker); border-color: var(--ocker); }
.station__zeit { font-family: var(--serif); font-size: 18px; color: var(--ocker-dunkel); text-align: right; line-height: 1.5; font-feature-settings: "lnum"; }
.station__inhalt { padding-left: 8px; }
.station__inhalt h3 { font-size: 22px; margin-bottom: 4px; }
.station__org { font-weight: 600; color: var(--anthrazit); font-size: 16px; }
.station__inhalt ul { list-style: none; margin: 10px 0 0; padding: 0; }
.station__inhalt ul li { font-size: 16px; color: var(--text-gedaempft); padding: 6px 0; border-top: 1px solid #e6e7ea; display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.station__inhalt ul li span { font-size: 14px; color: var(--steingrau); white-space: nowrap; }
.station__inhalt p { color: var(--text-gedaempft); font-size: 16px; margin: 8px 0 0; }
@media (max-width: 640px) {
  .zeitleiste::before { left: 4px; }
  .station { grid-template-columns: 1fr; gap: 4px; padding-left: 32px; }
  .station::before { left: 0; }
  .station__zeit { text-align: left; }
  .station__inhalt { padding-left: 0; }
  .station__inhalt ul li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Steckbrief ---------- */
.steckbrief { border: 1px solid var(--linie); background: #fff; }
.steckbrief__mark { background: var(--kanzleiblau); display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.steckbrief__mark img { width: 160px; height: auto; }
.steckbrief dl { margin: 0; padding: 8px 28px 24px; }
.steckbrief dl div { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.steckbrief dl div:last-child { border-bottom: 0; }
.steckbrief dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--steingrau); font-weight: 600; }
.steckbrief dd { margin: 4px 0 0; color: var(--anthrazit); }

/* ---------- Publikationen ---------- */
.publikationen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.publikationen li { display: grid; grid-template-columns: 96px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--linie); }
.publikationen .jahr { font-family: var(--serif); font-size: 26px; color: var(--ocker-dunkel); line-height: 1.2; }
.publikationen .titel { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--kanzleiblau); display: block; margin-bottom: 6px; }
.publikationen .quelle { color: var(--text-gedaempft); font-size: 16px; }
.publikationen .art { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--steingrau); margin-bottom: 8px; }
@media (max-width: 560px) { .publikationen li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Schwerpunkt-Abschnitte ---------- */
.schwerpunkt { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding: 64px 0; border-top: 1px solid var(--linie); }
.schwerpunkt:first-child { border-top: 0; padding-top: 0; }
.schwerpunkt__nr { font-family: var(--serif); font-size: 88px; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--ocker); }
.schwerpunkt h2 { font-size: clamp(28px, 3.2vw, 36px); margin-bottom: 16px; }
.schwerpunkt__spalten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; margin-top: 8px; }
.schwerpunkt h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ocker-dunkel); margin: 0 0 14px; }
@media (max-width: 860px) {
  .schwerpunkt { grid-template-columns: 1fr; gap: 16px; padding: 48px 0; }
  .schwerpunkt__nr { font-size: 64px; }
  .schwerpunkt__spalten { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Kontakt-Band ---------- */
.kontakt-band { background: var(--kanzleiblau); color: rgba(255,255,255,.86); position: relative; overflow: hidden; }
.kontakt-band h2 { color: #fff; }
.kontakt-band .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.kontakt-band p { color: rgba(255,255,255,.8); }
.kontakt-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.kontakt-liste li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.18); align-items: baseline; }
.kontakt-liste .k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ocker-hell); font-weight: 600; }
.kontakt-liste a, .kontakt-liste .v { color: #fff; text-decoration: none; font-size: 18px; }
.kontakt-liste a:hover { color: var(--ocker-hell); }
.kontakt-liste .gross { font-family: var(--serif); font-size: 26px; }
@media (max-width: 860px) {
  .kontakt-band .container { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 420px) { .kontakt-liste li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Kontaktseite ---------- */
.kontakt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.kontakt-grid .karte { padding: 36px 32px; }
.kontakt-grid .wert { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); color: var(--kanzleiblau); text-decoration: none; line-height: 1.3; word-break: break-word; }
.kontakt-grid a.wert:hover { color: var(--ocker-dunkel); }
@media (max-width: 860px) { .kontakt-grid { grid-template-columns: 1fr; } }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--kanzleiblau-tief); color: rgba(255,255,255,.72); font-size: 15px; padding: 64px 0 32px; }
.site-footer a { color: rgba(255,255,255,.88); text-decoration: none; }
.site-footer a:hover { color: var(--ocker-hell); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-grid img { height: 40px; width: auto; margin-bottom: 20px; }
.footer-titel { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ocker-hell); margin: 4px 0 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid address { font-style: normal; line-height: 1.7; }
.footer-unten { position: relative; border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 14px; color: rgba(255,255,255,.6); }
.footer-unten::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--akzent); height: 2px; background: var(--ocker); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; }
.js .reveal-stagger.is-visible > *:nth-child(n+7) { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hilfsklassen ---------- */
.mt-0 { margin-top: 0; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }
.center { text-align: center; }

/* ---------- Druck ---------- */
@media print {
  .site-header, .nav, .kontakt-band, .hero::before, .hero__paragraf, .page-hero__mark { display: none !important; }
  body { font-size: 11pt; }
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* Feinkorrekturen */
.preis__neben b { white-space: nowrap; }
.karte .rubrik::before { display: none; }
.kontakt-grid .karte .rubrik, .preis .rubrik { margin-bottom: 14px; }