/*
Theme Name:   Arnst
Theme URI:    https://ra-arnst.de/
Author:       computento
Description:  Theme für die Kanzlei Stefan Arnst, Fachanwalt für Familienrecht in Düsseldorf. Ruhige, mandantennahe Startseite mit eigenem Schwerpunktbereich für Vermögensangelegenheiten. Schriften werden lokal ausgeliefert, es besteht keine Verbindung zu Google.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  arnst
Tags:         two-columns, custom-menu, custom-logo, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* ============================================================
   ARNST — Gestaltung
   Farbwerte stammen aus dem Kanzleilogo: Blau #133370,
   Akzent #9a5407 als textsichere Abdunklung des Logo-Orange.
   Alle Farben laufen über Tokens; keine festen Werte im Rumpf.
   ============================================================ */
/* --- Tokens: Licht (Standard) --------------------------------- */
:root {
  --ground:        #ebeef3;
  --ground-deep:   #e1e6ef;
  --surface:       #f7f9fc;
  --surface-sunk:  #e6eaf1;
  --ink:           #171d2a;
  --ink-soft:      #333c4d;
  --muted:         #59637a;
  --primary:       #133370;   /* Blau aus dem Kanzleilogo */
  --primary-hover: #0d2453;
  --on-primary:    #f5f7fb;
  --accent:        #9a5407;   /* textsichere Abdunklung des Logo-Orange */
  --accent-bright: #c26a09;
  --rule:          #d3d9e4;
  --rule-strong:   #b6bece;
  --focus:         #9a5407;
  --fehler:        #a03521;
  --shadow:        0 1px 2px rgba(23,29,42,.06), 0 12px 32px -18px rgba(23,29,42,.30);
  --horizon:       radial-gradient(120% 80% at 70% 100%, rgba(19,51,112,.11), transparent 65%);

  --step--1: clamp(.82rem, .8rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.075rem);
  --step-1:  clamp(1.16rem, 1.1rem + .3vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.28rem + .55vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.4vw, 4rem);

  --gutter:  clamp(1.25rem, 4vw, 3rem);
  /* Hoehe der klebenden Kopfleiste. Zwei Dinge haengen daran: wie weit
     das Sprungverzeichnis von oben klebt und wie weit eine angesprungene
     Ueberschrift unter die Leiste rutscht. Beide waren vorher geraten. */
  --kopfhoehe: 100px;
  --band:    clamp(3.75rem, 8vw, 7.5rem);

  /* Breite der Textspalte. Vorher 66ch, das waren 612 px in einer
     1140 px breiten Huelle: der Text stand links, rechts blieb die
     halbe Seite leer. Jetzt laeuft er auf dieselbe Breite wie Kopf,
     Brotkrume und Fuss. Wer die Zeilen wieder kuerzen will, setzt hier
     ein festes Mass ein (z. B. 88ch) - alle Textspalten folgen. */
  --measure: 100%;
}

/* --- Tokens: Dunkel ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #12161f;
    --ground-deep:   #0e121a;
    --surface:       #1a1f2b;
    --surface-sunk:  #151a24;
    --ink:           #e6e9f0;
    --ink-soft:      #ccd2de;
    --muted:         #98a1b5;
    --primary:       #8ba8de;
    --primary-hover: #a6c0ec;
    --on-primary:    #0b1220;
    --accent:        #e0954a;
    --accent-bright: #eaa964;
    --rule:          #262d3b;
    --rule-strong:   #3a4356;
    --focus:         #eaa964;
    --fehler:        #f08a72;
    --shadow:        0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
    --horizon:       radial-gradient(120% 80% at 70% 100%, rgba(139,168,222,.10), transparent 65%);
  }
}
:root[data-theme="dark"] {
  --ground:        #12161f;
  --ground-deep:   #0e121a;
  --surface:       #1a1f2b;
  --surface-sunk:  #151a24;
  --ink:           #e6e9f0;
  --ink-soft:      #ccd2de;
  --muted:         #98a1b5;
  --primary:       #8ba8de;
  --primary-hover: #a6c0ec;
  --on-primary:    #0b1220;
  --accent:        #e0954a;
  --accent-bright: #eaa964;
  --rule:          #262d3b;
  --rule-strong:   #3a4356;
  --focus:         #eaa964;
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  --horizon:       radial-gradient(120% 80% at 70% 100%, rgba(139,168,222,.10), transparent 65%);
}

/* --- Reset / Basis -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: .06em; }
a:hover { color: var(--ink); }
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }

.wrap { width: min(100% - 2 * var(--gutter), 1140px); margin-inline: auto; }
.narrow { max-width: var(--measure); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; }

.section { padding-block: var(--band); border-top: 1px solid var(--rule); }
.section > .wrap { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }
.section-head { display: flex; flex-direction: column; gap: .6rem; max-width: 60ch; }
/* Ein getoentes Band: Entwurf 4 setzt „Zur Person" so vom Rest ab.
   Die eigene obere Linie faellt weg — die Kante zeichnet schon die
   Tonung, und der Nachbar darueber bringt seinen eigenen Strich mit. */
