/* AllcuraMed — Sektionen: Hero, Cards, Jobboard, Standorte, CTA */

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 6.5rem); }
.hero .grid-2 { align-items: center; }
.hero h1 span { color: var(--green-dark); }
.hero .lede { margin-block: 1.25rem 2rem; }
.hero-arc {
  position: absolute; right: -12%; top: 50%; transform: translateY(-50%);
  width: min(52vw, 660px); aspect-ratio: 1; opacity: 0.1; pointer-events: none;
  background: url('../img/arc.svg') no-repeat center / contain;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Jobsuche-Panel */
.job-search {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid; gap: 1rem; max-width: 520px;
}
.job-search h2 { font-size: 1.35rem; }
.job-search .row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .job-search .row { grid-template-columns: 1fr 1fr; } }
.job-search .btn { width: 100%; }

/* Zahlenleiste */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center; }
.stats .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); color: var(--green-dark); line-height: 1; }
.stats .cap { font-size: var(--fs-sm); color: var(--gray); margin-top: 0.4rem; }
.section-dark .stats .num { color: var(--green); }
.section-dark .stats .cap { color: #b9cbc9; }

/* Cards */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem);
  display: grid; gap: 0.75rem; align-content: start;
  transition: border-color var(--speed), transform var(--speed), box-shadow var(--speed);
}
.card:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); }
.card .icon {
  width: 3rem; height: 3rem; border-radius: 999px;
  background: var(--green-tint); color: var(--green-deep);
  display: grid; place-items: center;
}
.card .icon svg { width: 1.5rem; height: 1.5rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card.linked { position: relative; }
.card .more { font-weight: 600; color: var(--green-dark); font-size: var(--fs-sm); }

/* Berufsgruppen-Grid */
.jobs-teaser .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Vorteile / Checkliste */
.checklist { display: grid; gap: 0.8rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; }
.checklist .tick {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem;
  border-radius: 999px; background: var(--green-tint); color: var(--green-deep);
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 700;
}
.section-dark .checklist .tick { background: rgba(113, 191, 68, 0.2); color: var(--green); }

/* Zielgruppen-Split */
.audience-split { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.audience-card {
  border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid; gap: 1rem; align-content: start;
}
.audience-card.bewerber { background: var(--green-tint); }
.audience-card.unternehmen { background: var(--petrol-tint); }
.audience-card .btn { justify-self: start; }

/* Jobboard */
.job-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1.5rem; }
.chip {
  padding: 0.5rem 1.1rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink);
  transition: all var(--speed);
}
.chip[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--white); }
.chip:hover { border-color: var(--green-dark); }
.job-count { color: var(--gray); font-size: var(--fs-sm); margin-block: 1rem; }
.job-list { display: grid; gap: 1rem; }
.job-card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem clamp(1.15rem, 2.5vw, 1.55rem);
  display: grid; gap: 0.45rem;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.job-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
.job-card h3 { font-size: 1.1rem; margin-block: 0.15rem 0.05rem; line-height: 1.25; }
.job-card h3 a { color: var(--petrol); text-decoration: none; }
.job-card h3 a::after { content: ''; position: absolute; inset: 0; }
.job-card .jc-demo {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green-deep);
  background: var(--green-tint); padding: 0.15rem 0.55rem;
  border-radius: 999px; align-self: flex-start;
}
.job-card .jc-place { font-size: 0.95rem; color: var(--gray); margin: 0; }
.job-card .jc-facts {
  list-style: none; padding: 0; margin: 0.15rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem;
}
.job-card .jc-facts li {
  font-size: var(--fs-sm); color: var(--gray);
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line);
}
.job-card .jc-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.35rem; padding-top: 0.55rem;
  border-top: 1px dashed var(--line);
}
.job-card .sal-txt { font-size: var(--fs-sm); color: var(--green-deep); font-weight: 700; }
.job-card .arrow { color: var(--green-dark); flex-shrink: 0; }
@media (max-width: 560px) {
  .job-card { padding: 1rem 1.15rem; }
  .job-card h3 { font-size: 1.02rem; }
  .job-card .jc-facts li { font-size: 0.8rem; padding: 0.1rem 0.5rem; }
}

/* Job-Detail */
.job-hero { background: var(--green-tint); padding-block: clamp(2rem, 5vw, 3.5rem); }
.breadcrumb { font-size: var(--fs-sm); color: var(--gray); margin-bottom: 1rem; }
.breadcrumb a { color: var(--gray); }
.job-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .job-layout { grid-template-columns: 1.7fr 1fr; } }
.apply-box {
  position: sticky; top: 96px;
  background: var(--white); border: 1.5px solid var(--green);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem);
  display: grid; gap: 1rem;
}
.job-body h2 { font-size: 1.35rem; margin-block: 1.75rem 0.75rem; }
.job-body ul { padding-left: 1.25rem; display: grid; gap: 0.4rem; }

