/* =========================================================
   PUELS.LEGAL · Typografie- & Spacing-Feinschliff
   Macht den Unterschied zwischen „gut" und „premium":
   - text-wrap balance/pretty (keine Witwen, keine Waisen)
   - tabular-nums für Zahlen/Stats
   - bessere Focus-States im Markenton
   - konsistente Spacing-Tokens als Design-System
   ========================================================= */

/* ----- 1) Text-Rendering global ----- */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01", "ss03", "cv11";
  font-kerning: normal;
}

/* ----- 2) Headlines: balance verhindert Witwen/Waisen -----
   text-wrap: balance verteilt Wörter so, dass keine einsamen
   Wörter in der letzten Zeile stehen. Modern in allen Browsern
   ab 2023. */
h1, h2, h3, h4,
.section-head h2,
.hero h1,
.page-hero h1,
.cta-block h2,
.about h2,
blockquote {
  text-wrap: balance;
}

/* ----- 3) Fließtext: pretty optimiert Zeilenumbrüche -----
   text-wrap: pretty hält den letzten Absatz ausgewogen,
   reduziert hängende Wörter ohne balance's Performance-Kosten. */
p, li, dd, .lead, .hero-copy p {
  text-wrap: pretty;
}

/* ----- 4) Hyphenation für lange deutsche Wörter ----- */
p, li, blockquote, .lead {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Headlines NICHT hyphenieren */
h1, h2, h3, h4 {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ----- 5) Tabular-Nums für Zahlen, Stats, Preise, Tabellen ----- */
.stat,
.stat-num,
[data-counter],
.calc-result,
.calc-result-inner,
.factor,
.factor-value,
.compare-table,
.compare-table td,
.compare-table th,
.urgent-banner,
time,
[class*="-price"],
[class*="-amount"],
[data-out] {
  font-variant-numeric: tabular-nums;
}

/* ----- 6) Premium Focus-Rings im Goldton -----
   Browser-Default ist hässlich; eigener Ring im Brand. */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px solid var(--gold, #B08856);
  outline-offset: 3px;
  border-radius: var(--r-sm, 6px);
  transition: outline-offset .15s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.btn:focus-visible {
  outline-offset: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
  outline: 2px solid var(--gold, #B08856);
  border-color: var(--gold, #B08856);
}
a:focus-visible {
  outline-offset: 4px;
}

/* ----- 7) Selection im Markenton ----- */
::selection {
  background: rgba(176, 136, 86, .25);
  color: var(--ink, #0E1822);
}

/* ----- 8) Spacing-Tokens (Design-System-Skala) -----
   Verwendbar als var(--space-N) in zukünftigen Komponenten.
   Ändert nichts am Bestehenden — nur Tokens für Konsistenz. */
:root {
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Typografische Tokens */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;
}

/* ----- 9) Konsistenter Container-Rhythmus -----
   Sektionen + Container atmen mit einheitlichem Vertical-Rhythm. */
section > .container > * + * {
  margin-block-start: var(--space-6);
}
section > .container > .section-head + * {
  margin-block-start: var(--space-12);
}
section > .container > h2 + p,
section > .container > h2 + .lead {
  margin-block-start: var(--space-4);
}

/* ----- 10) Lead-Paragraph optisch hervorheben ----- */
.lead, .hero-copy p {
  line-height: var(--leading-snug);
  font-weight: 400;
}

/* ----- 11) Eyebrow konsistent ----- */
.eyebrow {
  letter-spacing: var(--tracking-eyebrow) !important;
  font-weight: 600;
  font-size: clamp(.7rem, .8vw, .78rem);
}

/* ----- 12) Lists mit dezenten Markern -----
   Statt Browser-Default-Bullets etwas sortenreines. */
ul.list, ol.list,
.acc-body ul {
  padding-inline-start: 1.4rem;
}
ul.list > li::marker,
.acc-body ul > li::marker {
  color: var(--gold, #B08856);
}

/* ----- 13) Blockquote-Stil ----- */
blockquote {
  position: relative;
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: var(--leading-snug);
  color: var(--ink, #0E1822);
  letter-spacing: -0.01em;
}

/* ----- 14) Kontaktformular Polish (falls vorhanden) ----- */
.form-row label,
form label {
  font-weight: 500;
  letter-spacing: -0.005em;
}
input, textarea, select {
  font-feature-settings: "kern" 1, "liga" 1;
  transition: border-color .25s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              box-shadow  .25s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 4px rgba(176, 136, 86, .12);
}

/* ----- 15) Bilder konsistent gerendert ----- */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* ----- 16) Anti-Flash: Mobile-Drawer, Modals beim Öffnen ----- */
.mobile-drawer,
.apply-modal {
  -webkit-font-smoothing: antialiased;
}

/* ----- 17) Footer-Links subtiler Hover-Indikator ----- */
.site-footer a {
  position: relative;
  transition: color .25s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.site-footer a:hover {
  color: var(--gold-bright, #D4B36A);
}

/* ----- 18) Reduced Motion Respect ----- */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible,
  input:focus, textarea:focus, select:focus {
    transition: none !important;
  }
}

/* =========================================================
   LOCATION-SECTION — Premium Card-Layout
   Statt zwei Textspalten: zwei elegante Cards mit Pin-Icon,
   Region-Badge, klarer Hierarchie und Hover-Animation.
   ========================================================= */
.locations-section .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 768px) {
  .locations-section .two-col { grid-template-columns: 1fr; }
}

/* Location-Card */
.locations-section .two-col > div {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.4rem, 2.5vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    border-color .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.locations-section .two-col > div:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-soft);
}

/* Pin-Icon entfernt — Karten starten direkt mit dem Badge */
.locations-section .two-col > div::before,
.locations-section .two-col > div:hover::before {
  content: none !important;
  display: none !important;
}

/* Headline */
.locations-section .two-col > div h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 0.85rem;
  transition: color .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.locations-section .two-col > div:hover h3 {
  color: var(--navy);
}

/* Paragraph */
.locations-section .two-col > div p {
  flex: 1;
  font-size: clamp(.92rem, 1vw, .98rem);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* "Mehr zum Standort" Link wird zu eigenem Premium-Link mit Pfeil */
.locations-section .two-col > div p a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  color: var(--navy) !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  background-image: linear-gradient(var(--navy), var(--navy));
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              gap .25s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              color .25s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.locations-section .two-col > div p a:hover {
  background-size: 100% 1.5px;
  gap: 0.6rem;
}
.locations-section .two-col > div p a::after {
  content: "→";
  font-weight: 400;
  transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.locations-section .two-col > div p a:hover::after {
  transform: translateX(4px);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .locations-section .two-col > div,
  .locations-section .two-col > div::before,
  .locations-section .two-col > div h3,
  .locations-section .two-col > div p a {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   FIX: Apply-Modal Scroll/Overflow (2026-05-08)
   Modal hat zwei Probleme: 1) place-items:center clippt oben wenn Form zu hoch,
   2) max-height: 100vh greift nicht wenn position:fixed durch einen
   transformierten Vorfahren kaputt ist. Loesung: scrollbarer BACKDROP +
   card mit natuerlicher Hoehe + top-aligned bei knappem Viewport.
   ========================================================================== */

/* Hidden attribute MUSS gewinnen — sonst oeffnet sich Modal beim Pageload */
.apply-modal[hidden] { display: none !important; }

.apply-modal:not([hidden]) {
  /* Modal selbst scrollt NICHT — die Card uebernimmt das interne Scrollen.
     Damit bleibt der Backdrop immer voll abgedeckt, kein Hintergrund-Loch. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  padding: clamp(1rem, 3vw, 2rem) !important;
}

.apply-modal-card {
  /* Card hat max-Hoehe wie Viewport, scrollt intern wenn Form zu lang.
     Damit endet die Card immer innerhalb des sichtbaren Bereichs und der
     Backdrop links/rechts bleibt durchgehend gefuellt. */
  max-height: calc(100vh - 2rem) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Close-Button bleibt sticky am oberen Rand der Card */
.apply-modal-close {
  position: sticky !important;
  top: 0.5rem !important;
  margin-left: auto;
  z-index: 5;
}

/* Body-Scroll wird durch .apply-open auf body bereits gesperrt — gut so. */

/* Sehr kleine Viewports (Handy quer) — Padding reduzieren */
@media (max-width: 480px), (max-height: 520px) {
  .apply-modal { padding: 0.5rem !important; }
  .apply-modal-card {
    border-radius: 14px !important;
    padding: 1.2rem 1.1rem !important;
  }
}

/* Section-Head: Eyebrow auf eigene Zeile, H2 darunter
   (h2 ist anderswo inline-block für die Underline-Animation – ohne diesen Fix
    würden eyebrow und h2 nebeneinander stehen). */
.section-head .eyebrow {
  display: flex;
  width: fit-content;
}
.section-head.center .eyebrow {
  margin-inline: auto;
}

/* Mobile-Drawer + Hamburger NUR auf Mobile, nie auf Desktop sichtbar
   (auch wenn .is-open versehentlich gesetzt sein sollte) */
@media (min-width: 769px) {
  .mobile-drawer,
  .mobile-drawer.is-open,
  .menu-toggle,
  #backdrop,
  .backdrop {
    display: none !important;
  }
}

/* =========================================================
   Hero — Mobile-Only: kleineres Bild + Trust-Liste rechts daneben
   Desktop bleibt unangetastet (.hero-trust--desktop in hero-copy)
   Mobile zeigt .hero-trust--mobile innerhalb von .hero-portrait
   ========================================================= */
.hero-trust--mobile { display: none; }

@media (max-width: 768px) {
  /* Desktop-Trust auf Mobile ausblenden */
  .hero-trust--desktop { display: none !important; }

  /* Portrait wird Flex-Container: Bild links + Trust rechts */
  .hero-portrait {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.85rem;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    margin-inline: 0 !important;
  }
  .hero-portrait__media {
    position: relative;
    flex: 0 0 42%;
    max-width: 160px;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg, 14px);
    overflow: visible;
  }
  .hero-portrait__media picture,
  .hero-portrait__media picture img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--r-lg, 14px);
    display: block;
  }
  /* Auf Mobile: Original-ProvenExpert-Badge auf dem Bild komplett
     ausblenden — sie wird durch das bewegliche Listen-Item ersetzt */
  .hero-portrait__media .badge-floating.top-right {
    display: none !important;
  }

  /* Jonas-Püls-Kachel: noch weiter runter, am unteren Bildrand + kleiner */
  .hero-portrait__media .badge-floating.bottom-left {
    bottom: -22px !important;
    left: -8px !important;
    top: auto !important;
    right: auto !important;
    transform: scale(0.55);
    transform-origin: bottom left;
    padding: 0.55rem 0.7rem !important;
    font-size: 0.72rem !important;
    z-index: 2;
  }
  .hero-portrait__media .badge-floating.bottom-left strong { font-size: 0.74rem !important; }
  .hero-portrait__media .badge-floating.bottom-left .small { font-size: 0.62rem !important; }

  /* Bewegliche ProvenExpert-Karte als erstes Element in der Mobile-Liste.
     Eigenständiger Selektor (.hero-pe-badge) — keine Erbschaft von .item! */
  .hero-trust--mobile .hero-pe-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: #ffffff;
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 12px;
    box-shadow:
      0 2px 4px rgba(15, 17, 21, 0.04),
      0 10px 22px -8px rgba(15, 17, 21, 0.18);
    text-decoration: none;
    color: inherit;
  }
  .hero-trust--mobile .hero-pe-badge__logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F4ECD8;
    color: #B08856;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .hero-trust--mobile .hero-pe-badge__logo svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
  }
  .hero-trust--mobile .hero-pe-badge__txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .hero-trust--mobile .hero-pe-badge__txt strong {
    font-size: 0.82rem;
    color: #0E1822;
    font-weight: 600;
    line-height: 1.2;
  }
  .hero-trust--mobile .hero-pe-badge__sub {
    font-size: 0.68rem;
    color: #5C6878;
    line-height: 1.25;
  }

  /* Mobile-Trust: vertikal, kompakte Karten */
  .hero-trust--mobile {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    min-width: 0;
  }
  .hero-trust--mobile .item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(20, 33, 61, 0.07);
    box-shadow: 0 4px 12px -8px rgba(20, 33, 61, 0.15);
  }
  .hero-trust--mobile .item .stars,
  .hero-trust--mobile .item .n {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hero-trust--mobile .item .stars {
    flex-direction: column;
    gap: 0 !important;
    width: 32px;
  }
  .hero-trust--mobile .item .stars svg {
    width: 9px !important;
    height: 9px !important;
    fill: var(--gold, #B08856);
  }
  .hero-trust--mobile .item .n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef9ec 0%, rgba(212, 179, 106, 0.22) 100%);
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--gold, #B08856) !important;
    font-family: var(--font-sans, "Inter", system-ui, sans-serif) !important;
    letter-spacing: -0.02em !important;
  }
  .hero-trust--mobile .item .txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .hero-trust--mobile .item .txt strong {
    font-size: 0.78rem !important;
    color: var(--ink, #0E1822) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .hero-trust--mobile .item .txt .label {
    font-size: 0.66rem !important;
    color: var(--text-muted, #6b7385) !important;
    line-height: 1.25;
  }
}

/* =========================================================
   Mobile: Beigen Verlauf auf allen page-hero-Varianten
   minimieren, damit das Hintergrundbild klar sichtbar ist
   ========================================================= */
@media (max-width: 720px) {
  .page-hero--arbeitsrecht,
  .page-hero--kuendigungsschutz,
  .page-hero--gesellschaftsrecht,
  .page-hero--gruender,
  .page-hero--steuerbetreuung,
  .page-hero--steuer-gmbh,
  .page-hero--abfindungsrechner,
  .page-hero--karriere,
  .page-hero--leistungen,
  .page-hero--standort-bayreuth,
  .page-hero--standort-nuernberg,
  .page-hero--bg,
  .page-hero--video {
    background-image: linear-gradient(
      180deg,
      rgba(248, 245, 236, 0.38) 0%,
      rgba(248, 245, 236, 0.22) 55%,
      rgba(248, 245, 236, 0.10) 100%
    ), var(--bg-cream-image, none) !important;
  }
  /* Die jeweiligen Bilder bleiben via background-image-Stacking erhalten —
     wir lassen nur die Gradient-Stärke runter. Original-Regeln setzen
     einen mehrschichtigen background; hier überschreiben wir den ersten
     Layer (Gradient) weicher, der zweite Layer (Bild) wird per
     einzelner Override pro Variante neu gesetzt: */
  .page-hero--arbeitsrecht        { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-arbeitsrecht-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--kuendigungsschutz   { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-kuendigungsschutz-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--gesellschaftsrecht  { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-gesellschaftsrecht-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--gruender            { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-gruender-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--steuerbetreuung     { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-steuerbetreuung-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--steuer-gmbh         { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-steuer-gmbh-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--abfindungsrechner   { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/hero-abfindungsrechner-mobile.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--karriere            { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/team-suits-bg.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--leistungen          { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/office-services-bg.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--standort-bayreuth   { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/standort-bayreuth-bg.webp') !important; background-size: cover, cover !important; background-position: center, right center !important; background-repeat: no-repeat, no-repeat !important; }
  .page-hero--standort-nuernberg  { background-image: linear-gradient(180deg, rgba(248,245,236,.38) 0%, rgba(248,245,236,.22) 55%, rgba(248,245,236,.10) 100%), url('../assets/standort-nuernberg-mobile.webp'), url('../assets/standort-nuernberg-bg.webp') !important; background-size: cover, cover, cover !important; background-position: center, right center, right center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; }

  /* Bottom-Fade auf Mobile abschwächen (war 0.55/0.85 → jetzt 0.15/0.30) */
  .page-hero::after {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(248, 245, 236, 0.15) 55%,
      rgba(248, 245, 236, 0.30) 100%
    ) !important;
  }
}

/* =========================================================
   Mobile: Über-uns-Hero (page-hero--video) — wie Startseite,
   nur mit einem etwas stärkeren Cream-Hauch für Lesbarkeit
   ========================================================= */
@media (max-width: 720px) {
  .page-hero-video-overlay {
    background: linear-gradient(
      180deg,
      rgba(248, 245, 236, 0.38) 0%,
      rgba(248, 245, 236, 0.22) 55%,
      rgba(248, 245, 236, 0.10) 100%
    ) !important;
  }
  .page-hero--video { background: transparent !important; }
  .page-hero--video .page-hero-video-bg { opacity: 0.7 !important; }
}


/* =========================================================
   Leistungen + Unterkategorien — Bilder blasser machen (NUR Mobile)
   ========================================================= */

@media (max-width: 720px) {
  .page-hero--leistungen,
  .page-hero--arbeitsrecht,
  .page-hero--kuendigungsschutz,
  .page-hero--gesellschaftsrecht,
  .page-hero--steuerbetreuung,
  .page-hero--steuer-gmbh,
  .page-hero--gruender,
  .page-hero--karriere,
  .page-hero--abfindungsrechner,
  .page-hero--standort-bayreuth,
  .page-hero--standort-nuernberg {
    background-image:
      linear-gradient(
        180deg,
        rgba(248, 245, 236, 0.82) 0%,
        rgba(248, 245, 236, 0.65) 55%,
        rgba(248, 245, 236, 0.45) 100%
      ),
      var(--page-hero-img-mobile, none) !important;
  }
  .page-hero--leistungen         { --page-hero-img-mobile: url('../assets/office-services-bg.webp'); }
  .page-hero--arbeitsrecht       { --page-hero-img-mobile: url('../assets/hero-arbeitsrecht-mobile.webp'); }
  .page-hero--kuendigungsschutz  { --page-hero-img-mobile: url('../assets/hero-kuendigungsschutz-mobile.webp'); }
  .page-hero--gesellschaftsrecht { --page-hero-img-mobile: url('../assets/hero-gesellschaftsrecht-mobile.webp'); }
  .page-hero--steuerbetreuung    { --page-hero-img-mobile: url('../assets/hero-steuerbetreuung-mobile.webp'); }
  .page-hero--steuer-gmbh        { --page-hero-img-mobile: url('../assets/hero-steuer-gmbh-mobile.webp'); }
  .page-hero--gruender           { --page-hero-img-mobile: url('../assets/hero-gruender-mobile.webp'); }
  .page-hero--karriere           { --page-hero-img-mobile: url('../assets/team-suits-bg.webp'); }
  .page-hero--abfindungsrechner  { --page-hero-img-mobile: url('../assets/hero-abfindungsrechner-mobile.webp'); }
  .page-hero--standort-bayreuth  { --page-hero-img-mobile: url('../assets/standort-bayreuth-bg.webp'); }
  .page-hero--standort-nuernberg { --page-hero-img-mobile: url('../assets/standort-nuernberg-bg.webp'); }
}

/* =========================================================
   Custom-Select — anchored Dropdown statt nativem Picker
   (z.B. Abfindungsrechner Kündigungsgrund). Die native
   <select> bleibt im DOM für Form-Submit + A11y.
   ========================================================= */
.cs-wrap { position: relative; width: 100%; }
.cs-wrap > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}
.cs-btn {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-line, rgba(20,33,61,0.16));
  border-radius: var(--r-sm, 8px);
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  color: var(--ink, #0E1822);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color .25s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              box-shadow  .25s var(--ease-out, cubic-bezier(.16,1,.3,1));
  -webkit-tap-highlight-color: transparent;
}
.cs-btn::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink, #0E1822);
  border-bottom: 2px solid var(--ink, #0E1822);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.cs-wrap.is-open .cs-btn::after {
  transform: translateY(-30%) rotate(-135deg);
}
.cs-wrap.is-open .cs-btn,
.cs-btn:focus-visible {
  outline: none;
  border-color: var(--navy, #14213D);
  box-shadow: 0 0 0 4px rgba(20, 33, 61, 0.12);
}
.cs-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-line, rgba(20,33,61,0.16));
  border-radius: var(--r-sm, 8px);
  box-shadow:
    0 4px 12px -2px rgba(15, 17, 21, 0.06),
    0 18px 40px -16px rgba(15, 17, 21, 0.22);
  z-index: 50;
  max-height: 60vh;
  overflow-y: auto;
  display: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cs-wrap.is-open .cs-panel { display: block; }
.cs-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.8rem 1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-line, rgba(20,33,61,0.08));
  font: inherit;
  font-size: 0.96rem;
  cursor: pointer;
  color: var(--ink, #0E1822);
  transition: background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.cs-opt:last-child { border-bottom: 0; }
.cs-opt:hover,
.cs-opt:focus-visible {
  background: var(--bg-cream, #F5F2EA);
  outline: none;
}
.cs-opt.is-selected {
  background: rgba(176, 136, 86, 0.12);
  color: var(--navy, #14213D);
  font-weight: 600;
}

/* =========================================================
   Locations-Section — neue kompakte Variante
   Hauptstandort / Zweigstelle Badges + "Zum Standort" CTA
   ========================================================= */
.locations-section .loc-badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold, #B08856);
  background: var(--gold-wash, rgba(212, 179, 106, 0.18));
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.locations-section .two-col > div h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  margin: 0 0 0.5rem;
  color: var(--ink, #0E1822);
  letter-spacing: -0.01em;
}
.locations-section .two-col > div p {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted, #5C6878);
}
.locations-section .btn-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.1rem !important;
  font-size: 0.88rem;
}
.locations-section .btn-loc svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.locations-section .btn-loc:hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .locations-section .two-col > div {
    padding: 1.3rem 1.25rem 1.4rem !important;
  }
  .locations-section .two-col > div::before {
    width: 38px !important;
    height: 38px !important;
  }
  .locations-section .loc-badge {
    font-size: 0.62rem;
    padding: 0.28rem 0.6rem;
    margin-bottom: 0.6rem;
  }
  .locations-section .two-col > div h3 {
    font-size: 1.18rem;
  }
  .locations-section .two-col > div p {
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
  }
}

/* =========================================================
   Social-Follow auf Mobile: Karten zu kompakten Buttons
   in einer Reihe — spart deutlich Platz
   ========================================================= */
@media (max-width: 720px) {
  .social-follow__grid {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
  }
  .social-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 120px;
    padding: 0.75rem 0.85rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 0.4rem !important;
  }
  /* Alles ausblenden außer Icon + Plattformname */
  .social-card__ribbon,
  .social-card__handle,
  .social-card__desc,
  .social-card__arrow {
    display: none !important;
  }
  .social-card__icon {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
  }
  .social-card__icon svg {
    width: 100%;
    height: 100%;
  }
  .social-card__body {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 !important;
  }
  .social-card__platform {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   Arbeitsrecht-Seite: Mobile-Optimierungen
   - SVG-Illustration "Typische Anliegen" ausblenden (rein dekorativ)
   - Inline-Two-Col-Grids auf 1 Spalte stacken
   - Contract-Anatomy: statt zentralem Dokument zeigt jede Klausel
     ihr Detail direkt darunter (vertikaler Akkordeon-Look)
   - Engere Section-Paddings für mehr Inhalt pro Bildschirm
   ========================================================= */
@media (max-width: 720px) {
  /* "Typische Anliegen" — Heading-Block soll allein die Breite nutzen */
  body .page-hero--arbeitsrecht ~ section .two-col[style*="240px"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    text-align: left;
  }
  /* Document-SVG-Illustration im Hero-Block der Anliegen-Sektion ausblenden */
  body .page-hero--arbeitsrecht ~ section .two-col[style*="240px"] > div[aria-hidden="true"] {
    display: none !important;
  }

  /* Feature-Rows: kompakter + besseres Tap-Padding */
  .feature-row {
    padding: 1.15rem 1.2rem !important;
    gap: 0.5rem !important;
  }
  .feature-row .num {
    font-size: 1.5rem !important;
    margin-bottom: 0.15rem;
  }
  .feature-row h4 {
    font-size: 1.02rem !important;
    line-height: 1.3;
  }
  .feature-row p {
    font-size: 0.9rem !important;
    line-height: 1.55;
  }
  .feature-row .btn-link {
    font-size: 0.86rem !important;
    margin-top: 0.4rem;
  }
}

/* =========================================================
   Kündigungsschutz-Seite: Mobile-Optimierungen
   - Komplexe SVG-Illustrationen (Timeline-Gauge, Orb-Items)
     auf Mobile ausblenden — zu klein lesbar
   - Two-Col mit inline-Styles auf 1 Spalte stacken
   - Payout-Cards kompakter
   - Section-Paddings für Mobile reduzieren
   ========================================================= */
@media (max-width: 720px) {
  /* Sektion 1: 3-Schritte Prozess — Karten in ein-spaltigem Layout */
  body .page-hero--kuendigungsschutz ~ section .process-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
  }
  body .page-hero--kuendigungsschutz ~ section .process-step .step-card {
    padding: 1.1rem 1.2rem 1.2rem;
  }
  body .page-hero--kuendigungsschutz ~ section .process-step .num {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
  }
  body .page-hero--kuendigungsschutz ~ section .process-step h3 {
    font-size: 1.05rem;
    line-height: 1.3;
  }
  body .page-hero--kuendigungsschutz ~ section .process-step p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  /* Sektion 2: "Was ist Ihre Abfindung wert?" — Payout-Cards */
  .payout-examples .payout-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .payout-examples .payout-intro h2 { font-size: clamp(1.55rem, 5.5vw, 1.85rem) !important; }
  .payout-examples .payout-lead { font-size: 0.94rem !important; line-height: 1.55 !important; }
  .payout-examples .payout-formula {
    padding: 1rem !important;
    margin-top: 1rem !important;
  }
  .payout-examples .payout-formula-eq {
    font-size: 0.95rem !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .payout-examples .payout-formula-eq .pf-num { font-size: 1.5rem !important; }
  .payout-examples .payout-formula-eq .pf-var { font-size: 0.95rem !important; }
  .payout-examples .payout-formula-result { font-size: 0.85rem !important; line-height: 1.55 !important; }
  .payout-examples .payout-cards {
    display: flex !important;
    flex-direction: column;
    gap: 0.85rem;
  }
  .payout-examples .payout-card {
    padding: 1rem 1.1rem 1.1rem !important;
  }
  .payout-examples .payout-card-head { gap: 0.7rem; }
  .payout-examples .payout-card-icon { width: 36px !important; height: 36px !important; }
  .payout-examples .payout-card-icon svg { width: 18px; height: 18px; }
  .payout-examples .payout-card-eyebrow { font-size: 0.66rem !important; }
  .payout-examples .payout-card-meta { font-size: 0.86rem !important; }
  .payout-examples .payout-card-amount { font-size: 1.65rem !important; }
  .payout-examples .payout-card-amount-sub { font-size: 0.72rem !important; }
  .payout-examples .payout-range-meta { font-size: 0.78rem !important; }
  .payout-examples .payout-disclaimer { font-size: 0.82rem !important; }

  /* Sektion 3: "Wann KSchG greift" — komplexes Two-Col mit SVG ausblenden,
     auf 1 Spalte stacken, dekorative Timeline-/Orb-SVGs verbergen */
  body .page-hero--kuendigungsschutz ~ section .two-col[style*="align-items:start"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  body .page-hero--kuendigungsschutz ~ section .protect-illustration {
    display: none !important;
  }
  /* Checklist-Punkte kompakter */
  body .page-hero--kuendigungsschutz ~ section .checklist li {
    padding: 0.65rem 0 !important;
    gap: 0.65rem !important;
    align-items: flex-start;
  }
  body .page-hero--kuendigungsschutz ~ section .checklist li svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin-top: 0.15rem;
  }
  body .page-hero--kuendigungsschutz ~ section .checklist li span {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Section-Heads enger */
  body .page-hero--kuendigungsschutz ~ section .section-head h2 {
    font-size: clamp(1.5rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2;
  }
  body .page-hero--kuendigungsschutz ~ section .section-head p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* Section-Padding insgesamt etwas tighter */
  body .page-hero--kuendigungsschutz ~ section {
    padding-block: clamp(2rem, 5vw, 2.75rem) !important;
  }
}

/* =========================================================
   Gesellschaftsrecht: Sektion Nachfolge + Umwandlung Mobile
   Two-Col stackt, kompaktere Karten, tighter Typografie,
   Stat-Block kleiner. Beide Spalten als saubere Karten.
   ========================================================= */
@media (max-width: 720px) {
  /* Two-Col stackt sicher auf 1 Spalte mit Abstand */
  .nachfolge-umwandlung .two-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* Jeden Block als Karte mit dezentem Border-Trenner */
  .nachfolge-umwandlung .two-col > .reveal {
    background: #fff;
    border-radius: 14px;
    padding: 1.3rem 1.25rem 1.4rem;
    box-shadow: 0 4px 14px -8px rgba(15, 17, 21, 0.12);
    border: 1px solid rgba(20, 33, 61, 0.06);
  }
  .nachfolge-umwandlung .two-col > .reveal .eyebrow {
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem;
    display: inline-block;
  }
  .nachfolge-umwandlung .two-col > .reveal h2 {
    font-size: clamp(1.4rem, 5vw, 1.7rem) !important;
    line-height: 1.2;
    margin: 0 0 0.6rem !important;
    text-wrap: balance;
  }
  .nachfolge-umwandlung .two-col > .reveal > p,
  .nachfolge-umwandlung .two-col > .reveal > p.u-mt-100 {
    font-size: 0.93rem !important;
    line-height: 1.55 !important;
    margin: 0 0 0.9rem !important;
  }
  /* Stat-Block (190.000+) kompakter — passt sich auf Mobile in 2 Zeilen */
  .nachfolge-umwandlung .section-stat {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.85rem !important;
    align-items: center;
    padding: 0.85rem 1rem !important;
    margin: 0.85rem 0 1.1rem !important;
    border-radius: 12px;
  }
  .nachfolge-umwandlung .section-stat__num {
    font-size: 1.7rem !important;
    line-height: 1;
    flex-shrink: 0;
  }
  .nachfolge-umwandlung .section-stat__body {
    flex: 1;
    min-width: 0;
  }
  .nachfolge-umwandlung .section-stat__label {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em;
  }
  .nachfolge-umwandlung .section-stat__text {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    display: block;
    margin-top: 0.2rem;
  }
  /* Checklist kompakter */
  .nachfolge-umwandlung .checklist {
    margin-top: 0.85rem !important;
    padding: 0 !important;
  }
  .nachfolge-umwandlung .checklist li {
    padding: 0.55rem 0 !important;
    gap: 0.6rem !important;
    align-items: flex-start !important;
  }
  .nachfolge-umwandlung .checklist li svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin-top: 0.2rem;
  }
  .nachfolge-umwandlung .checklist li span {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
  .nachfolge-umwandlung .checklist li strong {
    font-weight: 600;
  }
  /* Section-Padding insgesamt etwas tighter */
  .nachfolge-umwandlung {
    padding-block: clamp(2rem, 5vw, 2.75rem) !important;
  }
}

/* =========================================================
   Steuerbetreuung: Sektion "Konkrete Steuer-Hebel" Mobile
   - Karten kompakter, mehr Atemraum innen
   - Index-Wasserzeichen kleiner (war 5.5rem)
   - Hero-Zahl bleibt prominent, aber lesbar im Stack
   - Section-Padding tighter
   ========================================================= */
@media (max-width: 640px) {
  .hebel-section { padding-block: clamp(2rem, 5vw, 2.75rem) !important; }

  .hebel-section .hebel-intro h2 {
    font-size: clamp(1.5rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }
  .hebel-section .hebel-intro p {
    font-size: 0.93rem !important;
    line-height: 1.55 !important;
  }

  .hebel-grid {
    gap: 0.85rem !important;
    margin-top: 1.75rem !important;
  }

  .hebel-card {
    padding: 1.25rem 1.25rem 1.4rem !important;
    border-radius: 14px !important;
  }
  /* Index-Wasserzeichen oben rechts — auf Mobile kleiner & dezenter */
  .hebel-card__index {
    font-size: 3.2rem !important;
    top: -0.1rem !important;
    right: 0.5rem !important;
  }

  .hebel-card__top {
    margin-bottom: 0.75rem !important;
    gap: 0.6rem !important;
  }
  .hebel-card__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .hebel-card__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .hebel-card__label {
    font-size: 0.62rem !important;
    padding: 4px 8px 4px 7px !important;
    letter-spacing: 0.14em !important;
  }
  .hebel-card__label::before {
    width: 5px !important;
    height: 5px !important;
  }

  /* Hero-Zahl: groß genug für Wirkung, aber nicht den ganzen Screen */
  .hebel-card__num {
    font-size: 2.6rem !important;
  }
  .hebel-card__unit {
    font-size: 1.1rem !important;
  }
  .hebel-card__hero {
    margin: 0.15rem 0 0.7rem !important;
  }
  .hebel-card__hero-sub {
    font-size: 0.72rem !important;
    margin: -0.4rem 0 0.7rem !important;
  }

  .hebel-card__title {
    font-size: 1rem !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.3 !important;
  }
  .hebel-card__body {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }
}

/* =========================================================
   GmbH-Steuer-Seite Mobile (≤720 px):
   Maximales Platz-Sparen durch Tap-zu-Expand-Pattern.
   Karten zeigen nur Header (Title/Frage/Task) — Body wird
   per :focus-within (Tap auf das tabindex=0-Element) eingeblendet.
   ========================================================= */
@media (max-width: 720px) {
  /* Section-Padding insgesamt aggressiv tighter */
  body .page-hero--steuer-gmbh ~ section {
    padding-block: clamp(1.5rem, 4vw, 2.25rem) !important;
  }
  body .page-hero--steuer-gmbh ~ section .section-head {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem) !important;
  }
  body .page-hero--steuer-gmbh ~ section .section-head h2 {
    font-size: clamp(1.45rem, 5.2vw, 1.7rem) !important;
    line-height: 1.2 !important;
  }
  body .page-hero--steuer-gmbh ~ section .section-head p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  body .page-hero--steuer-gmbh ~ section .section-head .eyebrow {
    font-size: 0.66rem !important;
  }

  /* ============================================================
     ① LEVER-ROWS — Tap zeigt Body
     Standard: nur Stat + Title sichtbar
     Tap (focus-within): Body fadet ein
  ============================================================ */
  /* Äußere weiße Karte deutlich schmaler — der „Rahmen" um die
     blaue Stat-Box soll dünn sein, nicht wie ein zweiter Container */
  body .page-hero--steuer-gmbh ~ section .lever-row {
    padding: 0.5rem !important;
    gap: 0.6rem !important;
    border-radius: 12px !important;
    cursor: pointer;
    position: relative;
  }
  /* Grid-Layout für saubere Ausrichtung: Icon links, Zahl + Unit
     rechts stapeln. Alle Lever-Stats sehen damit gleich aus,
     unabhängig von Icon-Höhe oder Textlänge. */
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.7rem !important;
    row-gap: 0.1rem !important;
    align-items: center;
    padding: 0.85rem 0.95rem !important;
    border-radius: 10px !important;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    align-self: center;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* % bzw. € NIE umbrechen — bleibt zusammen mit der Zahl in einer Zeile */
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__num,
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__value {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    align-self: end;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__unit {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.78rem !important;
    align-self: start;
  }
  /* Lever-body bekommt Inhalts-Padding, das vorher von der äußeren
     Karte kam (jetzt sitzt der Text wieder mit Atemraum drum) */
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-body {
    padding: 0.25rem 0.6rem 0.5rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__icon {
    width: 28px !important;
    height: 28px !important;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-stat__icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row h3,
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-title {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
  }
  /* Body standardmäßig komplett kollabiert + Hinweis "Tippen für Details" */
  body .page-hero--steuer-gmbh ~ section .lever-row p,
  body .page-hero--steuer-gmbh ~ section .lever-row .lever-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
  }
  /* Tap öffnet → JS setzt .is-open. Erneuter Tap entfernt sie wieder. */
  body .page-hero--steuer-gmbh ~ section .lever-row.is-open p,
  body .page-hero--steuer-gmbh ~ section .lever-row.is-open .lever-body {
    max-height: 300px;
    opacity: 1;
    margin-top: 0.5rem !important;
  }
  /* dezenter "+ Details" Hinweis */
  body .page-hero--steuer-gmbh ~ section .lever-row::after {
    content: "+";
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(212, 179, 106, 0.14);
    color: #B08856;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    transition: transform .3s, background .3s;
  }
  body .page-hero--steuer-gmbh ~ section .lever-row.is-open::after {
    transform: rotate(45deg);
    background: rgba(212, 179, 106, 0.32);
  }

  /* ============================================================
     ② Q-STEPS — Frage immer sichtbar, Antwort + Link auf Tap
  ============================================================ */
  body .page-hero--steuer-gmbh ~ section .qstep {
    padding-bottom: 0.8rem !important;
    gap: 0.65rem !important;
    cursor: pointer;
    position: relative;
  }
  body .page-hero--steuer-gmbh ~ section .qstep__num {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep:not(:last-child) .qstep__rail::after {
    top: 36px !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep__card {
    padding: 0.85rem 1rem !important;
    border-radius: 10px !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep__q {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    gap: 0.4rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep__q svg {
    width: 14px !important;
    height: 14px !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep__a,
  body .page-hero--steuer-gmbh ~ section .qstep__link {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
  }
  body .page-hero--steuer-gmbh ~ section .qstep.is-open .qstep__a {
    max-height: 220px;
    opacity: 1;
    margin: 0.45rem 0 0.5rem !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep.is-open .qstep__link {
    max-height: 40px;
    opacity: 1;
    font-size: 0.82rem !important;
  }
  /* Chevron-Indikator oben rechts: zeigt nach unten, dreht beim Öffnen */
  body .page-hero--steuer-gmbh ~ section .qstep__card {
    position: relative;
    padding-right: 2.4rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .qstep__card::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    right: 1rem;
    width: 9px;
    height: 9px;
    border-right: 2px solid #B08856;
    border-bottom: 2px solid #B08856;
    transform: rotate(45deg);
    transition: transform .3s ease;
  }
  body .page-hero--steuer-gmbh ~ section .qstep.is-open .qstep__card::after {
    transform: rotate(-135deg);
    top: 1.3rem;
  }

  /* ============================================================
     ③ C-TABLE — auf Mobile nur Nr. + Aufgabe sichtbar,
     Frist & Risiko erst bei Tap
  ============================================================ */
  body .page-hero--steuer-gmbh ~ section .ctable {
    border-radius: 12px !important;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row {
    padding: 0.7rem 0.9rem !important;
    grid-template-columns: 32px 1fr !important;
    gap: 0.25rem 0.7rem !important;
    cursor: pointer;
    position: relative;
  }
  body .page-hero--steuer-gmbh ~ section .ctable .ct-num {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .ctable .ct-num svg {
    width: 14px !important;
    height: 14px !important;
  }
  body .page-hero--steuer-gmbh ~ section .ctable .ct-task {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row .ct-deadline-cell,
  body .page-hero--steuer-gmbh ~ section .ctable__row .ct-risk-cell {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    transition: max-height .3s ease, opacity .25s ease, margin .25s ease;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row.is-open .ct-deadline-cell,
  body .page-hero--steuer-gmbh ~ section .ctable__row.is-open .ct-risk-cell {
    max-height: 220px;
    opacity: 1;
    margin-top: 0.35rem !important;
  }
  /* Chevron-Indikator rechts in jeder Zeile */
  body .page-hero--steuer-gmbh ~ section .ctable__row {
    padding-right: 2.2rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 0.85rem;
    width: 8px;
    height: 8px;
    border-right: 2px solid #B08856;
    border-bottom: 2px solid #B08856;
    transform: rotate(45deg);
    transition: transform .3s ease;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row.is-open::after {
    transform: rotate(-135deg);
    top: 1.2rem;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row .ct-deadline,
  body .page-hero--steuer-gmbh ~ section .ctable__row .ct-risk {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }
  body .page-hero--steuer-gmbh ~ section .ctable__row .ct-cell-lbl {
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.1rem !important;
  }

  /* ============================================================
     ④ AUDIT-CARDS — kompakt (Toggle bleibt eigene Logik)
  ============================================================ */
  body .page-hero--steuer-gmbh ~ section .audit-grid {
    gap: 0.7rem !important;
    margin-top: 1.25rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card {
    border-radius: 12px !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card__head {
    padding: 0.85rem 1rem !important;
    gap: 0.65rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card__icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card__icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card__title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card .audit-pane {
    padding: 0.8rem 1rem 0.95rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card .audit-pane p,
  body .page-hero--steuer-gmbh ~ section .audit-card .audit-pane li {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card .audit-pane ul {
    padding-left: 1rem !important;
    margin: 0.35rem 0 0.55rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card .audit-toggle {
    padding: 0.55rem 0.8rem !important;
    font-size: 0.78rem !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card .audit-toggle svg {
    width: 13px !important;
    height: 13px !important;
    transition: transform .35s ease;
  }
  /* Audit-Pane auf Mobile NUR über .is-open öffnen, nicht über
     Hover/Focus-Within — sonst lässt sie sich nicht durch erneuten
     Tap wieder schließen */
  body .page-hero--steuer-gmbh ~ section .audit-card:hover .audit-pane--fix,
  body .page-hero--steuer-gmbh ~ section .audit-card:focus-within .audit-pane--fix {
    grid-template-rows: 0fr !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card.is-open .audit-pane--fix {
    grid-template-rows: 1fr !important;
  }
  /* Toggle-Button Style nur bei .is-open in Gold-aktiv-Farbe */
  body .page-hero--steuer-gmbh ~ section .audit-card:hover .audit-toggle,
  body .page-hero--steuer-gmbh ~ section .audit-card:focus-within .audit-toggle {
    background: rgba(212, 179, 106, 0.14) !important;
    color: #B08856 !important;
    border-color: rgba(176, 136, 86, 0.42) !important;
    transform: none !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card.is-open .audit-toggle {
    background: #B08856 !important;
    color: #fff !important;
    border-color: #B08856 !important;
  }
  body .page-hero--steuer-gmbh ~ section .audit-card.is-open .audit-toggle svg {
    transform: scale(1.12) rotate(8deg);
  }
}

/* =========================================================
   Gründungsberatung-Seite Mobile: Tap-Toggle für Karten
   Greift nur auf Mobile (≤720 px). Desktop nutzt weiter Hover.
   ========================================================= */
@media (max-width: 720px) {
  /* ----- Gründungsfehler-Karten ----- */
  /* Hover/Focus-Behavior auf Mobile deaktivieren, damit Tap-Toggle
     nicht permanent durch Focus überschrieben wird */
  .gfail-card:hover .gfail-card__desc,
  .gfail-card:focus-within .gfail-card__desc {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
  }
  .gfail-card:hover .gfail-card__hint,
  .gfail-card:focus-within .gfail-card__hint {
    opacity: 1 !important;
    max-height: 24px !important;
    margin-bottom: 0.85rem !important;
    overflow: visible !important;
  }
  .gfail-card:hover .gfail-card__title,
  .gfail-card:focus-within .gfail-card__title {
    color: #14213D !important;
  }
  /* Im is-open Zustand: Body sichtbar, Hint versteckt */
  .gfail-card.is-open .gfail-card__desc {
    max-height: 360px !important;
    opacity: 1 !important;
    margin: 0 0 1rem !important;
  }
  .gfail-card.is-open .gfail-card__hint {
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .gfail-card.is-open .gfail-card__title {
    color: #B08856 !important;
  }
  /* Chevron-Indikator: dreht beim Öffnen */
  .gfail-card .gfail-card__hint svg {
    transition: transform 0.3s ease;
  }
  .gfail-card.is-open .gfail-card__hint svg {
    transform: rotate(180deg);
  }
  .gfail-card { cursor: pointer; }

  /* ----- Process-Wheel-Steps (So gehen wir vor) ----- */
  /* Hover/Focus-Within-Verhalten neutralisieren — auf Mobile zählt
     ausschließlich .is-open (per JS gesetzt). Würden wir das nicht
     tun, würde beim Tap automatisch :focus-within feuern und die
     ALTEN Regeln (Default ausblenden / Detail einblenden) aktiv —
     was kollidiert mit dem Toggle-Verhalten. */
  .process-wheel:has(.pw-step:focus-within) .pw-default,
  .process-wheel:has(.pw-step:hover) .pw-default {
    display: none !important;
  }
  .process-wheel:has(.pw-step:focus-within) .pw-detail,
  .process-wheel:has(.pw-step:hover) .pw-detail {
    display: none !important;
  }
  .process-wheel:has(.pw-step[data-step="01"].is-open) .pw-detail[data-step="01"],
  .process-wheel:has(.pw-step[data-step="02"].is-open) .pw-detail[data-step="02"],
  .process-wheel:has(.pw-step[data-step="03"].is-open) .pw-detail[data-step="03"],
  .process-wheel:has(.pw-step[data-step="04"].is-open) .pw-detail[data-step="04"],
  .process-wheel:has(.pw-step[data-step="05"].is-open) .pw-detail[data-step="05"],
  .process-wheel:has(.pw-step[data-step="06"].is-open) .pw-detail[data-step="06"] {
    display: block !important;
  }
  /* Aktiver Step: golden umrahmt */
  .pw-step.is-open {
    background: linear-gradient(135deg, rgba(212,179,106,0.10) 0%, rgba(255,255,255,1) 100%) !important;
    border-color: rgba(212,179,106,0.5) !important;
  }
  .pw-step.is-open .ps-num {
    background: linear-gradient(135deg, #14213D 0%, #1f3258 100%) !important;
    color: #D4B36A !important;
    border-color: transparent !important;
    transform: scale(1.08) !important;
  }
  .pw-step.is-open .ps-title { color: #B08856 !important; }
  .pw-step { cursor: pointer; }

  /* Detail-Karte (.pw-center) erscheint direkt UNTER dem geöffneten
     Step — nicht mehr am Ende der Liste. Mechanik: jeder Step bekommt
     einen ungeraden order-Wert (1, 3, 5, ...), .pw-center hat default
     order: 99 (unten). Per :has() wechselt .pw-center auf den jeweils
     passenden geraden order-Wert (2, 4, 6, ...) und rutscht somit
     direkt hinter den aktiven Step. */
  .process-wheel .pw-step[data-step="01"] { order: 1; }
  .process-wheel .pw-step[data-step="02"] { order: 3; }
  .process-wheel .pw-step[data-step="03"] { order: 5; }
  .process-wheel .pw-step[data-step="04"] { order: 7; }
  .process-wheel .pw-step[data-step="05"] { order: 9; }
  .process-wheel .pw-step[data-step="06"] { order: 11; }
  .process-wheel .pw-center { order: 99 !important; }

  .process-wheel:has(.pw-step[data-step="01"].is-open) .pw-center { order: 2 !important; }
  .process-wheel:has(.pw-step[data-step="02"].is-open) .pw-center { order: 4 !important; }
  .process-wheel:has(.pw-step[data-step="03"].is-open) .pw-center { order: 6 !important; }
  .process-wheel:has(.pw-step[data-step="04"].is-open) .pw-center { order: 8 !important; }
  .process-wheel:has(.pw-step[data-step="05"].is-open) .pw-center { order: 10 !important; }
  .process-wheel:has(.pw-step[data-step="06"].is-open) .pw-center { order: 12 !important; }

  /* Optik der Detail-Karte: dezente Verbindung zum aktiven Step */
  .process-wheel.has-open .pw-center {
    margin-top: 0 !important;
    background: linear-gradient(180deg, rgba(212,179,106,0.06) 0%, #fff 100%) !important;
    border: 1px solid rgba(212, 179, 106, 0.35) !important;
    border-radius: 12px !important;
    padding: 1rem 1.1rem 1.1rem !important;
  }
  /* Doppelung vermeiden: in der Detail-Karte werden Nummer und Titel
     versteckt — beide stehen bereits im darüberliegenden Step-Button */
  .process-wheel .pw-detail__num,
  .process-wheel .pw-detail__title {
    display: none !important;
  }
  .process-wheel .pw-detail__text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #4b5366;
    margin: 0;
  }

  /* Default-Hinweis IMMER ausblenden auf Mobile — weder unten in der
     Liste noch beim ersten Öffnen sollen die Sätze "6 Schritte ..."
     auftauchen */
  .process-wheel .pw-default,
  .process-wheel.has-open .pw-default {
    display: none !important;
  }
  /* Wenn nichts offen ist, soll auch die Detail-Karte komplett weg sein
     (sonst zeigt sie nur einen leeren Container) */
  .process-wheel:not(.has-open) .pw-center {
    display: none !important;
  }

  /* Wheel-Container: volle Breite des umgebenden .container, KEIN
     auto-margin (sonst wäre das Wheel zentriert und sähe versetzt aus,
     wenn der Container breiter als das Wheel-max-width ist). */
  .process-wheel,
  .process-wheel * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .process-wheel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible;
    align-items: stretch !important;
  }
  /* Jede Step-Kachel bündig links + komplette Breite ausnutzen.
     WICHTIG: left/top/right/bottom auf auto setzen — sonst feuern die
     left:50% / left:15.4% / left:84.6% Werte aus der ursprünglichen
     Wheel-Position-CSS sobald wir position:relative aktivieren. */
  .pw-step {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* Detail-Karte ebenfalls bündig links */
  .pw-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  /* Container, in dem das Wheel steckt — auch sicher horizontal halten */
  section:has(.process-wheel) {
    overflow-x: hidden;
  }

  /* Pfeil-Hinweis rechts an jeder Kachel — kompakt, bricht das
     Layout nicht. Goldener Kreis (24 px) mit weißem Chevron drin. */
  .pw-step {
    position: relative !important;
    padding-right: 2.6rem !important;
  }
  .pw-step::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #B08856;
    transform: translateY(-50%);
    transition: background .3s ease;
    pointer-events: none;
    z-index: 1;
  }
  .pw-step::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.95rem;
    width: 7px;
    height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-75%) rotate(45deg);
    transition: transform .3s ease;
    pointer-events: none;
    z-index: 2;
  }
  .pw-step.is-open::after { background: #14213D; }
  .pw-step.is-open::before {
    transform: translateY(-25%) rotate(-135deg);
  }
}

/* =========================================================
   Kündigungsschutz: Abfindungshöhe-Karten Mobile-Fix
   - Großer Wasserzeichen-Digit (1/2/3) wird auf Mobile
     ausgeblendet — er klebt unschön am rechten Rand und
     wirkt durch overflow:hidden abgeschnitten
   - Padding-Right der Karte reduziert, damit der Range-Bar
     und alle Inhalte sauber innerhalb der Karte bleiben
   ========================================================= */
@media (max-width: 720px) {
  /* Ziffer-Wasserzeichen ausblenden — wirkt sonst abgeschnitten */
  .payout-card::after {
    display: none !important;
  }
  /* Karte tighter; keine Inhalte mehr hinter rechten Rand */
  .payout-examples .payout-card {
    padding: 1rem 1.1rem 1.1rem !important;
    overflow: hidden !important;
  }
  .payout-examples .payout-card,
  .payout-examples .payout-card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* Range-Bar darf nicht über die Karte hinausragen */
  .payout-examples .payout-range-track {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 4px;
  }
  /* Tag oben rechts ("Top-Verhandlung") soll nicht über Rand */
  .payout-examples .payout-card-tag {
    right: 10px !important;
    max-width: calc(100% - 20px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Eltern-Sektion: sicher overflow:hidden, falls woanders was leakt */
  section.payout-examples {
    overflow-x: hidden;
  }
}

/* =========================================================
   FINAL FIX (iPhone 11 etc.): "Realistische Abfindungshöhe"
   Faustregel-Card UND Beispiel-Cards waren rechts abgeschnitten.
   Ursache: zu üppiges Padding + Inhalt > Viewport-Breite + Inline-
   Flex-Items mit min-content-Width, die das Wrapping blockieren.
   Lösung: alles auf 100 % Breite zwingen, min-width: 0 erlauben,
   Schriftgrößen + Paddings reduzieren, Equation sauber umbrechen,
   absolut-positionierte Tags ins Innere holen, Section-Padding
   horizontal minimieren.
   ========================================================= */
@media (max-width: 480px) {
  /* Section selbst: horizontales Padding raus, damit der Container
     wirklich die ganze Bildschirmbreite minus Container-Gutter nutzt */
  section.payout-examples {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  section.payout-examples > .container {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Alles unter .payout-examples sicher in Box-Sizing-Modell + nicht
     breiter als 100 %. Verhindert min-content-Overflows komplett. */
  .payout-examples *,
  .payout-examples *::before,
  .payout-examples *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .payout-examples .payout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.1rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .payout-examples .payout-grid > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Intro-/Headline-Block */
  .payout-examples .payout-intro {
    width: 100% !important;
    min-width: 0 !important;
  }
  .payout-examples .payout-intro h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .payout-examples .payout-lead {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    margin-top: 0.85rem !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* FAUSTFORMEL-CARD --------------------------------------- */
  .payout-examples .payout-formula {
    margin-top: 1.1rem !important;
    padding: 0.95rem 0.95rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .payout-examples .payout-formula-tag {
    font-size: 0.66rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 0.65rem !important;
  }
  /* Die Equation MUSS umbrechen + jedes Item darf schrumpfen */
  .payout-examples .payout-formula-eq {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.3rem 0.45rem !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .payout-examples .payout-formula-eq > * {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .payout-examples .payout-formula-eq .pf-num {
    font-size: 1.3rem !important;
    line-height: 1 !important;
  }
  .payout-examples .payout-formula-eq .pf-op {
    font-size: 0.9rem !important;
  }
  .payout-examples .payout-formula-eq .pf-var {
    font-size: 0.92rem !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    word-break: normal !important;
  }
  .payout-examples .payout-formula-result {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .payout-examples .payout-cta {
    margin-top: 1.3rem !important;
  }
  .payout-examples .payout-cta .btn-lg {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.92rem !important;
  }

  /* BEISPIEL-CARDS ----------------------------------------- */
  .payout-examples .payout-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .payout-examples .payout-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.95rem 0.95rem 1.05rem !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Watermark-Ziffer komplett weg (klebte vorher rechts am Rand) */
  .payout-examples .payout-card::after { display: none !important; }
  .payout-examples .payout-card::before { display: none !important; }

  /* Card-Head: Icon + Titel, dann „Top-Verhandlung" Tag darunter */
  .payout-examples .payout-card-head {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 0.7rem !important;
    padding-right: 0 !important;
  }
  .payout-examples .payout-card-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
  }
  .payout-examples .payout-card-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .payout-examples .payout-card-titles {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .payout-examples .payout-card-eyebrow {
    font-size: 0.64rem !important;
    letter-spacing: 0.14em !important;
  }
  .payout-examples .payout-card-meta {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  /* „Top-Verhandlung" Tag: aus position:absolute (top:10px right:10px)
     rausnehmen und als normaler Block in den Header-Fluss integrieren,
     damit er den Karteninhalt nicht überlagert und nicht abgeschnitten
     wird */
  .payout-examples .payout-card-tag {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block !important;
    margin-top: 0.55rem !important;
    padding: 0.25rem 0.55rem !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.08em !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Result-Zeile: Amount + sub */
  .payout-examples .payout-card-result {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    margin-top: 0.7rem !important;
    min-width: 0 !important;
  }
  .payout-examples .payout-card-amount {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
  }
  .payout-examples .payout-card-amount-sub {
    font-size: 0.66rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Range-Bar + Skala */
  .payout-examples .payout-card-range {
    margin-top: 0.8rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .payout-examples .payout-range-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 0.35rem !important;
  }
  .payout-examples .payout-range-track {
    width: 100% !important;
    min-width: 0 !important;
    height: 6px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
  }
  .payout-examples .payout-range-bar {
    max-width: 100% !important;
  }
  .payout-examples .payout-range-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 0.4rem !important;
    margin-top: 0.45rem !important;
    font-size: 0.72rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .payout-examples .payout-range-meta .min,
  .payout-examples .payout-range-meta .max,
  .payout-examples .payout-range-meta strong {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }
  .payout-examples .payout-range-meta strong {
    flex: 0 1 auto !important;
    text-align: center !important;
  }

  /* Disclaimer am Ende */
  .payout-examples .payout-disclaimer {
    margin-top: 1.4rem !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    border-radius: 10px !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Zusätzlich noch enger zuziehen für iPhone SE etc. (≤ 380px) */
@media (max-width: 380px) {
  section.payout-examples > .container {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }
  .payout-examples .payout-formula {
    padding: 0.85rem 0.85rem !important;
  }
  .payout-examples .payout-formula-eq {
    font-size: 0.88rem !important;
  }
  .payout-examples .payout-formula-eq .pf-num {
    font-size: 1.2rem !important;
  }
  .payout-examples .payout-card {
    padding: 0.85rem 0.85rem 0.95rem !important;
  }
  .payout-examples .payout-card-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  .payout-examples .payout-card-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  .payout-examples .payout-card-amount {
    font-size: 1.35rem !important;
  }
  .payout-examples .payout-range-meta {
    font-size: 0.68rem !important;
  }
}

/* =========================================================
   Hero-Trust-Strip Mobile: jeden der 4 Fakten als eigene
   umrandete Kachel im 2x2-Grid. Strip rutscht an das Ende
   des Hero-Bereichs (also unter den Header-Block).
   ========================================================= */
@media (max-width: 720px) {
  /* Hero-Container zu Flex-Column machen, damit wir die
     Trust-Strip per `order` ans Ende verschieben können */
  .page-hero > .container {
    display: flex !important;
    flex-direction: column !important;
  }
  .page-hero .hero-trust-strip {
    order: 99 !important;
  }

  .hero-trust-strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-top: clamp(1.25rem, 3vw, 2rem) !important;
  }
  .hero-trust-strip-sep {
    display: none !important;
  }
  .hero-trust-strip-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 0.45rem !important;
    padding: 0.65rem 0.7rem !important;
    border: 1px solid rgba(212, 179, 106, 0.30) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px -4px rgba(15, 17, 21, 0.10);
    text-align: center;
    font-size: 0.74rem !important;
    line-height: 1.3;
    color: var(--navy, #14213D);
    min-width: 0;
  }
  .hero-trust-strip-item svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    color: var(--gold, #B08856);
  }
  .hero-trust-strip-item .star {
    color: #D4B36A !important;
  }
  .hero-trust-strip-item strong {
    font-weight: 700;
    color: var(--navy, #14213D);
  }
  /* "Live"-Dot vor "Antwort innerhalb 24h" */
  .hero-trust-strip-item.live-dot {
    position: relative;
    padding-left: 1.5rem !important;
  }
  .hero-trust-strip-item.live-dot::before {
    left: 0.6rem !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
}

/* =========================================================
   Topbar Mobile: Sprach-Switch (DE/EN) ganz rechts am Rand
   - Auf Mobile wrappt .topbar-row sowieso schon.
   - .u-flex-inline (rechte Gruppe: Standorte + lang-switch)
     auf volle Breite ziehen + space-between, damit die
     Standort-Links links bleiben und der DE/EN-Switch ganz
     rechts am Bildschirmrand sitzt.
   ========================================================= */
@media (max-width: 768px) {
  .topbar .topbar-row {
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .topbar .topbar-row > .u-flex-inline {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
  }
  .topbar .topbar-row .lang-switch {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
}

/* =========================================================
   Kündigungsschutz · "Kündigungsarten im Überblick"
   Hinweis-Animation auf der ERSTEN Kachel (Mobile).
   Die Karte öffnet sich leicht nach unten, Text wird sichtbar,
   dann schließt sie sich wieder. 3 Wiederholungen.

   Lösung über ein eigenes ::before-Pseudo-Element auf dem
   <h3> der ersten Kachel — das umgeht den display:none-
   Konflikt mit der bestehenden Collapse-Mechanik komplett.
   Der echte <p> bleibt versteckt, das Pseudo-Element zeigt
   einen kurzen Teaser-Text, der animiert auf- und zugeht.
   ========================================================= */
@media (max-width: 720px) {
  .collapsible-mobile > .service-tile.reveal.is-visible:first-child:not(.is-open) {
    overflow: hidden !important;
    /* Schatten-Pulse synchron zur Peek-Animation: die Karte
       atmet kurz auf — verstärkt visuell den Hinweis,
       dass diese Karte interaktiv ist. */
    animation: pl-tile-shadow-pulse 4.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 3 both !important;
  }

  .collapsible-mobile > .service-tile.reveal.is-visible:first-child:not(.is-open) > h3 {
    margin-bottom: 0 !important;
    position: relative;
  }

  /* Teaser-Text als ::after auf dem Heading — komplett
     unabhängig von den display:none-Regeln. */
  .collapsible-mobile > .service-tile.reveal.is-visible:first-child:not(.is-open) > h3::after {
    content: "Stellenabbau, Restrukturierung, Standortschließung. Häufigster Anlass für Abfindungen.";
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted, #5C6878);
    text-transform: none;
    pointer-events: none;
    animation: pl-tile-peek 4.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 3 both;
  }

  /* Sobald der Nutzer die Karte antippt, Animation aus + Pseudo weg */
  .collapsible-mobile > .service-tile.is-open > h3::after {
    display: none !important;
    animation: none !important;
  }
  .collapsible-mobile > .service-tile.is-open {
    animation: none !important;
  }

  /* Wenn die erste Karte einmal angetippt wurde (.hint-done am Grid),
     bleibt die Animation für den Rest der Session aus — auch wenn
     der Nutzer die Karte wieder zumacht. Reset erst beim Reload. */
  .collapsible-mobile.hint-done > .service-tile:first-child > h3::after {
    display: none !important;
    animation: none !important;
  }
  .collapsible-mobile.hint-done > .service-tile:first-child {
    animation: none !important;
  }
}

/* Schatten-Pulse: Karte glüht synchron zur Peek-Animation
   ganz leicht in Gold-Warm auf */
@keyframes pl-tile-shadow-pulse {
  0%, 15% {
    box-shadow: 0 2px 8px rgba(15, 17, 21, 0.03);
    border-color: var(--border, #E6E0D2);
  }
  35%, 65% {
    box-shadow:
      0 12px 28px -8px rgba(176, 136, 86, 0.45),
      0 0 0 1px rgba(176, 136, 86, 0.20);
    border-color: rgba(176, 136, 86, 0.55);
  }
  85%, 100% {
    box-shadow: 0 2px 8px rgba(15, 17, 21, 0.03);
    border-color: var(--border, #E6E0D2);
  }
}

@keyframes pl-tile-peek {
  0%, 15% {
    max-height: 0;
    padding-top: 0;
    opacity: 0;
  }
  35%, 65% {
    max-height: 4rem;
    padding-top: 0.55rem;
    opacity: 1;
  }
  85%, 100% {
    max-height: 0;
    padding-top: 0;
    opacity: 0;
  }
}

/* Reduzierte Bewegung respektieren */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .collapsible-mobile > .service-tile.reveal.is-visible:first-child:not(.is-open) > h3::after,
  .collapsible-mobile > .service-tile.reveal.is-visible:first-child:not(.is-open) {
    animation: none !important;
  }
  .collapsible-mobile > .service-tile.reveal.is-visible:first-child:not(.is-open) > h3::after {
    display: none !important;
  }
}

/* =========================================================
   Abfindungsrechner · Mobile-Sticky-Live-Ergebnis
   Zeigt die laufende Summe direkt oben am Formular und bleibt
   beim Scrollen am oberen Bildschirmrand kleben — der Nutzer
   sieht das Ergebnis sofort beim Tippen, ohne runterzuscrollen.
   ========================================================= */
.calc-mobile-result {
  display: none;
}

@media (max-width: 980px) {
  .calc-mobile-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.85rem;
    position: sticky;
    top: calc(var(--header-h, 64px) + 0.4rem);
    z-index: 30;
    margin: -0.5rem -0.5rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy, #14213D) 0%, #1F3158 100%);
    color: #FFFFFF;
    box-shadow:
      0 12px 28px -12px rgba(15, 17, 21, 0.35),
      0 4px 10px -4px rgba(176, 136, 86, 0.25),
      0 0 0 1px rgba(212, 179, 106, 0.18) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    isolation: isolate;
  }
  .calc-mobile-result::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px 90px at 0% 0%, rgba(212, 179, 106, 0.20), transparent 70%);
    pointer-events: none;
    z-index: -1;
  }
  .calc-mobile-result__label {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-bright, #D4B36A);
    width: 100%;
    margin-bottom: -0.1rem;
  }
  .calc-mobile-result__value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.55rem, 6vw, 1.95rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
  }
  .calc-mobile-result__sub {
    flex: 1 1 100%;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
  }
  .calc-mobile-result__sub strong {
    color: var(--gold-bright, #D4B36A);
    font-weight: 700;
  }
  .calc-mobile-result__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.7rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(212, 179, 106, 0.30);
    color: #F5F2EA;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .calc-mobile-result__more:hover,
  .calc-mobile-result__more:active {
    background: rgba(212, 179, 106, 0.22);
    transform: translateY(-1px);
  }
  .calc-mobile-result__more svg {
    width: 12px;
    height: 12px;
  }

  /* Etwas Abstand zwischen Intro-Text und Sticky-Karte */
  .calculator .calc-form > .calc-intro + .calc-mobile-result {
    margin-top: 0.85rem;
  }
  /* Abstand zur ersten Slider-Group nach der Sticky-Karte */
  .calculator .calc-form > .calc-mobile-result + .slider-field,
  .calculator .calc-form > .calc-mobile-result + .row-2 {
    margin-top: 0.25rem;
  }
}

/* Sehr kleine Bildschirme: kompakter */
@media (max-width: 380px) {
  .calc-mobile-result {
    padding: 0.7rem 0.85rem !important;
    gap: 0.3rem 0.7rem !important;
  }
  .calc-mobile-result__value {
    font-size: 1.45rem !important;
  }
  .calc-mobile-result__more {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.66rem !important;
  }
}