.section-tinted { background: var(--surface); border-top: 0; }

/* --- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  font: inherit; font-weight: 500; font-size: var(--step-0);
  border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* --- Utility-Leiste ------------------------------------------- */
.utility {
  background: var(--ground-deep);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
}
.utility .wrap {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  align-items: center; justify-content: space-between;
  min-height: 42px; padding-block: .35rem;
}
.utility a { color: var(--muted); text-decoration: none; }
.utility a:hover { color: var(--ink); text-decoration: underline; }
.utility-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

/* --- Kopf / Navigation ---------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: var(--kopfhoehe); }

.wordmark { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); }
.wordmark img { height: 65px; width: auto; }
.wordmark .logo-dunkel { display: none; }
.wordmark-sub {
  padding-left: .9rem; border-left: 1px solid var(--rule-strong);
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); line-height: 1.35; white-space: nowrap;
}
@media (max-width: 560px) {
  .wordmark-sub { display: none; }
  .wordmark img { height: 52px; }
  :root { --kopfhoehe: 82px; }
  .masthead .wrap { min-height: var(--kopfhoehe); }
}

/* Logo-Umschaltung: dieselbe Drei-Zustands-Logik wie bei den Farbtokens */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark .logo-hell { display: none; }
  :root:not([data-theme="light"]) .wordmark .logo-dunkel { display: block; }
}
:root[data-theme="dark"] .wordmark .logo-hell { display: none; }
:root[data-theme="dark"] .wordmark .logo-dunkel { display: block; }

.foot-logo { height: 52px; width: auto; margin-bottom: 1rem; }
.foot-logo.logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-logo.logo-hell { display: none; }
  :root:not([data-theme="light"]) .foot-logo.logo-dunkel { display: block; }
}
:root[data-theme="dark"] .foot-logo.logo-hell { display: none; }
:root[data-theme="dark"] .foot-logo.logo-dunkel { display: block; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; font-weight: bold; }
/* Sicherheitsnetz: Bei vergroessertem Text passt die Leiste sonst
   nicht mehr in eine Zeile und schiebt die Seite auseinander. */
.nav > ul { flex-wrap: wrap; }
.nav a {
  display: block; padding: .5rem .7rem; border-radius: 2px;
  font-size: .96rem; color: var(--ink-soft); text-decoration: none;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--surface-sunk); }

/* Der Elternpunkt ist ein Link auf seine eigene Seite. Der kleine
   Schalter daneben oeffnet das Klappmenue dort, wo es kein Ueberfahren
   gibt — auf Tastatur und am Finger. */
.has-sub { position: relative; display: flex; align-items: center; gap: 0; }
.has-sub > a { padding-right: .35rem; }
.has-sub > .nav-kopf {
  padding: .5rem .35rem .5rem .7rem; font-size: .96rem; color: var(--ink-soft);
  white-space: nowrap;
}
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-height: 28px; padding: 0 .55rem 0 .2rem;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer;
  border-radius: 2px;
}
.sub-toggle::after {
  content: ""; width: .42em; height: .42em; margin-top: -.22em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.has-sub:hover > a,
.has-sub:focus-within > a,
.has-sub[data-open="true"] > a { color: var(--ink); background: var(--surface-sunk); }
.sub-toggle:hover, .has-sub[data-open="true"] > .sub-toggle { color: var(--ink); }
.has-sub[data-open="true"] > .sub-toggle::after,
.has-sub:hover > .sub-toggle::after,
.has-sub:focus-within > .sub-toggle::after { transform: rotate(225deg) translate(-.1em, -.1em); }
.nav .submenu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 50;
  min-width: 268px; padding: .5rem; margin: 0; list-style: none;
  flex-direction: column; align-items: stretch;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow);
  display: none;
}
/* Ueberfahren und Tastaturfokus oeffnen das Klappmenue. Der Bereich
   reicht bis unter das Menue, damit der Weg dorthin nicht abreisst. */
.nav .has-sub[data-open="true"] > .submenu,
.nav .has-sub:hover > .submenu,
.nav .has-sub:focus-within > .submenu { display: flex; }
.nav .has-sub::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .5rem;
}
.nav .submenu a { padding: .55rem .7rem; font-size: .94rem; }

.nav-toggle {
  display: none; margin-left: auto;
  min-height: 44px; min-width: 44px; align-items: center; gap: .5rem;
  padding: .5rem .8rem; font: inherit; font-size: .92rem;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink); cursor: pointer;
}
.masthead-cta { display: inline-flex; white-space: nowrap; }