/* Job-Detail V2 — strukturierte Sektionen */
.job-hero .demo-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green-deep);
  background: var(--green-tint); padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.job-section-title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -0.015em; margin-block: 1.6rem 0.55rem; color: var(--petrol); }
.job-section-lead { font-size: 0.98rem; color: var(--gray); margin-bottom: 0.9rem; }
.job-facts {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  margin-block: 1.2rem 0.8rem;
}
.job-facts-list { display: grid; gap: 0.7rem 1.6rem; grid-template-columns: 1fr; margin-top: 0.4rem; }
@media (min-width: 560px) { .job-facts-list { grid-template-columns: 1fr 1fr; } }
.job-facts-list div { display: grid; gap: 0.1rem; }
.job-facts-list dt { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-dark); font-weight: 500; }
.job-facts-list dd { font-size: 1rem; color: var(--petrol); font-weight: 500; margin: 0; }
.job-salary-note { font-size: var(--fs-sm); color: var(--gray); margin-top: 0.75rem; font-style: italic; }
.job-check-list { padding-left: 0; display: grid; gap: 0.55rem; list-style: none; }
.job-check-list li { position: relative; padding-left: 1.7rem; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.job-check-list li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.4rem;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  border: 2.2px solid var(--green-dark); border-right-color: transparent;
  transform: rotate(45deg);
}
.job-allowances { font-size: var(--fs-sm); color: var(--gray); margin-top: 0.9rem; padding: 0.7rem 0.9rem; background: rgba(113, 191, 68, 0.06); border-radius: var(--radius-sm); }
.job-allowances strong { color: var(--green-deep); }
.job-process { display: grid; gap: 0.7rem; list-style: none; padding: 0; }
.job-process li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.job-process li:last-child { border-bottom: 1px solid var(--line); }
.job-process .pn { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--green-dark); font-size: 1.15rem; min-width: 1.6rem; }
.similar-jobs { display: grid; gap: 0.6rem; }
.similar-job {
  display: grid; gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--petrol);
  transition: border-color var(--speed), transform var(--speed) var(--ease);
}
.similar-job:hover { border-color: var(--green-dark); transform: translateX(0.3rem); }
.sj-title { font-weight: 700; }
.sj-meta { font-size: var(--fs-sm); color: var(--gray); }
.sj-salary { font-size: var(--fs-sm); color: var(--green-deep); font-weight: 600; }

/* Standorte */
.locations { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.loc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem; font-size: var(--fs-sm);
  /* Bei 200% Textzoom war der Inhalt 364px breit in einer 308px-Zelle
     (gemessen 04.08.2026, /standorte/, 15px Overflow-X am Dokument).
     anywhere statt break-word, weil nur anywhere die min-content-Breite
     senkt und die Grid-Zelle mitschrumpfen laesst. */
  overflow-wrap: anywhere;
  min-inline-size: 0;
}
.loc strong { font-size: 1rem; display: block; margin-bottom: 0.2rem; }
.loc.intl { background: var(--petrol-tint); }

/* CTA-Banner */
.cta-banner { text-align: center; }
.cta-banner .btn { margin-top: 1.5rem; }

/* Prozess-Schritte (mit Bogen-Nummern) */
.steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: step; }
.step { display: grid; gap: 0.6rem; align-content: start; counter-increment: step; }
.step::before {
  content: counter(step);
  width: 3.2rem; height: 3.2rem; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--green-deep);
  background: url('../img/arc.svg') no-repeat center / contain;
}

/* FAQ */
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 0.75rem;
}
.faq summary {
  padding: 1.1rem 1.25rem; font-weight: 600; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--green-dark); transition: transform var(--speed); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.25rem 1.25rem; color: var(--gray); }

/* Formular-Karte */
.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 720px;
}
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-top: 1rem; }
.form-status.ok { background: var(--green-tint); color: var(--green-deep); }
.form-status.err { background: #fdecea; color: var(--error); }

/* Rechtsseiten / Fließtext */
.prose { max-width: 760px; }
.prose h1 { margin-bottom: 1.5rem; }
.prose h2 { font-size: 1.35rem; margin-block: 2rem 0.6rem; }
.prose h3 { font-size: 1.1rem; margin-block: 1.25rem 0.4rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose address { font-style: normal; margin-bottom: 0.9rem; }

/* Die mobile Sticky-CTA stand hier ein zweites Mal — mit 899px statt
   767px als Grenze und einem `body.has-sticky { padding-bottom: 5.5rem }`.
   Zwei Definitionen derselben Klasse in zwei Dateien; welche galt, hing
   an der Ladereihenfolge.

   Die gueltige steht in css/job-detail-v2.css, zusammen mit der
   Zustandslogik. Das Polster erzeugte nach dem Fix nur noch einen
   leeren Streifen unter der Fusszeile: die Leiste ist ab dem Formular
   dauerhaft aus und liegt dort nie mehr. */
.apply-box { position: static; }

/* Beispieldaten-Hinweis — wahrnehmbar, aber nicht als Alert */
.demo-banner {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  background: rgba(113, 191, 68, 0.09);
  border: 1px solid rgba(113, 191, 68, 0.32);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.94rem; color: var(--petrol);
}
.demo-banner span[aria-hidden] {
  font-size: 1.4rem; line-height: 1; color: var(--green-dark);
  transform: translateY(0.05rem);
}
.demo-banner p { margin: 0; max-width: none; }
.demo-banner strong { color: var(--green-deep); }

/* -------- Formseiten (Personalanfrage, Kontakt) V2 -------- */
.form-page-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 900px) { .form-page-grid { grid-template-columns: 0.85fr 1.15fr; } }
.form-side { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); align-content: start; }
.form-side h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

