/* ==========================================================================
   Arbeitsrecht REMIEN: Komponenten (Entwurf Freigabe 1)
   Reihenfolge wie Abschnitt 6 des Master Prompts.
   ========================================================================== */

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  height: var(--nav-h);
  background: var(--white);                        /* deckend, unterer Rand als feiner Schatten */
  box-shadow: var(--shadow-nav-edge);
  transition: box-shadow var(--dur-base) var(--ease-out);
  view-transition-name: site-nav;
}
.site-nav.is-scrolled { box-shadow: var(--shadow-nav); }
.site-nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.brand-group { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.brand-group a { display: block; flex: 0 1 auto; }
.brand-group img { width: 128px; height: auto; }
.brand-group .brand-sister { padding-left: var(--sp-4); border-left: 1px solid var(--line); }
.brand-group .brand-sister img { width: 128px; }               /* gleich groß wie das AR-Logo (Bestand: beide 135 px) */
@media (max-width: 991.98px) {
  .brand-group { gap: var(--sp-3); }
  .brand-group img { width: min(28vw, 116px); }
  .brand-group .brand-sister { padding-left: var(--sp-3); }
  .brand-group .brand-sister img { width: min(28vw, 116px); }
  /* Auf Wunsch: Kopfzeile mobil beim Scrollen kompakter (64 → 52 px, Logos kleiner).
     Die Leiste ist fixiert, der Inhalt springt dadurch nicht. Menü und Abdunklung folgen über --nav-h. */
  .site-nav { transition: box-shadow var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); }
  .site-nav.is-scrolled { --nav-h: 52px; }
  .brand-group img { transition: width var(--dur-base) var(--ease-out); }
  .site-nav.is-scrolled .brand-group img { width: min(22vw, 88px); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { .site-nav, .brand-group img { transition: none; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-lg);
  background: var(--surface); color: var(--brand-strong); cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-open { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: var(--fw-ui); text-decoration: none;
}
.nav-link::after {                                          /* M11: Unterstrich */
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.nav-link.is-active::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-link:hover { color: var(--ink); } .nav-link:hover::after { transform: scaleX(1); } }
.nav-actions { display: flex; gap: var(--sp-3); }
.nav-actions .nav-actions__tel { display: none; }

@media (min-width: 992px) {
  .nav-toggle { display: none; }
  .nav-panel { display: flex; align-items: center; gap: var(--sp-6); }
  .nav-list { display: flex; gap: var(--sp-6); }
  .nav-link { font-size: .975rem; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .nav-list { gap: var(--sp-4); } .nav-link { font-size: .9rem; } .brand-group .brand-sister { display: none; } }

/* Mobiles Menü als Dialog (nur mit JavaScript eingeklappt) */
@media (max-width: 991.98px) {
  html.js .nav-panel {
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-2) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
    box-shadow: var(--shadow-sheet);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  html.js.nav-open .nav-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  /* Abdunklung unter dem Menü; Klick darauf schließt (site.js) */
  html.js .site-nav::before {
    content: ""; position: fixed; inset: var(--nav-h) 0 0 0; z-index: -1;
    background: rgba(33, 37, 41, .32); opacity: 0; visibility: hidden; cursor: pointer;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  html.js.nav-open .site-nav::before { opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-list .nav-link { display: flex; width: 100%; min-height: 56px; font-size: 1.125rem; }
  .nav-list .nav-link::after { display: none; }
  .nav-list .nav-link.is-active, .nav-list .nav-link[aria-current="page"] { color: var(--brand); }
  .nav-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--sp-6); }
  .nav-actions .btn { min-height: 52px; }
  .nav-actions .nav-actions__tel { display: inline-flex; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { position: static; height: auto; }
  html:not(.js) .site-nav__inner { flex-wrap: wrap; padding-block: var(--sp-3); }
  html:not(.js) .nav-panel { width: 100%; }
}
.nav-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--brand); --btn-bd: var(--brand);
  --btn-bg-h: var(--brand-strong); --btn-fg-h: var(--white); --btn-bd-h: var(--brand-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); min-width: 44px; padding: .75rem 1.375rem;
  border: 1px solid var(--btn-bd); border-radius: var(--r-lg);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--fw-ui) 1rem/1.2 var(--font); text-decoration: none; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow 220ms var(--ease-out);
}
.btn .bi-arrow { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
  .btn:hover .bi-arrow { transform: translateX(3px); }
}
.btn:active { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn--primary { --btn-bg: var(--brand); --btn-fg: var(--white); --btn-bd: var(--brand);
  --btn-bg-h: var(--brand-strong); --btn-fg-h: var(--white); --btn-bd-h: var(--brand-strong); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--brand-strong); --btn-bd: var(--white);
  --btn-bg-h: var(--brand-deep); --btn-fg-h: var(--white); --btn-bd-h: var(--white); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .6);
  --btn-bg-h: var(--brand-deep); --btn-fg-h: var(--white); --btn-bd-h: var(--white); }
.btn--lg { min-height: 56px; font-size: 1.0625rem; }
.btn--sm { min-height: 40px; padding: .5rem .9rem; font-size: .9rem; border-radius: var(--r-sm); }
.btn--block { display: flex; width: 100%; }

/* Zustände nur für die Styleguide-Darstellung */
.sg-state-hover.btn { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
.sg-state-focus.btn { outline: 2px solid var(--brand); outline-offset: 2px; }
.on-brand .sg-state-focus.btn { outline-color: var(--white); }

/* ---------- Badges ---------- */
.badge-deadline {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .5rem .9rem; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand); font-size: .875rem; font-weight: var(--fw-ui); line-height: 1.3;
}
.badge { display: inline-block; padding: .25rem .55rem; border-radius: var(--r-sm); font-size: .75rem; font-weight: var(--fw-ui); line-height: 1.4; }
.badge--cat { background: var(--brand); color: var(--white); }
.badge--new { background: var(--brand-soft); color: var(--brand); }

/* ---------- Hero (E1: rote Fläche + Porträt) ---------- */
.hero { padding-top: var(--nav-h); padding-bottom: var(--sp-12); }
.hero__grid { display: grid; gap: 0; }
.hero__grid > * { min-width: 0; }
.hero__intro { background: var(--brand-strong); color: var(--white); }
.hero__intro h1 { color: var(--white); margin: var(--sp-8) 0 var(--sp-4); }
.hero__intro .lead { color: var(--on-brand-muted); }
.hero__intro .lead a.still { color: inherit; text-decoration: none; }
.hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__cta .btn { padding-inline: .5rem; white-space: nowrap; }
@media (max-width: 359.98px) { .hero__cta { grid-template-columns: 1fr; } .hero__intro h1 { hyphens: auto; } }
.hero__note { margin: var(--sp-4) 0 0; color: var(--on-brand-muted); font-size: 1rem; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-lg); }