/* Der Umbruchpunkt steht in em, nicht in px: Wer im Browser eine
   groessere Grundschrift eingestellt hat, bekommt das Klappmenue
   entsprechend frueher. 78em sind bei Vorgabeschrift 1248px: ab da
   bleiben mindestens 73px zwischen Logo und Leiste. Darunter wurde
   es mit 24px zu eng. */
@media (max-width: 78em) {
  .nav { display: none; order: 3; width: 100%; margin: 0; border-top: 1px solid var(--rule); padding-block: .75rem; }
  .masthead[data-menu="true"] .nav { display: block; }
  .masthead[data-menu="true"] .wrap { flex-wrap: wrap; padding-bottom: .5rem; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { width: 100%; text-align: left; padding: .7rem .5rem; }
  .has-sub { flex-wrap: wrap; }
  .has-sub > a { flex: 1; }
  .sub-toggle { width: 44px; min-height: 44px; padding: 0; }
  /* Ohne Mauszeiger darf das Ueberfahren nicht aufklappen. */
  .nav .has-sub:hover > .submenu { display: none; }
  .nav .has-sub[data-open="true"] > .submenu,
  .nav .has-sub:focus-within > .submenu { display: flex; }
  .nav .submenu { position: static; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 .5rem 1rem; }
  .has-sub > button::after { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .masthead-cta { display: none; }
}

/* --- Hero ------------------------------------------------------ */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) var(--band); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; background: var(--horizon); pointer-events: none;
}
.hero .wrap { position: relative; display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.hero-copy { display: flex; flex-direction: column; gap: 1.4rem; }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }

.trustline {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-top: 1.25rem; margin-top: .5rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--muted);
}
.trustline > span { display: inline-flex; align-items: center; gap: .5rem; }
.trustline .tick { width: 6px; height: 6px; background: var(--accent-bright); border-radius: 50%; flex: none; }
/* Die Punkte drei und vier verweisen auf die Bewertungsprofile. Sie
   behalten die Farbe der Zeile und zeigen sich ueber den Strich —
   in Akzentfarbe rissen sie die ruhige Zeile auseinander. */
.trustline a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.trustline a:hover, .trustline a:focus-visible { color: var(--ink); text-decoration-thickness: 2px; }

.portrait { position: relative; max-width: 380px; margin-inline: auto; width: 100%; }
.portrait figure { margin: 0; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.portrait .frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunk); }
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 32% 28%;
  filter: saturate(.72) contrast(1.04);
}
.portrait .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--primary) 22%, transparent));
  mix-blend-mode: multiply;
}
.portrait figcaption {
  padding: .9rem 1.1rem 1rem; font-size: var(--step--1); color: var(--muted); line-height: 1.45;
}
.portrait figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; }
.portrait .signature {
  position: absolute; right: 0; top: 0;
  padding: .55rem .85rem; background: var(--primary); color: var(--on-primary);
  font-family: Spectral, Georgia, serif; font-size: .92rem; letter-spacing: .02em;
}

/* --- Themenliste ----------------------------------------------- */
.topics { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 60em) { .topics { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); } }
.topics li { border-bottom: 1px solid var(--rule); }
.topics a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .35rem 1rem;
  padding: 1.15rem .25rem 1.25rem; text-decoration: none; color: var(--ink);
  transition: padding-left .2s ease, background-color .2s ease;
}
.topics a:hover, .topics a:focus-visible { padding-left: .9rem; background: var(--surface); }
.topics .t-name { font-family: Spectral, Georgia, serif; font-size: var(--step-2); line-height: 1.2; }
.topics .t-desc { grid-column: 1 / -1; font-size: var(--step--1); color: var(--muted); max-width: 42ch; }
.topics .t-arrow { color: var(--accent); font-size: 1.1rem; transform: translateY(-.05em); }
@media (prefers-reduced-motion: reduce) { .topics a { transition: none; } }

/* --- Ablauf (echte Reihenfolge → Nummerierung gerechtfertigt) --- */
.steps { list-style: none; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: .6rem; padding-top: 1.4rem; border-top: 2px solid var(--primary); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: Spectral, Georgia, serif; font-size: var(--step-2); color: var(--accent); line-height: 1;
}
.steps p { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }

/* --- Haltung / Zitat ------------------------------------------- */
/* Entwurf 4 stellt das Zitat auf den normalen Grund, zwischen zwei
   Linien. Getoent stiesse es ausserdem unmittelbar an das getoente
   Personenband darunter — beide verschmaelzen dann zu einem Block. */