.proc-list { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
.proc-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1rem;
  align-items: baseline;
  padding: 0.75rem 0; border-top: 1px solid var(--line);
  font-size: 0.98rem;
}
.proc-list li:last-child { border-bottom: 1px solid var(--line); }
.proc-list .pn {
  font-family: var(--font-editorial); font-style: italic; font-weight: 500;
  font-size: 1.05rem; color: var(--green-dark);
  min-width: 1.6rem;
}
.proc-list strong { font-weight: 700; color: var(--petrol); }

.form-side-contact {
  padding: 1.15rem 1.3rem;
  background: var(--green-tint);
  border-radius: var(--radius-sm);
}
.form-side-contact .ss-kicker {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green-dark); margin-bottom: 0.35rem;
}
.form-side-contact .ss-tel {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; color: var(--petrol); text-decoration: none;
  letter-spacing: -0.01em;
}
.form-side-contact .ss-tel:hover { color: var(--green-deep); }
.form-side-contact .ss-sub { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--gray); }

.direct-paths { display: grid; gap: 1rem; }
.direct-card {
  padding: 1.1rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.direct-card .direct-kicker {
  font-size: var(--fs-label); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--green-dark);
  margin-bottom: 0.5rem;
}
.direct-card p { font-size: 0.96rem; color: var(--gray); margin-bottom: 0.7rem; }
.direct-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.direct-links a { text-decoration: none; color: var(--green-deep); font-weight: 500; font-size: 0.94rem; }
.direct-links a:hover { text-decoration: underline; }

/* Prefill-Hinweis für Personalanfrage aus dem Orbit */
.prefill-hint {
  padding: 0.85rem 1.1rem;
  background: var(--green-tint);
  border: 1px solid rgba(113, 191, 68, 0.35);
  border-radius: var(--radius-sm);
  margin-block: 0.5rem 1.15rem;
  font-size: 0.94rem;
}
.prefill-hint p { margin: 0; max-width: none; }
.prefill-hint strong { color: var(--green-deep); }
.prefill-hint [data-prefill-summary] { color: var(--petrol); }

/* Preview-Warnhinweis vor Formularen — nur im Preview-Build sichtbar
   (durch build.py PREVIEW_ONLY/PROD_ONLY-Blöcke oder statisch im
   Bewerbungsformular). Klare, unaufgeregte Optik, kein Alert-Rot,
   kein Side-Tab (Impeccable side-tab-Hook — 4px-Left-Border ist der
   typische AI-UI-Tell, hier bewusst rundum-Rahmen). */
