/* =============================================================
   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, 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, sans-serif;
  --font-logo: 'Montserrat', -apple-system, 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; inset: 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); }

.nav-bar {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px; border-radius: 16px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  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; inset: 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; }
.layout-contact { display: grid; grid-template-columns: minmax(260px,360px) 1fr; gap: 28px; 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 > *, .layout-contact > * { 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, .layout-contact { 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; } }

[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. */
[data-animate].anim-done { animation: none !important; opacity: 1; }
html.no-js [data-animate] { 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; inset: 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); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 95% at 88% 8%,  rgba(67,56,202,0.13) 0%, transparent 66%),
    radial-gradient(ellipse 46% 72% at 72% 42%, rgba(110,76,234,0.13) 0%, transparent 64%),
    radial-gradient(ellipse 56% 92% at 10% 96%, rgba(226,206,158,0.22) 0%, transparent 68%),
    radial-gradient(ellipse 50% 74% at 34% 4%,  rgba(243,226,186,0.31) 0%, transparent 64%),
    radial-gradient(ellipse 40% 70% at 99% 94%, rgba(160,143,238,0.18) 0%, transparent 64%);
  filter: blur(40px);
}
.page-hero > * { position: relative; z-index: 1; }

/* 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; inset: 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; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: ""; position: absolute; inset: 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;
}

/* ── Fixpreisangebote: Bild links, Angebote rechts ──────────────
   Die beiden Angebote teilen sich die Hoehe des Bildes. */
.fx-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.fx-media { position: relative; min-height: 340px; border-radius: 12px; overflow: hidden; background: var(--color-secondary); }
.fx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-offers { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) {
  .fx-split { grid-template-columns: 1fr; }
  .fx-media { min-height: 240px; }
}
/* Auf dem Handy stehen Titel, Bild und Angebote mittig. */
@media (max-width: 620px) {
  .fx-titel { text-align: center !important; }
  .fx-split { max-width: 420px; margin: 0 auto; }
  .fx-offers .btn { text-align: center !important; align-items: center; }
}

/* ── 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,
body.home .fx-media { 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; }
  [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; }
}