@media (max-width: 991.98px) {
  .hero__intro { margin-inline: calc(var(--gutter) * -1); padding: var(--sp-8) var(--gutter) 5.5rem; }
  .hero__intro .badge-deadline { display: flex; width: 100%; padding: .75rem 1rem; border-radius: var(--r-lg); }
  .hero__intro .hero-claim { display: none; }
  .hero__media { margin-top: var(--sp-8); aspect-ratio: 4 / 5; }
}
@media (min-width: 992px) {
  .hero { padding-top: calc(var(--nav-h) + var(--sp-6)); padding-bottom: var(--sp-12); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6); align-items: stretch; }
  .hero__intro { border-radius: var(--r-lg); padding: clamp(2.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
  .hero__intro h1 { margin-top: var(--sp-6); }
  .hero__intro > .badge-deadline { align-self: flex-start; }
  .hero__cta { display: flex; flex-wrap: wrap; }
  .hero__cta .btn { padding-inline: 1.5rem; }
  .hero__note { font-size: .9375rem; max-width: 46ch; }
  .hero__media { min-height: 100%; }
  .hero__media img { position: relative; max-height: 760px; }
  .focus-card { display: none; }
}

/* Einstieg hell ab 744 px (ab iPad), darunter rot.
   Die Auszeichnung im HTML bleibt die rote Variante (on-brand, btn--light, btn--outline-light);
   ab 744 px werden Flächen, Schrift und Buttons auf die helle Variante umgestellt. */
@media (min-width: 744px) {
  html body .hero { background: var(--surface); }
  html body .hero .hero__intro.on-brand { background: transparent; color: var(--ink); box-shadow: none; }
  html body .hero .hero__intro.on-brand h1 { color: var(--ink); }
  html body .hero .hero__intro.on-brand .lead, html body .hero .hero__intro.on-brand .hero__note { color: var(--muted); }
  html body .hero .hero__intro.on-brand .badge-deadline { background: var(--brand-soft); color: var(--brand); }
  html body .hero .hero__intro.on-brand :focus-visible { outline-color: var(--brand); }
  html body .hero .hero__intro.on-brand .btn--light {
    --btn-bg: var(--brand); --btn-fg: var(--white); --btn-bd: var(--brand);
    --btn-bg-h: var(--btn-primary-h, var(--brand-strong)); --btn-fg-h: var(--white); --btn-bd-h: var(--brand-strong); }
  html body .hero .hero__intro.on-brand .btn--outline-light {
    --btn-bg: transparent; --btn-fg: var(--brand); --btn-bd: var(--brand);
    --btn-bg-h: var(--btn-primary-h, var(--brand-strong)); --btn-fg-h: var(--white); --btn-bd-h: var(--brand-strong); }
}
@media (min-width: 992px) {
  /* Wie im Bestand: Text bündig mit dem Logo, vertikal mittig zum Porträt */
  html body .hero .hero__grid { column-gap: var(--sp-12); }
  html body .hero { padding-top: calc(var(--nav-h) + var(--sp-12)); padding-bottom: var(--sp-12); }
  html body .hero .hero__intro.on-brand { padding: 0; border-radius: 0; justify-content: center; }
}

/* Karte "Unsere Schwerpunkte" (mobil, überlappend) */
.focus-card { position: relative; margin-top: -4rem; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.focus-card__label { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-2); color: var(--muted); font-size: 1rem; }
.focus-card a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-4);
  border-top: 1px solid var(--line); color: var(--brand); font-size: 1.1rem; font-weight: var(--fw-ui); text-decoration: none;
}
.focus-card a::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.focus-card a:active { background: var(--surface); }
/* Variante „Schwerpunkte als Buttons“ (.focus-card--btn, eingeführt auf kanzlei-remien.de, 02.11.2026):
   Zeilen sind .btn mit dem Button-Hover des Systems (Füllung in der Markenfarbe, Glanz, Pfeil rückt 3 px),
   in Ruhe wie die Karte. Pfeil als ::before, weil ::after beim Button der Glanzstreifen ist.
   Kurz- und Langtext je Breite: .focus-card__short (unter 744 px), .focus-card__long (ab 744 px). */
