/* ============================================================
   Steuerkanzlei Orthuber – Nachbau (statisches HTML/CSS)
   Design-Tokens aus dem Squarespace-Original extrahiert
   ============================================================ */

/* Selbst gehostete Schriften (DSGVO – keine Google-Server) */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2');
}
:root {
  --green:        #4e594b;   /* Überschriften-Grün */
  --green-dark:   #3e4a3b;   /* Buttons (Senden, Zum Login) */
  --green-logo:   #4a5647;   /* Logo / Wortmarke */
  --text:         #1f1f1f;
  --muted:        #3c3c3c;
  /* Warme Neutraltöne statt kaltem Standard-Grau (Premium-Wirkung).
     Bewusst hell gehalten – die Glas-Anmutung entsteht zusammen mit dem
     Lichtverlauf und dem hellen Rand in der Sammelregel am Dateiende. */
  --card-bg:      #f5f4ee;
  --footer-bg:    #f4f3ef;
  /* Einheitliche Easing-Kurve für alle Bewegungen */
  --ease:         cubic-bezier(.22, 1, .36, 1);
  /* Etwas weicheres Ausschwingen für die einmalige Hero-Choreografie.
     War vorher fünfmal handgetippt – als Token bleibt der Unterschied
     zu --ease eine bewusste Entscheidung statt eines Zufalls. */
  --ease-hero:    cubic-bezier(.16, 1, .3, 1);
  --line:         #1f1f1f;
  --radius:       18px;   /* Karten, Kacheln, Medien (Apple-artige Rundungen) */
  --radius-sm:    14px;
  --radius-pill:  24px;
  --maxw:         1490px;
  --pad-x:        clamp(20px, 6vw, 92px);
  /* Einheitlicher Sektionsrhythmus (Paket B) */
  /* Sektionsabstand. Vorher clamp(64px, 7.5vw, 112px) – gemessen ergaben sich
     dadurch zusammen mit Element-Margins Leerläufe von 180–250px und in Summe
     42,8 % leere Seitenhöhe. Ruhig bleibt die Seite auch mit deutlich weniger. */
  --sect:         clamp(44px, 5vw, 76px);
  /* Abstandsskala: Alle vertikalen Abstände greifen auf diese vier Stufen
     zurück (plus --sect zwischen Sektionen). Vorher standen an denselben
     Stellen 16/18/20/22/24/28/40/44/49/52/56/64/70/80/97/100 px – ohne
     erkennbares System. Wer einen Abstand braucht, nimmt eine dieser Stufen. */
  --sp-xs:        12px;   /* innerhalb einer Gruppe (Label zu Wert) */
  --sp-s:         20px;   /* Zwischenzeile zu Überschrift, Titel zu Text */
  --sp-m:         32px;   /* Text zu Bedienelement, Gruppe zu Gruppe */
  --sp-l:         48px;   /* Block zu Block innerhalb einer Sektion */
  /* Feiner Lichtverlauf für alle dunkelgrünen Flächen (moderne Tiefe) */
  --green-sheen:  linear-gradient(140deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .14) 100%);
  /* Einheitliche Hero-Höhe (Paket C) */
  --hero-h:       clamp(360px, 44vw, 520px);
  /* Lesebreite für Fließtext (Paket A) */
  --measure:      860px;

  /* ---- Fehlerfarbe ----
     Ein Fehlerhinweis mit grünem Balken widerspricht der Erwartung. Der Ton
     ist bewusst gedeckt, damit er neben dem Kanzleigrün nicht schreit, und
     erreicht auf --danger-bg 7,3:1 – deutlich über der AA-Schwelle. */
  --danger:       #8c2f22;
  --danger-bg:    #f7efec;

  /* ---- Bewegung ----
     Dauer und Distanz als Token: Bisher standen die Werte an über hundert
     Stellen einzeln im Stylesheet, wodurch sich Abweichungen einschlichen
     (700ms neben 200ms für dieselbe Art Interaktion). */
  --dur-fast:     .18s;   /* Farb- und Zustandswechsel an Bedienelementen */
  --dur-base:     .3s;    /* Standard für Hover und kleine Verschiebungen */
  --dur-slow:     .6s;    /* Eintritts-Animationen ganzer Abschnitte */
  --lift:         3px;    /* Anhebung bei Hover auf Karten und Kacheln */

  /* ---- Ebenen ----
     Feste Leiter statt gewachsener Einzelwerte. Klar getrennt, damit ein
     neues Overlay nicht raten muss, ob es über oder unter dem Header liegt. */
  --z-base:       1;
  --z-sticky:     40;
  --z-header:     50;
  --z-overlay:    60;
}

/* Bewegungsempfindliche Nutzer: Dauern zentral auf nahezu null. Wirkt auf
   jede Regel, die die Token nutzt – ohne dass jede einzeln entschärft werden
   muss. Die bestehenden Abschaltungen einzelner Choreografien bleiben
   zusätzlich bestehen. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur-base: .01ms;
    --dur-slow: .01ms;
    --lift:     0px;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* Lenis übernimmt das Scrollen und setzt dabei selbst Klassen auf <html>.
   Natives scroll-behavior muss weichen, sonst kämpfen zwei Mechanismen um
   dieselbe Scrollposition und es ruckelt.

   Die Regel muss auf .lenis zielen, nicht nur auf .lenis-smooth: Lenis 1.1.x
   setzt lediglich die Basisklasse. Auf .lenis-smooth allein gezielt greift der
   Override nicht. Beide abzudecken kostet nichts. */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis-stopped { overflow: hidden; }

/* Seitenübergänge sind weiter unten gebündelt definiert (eine Stelle,
   eine Wahrheit). Hier stand früher eine zweite @view-transition-Regel –
   zwei konkurrierende Deklarationen derselben At-Regel. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

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

/* Skip-Link: erst bei Tastatur-Fokus sichtbar (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green-dark); color: #fff;
  padding: 12px 22px; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Ruhige, konsistente Übergänge */
a, .btn, .accordion summary, .tile, .dropdown a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease, opacity .18s ease;
}

/* ---------- Premium Motion System ---------- */
/* Scroll-Reveal: Elemente treten ruhig ins Bild (JS setzt .reveal/.visible) */
.reveal { opacity: 0; transform: translateY(12px) scale(.992); transition: opacity .6s var(--ease), transform .65s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
/* ---------- Scrollgebundene Reveals (nativ, ohne Bibliothek) ----------
   Statt eines binären Auslösers (Observer setzt .visible, Transition läuft ab)
   hängt die Bewegung hier direkt am Scrollfortschritt: Das Element bewegt sich
   mit dem Rad, nicht nach ihm. Das ist der Unterschied, der Seiten wie
   scale.com „schwer" wirken lässt – dort über die Bibliothek Lenis erkauft,
   hier nativ vom Browser gerechnet und damit außerhalb des Main Threads.

   Bewusst als Positivliste, nicht als Ausschlussliste: Umgestellt werden nur
   Elemente, deren Reveal ausschließlich opacity und transform fährt. Eine
   Ausschlussliste würde bei jedem neuen Spezialfall stillschweigend brechen.
   Unangetastet bleiben damit .sec-rule (scaleX), .quote-band--img (clip-path),
   .footer-top (::before), .branch (clip-path am Kind-Bild), .svc-rows .card
   (h3::before) und .accordion details (eigene Kurve).

   @supports sorgt dafür, dass ältere Browser unverändert das bisherige
   Observer-System nutzen. Kein Fallback nötig, kein Bruch. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile.reveal,
    .trio > div.reveal,
    .fact.reveal,
    .dl-item.reveal,
    .feat.reveal,
    .fokus-card.reveal,
    .step-green.reveal,
    .art-link.reveal {
      opacity: 1;
      animation: revealScroll linear both;
      animation-timeline: view();
      /* Der Bereich bestimmt, über welchen Scrollweg die Bewegung läuft –
         er verlängert die Seite NICHT, sondern verteilt dieselbe Animation
         auf mehr Weg. Vorher "entry 6% cover 25%": Das war so kurz, dass man
         die Bewegung beim normalen Scrollen überholt hat. Jetzt beginnt sie,
         sobald das Element den unteren Rand berührt, und ist erst nach der
         halben Viewporthöhe fertig. */
      animation-range: entry 0% cover 50%;
    }
  }
  @keyframes revealScroll {
    from { opacity: 0; transform: translateY(20px) scale(.992); }
    to   { opacity: 1; transform: none; }
  }
}

/* Fotos setzen sich beim Eintreten sanft ab (leichtes Heraus-Zoomen) */

/* Karten & Kacheln: dezenter Lift */
.card, .tile, .card--login {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .18s ease, filter .18s ease;
}
.card:hover, .card--login:hover { transform: translateY(-4px) scale(1.006); box-shadow: 0 2px 6px rgba(38, 46, 32, .04), 0 18px 44px rgba(38, 46, 32, .09); }
.tile:hover { transform: translateY(-4px) scale(1.006); box-shadow: 0 2px 6px rgba(35, 42, 33, .06), 0 18px 40px rgba(73, 89, 69, .14); filter: none; }

/* Branchen-Karten: ruhiger Bild-Zoom */
/* Hover ist eine Hochfrequenz-Interaktion: 700ms fühlen sich hier zäh an,
   weil der Zeiger längst weitergewandert ist, bevor die Bewegung steht. */

/* Buttons: präziser Mikro-Lift mit weichem Schatten */
.btn { transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s var(--ease), box-shadow .22s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(72, 86, 68, .22); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: none; }
/* Druck-Feedback: jede drückbare Fläche antwortet spürbar auf den Klick */
.tile:active, .lf-card:active, .card--login:active, .filter-chip:active,
.hero-side-links a:active, .dropdown a:active {
  transform: scale(0.97); transition-duration: .12s;
}
.accordion summary:active, .lf-det summary:active, .svc-det summary:active,
.cal-wrap > summary:active, .nl-det summary:active {
  transform: scale(0.99);
}

/* Akkordeon: Inhalt gleitet weich auf (moderne Browser, progressive enhancement) */
details { interpolate-size: allow-keywords; }
details::details-content {
  opacity: 0; block-size: 0; overflow-y: clip;
  transition: content-visibility .38s allow-discrete, opacity .38s var(--ease), block-size .38s var(--ease);
}
details[open]::details-content {
  opacity: 1; block-size: auto;
  /* Aufklappen ruhig, Zuklappen flott (asymmetrisches Timing) */
  transition: content-visibility .65s allow-discrete, opacity .65s var(--ease), block-size .65s var(--ease);
}

/* Sichtbarer Tastatur-Fokus (WCAG 2.2) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Bewegung reduzieren, wenn gewünscht.
   Wichtig: "reduced motion" heißt weniger und sanftere Bewegung, nicht gar keine.
   Ein pauschales transition:none nimmt auch Fokus-, Farb- und Druck-Feedback weg –
   also genau die Rückmeldungen, auf die Nutzer mit Bewegungsempfindlichkeit
   angewiesen sind. Deshalb: Keyframes aus, Ortsveränderung aus,
   Opacity/Farbe/Schatten bleiben. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* Nur nicht-bewegende Eigenschaften dürfen weiter überblenden.
       visibility muss mit, sonst klappen die Dropdowns sofort weg. */
    transition-property: opacity, color, background-color, border-color,
                         box-shadow, fill, stroke, visibility !important;
    transition-duration: .18s !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

::selection { background: var(--green); color: #fff; }

body {
  overflow-x: clip; /* verhindert Scrollbalken durch vollbreiten Hero */
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--text);
  background: #fff;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

/* ---------- Header / Navigation – schwebende Pille (PSP/Apple-Anmutung) ---------- */
.site-header {
  /* Bündig an der Oberkante: das Menüband liegt als vollbreite Leiste
     direkt am Seitenrand – kein schwebender Versatz mehr. */
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  padding: 0;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* Blur ist der teuerste Posten beim Scrollen (Backdrop wird jeden Frame neu
     gerechnet). 10px + mehr Deckkraft sehen praktisch gleich aus, kosten aber
     auf schwächerer Hardware deutlich weniger. */
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px) saturate(1.4);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  /* Vollbreites Band ohne Radius – bündig mit den Bildschirmkanten */
  max-width: none; width: 100%;
  border-radius: 0;
  padding: 15px clamp(20px, 2.6vw, 44px);
  box-shadow: 0 1px 0 rgba(38, 46, 32, .05), 0 10px 34px rgba(38, 46, 32, .07);
  transition: box-shadow .3s var(--ease), background-color .3s ease;
}
/* Moderne Tiefe: feiner Lichtverlauf auf allen dunkelgrünen Kacheln */
.dl-panel, .step-green, .lf-card, .trio--dark > div,
.cal-wrap > summary, .quote-band:not(.quote-band--img) {
  background-image: var(--green-sheen);
}