.preview-warn {
  display: block;
  padding: 0.85rem 1.1rem;
  background: rgba(226, 182, 56, 0.10);
  border: 1px solid rgba(201, 143, 29, 0.55);
  border-radius: var(--radius-sm);
  margin-bottom: 1.15rem;
  font-size: 0.94rem; color: var(--ink);
}
.preview-warn p { margin: 0; max-width: none; }
.preview-warn strong { color: #7a5a12; }

/* ==========================================================================
 * KI-Bildnachweis — redaktionell, nicht als Warnhinweis
 *
 * Die Kennzeichnung erfolgt freiwillig. Art. 50 Abs. 4 verlangt sie fuer
 * personenfreie, erkennbar fiktive Motive nicht zwingend; die Einordnung
 * haengt von Darstellung und Nutzungskontext ab (siehe
 * docs/ai-visual-compliance-2026.md). Wir kennzeichnen trotzdem — das ist
 * die konservative Hausregel.
 *
 * Deshalb sieht sie aus wie ein Bildnachweis in einer Zeitschrift und nicht
 * wie ein Compliance-Banner: keine Pille, kein Rahmen, kein Icon, keine
 * Signalfarbe. Sie steht unter dem Bild, klein, in der Meta-Typografie der
 * Seite — sichtbar, aber ohne das Bild zu ueberschreien.
 * ========================================================================== */
.ai-editorial-figure {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.ai-editorial-figure picture,
.ai-editorial-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.ai-editorial-credit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(24, 60, 63, 0.5);
  line-height: 1.4;
  /* Ein feiner Strich statt eines Kastens: dieselbe Geste wie bei einem
     Bildnachweis, nicht wie bei einem Hinweisfeld. */
  padding-inline-start: 1.6rem;
  position: relative;
}
.ai-editorial-credit::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 1rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.ai-editorial-credit a {
  color: inherit;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(24, 60, 63, 0.3);
}
.ai-editorial-credit a:hover,
.ai-editorial-credit a:focus-visible { color: var(--green-deep); }

/* Auf dunklem Grund dreht sich der Kontrast, die Geste bleibt. */
.section-dark .ai-editorial-credit { color: rgba(223, 233, 231, 0.55); }
.section-dark .ai-editorial-credit a { text-decoration-color: rgba(223, 233, 231, 0.35); }
.section-dark .ai-editorial-credit a:hover,
.section-dark .ai-editorial-credit a:focus-visible { color: var(--green); }

/* Forced Colors: der Strich wuerde verschwinden, der Text muss bleiben. */
@media (forced-colors: active) {
  .ai-editorial-credit { color: CanvasText; }
  .ai-editorial-credit::before { background: CanvasText; opacity: 1; }
}

/* Textzoom 200 %: der Strich haengt an der Zeilenmitte, nicht an einer
   festen Pixelhoehe — deshalb em statt px fuer top. Bei sehr schmalen
   Viewports faellt der Einzug weg, damit die Zeile nicht bricht. */
@media (max-width: 420px) {
  .ai-editorial-credit { padding-inline-start: 0; }
  .ai-editorial-credit::before { display: none; }
}

/* ==========================================================================
 * Downloads — eine Seite, die sagt was sie ist
 *
 * Vorher: drei Kaesten mit deaktivierten Buttons und "PDF folgt in Kürze".
 * Ein Button, der aussieht wie einer und keiner ist, ist ein gebrochenes
 * Versprechen im Interface. Jetzt fuehrt die Seite auf den Weg, der
 * funktioniert, und die Dokumente stehen als Zeilen mit Status.
 * ========================================================================== */
.dl-v2 .dl-kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.55); margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(0.8rem, 2vw, 1.2rem);
}
.dl-v2 .dl-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  line-height: 1.0; letter-spacing: -0.03em; color: var(--petrol);
  max-width: 16ch; text-wrap: balance; margin: 0;
}
.dl-v2 .dl-title em {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  color: var(--green-dark);
}
.dl-v2 .dl-lede {
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0; max-width: 46ch;
  font-size: var(--fs-lede); line-height: 1.55; color: var(--gray);
}
.dl-v2 .dl-actions {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem;
}
.dl-v2 .dl-tel { color: var(--green-deep); font-size: var(--fs-body); }

/* Zeilen statt Kaesten: Name, Beschreibung, Status. Der Status ist eine
   Angabe, kein Button — es gibt nichts zu klicken, also sieht auch
   nichts nach Klick aus. */
.dl-list {
  list-style: none; margin: clamp(3rem, 7vw, 5rem) 0 0; padding: 0;
  border-top: 1px solid rgba(24, 60, 63, 0.16);
}
.dl-list li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.4rem 2rem;
  padding: clamp(1.2rem, 2.5vw, 1.7rem) 0;
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
}
.dl-name {
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 600; letter-spacing: -0.015em; color: var(--petrol);
  hyphens: none;   /* sonst 'Unternehmensbroschü-re' */
}
.dl-desc { font-size: var(--fs-body); line-height: 1.55; color: var(--gray); }
.dl-state {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.45); white-space: nowrap;
}
@media (max-width: 760px) {
  .dl-list li { grid-template-columns: 1fr; gap: 0.3rem; }
  .dl-state { order: -1; }
}

/* ==========================================================================
 * Kontakt — zwei Wege, keine Kästen
 *
 * Vorher: ~200px leere Fläche zwischen Hero und Inhalt, darunter sechs
 * Kästen auf einer Seite mit 192 Wörtern. Jetzt stehen die zwei Wege
 * sofort als Zeilen, die Kontaktdaten laufen als Definitionsliste
 * darunter. Kein Kasten, weil nichts abzugrenzen ist.
 * ========================================================================== */
.kt-v2 .kt-kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.55); margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(0.8rem, 2vw, 1.2rem);
}
.kt-v2 .kt-title {
  font-family: var(--font-display); font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.03em; color: var(--petrol);
  max-width: 16ch; text-wrap: balance; margin: 0;
}
.kt-v2 .kt-title em {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  color: var(--green-dark);
}

/* Die zwei Wege als Zeilen — dieselbe Geste wie im Auftakt der
   Startseite, damit die Marke wiedererkennbar bleibt. */
.kt-ways {
  margin-top: clamp(2rem, 5vw, 3.2rem);
  border-top: 1px solid rgba(24, 60, 63, 0.16);
}
.kt-way {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.3rem 1.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
  text-decoration: none; color: inherit;
  transition: color 0.35s var(--ease);
}
.kt-way:hover, .kt-way:focus-visible { color: var(--green-deep); }
.kt-way-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.5);
}
.kt-way-title {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15; letter-spacing: -0.02em;
  transition: transform 0.35s var(--ease);
}
.kt-way-title em {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  color: var(--green-dark);
}
.kt-way:hover .kt-way-title, .kt-way:focus-visible .kt-way-title { transform: translateX(0.6rem); }
.kt-way-meta {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.5); white-space: nowrap;
}