.focus-card--btn a.btn { --btn-primary-h: var(--brand); display: flex; width: 100%; justify-content: flex-start; gap: var(--sp-3); min-height: 56px;
  padding: var(--sp-4); border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; line-height: inherit; }
.focus-card--btn a.btn > * { order: 1; }
.focus-card--btn a.btn::after { width: auto; height: auto; margin: 0; border: 0; }
.focus-card--btn a.btn::before { content: ""; order: 2; flex: 0 0 auto; margin-left: auto; width: .55rem; height: .55rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-out); }
.focus-card--btn a.btn:active { color: var(--btn-fg-h); }
@media (hover: hover) {
  .focus-card--btn a.btn:hover { color: var(--btn-fg-h); }
  .focus-card--btn a.btn:hover::before { transform: translateX(3px) rotate(-45deg); }
}
.focus-card__long { display: none; }
@media (min-width: 744px) { .focus-card__short { display: none; } .focus-card__long { display: inline; } }
/* Ab 992 px Karte unter den Einstiegstexten (.hero--focus), Porträt über beide Zeilen; Anruf-Buttons und Hinweis
   nur mobil und Tablet (Kontakt am Desktop über die Navigation), Entscheidung 02.11.2026 */
@media (min-width: 992px) {
  .hero--focus .hero__cta, .hero--focus .hero__note { display: none; }
  .hero--focus .hero__grid { grid-template-rows: auto auto; row-gap: 0; }
  .hero--focus .hero__intro { grid-column: 1; grid-row: 1; }
  .hero--focus .hero__media { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; }   /* Porträt unten bündig mit der Karte */
  .hero--focus .focus-card { display: block; grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--sp-6); }
}

