/* =============================================================
   MINALEX — Globale Styles
   Das Layout liegt als Inline-Styles an den Elementen; hier stehen
   die globalen Regeln: Grundfläche, Kopfzeile, Mega-Dropdown,
   Layout-Helfer und Animationen.
   ============================================================= */

/* ========== FARBSCHEMA (60/30/10) ==========================
   60 %  Creme  #FDFBF7 — dominante Flaechen, Seitenhintergrund
   30 %  Weiss  #FFFFFF — Karten, Panels, Navigation
   10 %  Indigo #4338CA — Buttons, Links, Akzente
         Flieder #C0BBEB — Stuetzton (Linien, Icons, Verlaeufe)
         Footer  #BCB8E9 — unveraendert
   Einzige Quelle der Wahrheit: Seiten definieren keine eigenen :root-Bloecke.
   ========================================================== */
:root {
  --bg-primary: #FDFBF7;
  --bg-light: #FDFBF7;
  --bg-secondary: #FFFFFF;
  --bg-footer: #BCB8E9;

  --color-primary: #4338CA;
  --color-primary-light: rgba(67, 56, 202, 0.08);
  --color-primary-hover: rgba(67, 56, 202, 0.12);

  --color-secondary: #C0BBEB;
  --color-secondary-light: rgba(192, 187, 235, 0.18);
  --color-secondary-hover: rgba(192, 187, 235, 0.32);
  --color-secondary-tint: #EFEEF9;

  --text-dark: #111827;
  --text-main: #1F2937;
  --text-light: #6B7280;
  --text-muted: #555555;

  --border-color: #E5E7EB;
  --border-subtle: #ECEBF2;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-primary);
  /* Linksbündig statt Blocksatz: Der Blocksatz des Entwurfs riss in den
     schmalen Karten- und Rasterspalten grosse Wortlücken auf. */
  text-align: left;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-dark);
}
::selection { background: #4338CA; color: #fff; }
/* Schlüsselwort in einer Überschrift */
.hl { color: #4338CA; }
/* Sicherheitsnetz: Montserrat läuft breiter als die frühere Textschrift; ein
   einzelnes langes Wort darf seine Box nicht sprengen. */
h1, h2, h3 { overflow-wrap: break-word; }
input::placeholder, textarea::placeholder { color: #6B7280; }
input:focus, textarea:focus, select:focus { outline: 2px solid #4338CA; outline-offset: 1px; }
:focus-visible { outline: 2px solid #4338CA; outline-offset: 2px; }

/* ── Kopfzeile ──────────────────────────────────────────────────
   Fixiert, damit der Farbverlauf der ersten Sektion bis an den
   oberen Rand reicht und kein andersfarbiger Balken entsteht. */
/* Titelschrift an einer Stelle: ein Wechsel betrifft alle Überschriften. */
/* ── Schriften ──────────────────────────────────────────────────
   Titel und Fliesstext in Montserrat; Persönlichkeit kommt über die
   Akzentfarbe einzelner Schlüsselwörter (.hl), nicht über eine zweite Schrift.
   Das Wortzeichen MINALEX kommt als Bilddatei (siehe .logo-img); --font-logo
   greift nur, solange die Bilddatei fehlt und der Schriftzug gesetzt wird. */
:root {
  --header-h: 88px;
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-logo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Wortzeichen als Bild: Höhe an der Textfassung ausgerichtet, damit der
   Wechsel die Kopfzeilenhöhe nicht verändert. */
.logo-img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
footer .logo-img { height: 26px; }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 14px 24px;
}
/* Hinterlegung der ganzen Leistenbreite: Ohne sie scrollt der Inhalt sichtbar
   rund um die schmale, schwebende Leiste durch. Sie erscheint erst beim
   Scrollen, damit der Farbverlauf oben unberührt bleibt. */
.site-header::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  /* Deckend, nicht bloss transluzent: bei 0.88 blieb scharfer Text neben und
     über der Leiste sichtbar. */
  background: #FDFBF7;
  border-bottom: 1px solid #ECEBF2;
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }
main > section:first-of-type { padding-top: calc(var(--header-h) + 28px); }

/* Kein backdrop-filter mehr: Die Leiste ist fixiert, deshalb musste der Browser
   den Hintergrund dahinter bei jedem Scroll-Bild neu abgreifen und weichzeichnen
   — auf iOS eine der teuersten Stellen der Seite. Bei 92 % Deckkraft war davon
   ohnehin kaum etwas zu sehen; die zwei Prozentpunkte mehr schliessen die Luecke. */
.nav-bar {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px; border-radius: 16px;
  background: rgba(255,255,255,0.94);
  border: 1px solid #ECEBF2; box-shadow: 0 4px 24px -12px rgba(90,70,30,0.14);
  display: flex; align-items: center; gap: 18px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 8px; }
/* Die Schaltflaeche oben rechts bleibt einzeilig; zweizeilig sprengt sie
   die Leiste. Auf engen Breiten wird sie dafuer etwas schmaler gesetzt. */
.nav-cta { white-space: nowrap; }
@media (max-width: 1120px) {
  .nav-links { gap: 4px; }
  .nav-link { padding: 10px 12px; }
  .nav-cta { padding: 10px 14px !important; font-size: 15px !important; }
}
.nav-service { position: relative; }
.nav-link {
  padding: 10px 16px; border-radius: 999px; border: none; background: transparent;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  color: #555555; text-decoration: none; white-space: nowrap;
}
/* Kein eigener Schriftschnitt: die Aufklapper sollen gleich wiegen wie die
   übrigen Menüpunkte (600 aus .nav-link). */
.nav-service-btn { color: #111827; }
/* Dieselbe Reaktion auf allen Menüpunkten, nicht nur auf „Dienstleistungen“:
   gleiche Farbe, gleiche Hinterlegung, gleiches Anheben. Die allgemeine
   button-Regel weiter unten hätte sonst nur die Schaltfläche angehoben. */
.nav-link {
  transition: color 0.18s ease, background 0.18s ease,
              transform 0.18s cubic-bezier(.22,.68,.32,1), box-shadow 0.18s ease;
}
.nav-link:hover, .nav-link:focus-visible,
.nav-service-btn[aria-expanded="true"] {
  color: #4338CA; background: #EFEEF9;
  transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(67,56,202,0.75);
}
.nav-link:active { transform: translateY(0); box-shadow: none; }
.nav-link.is-active { color: #111827; }

/* Schnellzugriff auf dem Handy: Telefon und Kontaktformular links vom Menü */
.nav-quick { display: none; flex: none; gap: 8px; }
.nav-icon-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid #ECEBF2; border-radius: 999px;
  background: #fff; color: #4338CA; text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nav-icon-btn:hover { background: #EFEEF9; border-color: #C0BBEB; }
@media (max-width: 980px) { .nav-quick { display: flex; } }

/* Burger nur auf schmalen Viewports */
.nav-burger {
  flex: none;
  display: none; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; border: 1px solid #ECEBF2;
  border-radius: 999px; background: #fff; cursor: pointer;
  /* Immer das äusserste Element rechts, mit sichtbarem Abstand zu den
     Schnellzugriffen — im offenen Zustand ist es das Schliesskreuz. */
  order: 99; margin-left: 10px;
}
/* Die drei Striche brauchen eine eigene Breite: Safari/WebKit setzt für
   <button> in seiner Browser-Vorgabe align-items: flex-start. Ohne die
   Angaben hier dehnen sich die leeren Spans dort nicht auf die Knopfbreite,
   werden 0 Pixel breit — und der Menüknopf bleibt ein leerer Kreis.
   Chrome und Firefox strecken sie von selbst, deshalb fiel es nur auf iOS auf. */
.nav-burger span {
  display: block; flex: none; width: 100%; height: 2px;
  background: #111827; border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-bar.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-bar.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-bar.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  :root { --header-h: 76px; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none; order: 100; width: 100%; flex-direction: column;
    align-items: stretch; gap: 2px; padding-top: 10px; margin-top: 4px;
    border-top: 1px solid #ECEBF2;
    max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
  }
  .nav-bar.menu-open { flex-wrap: wrap; }
  .nav-bar.menu-open .nav-links { display: flex; }
  .nav-link { padding: 12px 10px; white-space: normal; }
  .nav-cta { text-align: center; margin-top: 8px; white-space: normal; }
}

/* ── Mega-Dropdown ─────────────────────────────────────────────
   Die Rechtsgebiete sind selbst anklickbar; die Themen-Panels
   öffnen alle auf derselben Höhe (oben am Menü, nicht am Eintrag). */
#service-dd { display: contents; }
#service-dd[hidden] { display: none; }

.dd-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; }
.dd-menu {
  position: absolute; top: 100%; left: -60px; margin-top: 8px;
  background: #ECEBF2; border: 1px solid #ECEBF2; border-radius: 16px;
  box-shadow: 0 16px 48px -12px rgba(30,27,75,0.22);
  z-index: 10; min-width: 240px; padding: 8px 0;
}
.dd-area { position: static; }
.dd-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; font-size: 16px; font-weight: 500;
  color: #111827; text-decoration: none; cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.dd-area:hover > .dd-label,
.dd-area:focus-within > .dd-label {
  background: #fff; color: #4338CA; border-left-color: #4338CA;
}
.dd-panel {
  display: none;
  position: absolute; left: 100%; top: 0; min-height: 100%;
  background: #fff; border: 1px solid #ECEBF2; border-radius: 0 16px 16px 0;
  padding: 18px 24px; min-width: 300px;
  box-shadow: 12px 12px 32px -16px rgba(30,27,75,0.22);
  z-index: 11;
}
.dd-area:hover > .dd-panel,
.dd-area:focus-within > .dd-panel { display: block; animation: ddIn 0.18s ease-out both; }
@keyframes ddIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.dd-link {
  display: block; padding: 8px 0; font-size: 16px; color: #1F2937;
  text-decoration: none; border: none; background: transparent;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.dd-link:hover { color: #4338CA; padding-left: 5px; }

/* ── Layout-Helfer (Inhalt + Seitenleiste) ─────────────────────── */
.layout-main-side { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.layout-side-main { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.side-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
/* Raster-Kinder dürfen schrumpfen, sonst weitet langer Text die Spalte */
.layout-main-side > *, .layout-side-main > * { min-width: 0; }

/* Preiszeilen: Bezeichnung darf umbrechen, der Preis bleibt rechts daneben.
   Lange Komposita müssen trennbar sein, sonst laufen sie über ihre Box
   hinaus und stossen an den Preis. */
.arrow-link > span:first-child {
  min-width: 0; hyphens: auto; overflow-wrap: break-word;
}

@media (max-width: 560px) {
  /* Formulare kompakter und mit weniger Rand auf schmalen Geräten */
  .ff { margin-bottom: 14px; }
  .form-card { padding: 22px 18px !important; }
  /* Mehr Innenbreite für die Preiszeilen, damit die Bezeichnung seltener
     mitten im Wort bricht */
  .price-card { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (max-width: 980px) {
  .dd-scrim { display: none; }
  .dd-menu {
    position: static; margin: 4px 0 8px; min-width: 0;
    box-shadow: none; background: #ECEBF2;
  }
  .dd-panel {
    position: static !important; min-width: 0 !important;
    border: none !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 2px 22px 12px !important;
  }
  /* Auf Touch-Geräten sind die Themen immer sichtbar, nicht per Hover */
  .dd-area > .dd-panel { display: block; animation: none; }
}

@media (max-width: 900px) {
  .layout-main-side, .layout-side-main { grid-template-columns: 1fr; }
  .side-sticky { position: static; }
}

/* ── Animationen ───────────────────────────────────────────────
   Sektionen und Karten blenden beim Hereinscrollen sanft ein.
   Ohne JavaScript bleibt alles sichtbar (siehe .no-js unten). */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Grundzustand sichtbar. Ausgeblendet wird nur, wenn <html> die Klasse "anim"
   traegt — die setzt das Kopf-Skript, und zwar nur, wenn die Einblendung auch
   laufen kann. Umgekehrt (Grundzustand unsichtbar) haengt die ganze Seite an
   app.js: kommt das Skript nicht durch, bleibt sie leer. */
[data-animate] { opacity: 1; }
html.anim [data-animate] { opacity: 0; }
[data-animate].is-in {
  animation: riseIn 0.62s cubic-bezier(.22,.68,.32,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
/* Nach dem Einblenden die Animation abwerfen: Ihr fill-mode hielte sonst
   transform:none fest und würde jeden :hover-Transform überstimmen.
   Die Auswahl muss html.anim mitnehmen, sonst gewinnt die Ausblend-Regel
   oben und das eingeblendete Element verschwindet wieder. */
html.anim [data-animate].anim-done,
[data-animate].anim-done { animation: none !important; opacity: 1; }

/* Buttons und Karten: ruhige, elegante Hover-Reaktion */
button, a.btn {
  transition: transform 0.18s cubic-bezier(.22,.68,.32,1),
              box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
button:hover, a.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(67,56,202,0.55); }
button:active, a.btn:active { transform: translateY(0); box-shadow: none; }
a { transition: color 0.15s ease; }

/* Themen- und Preiszeilen: Pfeil wandert beim Überfahren mit */
.arrow-link .arrow { display: inline-block; transition: transform 0.22s cubic-bezier(.22,.68,.32,1); }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* Karten mit Rahmen heben sich beim Überfahren leicht an */
.lift { transition: transform 0.22s cubic-bezier(.22,.68,.32,1), box-shadow 0.22s ease, border-color 0.22s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(30,27,75,0.45); border-color: #E5E7EB; }

/* Ablauf-Kette in der Etappen-Übersicht:
   [Offerte n] → [Vorschuss] → [Fallbearbeitung]
   Auf schmalen Geräten untereinander mit nach unten zeigendem Pfeil. */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.flow-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
}
.flow-arrow { color: #6B7280; font-size: 16px; line-height: 1; }

@media (max-width: 560px) {
  .flow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .flow-arrow { transform: rotate(90deg); margin-left: 14px; }
}

/* Vorteils-Karten „Für Anwälte“: Akzentlinie wächst beim Überfahren */
.perk { position: relative; overflow: hidden; }
.perk::after {
  content: ''; position: absolute; left: 26px; right: 26px; bottom: 20px; height: 2px;
  background: linear-gradient(90deg, #4338CA, #C0BBEB);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s cubic-bezier(.22,.68,.32,1);
}
.perk:hover::after, .perk:focus-within::after { transform: scaleX(1); }
/* Symbol und Bezeichnung stehen nebeneinander */
.perk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.perk-head svg { display: block; }

/* Kompaktes Kontaktformular (Label fett darüber, gefülltes Feld ohne Rahmen) */
.ff { margin-bottom: 18px; }
.ff > label {
  display: block; font-size: 16px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 8px;
}
.ff > input, .ff > select, .ff > textarea {
  width: 100%; padding: 14px 16px; border: 1px solid transparent;
  border-radius: 12px; background: var(--border-subtle); font: inherit; font-size: 16px;
  color: var(--text-dark); box-sizing: border-box;
}
.ff > textarea { line-height: 1.6; resize: vertical; }
.ff > input:hover, .ff > select:hover, .ff > textarea:hover { background: var(--border-color); }
.ff > input:focus, .ff > select:focus, .ff > textarea:focus {
  background: var(--bg-secondary); border-color: var(--color-primary);
}
.ff > input::placeholder, .ff > textarea::placeholder { color: var(--text-light); }
.ff > select { appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }

/* Zweispaltige Formularzeile, auf dem Handy einspaltig */
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .ff-row { grid-template-columns: 1fr; } }

/* Über uns: links Foto und darunter der Kontakt, rechts das Profil.
   Auf dem Handy stapeln sich die Blöcke als Foto → Profil → Kontakt. */
/* Zwei Zeilen: oben Name, Titel, Porträt und Kurzbeschrieb allein in der
   linken Spalte, darunter Lebenslauf links und Kontakt rechts. Dadurch
   beginnt der Kontakt genau auf der Höhe des Lebenslaufs, ohne dass ein
   fester Pixelwert die Textlänge raten müsste. */
.layout-lawyer {
  display: grid; grid-template-columns: 1fr minmax(300px,400px);
  gap: 0 44px; align-items: start;
  grid-template-areas:
    "kopf ."
    "rest kontakt";
}
/* Das Porträt steht innerhalb der Textspalte, direkt unter der
   Berufsbezeichnung. Die Breite ist begrenzt, sonst wird es zu wuchtig. */
.lawyer-photo   { max-width: 340px; }
.lawyer-kopf    { grid-area: kopf; }
.lawyer-rest    { grid-area: rest; }
/* Der Lebenslauf beginnt mit Trennlinie und 20px Innenabstand. Damit die
   beiden Beschriftungen auf einer Linie sitzen, bekommt der Kontakt
   denselben Vorlauf. */
.lawyer-contact { grid-area: kontakt; padding-top: 21px; }
@media (max-width: 900px) {
  .layout-lawyer { grid-template-columns: 1fr; grid-template-areas: "kopf" "rest" "kontakt"; }
  .lawyer-contact { margin-top: 28px; padding-top: 0; }
  .lawyer-photo { max-width: none; }
}

/* Startseite: Foto der Anwältin — hoch genug für Wirkung, niedrig genug,
   um auf einem 14-Zoll-Notebook ohne Scrollen ins Bild zu passen. Die Spalte
   ist auf die Bildbreite begrenzt, sonst steht das Bild verloren in der Fläche. */
.layout-intro {
  display: grid; grid-template-columns: minmax(0, 400px) 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.layout-intro > * { min-width: 0; }
@media (max-width: 860px) { .layout-intro { grid-template-columns: 1fr; } }

.home-photo {
  display: flex; align-items: center; justify-content: center;
  /* Seitenverhältnis wie das Porträt selbst (2:3), damit der Oberkörper
     ganz im Bild bleibt. Ohne Höhenbremse: eine solche greift auf
     flachen Fenstern und beschneidet trotz passendem Verhältnis wieder. */
  aspect-ratio: 2/3; width: 100%;
  background: #ECEBF2; border: 1px dashed #E5E7EB;
  border-radius: 20px; color: #6B7280; font-size: 16px; text-decoration: none;
  transition: transform 0.22s cubic-bezier(.22,.68,.32,1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.home-photo { position: relative; overflow: hidden; }
.home-photo img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Der Hinweis liegt dauerhaft unter der Bildfläche. Ist die Datei da,
   deckt das Bild ihn ab; fehlt sie, entfernt onerror das Bild und der
   Hinweis wird sichtbar. Ihn per CSS auszublenden, sobald ein img im
   Markup steht, ginge schief: mit loading="lazy" wird die Datei erst
   beim Heranscrollen angefordert, die Fläche bliebe bis dahin leer. */
.foto-platzhalter { position: relative; z-index: 0; }
.home-photo:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(30,27,75,0.45); border-color: #4338CA; }

/* Der gestrichelte Rahmen markiert nur eine leere Fläche. Steht ein Bild im
   Markup, fällt er weg — auch beim Überfahren mit der Maus. Fehlt die Datei,
   entfernt onerror das img und der Rahmen kommt zurück. */
.lawyer-photo { border: 1px dashed var(--border-color); }
.home-photo:has(img), .lawyer-photo:has(img) { border-style: none; }

/* Wertestreifen der Startseite: die Frage vorangestellt, danach die vier
   Punkte gleichmässig über die restliche Breite verteilt. Die Symbole sitzen
   auf einer runden, leicht schattierten Fläche, damit sie kräftiger wirken. */
/* Runder Punkt hinter dem Symbol, deutlich heller als das Symbol selbst —
   ohne Schatten, damit die Strichform sauber bleibt. */
.value-bar {
  max-width: 1180px; margin: 0 auto;
  background: var(--bg-footer);
  border-radius: 12px;
  padding: 26px 34px;
}
.value-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary);
}
/* Die Symbole liegen als eingefaerbte SVG-Dateien vor; auf dem Balken
   werden sie einheitlich weiss ausgegeben. */
.value-icon img { filter: brightness(0) invert(1); }
.value-item { align-items: center; }
.value-strip {
  display: grid; grid-template-columns: auto repeat(4, 1fr);
  gap: 24px; align-items: center; justify-items: start;
}
.value-title {
  justify-self: start; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 600; letter-spacing: -0.005em; color: var(--text-dark);
}
@media (max-width: 1180px) {
  .value-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
  .value-title { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .value-strip { grid-template-columns: 1fr; } }

/* ── Titelbereich der Rechtsgebiet-Seiten ───────────────────────
   Nimmt den Mesh-Verlauf der Startseite auf, aber deutlich
   abgeschwaecht (rund 40 % der dortigen Deckkraft), damit der Titel
   ruhig bleibt. Die Farbstuetzen liegen auf einem Pseudo-Element,
   der Inhalt darueber. */
.page-hero { position: relative; overflow: hidden; background: var(--bg-primary); }
/* Ohne filter:blur(): Der Filter zwang den Compositor zu einem eigenen Puffer
   ueber die volle Titelflaeche. Die Verlaufsstopps laufen stattdessen etwas
   frueher aus — optisch dieselbe Weichheit, ohne Rasterkosten. */
.page-hero::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 66% 99% at 88% 8%,  rgba(67,56,202,0.13) 0%, transparent 72%),
    radial-gradient(ellipse 50% 76% at 72% 42%, rgba(110,76,234,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 60% 96% at 10% 96%, rgba(226,206,158,0.22) 0%, transparent 74%),
    radial-gradient(ellipse 54% 78% at 34% 4%,  rgba(243,226,186,0.31) 0%, transparent 70%),
    radial-gradient(ellipse 44% 74% at 99% 94%, rgba(160,143,238,0.18) 0%, transparent 70%);
}
.page-hero > * { position: relative; z-index: 1; }

/* ── Farbschleier des Startseiten-Heros ─────────────────────────
   Loest die frueheren sechs Ebenen mit filter:blur(100-130px) ab. Ein
   Filter bekommt je Ebene einen eigenen Compositor-Puffer, der um den
   Gauss-Rand herum weit ueber die Elementgroesse hinauswaechst; auf einem
   iPhone summierte sich das auf rund 190 MB Grafikspeicher. Weich
   auslaufende Verlaufsstopps liefern dieselbe Optik zum Nulltarif. */
.hero-aura {
  pointer-events: none;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 78% 120% at 94% -18%, rgba(67,56,202,0.30)  0%, rgba(67,56,202,0.12) 42%, transparent 74%),
    radial-gradient(ellipse 46% 82%  at 62% 48%,  rgba(110,76,234,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 62% 104% at 18% 112%, rgba(226,206,158,0.50) 0%, transparent 72%),
    radial-gradient(ellipse 52% 82%  at 38% -12%, rgba(243,226,186,0.70) 0%, transparent 70%),
    radial-gradient(ellipse 42% 72%  at 102% 96%, rgba(160,143,238,0.40) 0%, transparent 70%),
    radial-gradient(ellipse 36% 62%  at 56% 72%,  rgba(250,242,228,0.80) 0%, transparent 66%);
}

/* Der Balken auf "Fuer Anwaelte" nimmt die Farbe des Warum-MINALEX-Balkens
   der Startseite auf und setzt damit eine Zaesur zwischen Text und Formular. */
.perk-bar {
  background: var(--bg-footer);
  border-radius: 0;
  padding: clamp(32px, 4vw, 48px) 24px;
}
.perk-bar-inner { max-width: 1180px; margin: 0 auto; }
.perk-bar .perk-head { margin-bottom: 12px; }

/* ── Titelbereich mit Bild ──────────────────────────────────────
   Text links, Bild rechts. Fehlt die Bilddatei, bleibt die Flaeche
   als Flieder-Flaeche stehen, statt ein kaputtes Bild zu zeigen. */
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: center;
}
.hero-media {
  position: relative; align-self: stretch; min-height: 320px;
  border-radius: 12px; overflow: hidden; background: var(--color-secondary);
}
.hero-media img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-media { min-height: 220px; }
}

/* Titelbereich, dessen Hintergrund ein Foto traegt. Der Verlauf darueber
   haelt die Schrift lesbar, unabhaengig vom Motiv. */
.hero-photo { position: relative; overflow: hidden; background: var(--text-dark); }
.hero-photo-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(100deg, rgba(17,24,39,0.88) 0%, rgba(17,24,39,0.66) 48%, rgba(17,24,39,0.38) 100%);
}
.hero-photo-inner { position: relative; z-index: 1; }
.hero-photo .hl { color: var(--color-secondary); }

/* Platzhalterflaeche, solange ein Foto fehlt */
.hero-media--platzhalter {
  display: flex; align-items: center; justify-content: center;
  background: var(--border-subtle); border: 1px dashed var(--border-color);
  color: var(--text-light); font-size: 16px; text-align: center; padding: 24px;
}

/* ── Preisliste: aufklappbare Positionen ────────────────────────
   <details>/<summary> statt eigener Klapp-Logik: das funktioniert ohne
   JavaScript, laesst sich mit der Tastatur bedienen und kann nicht
   ausfallen. Die Flex-Zeile sitzt in einem eigenen Element im summary —
   display:flex direkt auf summary vertraegt sich mit aelterem Safari
   nicht zuverlaessig. */
.preis-pos { border-bottom: 1px solid var(--border-subtle); }
.preis-pos:last-child { border-bottom: none; }
.preis-pos > summary { list-style: none; cursor: pointer; }
.preis-pos > summary::-webkit-details-marker { display: none; }
.preis-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0; font-size: 16px; color: var(--text-main);
}
.preis-ab {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; white-space: nowrap; color: var(--color-primary);
}
/* Winkel aus zwei Rahmenkanten, dreht sich beim Aufklappen. */
.preis-ab::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.preis-pos[open] > summary .preis-ab::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* Die Aufhebungsvereinbarung hat keine Teilpreise und klappt nicht auf. */
.preis-ab--flach::after { content: none; }

/* Die drei Stufen bauen aufeinander auf; die Ziffern sind durch eine Linie
   verbunden, wie im Ablauf «So gehen wir vor». */
.preis-stufen { list-style: none; margin: 0; padding: 0 0 14px; }
.preis-stufen li {
  position: relative;
  display: grid; grid-template-columns: 26px 1fr auto;
  grid-template-areas: "nr titel preis" ".  text  text";
  gap: 2px 14px; padding-bottom: 18px;
}
.preis-stufen li:last-child { padding-bottom: 6px; }
/* Verbindungslinie von Ziffer zu Ziffer. */
.preis-stufen li:not(:last-child)::before {
  content: ""; position: absolute; left: 12px; top: 28px; bottom: 4px;
  width: 2px; background: var(--border-subtle);
}
.preis-nr {
  grid-area: nr; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--color-secondary-tint); color: var(--color-primary);
  font-size: 13px; font-weight: 700;
}
.preis-stufe-titel { grid-area: titel; font-size: 16px; color: var(--text-main); }
.preis-stufe-preis { grid-area: preis; white-space: nowrap; font-weight: 600; color: var(--text-main); }
.preis-stufe-preis sup { font-size: 0.7em; color: var(--text-light); }
.preis-stufe-text { grid-area: text; font-size: 15px; line-height: 1.5; color: var(--text-light); }
.preis-mehr {
  display: inline-block; margin: 0 0 18px;
  font-size: 15px; font-weight: 600; color: var(--color-primary); text-decoration: none;
}
.preis-mehr:hover { text-decoration: underline; }
/* Auf schmalen Fenstern rutscht der Preis unter den Titel, sonst wird die
   Titelspalte zu eng und bricht in Einzelwoerter. */
@media (max-width: 560px) {
  .preis-stufen li {
    grid-template-columns: 26px 1fr;
    grid-template-areas: "nr titel" ".  preis" ".  text";
  }
  .preis-stufe-preis { justify-self: start; }
}

/* ── Startseite: eckige Formen ──────────────────────────────────
   Nur die Startseite (body.home) laeuft ohne Rundungen; die Kopfzeile
   liegt ausserhalb von <main> und bleibt daher abgerundet. Die runden
   Zahlen- und Symbolkreise sind Grafik, keine Bedienelemente, und
   bleiben ebenfalls unangetastet. */
body.home main [style*="border-radius:999px"],
body.home main [style*="border-radius: 999px"],
body.home main [style*="border-radius:18px"],
body.home main [style*="border-radius:16px"],
body.home main [style*="border-radius:12px"],
body.home main [style*="border-radius: 12px"],
body.home main .btn,
body.home main button,
body.home main input,
body.home main select,
body.home main textarea,
body.home .value-bar,
body.home .rg-block,
body.home .rg-tile,
body.home .rg-tile-btn { border-radius: 0 !important; }

/* ── Wort-Animation im Titel (Schreibmaschine) ───────────────────────────
   Die zweite Titelzeile tippt Eigenschaftswörter, hält kurz und wischt sie
   wieder weg. Ein unsichtbares Geisterwort (längstes der Liste) hält die
   Breite, damit die Schaltfläche darunter nicht springt. */
.hero-title {
  text-align: center; font-size: clamp(40px, 6vw, 72px); line-height: 1.0;
  font-weight: 600; letter-spacing: -0.01em; font-family: var(--font-display);
  margin: 0 auto 32px; max-width: 820px;
}
/* Auf schmalen Geräten fasst 40px das längste getippte Wort nicht mehr:
   "lösungsorientiert" lief über den Rand und der Punkt von
   "Anwaltskanzlei." rutschte auf eine eigene Zeile. Deshalb skaliert die
   Zeile dort mit der Breite mit. */
@media (max-width: 620px) {
  .hero-title { font-size: min(8vw, 40px); }
}
.tw { position: relative; display: inline-block; font-style: italic; }
.tw-word { display: inline; }
.tw-ghost { display: block; height: 0; overflow: hidden; visibility: hidden; }
.tw-caret {
  display: inline-block; width: 0.06em; height: 0.86em; margin-left: 0.06em;
  vertical-align: -0.08em; background: #4338CA;
  animation: twBlink 1.05s steps(1, end) infinite;
}
@keyframes twBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Wischen: das Wort zieht sich nach links zusammen und blendet aus */
.tw.is-wiping .tw-word {
  display: inline-block;
  animation: twWipe 0.6s cubic-bezier(.45,.05,.55,.95) both;
}
@keyframes twWipe {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateX(-12px) skewX(-8deg); filter: blur(3px); }
}

/* Fest am unteren Rand stehende Schaltfläche zur Falleinleitung.
   Auf breiten Schirmen schwebt sie neben der Textspalte; sobald der Text
   bis an den Rand reicht, wird daraus eine deckende Leiste, damit kein
   Inhalt unter einer freistehenden Schaltfläche hindurchläuft. */
.cta-fixed {
  position: fixed; right: 24px; bottom: 24px; z-index: 35;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  background: #4338CA; color: #fff; font-size: 16px; font-weight: 600;
  text-decoration: none; box-shadow: 0 14px 32px -12px rgba(67,56,202,0.65);
  transition: transform 0.18s cubic-bezier(.22,.68,.32,1), box-shadow 0.18s ease;
}
.cta-fixed:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(67,56,202,0.7); }
.cta-fixed svg { flex: none; }

@media (max-width: 1279px) {
  .cta-fixed {
    left: 0; right: 0; bottom: 0; border-radius: 0;
    justify-content: center; padding: 15px 24px;
    box-shadow: 0 -8px 24px -14px rgba(42,42,42,0.4);
  }
  .cta-fixed:hover { transform: none; }
  /* Platz schaffen, damit die Leiste den Seitenfuss nicht überdeckt */
  body:has(.cta-fixed) { padding-bottom: 62px; }
}

/* Auf dem Handy ausgeblendet (z.B. die Stichwortkette auf „Über MINALEX“) */
@media (max-width: 700px) { .hide-mobile { display: none; } }

/* Abschnittskopf: Der violette Vorspann steht linksbündig über dem Titel —
   mittig sass er auf jeder Breite schief über der linksbündigen Überschrift. */
.sec-head { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* Gleiche Spezifitaet wie die Ausblend-Regel oben, damit sie hier greift. */
  html.anim [data-animate] { opacity: 1; }
}

/* Auf schmalen Geräten teilen sich Wortzeichen, Schnellzugriffe und Menüknopf
   eine enge Leiste — ohne diese Verkleinerung wird der Menüknopf abgeschnitten. */
@media (max-width: 560px) {
  .site-header { padding: 12px 12px; }
  .nav-bar { gap: 10px; padding: 8px 14px; }
  .logo-img { height: 26px; }
  .nav-quick { gap: 6px; }
  .nav-icon-btn, .nav-burger { width: 38px; height: 38px; }
  .nav-burger { margin-left: 8px; }
}
@media (max-width: 400px) {
  .logo-img { height: 23px; }
  .nav-bar { gap: 6px; padding: 8px 12px; }
  .nav-quick { gap: 5px; }
  .nav-icon-btn, .nav-burger { width: 34px; height: 34px; }
  .nav-burger { margin-left: 6px; padding: 0 8px; }
}


/* ── Abschluss je Themenabschnitt ──────────────────────────────
   Preis und Handlung stehen dort, wo die Besucherin überzeugt ist — nicht
   zwei Klicks entfernt auf der Startseite. Der Betrag verlinkt auf die
   Preisseite, damit der Abschnitt zugleich die interne Verlinkung trägt. */
.rg-aktion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 22px; padding: 16px 18px;
  background: var(--color-secondary-light);
  border: 1px solid var(--border-subtle); border-radius: 12px;
}
.rg-aktion-preis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-aktion-betrag {
  font-size: 19px; font-weight: 700; color: var(--color-primary);
  text-decoration: none;
}
.rg-aktion-betrag:hover { text-decoration: underline; }
.rg-aktion-zusatz { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.rg-aktion-btn {
  flex: none; padding: 12px 22px; border-radius: 12px; border: none;
  background: var(--color-primary); color: #fff; font: inherit;
  font-size: 16px; font-weight: 500; text-decoration: none; display: inline-block;
}
.rg-aktion-btn:hover { background: #3A30B0; }
@media (max-width: 520px) {
  .rg-aktion { flex-direction: column; align-items: stretch; }
  .rg-aktion-btn { text-align: center; }
}

/* ── Landingpages ──────────────────────────────────────────────
   Gemeinsam genutzt von den Angebotsseiten (Kündigung erhalten,
   Mietzinsreduktion). Aufbau: Textspalte links, Kosten-/Ablaufkasten rechts,
   Schaltflächen darunter. Auf schmalen Geräten entscheidet die Reihenfolge im
   Markup — Text, Kasten, Schaltflächen —, damit die Kosten noch im ersten
   Bildschirm stehen. */
.lp-hero {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(40px,6vw,72px) 24px clamp(28px,4vw,44px);
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.lp-text { min-width: 0; max-width: 720px; }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Häufige Fragen als Akkordeon ──────────────────────────────
   Eingeklappt, damit eine Seite mit sieben Fragen nicht überladen wirkt.
   Der Inhalt steht trotzdem im DOM und bleibt für Suchmaschinen lesbar. */
.faq-liste { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--border-subtle); border-radius: 12px;
  background: var(--bg-secondary); overflow: hidden;
}
.faq-item > summary {
  list-style: none; cursor: pointer;
  padding: 16px 20px; display: flex; align-items: flex-start; gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--color-secondary-light); }
.faq-item > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.faq-item > summary h3 {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  line-height: 1.45; letter-spacing: -0.005em; color: var(--text-dark);
}
/* Winkel aus zwei Rahmenkanten, damit keine Bilddatei nötig ist. */
.faq-item > summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin-top: 7px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq-antwort { padding: 0 20px 18px; }
.faq-antwort p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-main); }
.faq-antwort a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.faq-antwort a:hover { text-decoration: underline; }


/* ── Kompakte Angebotskarten auf der Startseite ────────────────
   Nur Titel, ein Satz, Preis und Weg zur Seite. Die ausführliche Erklärung
   steht auf der jeweiligen Angebotsseite und muss hier nicht doppelt stehen. */
.ang-karten { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.ang-karte {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 26px; text-decoration: none;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 18px; transition: border-color 0.2s ease, transform 0.2s ease;
}
.ang-karte:hover { border-color: var(--color-secondary); transform: translateY(-2px); }
.ang-karte h3 {
  margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600;
  line-height: 1.35; letter-spacing: -0.005em; color: var(--text-dark);
}
.ang-karte-text { font-size: 16px; line-height: 1.65; color: var(--text-muted); }
.ang-karte-fuss {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px;
}
.ang-karte-preis { font-size: 19px; font-weight: 700; color: var(--color-primary); }
.ang-karte-mehr { font-size: 16px; font-weight: 600; color: var(--color-primary); }

/* ── Ablauf ────────────────────────────────────────────────────
   Eine einzige Darstellung fuer alle Seiten. Die Schritte lagen vorher als
   Inline-Styles in kosten.html und als schlichte Aufzaehlung auf den
   Angebotsseiten, was drei verschiedene Bilder desselben Vorgehens ergab. */
.ablauf { display: flex; flex-direction: column; }
.ablauf-schritt { display: flex; gap: 20px; align-items: stretch; }
.ablauf-spur { display: flex; flex-direction: column; align-items: center; flex: none; width: 44px; }
.ablauf-nr {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.ablauf-linie { width: 2px; flex: 1; background: linear-gradient(var(--color-primary), var(--border-subtle)); }
.ablauf-text { padding-bottom: 28px; flex: 1; min-width: 0; }
.ablauf-schritt:last-child .ablauf-text { padding-bottom: 0; }
.ablauf-titel { font-size: 16px; font-weight: 600; color: var(--text-main); margin-bottom: 3px; }
.ablauf-beschrieb { font-size: 16px; line-height: 1.7; color: var(--text-muted); }
/* Die Zustaende einer Etappe: was sie kostet und wie sie ablaeuft. */
.flow-chip--gratis    { background: var(--bg-footer); color: var(--text-muted); }
.flow-chip--offerte   { background: #EFEEF9; color: var(--color-primary); }
.flow-chip--arbeit    { background: #E4F0E7; color: #2E6B4F; }

/* ── Vertrauensband unter dem Titelbereich ─────────────────────
   Ersetzt den Kasten neben der Ueberschrift. Neben einem grossen Titel mit
   Einleitung und zwei Schaltflaechen wirkte er als zweites Zentrum und machte
   den Einstieg unruhig. Als ruhiges Band darunter traegt er dieselbe
   Information, ohne mit dem Titel zu konkurrieren. */
.lp-band {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
/* Gleich breite Spalten mit Trennlinien dazwischen: Mit auto-fit sassen die
   Punkte unterschiedlich weit auseinander, sobald einer zweizeilig umbrach.
   grid-auto-columns:1fr teilt die Breite unabhaengig von der Anzahl Punkte. */
.lp-band-inner {
  max-width: 1180px; margin: 0 auto; padding: 22px 24px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
}
.lp-band-punkt {
  display: flex; align-items: flex-start; gap: 11px; min-width: 0;
  padding: 2px 26px; border-left: 1px solid var(--border-subtle);
}
.lp-band-punkt:first-child { border-left: none; padding-left: 0; }
.lp-band-punkt:last-child { padding-right: 0; }
.lp-band-punkt svg { flex: none; margin-top: 3px; color: var(--color-primary); }
.lp-band-punkt b { display: block; font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
.lp-band-punkt span { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
/* Zwei Spalten, dann eine: Die Trennlinien verschwinden, den Abstand
   uebernimmt der Zeilenzwischenraum. */
@media (max-width: 980px) {
  .lp-band-inner { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
  .lp-band-punkt { border-left: none; padding: 0; }
}
@media (max-width: 620px) {
  .lp-band-inner { grid-template-columns: 1fr; gap: 14px; }
}

/* Verweis auf die Gesetzesnorm. Fedlex ist die amtliche Quelle; der Verweis
   belegt die Aussage und wird von KI-Antwortsystemen ueberdurchschnittlich oft
   als Beleg mitzitiert. Bewusst nur im Fliesstext, nie neben einer
   Schaltflaeche, damit er niemanden vor der Anfrage von der Seite fuehrt. */
.gesetz { color: var(--color-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.gesetz:hover { text-decoration: underline; }
.footer-li { display: inline-flex; color: var(--text-muted); text-decoration: none; }
.footer-li:hover { color: var(--color-primary); }