.kt-direct { margin-top: clamp(2.4rem, 6vw, 4rem); }
.kt-direct-lede {
  font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--petrol); margin: 0 0 1.4rem;
}
.kt-lines { margin: 0; display: grid; gap: 0.9rem; }
.kt-lines > div {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.2rem 1.5rem; align-items: baseline;
}
.kt-lines dt {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(24, 60, 63, 0.5);
}
.kt-lines dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
.kt-hours { color: var(--gray); font-size: var(--fs-sm); }
.kt-form-section .wrap {
  padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

@media (max-width: 700px) {
  .kt-way { grid-template-columns: 1fr; }
  .kt-way-meta { white-space: normal; }
  .kt-lines > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Das Formular stand im alten Zwei-Spalten-Grid und blieb nach dem
   Wegfall der linken Spalte schmal und zentriert, mit ~250px Loch davor.
   Es ist jetzt der einzige Inhalt seiner Sektion — also nimmt es die
   Lesebreite und beginnt direkt. */
.kt-form-section .form-card {
  max-width: 44rem;
  margin: 0;
  background: transparent;
  border: 1px solid rgba(24, 60, 63, 0.16);
  border-radius: var(--radius);
}
.kt-form-section { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }

/* ==========================================================================
 * Für Bewerber — Zusagen statt Datenblatt, Weg statt Nummernliste
 * ========================================================================== */
.bw-promises {
  list-style: none; margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0; padding: 0;
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem) clamp(2rem, 5vw, 4rem);
}
@media (min-width: 720px) { .bw-promises { grid-template-columns: 1fr 1fr; } }
.bw-promises li {
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.55; color: var(--gray);
  padding-left: 1.4rem; position: relative;
}
.bw-promises li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 0.7rem; height: 1px; background: var(--green-dark); opacity: 0.7;
}
.bw-promises em {
  display: block; font-family: var(--font-display); font-style: normal;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 600;
  letter-spacing: -0.015em; color: var(--petrol); margin-bottom: 0.2rem;
}

/* Der Weg: vier Schritte ohne Ziffern. Jeder Schritt rückt eine Stufe
   weiter — die Bewegung ersetzt die Nummerierung. */
.bw-steps {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem);
  counter-reset: none;
}
.bw-steps li {
  max-width: 46rem;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid rgba(24, 60, 63, 0.16);
}
.bw-steps li:nth-child(2) { margin-inline-start: clamp(1rem, 5vw, 4rem); }
.bw-steps li:nth-child(3) { margin-inline-start: clamp(2rem, 10vw, 8rem); }
.bw-steps li:nth-child(4) { margin-inline-start: clamp(3rem, 15vw, 12rem); }
.bw-steps h3 {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--petrol); margin: 0 0 0.5rem;
}
.bw-steps p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--gray); max-width: 46ch; }

@media (max-width: 760px) {
  .bw-steps li:nth-child(2), .bw-steps li:nth-child(3), .bw-steps li:nth-child(4) { margin-inline-start: 0; }
}

/* FAQ: Zeilen statt Kästen. Ein Akkordeon braucht keine Karte drumherum —
   die Trennlinie reicht, und sechs weiße Kästen waren eine Card-Wand. */
.faq details {
  background: transparent; border: none;
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
  border-radius: 0; box-shadow: none;
}
.faq details:first-child { border-top: 1px solid rgba(24, 60, 63, 0.16); }
.faq summary { padding-inline: 0; }
.faq details > div, .faq details > p { padding-inline: 0; }

/* ==========================================================================
 * Für Unternehmen — Definitionsliste und Ablauf an einer Linie
 *
 * Bewusst andere Geometrie als die Bewerberseite: dort Zusagen
 * zweispaltig und ein Weg als Treppe. Hier Name-zu-Erklärung und ein
 * Ablauf an einer durchgehenden Linie. Zwei Zielgruppenseiten dürfen
 * nicht dieselbe Form mit anderer Copy sein.
 * ========================================================================== */
.un-services { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; gap: 0; }
.un-services > div {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 0.4rem 2.5rem; align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid rgba(24, 60, 63, 0.16);
}
.un-services > div:last-child { border-bottom: 1px solid rgba(24, 60, 63, 0.16); }
.un-services dt {
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
  color: var(--petrol); hyphens: none;
}
.un-services dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--gray); }

/* Der Ablauf haengt an einer Linie: eine Station nach der anderen,
   kein Treppenversatz. */