/* ---------- Themenblock ---------- */
.topic { display: grid; gap: var(--sp-8); }
@media (min-width: 992px) {
  .topic { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); align-items: start; }
  .topic__card { order: 2; position: sticky; top: calc(var(--nav-h) + var(--sp-6)); }
  .topic--card-left .topic__card { order: 0; }
}
.topic__card { background: var(--brand); color: var(--white); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 3rem); box-shadow: var(--shadow-card); }
.topic__card h2 { color: var(--white); }
.topic__card .lead { margin: 0; color: var(--on-brand-muted); }
.topic__card a { color: inherit; }
.icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--sp-4);
  border-radius: 50%; background: var(--white); color: var(--brand); font-size: 1.5rem; }

.topic__items { counter-reset: topic; }
.topic-item { counter-increment: topic; }
.topic-item + .topic-item { margin-top: var(--sp-8); }
.topic-item__num { display: flex; align-items: center; gap: var(--sp-3); height: 1.5rem; margin-bottom: var(--sp-2); }
.topic-item__num::before { content: counter(topic, decimal-leading-zero); color: var(--brand); font-weight: var(--fw-num); font-size: 1rem; line-height: 1; }
.topic-item__num::after { content: ""; display: block; width: 25%; height: 12px; border-radius: 6px; background: var(--brand); transform-origin: left; }
.topic-item__title { margin-bottom: var(--sp-3); }
.topic-item__body > :last-child { margin-bottom: 0; }
.topic-item__more { font-size: var(--fs-small); }

/* Mobil: Unterpunkte als Akkordeon (Klasse .is-acc setzt site.js) */
@media (max-width: 991.98px) {
  .topic__items { border-top: 1px solid var(--line); }
  .topic-item { border-bottom: 1px solid var(--line); }
  .topic-item + .topic-item { margin-top: 0; }
  .topic-item.is-acc { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-3); }
  .topic-item.is-acc .topic-item__num { margin: 0; height: auto; }
  .topic-item.is-acc .topic-item__num::after { display: none; }
  .topic-item.is-acc .topic-item__title { margin: 0; font-size: 1.15rem; }
  .topic-item.is-acc .acc-panel { grid-column: 1 / -1; }
  .topic-item:not(.is-acc) { padding-block: var(--sp-4); }
}

/* ---------- Akkordeon (mobil und FAQ) ---------- */
.acc-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: 100%; min-height: 56px; padding: var(--sp-3) 0; cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.acc-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acc-btn::after {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; margin-right: .25rem;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.acc-btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.acc-btn[aria-expanded="true"] { color: var(--brand); }
.acc-ready .acc-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.acc-ready .acc-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
/* FAQ ohne Layoutverschiebung: geschlossene Antworten schon ab Seitenaufbau (Klasse js im Kopf) zu, nicht erst nach site.js */
.js .faq__item:has(.acc-btn[aria-expanded="false"]) .acc-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.js .faq .acc-inner > :first-child { margin-top: 0; }
.js .faq .acc-inner > :last-child { margin-bottom: var(--sp-4); }
.acc-inner { min-height: 0; overflow: hidden; }
.acc-ready .acc-panel .acc-inner > :first-child { margin-top: 0; }
.acc-ready .acc-panel .acc-inner > :last-child { margin-bottom: var(--sp-4); }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item h3 { margin: 0; font-size: 1.0625rem; }
.faq__item .acc-inner p { color: var(--ink); font-size: 1rem; }

/* ---------- Zitatblock ---------- */
.quote { background: var(--brand-strong); color: var(--white); }
.quote__inner { max-width: 820px; margin-inline: auto; }
.quote__logo { width: 156px; height: auto; margin-bottom: var(--sp-6); }
.quote blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.65; }
.quote blockquote p { max-width: 68ch; }
.quote__sign { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
.quote__sign img { width: 260px; height: auto; }

/* ---------- Schritte "So geht es weiter" ---------- */
.steps-wrap { position: relative; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-8); }
.steps li { counter-increment: step; position: relative; padding-left: 4rem; font-size: 1.0625rem; line-height: 1.6; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.2rem; z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: var(--brand); color: var(--white); font-weight: var(--fw-num); font-size: 1.05rem;
}
.steps li::after {                                          /* Verbindungslinie; nach der letzten Ziffer weitergeführt */
  content: ""; position: absolute; z-index: 0; left: calc(1.375rem - 1px); top: 2.75rem; bottom: calc(var(--sp-8) * -1 - .2rem);
  width: 2px; background: var(--line); transform-origin: top;
}
.steps li:last-child::after { bottom: 0; }                   /* mobil: bis zum Ende des letzten Textes */
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .steps li { padding-left: 0; padding-top: 4rem; }
  .steps li::before { top: 0; }
  .steps li::after { left: 2.75rem; right: calc(var(--sp-8) * -1); top: calc(1.375rem - 1px); bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .steps li:last-child::after { right: 0; bottom: auto; }     /* bis zum rechten Rand des Inhaltsbereichs */
}