.stance { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stance .wrap { padding-block: var(--band); }
.stance blockquote {
  margin: 0; max-width: 30ch;
  font-family: Spectral, Georgia, serif; font-style: italic; font-weight: 300;
  font-size: var(--step-3); line-height: 1.25; letter-spacing: -.015em; color: var(--ink);
}
.stance blockquote::before { content: "„"; color: var(--accent); }
.stance blockquote::after { content: "“"; color: var(--accent); }
.stance cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: var(--step--1); color: var(--muted); }

/* --- Profil ---------------------------------------------------- */
.profile { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .profile { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
.prose { display: flex; flex-direction: column; gap: 1.1rem; max-width: var(--measure); }
.prose p { color: var(--ink-soft); }
/* Der Nachsatz unter dem Profiltext nennt die Lage der Kanzlei, nicht
   die Sache. Er tritt zurueck, ohne eine eigene Ueberschrift zu
   brauchen. */
.prose .prose-note { font-size: var(--step--1); color: var(--muted); }

/* --- Karten (Kosten) ------------------------------------------- */
/* auto-fit statt dreier fester Spalten: Entwurf 4 hat zwei Karten, und
   die sollen die Zeile fuellen, statt ein Drittel leer zu lassen. */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--primary);
}
/* Die Ueberschrift benennt die Leistung und bleibt im Dokument eine
   Ueberschrift. Sichtbar fuehrt aber der Betrag darunter — so steht
   es im Entwurf. */
.card h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .76rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.card p { font-size: var(--step--1); color: var(--muted); }
.card .card-betrag {
  margin-top: -.1rem;
  font-family: Spectral, Georgia, serif; font-weight: 400;
  font-size: var(--step-2); line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* „zzgl. USt." gehoert zum Betrag und darf nicht von ihm abreissen. */
.card .card-betrag small {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: var(--step--1); color: var(--muted); white-space: nowrap;
}
.card .card-note { margin-top: auto; padding-top: .9rem; font-size: .8rem; color: var(--muted); }

/* --- FAQ -------------------------------------------------------- */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem .25rem; cursor: pointer; list-style: none;
  font-family: Spectral, Georgia, serif; font-size: var(--step-1); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-family: "IBM Plex Sans", sans-serif; font-size: 1.4rem; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 .25rem 1.35rem; color: var(--muted); font-size: .98rem; }

/* --- Kontakt ---------------------------------------------------- */
.contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
/* Kein eigener Rand: .contact-details setzt die Abstände über gap,
   ein Rand darunter verdoppelte die Lücke zur Telefonnummer. */
.kontakt-hinweis {
  margin: 0; max-width: 34ch;
  color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6;
}
.contact-details dl { display: grid; gap: 1.1rem; margin: 0; }
.contact-details dt { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.contact-details dd { margin: 0; color: var(--ink); }
.tel-big {
  font-family: Spectral, Georgia, serif; font-size: var(--step-2);
  color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
}
.tel-big:hover { color: var(--accent); }

form { display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.4rem, 3vw, 2rem); }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
label { font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: .75rem .85rem; min-height: 48px; width: 100%;
}
textarea { min-height: 130px; resize: vertical; }
input:focus-visible, textarea:focus-visible { border-color: var(--focus); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .85rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: .18rem; accent-color: var(--primary); }
.form-note { font-size: .8rem; color: var(--muted); }
.form-status {
  display: none; padding: .8rem 1rem; font-size: .9rem;
  background: var(--surface-sunk); border-left: 3px solid var(--accent-bright); color: var(--ink-soft);
}
.form-status[data-visible="true"] { display: block; }

/* --- Fuß -------------------------------------------------------- */
.site-foot { background: var(--ground-deep); border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.foot-grid { display: grid; gap: 2.25rem; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-grid h2,
.foot-grid h3 { font-family: "IBM Plex Sans", sans-serif; font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.foot-grid a { color: var(--ink-soft); text-decoration: none; font-size: .94rem; }
.foot-grid a:hover { color: var(--accent); text-decoration: underline; }
.foot-address { font-style: normal; color: var(--ink-soft); font-size: .96rem; line-height: 1.7; }
.rating { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.25rem; }
.rating-text { margin: 0; font-size: .86rem; color: var(--muted); }
.rating-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.rating-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .86rem; color: var(--muted); }
.rating-note { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Anteilig gefuellte Sterne: unten die graue Flaeche, darueber die
   farbige, von rechts um den fehlenden Anteil beschnitten (--rest
   setzt arnst_sterne() je Stern). Der viewBox liegt eng um die Form,
   Prozent der Breite sind also Prozent des Sterns. */
.sterne { display: inline-flex; gap: .15rem; flex: none; }
.stern { position: relative; display: block; width: 1rem; height: .95rem; }
.stern svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--rule-strong); }
.stern svg.voll { fill: var(--accent-bright); clip-path: inset(0 var(--rest, 0%) 0 0); }
.foot-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: var(--muted);
}