.un-flow {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0 0 0 clamp(1.6rem, 3.5vw, 2.6rem);
  position: relative; display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem);
  max-width: 46rem;
}
.un-flow::before {
  content: ''; position: absolute; left: 0; top: 0.55em; bottom: 0.9em;
  width: 1px; background: rgba(24, 60, 63, 0.22);
}
.un-flow li { position: relative; }
.un-flow li::before {
  content: ''; position: absolute;
  left: calc(-1 * clamp(1.6rem, 3.5vw, 2.6rem)); top: 0.5em;
  translate: -50% 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-dark);
}
.un-flow h3 {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.2; letter-spacing: -0.02em; color: var(--petrol); margin: 0 0 0.4rem;
}
.un-flow p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--gray); }

@media (max-width: 760px) {
  .un-services > div { grid-template-columns: 1fr; gap: 0.3rem; }
}

.un-facts { display: grid; gap: 0.75rem; margin: 0; }
.un-facts span {
  display: block; font-size: var(--fs-body); line-height: 1.5; color: var(--gray);
  padding-bottom: 0.75rem; border-bottom: 1px solid rgba(24, 60, 63, 0.12);
}
.un-facts span:last-child { border-bottom: none; padding-bottom: 0; }
.un-facts b { font-weight: 500; color: var(--petrol); }

/* ==========================================================================
 * Personalanfrage — Bedarf vor dem ersten Feld
 *
 * Vorher: Formular rechts, links eine Seitenleiste mit dem Ablauf als
 * nummerierte Liste 01 bis 04. Dekorative Prozessnummern zum vierten Mal
 * auf dieser Website, und eine Seitenleiste, die nur Fläche füllte.
 *
 * Jetzt steht im Kopf, was gefragt wird und was danach passiert. Das
 * Formular ist die Konsequenz, nicht das Hauptbild.
 * ========================================================================== */
.pa-need {
  margin: clamp(2rem, 4.5vw, 3.2rem) 0 0;
  display: grid; gap: 0;
  max-width: 52rem;
  border-top: 1px solid rgba(24, 60, 63, 0.16);
}
.pa-need > div {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.2rem 2rem; align-items: baseline;
  padding-block: clamp(0.8rem, 1.8vw, 1.1rem);
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
}
.pa-need dt {
  font-family: var(--font-display); font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 600; letter-spacing: -0.015em; color: var(--petrol);
}
.pa-need dd { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--gray); }
.pa-after {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0; max-width: 52ch;
  font-size: var(--fs-body); line-height: 1.6; color: var(--gray);
}
/* Linksbuendig wie der Kopf: zentriert brach die Achse mitten auf der
   Seite. Und der Abstand zum Kopf war ein voller Sektionsabstand — der
   Bedarf und das Formular gehoeren zusammen. */
.pa-form-wrap { max-width: 52rem; margin-inline: 0; }
.pa-form-wrap .form-card {
  background: transparent; border: 1px solid rgba(24, 60, 63, 0.16);
  border-radius: var(--radius); margin: 0;
}
.pa-direct {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: var(--fs-body); line-height: 1.6; color: var(--gray);
}
.pa-direct a { color: var(--green-deep); }

@media (max-width: 700px) {
  .pa-need > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ==========================================================================
 * Initiativbewerbung — Haltung als Textfolge
 *
 * Bewusst andere Form als die Personalanfrage: dort eine
 * Definitionsliste mit vier Angaben, hier drei kurze Absätze mit
 * hervorgehobenem ersten Satz. Zwei Formularseiten dürfen nicht
 * dieselbe Geometrie mit anderer Copy sein.
 * ========================================================================== */
.ib-expect {
  margin: clamp(2rem, 4.5vw, 3.2rem) 0 0;
  max-width: 46rem;
  display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
.ib-expect p {
  margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--gray);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid rgba(24, 60, 63, 0.18);
}
.ib-expect em {
  display: block; font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600;
  letter-spacing: -0.015em; color: var(--petrol); margin-bottom: 0.3rem;
}
.ib-form-wrap { max-width: 46rem; margin-inline: 0; }
.ib-form-wrap .form-card {
  background: transparent; border: 1px solid rgba(24, 60, 63, 0.16);
  border-radius: var(--radius); margin: 0;
}

/* Auf allen Formularseiten steht der erklaerende Kopf in einer .chapter
   und das Formular in der Sektion darunter. Beide bringen einen vollen
   Sektionsabstand mit — gemessen ~250px auf der Personalanfrage und
   ~120px auf der Initiativbewerbung. Erklaerung und Formular gehoeren
   zusammen, also ruecken sie zusammen. Zentral statt pro Seite. */
.chapter--form-page { padding-bottom: clamp(1rem, 2.5vw, 2rem); }
.pa-form-section,
.ib-form-section,
.kt-form-section { padding-top: clamp(1.2rem, 3vw, 2.2rem); }

/* ==========================================================================
 * Über uns — Haltung trägt, nicht ein Datenblatt
 * ========================================================================== */
.uu-values {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid rgba(24, 60, 63, 0.16);
  max-width: 56rem;
}
.uu-values li {
  display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 0.3rem 2.5rem; align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
}
.uu-values b {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--petrol); hyphens: none;
}
.uu-values span {
  font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.5; color: var(--gray);
}

