@import url("fonts.css");

/* ══════════════════════════════════════════════════════════════════════
   WFS Steuerberatung — Design-Tokens

   Uebernommen aus dem Claude-Design "WFS Steuerberatung.dc.html".
   Drei Farbwerte weichen bewusst ab, weil die Vorlage dort unter dem
   WCAG-AA-Kontrast lag (gemessen, nicht geschaetzt):

     Eyebrow auf blauer Karte   #004A87 auf #0063B4 = 1.48:1  -> --on-brand-text
     Text/Labels auf Blau       #A8C8E8 auf #0063B4 = 3.51:1  -> --on-brand-text (4.87:1)
     Meta-Grau auf Weiss        #7A8798 auf #FFFFFF = 3.65:1  -> --ink-soft #647285 (4.90:1)

   #A8C8E8 bleibt als --on-brand-dim erhalten, aber nur fuer Dekoratives.
   ══════════════════════════════════════════════════════════════════════ */

/* Grundflaechen warm statt blaugrau: das #F5F8FB der Vorlage liess die
   Seite kuehl wirken. Die Sand- und Papiertoene sind aus dem Hero-Bild
   abgeleitet (dominante Toene dort: #C7B78C, #B4AA8D, #897750), also
   nicht dazuerfunden. Blau bleibt unveraendert Leitfarbe; die gedeckten
   Textfarben sind warm nachgezogen, damit sie nicht gegen das Papier
   arbeiten. Alle Werte nachgerechnet, siehe Kontrasttabelle im README. */
:root {
  --bg: #faf7f2;
  --bg-sunk: #f3ede3;
  --surface: #ffffff;

  --ink: #22303e;
  --ink-muted: #544f47;
  --ink-soft: #726c60;

  --brand: #0063b4;
  --brand-dark: #004a87;

  --on-brand: #faf7f2;
  --on-brand-text: #d6e8fa;
  --on-brand-dim: #a8c8e8;

  /* Blasses Markenblau als Grund der Symbolkacheln — Blau bleibt laut
     Designentscheid die Leitfarbe, auch auf warmem Papier. */
  --brand-tint: #e8f2fb;

  --border: #e9e2d8;
  --border-strong: #cdc2b1;

  --font-display: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-body: "Libre Franklin", "Segoe UI", system-ui, sans-serif;

  --wrap: 1160px;
  --gutter: 32px;
  --radius-card: 18px;
  --radius-block: 20px;
  --radius-pill: 999px;

  /* Schatten mit Versatz und weichem Verlauf — ein Schein ohne Versatz
     waere Dekoration, keine Tiefe. Der Ton ist warm gehalten, damit die
     Karten nicht kalt auf dem Papier liegen. */
  --shadow-image: 0 24px 48px -24px rgba(48, 34, 16, 0.45);
  --shadow-card: 0 2px 4px -2px rgba(64, 48, 26, 0.10),
                 0 10px 24px -14px rgba(64, 48, 26, 0.18);
  --shadow-card-hover: 0 4px 8px -3px rgba(64, 48, 26, 0.12),
                       0 18px 36px -18px rgba(64, 48, 26, 0.24);
  /* Hoehe des GESCHRUMPFTEN Kopfes: 44 Logo + 2x10 Innenabstand + 1px
     Rand. Sprungziele werden immer im gescrollten Zustand angesteuert,
     dort ist der Kopf klein — mit der ungescrollten Hoehe bliebe eine
     Luecke von 36px ueber jedem Abschnitt. */
  --header-h: 73px;
}

/* ── Grundlagen ──────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sprungziele nicht unter den klebenden Header schieben */
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    /* Auch die Verzoegerung, sonst bleibt das Menue-Schubfach nach dem
       Schliessen 320ms sichtbar (die Sichtbarkeit wird verzoegert
       geschaltet, damit sie erst nach dem Hinausfahren greift). */
    transition-delay: 0s !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand); }

img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-card) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── Kopfbereich ─────────────────────────────────────────────────────── */

/* Der Kopf ist fixiert, liegt also nicht im Textfluss — deshalb haelt der
   Innenabstand des body den Platz frei. Der Vorteil: wenn der Kopf beim
   Scrollen schrumpft, wird nur er selbst neu berechnet, nicht das ganze
   Dokument darunter. Genau davor warnte die README, und genau das hatte
   ich mit "transition: padding" zunaechst wieder eingebaut. */