/* --- Mobile Anrufleiste ----------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 1px; background: var(--rule-strong);
  border-top: 1px solid var(--rule-strong);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; text-decoration: none; font-size: .95rem; font-weight: 500;
}
.callbar .c-tel { background: var(--primary); color: var(--on-primary); }
.callbar .c-form { background: var(--surface); color: var(--ink); }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .8rem 1.2rem; background: var(--primary); color: var(--on-primary); text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Teaser fuer den Vermoegensschwerpunkt ------------------------ */
.spotlight {
  background: var(--surface);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.spotlight .wrap { padding-block: var(--band); display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.spotlight-head { display: flex; flex-direction: column; gap: .7rem; max-width: 56ch; }

.spotlight-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 800px) { .spotlight-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } }
.spotlight-list li { border-bottom: 1px solid var(--rule); }
.spotlight-list a {
  display: grid; gap: .25rem; padding: 1rem .2rem 1.1rem;
  text-decoration: none; color: var(--ink);
  transition: padding-left .2s ease;
}
.spotlight-list a:hover, .spotlight-list a:focus-visible { padding-left: .8rem; }
@media (prefers-reduced-motion: reduce) { .spotlight-list a { transition: none; } }
.spotlight-list .s-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: Spectral, Georgia, serif; font-size: var(--step-1); line-height: 1.25;
}
.spotlight-list .s-name::after { content: "→"; color: var(--accent); flex: none; }
.spotlight-list .s-desc { font-size: var(--step--1); color: var(--muted); max-width: 44ch; }

.spotlight-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem;
}
.spotlight-foot .terms {
  font-size: var(--step--1); color: var(--muted); max-width: 52ch; line-height: 1.6;
}
.spotlight-foot .terms b { color: var(--ink-soft); font-weight: 500; }

/* ============================================================
   WORDPRESS
   Alles ab hier gehört nicht zum Entwurf, sondern ist nötig,
   damit sich das Theme im WordPress-Umfeld korrekt verhält:
   Pflichtklassen, Editor-Ausgaben, Innenseiten.
   ============================================================ */

/* --- Pflichtklassen ---------------------------------------------- */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; margin: 0; padding: .8rem 1.2rem;
  top: 0; left: 0; z-index: 100; display: block;
  background: var(--primary); color: var(--on-primary); font-size: 1rem;
}
.sticky, .bypostauthor { /* von der Theme-Prüfung verlangt */ }

/* --- Ausrichtungen aus dem Editor -------------------------------- */
.alignleft { float: left; margin: .35rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .35rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; display: block; }
.entry-content > .alignwide { width: min(100%, 1140px); margin-inline: auto; }
.entry-content > .alignfull {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption, figcaption {
  font-size: var(--step--1); color: var(--muted); padding-top: .5rem; line-height: 1.5;
}

/* --- Seiteninhalt aus dem Editor --------------------------------- */
.entry-content { display: flex; flex-direction: column; gap: 1.2rem; max-width: var(--measure); }
.entry-content > * { margin: 0; }
.entry-content > .alignwide, .entry-content > .alignfull { max-width: none; }
.entry-content p { color: var(--ink-soft); }
.entry-content h2 { font-size: var(--step-2); margin-top: 1.4rem; margin-bottom: 5px; }
.entry-content h3 { font-size: var(--step-1); margin-top: 1rem; }
.entry-content h4 {
  font-family: "IBM Plex Sans", sans-serif; font-size: 1rem; font-weight: 600;
  margin-top: .8rem; color: var(--ink);
}
.entry-content ul, .entry-content ol { padding-left: 1.3rem; display: grid; gap: .45rem; color: var(--ink-soft); }
.entry-content li::marker { color: var(--accent); }
/* Senkrechte Polsterung vergroessert die Trefferflaeche auf die
   geforderten 24 px, ohne den Zeilenfall zu veraendern: bei einem
   inline-Element zaehlt Polsterung nicht zur Zeilenhoehe. */
/* Die Fundstelle unter einem Beitrag: eine Quellenangabe, keine
   Aussage - darum kleiner, ruhiger und mit einer Linie abgesetzt. */
.entry-content .quelle {
  margin-top: .6rem; padding-top: .9rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--muted);
}

.entry-content a { color: var(--accent); padding-block: .2rem; }
.entry-content a:hover { color: var(--ink); }

/* Schaltflaechen im Inhalt behalten ihre eigenen Farben und Masse.
   `.entry-content a` ist spezifischer als `.btn-primary` und faerbte
   sie sonst um — beim Ueberfahren sogar dunkel auf dunkelblau. Die
   Polsterung fuer die Tippflaeche hatte zugleich die des Knopfes
   ueberschrieben. */