/* Die frühere uu-group (Einordnung als Satz + kleines QUIP-Logo) ist der
   Über-uns-Strecke (uu-story, css/seiten.css) gewichen. */

@media (max-width: 760px) {
  .uu-values li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ==========================================================================
 * Standorte — Zeilen in Nord-Süd-Ordnung statt Kartenraster
 *
 * Acht gleiche Ortskarten sagten nichts über Nähe, nur "wir haben viele".
 * Die Reihenfolge nach Breitengrad ist die einzige geografische Aussage,
 * die ohne Maßstab belegbar ist — dieselbe Ordnung wie im
 * Standorte-Kapitel der Startseite.
 * ========================================================================== */
.lo-list {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  border-top: 1px solid rgba(24, 60, 63, 0.16);
  max-width: 62rem;
}
.lo-list li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 20rem);
  gap: 0.3rem 2.5rem; align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
}
.lo-city {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--petrol); hyphens: none;
}
.lo-role {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.5);
}
.lo-addr { font-size: var(--fs-body); line-height: 1.5; color: var(--gray); }
.lo-reach { font-size: var(--fs-sm); line-height: 1.6; color: var(--gray); }
.lo-reach a { color: var(--green-deep); }

@media (max-width: 860px) {
  .lo-list li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ==========================================================================
 * Transparenz — Fragen, die jemand wirklich stellt
 *
 * Vorher acht h2 in einer Textwand, darunter ein Abschnitt, der zwei
 * eingebundene KI-Bilder behauptete — seit dem Rückbau in PR #21 sind es
 * null. Jetzt: Frage groß, Kurzantwort in einem Satz, Erklärung ruhig
 * darunter. Keine Statuspunkte, keine Badges, keine Checkmarks.
 * ========================================================================== */
/* Die Lesebreite haengt am Text, nicht am Seitencontainer: als
   Wrap-Breite rueckte sie die ganze Seite um 200px ein und erzeugte
   eine zweite linke Kante. */
.tp-v2 .tp-a,
.tp-v2 .tp-q + * { max-width: 68ch; }
.tp-v2 h2 { max-width: 32ch; }
.tp-lead {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46ch;
  font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--petrol);
}
/* Vorher bis 4rem zwischen zwei Fragen — zusammen mit dem Innenabstand
   jeder Frage rund 100px Leere je Wechsel. */
.tp-qa { display: grid; gap: clamp(1.4rem, 2.4vw, 2rem); }
.tp-qa > section { border-top: 1px solid rgba(24, 60, 63, 0.16); padding-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.tp-qa h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.2; letter-spacing: -0.02em; color: var(--petrol);
  margin: 0 0 0.7rem; max-width: 26ch; text-wrap: balance;
}
/* Die Kurzantwort steht für sich — wer nur sie liest, hat die Antwort. */
.tp-short {
  font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.3;
  color: var(--green-deep); margin: 0 0 1rem;
}
.tp-qa p:not(.tp-short) {
  margin: 0 0 0.9rem; max-width: 62ch;
  font-size: var(--fs-body); line-height: 1.65; color: var(--gray);
}
.tp-qa p:last-child { margin-bottom: 0; }
.tp-foot {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid rgba(24, 60, 63, 0.16);
  max-width: 62ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--gray);
}

/* ==========================================================================
 * 404 — die Linie verliert die Verbindung
 *
 * Vorher stand „404" zweimal (Kicker und Kapitelnummer), ohne dass der
 * Code jemandem hilft, dazu zwei Buttons. Jetzt trägt das Markenmotiv:
 * die Versorgungslinie läuft, bricht ab und wird in drei Wege
 * zurückgeführt. Kein Fehlercode als Dekoration.
 * ========================================================================== */
.nf-v2 .wrap { max-width: 840px; }
.nf-kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.55); margin: 0 0 clamp(0.8rem, 2vw, 1.2rem);
}
.nf-title {
  font-family: var(--font-display); font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.03em; color: var(--petrol);
  max-width: 16ch; text-wrap: balance; margin: 0;
}
.nf-title em {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  color: var(--green-dark);
}
.nf-line { margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3.5vw, 2.5rem); height: clamp(28px, 5vw, 50px); }
.nf-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nf-line path {
  fill: none; stroke: var(--petrol); stroke-width: 1.5;
  stroke-linecap: round; opacity: 0.5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.nf-line .nf-b { stroke: var(--green-dark); transition-delay: 0.35s; }
.nf-v2 .nf-line path { stroke-dashoffset: 0; }
.nf-lede {
  margin: 0; max-width: 44ch; font-size: var(--fs-lede);
  line-height: 1.55; color: var(--gray);
}
.nf-ways {
  list-style: none; margin: clamp(2rem, 4.5vw, 3rem) 0 0; padding: 0;
  border-top: 1px solid rgba(24, 60, 63, 0.16); max-width: 44rem;
}
.nf-ways a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.3rem 2rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
  text-decoration: none; color: inherit;
  transition: color 0.3s var(--ease);
}
.nf-ways a:hover, .nf-ways a:focus-visible { color: var(--green-deep); }
.nf-way-title {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.2; letter-spacing: -0.02em;
  transition: transform 0.3s var(--ease);
}
.nf-ways a:hover .nf-way-title, .nf-ways a:focus-visible .nf-way-title { transform: translateX(0.5rem); }
.nf-way-meta {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.5); white-space: nowrap;
}
@media (max-width: 700px) {
  .nf-ways a { grid-template-columns: 1fr; }
  .nf-way-meta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-line path, .nf-way-title { transition: none; }
}