body { padding-top: 101px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Ueber Schleier (55) und Schubfach (60): der Menueknopf bleibt
     bedienbar und dient zugleich als Schliessen-Knopf. */
  z-index: 70;
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo-Wechsel: oben das vollstaendige Logo, nach dem Scrollen nur die
   WFS-Bildmarke. Beide liegen uebereinander, damit beim Wechsel nichts
   springt; die Breite richtet sich nach dem jeweils sichtbaren Bild. */
/* Feste Box, damit der Wechsel die Kopfhoehe nicht veraendert. Beide
   Bilder liegen deckungsgleich darin und werden nur uebergeblendet. */
.logo {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 72px;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo img {
  display: block;
  width: auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo__full { height: 72px; opacity: 1; }
.logo__mark { height: 46px; opacity: 0; pointer-events: none; }

/* Gescrollt: der Kopf zieht sich zusammen und gibt Bildschirm frei.
   Die Bilder liegen absolut, nur .logo und der Innenabstand tragen die
   Hoehe — deshalb genuegen zwei Werte, und die Ueberblendung des Logos
   bleibt davon unberuehrt. Von 101px auf 65px. */
.site-header[data-scrolled="true"] .logo { height: 44px; }
.site-header[data-scrolled="true"] .logo__mark { height: 40px; }

.site-header[data-scrolled="true"] { box-shadow: 0 6px 20px -14px rgba(30, 20, 8, 0.45); }
.site-header[data-scrolled="true"] .logo__full { opacity: 0; }
.site-header[data-scrolled="true"] .logo__mark { opacity: 1; }

/* Ohne JavaScript bleibt das volle Logo stehen — kein leerer Kopf. */
.no-js .logo__mark { display: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}

.nav a { color: var(--ink); }
.nav a:hover { color: var(--brand-dark); }
.nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }

.nav-schleier { display: none; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
}

/* ── Schaltflaechen ──────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }

.btn--ghost { border: 1.5px solid var(--border-strong); color: var(--brand); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-dark); }

.btn--on-brand { background: var(--bg); color: var(--brand); }
.btn--on-brand:hover { background: #fff; color: var(--brand-dark); }

.btn--sm { padding: 12px 26px; font-size: 15px; }

.nav .btn { font-size: 15px; padding: 10px 22px; }
.nav .btn--primary { color: var(--bg); }
.nav .btn--primary:hover { color: #fff; }

/* ── Abschnitte ──────────────────────────────────────────────────────── */

.section { padding: 96px 0; }
.section--tight { padding: 72px 0; }

.section--white {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section__head { max-width: 640px; margin-bottom: 56px; }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-dark);
  font-weight: 600;
  margin-bottom: 14px;
}

.eyebrow--on-brand { color: var(--on-brand-text); }

h1, h2, h3 { font-family: var(--font-display); }

/* Deutsche Komposita ("Rechnungsmerkmale", "Arbeitnehmerveranlagung") sind
   laenger als eine schmale Spalte und brechen von sich aus nicht. Bei 320px
   schob "Rechnungsmerkmale" 287px Text in eine 214px breite Box und die
   ganze Seite waagrecht auf — unter WCAG 1.4.10 (Reflow) ein Verstoss.
   hyphens: auto trennt nach den Regeln von lang="de", break-word faengt
   den Rest. */
h1, h2, h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}

.section__title {
  font-size: 40px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 16px;
  line-height: 1.15;
}

.section__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  text-wrap: pretty;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { padding: 88px 0 80px; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-dark);
  font-weight: 600;
  margin-bottom: 20px;
}

.hero__title {
  font-size: 58px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 24px;
  text-wrap: balance;
}

.hero__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 36px;
  max-width: 540px;
  text-wrap: pretty;
}

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__image {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius-block);
  display: block;
  box-shadow: var(--shadow-image);
}

/* ── Kennzahlenband ──────────────────────────────────────────────────── */

.stats { background: var(--brand); }

.stats__grid {
  padding: 40px var(--gutter);
  display: grid;
  /* Drei Kacheln: die vierte nannte "0 EUR / Erstberatung" und ist
     entfallen, weil das Erstgespraech nicht als kostenlos beworben wird. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--on-brand-text);
  line-height: 1.1;
}

.stat__label { font-size: 14px; color: var(--on-brand-text); margin-top: 4px; }

@media (max-width: 620px) {
  /* Damit "1030" in eine Drittelspalte passt: bei 320px sind das rund
     75px je Kachel, in 36px waere die Zahl allein schon 80px breit. */
  .stat__value { font-size: 26px; }
  /* "Steuerberater" passt bei 320px nicht in eine 80px-Spalte und bricht
     von sich aus nicht — dritte Stelle mit derselben Ursache. */
  .stat__label { font-size: 12.5px; hyphens: auto; overflow-wrap: break-word; }
  .stats__grid { padding: 28px var(--gutter); gap: 12px; }
}