.entry-content a.btn { padding-block: .8rem; }
.entry-content a.btn-primary,
.entry-content a.btn-primary:hover,
.entry-content a.btn-primary:focus-visible { color: var(--on-primary); }
.entry-content a.btn-ghost,
.entry-content a.btn-ghost:hover,
.entry-content a.btn-ghost:focus-visible { color: var(--ink); }
.entry-content strong { color: var(--ink); font-weight: 600; }
.entry-content blockquote {
  padding-left: 1.25rem; border-left: 3px solid var(--rule-strong);
  font-family: Spectral, Georgia, serif; font-style: italic; font-size: var(--step-1);
  color: var(--ink);
}
.entry-content blockquote cite { display: block; margin-top: .6rem; font: inherit; font-style: normal; font-size: var(--step--1); color: var(--muted); }
.entry-content img, .entry-content .wp-block-image img { height: auto; }
.entry-content hr, .wp-block-separator { border: 0; border-top: 1px solid var(--rule); width: 100%; }
.entry-content code, .entry-content kbd {
  font-family: ui-monospace, Consolas, monospace; font-size: .9em;
  background: var(--surface-sunk); padding: .1em .35em; border-radius: 2px;
}
.entry-content pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); padding: 1rem; }

.entry-content .wp-block-table, .entry-content table { width: 100%; }
.entry-content .wp-block-table,
.entry-content .tabelle-scroll { overflow-x: auto; }
/* Der Scrollbereich ist mit der Tastatur erreichbar; ohne sichtbaren
   Fokus wuesste niemand, dass er gerade dort steht. */
.entry-content .tabelle-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.entry-content table { border-collapse: collapse; font-size: .97rem; }
.entry-content th, .entry-content td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.entry-content th { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; color: var(--ink); background: var(--surface-sunk); }
.entry-content td { color: var(--ink-soft); }

.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.5rem; border-radius: 2px;
  background: var(--primary); color: var(--on-primary);
  font-weight: 500; text-decoration: none;
}
.wp-block-button__link:hover { background: var(--primary-hover); color: var(--on-primary); }
.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent; color: var(--ink); border: 1px solid var(--rule-strong);
}

/* --- Innenseiten: Kopf und Rumpf --------------------------------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head .wrap { display: flex; flex-direction: column; gap: .8rem; }
.page-head h1 { font-size: var(--step-3); max-width: 32ch; }
.page-head .lede { max-width: var(--measure); }
.page-body { padding-bottom: var(--band); }

/* Text und Sprungverzeichnis nebeneinander. Das Verzeichnis steht im
   Quelltext vor dem Text — auf schmalen Schirmen gehoert es ueber den
   Artikel, nicht dahinter. Erst ab 60em setzt es sich nach rechts;
   beide Kinder bekommen dafuer ihren Platz ausdruecklich zugewiesen,
   sonst landete der Text in der zweiten Reihe. */
.page-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }

@media (min-width: 60em) {
  .page-grid.hat-seitennav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
  }
  .page-grid.hat-seitennav > .entry-content { grid-column: 1; grid-row: 1; }
  .page-grid.hat-seitennav > .seitennav {
    grid-column: 2; grid-row: 1;
    margin-bottom: 0;
    position: sticky; top: calc(var(--kopfhoehe) + 1.5rem);
    /* /unterhalt/ hat 22 Punkte. Laenger als der Schirm darf der
       Block nicht werden, sonst waere sein Ende nie erreichbar. */
    max-height: calc(100vh - var(--kopfhoehe) - 3rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .admin-bar .page-grid.hat-seitennav > .seitennav {
    top: calc(var(--kopfhoehe) + 32px + 1.5rem);
    max-height: calc(100vh - var(--kopfhoehe) - 32px - 3rem);
  }
}

.breadcrumb {
  font-size: var(--step--1); color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .4rem;
  /* Die Links tragen fuer die Tippflaeche eine senkrechte Polsterung,
     die Trenner nicht. Ohne Grundlinien-Ausrichtung saesse der
     Linktext dadurch tiefer als die Trennzeichen. */
  align-items: baseline;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink-soft); }

/* --- Beitragslisten ----------------------------------------------- */
.post-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.post-list > li { border-bottom: 1px solid var(--rule); }
.post-list article { display: grid; gap: .5rem; padding: 1.4rem .2rem 1.6rem; }
.post-list h2 { font-size: var(--step-2); }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--accent); }
.post-meta { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.post-list p { color: var(--muted); font-size: .98rem; }
.mehr { font-size: var(--step--1); color: var(--accent); text-decoration: none; }
.mehr:hover { text-decoration: underline; }

.single-meta { font-size: var(--step--1); color: var(--muted); }

/* --- Blättern ------------------------------------------------------ */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 2rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; padding: .5rem .8rem;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-soft); text-decoration: none; font-variant-numeric: tabular-nums;
}
.pagination .page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pagination .dots { border-color: transparent; background: transparent; }