/* ---------- Abschnittskopf ---------- */
.section-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.section-head h2 { margin: 0; }
.section-head .lead { margin: 0; color: var(--muted); }
@media (min-width: 992px) { .section-head { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Blog-Karte ---------- */
.post-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3); height: 100%;
  padding: var(--sp-6); background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.post-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.post-card h3 { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.post-card h3 a { color: var(--ink); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.post-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.post-card__meta { margin-top: auto; padding-top: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.post-card:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.post-card h3 a:focus-visible { outline: none; }
@media (hover: hover) {
  .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
  .post-card:hover h3 a { color: var(--brand); }
}
@media (max-width: 767.98px) {
  .post-grid--scroll { grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter) var(--sp-8);
    scroll-padding-inline: var(--gutter); }
  .post-grid--scroll::-webkit-scrollbar { display: none; }
  .post-grid--scroll > * { scroll-snap-align: start; }
}
.more-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-ui); text-decoration: none; }

/* ---------- Kontaktbereich und Formular ---------- */
.contact { background: var(--brand-strong); color: var(--white); }
.contact h2 { color: var(--white); }
.contact .lead { color: var(--on-brand-muted); max-width: 60ch; }
.contact__grid { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
@media (min-width: 768px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--sp-12); } }
.contact__name { font-size: var(--fs-lead); }
.contact__address { margin-bottom: var(--sp-6); color: var(--on-brand-muted); }
.contact__phone { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--white); font-size: 1.375rem; font-weight: var(--fw-text); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out); }
.contact__phone:hover, .contact__phone:active { color: var(--on-brand-muted); text-decoration: none; }
.contact__label { margin: 0; color: var(--on-brand-muted); font-size: var(--fs-small); }
.contact__name a, .contact__by { display: block; }
.contact__by { color: var(--on-brand-muted); font-size: var(--fs-small); line-height: 1.8; }
.contact__mail { margin-top: var(--sp-6); }
.contact__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); padding: 0; list-style: none; }
.contact__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .35); color: var(--white); transition: background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .contact__social a:hover { background: var(--brand-deep); border-color: var(--white); } }
.contact__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; margin-top: var(--sp-6); min-height: 44px; }
.contact__stars { display: inline-flex; gap: 2px; color: #F2C14E; }
.contact__stars svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.contact__rating strong { font-weight: var(--fw-ui); }
.contact__rating-note { margin: var(--sp-1) 0 0; color: var(--on-brand-muted); font-size: .8125rem; line-height: 1.5; max-width: 40ch; }

.form { display: grid; gap: var(--sp-4); }
@media (min-width: 576px) { .form { grid-template-columns: 1fr 1fr; } .form .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: var(--sp-1); align-content: start; }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-ui); }
.field__input {
  width: 100%; min-height: 52px; padding: .75rem 1rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--r-lg);
  background: transparent; color: var(--white); font: var(--fw-text) var(--fs-input)/1.4 var(--font); color-scheme: dark;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__input::placeholder { color: rgba(255, 255, 255, .6); }