/* ==========================================================================
 * Rechtstexte — lesbare Dokumente statt Textblöcke
 *
 * Inhalt unverändert. Nur Lesebreite, Abschnittshierarchie und eine
 * Sprungnavigation aus den vorhandenen Überschriften.
 * ========================================================================== */
.lg-doc { max-width: 68ch; }
.lg-doc h1 {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  /* 'Datenschutzerklaerung' brach als 'Datenschutzer klaerung' — mitten
     im Wort, ohne Trennstrich. Ursache war eine geerbte break-word-Regel.
     hyphens:auto trennt sichtbar, manual-Trennstelle als Absicherung. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}
.lg-doc h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.25; letter-spacing: -0.015em; color: var(--petrol);
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0.8rem;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid rgba(24, 60, 63, 0.16);
  /* Lange Rechtsbegriffe duerfen trennen, aber sichtbar — kein
     overflow-wrap:anywhere, das mitten im Wort ohne Trennstrich bricht. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.lg-doc h2:first-of-type { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.lg-doc p, .lg-doc li { line-height: 1.7; }
.lg-doc p { margin-bottom: 0.9rem; }
.lg-doc ul, .lg-doc ol { margin: 0 0 1.2rem 1.2rem; }
.lg-doc li { margin-bottom: 0.4rem; }
/* E-Mail-Adressen und URLs brechen an sinnvollen Stellen statt zu
   ueberlaufen — gezielt am Link, nicht global. */
.lg-doc a[href^="mailto:"], .lg-doc a[href^="http"] { word-break: break-word; }
.lg-doc address { font-style: normal; line-height: 1.7; margin-bottom: 1rem; }

.lg-toc {
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-top: 1px solid rgba(24, 60, 63, 0.16);
  border-bottom: 1px solid rgba(24, 60, 63, 0.16);
}
.lg-toc-label {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(24, 60, 63, 0.5); margin: 0 0 0.7rem;
}
.lg-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
}
.lg-toc li { margin: 0; }
.lg-toc a {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--green-deep);
  text-decoration: none; border-bottom: 1px solid transparent;
  padding-block: 0.2rem;
}
.lg-toc a:hover, .lg-toc a:focus-visible { border-bottom-color: currentColor; }
/* Sprungziele nicht unter den Header schieben. */
.lg-doc h2 { scroll-margin-top: clamp(5rem, 10vw, 7rem); }

/* ─── Arbeiten in der Schweiz ───────────────────────────────────────
   Die Seite hatte sechs Vorteilskacheln und vier Schritt-Kaesten — die
   Kachelwueste aus dem Audit. Neue Geometrie: eine senkrechte Kante,
   links das Argument, rechts was dazugehoert. Die Einschraenkung ist
   damit Teil der Komposition statt Kleingedrucktes. */

.ch-lede { margin-top: 0.75rem; max-width: 60ch; }

.ch-head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); display: grid; gap: 0.9rem; }
.ch-head h2 { max-width: 20ch; }

.ch-pairs { display: grid; }
.ch-pair {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  column-gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-top: 1px solid rgba(24, 60, 63, 0.14);
}
.ch-pair:last-child { border-bottom: 1px solid rgba(24, 60, 63, 0.14); }

.ch-pair dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--petrol);
  text-wrap: balance;
}

/* Die Kante traegt die Gegenueberstellung — sie ist das Motiv der
   Seite, kein Trennstrich. Deshalb links am rechten Feld, nicht
   zwischen zwei Kaesten. */
.ch-pair dd {
  margin: 0;
  padding-left: clamp(1rem, 2.4vw, 1.8rem);
  border-left: 2px solid var(--green);
  color: var(--gray);
  font-size: clamp(0.98rem, 1.2vw, 1.05rem);
  line-height: 1.62;
  max-width: 46ch;
}
.ch-and {
  display: block;
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.4rem;
}

/* Mobil ist die Kante waagerecht nicht lesbar: das Paar wird zur
   Folge aus Aussage und Einordnung, die Kante bleibt links stehen. */
@media (max-width: 760px) {
  .ch-pair { grid-template-columns: minmax(0, 1fr); row-gap: 0.9rem; }
  .ch-pair dd { max-width: none; }
}

/* Etappen: nummerierte Folge, aber ohne Schrittzaehler als Schmuck —
   die Ordnung traegt der Einzug, nicht eine grosse Ziffer. */
/* Die Etappen nutzen die gemeinsamen .st-steps aus seiten.css. */