/* ── Leistungskarten ─────────────────────────────────────────────────── */

.cards {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst klemmt die Mindestbreite des laengsten
     deutschen Kompositums je Karte ("Arbeitnehmerveranlagung",
     "Sozialversicherungsrecht") die Spalte fest, und die vier deklariert
     gleichen Spalten rendern ungleich (gemessen: 273/239/259/265px). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Dreispaltige Variante fuer Linkkacheln. Als Klasse statt inline: eine
   inline gesetzte grid-template-columns gewinnt gegen jede Media Query,
   und dann stehen drei Spalten auch noch auf dem Telefon nebeneinander
   (gemessen: 621px Spalten in einem 269px breiten Behaelter). */
.cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--three { margin-top: 8px; }

/* Die Karten lagen als flache Rechtecke auf der Flaeche — das war der
   kaelteste Punkt der Seite. Jetzt heben sie sich mit einem warmen
   Schatten vom Papier ab, sind luftiger gesetzt, und die Punkte haben
   wieder eine Marke, statt als blosse Textzeilen dazustehen. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  /* Spalte, damit die Liste den Rest der Hoehe nimmt und der Kartenboden
     nicht als toter Weissraum stehen bleibt (gemessen waren es bis 93px). */
  display: flex;
  flex-direction: column;
}

/* Das Anheben ist wieder da — und diesmal ehrlich: die Ueberschrift ist
   ein Link auf die Leistungsseite, und ::after zieht dessen Klickflaeche
   ueber die ganze Karte. Vorher hob sich ein <article> ohne jedes Ziel,
   was Klickbarkeit versprach, die es nicht gab. :focus-within spiegelt
   den Zustand, damit er auch mit der Tastatur sichtbar ist. */
/* :has() begrenzt das Anheben auf Karten mit Link. Die vier
   Grundsatz-Karten auf der Kanzleiseite haben keinen — dort waere es
   wieder das falsche Versprechen, das hier schon einmal stand. */
.card:has(.card__title a):hover,
.card:focus-within {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

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

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
.card__title a:focus-visible { outline: none; }

.card:hover .card__title a { color: var(--brand-dark); }

/* 44px-Kachel mit gezeichnetem Symbol, aus der Designvorlage. Einheitliche
   Strichstaerke 1.8 ueber alle vier Symbole. */
.card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 8px;
  text-wrap: balance;
}

/* Uebersetzt die Amtssprache der Kartenueberschrift in die Lage des
   Besuchers — "Rechnungswesen" sagt einem Erstgruender nichts. */