textarea.field__input { min-height: 8rem; resize: vertical; }
select.field__input { appearance: none; padding-right: 2.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 14px no-repeat; }
select.field__input option { color: var(--ink); }
.field__input:focus-visible { outline: none; border-color: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.field__hint { color: var(--on-brand-muted); font-size: var(--fs-small); }
.field__error { display: none; align-items: center; gap: var(--sp-2); margin: 0; padding: .375rem .625rem; border-radius: var(--r-sm);
  background: var(--white); color: var(--brand-strong); font-size: var(--fs-small); font-weight: var(--fw-ui); }
.field.is-invalid .field__input { border-color: var(--white); border-width: 2px; }
.field.is-invalid .field__error { display: inline-flex; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-3); }
.field--check input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--white); }
.field--check label { font-size: var(--fs-small); }
.field--check label a { color: var(--white); }
.field--check .field__error { grid-column: 1 / -1; }
.field--hp { position: absolute !important; left: -9999px; top: 0; }
.acc-ready .field--date:not(.is-open) { margin-top: calc(var(--sp-4) * -1); }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.form__status { margin: 0; font-size: var(--fs-small); color: var(--on-brand-muted); }
.form__status a { color: var(--white); font-weight: var(--fw-ui); }
.spinner { width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-6);
  border-radius: var(--r-lg); background: var(--white); color: var(--ink); }
.form-success[hidden] { display: none; }
.form-success svg { width: 2.25rem; height: 2.25rem; color: var(--brand); }

/* ---------- Schnellkontakt-Leiste (mobil) ---------- */
.contact-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--line);
}
.contact-bar .btn { flex: 1; }
html.js .contact-bar { transform: translateY(110%); visibility: hidden;
  transition: transform 200ms var(--ease-out), visibility 0s linear 200ms; }
html.js .contact-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 992px) { .contact-bar { display: none; } }
/* Variante: Schnellkontakt am Desktop als schwebende Karte rechts unten (.contact-bar--float, Startseite AR, 02.11.2026).
   Gleiche Sichtbarkeit wie die Leiste (M7): erscheint ohne sichtbare Einstiegs-Buttons, verschwindet über dem Kontaktbereich
   und beim Tippen. Oben ein Button mit dem Hover der Schwerpunkte-Karte (.focus-card--btn), darunter Hinweistext in Textgrau (.contact-bar__note),
   Text mittig, ohne Pfeil, leichter Schatten;
   mobil unverändert die Leiste. */
.contact-bar__rows { display: none; }
@media (min-width: 992px) {
  .contact-bar--float { display: block; left: auto; right: var(--sp-6); bottom: var(--sp-6); width: 16rem; padding: 0; border: 0;
    border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-nav); overflow: hidden; }
  .contact-bar--float > .btn { display: none; }
  .contact-bar--float .contact-bar__rows { display: block; }
  .contact-bar--float .contact-bar__rows a.btn { justify-content: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-3) var(--sp-4); font-size: 1rem; font-weight: var(--fw-ui); text-align: center; }
  .contact-bar--float .contact-bar__rows a.btn::before { display: none; }   /* ohne Pfeil */
  .contact-bar--float .contact-bar__rows a.btn:first-child { border-top: 0; }
  .contact-bar--float .contact-bar__rows .bi { width: 1rem; height: 1rem; flex: 0 0 auto; }
  .contact-bar--float .contact-bar__note { margin: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--white); color: var(--muted); font-size: 1rem; text-align: center; }
  /* Saubere Kante auf dunklem Grund: Karte selbst ohne Fläche (kein weißer Saum an den Ecken), Zeilen weiß;
     beim Hover ohne Lichtkante und Schein des Buttons, der Glanzstreifen bleibt */
  .contact-bar--float { background: transparent; }
  .contact-bar--float .contact-bar__rows a.btn { --btn-bg: var(--white); }
  html:not(.no-glass) .contact-bar--float .contact-bar__rows a.btn:hover { box-shadow: none; }
}
@media (max-width: 991.98px) { .site-footer { padding-bottom: calc(var(--sp-12) + 76px); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--white); padding-block: var(--sp-12); text-align: center; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: currentColor; }
.footer-claim { margin: 0 0 var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--white); font-size: 1.05rem; line-height: 1.5; }
.footer-claim strong { font-weight: 800; }
/* Mobil: Trennstrich ausblenden, beide Teile in eigener Zeile (kein Strich am Zeilenende) */
@media (max-width: 575.98px) { .footer-claim__sep { display: none; } .footer-claim > .text-nowrap { display: block; } }
.footer-row p { text-wrap: balance; }
.footer-row { display: grid; gap: var(--sp-3); }
.footer-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
@media (min-width: 576px) { .footer-nav { flex-direction: row; justify-content: center; gap: var(--sp-6); } }
@media (min-width: 992px) { .footer-row { grid-template-columns: 1fr auto; align-items: center; text-align: left; } }