/* Signatur-Schlussakkord: die grüne Linie zeichnet sich über dem Footer-Statement */
.footer-top { position: relative; }
.footer-top::before {
  content: ""; position: absolute; top: -26px; left: 0;
  width: 64px; height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--ease) .1s;
}
.footer-top.reveal { opacity: 1; transform: none; }
.footer-top.reveal.visible::before, .footer-top:not(.reveal)::before { transform: scaleX(1); }
/* Beim Scrollen verdichtet sich die Leiste: satter, klarer abgesetzt */
.site-header.scrolled .container {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(38, 46, 32, .06), 0 18px 48px rgba(38, 46, 32, .12);
}
.site-header.scrolled .container {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(38, 46, 32, .07), 0 16px 44px rgba(38, 46, 32, .11);
}
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.logo-name {
  font-size: 23px; font-weight: 300;
  text-transform: uppercase; letter-spacing: .163em;
  color: #1f1f1f;
}
.logo-name .logo-o { font-weight: 500; color: #3e4a3b; position: relative; display: inline-block; line-height: 1; }
/* Das getragene O: der Fundamentstrich aus der Bildmarke unterstreicht das
   O des Namenszugs – Salbei-Akzent, funktioniert auf Hell wie Dunkel und
   skaliert in em mit jeder Logogröße. line-height:1 normiert die Box des O;
   nur so sitzt der Strich in Kopf, Fuß, Menü und Vorhang gleich dicht unter
   der Glyphe (sonst wandert er mit dem Zeilenabstand des Umfelds). */
.logo-name .logo-o::after {
  content: ""; position: absolute;
  left: 0.03em; width: 0.72em; height: 0.085em;
  bottom: -0.06em; border-radius: 0.05em;
  background: #a9b7a1;
}
/* Mikro-Interaktion: Beim Überfahren des Logos wischt der Fundamentstrich
   einmal durch – zieht nach rechts aus und baut sich von links neu auf. */
@media (prefers-reduced-motion: no-preference) {
  .logo:hover .logo-o::after, .footer-name:hover .logo-o::after {
    animation: strichWisch .55s var(--ease);
  }
}
@keyframes strichWisch {
  0%   { transform: scaleX(1); transform-origin: right center; }
  45%  { transform: scaleX(0); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
.logo-rule { width: 1px; height: 27px; background: #1f1f1f; }
.logo-sub {
  font-size: 8.5px; font-weight: 300;
  text-transform: uppercase; letter-spacing: .3em;
  color: #1f1f1f; line-height: 1.8;
  text-align: right;
}
/* Marken-Lockup unter dem Startseiten-Hero */
.brand-band {
  display: flex; justify-content: center;
  padding: clamp(4px, .6vw, 10px) 24px clamp(36px, 4vw, 64px);
}
.brand-lockup { display: inline-flex; align-items: center; gap: clamp(20px, 2.5vw, 32px); }
.brand-lockup .logo-sub { font-size: clamp(13px, 1.55vw, 18px); }
.brand-lockup .logo-rule { height: clamp(48px, 5.2vw, 70px); }
.brand-lockup .logo-name { font-size: clamp(40px, 4.8vw, 64px); }
/* Abstand atmet mit der Fensterbreite – seit dem Sprachumschalter ist die
   Zeile voller; nowrap verhindert, dass Menüpunkte intern umbrechen. */
.main-nav { display: flex; gap: clamp(16px, 2.2vw, 36px); align-items: center; }
.main-nav a { white-space: nowrap; }
/* Zwischenbereich bis zum Burger (980px): Zeile kompakter stellen,
   damit alle acht Punkte sicher in eine Reihe passen. */
@media (min-width: 981px) and (max-width: 1120px) {
  .main-nav { gap: 13px; }
  .main-nav > .nav-item > a { font-size: 10.5px; letter-spacing: .04em; }
  .btn--nav { padding: 8px 13px !important; }
  .main-nav .lang-toggle { padding: 2px !important; font-size: 9px !important; }
  .main-nav .lt-seg { padding: 4px 6px; }
}
.main-nav > .nav-item { position: relative; }
.main-nav a {
  color: var(--text); text-decoration: none;
  font-size: 13px; letter-spacing: .2px;
  padding-bottom: 3px;
  position: relative;
}
/* Animierte Unterstreichung – nur Hauptnavigation, wächst von links */
.main-nav > .nav-item > a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav > .nav-item > a:hover::after,
.main-nav > .nav-item > a.active::after { transform: scaleX(1); }
/* Dropdown-Einträge: ruhiger Farbwechsel statt Linie */
.dropdown a:hover { color: var(--green); }
/* Dropdown (Expertise / Services / Digitale Kanzlei / Journal) –
   klappt mit leichter 3D-Neigung auf, Einträge treten gestaffelt ein */
.dropdown {
  position: absolute; top: 100%; right: 0;
  background: #fff; padding: 16px 20px 14px; min-width: 280px; text-align: right;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 48px rgba(38, 46, 32, .12);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: perspective(700px) rotateX(-7deg) translateY(10px);
  transform-origin: top right;
  pointer-events: none;
  /* Abgang schnell (Basis-Transition), Auftritt etwas ruhiger (Hover-Regel) –
     asymmetrisches Timing nach Emil-Standard */
  transition: opacity .14s var(--ease), transform .18s var(--ease), visibility 0s linear .14s;
}
/* grüne Linie zieht sich oben über das Panel */
.dropdown::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(73, 89, 69, 0), var(--green) 45%, var(--green-dark));
  transform: scaleX(0); transform-origin: right center;
  transition: transform .3s var(--ease) .04s;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { /* auch per Tastatur erreichbar */
  opacity: 1; visibility: visible;
  transform: perspective(700px) rotateX(0) translateY(0);
  pointer-events: auto;
  transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s;
}
.nav-item:hover .dropdown::before,
.nav-item:focus-within .dropdown::before { transform: scaleX(1); }
.dropdown a {
  display: block; font-size: 12.5px; padding: 6px 2px; white-space: nowrap;
  opacity: 0; transform: translateX(14px);
  transition: opacity .12s var(--ease), transform .14s var(--ease), color .2s ease;
}
.nav-item:hover .dropdown a,
.nav-item:focus-within .dropdown a {
  opacity: 1; transform: none;
  transition: opacity .2s var(--ease), transform .24s var(--ease), color .2s ease;
}
.nav-item:hover .dropdown a:nth-child(1), .nav-item:focus-within .dropdown a:nth-child(1) { transition-delay: .03s; }
.nav-item:hover .dropdown a:nth-child(2), .nav-item:focus-within .dropdown a:nth-child(2) { transition-delay: .07s; }
.nav-item:hover .dropdown a:nth-child(3), .nav-item:focus-within .dropdown a:nth-child(3) { transition-delay: .11s; }
.nav-item:hover .dropdown a:nth-child(4), .nav-item:focus-within .dropdown a:nth-child(4) { transition-delay: .15s; }
.nav-item:hover .dropdown a:nth-child(5), .nav-item:focus-within .dropdown a:nth-child(5) { transition-delay: .19s; }
@media (prefers-reduced-motion: reduce) {
  .dropdown { transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  .dropdown a { opacity: 1; transform: none; transition: color .2s ease; }
  .dropdown::before { transform: scaleX(1); transition: none; }
}
.nav-toggle { display: none; }

/* ---------- Schnellmenü: Burger + Overlay ---------- */
.quick-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 40px; padding: 0 8px; flex-shrink: 0;
  background: none; border: 0; cursor: pointer;
}
.quick-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform .32s var(--ease), opacity .2s ease;
}
.quick-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.quick-toggle.active span:nth-child(2) { opacity: 0; }
.quick-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.quick-menu {
  position: fixed; z-index: 60;
  top: 92px; left: 50%;
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: 0 40px 120px rgba(38, 46, 32, .26);
  padding: clamp(48px, 5vw, 76px) clamp(36px, 5vw, 84px) clamp(32px, 4vw, 52px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -18px) scale(.985);
  /* Abgang schnell, Auftritt ruhig (asymmetrisches Timing) */
  transition: opacity .2s var(--ease), transform .24s var(--ease), visibility 0s linear .2s;
}
.quick-menu.open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity .38s var(--ease), transform .42s var(--ease), visibility 0s;
}
.quick-menu .container { max-width: none; padding: 0; }
.quick-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.quick-title {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .22em; font-weight: 600;
  color: var(--green); margin-bottom: 22px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.quick-menu.open .quick-title { opacity: 1; transition-delay: .05s; }
.quick-menu a {
  display: block; width: fit-content;
  color: var(--text); text-decoration: none;
  font-size: clamp(18px, 1.7vw, 25px); font-weight: 400;
  padding: 8px 0;
  opacity: 0; transform: translateY(16px);
  transition: color .18s ease, opacity .5s var(--ease), transform .5s var(--ease);
}
.quick-menu a:hover { color: var(--green); transform: translateX(5px); }
/* Kaskadierende Einblendung: Zeile für Zeile über alle Spalten */
.quick-menu.open a { opacity: 1; transform: none; }
.quick-menu.open .quick-cols a:nth-of-type(1) { transition-delay: .08s; }
.quick-menu.open .quick-cols a:nth-of-type(2) { transition-delay: .14s; }
.quick-menu.open .quick-cols a:nth-of-type(3) { transition-delay: .2s; }
.quick-menu.open .quick-cols a:nth-of-type(4) { transition-delay: .26s; }
.quick-menu.open .quick-cols a:nth-of-type(5) { transition-delay: .32s; }
.quick-menu.open .quick-cols a:nth-of-type(6) { transition-delay: .38s; }
/* Fünfspaltige Fassung mit Unterpunkten von Digitale Kanzlei und Journal */
.quick-cols--5 { grid-template-columns: repeat(5, auto); gap: clamp(28px, 3.2vw, 52px); justify-content: space-between; }
.quick-cols--5 a { font-size: clamp(15px, 1.25vw, 19px); padding: 6px 0; }
@media (max-width: 1150px) { .quick-cols--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: start; } }
@media (max-width: 760px) { .quick-cols--5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px) { .quick-cols--5 { grid-template-columns: minmax(0, 1fr); } }
/* Kontaktzeile im Menü: Telefon als Anker, fein gegliedert */
.quick-contact {
  margin-top: 52px; padding-top: 30px; border-top: 1px solid rgba(31,31,31,.12);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.quick-menu.open .quick-contact { opacity: 1; transform: none; transition-delay: .4s; }
.quick-contact .quick-title { margin-bottom: 14px; }
.quick-contact-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 44px; }
/* Kontaktdaten untereinander: Telefon groß, darunter Mail und Anschrift */
.quick-kontakt-stapel { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.quick-menu a.quick-phone { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; color: var(--text); padding: 0; }
.quick-menu a.quick-phone:hover { color: var(--green); transform: none; }
.quick-menu a.quick-mail { font-size: 15px; color: var(--text); padding: 0; }
.quick-menu a.quick-mail:hover { transform: none; }
.quick-addr { font-size: 13px; color: var(--muted); }
/* Sprachumschalter im Menüband: Pill mit gleitendem Daumen.
   Der Daumen liegt auf der aktiven Sprache und gleitet beim Zeigen
   auf das Ziel – die Bewegung selbst erklärt, was der Klick tut. */
.main-nav .lang-toggle {
  display: inline-flex; align-items: center;
  position: relative; isolation: isolate;
  border: 1px solid #d9d7cd; border-radius: 999px;
  padding: 3px !important;
  font-size: 9.5px !important; font-weight: 600; letter-spacing: .12em;
  color: var(--muted) !important;
  transition: border-color .25s ease;
}
.main-nav .lang-toggle::before {
  content: ""; position: absolute; z-index: -1;
  top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: var(--green);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.lt-seg { padding: 4px 8px; border-radius: 999px; transition: color .3s ease; }
.lang-toggle--de::before { transform: translateX(0); }
.lang-toggle--de:hover::before { transform: translateX(100%); }
.lang-toggle--en::before { transform: translateX(100%); }
.lang-toggle--en:hover::before { transform: translateX(0); }
.lang-toggle--de .lt-seg:first-child, .lang-toggle--en .lt-seg:last-child { color: #fff; }
.lang-toggle--de:hover .lt-seg:first-child, .lang-toggle--en:hover .lt-seg:last-child { color: var(--muted); }
.lang-toggle--de:hover .lt-seg:last-child, .lang-toggle--en:hover .lt-seg:first-child { color: #fff; }
.main-nav .lang-toggle:hover { border-color: var(--green); }
.main-nav > .nav-item > .lang-toggle::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .main-nav .lang-toggle::before, .lt-seg { transition: none; }
}

/* Kontakt-Button im Header */
.btn--nav {
  padding: 10px 20px !important; font-size: 10.5px !important;
  background: var(--green-dark) !important;
  border: 1px solid var(--green-dark) !important;
}
.main-nav a.btn--nav { color: #fff; } /* Nav-Linkfarbe übersteuert sonst die Button-Schrift */
.main-nav a.btn--nav:hover { color: #fff; background: var(--green) !important; border-color: var(--green) !important; }
.main-nav > .nav-item > .btn--nav::after { display: none; }

.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* ---------- Typografie / Sektionen ---------- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Journal-Sektionstitel: gleiche Display-Stimme wie sec-title */
.section-title {
  color: var(--text);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500; line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}

.page-title {
  color: var(--text);
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 600; line-height: 1.04;
  letter-spacing: -0.03em;
  margin: var(--sp-s) 0 var(--sp-s);
}
.page-title--center { text-align: center; }
/* Zweite Stufe für Seiten mit langen Titeln oder nachrangiger Rolle
   (Kontakt, Journal, Rechtstexte, Danke, 404). Vorher standen dort drei
   verschiedene Größen nebeneinander – jetzt gibt es genau zwei. */
.page-title--klein { font-size: clamp(34px, 3.6vw, 52px); }
.page-intro { font-size: 16.5px; line-height: 1.8; color: var(--muted); max-width: var(--measure); margin-bottom: var(--sp-l); }


/* ---------- Akkordeon ---------- */
/* Gruppen-Label über Akkordeon-Blöcken (z.B. DATEV-Hilfen) */
.acc-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .22em; font-weight: 600;
  color: var(--green); margin: 52px 0 10px;
}
.accordion { margin: 30px 0 60px; }
/* Leistungsbereiche als aufklappbare Kacheln */
.accordion details {
  background: var(--card-bg);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: clip;
  transition: background-color .25s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.accordion details:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(38, 46, 32, .07);
}
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 18px;
  padding: 26px 30px;
  color: var(--text); font-size: clamp(19px, 1.8vw, 23px); font-weight: 400;
  user-select: none;
  transition: background-color .25s ease;
}
.accordion summary:hover { background: #edebe3; }
.accordion summary:hover { color: var(--green-dark); }
.accordion summary::-webkit-details-marker { display: none; }
/* Plus im Kreis – öffnet sich mit Drehung und füllt sich grün */
.accordion summary::after {
  content: "+";
  width: 42px; height: 42px; flex-shrink: 0; margin-left: auto;
  display: grid; place-items: center;
  border: 1.5px solid #d9d7cd; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--text); font-weight: 300;
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.accordion summary:hover::after { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.accordion details[open] summary::after {
  transform: rotate(45deg);
  background: var(--green-dark); border-color: var(--green-dark); color: #fff;
}
.accordion .acc-body { padding: 2px 30px 34px; }
.accordion .acc-body p { margin-bottom: 18px; font-size: 16px; max-width: var(--measure); }
.accordion .acc-body p:last-child { margin-bottom: 0; }
.accordion .acc-body ul, .accordion .acc-body ol { margin: 0 0 18px 22px; max-width: var(--measure); }
.accordion .acc-body li { margin-bottom: 8px; }
.accordion .acc-body .indent { margin-left: clamp(0px, 12vw, 200px); }
.accordion .small p, .accordion .small li { font-size: 14px; line-height: 1.75; }

/* ---------- Leistungs-Karten ---------- */
.cards { display: grid; gap: 28px; margin: 40px 0 var(--sect); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Hinweis: Für .cards und .trio wurde subgrid erprobt und wieder entfernt.
   In beiden Fällen deckelte die Rasterzeile die Höhe des Textabsatzes, der
   dann in den folgenden Inhalt lief. Ein bündiger Start ist diesen Fehler
   nicht wert – nur .lf-grid nutzt subgrid, dort ist es verifiziert. */

/* Prinzipien (Über uns): redaktionelle Nummernliste statt vier gleicher Kartenboxen */
.principles {
  list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(48px, 6vw, 96px);
  margin: 48px 0 var(--sect);
}
.principles li { border-top: 1px solid rgba(31, 31, 31, .16); padding-top: 22px; }
/* Kurze grüne Marke statt Nummerierung – gleiche Handschrift wie .trio--left */
.principles li::before {
  content: ""; display: block; width: 28px; height: 2px;
  background: var(--green); margin-bottom: 16px;
}
.principles h3 { font-size: 17px; font-weight: 500; color: var(--text); margin-bottom: 12px; line-height: 1.4; }
.principles p { font-size: 14.5px; line-height: 1.75; color: var(--muted); max-width: 46ch; }
@media (max-width: 700px) {
  .principles { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.card { background: var(--card-bg); padding: 36px 30px 42px; border-radius: var(--radius); }
.card:not(.card--login)::before { content: ""; display: block; width: 28px; height: 2px; background: var(--green); margin-bottom: 20px; }
.card h3 { color: var(--text); font-size: 16.5px; font-weight: 500; margin-bottom: 18px; line-height: 1.4; }
.card p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-bottom: 12px; }
.card strong { color: var(--text); }
.card ul { list-style: none; margin: 10px 0 0; }
.card li {
  font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 8px;
  position: relative; padding-left: 18px;
}
.card li::before { content: "–"; position: absolute; left: 0; color: var(--green); }

/* DATEV Login-Karten */
.card--login {
  text-align: center; padding: 46px 34px 42px;
  /* Flex-Spalte: der Login-Knopf sitzt immer unten bündig, egal wie
     lang der Beschreibungstext der jeweiligen Karte ist */
  display: flex; flex-direction: column;
}
.card--login .btn { margin-top: auto; align-self: center; }
.card--login h2, .card--login h3 { color: var(--text); font-size: 24px; font-weight: 400; margin-bottom: 16px; }
.card--login p { font-size: 13px; margin-bottom: 26px; }
.login-kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: .22em; font-weight: 600;
  color: var(--green); margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--green-dark); color: #fff;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 500;
  padding: 14px 34px; border-radius: var(--radius-pill);
  text-decoration: none;
}
.btn:hover { background: #16290f; }
.btn--outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--text); border-radius: var(--radius-pill);
  padding: 12px 26px;
}
.btn--outline:hover { background: var(--text); color: #fff; }

/* ---------- Zwei-Spalten-Layout (Überschrift links / Inhalt rechts) ---------- */
.split { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 60px; margin: var(--sect) auto; }
.split h2 { color: var(--text); font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.3; }
.split h2.split--green { color: var(--green); }

/* ---------- Kontakt-Sektion ---------- */
/* Kontakt als warmes, gerundetes Panel (schwebend statt Vollbreite-Band) */
.contact-section {
  display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 60px;
  margin: var(--sect) auto calc(var(--sect) * .5);
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  padding: clamp(48px, 5.5vw, 80px) clamp(28px, 4vw, 72px) !important;
  background: var(--card-bg);
  border-radius: calc(var(--radius) + 10px);
  transition: background-color .4s ease, box-shadow .4s var(--ease);
}
.contact-section:not(:has(.form)):hover,
.site-footer:hover {
  background-color: #f2f1ed;
  box-shadow: 0 18px 44px rgba(38, 46, 32, .07);
}
.contact-section .form input, .contact-section .form select, .contact-section .form textarea { background: #fff; }
/* Kontaktformular-Panels mit Foto-Hintergrund und dunkelgrünem Film */
.contact-section:has(.form) {
  position: relative; overflow: clip;
  background: #3a4538 url("img/erding-stadtturm-band-1536.webp") 50% 30% no-repeat;
  background-size: cover;
}
.contact-section:has(.form)::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(32, 39, 30, .88), rgba(32, 39, 30, .64));
}
.contact-section:has(.form) > * { position: relative; z-index: 1; }
.contact-section:has(.form) .contact-headline { color: #fff; }
.contact-section:has(.form) .eyebrow { color: #afbca6; }
.contact-section:has(.form) .lead { color: rgba(255, 255, 255, .88); }
.contact-section:has(.form) .form label { color: #fff; }
.contact-section:has(.form) .form .group-label { color: #afbca6; }
/* .6 lag unter 3:1 auf dem dunklen Grün – .78 bleibt dezent, ist aber lesbar */
.contact-section:has(.form) .form .req { color: rgba(255, 255, 255, .78); }
.contact-section:has(.form) .form .consent,
.contact-section:has(.form) .form .consent-check { color: rgba(255, 255, 255, .78); }
.contact-section:has(.form) .form .consent-check a { color: #fff; }
.contact-section:has(.form) .form .btn { background: #fff; color: #3a4538; }
.contact-section:has(.form) .form .btn:hover { background: #f0efe8; }
.contact-headline { color: var(--text); font-size: clamp(40px, 4.2vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 26px; }
.contact-section .eyebrow { margin: 0 0 18px; }
.contact-section .lead { font-size: 16px; max-width: 460px; }

.form label { display: block; font-size: 13px; font-weight: 500; margin: 18px 0 7px; }
.form .req { color: #555; font-size: 11.5px; }
.form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; }
.form .row--equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form input, .form select, .form textarea {
  width: 100%;
  font-family: inherit; font-size: 15px;
  padding: 14px 18px;
  border: 1.5px solid #dbd9d1; border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: #b9b6aa; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 4px rgba(72, 86, 68, .12);
}
.form textarea { min-height: 130px; border-radius: var(--radius-sm); resize: vertical; }
.form .btn { width: 100%; margin-top: 22px; padding: 15px; font-size: 12px; }
.form .consent { text-align: center; font-size: 12.5px; margin-top: 22px; color: var(--muted); }
/* Einwilligungs-Checkbox (DSGVO) */
.form .consent-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
  margin-top: 24px; cursor: pointer;
}
.form .consent-check input {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--green-dark); cursor: pointer;
}
.form .consent-check a { color: var(--text); }
.form .group-label { font-size: 13px; margin: 0 0 2px; }
/* Honeypot – für Menschen unsichtbar */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Fehlerhinweis über dem Formular. Die Farbe ist nur die Verstärkung – die
   Aussage steht im Text und im vorangestellten Wort, damit der Hinweis auch
   ohne Farbwahrnehmung eindeutig bleibt (WCAG 1.4.1). */
.form-status {
  padding: 14px 18px 14px 16px; margin-bottom: 18px;
  font-size: 14px; line-height: 1.6;
  color: var(--danger); background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-status::before {
  content: "Hinweis: ";
  font-weight: 600;
}
.form-status:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 3px;
}

/* ---------- Kontaktdaten + Karte ---------- */
.contactdata-section { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 60px; padding: clamp(56px, 6vw, 88px) 0; margin: 0 auto; align-items: start; }
.contactdata-section h2 { color: var(--text); font-size: clamp(38px, 4vw, 54px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 30px; }
.contactdata-section p { margin-bottom: 14px; font-size: 16.5px; }
.contactdata-section a { color: var(--text); }
.map { width: 100%; height: 290px; border: 0; border-radius: var(--radius); }
/* Zwei-Klick-Karte (DSGVO): Google lädt erst nach Einwilligung */
.map-consent {
  background: #efeeea;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 28px;
}
.map-consent p { font-size: 13px; color: var(--muted); max-width: 360px; margin: 0; }
/* Breite Karte (Kontakt-Seite) */
.map--wide { height: 400px; margin: clamp(56px, 6vw, 88px) 0; }

/* ---------- Footer – schwebendes dunkelgrünes Panel ---------- */
.site-footer {
  background: var(--card-bg); color: var(--text);
  transition: background-color .4s ease, box-shadow .4s var(--ease);
  padding: 80px 0 44px;
  margin: 0 auto clamp(16px, 2vw, 28px) !important;
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  border-radius: calc(var(--radius) + 10px);
}
/* Statement-Zeile über den Footer-Spalten */
.footer-top {
  display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap;
  padding-bottom: clamp(44px, 5vw, 64px); margin-bottom: clamp(44px, 5vw, 64px);
  border-bottom: 1px solid #e2dfd4;
}
.footer-statement {
  color: var(--text); font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; margin: 0;
}
/* Headline-Dreiklang: alle Worte im gleichen Gewicht */
.footer-statement strong, .hero-caption h1 strong { font-weight: inherit; }
/* Marke + Anschrift stehen rechts neben dem Statement (statt Button und
   eigener Zwischenetage) – der Fuß verliert dadurch eine ganze Zeile. */
.footer-kontakt {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 16px clamp(28px, 4vw, 56px);
}

/* Journal-Suche: ein Feld über den Beitragslisten – filtert zusammen mit
   den Themen-Chips, rein clientseitig. */
.journal-suche { margin: 18px 0 6px; }
.journal-suche input {
  width: min(100%, 520px);
  padding: 13px 18px;
  border: 1px solid #d9d7cd; border-radius: 10px;
  background: #fcfcfa; font-size: 15px; color: var(--text);
}
.journal-suche input:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green);
}
.suche-leer { font-size: 14.5px; color: var(--muted); margin: 18px 0 8px; }

/* Mobiler Anruf-Knopf: nur bis 700px sichtbar, unten links – Gegenstück
   zum Nach-oben-Knopf rechts. */
.anruf-knopf {
  display: none;
  position: fixed; left: 18px; bottom: 18px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%;
  background: #3e4a3b; color: #fff;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(35, 42, 33, .3);
}
.anruf-knopf:active { background: #424e40; }
@media (max-width: 700px) { .anruf-knopf { display: flex; } }

/* Brotkrumen: stille Standortzeile über dem Seitentitel */
.brotkrumen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); letter-spacing: .02em;
  margin: 30px 0 0;
}
.brotkrumen a { color: var(--muted); text-decoration: none; }
.brotkrumen a:hover { color: var(--text); }
.brotkrumen [aria-current] { color: var(--text); }

/* Kuratierte Journal-Stücke auf der Startseite: drei Beitragskarten im
   Karten-Idiom des Journals – Fachinhalt als Kompetenzsignal. */
/* Die drei Karten tragen das Glas-Finish der großen Kacheln: mehr Raum,
   größere Titel, ruhiger Hub beim Zeigen. */
/* Fünf Spalten für die fünf Linklisten. Markenblock und Rechtszeile liegen
   quer darüber bzw. darunter.

   Vorher waren es sechs Spalten bei sieben Kindern: Die Rechtszeile rutschte
   dadurch in eine zweite Reihe, erste Spalte, und wurde in 1,5fr gequetscht –
   das war der zusammengedrückte untere Bereich. */
.footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 30px; align-items: start; }

/* Markenblock quer über die volle Breite: Logo und Anschrift stehen dadurch
   nebeneinander statt gestapelt. Das halbiert die Höhe des Blocks und bringt
   die Telefonnummer auf eine Linie mit der Wortmarke. */
.footer-grid > div:first-child {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px clamp(32px, 5vw, 72px);
  padding-bottom: clamp(30px, 3.4vw, 44px);
  border-bottom: 1px solid #e2dfd4;
}
/* Rechtszeile ebenfalls über die volle Breite, abgesetzt statt eingequetscht */
.footer-meta {
  grid-column: 1 / -1;
  border-top: 1px solid #e2dfd4;
  padding-top: clamp(22px, 2.4vw, 30px);
  margin-top: clamp(6px, 1vw, 14px);
}
@media (max-width: 1150px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div:first-child { display: block; }
}
.footer-col-title {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .22em;
  color: var(--muted); margin-bottom: 8px;
}
.footer-name { display: inline-flex; align-items: center; gap: 12px; }
.site-footer .logo-name { font-size: clamp(22px, 2.2vw, 30px); }
.site-footer .logo-sub { font-size: clamp(8px, .85vw, 11px); }
.site-footer .logo-rule { height: clamp(26px, 2.6vw, 36px); }
/* Marken-Lockup im Schnellmenü – rechtsbündig neben den Kontaktdaten */
.quick-brand { display: inline-flex; align-items: center; gap: 13px; margin-left: auto; align-self: center; }
.quick-brand .logo-name { font-size: clamp(22px, 2.2vw, 28px); }
.quick-brand .logo-sub { font-size: clamp(8px, .85vw, 10px); }
.quick-brand .logo-rule { height: clamp(26px, 2.6vw, 32px); }
/* margin-top entfällt: Die Anschrift steht jetzt neben der Wortmarke, nicht
   mehr darunter. Auf schmalen Bildschirmen greift der Block-Fallback oben. */
.footer-address { font-style: normal; font-size: 14px; line-height: 1.95; color: var(--muted); margin-top: 0; }
@media (max-width: 640px) { .footer-address { margin-top: 18px; } }
.footer-address a { color: var(--text); text-decoration: none; }
.footer-address a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; justify-self: start; text-align: left; padding-top: 8px; }
.footer-nav a { color: #4a4a45; font-size: 14px; text-decoration: none; position: relative; }
.footer-nav a:hover { color: var(--text); }
.footer-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.footer-nav a:hover::after { transform: scaleX(1); }
.footer-meta {
  grid-column: 1 / -1;
  font-size: 12.5px; color: var(--muted);
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid #e2dfd4;
  /* Rechtszeile trägt jetzt auch die Anschrift: links © + Pflichtlinks,
     rechts die Kontaktdaten in einer Zeile */
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px 32px; flex-wrap: wrap;
}
.footer-meta-adresse { font-style: normal; }
.footer-meta-adresse a { color: var(--text); text-decoration: none; }
.footer-meta-adresse a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-meta a { color: #4a4a45; }
.footer-meta a:hover { color: var(--text); }
.site-footer a:focus-visible { outline-color: var(--green-dark); }

/* ---------- Home / Services: Eyebrow + große grüne Absätze ---------- */
.eyebrow {
  font-size: 11px; color: var(--green);
  text-transform: uppercase; letter-spacing: .24em; font-weight: 600;
  /* Das Eyebrow eröffnet meist eine Sektion und stand mit vollem --sect nach
     oben. Da der Vorgänger unten ebenfalls --sect hat und Margins in Grid-/
     Flex-Kontexten nicht kollabieren, ergab das den doppelten Abstand. */
  /* Der vorangehende Block bringt bereits --sect nach unten mit. Ein weiteres
     halbes --sect obendrauf ergab die gemessenen 150–220px-Läufe vor jeder
     Sektionsüberschrift. */
  margin: calc(var(--sect) * .28) 0 20px;
}
/* Editorialer Sektionskopf: Hairline über dem Label (Kapitelmarke) */
.eyebrow--rule { position: relative; padding-top: 22px; }
.eyebrow--rule::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 1px; background: #e4e2db;
  transform-origin: left;
  transition: transform 1.1s var(--ease) .1s;
}
/* Linie zieht sich beim Insichtscrollen von links auf */
.eyebrow--rule.reveal::before { transform: scaleX(0); }
.eyebrow--rule.reveal.visible::before { transform: scaleX(1); }
/* Sektionstrenner ohne Label: die Linie allein gliedert –
   die Überschrift trägt die Sektion (Eyebrow-Zurückhaltung) */
.sec-rule {
  height: 1px; background: #e4e2db;
  margin: calc(var(--sect) * .7) 0 28px;
  transform-origin: left;
}
.sec-rule.reveal {
  opacity: 1;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease) .1s;
}
.sec-rule.reveal.visible { transform: scaleX(1); }
/* Querverweis-Panel (z. B. Digitale Transformation → Digitale Kanzlei) */
.xlink-panel {
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
  margin: 0 auto var(--sect);
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 64px);
  background: var(--card-bg);
  border-radius: calc(var(--radius) + 10px);
  transition: background-color .4s ease, box-shadow .4s var(--ease);
}
.xlink-panel:hover { background-color: #f2f1ed; box-shadow: 0 18px 44px rgba(38, 46, 32, .07); }
.xlink-panel h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -0.01em; margin: 0 0 10px; }
.xlink-panel p:not(.eyebrow) { font-size: 14.5px; color: var(--muted); line-height: 1.75; max-width: 64ch; margin: 0; }
.xlink-panel .btn { flex-shrink: 0; }

/* Erklärvideos: Zwei-Klick-Einbindung (DSGVO) */
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px; margin-top: 18px;
}
.video-consent {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--card-bg); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center;
  transition: transform .3s var(--ease), background-color .25s ease, box-shadow .3s var(--ease);
}
.video-consent:not(.video-active):hover { transform: translateY(-3px); background: #f2f1ed; box-shadow: 0 12px 30px rgba(38, 46, 32, .07); }
.video-consent h3 { font-size: 15.5px; font-weight: 500; margin: 0; max-width: 34ch; }
.video-consent p { font-size: 12px; color: var(--muted); margin: 0; max-width: 42ch; line-height: 1.6; }
.video-consent .btn { padding: 10px 22px; font-size: 11px; }
.video-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }

/* Hervorgehobenes Download-Panel (Personalfragebögen) */
.dl-panel {
  background: #3a4538;
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(34px, 4vw, 54px) clamp(26px, 3.5vw, 48px);
  margin-top: 60px;
  transition: background-color .35s ease, box-shadow .35s var(--ease);
}
.dl-panel:hover { background-color: #424e40; box-shadow: 0 18px 44px rgba(35, 42, 33, .22); }
.dl-kicker {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
  color: #afbca6; margin: 0 0 12px;
}
.dl-panel h2 {
  color: #fff; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400;
  letter-spacing: -0.01em; margin: 0 0 14px;
}
.dl-intro { color: rgba(255, 255, 255, .85); font-size: 14.5px; line-height: 1.75; max-width: 80ch; margin: 0; }
.dl-intro strong { font-weight: 600; color: #fff; }
.dl-intro a { color: #fff; text-underline-offset: 3px; }
.dl-panel .dl-list { margin-top: 28px; }

/* Download-Karten (Formulare) */
.dl-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 14px; margin-top: 18px;
}
.dl-item {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card-bg); border-radius: var(--radius-sm);
  padding: 20px 22px;
  text-decoration: none; color: var(--text);
  transition: transform .3s var(--ease), background-color .25s ease, box-shadow .3s var(--ease);
}
.dl-item:hover { transform: translateY(-3px); background-color: #f2f1ed; box-shadow: 0 12px 30px rgba(38, 46, 32, .07); }
.dl-item strong { font-size: 15px; font-weight: 500; }
.dl-item strong::after { content: "\00a0\2193"; color: var(--green); }
.dl-item span { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Marken-O als Button: das fette O aus dem Logo, mit Label */
.btn-o {
  display: inline-flex; align-items: baseline; gap: 11px;
  text-decoration: none; color: var(--text);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.btn-o-o {
  font-size: 24px; font-weight: 500; line-height: 1;
  color: #3e4a3b;
  transition: transform .3s var(--ease);
}
.btn-o:hover .btn-o-o { transform: scale(1.14); }
.btn-o:hover .btn-o-label { color: #3e4a3b; }
.btn-o-label { transition: color .2s ease; }
/* Linksbündige Sektions-Überschrift unter dem Label */
.sec-title {
  color: var(--text);
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 500; line-height: 1.1;
  letter-spacing: -0.025em;
  /* 56px trennten die Überschrift so weit vom eigenen Inhalt, dass sie
     nicht mehr als dessen Kopf gelesen wurde. */
  margin: 0 0 var(--sp-m); max-width: 800px;
}
.lead-green {
  color: var(--text);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400; line-height: 1.4;
  max-width: 1060px; margin-bottom: 44px;
}

/* Hero als großes, gerundetes Panel – schwebt unter der Navigation (Apple/PSP-Anmutung) */
.hero-full {
  position: relative;
  margin: 10px auto var(--sect);
  --hero-w-small: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  --hero-w-big: min(calc(100% - 16px), 1680px);
  width: calc(var(--hero-w-big) + (var(--hero-w-small) - var(--hero-w-big)) * var(--hp, 1));
}
.hero-full .hero-media {
  --hero-h-small: clamp(420px, 50vw, 620px);
  --hero-h-big: min(62vh, 51vw);
  width: 100%;
  height: calc(var(--hero-h-small) + (var(--hero-h-big) - var(--hero-h-small)) * (1 - var(--hp, 1)));
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius) + 10px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-full { --hp: 1 !important; }
}
/* Kompaktes Hero-Panel (z. B. Über uns): niedriger, ohne Zoom-Animation */
.hero-full--low { margin-top: 26px; }
.hero-full--low .hero-media { height: clamp(270px, 29vw, 390px); }
/* Mittleres Hero-Panel (Startseite): stattlich, aber ohne Überhöhe */
.hero-full--mid { margin-top: 22px; }
.hero-full--mid .hero-media { height: clamp(500px, 56vw, 760px); }
.hero-full--mid .hero-caption { top: 50%; transform: translateY(-50%); }
/* Quadratisches Hero-Panel: zentriert, Bild fast in voller Höhe sichtbar */
.hero-full--square { width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw)); margin-bottom: 0; }
.hero-full--square .hero-media { height: auto; aspect-ratio: 16 / 10; }
.hero-full--square .hero-caption { top: clamp(52px, 12%, 118px); }
.hero-full--square .hero-caption h1 { font-size: clamp(30px, 4vw, 52px); }


.hero-full--low .hero-caption { top: 50%; transform: translateY(-50%); }
.hero-full .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(32, 39, 30, .62), rgba(32, 39, 30, .42));
  border-radius: inherit;
  pointer-events: none;
}
/* Startseite: Film oben dichter (dort sitzt die Schrift), unten offener –
   Lesbarkeit und Bildwirkung zugleich */
.hero-full--square .hero-media::after {
  background: linear-gradient(180deg, rgba(32, 39, 30, .66) 0%, rgba(32, 39, 30, .36) 48%, rgba(32, 39, 30, .24) 100%);
}
/* ===== Eröffnung der Startseite =====
   Drei Ebenen, eine Bewegung: Das Panel öffnet sich aus einer Maske, das Bild
   kommt dabei in den Fokus und setzt sich zurück, die Schrift steigt heraus.
   Gesamtdauer ~1,6s statt vorher 2,6s – ein erster Eindruck darf nicht warten
   lassen. Es wird ausschließlich transform, opacity und filter animiert,
   damit alles auf dem Compositor läuft.

   Der Zielwert scale(1.03) ist fix: script.js übernimmt nach animationend die
   Parallaxe und setzt inline exakt diesen Wert. Jede andere Endskalierung
   erzeugt einen sichtbaren Sprung beim Übergang. */
.hero-full .hero-media img {
  /* Bewusst der ZIELwert, nicht der Startwert: Den Start liefert das from der
     Keyframe. script.js entfernt die Animation, sobald sie durch ist – ohne
     das hier fiele das Bild dabei auf den Startzustand zurück und wüchse
     sichtbar nach. */
  transform: scale(1.03);
  animation: heroSettle 2.6s var(--ease-hero) forwards;
  will-change: transform;
  transition: transform .55s var(--ease);
}
@keyframes heroSettle {
  from { transform: scale(1.12); }
  to   { transform: scale(1.03); }
}

/* Vorhang: das Panel öffnet sich aus einer weichen Maske */
.hero-full--square { animation: heroUnmask 1.1s var(--ease-hero) both; }
@keyframes heroUnmask {
  from { clip-path: inset(5% 6% 7% 6% round 34px); opacity: .4; }
  to { clip-path: inset(0 0 0 0 round var(--radius)); opacity: 1; }
}

/* Bewegungsempfindlichkeit: Endzustände explizit setzen, sonst bliebe die
   Headline auf translateY(118%) hängen – also unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .hero-full .hero-media img { animation: none; transform: scale(1.03); }
  .hero-full--square {
    animation: none; clip-path: inset(0 0 0 0 round var(--radius)); opacity: 1;
  }
  .hero-caption h1 .w { animation: none; transform: none; }
}
.hero-caption {
  position: absolute; z-index: 1;
  left: 24px; right: 24px;
  top: clamp(40px, 6vw, 88px); bottom: auto;
  text-align: center;
  color: #fff;
}
.hero-kicker {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .26em; font-weight: 600;
  margin-bottom: 12px; color: #fff; opacity: .9;
  animation: fadeUp .8s var(--ease) .15s both;
}
.hero-caption h1 {
  font-size: clamp(34px, 4.6vw, 66px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 auto;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .18);
}
/* Die Bildüberschrift steht sofort – ohne Auftrittsanimation. */
.hero-caption h1 .line { display: block; }
.hero-caption h1 .w { display: inline-block; }
/* Bessere Lesbarkeit: Headline mit weichem Schattenkissen */
.hero-caption h1 { text-shadow: 0 2px 28px rgba(32, 39, 30, .45); }
/* Moderne Zweizeiler-Setzung: großes Leitwort, gesperrte Ortszeile */
.hero-caption h1 .hero-line1 {
  display: block;
  font-size: clamp(26px, 3vw, 44px); font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.1;
  opacity: .96;
}
/* Lockup in Weiß mit grünem O direkt unter der Headline */
.hero-brand {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(16px, 2vw, 26px); margin-bottom: 0;
  animation: fadeUp .9s var(--ease-hero) 1.05s both;
}
/* Die Wortmarke findet ihre Laufweite: Buchstaben gleiten in Position */
.hero-brand .logo-name { animation: trackIn 1.4s var(--ease-hero) 1.05s both; }
@keyframes trackIn {
  from { letter-spacing: .30em; opacity: .0; }
  60% { opacity: 1; }
  to { letter-spacing: .163em; opacity: 1; }
}
.hero-brand { gap: clamp(16px, 1.9vw, 24px); }
.hero-brand .logo-name { color: #fff; font-size: clamp(36px, 4.4vw, 60px); }
.hero-brand .logo-name .logo-o { color: #3e4a3b; }
.hero-brand .logo-sub { color: rgba(255, 255, 255, .85); font-size: clamp(12px, 1.5vw, 19px); }
.hero-brand .logo-rule { background: rgba(255, 255, 255, .55); height: clamp(42px, 4.8vw, 66px); }
.hero-caption h1 .hero-line2 {
  display: block;
  font-size: clamp(12px, 1.4vw, 18px); font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  margin-top: 12px; opacity: .88;
}
@media (max-width: 700px) {
  .hero-caption h1 { font-size: 28px; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Zwei-Spalten-Intro (großer grüner Text links, schmale Spalte rechts) */
.intro-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px,7vw,130px); margin: 32px 0 var(--sect); }
.intro-split .lead-green { margin-bottom: 0; font-size: clamp(22px, 2.15vw, 32px); }
/* h2 und h3 gleich gestaltet: Auf Seiten, deren Einleitung direkt der H1 folgt,
   steht hier eine h2 (Gliederungsebene), auf datev.html eine h3 – optisch soll
   das denselben ruhigen Zwischentitel ergeben. */
.intro-split h2, .intro-split h3 { font-size: 16px; font-weight: 500; margin-bottom: 14px; line-height: 1.4; }
.intro-split p { font-size: 14px; line-height: 1.8; }

/* Grüne Kacheln (Startseite) – editorial, mit Richtungs-Affordanz */
/* minmax(0, 1fr) statt 1fr: Eine 1fr-Spalte darf ihre min-content-Breite nicht
   unterschreiten. Lange Komposita wie "Familienunternehmen" zwingen die Spalte
   dadurch auf ihre Wortbreite und sprengen auf schmalen Geräten das Raster.
   Mit minmax(0, …) darf die Spalte schrumpfen, der Umbruch unten fängt das Wort. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: var(--sect) 0; }
.tile {
  background: var(--card-bg); min-height: 190px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 10px;
  text-align: left; padding: 28px 26px 22px;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.35;
  color: var(--text); text-decoration: none;
  /* Auffangnetz für lange Fachbegriffe: Silbentrennung nach deutschen Regeln
     (lang="de" steht am <html>), Umbruch im Wort nur als letzte Instanz. */
  overflow-wrap: break-word; hyphens: auto;
}
.tile::after {
  content: "\2192"; font-size: 20px; align-self: flex-end; margin-top: auto;
  color: var(--green);
  transition: transform .3s var(--ease);
}
/* Expertise-Kacheln: breite Querbalken, untereinander gestapelt – dunkelgrün
   als bewusster Kontrapunkt zu den hellen Glas-Karten. Der weiße Glas-Rand
   der Sammelregel wird hier neutralisiert, er gehört nur auf helle Flächen. */
.tiles--exp { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tiles--exp .tile {
  flex-direction: row; align-items: center;
  gap: clamp(20px, 4vw, 56px);
  min-height: 0; padding: 40px 34px;
  background: #3a4538; color: #fff;
  border-color: transparent; box-shadow: none;
}
.tile-title { display: block; font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; flex: 0 0 clamp(200px, 26%, 330px); }
.tile-desc { display: block; font-size: 13.5px; line-height: 1.65; color: var(--muted); flex: 1; }
.tiles--exp .tile-desc { color: rgba(255, 255, 255, .75); }
.tiles--exp .tile::after { margin-top: 0; margin-left: auto; align-self: center; color: #a9b7a1; }
.tiles--exp .tile:hover { background-color: #424e40; box-shadow: 0 16px 40px rgba(35, 42, 33, .24); }
.tile:hover { background-color: #c7d2c0; }
.tile:hover::after { transform: translateX(6px); }
.eyebrow + .tiles { margin-top: 34px; }
.sec-title + .tiles { margin-top: 0; }
.sec-title + .exp-list { margin-top: 0; }
.sec-title + .branches { margin-top: 0; }
.sec-title + .trio { margin-top: 0; }
.sec-title + .cards { margin-top: 0; }
.sec-title + .svc-rows { margin-top: 0; }

/* Werte-Trio (Effizient / Verlässlich / Sorgfältig) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; text-align: center; margin: 40px 0 var(--sect); }
.trio h3 { font-size: 25px; font-weight: 400; margin-bottom: 10px; }
.trio p { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 380px; margin-inline: auto; }
/* Editoriale Variante: linksbündig mit grüner Kapitelmarke */
.trio--left { text-align: left; }
.trio--left > div::before { content: ""; display: block; width: 28px; height: 2px; background: var(--green); margin-bottom: 20px; }
.trio--left p { margin-inline: 0; }
/* Dunkelgrüne Akzent-Kacheln: weiße Schrift auf Markengrün */
.trio--dark { gap: 14px; }
.trio--dark > div {
  background: #3a4538;
  border-radius: var(--radius);
  padding: 38px 32px 44px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s ease;
}
.trio--dark > div:hover {
  transform: translateY(-4px);
  background: #424e40;
  box-shadow: 0 14px 34px rgba(35, 42, 33, .28);
}
.trio--dark h3 { color: #fff; }
.trio--dark p { color: rgba(255,255,255,.68); }
.trio--dark > div::before { background: rgba(255,255,255,.8); }


/* Service-Split: Titel links (haftet beim Scrollen), Akkordeons rechts */
.service-split { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 60px; margin: 60px 0 var(--sect); align-items: start; }
.service-split > div:first-child { position: sticky; top: 110px; }
.service-split h2 { font-size: clamp(30px, 3.4vw, 50px); font-weight: 400; line-height: 1.14; letter-spacing: -0.02em; }
.service-split .tagline {
  font-size: 11px; color: var(--green);
  text-transform: uppercase; letter-spacing: .24em; font-weight: 600;
  margin: 22px 0 12px;
}
.service-split .desc { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 400px; margin-bottom: 36px; }
.service-split .accordion { margin: 0; }
.service-split .accordion summary { font-size: clamp(17px, 1.6vw, 20px); color: var(--text); }
.service-split .acc-body p, .service-split .acc-body li { font-size: 14px; line-height: 1.75; }
.service-split .acc-lead { font-weight: 600; font-size: 14px; margin-bottom: 8px; }

/* Sektions-Überschriften (Private Vermögen etc.) */
.sec-h { color: var(--text); font-size: clamp(38px, 4.4vw, 60px); font-weight: 400; letter-spacing: -0.02em; margin: 40px 0 10px; }

.sec-intro { font-size: 15px; line-height: 1.8; margin-bottom: var(--sp-m); max-width: var(--measure); }
.acc-wide summary { color: var(--text) !important; font-size: clamp(17px, 1.6vw, 20px) !important; }
.acc-wide .acc-body p, .acc-wide .acc-body li { font-size: 14px; line-height: 1.75; }
.acc-closing h3 { font-size: 17px; font-weight: 500; margin: 34px 0 10px; }
.acc-closing p { font-size: 14px; line-height: 1.8; max-width: var(--measure); }

/* Branchen – ruhiges Raster, alle acht auf einen Blick */
.branches {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
  margin: 40px 0 var(--sect);
}
/* Branchen ohne Bilder: dunkelgrüne Kacheln im Kanon der Leistungsfelder.
   Der Titel steht ruhig in der Mitte, der erklärende Satz tritt erst beim
   Zeigen hervor – dadurch bleibt das Raster als Ganzes ruhig lesbar. */
/* Branchen im Kanon der Leistungsfelder: dunkelgrün, Inhalt mittig, Titel
   und Erklärsatz stehen von Anfang an. Der Kontrast zum Beige-Panel der
   digitalen Werkzeuge darunter sorgt für den Wechsel im Seitenrhythmus. */
.branch {
  position: relative; overflow: hidden;
  display: grid; align-content: center; justify-items: center;
  min-height: 200px; padding: 26px 24px;
  text-align: center;
  background: #3a4538; border-radius: var(--radius);
  transition: background-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.branch h3 {
  color: #fff; font-size: 16.5px; font-weight: 500; line-height: 1.35; margin: 0;
}
.branch p {
  font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .82);
  margin: 10px 0 0;
}
.branch:hover, .branch:focus-within {
  background: #424e40;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(35, 42, 33, .24);
}

/* Text-Pfeil-Link (grün, mit gleitendem Pfeil) */
.imgcard-link {
  display: block; width: fit-content; margin-top: 22px;
  font-size: 14px; font-weight: 400; color: var(--green);
  text-decoration: none;
}
.imgcard-link::after { content: "\00a0\2192"; display: inline-block; transition: transform .3s var(--ease); }
.imgcard-link:hover::after { transform: translateX(5px); }

/* Fakten als Foto-Stat-Band: Luftbild mit dunkelgrünem Film, weiße Kennzahlen */
.facts {
  position: relative; overflow: clip;
  /* auto-fit statt fester Dreiteilung: Die Leiste sitzt auch mit zwei
     Kacheln bündig, ohne dass eine Spalte leer stehen bleibt. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0;
  background: #3a4538 url("img/erding-luftbild-hero-1536.webp") 50% 38% / cover no-repeat;
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(38px, 4.2vw, 60px) clamp(26px, 3vw, 46px);
  margin: 0 0 var(--sect);
  transition: box-shadow .45s var(--ease);
}
.facts:hover { box-shadow: 0 22px 56px rgba(35, 42, 33, .26); }
.facts::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(32, 39, 30, .93), rgba(32, 39, 30, .72));
}
.fact { position: relative; z-index: 1; padding: 0 clamp(26px, 3vw, 46px); border-left: 1px solid rgba(255, 255, 255, .22); }
.fact:first-child { padding-left: 0; border-left: none; }
.fact:last-child { padding-right: 0; }
.facts .fact strong { color: #fff;   /* lange Komposita (Steuerberaterkammer) sauber trennen statt hart umbrechen */
  overflow-wrap: break-word; hyphens: auto;
}
/* E-Mail-Adressen und Rufnummern niemals mit Trennstrich brechen: Ein
   eingefügter Bindestrich sieht nicht nur falsch aus, er lässt die Adresse
   auch fehlerhaft wirken. Stattdessen kleiner setzen und ohne Strich an der
   nächstbesten Stelle umbrechen. */
.facts .fact--lang strong,
.fact--lang strong {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.4; letter-spacing: -0.005em;
  hyphens: none; overflow-wrap: anywhere; word-break: break-word;
}
.facts .fact--lang strong a { hyphens: none; }
.facts .fact span { color: rgba(255, 255, 255, .72); }
.fact strong {
  display: block;
  font-size: clamp(23px, 2.3vw, 34px); font-weight: 600; color: var(--green);
  margin-bottom: 8px; line-height: 1.22;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.fact strong a { color: inherit; text-decoration: none; }
.fact strong a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fact span { font-size: 13px; color: var(--muted); }
/* Institutionelle Nachweise (Kammer, DATEV) als ruhige Schlusszeile im Fakten-Band */


/* Weiter-Pager: großer editorialer Sprung zum nächsten Service */
/* Eigener Oberabstand als Margin: verschmilzt mit dem Unterabstand der
   vorigen Sektion (kein Aufaddieren) und greift auch dort, wo ein
   vollflächiges Band ohne Außenabstand endet. */
.next-page { display: block; margin-top: clamp(56px, 7vw, 110px); padding: 0 0 calc(var(--sect) * .6); }
/* Absprung zur nächsten Expertise / zum nächsten Service: dunkles Panel im
   Glas-Kanon der großen Kacheln – Label in Salbei, Titel in Weiß, rechts ein
   Pfeilkreis, der sich beim Zeigen füllt. Markup unverändert (zwei Spans). */
.next-link {
  position: relative; display: block; text-align: left; text-decoration: none;
  background-color: #3a4538;
  border-radius: calc(var(--radius) + 10px);
  padding: clamp(30px, 4vw, 52px) clamp(104px, 15vw, 190px) clamp(30px, 4vw, 52px) clamp(26px, 3.5vw, 56px);
  overflow: hidden;
  transition: background-color .3s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.next-link:hover { background-color: #424e40; transform: translateY(-3px); box-shadow: 0 18px 44px rgba(35, 42, 33, .24); }
.next-link::after {
  content: "\2192";
  position: absolute; right: clamp(24px, 3vw, 48px); top: 50%; transform: translateY(-50%);
  width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px);
  border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(20px, 2vw, 28px); color: #fff;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--ease);
}
.next-link:hover::after { background-color: #fff; border-color: #fff; color: #3a4538; transform: translateY(-50%) translateX(6px); }
.next-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .22em; font-weight: 600;
  color: #a9b7a1; margin-bottom: 14px;
}
.next-title {
  font-size: clamp(26px, 3.2vw, 48px); font-weight: 300;
  letter-spacing: -0.015em; line-height: 1.15;
  color: #fff;
}
.next-title::after { content: none; }

/* Leistungsbereiche als editoriale Zeilen (Expertise-Seiten) */
.svc-rows { margin: 28px 0 calc(var(--sect) * .8); }
.svc-rows .card {
  display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 8px 44px;
  background: var(--card-bg); padding: 30px 32px; margin: 0 0 10px;
  border-radius: var(--radius);
  /* Ruhiges, gelassenes Timing: Scroll-Momente sind Erzählung, kein UI-Klick */
  transition: opacity .8s var(--ease), transform .75s var(--ease),
              box-shadow .8s var(--ease), background-color .8s ease;
}
.svc-rows .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(38, 46, 32, .07); background: #f2f1ed; }
.svc-rows .card::before { display: none; }
.svc-rows .card h3 {
  grid-column: 1; grid-row: 1 / span 8;
  margin: 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 400; line-height: 1.35;
  transition: color .65s ease;
}
/* Der Strich wächst über transform statt über width: width löst pro Frame
   Layout + Paint aus, scaleX läuft auf dem Compositor. Gleiche Technik wie
   bei den Unterstreichungen in :183, :238 und :663.
   Basisbreite ist der Maximalwert (54px), die Zwischenstufe ist der Faktor
   28/54 = .5185. */
.svc-rows .card h3::before {
  content: ""; display: block; width: 54px; height: 2px; background: var(--green);
  margin-bottom: 16px;
  transform: scaleX(.5185); transform-origin: left center;
  transition: transform .9s var(--ease), background-color .6s ease;
}
/* Auftritt: Leistungs-Karten steigen spürbar ein, der grüne Strich zeichnet sich */
.svc-rows .card.reveal { opacity: 0; transform: translateY(36px) scale(.982); }
.svc-rows .card.reveal.visible { opacity: 1; transform: none; }
.svc-rows .card.reveal h3::before { transform: scaleX(0); }
.svc-rows .card.reveal.visible h3::before { transform: scaleX(.5185); }
/* Fokus: die Leistung in Bildschirmmitte tritt in den Vordergrund –
   weiße Karte, gehobener Schatten, grüner Titel, wachsender Strich.
   Der Schatten liegt auf ::after und wird per Opacity eingeblendet
   (GPU statt teurem box-shadow-Repaint bei jedem Fokuswechsel). */
.svc-rows .card { position: relative; }
.svc-rows .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 20px 48px rgba(35, 42, 33, .13);
  opacity: 0; transition: opacity .8s var(--ease);
  pointer-events: none;
}
.svc-rows .card.svc-active {
  background: #fff;
  transform: translateY(-2px);
}
.svc-rows .card.svc-active::after { opacity: 1; }
.svc-rows .card.svc-active h3 { color: var(--green-dark); }
.svc-rows .card.svc-active h3::before { transform: scaleX(1); background: var(--green-dark); }
/* Aufklapp-Animation: Inhalte treten weich auf, wenn sich eine Leistung öffnet */
.svc-det[open] > ul { animation: accReveal .7s var(--ease); }
.accordion details[open] .acc-body { animation: accReveal .7s var(--ease); }
@keyframes accReveal {
  from { opacity: 0; transform: translateY(-10px); }
}

/* Leistungsspektrum als Akkordeon (Services-Seiten): gleiche Scroll-Schau –
   kräftiger Auftritt, Fokus in Bildmitte mit gezeichneter grüner Linie */
.accordion details { position: relative; }
.accordion details::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  background: var(--green-dark); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease);
}
.accordion details.reveal { opacity: 0; transform: translateY(30px) scale(.988); }
.accordion details.reveal.visible {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .7s var(--ease),
              box-shadow .7s var(--ease), background-color .75s ease;
}
.accordion details.svc-active {
  background: #fff;
  transform: translateY(-2px);
}
.accordion details.svc-active::before { transform: scaleY(1); }
.accordion details.svc-active summary { color: var(--green-dark); }
.accordion details.svc-active:not([open]) summary::after {
  border-color: var(--green-dark); color: var(--green-dark);
}
.svc-rows .card p { grid-column: 2; font-size: 14px; line-height: 1.75; color: var(--muted); margin-bottom: 6px; max-width: none; }
/* Aufklappbarer Leistungsteil innerhalb der Kachel */
.svc-det { grid-column: 2; margin-top: 16px; border-top: 1px solid #e0ddd3; }
.svc-det summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .2em; font-weight: 600;
  color: var(--green);
  transition: color .18s ease;
}
.svc-det summary:hover { color: var(--green-dark); }
.svc-det summary::-webkit-details-marker { display: none; }
.svc-det summary::after {
  content: "+"; font-size: 17px; line-height: 1; color: var(--text); font-weight: 300;
  transition: transform .35s var(--ease);
}
.svc-det[open] summary::after { transform: rotate(45deg); }
.svc-det ul { margin-top: 14px; }
.svc-rows .card ul { list-style: none; margin: 10px 0 0; columns: 2; column-gap: 48px; }
.svc-rows .card li { position: relative; padding-left: 18px; }
.svc-rows .card li::before { content: "–"; position: absolute; left: 0; color: var(--green); }
.svc-rows .card li { break-inside: avoid; margin-bottom: 10px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }

/* Schwerpunkt-Kapitel: volles, warm getöntes Band (z.B. Private Vermögen) */
.pv-band {
  background: var(--card-bg);
  margin: var(--sect) auto;
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  border-radius: calc(var(--radius) + 10px);
  transition: background-color .35s ease, box-shadow .35s var(--ease);
  padding: clamp(56px, 6.5vw, 92px) 0;
}
.pv-band:hover {
  background: #f2f1ed;
  box-shadow: 0 18px 44px rgba(38, 46, 32, .07);
}
.pv-band .accordion details { border-color: #d6d3c9; }
/* Weiße Karten auf dem getönten Band */
.card--onband { background: #fff; }
.card--onband ul { margin-top: 14px; }

/* Statement-Panel: großes, gerundetes Markengrün-Element (schwebend statt Balken) */
.quote-band {
  background: #3a4538;
  margin: var(--sect) auto;
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  border-radius: calc(var(--radius) + 10px);
  transition: background-color .35s ease, box-shadow .35s var(--ease);
  padding: clamp(56px, 6.5vw, 100px) 0;
}
.quote-band:hover {
  background-color: #424e40;
  box-shadow: 0 18px 44px rgba(35, 42, 33, .22);
}
/* Band-Variante mit Foto-Hintergrund */
.quote-band--img {
  position: relative; overflow: hidden;
}
/* Bild und Film liegen gemeinsam auf ::before und bewegen sich für die
   Parallaxe per transform (GPU) – kein Repaint über background-position */
.quote-band--img::before {
  content: ""; position: absolute; inset: -44px 0;
  background-image: linear-gradient(90deg, rgba(32, 39, 30, .8), rgba(32, 39, 30, .42)),
                    var(--band-img, url("img/erding-schrannenplatz-band-1536.webp"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--band-pos, 50% 32%);
  transform: translateY(var(--py, 0px));
  will-change: transform;
}
.quote-band--img .container { position: relative; z-index: 1; }
/* Masken-Reveal: das Fotoband öffnet sich beim Eintritt aus einer ruhigen
   Innenmaske zur vollen Fläche (clip-path statt Fade – hochwertiger Auftritt) */
.quote-band--img.reveal {
  opacity: 1; transform: none;
  clip-path: inset(9% 5% 9% 5% round calc(var(--radius) + 10px));
  transition: clip-path .95s var(--ease);
}
.quote-band--img.reveal.visible {
  opacity: 1; transform: none;
  clip-path: inset(0 0 0 0 round calc(var(--radius) + 10px));
}
.quote-band .eyebrow { color: rgba(255,255,255,.55); margin: 0 0 24px; }
/* Unterzeile im Band: kleinere, ruhige Ergänzung zum Dreiklang */
.quote-sub {
  color: rgba(255,255,255,.74);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65;
  margin: 20px 0 0; max-width: 62ch;
}
/* Dezenter Outline-Button auf dunklem Band */
.quote-band .btn {
  margin-top: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.6); color: #fff;
}
.quote-band .btn:hover { background: #fff; color: #3a4538; border-color: #fff; }
.quote-text {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 300; line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 26ch;
}

/* Kompakter Kontakt-Abschluss (Startseite) */
.contact-actions { align-self: center; }
.contact-phone { margin: 0 0 6px; }
.contact-phone a {
  font-size: clamp(26px, 3vw, 42px); font-weight: 500;
  color: var(--green); text-decoration: none;
}
.contact-phone a:hover { color: var(--green-dark); }
.contact-mailline { margin: 0 0 30px; }
.contact-mailline a { font-size: 16px; color: var(--text); text-decoration: none; }
.contact-mailline a:hover { text-decoration: underline; text-underline-offset: 5px; }


/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-media { width: 100%; height: 380px; }
  .hero-card { position: static; width: 100%; margin-top: -40px; padding: 44px 28px; }
  .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); }
  .split, .contact-section, .contactdata-section { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    margin: 10px 4px 0;
    background: rgba(255,255,255,.97); flex-direction: column; padding: 20px 26px 28px; gap: 16px;
    align-items: flex-start;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
  }
  .dropdown { box-shadow: none; padding: 6px 0 0 14px; }
  .main-nav.open { display: flex; }
  .dropdown {
    position: static; padding: 6px 0 0 14px; text-align: left;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer-nav { justify-self: start; text-align: left; padding-top: 0; }
  .branches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .quick-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .quick-menu { width: calc(100vw - 24px); padding: 28px 26px 24px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--exp { grid-template-columns: minmax(0, 1fr); }
  .tiles--exp .tile { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tiles--exp .tile-title { flex: none; }
  .tiles--exp .tile::after { align-self: flex-end; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .intro-split, .service-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .service-split > div:first-child { position: static; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fact { border-left: none; border-top: 1px solid rgba(255, 255, 255, .22); padding: 20px 0 0; }
  .fact:first-child { border-top: none; padding-top: 0; }
  .fact:last-child { padding-right: 0; }
  .svc-rows .card { grid-template-columns: minmax(0, 1fr); }
  .svc-rows .card h3 { grid-row: auto; margin-bottom: 10px; }
  .svc-rows .card p, .svc-rows .card ul { grid-column: 1; }
  .svc-det { grid-column: 1; }
  .svc-rows .card ul { columns: 1; }
  .hero-full .hero-media { height: 360px; }
  .hero-caption h1 { max-width: none; }
  .tile { min-height: 130px; }
}

/* ============ Aktuelles: Beiträge + Steuerkalender ============ */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 10px; }
.filter-chip {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  letter-spacing: .02em; color: var(--text);
  background: transparent; border: 1px solid #d9d6ca; border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.filter-chip:hover { border-color: var(--green-dark); color: var(--green-dark); }
.filter-chip.is-active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.issue-block { margin-top: 44px; }
/* .art ist seit der Aufteilung des Journals ein <a>, kein <details> mehr */
.issue-block[hidden], .art[hidden] { display: none; }
.issue-head {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.issue-count { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
/* Beiträge im 4er-Raster: einheitlich große Karten, geöffnet volle Breite */
.issue-acc {
  margin: 18px 0 0 !important;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; align-items: stretch;
}
.issue-acc details { margin-bottom: 0; border-radius: var(--radius-sm); }
.issue-acc details.art summary { padding: 18px 20px 16px; }
.issue-acc details.art:not([open]) { min-height: 150px; }
.issue-acc details.art:not([open]) summary { height: 100%; box-sizing: border-box; }
.issue-acc details.art:not([open]) .art-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.issue-acc .art-title { font-size: 14.5px; line-height: 1.45; }
.issue-acc .art summary { padding-right: 20px; }
.issue-acc .art summary::after {
  width: 26px; height: 26px; font-size: 14px;
  margin-top: auto; margin-left: 0; align-self: flex-end;
}
.issue-acc details.art[open] { grid-column: 1 / -1; }
.issue-acc details.art[open] summary { padding: 24px 30px; }
.issue-acc details.art[open] .art-title { font-size: 17px; }
@media (max-width: 1100px) { .issue-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .issue-acc { grid-template-columns: minmax(0, 1fr); } }
.art summary { display: flex; flex-direction: column; gap: 5px; padding-right: 74px; }
.art-cat {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; color: var(--green);
}
.art-title { font-size: 17px; font-weight: 500; color: var(--text); line-height: 1.45; }
.art-rubrik { font-size: 12.5px !important; color: var(--muted) !important; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 20px !important; }
.hinweis-box {
  background: var(--card-bg); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 0 0 18px; max-width: var(--measure);
}
.hinweis-box p { margin-bottom: 10px; font-size: 15px !important; }
.hinweis-box p:last-child, .hinweis-box ul:last-child { margin-bottom: 0; }
.hinweis-box ul { margin: 0 0 10px 20px; font-size: 15px; }
.hinweis-label { font-weight: 600 !important; color: var(--green-dark) !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px !important; }
.art-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.art-src { font-size: 12.5px; color: var(--muted); }
.cal-section { margin-top: 90px; }
.cal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 18px; margin-top: 10px;
}
.cal-month {
  background: var(--card-bg); border-radius: var(--radius);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
details.cal-month summary { list-style: none; cursor: pointer; padding: 22px 24px 18px; user-select: none; }
details.cal-month summary::-webkit-details-marker { display: none; }
details.cal-month h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Plus im Kreis – kleine Fassung des Akkordeon-Markers der Website */
details.cal-month h3::after {
  content: "+";
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1.5px solid #d9d7cd; border-radius: 50%;
  font-size: 15px; font-weight: 300; line-height: 1; color: var(--text);
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
details.cal-month summary:hover h3::after { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
details.cal-month[open] h3::after { transform: rotate(45deg); background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
/* Geöffnet: Monat spannt sich über die volle Rasterbreite auf,
   die Termine liegen als luftige Karten nebeneinander */
details.cal-month[open] {
  grid-column: 1 / -1;
  background: #f2f1ed;
  box-shadow: 0 18px 44px rgba(38, 46, 32, .09);
}
details.cal-month[open] summary { padding: 26px 28px 8px; }
details.cal-month[open] summary ul { display: none; }
details.cal-month[open] h3 { font-size: 19px; }
details.cal-month[open]:hover { transform: none; }
.cal-hint {
  display: inline-block; margin-top: 14px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--green-dark);
  border-bottom: 1px solid rgba(72, 86, 68, .35);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.cal-hint::after { content: "\00a0\2193"; }
details.cal-month summary:hover .cal-hint { border-color: var(--green-dark); }
details.cal-month[open] .cal-hint { display: none; }
.cal-body {
  padding: 12px 28px 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px; align-items: start;
}
.cal-entry {
  background: #fff; border-radius: var(--radius-sm);
  padding: 18px 20px 14px;
  box-shadow: 0 4px 16px rgba(38, 46, 32, .04);
}
.cal-entry-date {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: var(--green-dark);
  border-radius: 999px; padding: 5px 13px;
  margin-bottom: 12px;
}
.cal-exp { list-style: none; margin: 0; padding: 0; }
.cal-entry .cal-exp li {
  display: block; border-top: none; gap: 0;
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
  padding: 8px 0;
}
.cal-entry .cal-exp li + li { border-top: 1px solid #f0eee6; }
.cal-entry .cal-exp strong { display: block; font-weight: 500; color: var(--text); margin-bottom: 2px; }
/* Termine treten beim Öffnen gestaffelt ein */
details.cal-month[open] .cal-entry { animation: fadeUp .5s var(--ease) both; }
details.cal-month[open] .cal-entry:nth-child(2) { animation-delay: .07s; }
details.cal-month[open] .cal-entry:nth-child(3) { animation-delay: .14s; }
details.cal-month[open] .cal-entry:nth-child(4) { animation-delay: .21s; }
details.cal-month[open] .cal-entry:nth-child(5) { animation-delay: .28s; }
details.cal-month[open] .cal-entry:nth-child(6) { animation-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  details.cal-month[open] .cal-entry { animation: none; }
}
/* Im Fokus: drei hervorgehobene Themen */
.fokus-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px; margin-top: 10px;
  align-items: start;
}
.fokus-read summary { font-size: 14px; }
.fokus-body { padding: 4px 0 10px; }
.fokus-body p { font-size: 14px !important; line-height: 1.7; color: var(--muted); margin: 0 0 12px; }
.fokus-body ul { margin: 0 0 12px 18px; padding: 0; }
.fokus-body li { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 6px; }
.fokus-body .hinweis-box { margin-bottom: 4px; }
.fokus-body .hinweis-box p { font-size: 13.5px !important; }
/* Nachlesen & Link-Listen */
.nl-area {
  font-size: 11px !important; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; color: var(--green) !important;
  margin: 26px 0 10px !important;
}
.fokus-body .nl-area { margin-top: 18px !important; }
.nl-links { list-style: none; margin: 0 0 14px !important; padding: 0 !important; }
.nl-links li { margin: 0 0 6px; padding: 0; }
.nl-links a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.nl-cols { column-count: 3; column-gap: 30px; }
.nl-note { font-size: 12px !important; color: var(--muted) !important; }
.acc-body a, .fokus-body a { color: var(--green-dark); }
.nl-det .acc-body p { font-size: 15px; margin-bottom: 14px; max-width: var(--measure); }
@media (max-width: 900px) { .nl-cols { column-count: 2; } }
@media (max-width: 560px) { .nl-cols { column-count: 1; } }
/* Im Fokus: zwei große Feature-Panels */
.feat {
  background: var(--card-bg); border-radius: var(--radius);
  padding: clamp(30px, 3.4vw, 50px);
  margin-top: 22px;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.feat:hover { background: #f2f1ed; box-shadow: 0 14px 36px rgba(38, 46, 32, .06); }
.feat-grid {
  display: grid; grid-template-columns: minmax(300px, 7fr) 5fr;
  gap: clamp(28px, 4.5vw, 80px); align-items: start;
}
.feat-title { font-size: clamp(23px, 2.3vw, 32px); font-weight: 600; line-height: 1.28; margin: 12px 0 14px; }
.feat-teaser { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; max-width: 58ch; }
.feat-head .lf-det { border-top: 1px solid #ddd9cc; }
.feat-head .art-foot { margin-top: 22px; }
.feat-cities { column-count: 2; column-gap: 30px; }
.feat-cities li { margin-bottom: 8px; }
.feat-cities a { font-size: 15px; font-weight: 500; }
.feat-facts { display: flex; flex-direction: column; gap: 0; }
.feat-fact { padding: 14px 0; border-top: 1px solid #e2dfd4; }
.feat-fact:first-child { border-top: none; padding-top: 2px; }
.feat-fact strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--green-dark); margin-bottom: 3px; }
.feat-fact span { font-size: 14px; line-height: 1.65; color: var(--muted); }
.feat-facts--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; margin-top: 10px; }
.feat-facts--row .feat-fact { border-top: 1px solid #e2dfd4; padding-top: 16px; }
@media (max-width: 800px) { .feat-facts--row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* Inhalte auf dunkelgrüner Kachel */
.dl-panel .nl-links { margin-top: 24px !important; }
.dl-panel .nl-links a { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.dl-panel .nl-links a:hover { text-decoration-color: #fff; }
.dl-panel .nl-note { color: rgba(255, 255, 255, .65) !important; }
.dl-panel .nl-note a { color: #fff; }
.dl-panel .feat-facts--row { margin-top: 24px; }
.dl-panel .feat-facts--row .feat-fact { border-color: rgba(255, 255, 255, .22); }
.dl-panel .feat-fact strong { color: #fff; }
.dl-panel .feat-fact span { color: rgba(255, 255, 255, .8); }
.btn--light { background: transparent; border: 1px solid rgba(255, 255, 255, .65); color: #fff; }
.btn--light:hover { background: #fff; color: var(--green-dark); border-color: #fff; box-shadow: none; }
.dl-panel .lf-more { color: #fff; }
.dl-panel .art-foot { margin-top: 28px; }
/* Aufklappbarer Beitrag auf dunkelgrüner Kachel */
.dl-panel .lf-det { border-top: 1px solid rgba(255, 255, 255, .25); margin-top: 26px; }
.dl-panel .lf-det summary { color: #fff; }
.dl-panel .lf-det summary::after { border-color: rgba(255, 255, 255, .5); color: #fff; }
.dl-panel .lf-det summary:hover { color: #fff; }
.dl-panel .lf-det summary:hover::after { background: #fff; border-color: #fff; color: var(--green-dark); }
.dl-panel .lf-det[open] summary { color: #fff; }
.dl-panel .lf-det[open] summary::after { background: #fff; border-color: #fff; color: var(--green-dark); transform: rotate(45deg); }
.dl-panel .fokus-body p, .dl-panel .fokus-body li { color: rgba(255, 255, 255, .85); }
.dl-panel .fokus-body a { color: #fff; }
.dl-panel .fokus-body .nl-area { color: #afbca6 !important; }
.dl-panel .fokus-body .hinweis-box p { color: var(--muted); }
.dl-panel .fokus-body .hinweis-box .hinweis-label { color: var(--green-dark); }
@media (max-width: 900px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .feat-cities { column-count: 2; }
}
/* Steuerkalender: eingeklappt, gesondert aufklappbar */
.cal-wrap { margin-top: 30px; }
.cal-wrap > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #3a4538; border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px) clamp(24px, 2.6vw, 34px);
  font-size: clamp(16px, 1.7vw, 20px); font-weight: 500; color: #fff;
  transition: background-color .3s ease, box-shadow .3s var(--ease);
}
.cal-wrap > summary::-webkit-details-marker { display: none; }
.cal-wrap > summary::after {
  content: "+";
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%;
  font-size: 19px; font-weight: 300; line-height: 1; color: #fff;
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cal-wrap > summary:hover { background: #424e40; box-shadow: 0 14px 36px rgba(35, 42, 33, .22); }
.cal-wrap > summary:hover::after { background: #fff; border-color: #fff; color: var(--green-dark); }
.cal-wrap[open] > summary { margin-bottom: 8px; }
.cal-wrap[open] > summary::after { transform: rotate(45deg); background: #fff; border-color: #fff; color: var(--green-dark); }
.cal-wrap .cal-grid { margin-top: 14px; }
/* Digitale Kanzlei: die drei Schritte als grüne Kacheln */
.steps-green {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin: 30px 0 var(--sect);
}
.step-green {
  background: #3a4538; border-radius: var(--radius);
  padding: clamp(26px, 2.8vw, 40px);
  transition: transform .45s var(--ease), background-color .35s ease, box-shadow .45s var(--ease);
}
.step-green:hover { transform: translateY(-3px); background: #424e40; box-shadow: 0 18px 44px rgba(35, 42, 33, .22); }
.step-green h3 { color: #fff; font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; margin-bottom: 10px; }
.step-green p { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.75; margin: 0; }
@media (max-width: 800px) { .steps-green { grid-template-columns: minmax(0, 1fr); } }

/* Renditerechner (Digitale Kanzlei) */
.rr {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3.5vw, 56px);
  background: var(--card-bg); border-radius: var(--radius);
  padding: clamp(28px, 3.2vw, 48px);
  margin: 30px 0 18px;
}
.rr-inputs { display: flex; flex-direction: column; gap: 34px; justify-content: center; }
.rr-field label {
  display: block; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--green);
  margin-bottom: 10px;
}
.rr-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.rr-row input[type="text"] {
  font-family: inherit; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600;
  color: var(--text); background: transparent;
  border: 0; border-bottom: 1.5px solid #d9d6ca;
  padding: 0 0 4px; width: 190px; outline: none;
  transition: border-color .25s ease;
}
.rr-row input[type="text"]:focus { border-color: var(--green-dark); }
.rr-unit { font-size: clamp(18px, 1.8vw, 24px); font-weight: 400; color: var(--muted); }
.rr input[type="range"] {
  width: 100%; accent-color: var(--green-dark);
  height: 4px; cursor: pointer;
}
.rr-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.rr-result {
  background: #fff; border-radius: var(--radius-sm);
  padding: clamp(26px, 2.8vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 6px 22px rgba(38, 46, 32, .05);
  transition: box-shadow .35s var(--ease);
}
.rr-result:hover { box-shadow: 0 14px 36px rgba(38, 46, 32, .09); }
.rr-kicker {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .24em; color: var(--green); margin: 0 0 6px;
}
.rr-big {
  font-size: clamp(46px, 5vw, 68px); font-weight: 600; color: var(--green-dark);
  line-height: 1.1; margin: 0 0 22px; font-variant-numeric: tabular-nums;
}
.rr-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; border-top: 1px solid #eceadf; padding-top: 18px; }
.rr-sub strong { display: block; font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; color: var(--text); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.rr-sub span { font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 860px) {
  .rr { grid-template-columns: minmax(0, 1fr); }
  .rr-row input[type="text"] { width: 150px; }
}

/* Scroll-Bühne: Hero verwandelt sich scrub-gesteuert beim Scrollen */
/* Bühnenhöhe = 100vh gepinnter Inhalt + Scroll-Rampe für den Fortschritt --p.
   Vorher 160vh, also 60vh (bei 720px Viewport: 432px) Strecke ohne neuen Inhalt.
   Das war der größte Einzelposten der gemessenen Leerflächen. 128vh lässt der
   Animation Luft, halbiert die Rampe aber. */
/* Der Hero steht bei Scroll 0 als ruhiges Panel direkt unter dem Menüband
   und schiebt sich erst beim Scrollen nach links, während rechts das kurze
   Menü auftritt. Die Höhenbegrenzung sorgt dafür, dass das Panel im
   Startzustand vollständig in den Bildschirm passt. */
.hero-stage { --p: 0; height: 114vh; }
.hero-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: flex-start;
  padding-top: clamp(14px, 2vh, 26px);
  overflow: clip;
  width: 100%;
}
.hero-stage .hero-full--square {
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw), calc((100vh - 112px) * 1.6));
  margin-left: auto; margin-right: auto;
  transform: translateX(calc(var(--p) * -13%)) scale(calc(1 - var(--p) * .30));
  transform-origin: left center;
  will-change: transform;
}
.hero-stage .hero-caption { opacity: calc(1 - var(--p) * 1.8); }
.hero-side {
  position: absolute; z-index: 2;
  /* Senkrecht exakt auf Bildmitte: Das Panel beginnt beim Innenabstand des
     Pins, seine Höhe ergibt sich aus Breite ÷ 16/10. Der Bühnen-Zoom hat
     transform-origin: left center und verschiebt die Mitte deshalb nicht –
     die Rechnung bleibt über die ganze Fahrt gültig. Prozentwerte wären hier
     falsch, weil sie sich auf den 100vh hohen Pin beziehen, nicht aufs Bild. */
  --panel-b: min(calc(100vw - clamp(32px, 5vw, 80px)), var(--maxw), calc((100vh - 112px) * 1.6));
  right: clamp(28px, 5.5vw, 110px);
  top: calc(clamp(14px, 2vh, 26px) + var(--panel-b) / 1.6 / 2);
  width: min(400px, 33vw);
  transform: translate(calc((1 - var(--p)) * 56px), -50%);
  opacity: calc((var(--p) - .45) * 2.4);
  pointer-events: none;
}
.hero-stage.side-active .hero-side { pointer-events: auto; }





.hero-side-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.hero-side-links a {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none;
  border: 1px solid #d9d6ca; border-radius: 999px;
  padding: 13px 22px;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.hero-side-links a::after { content: "\2192"; color: var(--green); transition: transform .3s var(--ease); }
.hero-side-links a:hover {
  background: var(--green-dark); border-color: var(--green-dark); color: #fff;
  transform: translateX(4px);
}
.hero-side-links a:hover::after { color: #fff; transform: translateX(3px); }
/* Service-Links treten gestaffelt auf, sobald das Panel steht (50ms-Kaskade) */
@media (min-width: 741px) and (prefers-reduced-motion: no-preference) {
  .hero-side-links a {
    opacity: 0; transform: translateX(16px);
    transition: opacity .38s var(--ease), transform .42s var(--ease),
                background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .hero-stage.side-active .hero-side-links a { opacity: 1; transform: none; }
  .hero-stage.side-active .hero-side-links a:hover { transform: translateX(4px); }
  .hero-stage.side-active .hero-side-links a:nth-child(2) { transition-delay: .05s; }
  .hero-stage.side-active .hero-side-links a:nth-child(3) { transition-delay: .1s; }
  .hero-stage.side-active .hero-side-links a:nth-child(4) { transition-delay: .15s; }
  .hero-stage.side-active .hero-side-links a:hover { transition-delay: 0s; }
}
.hero-side-contact { width: 100%; text-align: center; }
/* Schmale Bildschirme & reduzierte Bewegung: Bühne wird zur normalen
   Abfolge. Schwelle 740px: Tablets ab 741px erleben die volle
   Entfaltung und Verwandlung, nur Smartphones bleiben statisch. */
@media (max-width: 740px) {
  .hero-stage { height: auto; }
  .hero-pin { position: static; height: auto; display: block; }
  .hero-stage .hero-full--square { transform: none; width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw)); }
  .hero-stage .hero-caption { opacity: 1; }
  .hero-side {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    width: auto; max-width: 520px;
    margin: 30px auto 0; padding: 0 clamp(16px, 5vw, 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto; }
  .hero-pin { position: static; height: auto; display: block; }
  .hero-stage .hero-full--square { transform: none !important; }
  .hero-stage .hero-caption { opacity: 1 !important; }
  .hero-side { position: static; transform: none; opacity: 1; pointer-events: auto; width: auto; max-width: 520px; margin: 30px auto 0; }
}

/* Auf Geräten mit dynamischer Browserleiste (iPad u.a.): Pins nutzen die
   kleinste sichere Viewport-Höhe, damit beim Ein-/Ausblenden der Leiste
   nichts springt */
@supports (height: 100svh) {
  /* Nur wo der Pin wirklich klebt: In den statischen Modi (schmale Viewports,
     reduzierte Bewegung) muss height: auto gewinnen, sonst ragt der in den
     Fluss gestellte Inhalt unten aus der viewport-hohen Bühne heraus und
     überlappt die Folgesektion. */
  @media (min-width: 741px) and (prefers-reduced-motion: no-preference) {
    .hero-pin { height: 100svh; }
  }
}

/* Kachel-Bühne: das wichtigste Raster einer Seite (DATEV-Schritte, Expertise,
   Beratungsansatz) wird kurz gepinnt, die Kacheln treten nacheinander auf.
   Kurzer Scrollweg (26vh); zu kleine Raster werden gar nicht erst gepinnt,
   damit keine großen Leerflächen entstehen. */
/* Rampe 35vh: Die Kacheln treten nacheinander auf, das braucht Weg. */
.grid-stage { --p: 0; height: 135vh; }
.grid-stage .stage-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
  overflow: clip; width: 100%;
}
.stage-inner { width: 100%; }
/* Choreografie: Kacheln schieben sich seitlich herein (linke Spalte von
   links, rechte von rechts), danach wandert ein Fokus über die Kacheln –
   jede vergrößert sich kurz, wenn der Scroll sie erreicht. */
.grid-stage:not(.stage-done) .stage-item {
  --k: clamp(0, (var(--p) * 2.6 - var(--i)) * 3, 1);
  --s: clamp(0, 1 - max((var(--p) - var(--m, 2)) / var(--w, 0.05), (var(--m, 2) - var(--p)) / var(--w, 0.05)), 1);
  opacity: var(--k);
  transform: translate(calc((1 - var(--k)) * var(--dx, 0px)), calc((1 - var(--k)) * 26px))
             scale(calc(0.955 + var(--k) * 0.045 + var(--s) * 0.05));
  transition: none;
}

/* Leistungsfelder-Schau (Startseite): das 2x2-Raster ist höher als ein
   Bildschirm und taugt daher nicht zum Pinnen. Stattdessen wird es in der
   Bühne zur horizontalen Bahn: immer zwei Felder groß im Bild, beim
   Scrollen fahren die weiteren seitlich herein. Die grüne Linie darunter
   zeigt den Fortschritt. */
/* Rampe: 65vh. Bewusst die längste der drei Bühnen – hier fahren mehrere
   Karten seitlich durch, und jede soll lang genug im Fokus stehen, um gelesen
   zu werden. Bei 22vh war die Bahn in einem Wischen durch. */
.lf-stage { --p: 0; --shift: 900px; height: 210vh; }
.lf-stage .stage-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
  /* hidden statt clip: ältere Safari kennen clip nicht – dann liefe eine
     zu hohe Karte sichtbar in die CTA-Zeile darunter */
  overflow: hidden; width: 100%;
}
.lf-stage .lf-grid {
  display: flex; flex-wrap: nowrap;
  gap: clamp(18px, 2vw, 28px);
  transform: translateX(calc(var(--p) * -1 * var(--shift)));
  will-change: transform;
}
/* Deutlich breiter als zuvor (war clamp(380px, 44%, 560px)): Statt zwei
   halben Karten steht jetzt im Wesentlichen eine Karte groß im Bild, die
   nächste schiebt sich an. Das ist der eigentliche Hebel dafür, dass die
   Leistungsfelder im Vordergrund stehen. */
.lf-stage .lf-card {
  flex: 0 0 clamp(440px, 58%, 720px);
  padding: clamp(30px, 3.2vw, 46px);
}
.lf-stage .lf-card h3 { font-size: clamp(21px, 2.1vw, 30px); line-height: 1.25; }
.lf-stage .lf-card .lf-desc { font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.65; }
/* Die Leistungslisten der vier Felder stehen dauerhaft offen: Der Titel
   bleibt als Zwischenüberschrift stehen, ist aber weder anklickbar noch
   fokussierbar, und der Aufklapp-Kreis entfällt. */
.lf-card .lf-det > summary {
  cursor: default; list-style: none; pointer-events: none;
}
.lf-card .lf-det > summary::-webkit-details-marker { display: none; }
.lf-card .lf-det > summary::after { display: none; }

/* Fokus auf der Bahn: Die Karte in Bildmitte tritt hervor, die übrigen treten
   zurück. --m (wann diese Karte mittig steht) und --w (Breite des Fensters)
   setzt das Skript, weil beides von der tatsächlichen Bahnbreite abhängt.

   --f ist 1 in der Mitte des Fensters und fällt zu den Rändern auf 0. CSS hat
   kein verlässliches abs(), deshalb dieselbe max()-Konstruktion wie beim
   Kachel-Raster: der größere der beiden Abstände nach links und rechts. */
.lf-stage .lf-card {
  --f: clamp(0, 1 - max((var(--p) - var(--m, 2)) / var(--w, .3),
                        (var(--m, 2) - var(--p)) / var(--w, .3)), 1);
  transform: scale(calc(.885 + var(--f) * .135));
  opacity: calc(.42 + var(--f) * .58);
  transition: none;   /* der Fortschritt kommt vom Scroll, nicht von einer Kurve */
  will-change: transform, opacity;
  position: relative;
}
/* Fokus-Schatten als Pseudo-Element: der Schatten selbst ist konstant
   (einmal gemalt), nur seine Deckkraft folgt --f – Compositor statt
   Repaint pro Scroll-Frame. */
.lf-stage .lf-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius);
  box-shadow: 0 30px 68px rgba(35, 42, 33, .32);
  opacity: var(--f);
  will-change: opacity;
}
/* Auf kleinen Bildschirmen wird die Bahn zum normalen Raster – dann darf keine
   Karte zurücktreten, sonst wären dort dauerhaft blasse Kacheln.
   700px statt 980px: Die Bahn ist das Schaufenster der Startseite und läuft
   auch auf Tablets – nur das Smartphone bekommt das Raster (wie mqRail im JS). */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .lf-stage .lf-card {
    transform: none; opacity: 1; box-shadow: none; will-change: auto;
  }
  .lf-stage .lf-card::after { display: none; }
}
.lf-stage .stage-inner::after {
  content: ""; display: block; height: 2px; margin-top: 28px;
  border-radius: 1px;
  background: linear-gradient(to right,
    var(--green-dark) calc(var(--p) * 100%), #e2dfd4 calc(var(--p) * 100%));
}
@supports (height: 100svh) {
  .grid-stage .stage-pin, .lf-stage .stage-pin { height: 100svh; }
}
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .lf-stage { height: auto; }
  .lf-stage .stage-pin { position: static; height: auto; display: block; overflow: visible; }
  .lf-stage .lf-grid { display: grid; transform: none; }
  .lf-stage .lf-card { flex: none; }
  .lf-stage .stage-inner::after { display: none; }
}
@media (max-width: 980px) {
  .grid-stage { height: auto; }
  .grid-stage .stage-pin { position: static; height: auto; display: block; overflow: visible; }
  .grid-stage .stage-item { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grid-stage { height: auto; }
  .grid-stage .stage-pin { position: static; height: auto; display: block; overflow: visible; }
  .grid-stage .stage-item { opacity: 1 !important; transform: none !important; }
}

/* CTA-Zeile unter den Leistungsfeldern */
.lf-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: -46px 0 80px;
  padding: 22px 28px;
  background: var(--card-bg); border-radius: var(--radius);
}
.lf-cta p { margin: 0; font-size: 15px; color: var(--muted); max-width: 62ch; }

/* Absprung zum Journal am Seitenende – sichtbar, aber unaufdringlich */
.journal-hint { text-align: center; margin: 16px 0 48px; }
.journal-hint a {
  display: inline-block;
  font-size: 15px; font-weight: 500; color: var(--text);
  text-decoration: none; letter-spacing: .01em;
  background: var(--card-bg); border-radius: 999px;
  padding: 15px 30px;
  transition: background-color .3s ease, color .3s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.journal-hint a::after { content: "\00a0\00a0\2192"; color: var(--green); transition: color .3s ease; }
.journal-hint a:hover {
  background: var(--green-dark); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(72, 86, 68, .22);
}
.journal-hint a:hover::after { color: #fff; }
.fokus-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card-bg); border-radius: var(--radius);
  padding: 30px 30px 24px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
.fokus-card:hover { transform: translateY(-3px); background: #f2f1ed; box-shadow: 0 12px 30px rgba(38, 46, 32, .07); }
.fokus-kicker {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; color: var(--green); margin: 0;
}
.fokus-card h3 { font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.35; margin: 0; }
.fokus-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.fokus-card .art-foot { margin-top: auto; padding-top: 8px; }
.fokus-card .art-src { margin-top: 2px; }
/* Startseite: Leistungsfelder als 2x2-Raster,
   Leistungen dezent zum Aufklappen */
/* Vier Leistungsfelder nebeneinander – kein seitliches Scrollen mehr.
   Die Karten treten beim Sichtbarwerden gestaffelt von unten ein und heben
   sich beim Zeigen deutlich heraus, während die Nachbarn zurücktreten. */
.lf-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px); margin: 34px 0 80px;
  align-items: stretch;
}
@media (max-width: 1180px) { .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lf-grid { grid-template-columns: minmax(0, 1fr); } }
/* Gestaffelter Auftritt: greift nur, wenn das Skript .reveal setzt –
   ohne JavaScript stehen die Karten sofort da. */
.lf-grid.reveal .lf-card { opacity: 0; transform: translateY(26px); }
.lf-grid.reveal.visible .lf-card {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.lf-grid.reveal.visible .lf-card:nth-child(2) { transition-delay: .09s; }
.lf-grid.reveal.visible .lf-card:nth-child(3) { transition-delay: .18s; }
.lf-grid.reveal.visible .lf-card:nth-child(4) { transition-delay: .27s; }
/* Beim Zeigen tritt eine Karte hervor, die übrigen treten leise zurück */
@media (hover: hover) and (min-width: 981px) {
  .lf-grid:hover .lf-card { opacity: .62; transform: scale(.985); }
  .lf-grid .lf-card:hover { opacity: 1; transform: translateY(-6px) scale(1.015); z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-grid.reveal .lf-card { opacity: 1; transform: none; }
  .lf-grid:hover .lf-card, .lf-grid .lf-card:hover { opacity: 1; transform: none; }
}
.lf-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #3a4538; border-radius: var(--radius);
  padding: clamp(22px, 1.9vw, 32px);
  transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
.lf-card:hover { transform: translateY(-3px); background: #424e40; box-shadow: 0 18px 44px rgba(35, 42, 33, .22); }
/* Alle vier Karten teilen dieselben Zeilen: Titel, Beschreibung, Liste und
   Absprung beginnen dadurch überall auf gleicher Höhe – auch wenn ein Titel
   zweizeilig und der nächste einzeilig ist. Muss nach der Flex-Grundregel
   stehen, sonst gewinnt deren display. Ohne subgrid bleibt der Flow-Aufbau. */
@supports (grid-template-rows: subgrid) {
  .lf-grid { grid-template-rows: auto auto 1fr auto; }
  .lf-card {
    display: grid; grid-row: span 4; grid-template-rows: subgrid;
  }
}
.lf-card h3 { font-size: clamp(18px, 1.35vw, 22px); font-weight: 600; line-height: 1.3; margin: 0; color: #fff; }
.lf-card .lf-desc { color: rgba(255, 255, 255, .78); }
.lf-card .lf-det { border-color: rgba(255, 255, 255, .22); }
.lf-card .lf-det summary { color: #fff; }
.lf-card .lf-det summary::after { border-color: rgba(255, 255, 255, .5); color: #fff; }
.lf-card .lf-det summary:hover { color: #fff; }
.lf-card .lf-det summary:hover::after { background: #fff; border-color: #fff; color: var(--green-dark); }
.lf-card .lf-det[open] summary { color: #fff; }
.lf-card .lf-det[open] summary::after { background: #fff; border-color: #fff; color: var(--green-dark); transform: rotate(45deg); }
.lf-card .lf-list li { color: rgba(255, 255, 255, .85); }
.lf-card .lf-list li + li { border-color: rgba(255, 255, 255, .16); }
.lf-card .lf-more { color: #fff; }
.lf-card .lf-more::after { color: #a9b7a1; }
.lf-desc { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 52ch; }
.lf-det { margin-top: 10px; border-top: 1px solid #e2dfd4; }
.lf-det summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 14.5px; font-weight: 500; color: var(--text);
  padding: 16px 0;
  transition: color .3s ease;
}
.lf-det summary::-webkit-details-marker { display: none; }
.lf-det summary::after {
  content: "+";
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1.5px solid #d9d7cd; border-radius: 50%;
  font-size: 16px; font-weight: 300; line-height: 1; color: var(--text);
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.lf-det summary:hover { color: var(--green-dark); }
.lf-det summary:hover::after { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.lf-det[open] summary { color: var(--green-dark); }
.lf-det[open] summary::after { transform: rotate(45deg); background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.lf-list { list-style: none; margin: 6px 0 0; padding: 0; }
.lf-list li {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  padding: 9px 0;
}
.lf-list li + li { border-top: 1px solid #e2dfd4; }
.lf-more {
  margin-top: 4px; font-size: 14px; font-weight: 500;
  color: var(--green-dark); text-decoration: none; align-self: flex-start;
}
.lf-more::after { content: "\00a0\2192"; }
.lf-more:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .lf-grid { grid-template-columns: minmax(0, 1fr); }
}
.cal-month:hover { transform: translateY(-3px); background: #f2f1ed; box-shadow: 0 12px 30px rgba(38, 46, 32, .07); }
.cal-month h3 { font-size: 16px; font-weight: 600; color: var(--green-dark); margin-bottom: 12px; }
.cal-month ul { list-style: none; margin: 0; padding: 0; }
.cal-month li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid #e6e3d8; font-size: 13.5px; line-height: 1.5; }
.cal-month li:first-child { border-top: none; padding-top: 0; }
.cal-date { font-weight: 500; white-space: nowrap; color: var(--text); }
.cal-what { color: var(--muted); }
.cal-legend { font-size: 12.5px; color: var(--muted); line-height: 1.9; margin-top: 26px; max-width: none; }
@media (max-width: 700px) {
  .issue-head { flex-direction: column; gap: 2px; }
  .art summary { padding-right: 58px; }
}

/* ===== Journal: Beitragskarten und Beitragsseiten =====
   Jeder Fachbeitrag hat seit der Aufteilung eine eigene URL. In der Übersicht
   steht deshalb eine Verweis-Karte statt eines aufklappbaren Volltextes. */
.art-link {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px 20px;
  background: var(--card-bg); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  min-height: 150px; box-sizing: border-box;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .2s ease;
}
.art-link:hover { transform: translateY(-3px); background: #f2f1ed; box-shadow: 0 12px 30px rgba(38, 46, 32, .07); }
.art-link:active { transform: translateY(0) scale(.99); transition-duration: .12s; }
.art-link .art-title { font-size: 15.5px; line-height: 1.45; }
.art-teaser {
  font-size: 13px; line-height: 1.65; color: var(--muted);
  margin-top: 2px;
}
.art-more {
  margin-top: auto; padding-top: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--green);
}
.art-more::after { content: "\00a0\2192"; display: inline-block; transition: transform .22s var(--ease); }
.art-link:hover .art-more::after { transform: translateX(4px); }

/* Einzelne Beitragsseite */
.art-page { max-width: 760px; margin: 0 auto; padding: 28px 0 var(--sect); }
.art-breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 26px; }
.art-breadcrumb a { color: var(--muted); text-decoration: none; }
.art-breadcrumb a:hover { color: var(--green); text-decoration: underline; }
.art-page .sec-title { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
.art-meta { font-size: 13px; color: var(--muted); margin: 0 0 30px; }
.art-body p { font-size: 15.5px; line-height: 1.8; margin: 0 0 18px; }
.art-body ul, .art-body ol { font-size: 15.5px; line-height: 1.8; padding-left: 22px; margin: 0 0 18px; }
.art-body li { margin-bottom: 8px; }
.art-hinweis {
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
  border-top: 1px solid #e4e2db; padding-top: 18px; margin-top: 34px;
}
.art-zurueck { margin-top: 28px; }
@media (max-width: 700px) {
  .art-page { padding-top: 18px; }
  .art-body p, .art-body ul, .art-body ol { font-size: 15px; }
}

/* Touch-Geräte: keine klebenden Hover-Zustände nach dem Tippen
   (Hover-Bewegung nur dort, wo es echten Hover gibt) */
@media (hover: none) {
  .card:hover, .card--login:hover, .tile:hover,
  .accordion details:hover, .btn:hover {
    transform: none; box-shadow: none;
  }
  .svc-rows .card:hover { transform: none; box-shadow: none; background: var(--card-bg); }
  .lf-card:hover { transform: none; box-shadow: none; background: #3a4538; }
  .quote-band:hover { background-color: #3a4538; box-shadow: none; }
  .accordion summary:hover { background: transparent; color: var(--text); }

  /* Nachgezogen: diese Hover-Bewegungen waren oben nicht erfasst und blieben
     auf Touch nach dem Antippen als Zustand kleben. */
  .dl-item:hover, .video-consent:not(.video-active):hover,
  .step-green:hover, .fokus-card:hover, .cal-month:hover {
    transform: none; box-shadow: none;
  }
  .quick-menu a:hover { transform: none; }
  /* Pfeil-Indikatoren: der Versatz ist reine Hover-Deko */
  .tile:hover::after, .imgcard-link:hover::after,
  .hero-side-links a:hover::after { transform: none; }
  /* Der Pfeilkreis braucht translateY(-50%) zum Positionieren – bei
     reduzierter Bewegung entfällt nur der seitliche Hover-Versatz */
  .next-link:hover::after { transform: translateY(-50%); }
  .next-link:hover { transform: none; box-shadow: none; }
  .btn-o:hover .btn-o-o { transform: none; }
  .art-link:hover { transform: none; box-shadow: none; background: var(--card-bg); }
  .art-link:hover .art-more::after { transform: none; }
}

/* Auf Telefonbreite steht jede Kachel für sich. Zwei Spalten ergäben hier
   rund 150px pro Kachel – zu schmal für die Leistungstitel, die dann über
   vier Zeilen laufen würden. */
@media (max-width: 640px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Touch-Zielgrößen (WCAG 2.2 AA, 2.5.8) ----------
   Einzeln stehende Textlinks lagen bei 20–23px Höhe und damit knapp unter
   der 24px-Schwelle. Die Anhebung gilt nur für Geräte mit grobem Zeiger:
   Am Desktop ist die Maus präzise genug, dort bliebe das zusätzliche
   Polster ein unnötiger Eingriff in den gesetzten Rhythmus.

   Links mitten im Fließtext sind ausgenommen – für sie sieht die Richtlinie
   selbst eine Ausnahme vor, und ein Polster würde dort den Zeilenfall stören. */
@media (pointer: coarse) {
  .footer-nav a,
  .footer-address a,
  .imgcard-link,
  .lf-more,
  .art-more,
  .journal-hint a,
  .footer-meta a {
    display: inline-block;
    min-height: 24px;
    padding-block: 2px;
  }
  /* Die Footer-Links stehen in einer Flex-Spalte mit 10px Abstand. Das
     zusätzliche Polster von 2×2px wird vom Abstand aufgenommen, damit die
     Spaltenhöhe und der Rhythmus des Footers unverändert bleiben. */
  .footer-nav { gap: 6px; }
}

/* ---------- Wortumbruch auf schmalen Geräten ----------
   Die Raster dürfen dank minmax(0, …) unter ihre min-content-Breite
   schrumpfen. Damit dabei kein langes Kompositum seitlich aus seiner Fläche
   ragt, greift hier die Silbentrennung nach deutschen Regeln (lang="de"
   steht am <html>). Bewusst nur bis 640px: Auf breiten Schirmen ist der
   Flattersatz ohne Trennstriche ruhiger. */
@media (max-width: 640px) {
  h1, h2, h3, h4, p, li, dd, dt, summary, figcaption,
  .tile, .lf-card, .card, .fact, .quote-text, .lead-green {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ---------- Schaltflächen auf sehr schmalen Geräten ----------
   Lange Beschriftungen wie "Beitrag als PDF herunterladen" brauchen mit
   34px Innenabstand und weiter Laufweite mehr Platz, als ein 320px-Display
   in der Spalte hergibt. Beides wird hier zurückgenommen, die Fläche bleibt
   mit 12px Höhenpolster gut treffbar. */
@media (max-width: 640px) {
  .btn, .btn--outline {
    max-width: 100%;
    padding-inline: clamp(18px, 5vw, 34px);
    letter-spacing: .1em;
  }
}

/* ============================================================
   E-Rechnungs-Viewer (e-rechnung.html) – Komponenten
   ============================================================ */

.er-privat {
  background: var(--card-bg); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 28px 0 36px; max-width: var(--measure);
}
.er-privat p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.er-privat strong { color: var(--text); }

/* Upload-Zone */
.er-drop {
  position: relative;
  border: 2px dashed #c9c5b8; border-radius: var(--radius);
  background: var(--card-bg);
  transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease;
  margin-bottom: 26px;
}
.er-drop--aktiv, .er-drop:hover { border-color: var(--green); background: #f0efe8; }
.er-drop:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.er-drop-label {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; cursor: pointer;
  padding: clamp(36px, 5vw, 60px) 24px;
}
.er-drop-titel { font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; color: var(--text); }
.er-drop-hinweis { font-size: 13px; color: var(--muted); }
.er-drop-btn { margin-top: 8px; }
/* Datei-Input bleibt fokussierbar, aber unsichtbar (Fokusring liegt auf der Zone) */
#er-datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.er-laden { font-size: 15px; color: var(--muted); margin: 18px 0; }
.er-fehlerbox {
  color: var(--danger); background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px; margin: 18px 0; font-size: 14.5px; line-height: 1.7;
}

.er-aktionen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 26px 0; }
.er-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.er-check input { width: 16px; height: 16px; accent-color: var(--green-dark); }

/* Status-Banner */
.er-status { border-radius: var(--radius); padding: 22px 26px; margin: 6px 0 18px; }
.er-status svg { width: 26px; height: 26px; flex-shrink: 0; }
.er-status-kopf { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.er-status-unter { font-size: 13.5px; line-height: 1.65; margin: 10px 0 0; }
.er-status-disclaimer { font-size: 12.5px; font-style: italic; margin: 10px 0 0; opacity: .85; }
.er-status--ok { background: #eff2ed; color: #4b5848; }
.er-status--warnung { background: #f7f2e4; color: #6e5310; }
.er-status--nicht-konform { background: var(--danger-bg); color: var(--danger); }
.er-status--neutral { background: var(--card-bg); color: var(--text); }

.er-zugferd-hinweis {
  font-size: 13px; color: var(--muted); line-height: 1.65;
  background: var(--card-bg); border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 0 0 18px;
}

/* Ergebnis-Abschnitte */
.er-abschnitt {
  background: var(--card-bg); border-radius: var(--radius);
  margin-bottom: 14px; overflow: hidden;
}
.er-abschnitt > summary {
  cursor: pointer; list-style: none;
  padding: 18px 24px; font-size: 15.5px; font-weight: 500; color: var(--text);
  transition: background-color var(--dur-fast) ease;
}
.er-abschnitt > summary::-webkit-details-marker { display: none; }
.er-abschnitt > summary::after { content: "+"; float: right; font-size: 18px; font-weight: 300; color: var(--green); }
.er-abschnitt[open] > summary::after { content: "–"; }
.er-abschnitt > summary:hover { background: #f2f1ed; }
.er-abschnitt > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.er-abschnitt-body { padding: 6px 24px 24px; }

/* Begriff/Wert-Listen */
.er-dl { margin: 0; }
.er-dl .er-zeile {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 4px 22px; padding: 7px 0; border-bottom: 1px solid #e6e3d8;
}
.er-dl .er-zeile:last-child { border-bottom: none; }
.er-dl dt { font-size: 13px; font-weight: 500; color: var(--muted); }
.er-dl dd { font-size: 14px; color: var(--text); margin: 0; overflow-wrap: break-word; }
.er-dl--zwei { columns: 2; column-gap: 48px; }
.er-dl--zwei .er-zeile { break-inside: avoid; }

.er-beteiligte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.er-partei h3 { font-size: 14px; font-weight: 600; color: var(--green); margin: 0 0 10px; }

/* Positionstabelle */
.er-tabelle-scroll { overflow-x: auto; }
.er-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.er-tabelle th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; padding: 8px 12px 8px 0;
  border-bottom: 2px solid #d9d6ca;
}
.er-tabelle td { padding: 10px 12px 10px 0; border-bottom: 1px solid #e6e3d8; vertical-align: top; color: var(--text); }
.er-tabelle .er-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.er-tabelle th.er-num { text-align: right; }
.er-pos-beschreibung { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; font-weight: 400; }

.er-leer { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
.er-notiz { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.er-anlagen { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--text); }
.er-anlagen li { margin-bottom: 6px; }

/* Befunde */
.er-befund-titel { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 18px 0 10px; }
.er-befund-titel--fehler { color: var(--danger); }
.er-befund-titel--warnung { color: #6e5310; }
.er-befund-titel--info { color: var(--muted); }
.er-befund {
  border-left: 3px solid var(--muted); background: #fff;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px; margin-bottom: 10px;
}
.er-befund--fehler { border-left-color: var(--danger); }
.er-befund--warnung { border-left-color: #b08a24; }
.er-befund p { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; }
.er-befund-kopf { margin-bottom: 4px; }
.er-befund-regel { font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.er-befund-technik { margin-top: 8px; }
.er-befund-technik summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.er-befund-technik pre {
  font-size: 11.5px; background: var(--card-bg); border-radius: var(--radius-sm);
  padding: 10px 14px; margin: 8px 0 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.er-kosit { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 16px 0 0; }
.er-roh { max-height: 420px; overflow: auto; }

.er-info { margin-bottom: var(--sect); }

/* Mobil: Positionstabelle wird zu Karten */
@media (max-width: 700px) {
  .er-beteiligte { grid-template-columns: minmax(0, 1fr); }
  .er-dl--zwei { columns: 1; }
  .er-dl .er-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .er-tabelle thead { position: absolute; left: -9999px; }
  .er-tabelle, .er-tabelle tbody, .er-tabelle tr, .er-tabelle td { display: block; }
  .er-tabelle tr { background: #fff; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
  .er-tabelle td { border: none; padding: 4px 0; }
  .er-tabelle td::before {
    content: attr(data-label); display: block;
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600;
  }
  .er-tabelle .er-num { text-align: left; white-space: normal; }
}

/* ---------- Überweisung vorbereiten (SEPA-Export) ---------- */
.er-sepa {
  background: #fff; border: 1px solid #ddd9cc;
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  margin: 0 0 18px;
}
.er-sepa--inaktiv { background: var(--card-bg); border-style: dashed; }
.er-sepa-titel { font-size: clamp(18px, 1.8vw, 23px); font-weight: 500; color: var(--text); margin: 0 0 10px; }
.er-sepa-intro, .er-sepa-grund { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; max-width: 68ch; }
.er-sepa-grund { margin-bottom: 0; }
.er-sepa-empf { background: var(--card-bg); border-radius: var(--radius-sm); padding: 12px 18px; margin-bottom: 20px; }
.er-sepa-empf .er-zeile { border-bottom-color: #e0ddd3; }

.er-sepa-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px 22px; margin-bottom: 18px;
}
.er-feld { display: flex; flex-direction: column; gap: 5px; }
.er-feld label { font-size: 13px; font-weight: 500; color: var(--text); }
.er-feld input, .er-feld select {
  font-family: inherit; font-size: 14.5px; color: var(--text);
  background: #fff; border: 1px solid #ccc8ba; border-radius: var(--radius-sm);
  padding: 11px 13px; width: 100%;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.er-feld input:focus-visible, .er-feld select:focus-visible {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(78, 89, 74, .16);
}
.er-feld-hinweis { font-size: 12px; color: var(--muted); line-height: 1.5; }

.er-sepa-meldung {
  font-size: 13.5px; line-height: 1.6; border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 0 0 16px;
}
.er-sepa-meldung--fehler { color: var(--danger); background: var(--danger-bg); border-left: 3px solid var(--danger); }
.er-sepa-meldung--ok { color: #4b5848; background: #eff2ed; border-left: 3px solid var(--green); }
.er-sepa-warnung { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 16px 0 0; max-width: 68ch; }

/* ============================================================
   Leistungen (leistungen.html)
   Die wichtigste Seite für die Mandatsgewinnung. Ruhige, großzügige
   Typografie; die Bewegung führt den Blick, statt sich zu zeigen.
   ============================================================ */

/* ---------- Auftakt ---------- */
.lu-auftakt { padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px); }
.lu-eyebrow { margin-bottom: 22px; }
.lu-statement {
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 600; line-height: 1.02; letter-spacing: -0.035em;
  color: var(--text); margin: 0 0 28px; max-width: 16ch;
  text-wrap: balance;
}
.lu-lead {
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.65;
  color: var(--muted); max-width: 62ch; margin: 0;
}

/* Zwei Arbeitsprinzipien: bewusst als Zeile, nicht als Kachel –
   sie sind Haltung, keine Produkte. */
.lu-prinzipien {
  list-style: none; margin: clamp(44px, 5vw, 68px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 52px);
  max-width: 880px;
}
.lu-prinzipien li { border-top: 1px solid var(--line); padding-top: 18px; }
.lu-prinzipien h2 {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin: 0 0 10px; line-height: 1.35; letter-spacing: -0.005em;
}
.lu-prinzipien p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }

/* ---------- Die vier Felder ---------- */
.lu-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
  margin: clamp(56px, 6vw, 96px) 0 0;
}
.lu-kachel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--card-bg); border-radius: calc(var(--radius) + 4px);
  padding: clamp(30px, 3.4vw, 52px);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
}
/* Grüner Grundton, der beim Zeigen sanft aufzieht – Tiefe ohne Farbwechsel */
.lu-kachel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(78, 89, 74, .07), rgba(78, 89, 74, 0) 62%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.lu-kachel:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(44, 52, 42, .13); }
.lu-kachel:hover::before { opacity: 1; }
.lu-kachel:focus-within { box-shadow: 0 0 0 2px var(--green); }

/* Grüne Marke statt Nummerierung: der aufziehende Strich bleibt als
   Erkennungszeichen der Kacheln erhalten, nur die 01–04 sind entfallen. */
.lu-nummer {
  margin: 0 0 clamp(20px, 2.4vw, 32px); position: relative;
  height: 14px;
}
.lu-nummer::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-hero) .1s;
}
.lu-kachel.ist-sichtbar .lu-nummer::after { transform: scaleX(1); }
.lu-kachel:hover .lu-nummer::after { transform: scaleX(1.85); }

.lu-titel {
  font-size: clamp(25px, 2.7vw, 38px); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.025em; color: var(--text); margin: 0 0 18px;
}
.lu-desc {
  font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.7;
  color: var(--muted); margin: 0 0 clamp(24px, 2.6vw, 34px); max-width: 46ch;
}

/* Leistungsbereiche als aufklappbare Zeilen: sichtbar bleibt die mittlere
   Flughöhe, die konkreten Einzelleistungen liegen eine Ebene dahinter. */
.lu-felder { margin: 0 0 auto; }
.lu-det {
  border-top: 1px solid rgba(31, 31, 31, .09);
  /* erlaubt dem Browser, block-size: auto weich zu interpolieren */
  interpolate-size: allow-keywords;
}
.lu-det:first-child { border-top: none; }
.lu-det > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--text);
  transition: color var(--dur-fast) ease;
}
.lu-det > summary::-webkit-details-marker { display: none; }
.lu-det > summary::after {
  content: "+"; flex-shrink: 0;
  font-size: 18px; font-weight: 300; line-height: 1; color: var(--green);
  transition: transform var(--dur-base) var(--ease);
}
.lu-det[open] > summary::after { transform: rotate(45deg); }
.lu-det > summary:hover { color: var(--green-dark); }
.lu-det > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.lu-det ul { list-style: none; margin: 0; padding: 2px 0 16px; }
.lu-det li {
  position: relative; padding: 4px 0 4px 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.lu-det li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 11px; height: 1.5px; background: var(--green);
}
/* Weiches Auf- und Zuklappen über ::details-content (Chrome 129+).
   Browser ohne Unterstützung öffnen sofort – Inhalt geht nie verloren. */
.lu-det::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size var(--dur-base) var(--ease), content-visibility var(--dur-base) allow-discrete;
}
.lu-det[open]::details-content { block-size: auto; }

.lu-mehr { margin: clamp(28px, 3vw, 40px) 0 0; }
.lu-mehr a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none;
  padding: 12px 24px; border: 1px solid rgba(31, 31, 31, .18);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.lu-mehr a::after {
  content: "\2192"; color: var(--green);
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) ease;
}
.lu-mehr a:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.lu-mehr a:hover::after { color: #fff; transform: translateX(4px); }

/* ---------- Absprung: Übersicht als PDF ---------- */
.lu-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin: clamp(40px, 4.5vw, 64px) 0 clamp(56px, 6vw, 88px);
  padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 40px);
  /* Dunkelgrün statt heller Rahmen: Das Band ist auf den sonst ganz
     hellen Werkzeug- und Leistungsseiten der eine Marken-Kontrapunkt
     und zugleich der Conversion-Anker der Seite. */
  background: #3a4538; border-radius: var(--radius);
  transition: background-color .35s ease, box-shadow .35s var(--ease);
}
.lu-band:hover { background: #424e40; box-shadow: 0 16px 40px rgba(35, 42, 33, .2); }
.lu-band-titel { font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 5px; }
.lu-band-text { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 0; max-width: 54ch; }
.lu-band-text--fehler { color: #ffb9ab; }
/* Knöpfe invertieren auf dem dunklen Band, sonst Grün auf Grün */
.lu-band .btn { background: #fff; color: #3a4538; }
.lu-band .btn:hover { background: #eaede7; color: #3a4538; }
.lu-band .btn--outline { background: transparent; border-color: rgba(255, 255, 255, .72); color: #fff; }
.lu-band .btn--outline:hover { background: #fff; border-color: #fff; color: #3a4538; }

/* ---------- Eintritts-Animation ----------
   Nur transform und opacity, damit die Bewegung auf der GPU bleibt.
   Ohne JavaScript (oder bei reduzierter Bewegung) ist alles sofort da –
   die Sichtbarkeit hängt nie an einem Skript. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .lu-prinzipien li,
  .js-anim .lu-kachel,
  .js-anim .lu-band {
    opacity: 0; transform: translateY(26px);
    transition: opacity .75s var(--ease-hero), transform .75s var(--ease-hero);
  }
  .js-anim .lu-kachel .lu-det {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  /* Die Zeigen-Regel muss die Verstecken-Regel sicher schlagen. Ein knappes
     ".ist-sichtbar" reichte nicht: ".js-anim .lu-prinzipien li" ist durch das
     Elementglied spezifischer und hätte die Listenpunkte dauerhaft auf
     opacity: 0 gehalten. Deshalb hier jeweils Klasse an Klasse. */
  .js-anim .lu-prinzipien li.ist-sichtbar,
  .js-anim .lu-kachel.ist-sichtbar,
  .js-anim .lu-band.ist-sichtbar,
  .js-anim .lu-kachel.ist-sichtbar .lu-det { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .lu-grid { grid-template-columns: minmax(0, 1fr); }
  .lu-prinzipien { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lu-statement { max-width: none; }
}
@media (max-width: 560px) {
  .lu-band { flex-direction: column; align-items: flex-start; }
  .lu-titel br { display: none; }
}

/* ============================================================
   Eröffnungs-Vorhang (Startseite)
   Warmer Vorhang mit Wortmarke, der sich hebt, während darunter
   die bestehende Bild-Eröffnung (heroUnmask/heroSettle) anläuft –
   der Übergang entsteht durch die Überlappung beider Bewegungen.
   Reines CSS: läuft ohne JavaScript vollständig durch.
   ============================================================ */
.intro-vorhang {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--footer-bg);
  animation: introHebt .85s var(--ease-hero) 1.45s forwards;
}
.intro-marke {
  display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  margin: 0; opacity: 0;
  animation: introMarke .9s var(--ease-hero) .25s forwards;
}
/* Ein O, eine Geste: Der Schriftzug tritt auf, dann baut sich der
   Fundamentstrich unter seinem O von links auf – dieselbe Bewegung,
   mit der die Marke die Seite trägt. */
.intro-marke .logo-o::after {
  transform: scaleX(0); transform-origin: left center;
  animation: izTraegt .5s var(--ease-hero) .8s forwards;
}
@keyframes izTraegt { to { transform: scaleX(1); } }
.intro-marke .logo-name { font-size: clamp(34px, 6vw, 62px); letter-spacing: .12em; }
.intro-marke .logo-sub { font-size: clamp(11px, 1.6vw, 15px); }
.intro-marke .logo-rule { height: clamp(40px, 6vw, 64px); }
@keyframes introMarke {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes introHebt {
  to { transform: translateY(-101%); visibility: hidden; }
}

/* Die Hero-Eröffnung wartet, bis der Vorhang zu heben beginnt, und läuft
   dann unter ihm los – Vorhang und Bildmaske bewegen sich gemeinsam. */
body.mit-intro:not(.intro-skip) .hero-full--square { animation-delay: 1.45s; }
body.mit-intro:not(.intro-skip) .hero-full .hero-media img { animation-delay: 1.45s; }

/* Wiederkehr in derselben Sitzung: script.js entfernt den Vorhang und
   setzt intro-skip – die Eröffnung startet dann sofort wie bisher. */
body.intro-skip .intro-vorhang { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-vorhang { display: none; }
}

/* ---------- Tilgungsrechner (datev.html) ---------- */
.tr-aktionen { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0 8px; }
.tr-plan { margin: 18px 0 10px; }
.tr-caption { caption-side: top; text-align: left; font-size: 12.5px; color: var(--muted); padding-bottom: 10px; }
.tr-warnung { color: var(--danger); font-size: 13px; line-height: 1.6; margin: 14px 0 0; }

/* ---------- Datenschutz-Hinweisbanner ---------- */
.ck-banner {
  position: fixed; z-index: 70;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100vw - 32px), 720px);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .97);
  border: 1px solid #ddd9cc; border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(38, 46, 32, .16);
  padding: 16px 20px;
  animation: ckAuftritt .6s var(--ease-hero) .4s both;
}
.ck-banner p { flex: 1 1 340px; font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.ck-banner a { color: var(--text); text-underline-offset: 3px; }
/* Beide Schaltflächen bewusst gleich groß und gleich prominent: Ablehnen
   darf nicht schwerer fallen als Zustimmen (Art. 7 Abs. 3 DSGVO, Vorgaben
   der Aufsichtsbehörden zu "Dark Patterns"). Nur die Farbe unterscheidet. */
.ck-knoepfe { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
/* Widerruf in der Datenschutzerklärung: sieht aus wie ein Textlink, ist
   aber ein Knopf – ein Link ohne Ziel wäre für Screenreader irreführend. */
.ck-widerruf {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px;
}
.ck-widerruf:hover { color: var(--green); }
.ck-ok { padding: 11px 22px; font-size: 11px; flex-shrink: 0; min-width: 148px; justify-content: center; }
.ck-banner .btn--outline { background: transparent !important; border: 1px solid var(--green-dark) !important; color: var(--green-dark) !important; }
.ck-banner .btn--outline:hover { background: var(--green-dark) !important; color: #fff !important; }
@media (max-width: 620px) {
  .ck-knoepfe { width: 100%; }
  .ck-ok { flex: 1 1 0; min-width: 0; }
}
@keyframes ckAuftritt {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-banner { animation: none; }
}


/* Darlehensart-Auswahl im Tilgungsrechner */
.tr-art-select {
  font-family: inherit; font-size: 14.5px; color: var(--text);
  background: #fff; border: 1px solid #ccc8ba; border-radius: var(--radius-sm);
  padding: 12px 14px; width: 100%; margin-bottom: 10px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.tr-art-select:focus-visible {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(78, 89, 74, .16);
}
.tr-art-info { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0; }
/* Feld ohne Wirkung für die gewählte Darlehensart: sichtbar, aber zurückgenommen */
.rr-field--inaktiv { opacity: .45; }
.rr-field--inaktiv input { cursor: not-allowed; }

/* ---------- Werkzeugkarten (Digitale Kanzlei) ----------
   Die Rechner liegen auf eigenen Seiten. Hier stehen nur die Einstiege –
   drei gleichwertige Karten statt zweier seitenfüllender Rechenmasken. */
.wz-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(16px, 1.8vw, 22px);
  margin: 0 0 var(--sect);
}
/* Ohne Zwischenüberschrift folgt das Kachelraster direkt auf die
   Kapitelmarke – etwas mehr Luft als die 20px des Eyebrow-Margins,
   gleicher Rhythmus wie .eyebrow + .tiles */
.eyebrow + .wz-grid { margin-top: 30px; }
.wz-karte {
  display: flex; flex-direction: column;
  background: var(--card-bg); border-radius: var(--radius);
  padding: clamp(26px, 2.8vw, 36px);
  text-decoration: none; color: var(--text);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) ease;
}
.wz-karte:hover { transform: translateY(calc(var(--lift) * -1.6)); background-color: #f2f1ed; box-shadow: 0 20px 48px rgba(44, 52, 42, .12); }
.wz-karte:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.wz-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green); margin-bottom: 14px;
}
.wz-titel { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; line-height: 1.25; margin-bottom: 10px; }
.wz-text { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 22px; }
.wz-mehr {
  margin-top: auto; font-size: 13px; font-weight: 500; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.wz-mehr::after { content: "\2192"; color: var(--green); transition: transform var(--dur-base) var(--ease); }
.wz-karte:hover .wz-mehr::after { transform: translateX(4px); }
@media (max-width: 900px) { .wz-grid { grid-template-columns: minmax(0, 1fr); } }

/* Erläuterung unter einem Rechner: zugeklappt, weil sie erst nach dem
   Ergebnis interessiert. */
.rw-hinweis {
  border-top: 1px solid #e0ddd3; border-bottom: 1px solid #e0ddd3;
  margin: 0 0 var(--sect); max-width: var(--measure);
}
.rw-hinweis > summary {
  list-style: none; cursor: pointer; padding: 16px 0;
  font-size: 14.5px; font-weight: 500; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: color var(--dur-fast) ease;
}
.rw-hinweis > summary::-webkit-details-marker { display: none; }
.rw-hinweis > summary::after { content: "+"; font-size: 18px; font-weight: 300; color: var(--green); transition: transform var(--dur-base) var(--ease); }
.rw-hinweis[open] > summary::after { transform: rotate(45deg); }
.rw-hinweis > summary:hover { color: var(--green-dark); }
.rw-hinweis > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.rw-hinweis-body p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.rw-hinweis::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-base) var(--ease), content-visibility var(--dur-base) allow-discrete; }
.rw-hinweis[open]::details-content { block-size: auto; }

/* Fließtext, der beim Aufklappen einer Servicekarte erscheint: liest sich wie
   der sichtbare Anreißer darüber, nur etwas ruhiger. */
.svc-fliess { font-size: 13.5px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; }
.wz-grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .wz-grid--zwei { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ */
/* Glas-Anmutung der Beige-Flächen: lichter Verlauf von oben, hauchdünner
   heller Rand und eine innere Lichtkante. Auf dem weißen Seitengrund
   wirken die Karten dadurch heller und wie mattiertes Glas – alle
   Hover-Animationen der Einzelkomponenten bleiben unberührt.
   Achtung: nur helle Flächen aufnehmen – .lf-card ist dunkelgrün mit weißer
   Schrift und wurde von dieser Regel schon einmal versehentlich überdeckt. */
.card, .tile, .wz-karte, .card--login, .lu-kachel, .dl-item,
.card:hover, .tile:hover, .wz-karte:hover, .card--login:hover, .lu-kachel:hover, .dl-item:hover {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 46%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(38, 46, 32, .05);
}

/* Die Spezialisierungs-Kacheln erscheinen ohne Auftritt – sie stehen
   sofort vollständig da. Hover und Lichtband bleiben davon unberührt. */
.tiles--exp .tile.reveal,
.tiles--exp .tile.reveal.visible {
  opacity: 1; transform: none; transition: none;
  /* Auch die scrollgebundene Variante stilllegen – sonst hängt die
     Deckkraft weiter am Scrollfortschritt und die unteren Kacheln
     stehen blass da. */
  animation: none;
}

/* ---------- Bereichs-Raster (Startseite): Bento über einem Foto ----------
   Ein einziges Bild liegt hinter dem gesamten Raster; ein heller Schleier
   nimmt ihm die Kraft, die Kacheln dunkeln ihren Ausschnitt wieder ab.
   Dadurch setzen sich die Kacheln zu einem durchgehenden Bild zusammen,
   ohne background-attachment (ruckelt) oder backdrop-filter (teuer). */
/* Der Bereich selbst bleibt weiß – das Foto erscheint ausschließlich in den
   Kacheln. position: relative macht ihn zum Bezugsrahmen: Die Bilder in den
   Kacheln spannen darüber und werden von der Kachel beschnitten, wodurch sie
   sich zu einem durchgehenden Bild zusammensetzen. */
.bereiche {
  position: relative;
  margin: calc(var(--sect) * .66) 0 var(--sect);
}
/* Eigene Ordnung statt gleich großer Felder: eine breite und eine schmale
   Kachel oben, drei gleiche in der Mitte, der Kontakt als flaches Band über
   die volle Breite – die Reihen werden nach unten ruhiger und laufen auf den
   Kontakt zu. */
.bereiche-raster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}
/* Die Kacheln haben bewusst kein position: Foto und Schleier darin spannen
   deshalb über die ganze Sektion und werden vom overflow der Kachel
   beschnitten – so setzen sich alle Kacheln zu einem Bild zusammen. */
.bereich {
  display: grid; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  /* clip-path statt overflow: nur so wird das über die ganze Sektion
     gespannte Foto auf die Kachel beschnitten. Kein transform auf der
     Kachel – das würde sie zum Bezugsrahmen machen und den Bildausschnitt
     auf Kachelgröße zusammenziehen. */
  clip-path: inset(0 round var(--radius));
  text-align: center; text-decoration: none; color: #fff;
  transition: box-shadow .35s var(--ease);
}
.bereich-foto, .bereich-schleier { position: absolute; inset: 0; }
.bereich-foto {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
/* Deckung so gewählt, dass auch über den hellsten Bildstellen (Fenster)
   weißer Text die 4.5:1 der WCAG erreicht – in dunklen Bildzonen bleibt
   das Foto trotzdem deutlich sichtbar. */
.bereich-schleier {
  background: linear-gradient(180deg, rgba(30, 37, 29, .78) 0%, rgba(30, 37, 29, .84) 45%, rgba(30, 37, 29, .88) 100%);
  /* Ausgangswert ausdrücklich setzen: Ohne ihn hat der Browser beim ersten
     Überfahren keinen Startpunkt für die Überblendung und schaltet hart um. */
  opacity: 1;
  transition: opacity .4s var(--ease);
}
.bereich-name, .bereich-sub { position: relative; z-index: 1; }
.bereich-name {
  font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; line-height: 1.3;
  text-shadow: 0 1px 12px rgba(18, 23, 17, .8);
}
.bereich-sub {
  font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 10px rgba(18, 23, 17, .85);
}
/* Beim Zeigen tritt das Foto hervor – ein Ring nach innen ersetzt den
   Schlagschatten, den clip-path ohnehin abschneiden würde. */
/* Beim Zeigen tritt das Bild etwas hervor und die Schrift rückt leicht auf.
   Der Schleier bleibt dabei kräftig genug, dass der Text seinen Kontrast
   behält – ein stärkeres Aufhellen sähe besser aus, wäre aber unlesbar. */
.bereich:hover, .bereich:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.bereich:hover .bereich-schleier, .bereich:focus-within .bereich-schleier { opacity: .88; }
.bereich-name, .bereich-sub { transition: transform .4s var(--ease); }
.bereich:hover .bereich-name, .bereich:focus-within .bereich-name { transform: translateY(-3px); }
.bereich:hover .bereich-sub, .bereich:focus-within .bereich-sub { transform: translateY(3px); }
.bereich:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.bereich:active .bereich-schleier { opacity: .85; }
.bereich--a { grid-column: span 7; min-height: clamp(190px, 21vw, 268px); }
.bereich--b { grid-column: span 5; min-height: clamp(190px, 21vw, 268px); }
.bereich--c, .bereich--d, .bereich--e { grid-column: span 4; min-height: clamp(150px, 16vw, 200px); }
/* Der Kontakt schließt als flaches Band ab – Titel und Daten nebeneinander */
.bereich--f {
  grid-column: span 12; min-height: 0;
  grid-template-rows: none; grid-auto-flow: column;
  gap: clamp(10px, 2vw, 26px); align-content: center;
  padding: 24px 26px;
}
/* Zwei Spalten: erstes und letztes Feld laufen über die volle Breite und
   rahmen die vier mittleren ein – so bleibt keine halbe Zeile stehen. */
@media (max-width: 900px) {
  .bereiche-raster { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bereich { grid-column: auto !important; grid-row: auto !important; min-height: 168px; }
  .bereich--c, .bereich--d, .bereich--e { min-height: 168px; }
  .bereich--a, .bereich--f { grid-column: 1 / 3 !important; }
  .bereich--a { min-height: 210px; }
  .bereich--f { grid-auto-flow: row; min-height: 0; padding: 22px 20px; }
}
@media (max-width: 560px) {
  .bereiche-raster { grid-template-columns: 1fr; }
  .bereich, .bereich--a, .bereich--f { grid-column: auto !important; min-height: 140px; }
  .bereich--f { min-height: 0; }
  .bereich { padding: 22px 18px 18px; }
}

/* ------------------------------------------------------------------ */
/* Seitenübergänge (View Transitions, Cross-Document): Beim Wechsel
   zwischen den Seiten blendet der Browser nicht hart um, sondern die
   alte Seite weicht sanft, die neue tritt mit leichtem Anheben ein.
   Der Kopfbereich ist als eigene Ebene benannt und bleibt dadurch
   optisch stehen. Browser ohne Unterstützung wechseln einfach normal. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: kanzlei-kopf; }
::view-transition-old(root) { animation: seiteWeicht .32s var(--ease) both; }
::view-transition-new(root) { animation: seiteTritt .5s var(--ease) both; }
@keyframes seiteWeicht { to { opacity: 0; } }
@keyframes seiteTritt { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Lichtreflex, der dem Zeiger über die Karte folgt (script.js setzt die
   Koordinaten --gx/--gy und fügt die Ebene ein). Liegt dank z-index -1
   und isolation unter dem Text, aber über dem Kartengrund – Lesbarkeit
   bleibt unangetastet. Auf dunklen Karten ein grünlicher Schein. */
.wz-karte, .lf-card, .tiles--exp .tile { isolation: isolate; position: relative; }
.glanz {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 30%),
              var(--glanz-farbe, rgba(255, 255, 255, .8)), transparent 68%);
}
.lf-card .glanz, .tiles--exp .tile .glanz { --glanz-farbe: rgba(169, 183, 161, .17); }
.wz-karte:hover .glanz, .lf-card:hover .glanz,
.tiles--exp .tile:hover .glanz, .lu-kachel:hover .glanz { opacity: 1; }

/* Download-Kacheln: Marken-O als Absender, Formatangabe oben rechts,
   Pfeil senkt sich beim Zeigen. Auf dem dunkelgrünen Panel wirken die
   hellen Glas-Kacheln wie mattierte Karten auf Filz. */
.dl-item {
  position: relative;
  padding: 24px 24px 22px; gap: 8px;
}
.dl-item::before {
  content: "O";
  font-size: 23px; font-weight: 500; line-height: .95;
  color: var(--green-logo);
  margin-bottom: 6px;
}
.dl-item::after {
  position: absolute; top: 20px; right: 20px;
  font-size: 9px; font-weight: 600; letter-spacing: .16em;
  color: var(--green);
  border: 1px solid rgba(78, 89, 74, .3); border-radius: 999px;
  padding: 3px 9px;
}
.dl-item[href$=".docx"]::after, .dl-item[href$=".doc"]::after { content: "WORD"; }
.dl-item[href$=".pdf"]::after { content: "PDF"; }
.dl-item[href$=".vcf"]::after { content: "VCF"; }
.dl-item[href$=".ics"]::after { content: "KALENDER"; }
.dl-item strong { padding-right: 58px; }
.dl-item strong::after { display: inline-block; transition: transform .3s var(--ease); }
.dl-item:hover strong::after { transform: translateY(2px); }

/* Wort-Vorhang (script.js): Wörter gleiten gestaffelt aus einer Maske.
   Der Container-Fade des Reveal-Systems wird für gesplittete Überschriften
   abgeschaltet – die Wörter übernehmen den Auftritt vollständig. */
.wv.reveal { opacity: 1; transform: none; }
.wv .wv-w { display: inline-block; overflow: hidden; vertical-align: top; }
.wv .wv-i {
  display: inline-block;
  transform: translateY(114%);
  transition: transform .8s var(--ease-hero);
}
.wv.wv-sichtbar .wv-i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wv .wv-i { transform: none; transition: none; }
}


/* Branchen-Karussell: Die acht Branchenkarten stehen nebeneinander in einer
   schnappenden Bahn statt im 4x2-Raster – halbiert die Bauhöhe der Sektion.
   Pfeiltasten (script.js) blättern kartenweise; am Rand läuft die Bahn in
   eine weiche Maske, das Signal für "hier geht es weiter". */
.branches--rail {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding: 4px 4px 16px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 28px), transparent);
}
.branches--rail::-webkit-scrollbar { display: none; }
.branches--rail .branch { flex: 0 0 clamp(250px, 27vw, 330px); scroll-snap-align: start; }
/* In der Bahn ist .branch Flex-Kind – die Zentrierung des Inhalts muss
   deshalb ausdrücklich gesetzt werden, sonst hängt der Titel oben. */
.branches--rail .branch { display: grid; align-content: start; }
.br-huelle { position: relative; }
.br-pfeil {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .94); color: var(--text);
  box-shadow: 0 10px 28px rgba(35, 42, 33, .18);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--ease);
}
.br-pfeil--zurueck { left: 10px; }
.br-pfeil--weiter { right: 10px; }
.br-pfeil:hover { background: var(--green-dark); color: #fff; }
.br-pfeil:active { transform: translateY(-50%) scale(.92); }
.br-pfeil:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Dunkelgrüne Variante des Absprung-Panels (Digitale Kanzlei: Formulare &
   Downloads) – gleiche Flächensprache wie Leistungsfelder und Kacheln.
   Der Button invertiert auf Weiß, sonst verschwände Grün auf Grün. */
.xlink-panel--gruen { background: #3a4538; }
.xlink-panel--gruen:hover { background: #424e40; box-shadow: 0 18px 44px rgba(35, 42, 33, .24); }
.xlink-panel--gruen h2 { color: #fff; }
.xlink-panel--gruen p:not(.eyebrow) { color: rgba(255, 255, 255, .82); }
.xlink-panel--gruen .eyebrow { color: #afbca6; }
.xlink-panel--gruen .btn { background: #fff; color: #3a4538; }
.xlink-panel--gruen .btn:hover { background: #eaede7; color: #3a4538; }
/* Beige-Variante: setzt einen hellen Ruhepunkt zwischen den grünen Flächen –
   auf der Services-Seite folgen sonst Expertise-Stapel, Branchen und
   Seitenabschluss unmittelbar aufeinander. */
.xlink-panel--beige {
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .07);
}
.xlink-panel--beige:hover {
  background: #efeee6;
  box-shadow: inset 0 0 0 1px rgba(78, 89, 75, .18), 0 18px 44px rgba(35, 42, 33, .12);
}
.xlink-panel--beige h2 { color: var(--text); }
.xlink-panel--beige p:not(.eyebrow) { color: var(--muted); }
.xlink-panel--beige .eyebrow { color: var(--green); }
.xlink-panel--beige .btn { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.xlink-panel--beige .btn:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* ------------------------------------------------------------------ */
/* Ladezustände: Der Mandant soll nie raten müssen, ob noch gearbeitet
   wird. Drei Bausteine mit einer gemeinsamen Formensprache: */

/* 1) Navigations-Ladebalken: erscheint (per script.js) erst, wenn ein
   Seitenwechsel länger als 400ms braucht – schnelle Wechsel bleiben
   unangetastet, langsame zeigen oben eine laufende grüne Linie. */
.lade-balken {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, transparent, var(--green) 30%, #a9b7a1 50%, var(--green) 70%, transparent);
  background-size: 200% 100%;
  animation: ladeLauf 1.1s linear infinite;
  pointer-events: none;
}
@keyframes ladeLauf { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 2) Beschäftigte Knöpfe (PDF-Erzeugung): drehender Ring am Knopf,
   Doppelklicks sind währenddessen wirkungslos. */
.knopf-laedt { pointer-events: none; opacity: .78; }
.knopf-laedt::after {
  content: ""; display: inline-block;
  width: 12px; height: 12px; margin-left: 10px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: ringDreht .8s linear infinite;
}
@keyframes ringDreht { to { transform: rotate(360deg); } }

/* 3) Verarbeitungshinweis im Rechnungsviewer: bekommt denselben Ring */
.er-laden::before {
  content: ""; display: inline-block;
  width: 13px; height: 13px; margin-right: 10px; vertical-align: -2px;
  border: 2px solid var(--green); border-right-color: transparent;
  border-radius: 50%;
  animation: ringDreht .8s linear infinite;
}

/* Ladeanzeigen sind Statusinformation, keine Dekoration – bei reduzierter
   Bewegung laufen sie langsamer statt einzufrieren (ein stehender Ring
   sähe exakt nach dem Hänger aus, den die Anzeige ausschließen soll). */
@media (prefers-reduced-motion: reduce) {
  .lade-balken { animation-duration: 2.4s; }
  .knopf-laedt::after, .er-laden::before { animation-duration: 2s; }
}


/* Versetzte Kachelreihe: die dunklen Kacheln treten diagonal unter der
   linksbündigen Überschrift an – ein gewolltes Gestaltungsmittel, kein
   Ausrichtungsfehler. Innerhalb jeder Kachel bleiben Titel und Text
   zeilenbündig (subgrid), nur die Kacheln selbst sind gestaffelt. */
@media (min-width: 900px) {
  .trio--versetzt > div:nth-child(2) { margin-top: 36px; }
  .trio--versetzt > div:nth-child(3) { margin-top: 72px; }
}

/* Lesefortschritt und Nach-oben-Knopf: Standard hochwertiger Finanz- und
   Editorial-Seiten. Der Fortschrittsbalken (2px, statisch gefüllt) ist vom
   Navigations-Ladebalken (3px, Lauflicht) bewusst unterscheidbar. */
.lese-fortschritt {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 190; pointer-events: none;
  background: var(--green);
  transform-origin: left;
  transform: scaleX(var(--lese-p, 0));
}
.nach-oben {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 46px; height: 46px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94); color: var(--text);
  border: 1px solid rgba(31, 31, 31, .18);
  box-shadow: 0 10px 28px rgba(35, 42, 33, .16);
  font-size: 17px; text-decoration: none;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              background-color .25s ease, color .25s ease;
}
.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: var(--green-dark); color: #fff; }
.nach-oben:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Auf schmalen Screens nach links, dort parkt rechts die Visitenkarte */
@media (max-width: 760px) { .nach-oben { right: auto; left: 14px; } }
/* USt-IdNr-Prüfung: eine Eingabezeile, ein klares Urteil. Die Ergebnisbox
   spricht die Ampelsprache der übrigen Werkzeuge (grün/rot/neutral). */
.uid-eingabe label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.uid-zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.uid-zeile input {
  flex: 1 1 260px; min-width: 0;
  font: inherit; font-size: 16px; letter-spacing: .04em;
  padding: 13px 16px; border: 1px solid #cfccc1; border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
}
.uid-zeile input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.uid-hilfe { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.uid-ergebnis {
  margin-top: 22px; padding: 20px 22px;
  border-radius: var(--radius-sm); border-left: 3px solid var(--muted);
  background: var(--card-bg);
}
.uid-ergebnis p { font-size: 14px; line-height: 1.7; margin: 0 0 8px; }
.uid-ergebnis p:last-child { margin-bottom: 0; }
.uid-ergebnis--ok { border-left-color: var(--green); background: #eff2ec; }
.uid-ergebnis--fehler { border-left-color: var(--danger); background: var(--danger-bg); }
.uid-ergebnis--hinweis { border-left-color: #8a8578; }

/* "Wofür wir stehen": Sticky-Stack. Rechts haftet die Überschrift auf
   Sichthöhe, links schieben sich die drei dunklen Karten beim Scrollen
   übereinander – jede haftet etwas tiefer als die vorige, sodass die
   Kanten des Stapels sichtbar bleiben – ruhig und exakt, ohne Spielerei. */
.steh-band {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 88px);
  margin: 40px 0 var(--sect);
  align-items: start;
}
.steh-karten { display: flex; flex-direction: column; gap: 26px; }
.steh-karte {
  position: sticky;
  background: #3a4538; color: #fff;
  border-radius: var(--radius);
  padding: clamp(30px, 3vw, 44px) clamp(26px, 2.8vw, 40px);
  box-shadow: 0 14px 40px rgba(35, 42, 33, .22);
  transition: transform .5s var(--ease), background-color .3s ease;
  will-change: transform;
}
.steh-karte:nth-child(1) { top: 96px; }
.steh-karte:nth-child(2) { top: 112px; }
.steh-karte:nth-child(3) { top: 128px; }
.steh-karte:nth-child(4) { top: 144px; }
.steh-karte:nth-child(5) { top: 160px; }
.steh-karte:hover { background: #424e40; }
.steh-karte h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 500; color: #fff; margin: 0 0 12px; }
.steh-karte h3::before {
  content: ""; display: block; width: 28px; height: 2px;
  background: #a9b7a1; margin-bottom: 18px;
}
.steh-karte p { font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); max-width: 46ch; margin: 0; }
.steh-titel { position: sticky; top: clamp(120px, 26vh, 220px); }

/* Absprung-Kacheln im Stapel: Links im selben Formkanon wie die Karten,
   nur kompakter und mit dem Pfeil der Schnell-gefunden-Kacheln. */
a.steh-karte { display: block; text-decoration: none; padding: clamp(24px, 2.4vw, 36px) clamp(26px, 2.8vw, 40px); }
a.steh-karte h3::after {
  content: "\2192"; display: inline-block; margin-left: 12px;
  font-size: 0.8em; color: #a9b7a1; transition: transform .3s var(--ease);
}
a.steh-karte:hover h3::after { transform: translateX(5px); }
a.steh-karte:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Gespiegelte Variante für die Expertise-Seiten: Überschrift haftet links,
   die Karten stapeln sich rechts. Der Titel steht dort zuerst im Markup,
   deshalb genügt der Spaltentausch – alles Übrige erbt vom Grundmuster. */
.steh-band--titel-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
/* In der schmalen Titelspalte muss auch ein langes Einzelwort wie
   "Familienunternehmen" Platz finden – die Überschrift fällt hier deshalb
   eine Stufe kleiner aus als die volle sec-title-Größe. */
@media (min-width: 980px) {
  .steh-band--titel-links .sec-title { font-size: clamp(26px, 3.2vw, 38px); hyphens: auto; }
}

@media (max-width: 979px) {
  .steh-band { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .steh-titel { position: static; order: -1; }
  .steh-karte { position: static; transform: none; }
}


/* Buttons erben Schriften nicht automatisch – einheitlich Poppins, auch
   für die Symbol-Knöpfe (Burger, Menü), damit keine Systemschrift streut. */
button, input, select, textarea { font-family: inherit; }



/* Dunkelgrün verspiegelt: dieselbe Glasgrammatik auf den dunklen Flächen –
   Lichtkante oben, diagonales Spiegelband, das beim Zeigen einmal
   hinüberfährt. Als background-image getrennt von der Farbfläche, damit
   die bestehenden Hover-Farbwechsel unberührt bleiben. */
.lf-card, .steh-karte, .tiles--exp .tile,
.dl-panel, .xlink-panel--gruen, .lu-band, .trio--dark > div, .next-link {
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .10) 50%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 42%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
}
.lf-card:hover, .steh-karte:hover, .tiles--exp .tile:hover,
.dl-panel:hover, .xlink-panel--gruen:hover, .lu-band:hover, .trio--dark > div:hover,
.next-link:hover {
  background-position: -30% 0, 0 0;
  transition: background-position .9s var(--ease), background-color .3s ease,
              transform .3s var(--ease), box-shadow .3s var(--ease);
}



/* Hero-Seitenmenü: nackte Versalien in Normalgewicht, etwas größer.
   Die Bewegung: Beim Zeigen öffnet sich die Laufweite und eine feine
   Linie zeichnet sich von links unter das Wort – ruhig, präzise, modern.
   Der Kontakt-Link läuft im selben Stil mit. */
.hero-side-links a, .hero-side-contact {
  display: block; position: relative; width: fit-content;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 11px 0 !important; border-radius: 0 !important;
  font-size: clamp(16px, 1.55vw, 22px); font-weight: 400;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: letter-spacing .5s var(--ease), color .3s ease;
}
.hero-side-links a::after, .hero-side-contact::after {
  content: "" !important; position: absolute; left: 0; bottom: 5px;
  width: 100%; height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.hero-side-links a:hover, .hero-side-contact:hover {
  background: transparent !important; color: var(--green);
  letter-spacing: .16em; transform: none;
}
.hero-side-links a:hover::after, .hero-side-contact:hover::after {
  transform: scaleX(1); color: transparent;
}

/* Alle Menüs in Versalien: Hauptnavigation, Dropdowns, Schnellmenü, Footer.
   Schriftgrad leicht reduziert und Laufweite geöffnet, damit die Zeile
   auf einer Linie bleibt und Versalien nicht schreien. */
.main-nav > .nav-item > a {
  text-transform: uppercase; letter-spacing: .07em;
  font-size: 11.5px; font-weight: 600;
}
.dropdown a, .quick-cols a, .footer-nav a {
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
}

/* ==================================================================
   Studio-Schicht: die Bewegungssprache des Hero-Menüs (nackte Typo,
   Linienzug, Laufweite) konsequent über die ganze Site gezogen.
   Dokumentierte Formregel ab hier: Buttons kantig (3px), Karten weich –
   der bewusste Kontrast ist Teil der Handschrift. */

/* 1) Buttons tragen denselben Radius wie die Kacheln – eine Grundform
   für alle Flächen, nur in unterschiedliche Höhen und Breiten gezogen.
   Dazu gesperrte Laufweite und der Spiegel-Sweep beim Zeigen. */
.btn, .btn--outline {
  /* Kachel-Formfamilie, aber im Radius auf Knopfhöhe skaliert: 18px auf
     ~40px Höhe wirkt oval – 10px liest sich wie die Kachel, nur kleiner */
  border-radius: 10px;
  letter-spacing: .16em;
}
.btn {
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  transition: background-color .25s ease, background-position .8s var(--ease), transform .25s var(--ease);
}
.btn:hover { background-position: -30% 0; }

/* 2) Textlinks ("Mehr erfahren", "Unser Selbstverständnis" …):
   Versalien mit Linienzug von links – identisch zum Hero-Menü. */
.imgcard-link, .lf-more {
  position: relative;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: 11.5px; font-weight: 500;
  padding-bottom: 6px;
  transition: letter-spacing .45s var(--ease), color .3s ease;
}
.imgcard-link::before, .lf-more::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.imgcard-link:hover, .lf-more:hover { letter-spacing: .16em; }
.imgcard-link:hover::before, .lf-more:hover::before { transform: scaleX(1); }

/* 3) Hauptnavigation: Linienzug statt bloßem Farbwechsel */
.main-nav > .nav-item > a { position: relative; padding-bottom: 4px; }
.main-nav > .nav-item > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.main-nav > .nav-item > a:not(.btn):hover::after,
.main-nav > .nav-item > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

/* 4) Dropdown-, Schnellmenü- und Footer-Punkte: sanfter Einzug beim Zeigen */
.dropdown a, .quick-cols a, .footer-nav a {
  transition: color .25s ease, transform .35s var(--ease);
}
.dropdown a:hover, .quick-cols a:hover, .footer-nav a:hover { transform: translateX(5px); }

/* 5) Markendetails: Textauswahl und Scrollbalken in Kanzleifarbe */
::selection { background: var(--green); color: #fff; }
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
}


/* ==================================================================
   Hero-Entfaltung: Ganz oben füllt das Luftbild die komplette Fläche –
   die ersten 35% der Bühnenfahrt falten es in den Kasten (Breite, Höhe,
   Radius, Kopfabstand laufen synchron), danach übernimmt die bestehende
   Verwandlung (--s). Ersetzt die separate Bild-Landung: ein Bild, eine
   Geste, vollständig scrollgetrieben und damit auch rückwärts erlebbar.
   Nur am Desktop und ohne Bewegungsreduktion – die statischen Pfade
   behalten den Kasten-Zustand. */
@media (min-width: 741px) and (prefers-reduced-motion: no-preference) {
  /* 140vh: Der Pin nimmt 100vh, es bleiben 40vh Scrollweg für die
     Verwandlung – genug, dass sie ruhig läuft statt durchzurauschen. */
  .hero-stage { height: 140vh; }
  /* Das Panel steht von Beginn an im Kasten – die frühere Entfaltung aus
     dem randlosen Vollbild entfällt. Die Bühnenfahrt bewegt es nur noch
     nach links, während rechts das Menü auftritt. */
  .hero-stage .hero-full--square {
    width: min(calc(100vw - clamp(32px, 5vw, 80px)), var(--maxw), calc((100vh - 112px) * 1.6));
    margin-top: 0;
    transform: translateX(calc(var(--p) * -13%)) scale(calc(1 - var(--p) * .30));
  }
  .hero-stage .hero-full--square .hero-media {
    height: auto; aspect-ratio: 16 / 10;
    border-radius: calc(var(--radius) + 10px);
  }
  /* Der frühere Kopfzeilen-Scrim (fixer 150px-Dunkelverlauf an der
     Oberkante) entfällt: Seit das Menüband eine opake weiße Leiste ist,
     braucht es keine Abdunklung mehr – und ein fixer Verlauf skaliert
     nicht mit dem einfaltenden Bild. Die Lesbarkeit der Bildschrift
     sichert weiterhin der proportionale Film (::after). */
  .hero-stage .hero-caption {
    opacity: calc(1 - var(--p) * 1.8);
    /* Bei Vollfläche rutscht die Überschrift 10vh tiefer, damit sie frei
       unter der schwebenden Menüzeile steht – beim Einfalten wandert sie
       auf ihre gewohnte Position zurück */
    top: calc(clamp(52px, 12%, 118px) + (1 - var(--e, 1)) * 16vh);
  }
}

/* ==================================================================
   Editorial-Schicht nach Case-Study-Vorbild: Meta-Raster, riesige
   Display-Typo im Vollflächen-Hero, größere Statement-Stimme. */
/* Statement-Stimme: die grünen Leitsätze wachsen auf Editorial-Format –
   große, ruhige Zeilen statt fetter Absätze */
.lead-green {
  font-size: clamp(24px, 2.7vw, 40px);
  font-weight: 400; line-height: 1.35; letter-spacing: -0.015em;
  max-width: 26ch;
}

/* Vollflächen-Hero: Display-Typo in Case-Study-Größe, faltet mit dem
   Bild auf das gewohnte Maß zurück */
@media (min-width: 741px) and (prefers-reduced-motion: no-preference) {
  .hero-stage .hero-caption h1 .hero-line1 {
    font-size: calc(clamp(30px, 4vw, 52px) + (1 - var(--e, 1)) * 5.5vw);
    line-height: 1.04;
  }
}


/* Kopf über dem Vollbild: Die weiße Menüleiste schwebt von Anfang an
   sichtbar über dem Bild – kein transparenter Zwischenzustand mehr,
   das Menü ist ab Scroll 0 präsent. */


/* ==================================================================
   Druckansicht: Navigation, Werkzeug-Chrome und Animations-Hilfen
   verschwinden, Inhalte stehen schwarz auf weiß, Aufklapper sind offen.
   Eine Kanzleiseite wird gedruckt und abgeheftet – das soll sauber
   aussehen. */
@media print {
  .site-header, .site-footer, .quick-toggle, .nav-toggle,
  .nach-oben, .anruf-knopf, .brotkrumen, .lese-fortschritt, .lade-balken, .br-pfeil, .ck-banner,
  .hero-side, .bereiche, .btn, .glanz { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding-top: 0 !important; }
  .hero-stage, .lf-stage, .grid-stage { height: auto !important; }
  .hero-pin, .stage-pin { position: static !important; height: auto !important; }
  .hero-stage .hero-full--square { transform: none !important; width: 100% !important; margin: 0 !important; }
  .steh-karte, .lf-card, .trio--dark > div, .dl-panel, .xlink-panel--gruen,
  .lu-band, .tiles--exp .tile, .facts, .next-link {
    background: #fff !important; color: #000 !important;
    border: 1px solid #999 !important; box-shadow: none !important;
  }
  .steh-karte *, .lf-card *, .trio--dark *, .dl-panel *, .facts *,
  .next-link * { color: #000 !important; }
  details { break-inside: avoid; }
  details > *:not(summary) { display: block; }
  a { color: #000; text-decoration: underline; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .wv .wv-i { transform: none !important; }
}

/* KI-Netz-Band (Digitale Transformation): dunkles Vollband, die Sphäre
   dreht ambient hinter dem Text. Canvas ist rein dekorativ (aria-hidden). */
.ki3d-band {
  position: relative; overflow: hidden;
  background: #3a4538;
  /* Als große Kachel im Satzspiegel, nicht randlos – gleiche Rundung wie
     die übrigen dunklen Flächen (dl-panel, lu-band) */
  width: min(calc(100% - clamp(32px, 5vw, 80px)), var(--maxw));
  margin: clamp(56px, 7vw, 100px) auto;
  border-radius: calc(var(--radius) + 10px);
  min-height: clamp(420px, 58vh, 620px);
  display: flex; align-items: center;
}
.ki3d-band canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.ki3d-inhalt { position: relative; z-index: 1; }
/* Geerbte Sektions-Margins neutralisieren – das Band bemisst sich selbst */
.ki3d-inhalt .eyebrow { margin-top: 0; }
.ki3d-inhalt .sec-title { margin: 12px 0 16px; }
.ki3d-band .eyebrow { color: #a9b7a1; }
.ki3d-text { font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .82); max-width: 52ch; margin: 0; }