/* --- Suche und 404 -------------------------------------------------- */
.suchformular { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.suchformular label { flex: 1 1 14rem; }
.suchformular input[type="search"] {
  font: inherit; font-size: 1rem; width: 100%; min-height: 48px;
  padding: .75rem .85rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule-strong); border-radius: 2px;
}
.suchformular input[type="search"]:focus-visible { border-color: var(--focus); }

.hinweis {
  padding: 1.1rem 1.3rem; background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent-bright);
  color: var(--ink-soft); max-width: var(--measure);
}

/* --- Formularzustände ----------------------------------------------- */
.feld-fehler input, .feld-fehler textarea { border-color: var(--fehler); }
.fehlertext { font-size: var(--step--1); color: var(--fehler); }
.form-meldung {
  padding: .9rem 1.1rem; font-size: .95rem; border-left: 3px solid var(--primary);
  background: var(--surface-sunk); color: var(--ink-soft);
}
.form-meldung.ist-fehler { border-left-color: var(--fehler); }
.hp-feld { position: absolute; left: -9999px; }

/* --- Adminleiste ------------------------------------------------------ */
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }

/* --- Druck ------------------------------------------------------------ */
@media print {
  .topbar, .masthead, .callbar, .site-foot, form, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; border-top: 1px solid #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* --- Nachträge aus der WordPress-Umsetzung ------------------------ */

/* Ohne gesetztes Porträt läuft der Aufmacher einspaltig. */
.hero.ohne-portraet .wrap { grid-template-columns: minmax(0, 1fr); }
.hero.ohne-portraet .hero-copy { max-width: 46rem; }

/* Ein im Customizer gesetztes Logo ersetzt beide mitgelieferten Fassungen. */
.wordmark .logo-eigen { height: 65px; width: auto; display: block; }
.foot-logo.logo-eigen { height: 52px; width: auto; display: block; }
@media (max-width: 560px) { .wordmark .logo-eigen { height: 52px; } }

/* Beitragsbild über dem Text von Seiten und Beiträgen. */
.beitragsbild { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.beitragsbild img { width: 100%; height: auto; border: 1px solid var(--rule); }

/* ============================================================
   RESPONSIVE-NACHBESSERUNGEN
   Ergebnis der Messung über 320–1920 px. Die Startseite lief
   sauber; korrigiert sind die aus dem Editor gespeisten
   Innenseiten und die Größe kleiner Tippziele.
   ============================================================ */

/* Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen. Ohne
   min-width: 0 drückt eine breite Tabelle oder eine lange URL den
   ganzen Textkörper auseinander — das war die Ursache des Querlaufs
   auf Innenseiten unterhalb 480 px. */
.entry-content > * { min-width: 0; }

/* Lange Adressen ohne Trennmöglichkeit umbrechen. */
.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content td,
.entry-content th,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 { overflow-wrap: anywhere; }

/* Tabellen bekommen den Querlauf in ihren eigenen Rahmen. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table { overflow-x: auto; max-width: 100%; }
.entry-content table { min-width: 34rem; }
@media (min-width: 40rem) { .entry-content table { min-width: 0; } }

/* --- Tippziele auf mindestens 24 px Höhe ---------------------- */
/* WCAG 2.2 verlangt 24 × 24 px. Die folgenden Ziele lagen bei
   17 bis 22 px; alle liegen außerhalb von Fließtext, die Ausnahme
   für Links mitten im Satz greift also nicht. */
.utility a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.foot-grid ul { gap: .3rem; }
.foot-grid a { display: inline-block; padding-block: .25rem; }
.card-note a,
.mehr,
.breadcrumb a,
.rating a { display: inline-block; padding-block: .25rem; }
.consent input[type="checkbox"] { width: 24px; height: 24px; margin-top: .1rem; }

/* Sprungmarke aus dem Sichtfeld nehmen, ohne die Dokumentbreite
   zu verändern. */
.skip { left: auto; right: 100%; }
.skip:focus { left: 0; right: auto; }

/* --- Lange deutsche Komposita ------------------------------------ */
/* „Unternehmensbeteiligungen", „Vermögensauseinandersetzung",
   „Scheidungsfolgenvereinbarungen": Wörter dieser Länge sprengen auf
   schmalen Schirmen jede Überschrift. Der Entwurf löste das punktuell
   mit einem weichen Trennzeichen (­) — darauf kann man sich bei
   Inhalten aus dem Editor nicht verlassen.

   hyphens: auto trennt nach den deutschen Mustern des Browsers und
   setzt dabei einen echten Trennstrich; das greift, weil <html> über
   language_attributes() ein lang-Attribut bekommt. overflow-wrap ist
   nur das Sicherheitsnetz, falls auch das nicht reicht. */
h1, h2, h3,
.topics .t-name,
.spotlight-list .s-name,
.page-head h1,
.post-list h2 {
  overflow-wrap: break-word;
}

/* overflow-wrap: break-word erlaubt den Umbruch bei der Darstellung,
   aendert aber die min-content-Breite nicht. Eine Rasterspalte mit 1fr
   und ein Flex-Kind nehmen als automatisches Mindestmass genau diese
   Breite — „Vermoegensauseinandersetzung" schob die Kacheln damit bei
   320 px um 64 px aus der Seite. min-width: 0 hebt das Mindestmass auf,
   den Umbruch besorgt dann die Regel oben. */
.topics .t-name,
.topics .t-desc,
.spotlight-list .s-name,
.spotlight-list .s-desc { min-width: 0; }

/* Dieselbe Ursache an zwei weiteren Stellen: der Aufmachertext als
   Rasterkind und die Formularfelder als Rasterkinder von .wpcf7 p.
   Ein Eingabefeld bringt ueber sein size-Attribut eine eigene
   Mindestbreite mit, die bei grosser Schrift ueberlaeuft. */
/* Raster- und Flexkinder nehmen als automatisches Mindestmass ihre
   min-content-Breite. Bei stark vergroessertem Text uebersteigt die das
   Sichtfeld und schiebt die ganze Seite auseinander. Die Kinder der
   Seitenbereiche duerfen deshalb schrumpfen — den Umbruch besorgen die
   Regeln weiter oben. Fuer Nicht-Flexkinder ist die Angabe wirkungslos,
   dort ist 0 ohnehin der Ausgangswert. */
.wrap > *,
.page-grid > *,
.hero .wrap > *,
.spotlight .wrap > *,
.section-head > *,
.spotlight-head > *,
.contact > *,
.contact-details > *,
.foot-grid > *,
.foot-grid > * > *,
.cards > *,
.steps > *,
.topics > *,
.spotlight-list > *,
.post-list > *,
.profile > *,
.prose > *,
.steps li > *,
.cards .card > *,
.faq > *,
.faq details > *,
.faq summary { min-width: 0; }

.hero-copy,
.wpcf7 p,
.wpcf7 .wpcf7-form-control-wrap,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea { min-width: 0; }

/* Sehr schmal und zugleich stark vergroesserter Text: hier zaehlt, dass
   nichts aus der Seite laeuft, nicht die schoene Silbentrennung.
   overflow-wrap: anywhere senkt — anders als break-word — auch die
   min-content-Breite und loest damit die Mindestmasse von Schaltflaechen,
   Kennzahlen und Menuebeschriftungen auf. */
@media (max-width: 30rem) {
  .btn,
  .foot-grid a,
  .topics .t-name,
  .spotlight-list .s-name,
  .faq summary { overflow-wrap: anywhere; }
  .btn { padding-inline: 1rem; }
}

@media (max-width: 30rem) {
  h1, h2, h3,
  .topics .t-name,
  .spotlight-list .s-name,
  .post-list h2,
  .entry-content p,
  .entry-content li {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* --- Contact Form 7 ------------------------------------------------ */
/* Falls statt des mitgelieferten Formulars CF7 eingesetzt wird: dessen
   Markup bringt eigene Klassen mit und würde sonst ungestaltet stehen.
   Hier bekommt es dieselbe Anmutung wie das Formular des Themes. */
.contact .wpcf7 {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.wpcf7 form { display: grid; gap: 1rem; }
.wpcf7 p { margin: 0; display: grid; gap: .4rem; }
.wpcf7 label {
  display: grid; gap: .4rem;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-soft);
}
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  font: inherit; font-size: 1rem; width: 100%; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: .75rem .85rem; min-height: 48px;
}
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--primary); }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
/* Die Regel für .wpcf7 label oben stapelt die Kinder als Raster —
   Kästchen und Text eines Ankreuzfelds gehören aber nebeneinander. */
.wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: .6rem; }
.wpcf7 .wpcf7-list-item input { flex: none; margin: 0; }
.wpcf7 .wpcf7-list-item-label { min-width: 0; font-size: .85rem; color: var(--muted); line-height: 1.55; }

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.5rem; width: auto;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 1rem;
  background: var(--primary); color: var(--on-primary);
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover { background: var(--primary-hover); }

.wpcf7 .wpcf7-not-valid { border-color: var(--fehler); }
.wpcf7 .wpcf7-not-valid-tip { font-size: var(--step--1); color: var(--fehler); }
.wpcf7 .wpcf7-response-output {
  margin: 0; padding: .9rem 1.1rem; border: 0;
  border-left: 3px solid var(--primary); background: var(--surface-sunk);
  font-size: .95rem; color: var(--ink-soft);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--fehler); }
.wpcf7-spinner { margin: 0 0 0 .6rem; }