/* ---------- Bausteine Unterseiten ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--line); }
.breadcrumb a { color: var(--muted); }
.kicker { margin: 0 0 var(--sp-2); color: var(--brand); font-weight: var(--fw-ui); font-size: .95rem; }
.page-meta { margin: 0 0 var(--sp-6); color: var(--muted); font-size: var(--fs-small); }
.legal-box { margin-block: var(--sp-8); padding: var(--sp-6); border-left: 3px solid var(--brand); border-radius: var(--r-lg); background: var(--surface); font-size: .95rem; }
.legal-box > :last-child { margin-bottom: 0; }
.disclaimer { color: var(--muted); font-size: var(--fs-small); }
.cta-band { display: grid; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--brand); color: var(--white); }
.cta-band h2, .article .cta-band h2 { margin: 0; color: var(--white); font-size: var(--fs-h3); }
.cta-band p { margin: var(--sp-2) 0 0; color: var(--on-brand-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 768px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: var(--sp-8); } }
.more-topics { padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.more-topics a { display: inline-flex; min-height: 44px; align-items: center; }
.aside-contact { display: none; }
@media (min-width: 1200px) {
  .aside-contact { display: grid; gap: var(--sp-3); position: sticky; top: calc(var(--nav-h) + var(--sp-6));
    padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
  .aside-contact p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
}

/* ---------- Vorlage T3: Themenseite ---------- */
.page-head { padding: calc(var(--nav-h) + var(--sp-8)) 0 var(--sp-8); background: var(--surface); }
.page-head h1 { max-width: 22ch; margin-bottom: var(--sp-3); }
.page-head .page-meta { margin: 0; }
.page-head__cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-6); max-width: 30rem; }
.page-head__cta .btn { padding-inline: .5rem; }
@media (min-width: 992px) { .page-head { padding-top: calc(var(--nav-h) + var(--sp-12)); } .page-head__cta { display: flex; } .page-head__cta .btn { padding-inline: 1.5rem; } }
.article-grid { display: grid; gap: var(--sp-12); }
.page-head__lead { margin: var(--sp-4) 0 0; color: var(--muted); max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.article { max-width: var(--measure); min-width: 0; }
@media (min-width: 992px) and (max-width: 1199.98px) { .article { margin-inline: auto; } }
@media (min-width: 1200px) { .article-grid { grid-template-columns: minmax(0, var(--measure)) 300px; justify-content: space-between; align-items: start; } }
.article .lead { margin-bottom: var(--sp-8); }
.article h2 { margin: var(--sp-12) 0 var(--sp-4); font-size: var(--fs-h3); }
.page-head + .section { padding-top: var(--sp-8); }
@media (max-width: 575.98px) { .article p { hyphens: auto; } }
.article-foot { margin-top: var(--sp-8); display: grid; gap: var(--sp-4); }
.article-foot p { margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-weight: var(--fw-ui); }
.cta-band { margin-top: var(--sp-8); }

/* ---------- Vorlage T2: Zielgruppen ---------- */
.page-head .page-head__note { margin-top: var(--sp-4); }
.link-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.link-card h2 { margin: 0; font-size: var(--fs-h3); }
.link-card h2 a { color: var(--ink); text-decoration: none; }
.link-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.link-card p { margin: 0; color: var(--muted); }
.link-card__more { margin-top: auto !important; color: var(--brand) !important; font-weight: var(--fw-ui); }
.link-card:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.link-card h2 a:focus-visible { outline: none; }
@media (hover: hover) { .link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .link-card:hover h2 a { color: var(--brand); } }
.icon-circle--brand { background: var(--brand); color: var(--white); margin-bottom: 0; }
.topic__text > :last-child { margin-bottom: 0; }
.topic__cta { margin: var(--sp-6) 0 0; }
.faq-intro { color: var(--muted); margin-bottom: var(--sp-6); }
.section--tight { padding-block: var(--sp-12); }

/* ---------- Vorlage T4: Kanzlei ---------- */
.page-head__grid { display: grid; gap: var(--sp-8); align-items: center; }
.page-head__portrait img { width: 100%; max-width: 460px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-lg); }
@media (min-width: 992px) { .page-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); } .page-head__portrait img { max-width: none; max-height: 640px; } }
/* Werdegang als ruhige Zeitleiste: Linie mit Punkten, ohne Animation */
.timeline .topic-item { position: relative; padding-left: var(--sp-8); }
.timeline .topic-item::before { content: ""; position: absolute; left: 5px; top: .55rem; bottom: calc(var(--sp-8) * -1); width: 2px; background: var(--line); }
.timeline .topic-item:last-child::before { bottom: 0; }
.timeline .topic-item::after { content: ""; position: absolute; left: 0; top: .4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.timeline .topic-item__num { display: none; }
@media (max-width: 991.98px) { .timeline .topic-item { border-bottom: 0; } .timeline .topic-item::before { top: 1.55rem; } .timeline .topic-item::after { top: 1.4rem; } }

/* ---------- Vorlage T5: Blog-Übersicht ---------- */
.blog-group { margin-bottom: var(--sp-6); }
.blog-group h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); }
.blog-group p { margin: 0; color: var(--muted); }
.page-head__lead.lead { max-width: 70ch; }