.card__sub {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.card__list {
  margin: 0;
  padding: 18px 0 0;
  flex: 1;
  border-top: 1px solid var(--border);
  list-style: none;
  display: grid;
  gap: 12px;
  align-content: start;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.card__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

/* Winkel statt Punkt: der runde Punkt war das Standard-Aufzaehlungszeichen
   jeder Vorlage. Der Winkel zeigt in eine Richtung — passend zu "auf Kurs".
   Als ::before, damit Screenreader ihn nicht mitlesen. */
.card__list li::before {
  content: "\203A";
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}

/* Die Sektion endete bisher im Nichts: vierzehn Leistungen, kein einziges
   fokussierbares Element, keine Handlung. Wer hier erkennt "das ist mein
   Fall", musste vier Bildschirme weiter scrollen. Das Band schliesst die
   Sektion und traegt das Erstgespraech, das vorher als dritter Punkt in
   der Karte "Privat & Familie" stand — wo jede GmbH-Gruenderin es
   ueberlesen hat. */
.cards__foot {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cards__foot-text {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ── Team ────────────────────────────────────────────────────────────── */

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.team__card {
  display: flex;
  gap: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-block);
  padding: 28px;
}

.team__photo,
.team__initials {
  width: 104px;
  height: 104px;
  border-radius: 16px;
  flex-shrink: 0;
}

.team__photo { object-fit: cover; object-position: center top; }

.team__initials {
  background: var(--brand);
  color: var(--on-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
}

.team__body { min-width: 0; }

.team__name {
  font-size: 22px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 4px;
}

.team__role {
  font-size: 14px;
  color: var(--brand-dark);
  font-weight: 600;
  margin-bottom: 12px;
}

.team__focus {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 12px;
  text-wrap: pretty;
}

.team__mail {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
  /* Freistehendes Ziel, kein Link im Satz — braucht Flaeche zum Tippen. */
  padding: 5px 0;
  min-height: 24px;
}

/* ── Service-Kacheln ─────────────────────────────────────────────────── */

.services { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.service {
  border-radius: var(--radius-block);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service--brand {
  background: var(--brand);
  box-shadow: 0 4px 8px -4px rgba(0, 45, 82, 0.25),
              0 18px 36px -20px rgba(0, 45, 82, 0.45);
}

.service--plain {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.service__title { font-size: 28px; font-weight: 600; margin: 0; }
.service--brand .service__title { color: var(--on-brand); }
.service--plain .service__title { color: var(--brand); }

.service__text { font-size: 15.5px; line-height: 1.6; margin: 0; flex: 1; text-wrap: pretty; }
.service--brand .service__text { color: var(--on-brand-text); }
.service--plain .service__text { color: var(--ink-muted); }

.service .btn { align-self: flex-start; }

/* ── Kontakt ─────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact__title {
  font-size: 32px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 24px;
  line-height: 1.15;
}

.contact__details {
  display: grid;
  gap: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.contact__details strong { color: var(--brand); }

/* Freistehender Link, kein Link im Satz — braucht Flaeche zum Tippen
   (WCAG 2.2, 2.5.8 Zielgroesse: mindestens 24x24 CSS-Pixel). */
.contact__details a {
  display: inline-block;
  padding: 5px 0;
  min-height: 24px;
}
.contact__meta { font-size: 14px; color: var(--ink-soft); }
.contact .btn { margin-top: 32px; }

/* Karte von OpenStreetMap, laedt direkt mit. Kein Google, keine Cookies,
   keine Profilbildung — deshalb braucht es hier auch keinen Vorschalter.
   Siehe datenschutz.html, Abschnitt "Kartendarstellung". */
.map {
  margin: 0;
  border-radius: var(--radius-block);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.map__frame {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

/* Namensnennung ist von der ODbL-Lizenz der Kartendaten verlangt. */
.map__caption {
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
}

.map__caption a {
  display: inline-block;
  padding: 5px 0;
  min-height: 24px;
}

.map__caption a {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ── Fussbereich ─────────────────────────────────────────────────────── */

.site-footer { background: var(--brand); }

.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 32px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__copy { font-size: 14px; color: var(--on-brand-text); }
.site-footer__links { display: flex; gap: 8px 24px; font-size: 14px; flex-wrap: wrap; }
.site-footer__links a {
  color: var(--on-brand-text);
  display: inline-block;
  padding: 6px 0;
  min-height: 24px;
}
.site-footer__links a:hover { color: #fff; text-decoration: underline; }

/* ── Unterseiten ─────────────────────────────────────────────────────── */

.page-hero {
  padding: 64px 0 8px;
}

.page-hero__title {
  font-size: 44px;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 16px;
  line-height: 1.1;
  text-wrap: balance;
}

.page-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-block);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.panel + .panel { margin-top: 24px; }

/* Zweispaltig: die Abschnittsueberschrift steht links, der Fliesstext
   rechts. Vorher lag der auf 560px gedeckelte Text in einem 1096px
   breiten Panel und liess die rechte Haelfte leer. Jetzt traegt die
   Ueberschrift die Breite mit, und der Blick findet den Abschnitt, ohne
   ihn zu lesen. Unter 900px gestapelt. */
.panel--split {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 8px 56px;
  align-items: start;
}

.panel--split .panel__head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  text-wrap: balance;
  /* In der schmalen Spalte am Leerzeichen umbrechen, nicht im Wort:
     die globale Silbentrennung machte aus "Ihre Ansprechpartner"
     ein "Ihre An-sprechpartner". */
  hyphens: manual;
}

.panel--split .prose > *:first-child { margin-top: 0; }

/* Fliesstext fuer Impressum und Datenschutzerklaerung */
.prose { max-width: 76ch; }

/* Der Behaelter nimmt die volle Panelbreite, damit Raster und Kacheln sie
   ausnutzen — der Fliesstext darin bleibt aber auf lesbarem Mass. Vorher
   stand hier ein inline "max-width: none", das beides aufhob: Zeilen von
   ueber 100 Zeichen. */
.prose--wide { max-width: none; }

/* Zeilenlaenge, gemessen statt geschaetzt: die ch-Einheit rechnet hier mit
   dem Anzeigefont Geist und taeuscht deutlich. Gemessen mit Libre Franklin
   16px ergeben 836px (die alten 76ch) 106 Zeichen je Zeile, 748px sind 98.
   560px ergeben 74 und liegen damit im lesbaren Band von 65 bis 75.
   Gilt fuer .prose und .prose--wide, weil beide die Klasse .prose tragen. */
.prose > p,
.prose > ul,
.prose > ol { max-width: 35rem; }

/* Kein toter Weissraum am Panelboden — dieselbe Ursache wie bei den
   Leistungskarten: der Aussenabstand des letzten Elements addiert sich
   auf den Innenabstand des Panels. */
.panel > *:last-child,
.panel .prose > *:last-child { margin-bottom: 0; }

.prose h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.25;
  margin: 48px 0 14px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 10px;
}

.prose p,
.prose li { color: var(--ink-muted); font-size: 16px; line-height: 1.7; }

.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }

.prose dl {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  gap: 8px 24px;
}

.prose dt { font-weight: 600; color: var(--ink); }
.prose dd { margin: 0; color: var(--ink-muted); }

.prose__updated {
  font-size: 14px;
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 40px;
}

.linkout {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  background: var(--bg);
}

.linkout__host { font-size: 13px; color: var(--ink-soft); }

/* Lange Komposita ("Ratenzahlungsrechner") sprengen sonst die schmale
   Kachel — dieselbe Ursache wie bei den Ueberschriften. */
.linkout > * { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* Freistehende E-Mail-Adressen bekommen ein Kuvert davor. Nur
   freistehende — im Fliesstext waere ein Symbol mitten im Satz Stoerung.
   Strichstaerke 1.8 wie bei allen anderen Symbolen der Seite. */
.profil__mail,
.team__mail,
.mail-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* 24px Mindesthoehe nach WCAG 2.5.8 — die Adressen stehen freistehend
     in Karten, nicht im Satz, und zaehlen deshalb als eigenes Tippziel.
     Gemessen waren es vorher 22px. */
  min-height: 24px;
  padding-block: 3px;
}

.mail-icon {
  flex-shrink: 0;
  /* Auf die Grundlinie ziehen: als inline-flex-Kind saesse das Kuvert
     sonst zu hoch neben der Schrift. */
  align-self: baseline;
  transform: translateY(2px);
}

/* Lange Adressen duerfen umbrechen, das Kuvert bleibt daneben stehen. */
.profil__mail span,
.team__mail span,
.mail-link span { overflow-wrap: anywhere; min-width: 0; }

.table-scroll { overflow-x: auto; margin: 0 0 24px; }


/* ── Kanzleiseite ────────────────────────────────────────────────────── */

.kanzlei-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 88px 0 64px;
}

.kanzlei-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}

.kanzlei-hero__title {
  font-size: 54px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 24px;
  text-wrap: balance;
}

.kanzlei-hero__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}

/* Vier Kacheln, die beiden rechten um 28px versetzt — das nimmt dem
   Raster die Strenge, ohne dass die Bilder unterschiedlich gross sind. */
/* minmax(0,...) und min-width: 0 — Rasterelemente haben von Haus aus
   min-width: auto, und bei einem <img> ist das die intrinsische Breite
   von 300px. Ohne das sprengt das Mosaik bei 320px die Seite. */
.mosaik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.mosaik__bild,
.mosaik__initialen {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 16px;
  display: block;
  margin: 0;
}

.mosaik__bild {
  object-fit: cover;
  object-position: center top;
  box-shadow: var(--shadow-card);
}

.mosaik__bild--versetzt { margin-top: 28px; }

.mosaik__initialen {
  background: var(--brand);
  color: var(--on-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
}

/* Ueberschrift bleibt stehen, waehrend die Karten daneben durchlaufen. */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.split__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.split__body { display: grid; gap: 20px; }

.split__title {
  font-size: 36px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 16px;
  line-height: 1.15;
  text-wrap: balance;
}

.pfeil { font-weight: 600; font-size: 15px; }
.pfeil::after { content: " \2192"; }

/* Auf weissem Abschnitt kehrt sich das Verhaeltnis um: die Karten tragen
   den Grundton, nicht der Abschnitt. So wie es die Vorlage vorsieht und
   wie es .team__card auf der Startseite schon macht. */
.section--white .cards .card { background: var(--bg); }

.notiz {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.notiz__titel { font-size: 20px; font-weight: 600; color: var(--brand); margin: 0 0 10px; }
.notiz__text { font-size: 15.5px; line-height: 1.65; color: var(--ink-muted); margin: 0; text-wrap: pretty; }
.notiz__text strong { color: var(--ink); }

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }

.duo__brand,
.duo__plain { border-radius: var(--radius-block); padding: 40px; }

.duo__brand { background: var(--brand); }

.duo__plain {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.duo__title { font-size: 28px; font-weight: 600; margin: 0 0 14px; line-height: 1.2; color: #fff; text-wrap: balance; }
.duo__title--brand { color: var(--brand); }

/* :not(.eyebrow), sonst schlaegt diese Regel (0,1,1) die Eyebrow-Regel
   (0,1,0) und setzt das Label auf 15.5px statt 13px. */
.duo p:not(.eyebrow) { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; text-wrap: pretty; }
.duo__brand p:not(.eyebrow) { color: var(--on-brand-text); }
.duo__brand p:last-child { margin-bottom: 0; }
.duo .eyebrow { margin-bottom: 14px; }
.duo__brand strong { color: #fff; }
.duo__plain p:not(.eyebrow) { color: var(--ink-muted); margin-bottom: 20px; }

.map--eingebettet { flex: 1; box-shadow: none; display: flex; flex-direction: column; }
.map--eingebettet .map__frame { flex: 1; height: auto; min-height: 220px; }

.schluss__inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.schluss__title { font-size: 34px; font-weight: 600; color: var(--brand); margin: 0 0 16px; line-height: 1.15; text-wrap: balance; }
.schluss__lead { font-size: 17px; line-height: 1.65; color: var(--ink-muted); margin: 0 0 32px; text-wrap: pretty; }


/* ── Teamseite ───────────────────────────────────────────────────────── */

.profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.profil {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-block);
  padding: 28px;
  box-shadow: var(--shadow-card);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* 200x250 Hochformat aus einer 300x300-Quelle: seitlich beschnitten, volle
   Hoehe genutzt. Bewusst UNTER der Quellaufloesung — groesser dargestellt
   wuerde hochskaliert, und hochskalierte Portraits sehen billig aus.
   Groessere Dateien waeren der eine echte Gewinn hier. */
.profil__foto {
  width: 200px;
  /* height: auto ist noetig — das height-Attribut im HTML wirkt als
     Praesentationshinweis und schlaegt sonst das aspect-ratio. Ohne das
     wird 200x300 statt 200x250 gerendert. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-card);
  display: block;
  margin: 0;
}

.profil__initialen {
  background: var(--brand);
  color: var(--on-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
}

.profil__body { min-width: 0; }

.profil__name {
  font-size: 22px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 4px;
  line-height: 1.2;
  text-wrap: balance;
  /* Personennamen werden nie getrennt — die globale Silbentrennung fuer
     Ueberschriften machte aus "Oberhuber" ein "Johan-nes Oberhuber". */
  hyphens: manual;
}

.profil__rolle { font-size: 14px; font-weight: 600; color: var(--brand-dark); margin: 0 0 14px; }
.profil__text { font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 16px; text-wrap: pretty; }

/* Fachgebiete als Marken, nicht als Fliesstext: sie sind der Grund, warum
   jemand diese Seite liest, und muessen abtastbar sein. */
.profil__gebiete {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profil__gebiete li {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-muted);
  background: var(--bg-sunk);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
}

.profil__mail { font-size: 14px; font-weight: 600; }

/* Zustaendigkeit: Leistungsbereich links, Berater rechts. Beides verlinkt —
   die Verknuepfung ist der Grund, warum es diesen Abschnitt gibt. */
.zustaendig {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-block);
  overflow: hidden;
}

.zustaendig__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 24px;
}

.zustaendig__zeile + .zustaendig__zeile { border-top: 1px solid var(--border); }

.zustaendig__bereich {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand);
}

.zustaendig__person { margin: 0; font-size: 15px; color: var(--ink-muted); }
.zustaendig__offen { color: var(--ink-soft); }


/* ── Untermenue Leistungen ───────────────────────────────────────────── */

/* Sprachumschalter: kurzes Kuerzel, volle Bezeichnung fuer Screenreader.
   Verweist immer auf DIESELBE Seite in der anderen Sprache, nie auf die
   Startseite — das ist der haeufigste Fehler bei zweisprachigen Seiten. */
.sprache {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.sprache:hover { border-color: var(--brand); color: var(--brand); }

.nav__gruppe { position: relative; }

.nav__unterknopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.nav__unterknopf:hover { color: var(--brand-dark); }
.nav__unterknopf[data-aktiv="true"] { color: var(--brand); font-weight: 600; }

.nav__winkel { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.nav__unterknopf[aria-expanded="true"] .nav__winkel { transform: rotate(180deg); }

.nav__unter {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  display: grid;
  gap: 2px;
  /* Wie beim Schubfach: nicht display:none, sondern hinausbewegt und per
     visibility aus der Tabreihenfolge genommen, damit es sich bewegen kann. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.2s;
  z-index: 5;
}

.nav__unterknopf[aria-expanded="true"] + .nav__unter {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

.nav__unter a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--ink-muted);
}

.nav__unter a:hover { background: var(--bg-sunk); color: var(--brand-dark); }
.nav__unter a[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* Ohne JavaScript klappt nichts auf — dann steht das Untermenue offen im
   Fluss, damit die Seiten erreichbar bleiben. */
.no-js .nav__unter {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  min-width: 0;
}

.no-js .nav__winkel { display: none; }

/* ── Responsiv ───────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__title { font-size: 48px; }
}

@media (max-width: 900px) {
  /* --header-h muss zur tatsaechlichen Kopfhoehe passen, sonst rutschen
     die Sprungziele unter den Kopf: 56px Logo + 2x12px + 1px Rand. */
  /* Mobil bleiben es ebenfalls 65px: nicht das Logo (40px) bestimmt hier
     die Kopfhoehe, sondern der Menueknopf mit 44px — das geforderte
     Tippziel nach WCAG 2.5.8, das nicht kleiner werden darf.
     44 + 2x10 Innenabstand + 1px Rand = 65. */
  :root { --gutter: 24px; --header-h: 69px; }

  .site-header__inner { padding: 12px var(--gutter); }
  body { padding-top: 81px; }
  .logo { width: 110px; height: 56px; }
  .site-header[data-scrolled="true"] .logo { height: 40px; }
  .site-header[data-scrolled="true"] .logo__mark { height: 34px; }
  .logo__full { height: 56px; }
  .logo__mark { height: 36px; }

  .hero { padding: 56px 0 48px; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__image { height: 320px; }
  .hero__lead { max-width: none; }

  .section { padding: 64px 0; }
  .section__head { margin-bottom: 40px; }
  .section__title { font-size: 32px; }

  .team { grid-template-columns: 1fr; }
  /* minmax(0, 1fr) statt 1fr: sonst haelt die Mindestbreite des Inhalts die
     Spalte auf, und die Seite scrollt unter 375px waagrecht (bei 320px
     gemessen: 369px Inhalt in 320px Fenster). */
  .panel--split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kanzlei-hero { padding: 56px 0 48px; }
  .kanzlei-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kanzlei-hero__title { font-size: 38px; }
  .kanzlei-hero__lead { max-width: none; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .profile { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
  .split__title { font-size: 30px; }
  .duo__brand, .duo__plain { padding: 28px; }
  .duo__title { font-size: 24px; }
  .schluss__title { font-size: 27px; }
  .panel--split .panel__head h2 { hyphens: auto; }
  .services { grid-template-columns: minmax(0, 1fr); }
  .service { min-width: 0; }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  /* Drei Kacheln bleiben drei Spalten — bei zwei Spalten stuende die
     dritte allein in einer zweiten Reihe. */
  .stats__grid { gap: 16px; }

  .panel { padding: 28px; }
  .page-hero__title { font-size: 34px; }

  /* Navigation klappt unter den Kopf */
  .nav__toggle { display: inline-flex; }
  .nav-schleier { display: block; }

  /* Schubfach von rechts. Bewusst nicht display:none/flex — das laesst
     sich nicht bewegen. Stattdessen faehrt es per transform hinaus und
     wird per visibility aus der Tabreihenfolge genommen; die Sichtbarkeit
     schaltet verzoegert, damit sie erst nach dem Hinausfahren greift. */
  /* ACHTUNG: .nav liegt im Kopf, und der hat backdrop-filter. Ein Element
     mit backdrop-filter wird zum Bezugsrahmen fuer position:fixed-Kinder —
     top/right/bottom zaehlen also ab dem KOPF, nicht ab dem Fenster. Mit
     "bottom: 0" war das Schubfach deshalb nur kopfhoch. Da der Kopf selbst
     oben und ueber die volle Breite sitzt, stimmen top und right trotzdem;
     die Hoehe muss explizit gesetzt werden. dvh statt vh, damit die
     Adressleiste mobiler Browser nichts abschneidet. */
  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 20px 24px 28px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 40px -24px rgba(48, 34, 16, 0.55);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 60;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.34s;
  }

  .nav[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }

  .nav a { padding: 14px 4px; font-size: 17px; }
  .nav > a + a,
  .nav__gruppe + a { border-top: 1px solid var(--border); }
  .nav .btn { text-align: center; margin-top: 18px; border-top: 0; }

  .sprache {
    margin-top: 14px;
    align-self: flex-start;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 15px;
  }

  /* Im Schubfach klappt das Untermenue im Fluss auf, statt zu schweben. */
  .nav__gruppe { border-bottom: 1px solid var(--border); }

  .nav__unterknopf {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
    font-size: 17px;
    min-height: 44px;
  }

  .nav__unter {
    position: static;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 2px solid var(--border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    height: 0;
    overflow: hidden;
    /* Bewusst OHNE Uebergang auf die Hoehe: "height: auto" laesst sich
       nicht animieren, die Regel waere wirkungslos — und eine Bewegung
       auf einer Layout-Eigenschaft loest ein Neu-Layout aus. Das
       Schubfach faehrt, die Liste darin klappt sofort auf. */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .nav__unterknopf[aria-expanded="true"] + .nav__unter {
    height: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }

  .nav__unter a { font-size: 16px; padding: 11px 8px; min-height: 44px; display: flex; align-items: center; }
  .nav__unter a + a { border-top: 0; }

  /* Schleier: schliesst per Klick und trennt das Schubfach vom Inhalt. */
  .nav-schleier {
    position: fixed;
    inset: 0;
    background: rgba(34, 48, 62, 0.42);
    opacity: 0;
    visibility: hidden;
    z-index: 55;
    transition: opacity 0.34s ease, visibility 0s linear 0.34s;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
  }

  .nav-schleier[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.34s ease, visibility 0s linear 0s;
  }

  /* Ohne JavaScript gibt es kein Schubfach — die Navigation steht dann
     einfach unter dem Kopf, damit die Seite bedienbar bleibt. */
  .no-js .nav {
    position: static;
    width: auto;
    transform: none;
    visibility: visible;
    padding: 12px var(--gutter) 20px;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    overflow: visible;
  }

  .no-js .nav__toggle { display: none; }
  .no-js .site-header__inner { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .hero__title { font-size: 36px; }
  .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .hero__lead { font-size: 17px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cards--three { grid-template-columns: minmax(0, 1fr); }
  .cards__foot { flex-direction: column; align-items: stretch; }
  .team__card { flex-direction: column; gap: 18px; }
  .profil { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
  .profil__foto { width: 160px; }
  .profil__initialen { font-size: 46px; }
  .zustaendig__zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 20px; }
  .service { padding: 28px; }
  .contact__title { font-size: 26px; }
  .btn { width: 100%; text-align: center; }
  .nav .btn { width: auto; }
  .prose dl { grid-template-columns: 1fr; gap: 2px 0; }
  .prose dd { margin-bottom: 12px; }
}

@media print {
  .site-header, .site-footer__links, .map__consent, .nav { display: none; }
  body { background: #fff; }
  .panel { border: 0; padding: 0; }
}

/* Nur fuer Screenreader — z. B. der Hinweis "oeffnet in neuem Tab" */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Links im Fliesstext brauchen mehr als die Farbe, um erkennbar zu sein
   (WCAG 1.4.1). Das globale text-decoration:none aus der Vorlage gilt
   deshalb nur fuer Navigation, Schaltflaechen und freistehende Links. */
.prose p a:not(.btn),
.prose li a:not(.btn),
.prose dd a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.prose p a:not(.btn):hover,
.prose li a:not(.btn):hover,
.prose dd a:not(.btn):hover {
  text-decoration-thickness: 2px;
}