/* ---------- Vorlage T7: FAQ und Glossar ---------- */
.topic__rule { margin: var(--sp-6) 0 var(--sp-4); border: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.topic__note { margin: 0 0 var(--sp-1); color: var(--on-brand-muted); }
.topic__more { margin: var(--sp-6) 0 0; font-weight: var(--fw-ui); }
.faq-group { margin: 0 0 var(--sp-3); font-weight: var(--fw-ui); }
.glossar-wrap { max-width: 980px; }
.glossar-wrap .lead { color: var(--muted); max-width: 70ch; }
.glossar-az { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-8); }
.glossar-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font-weight: var(--fw-ui); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .glossar-az a:hover { border-color: var(--brand); color: var(--brand); } }
.glossar-group { padding-top: var(--sp-6); scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
.glossar-group h3 { margin: 0 0 var(--sp-3); color: var(--brand); font-size: var(--fs-h3); }
.glossar { margin: 0; }
.glossar dt { margin-top: var(--sp-4); font-weight: var(--fw-ui); scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
.glossar dd { margin: var(--sp-1) 0 0; color: var(--muted); }
.glossar dt, .glossar dd { overflow-wrap: break-word; }
@media (max-width: 575.98px) { .glossar dt, .glossar dd, .faq .acc-inner p { hyphens: auto; } }

/* ---------- Vorlage T8: Rechtsseiten ---------- */
.legal-body { max-width: var(--measure); }
.legal-body h2 { margin: var(--sp-8) 0 var(--sp-3); font-size: var(--fs-h3); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: 1.0625rem; }
.legal-body p, .legal-body li { overflow-wrap: anywhere; }
.legal-card { margin: var(--sp-3) 0 var(--sp-6); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface); }
.legal-card > :last-child { margin-bottom: 0; }
.legal-card img { height: auto; }

/* Zitat mit Porträt (Unterseiten) */
.quote--portrait .quote__grid { display: grid; gap: var(--sp-8); align-items: center; }
.quote--portrait .quote__portrait img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-lg); }
@media (min-width: 992px) { .quote--portrait .quote__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-12); } }

/* Links ohne Unterstrich (Navigation, Buttons, Karten, Footer-Links) */
.nav-link, .btn, .focus-card a, .post-card h3 a, .brand-group a, .contact__social a, .contact__phone, .more-topics a.btn { text-decoration: none; }
.post-card__more { position: relative; z-index: 1; font-weight: var(--fw-ui); }   /* über dem Kartenlink klickbar */

/* Abschnittsfuß und schmaler Inhalt (FAQ) */
.section-foot { margin: var(--sp-8) 0 0; text-align: center; }
.container--narrow { max-width: 980px; }