/* ══════════ SHARED CSS — BipolarSite ══════════ */
/* Extracted from duplicated inline styles across 12+ pages */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: calc(var(--nav-height) + 24px); }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Notrufnummern dürfen nicht umbrechen */
a[href^="tel:"] { white-space: nowrap; }

/* ── Body ── */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Global Link Styling ── */
a {
  color: var(--teal-text);
  text-decoration: none;
}
a:hover {
  color: var(--teal-text);
  text-decoration: underline;
}

/* ── Navigation (scoped to full nav, not tool-nav) ── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
#navbar.scrolled {
  box-shadow: var(--shadow-nav);
  background: var(--bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
.nav-logo {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-logo img {
  width: 100%;
  height: 100%;
  display: block;
}
.nav-brand-text {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}
.nav-brand-sub {
  font-size: var(--text-xs);
  color: var(--text-soft);
  margin-top: -2px;
}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  font-size: var(--text-xs);
  color: var(--text-soft);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.25s ease, color 0.25s ease;
  font-weight: 500;
}
.nav-links a:hover {
  background: var(--surface-alt);
  color: var(--text);
}
/* P1.1 Audit: Deutlicherer aktiver Nav-State — Pill-Hintergrund + Unterstrich */
.nav-links a[aria-current="page"] {
  color: var(--teal-text);
  background: var(--teal-subtle);
  font-weight: 700;
  position: relative;
}
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}
.nav-sos {
  background: var(--rose-soft);
  color: var(--rose-text);
  font-weight: 600;
  border: 1px solid var(--rose-border);
}
.nav-sos:hover {
  background: var(--rose-badge);
  color: var(--rose-text);
}

.nav-sos-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px;
  color: var(--text);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ── Mobile Nav ── */
@media (max-width: 900px) {
  .nav-inner {
    min-height: 72px;
    height: auto;
    padding: 12px 20px;
    position: relative;
    gap: 10px;
  }
  .nav-brand {
    min-width: 0;
    gap: 10px;
  }
  .nav-brand-sub {
    display: none;
  }
  .nav-brand-text {
    font-size: var(--text-sm);
    line-height: 1.2;
  }
  .nav-links {
    display: none;
    flex-direction: column;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--border-warm-md);
    border-radius: var(--radius-round);
    background: var(--card);
    box-shadow: var(--shadow-soft);
  }

  .nav-sos-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: auto;
    margin-right: 0;
    padding: 0 14px;
    background: var(--rose-soft);
    color: var(--rose-text);
    font-size: var(--text-sm);
    font-weight: 700;
    border: 1px solid var(--rose-border);
    border-radius: var(--radius-round);
    text-decoration: none;
    letter-spacing: 0.03em;
    box-shadow: var(--shadow-soft);
  }
  .nav-sos-mobile:hover {
    background: var(--rose-badge);
  }
  .nav-links.nav-open .nav-sos { display: none; }

  .nav-links.nav-open {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--border-warm-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    z-index: 60;
  }
  .nav-links.nav-open a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: var(--text-sm);
    line-height: 1.35;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .nav-inner {
    padding: 10px 14px;
    gap: 8px;
  }
  .nav-brand-text {
    font-size: var(--text-xs);
  }
  .nav-sos-mobile {
    padding: 0 12px;
    font-size: var(--text-xs);
  }
  .nav-links.nav-open {
    left: 14px;
    right: 14px;
  }
}

/* ── Reading Progress ── */
.reading-progress {
  position: fixed;
  top: 64px; left: 0; right: 0;
  height: 2px;
  z-index: 99;
  background: transparent;
}
.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--teal);
  transition: width 0.1s linear;
}

/* ── Footer (light, warm — L2 palette) ── */
footer {
  background: var(--surface-alt);
  color: var(--navy);
  padding: var(--space-2xl) var(--space-lg);
  margin-top: 0;
  border-top: 1px solid var(--border-warm);
  position: relative;
}
.footer-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  text-align: center;
}
.footer-inner p { font-size: var(--text-xs); line-height: 1.75; margin-bottom: var(--space-sm); }
.footer-inner a { color: var(--navy); text-decoration: none; }
.footer-inner a:hover { color:var(--teal-cta); }
.footer-links {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: var(--text-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-base) var(--space-md);
  justify-content: center;
}
.footer-links a { margin: 0; color: var(--slate); text-decoration: none; }
.footer-links a:hover { color: var(--navy); }

/* ── Global Transitions (polished interactive feel) ── */
a, button, input, select, textarea,
.module-card, .quick-card, .handout-card, .action-card {
  transition: all 0.2s ease;
}

/* ── Accessibility ── */
/* Global focus outline: --teal-solid #3a9aa3 → 3.03:1 on --bg (passes WCAG 1.4.11 3:1 for UI) */
*:focus-visible {
  outline: 2px solid var(--teal-solid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Focus outline on tinted heroes: darker teal for WCAG 1.4.11 */
.hero *:focus-visible,
.home-hero *:focus-visible,
.module-hero *:focus-visible {
  outline-color: var(--teal-cta-dark);
}
/* Focus outline on dark takeaways block: white for 4.5:1+ against dark bg */
.takeaways *:focus-visible {
  outline-color: #ffffff;
}

/* ── No-JS fallback: show nav links when hamburger can't work ── */
.no-js .nav-links {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.no-js .nav-toggle {
  display: none !important;
}

/* ── Overview Pages (shared by /werkzeuge/ and /module/) ── */
.overview-hero {
  padding: 120px 2rem var(--section-tight);
  position: relative;
  overflow: hidden;
}
.overview-hero::before,
.overview-hero::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-round);
}
.overview-hero-inner,
.overview-content {
  max-width: var(--wide-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* ── Unified Breadcrumb ── */
.breadcrumb {
  font-size: var(--text-xs);
  color: var(--text-soft);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a {
  color: var(--teal-text);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb .sep { opacity: 0.4; }
.overview-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.overview-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0 0 16px;
  max-width: var(--content-width-wide);
}
.overview-lead {
  max-width: var(--content-width-wide);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--slate);
  margin: 0;
}
.overview-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--grid-gap-standard);
  margin: 12px auto 0;
}
.overview-note {
  border: 1px solid var(--border-warm-md);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.overview-note h2 {
  margin: 0 0 var(--heading-gap-h2);
  font-size: var(--text-lg);
}
.overview-note p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--slate);
}
.overview-content {
  padding: 0 2rem var(--section-tight);
}
.overview-footer-note {
  max-width: var(--content-width-wide);
  margin-top: var(--space-xl);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-soft);
}
.overview-footer-note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .overview-intro {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .overview-hero {
    padding: 104px 1.2rem 28px;
  }
  .overview-content {
    padding: 0 1.2rem var(--section-tight);
  }
  .overview-note {
    padding: 20px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SECTION LABELS + MODULE CARD GRID
   Shared between homepage (index.njk) and /module/ overview.
   Extracted from homepage inline <style>.
   ═══════════════════════════════════════════════════════════ */

.section-title {
  font-size: var(--text-section-title);
  letter-spacing: -0.025em;
  margin-bottom: var(--heading-gap-h2);
}
.section-desc {
  font-size: var(--text-base);
  color: var(--slate);
  max-width: 60ch;
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

/* ── Module grid ── */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--grid-gap-standard);
  max-width: var(--wide-width);
}

/* ── Module cards ── */
.module-card {
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-warm);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  transition: box-shadow 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap-tight);
  min-height: 240px;
}
.module-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Accent: consistent teal left border (calmer than 5 different colors) */
.module-card { border-left: 3px solid var(--teal-light); }

.module-number {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-round);
}
.module-number { color: var(--navy); background: var(--teal-subtle); }

/* M-07: dezente Pill-Differenzierung nach data-accent-Gruppen */
.module-card[data-accent="blue"] .module-number { background: var(--blue-phase-subtle); color: var(--blue-phase); }
.module-card[data-accent="amber"] .module-number { background: var(--amber-faint); color: var(--amber-dark-text); }
.module-card[data-accent="purple"] .module-number { background: var(--purple-light); color: var(--purple-dark); }
.module-card[data-accent="green"] .module-number { background: var(--green-subtle); color: var(--phase-green); }
/* teal-accent (Modul 8) keeps the default teal-subtle pill */

.module-card h3 {
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.module-card p {
  font-size: var(--text-base);
  color: var(--text-soft);
  line-height: 1.5;
  flex: 1;
}
.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-warm);
  margin-top: auto;
}
.module-time {
  font-size: var(--text-xs);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}
.module-arrow {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: none;
  border: 1.5px solid var(--border-warm-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: var(--text-xs);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.module-card:hover .module-arrow {
  border-color: var(--teal-solid);
  color:var(--teal-cta);
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .modules-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE STYLES
   Migrated from index.njk inline <style> (P2.1)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero (typographic, no image) ── */
.home-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 2rem 64px;
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
}
.home-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    /* Audit 3: Opazität von 0.10 auf 0.15 erhöht — mehr Tiefe ohne Kontrastverlust */
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(168,213,203,0.15) 0%, transparent 70%),
    /* Audit 3: Opazität von 0.05 auf 0.12 erhöht — Rosé-Akzent sichtbarer */
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(175,115,110,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.home-hero::after {
  display: none;
}
.home-hero-content::before {
  display: none;
}
.home-hero-content {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
}
.home-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--content-width-wide);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.home-hero-text {
  max-width: var(--content-width);
  position: relative;
  z-index: 3;
}

/* ── Audit 1: Hero Split-Layout ── */
.home-hero-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  width: 100%;
}

.home-hero-visual {
  display: none; /* Mobile: ausgeblendet */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow-hover);
  flex-shrink: 0;
}

.home-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (min-width: 900px) {
  .home-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
  }

  .home-hero-visual {
    display: block;
  }

  .home-hero-text {
    max-width: 100%;
  }

  .home-hero-paths {
    grid-column: 1 / -1;
  }
}
.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: var(--text-soft);
  padding: 0;
  border-radius: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.home-hero-badge::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--teal);
  flex-shrink: 0;
}
.home-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--navy);
  max-width: var(--content-width);
  margin-bottom: var(--space-lg);
}
.home-hero h1 em {
  font-style: italic;
  color: var(--teal-cta);
}
.home-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--slate);
  max-width: 60ch;
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
}
.home-hero .home-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--cta-min-height);
  padding: 0 28px;
  border-radius: var(--cta-radius);
  background: var(--teal-cta-dark);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--card-shadow);
  transition: background 0.2s ease, transform 0.15s ease;
}
.home-hero .home-hero-link:hover {
  background: var(--cta-primary-hover);
  transform: translateY(-1px);
}

/* ── Entry Paths (inside hero, editorial inline links) ── */
.home-hero-paths {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-warm-md);
  max-width: var(--content-width);
}
.home-hero-paths-lead {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 var(--space-md);
}
.entry-paths-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.entry-path-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 14px 18px;
  border: 1px solid var(--border-warm-md);
  border-radius: var(--cta-radius);
  background: var(--card);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.entry-path-link:hover {
  background: var(--surface-alt);
  border-color: var(--teal-muted);
  color: var(--teal-cta);
  transform: translateY(-1px);
}
.entry-path-destination {
  font-weight: 700;
  color: var(--teal-cta);
  white-space: nowrap;
  flex-shrink: 0;
}
.entry-path-link:hover .entry-path-destination {
  color: var(--teal-text);
}
.entry-path-link--crisis {
  border-color: var(--alert-border, var(--border-warm-md));
}
.entry-path-link--crisis .entry-path-destination {
  color: var(--alert);
}
.entry-path-link--crisis:hover {
  background: var(--alert-soft);
  border-color: var(--alert);
  color: var(--alert);
}
.entry-path-link--crisis:hover .entry-path-destination {
  color: var(--emergency-dark);
}

/* ── Global Container System ──
   ONE rule for all homepage content sections.
   Every section shares the same max-width, padding, and horizontal axis. */
#main-content > section,
#main-content > aside {
  max-width: var(--wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
/* Full-bleed overrides — sections with background color span full width */
#main-content > .story-section,
#main-content > .invitation-section {
  max-width: none;
}

/* Vertical rhythm — visual flow through alternating treatments:
   Hero+paths (surface-alt) → Triage (subtle bg) → Modules (white) →
   Tools (subtle bg) → Story (rosé) → Invitation (surface-alt) */
/* Consistent section rhythm: --section-standard (64px) for all major sections.
   Sections separated by subtle top-borders, not by enclosing boxes.
   Editorial approach: content breathes in shared background. */
#orientierung {
  margin-top: var(--section-standard);
  padding-top: var(--section-standard);
  padding-bottom: var(--section-standard);
  border-top: 1px solid var(--border-warm);
}
#module {
  padding-top: var(--section-standard);
  padding-bottom: var(--section-standard);
  border-top: 1px solid var(--border-warm);
}
.tools-highlight {
  margin-top: var(--section-standard);
  padding-top: var(--section-standard);
  padding-bottom: var(--section-standard);
  border-top: 1px solid var(--border-warm);
}
.story-section { padding-top: var(--section-standard); padding-bottom: var(--section-standard); }
.invitation-section { padding-top: var(--section-standard); padding-bottom: var(--section-standard); }

.urgent-note-standalone {
  margin: var(--space-sm) 0 0;
}
.urgent-note {
  background: var(--alert-soft);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.urgent-note-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--alert);
}
.urgent-note p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--slate);
}
.urgent-note-link {
  display: inline;
  text-decoration: none;
  color: var(--alert);
  font-size: var(--text-xs);
  font-weight: 700;
  transition: color 0.2s ease;
}
.urgent-note-link:hover {
  text-decoration: underline;
  color: var(--emergency-dark);
}
/* ── Scroll Reveal ──
   Default: visible. JS opts into the hide-then-reveal animation only after
   confirming IntersectionObserver is available (otherwise content stays
   visible — no race-condition hidden-content bug). */
html.js-reveal-active .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
html.js-reveal-active .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal-active .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Quick Triage (editorial guidance, subtle background section) ── */
.quick-triage{background:var(--card);border:1px solid var(--border-warm);border-radius:var(--card-radius);padding:var(--space-xl) var(--space-lg);box-shadow:var(--card-shadow)}
.quick-triage h2{font-size:var(--text-xl);margin-bottom:var(--heading-gap-h4)}
.quick-triage p{font-size:var(--text-base);color:var(--slate);margin-bottom:var(--space-lg);line-height:1.75;max-width:48ch}
.triage-question{margin-bottom:var(--space-base)}
.triage-question[hidden]{display:none}
.triage-progress{font-size:var(--text-xs);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--teal-cta);margin-bottom:6px}
.triage-progress-note{font-weight:500;color:var(--text-soft);letter-spacing:0.02em;text-transform:none}
.triage-q-text{font-size:var(--text-base);font-weight:600;color:var(--navy);margin-bottom:var(--space-base);line-height:1.5}
.triage-hint{font-size:var(--text-xs);color:var(--text-soft);line-height:1.5;margin:-4px 0 var(--space-base);font-style:italic}
.triage-btns{display:flex;gap:var(--space-base);flex-wrap:wrap}
/* triage-btn base + modifiers now in unified BUTTON SYSTEM above */
.triage-result{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-sm);margin-top:var(--space-base)}
.triage-result[hidden]{display:none}
.triage-result a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--text-base);text-decoration:none;color:var(--cta-primary-text);background:var(--cta-primary-bg);padding:var(--space-base) var(--space-lg);border-radius:var(--radius-round)}
.triage-result a:hover{background:var(--cta-primary-hover)}
.triage-result--urgent{background:var(--alert-soft);border:1px solid var(--alert-subtle)}
.triage-result--urgent a{background:var(--alert)}
.triage-result--urgent a:hover{background:var(--emergency-dark)}
.triage-result--safe{background:var(--success-soft);border:1px solid var(--green-border);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-sm)}
.triage-result--safe p{font-size:var(--text-base);color:var(--phase-green);margin:0}
.triage-result--safe a{background:none;padding:0;color:var(--teal-text);text-decoration:underline;font-size:inherit;border-radius:0;display:inline}
/* triage-restart now in unified BUTTON SYSTEM */
.triage-restart { display: block; margin-top: 12px; }

/* ── Tools Highlight (card grid, same axis as modules) ── */
.tools-highlight h2{font-size:var(--text-xl);margin-bottom:var(--heading-gap-h3)}
.tools-highlight > p{font-size:var(--text-base);color:var(--slate);margin-bottom:var(--space-lg);max-width:48ch}
.hero-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap-standard);max-width:var(--wide-width)}
.hero-tool-card{text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--border-warm);border-left:3px solid var(--teal-light);border-radius:var(--card-radius);padding:var(--card-padding);transition:box-shadow 0.2s ease;display:flex;flex-direction:column;gap:var(--grid-gap-tight);position:relative}
.hero-tool-card:hover{box-shadow:var(--card-shadow-hover)}
.hero-tool-badge{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-round);color:var(--navy);background:var(--teal-subtle);width:fit-content}
.hero-tool-card h3{font-size:var(--text-lg);line-height:1.15;letter-spacing:-0.015em}
.hero-tool-card p{font-size:var(--text-base);color:var(--slate);line-height:1.5;flex:1}
.hero-tool-arrow{color:var(--navy-mid);font-size:var(--text-lg);text-align:right;display:inline-block;transition:color 0.2s ease,transform 0.2s ease}
.hero-tool-card:hover .hero-tool-arrow{color:var(--teal-cta);transform:translateX(3px)}
.hero-tools-all-link{display:inline-block;margin-top:var(--space-lg);font-weight:600;color:var(--navy-mid);text-decoration:none;font-size:var(--text-base)}
.hero-tools-all-link:hover{text-decoration:underline}
@media(max-width:900px){.hero-tools-grid{grid-template-columns:1fr}}

/* ── Erfahrungsbericht ── */
.story-section {
  background: var(--rose-bg);
  border-top: 1px solid var(--border-warm);
  padding-left: 2rem;
  padding-right: 2rem;
}
.story-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.story-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-mid);
  margin-bottom: var(--space-base);
}
.story-section h2 {
  font-size: var(--text-2xl);
  font-style: normal;
  line-height: 1.35;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-left: 0.15em;
}
.story-section h2::before {
  content: '«';
  position: absolute;
  top: -0.25em;
  left: -0.45em;
  font-size: 4rem;
  font-family: 'DM Serif Display', serif;
  color: var(--rose);
  line-height: 1;
  pointer-events: none;
}
.story-body p {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 16px;
}
.story-body p:last-child { margin-bottom: 0; }
.story-body em { font-style: italic; }
.story-attribution {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-warm-md);
  font-size: var(--text-xs);
  color: var(--text-soft);
}
.story-note {
  display: inline-block;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--slate);
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}
@media (max-width: 600px) {
  .story-section { padding: 48px 1.4rem 56px; }
}

/* ── P0.1 Audit: Triage Full-Width-Banner ── */
/* Bricht aus dem Container aus — erster echter Farbbruch auf der Startseite */
.triage-fullwidth-section {
  background: var(--teal-faint, rgba(40,127,135,0.06));
  border-top: 1px solid var(--border-warm);
  border-bottom: 1px solid var(--border-warm);
  padding-top: var(--section-standard);
  padding-bottom: var(--section-standard);
  margin-left: calc(-1 * var(--page-gutter, 2rem));
  margin-right: calc(-1 * var(--page-gutter, 2rem));
  padding-left: var(--page-gutter, 2rem);
  padding-right: var(--page-gutter, 2rem);
}
.triage-fullwidth-section .quick-triage {
  max-width: var(--content-width);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border-warm);
  border-radius: var(--card-radius);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--card-shadow-hover);
}
.triage-fullwidth-section .urgent-note-standalone {
  max-width: var(--content-width);
  margin: 0 auto var(--space-lg);
}
@media (max-width: 600px) {
  .triage-fullwidth-section {
    margin-left: -1.4rem;
    margin-right: -1.4rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}

/* ── P0.2 Audit: Story 50/50 Split-Layout ── */
.story-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--content-width-wide, 1040px);
}
.story-split-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow-hover);
  flex-shrink: 0;
}
.story-split-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media (max-width: 860px) {
  .story-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .story-split-visual { display: none; }
}

/* ── Einladung ── */
.invitation-section {
  /* Audit 2: Dunkler Teal-Hintergrund für visuellen Rhythmus-Bruch */
  background: var(--teal-cta-dark);
  border-top: none;
  padding-left: 2rem;
  padding-right: 2rem;
  color: var(--white-text);
}
.invitation-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
  padding: 0;
}
.invitation-section h2 {
  font-size: var(--text-xl);
  line-height: 1.5;
  margin-bottom: var(--heading-gap-h2);
  color: #ffffff;
}
.invitation-inner > p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: var(--content-width-narrow);
  margin: 0 auto 32px;
}
.invitation-contacts {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.invitation-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: var(--radius-md);
  /* Primary: invertierter Button auf dunklem Hintergrund */
  background: #ffffff;
  color: var(--teal-cta-dark);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.2s ease, transform 0.15s ease;
}
.invitation-phone::before {
  content: "☎";
  font-size: var(--text-lg);
  line-height: 1;
}
.invitation-phone:hover { background: var(--surface-alt); transform: translateY(-1px); }
.invitation-email {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  /* Secondary: Ghost-Link auf dunklem Hintergrund */
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.invitation-email:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); color: #ffffff; }
@media (max-width: 600px) {
  .invitation-section { padding: var(--section-tight) 1.4rem; }
  .invitation-contacts { flex-direction: column; align-items: center; }
  .invitation-phone, .invitation-email { width: 100%; justify-content: center; }
}

/* ── Homepage Responsive ── */
@media (max-width: 768px) {
  .home-hero-text { padding: 0; max-width: 100%; }
  .home-hero h1 { max-width: 100%; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 600px) {
  .home-hero { padding: 110px 1.2rem 56px; }
  .home-hero h1 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
  .home-hero-subtitle { font-size: var(--text-base); margin-bottom: var(--space-lg); }
  .home-hero-badge { font-size: var(--text-xs); margin-bottom: var(--space-base); }
  .home-hero-paths { margin-top: var(--space-xl); }
  .urgent-note { padding: 10px 14px; }
  #main-content > section { padding-left: 1.2rem; padding-right: 1.2rem; }
}

/* ── Extra-narrow edge-case (≤420px, iPhone SE / small Android) ── */
@media (max-width: 420px) {
  .home-hero { padding: 96px 1rem 44px; }
  .home-hero h1 { font-size: clamp(1.3rem, 6vw, var(--text-2xl)); }
  #main-content > section { padding-left: 1rem; padding-right: 1rem; }
  .overview-hero { padding: 100px 1rem var(--section-tight); }
  .triage-btn { padding: var(--cta-padding-sm); }
}

/* ── [from overrides.css] SKIP LINK ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 14px;
  /* AUDIT FIX K-01: skip-link uses white text on teal */
  left: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--teal-cta);
  color: var(--cta-primary-text);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: var(--shadow-elevated);
  outline: 2px solid var(--teal-light);
  outline-offset: 2px;
}

/* body base consolidated to line ~9; dark-tool override in tools.css */

/* ── [from overrides.css] TYPOGRAPHY ── */
/* html font-size: 16px already set at line 6 (reset) */

/* ── HEADING BASE ──
   Shared properties for all headings.
   Individual contexts override only font-size, margin, and color.        */
h1, h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
}

h3, h4 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-mid);
}

/* Non-heading elements that keep serif (quotes, stat numerals) */
.quote-block blockquote,
.glaswand-quote,
.closing-emphasis,
.stat-num {
  font-family: 'DM Serif Display', serif;
}

/* Nav brand — DM Sans bold for precision */
.nav-brand-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
}

/* Normalize h3 size across all modules */
.content h3 {
  font-size: var(--text-lg);
}

/* Nav overrides consolidated to lines ~19–102 */

.nav-sos:hover {
  background: var(--rose-badge);
  color: var(--rose-text);
}

/* ── Mobile toggle ── */
.nav-toggle {
  color: var(--text);
  background: transparent;
}

.nav-toggle svg {
  color: var(--text);
  stroke: var(--text);
}

/* ── Mobile dropdown (nav-open) ── */
.nav-links.nav-open {
  background: var(--card);
  border-color: var(--border-warm-md);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius-lg);
}

.nav-links.nav-open a {
  color: var(--text-soft);
}

.nav-links.nav-open a:hover {
  background: var(--surface-alt);
  color: var(--text);
}

/* ── HERO / MODULE-HERO (L2: light, warm — no heavy color blocks) ── */

/* ── Main hero (index.html) ── */
.hero {
  background: var(--surface-alt);
  color: var(--text);
}

.hero::before,
.hero::after {
  display: none;
}

.hero-content {
  max-width: var(--content-width);
}

.hero-badge {
  background: var(--teal-subtle);
  color:var(--teal-cta);
  border-radius: var(--radius-round);
}

.hero-badge::before {
  background: var(--teal-light);
}

.hero h1 {
  color: var(--navy);
}

.hero h1 em {
  color:var(--teal-cta);
}

.hero-subtitle {
  color: var(--slate);
}

/* ── Module hero (modul pages) ── */
.module-hero {
  background: var(--surface-alt);
  color: var(--text);
}

.module-hero-inner {
  max-width: var(--content-width);
}

.module-hero h1 {
  color: var(--navy);
}

.module-badge {
  border-radius: var(--radius-round);
}

.module-hero .module-meta {
  color: var(--slate);
}

.module-hero .module-meta svg {
  color:var(--teal-cta);
}

/* .breadcrumb a overrides moved to unified block above */

/* ── Notfall hero (notfall/index.html) ──
   Emergency stays strong — the ONE place heavy color is justified */
.hero.notfall-hero,
header.hero[style*="linear-gradient"] {
  background: var(--emergency-dark) !important;
  color: var(--white-text) !important;
}

/* ── Reading progress bar (sits below nav) ── */
.reading-progress-fill,
#reading-progress {
  background: var(--teal);
}

/* ── [from overrides.css] BADGES ── */
.badge,
.tool-badge,
.module-badge,
.overview-badge,
.hero-badge,
.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Quiet variant (meta labels): no background, no padding, muted color */
.home-hero-badge,
.story-label {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Accent variant (status/category): subtle bg, pill, accent color */
.tool-badge,
.module-badge,
.overview-badge,
.hero-badge {
  background: var(--success-soft);
  color: var(--teal-text);
}

/* ── BUTTON SYSTEM ──────────────────────────────────────────────────
   Four semantic tiers: primary, secondary, danger, tertiary (text).
   Shared base properties ensure consistent sizing, font, spacing.
   Tool-specific buttons (quiz, rating, toggle) remain in tools.css
   but inherit font-family + transition from global a/button rule.
   ──────────────────────────────────────────────────────────────── */

/* Shared base for all CTA buttons */
.cta-primary, .cta-secondary,
.home-hero-link,
.btn-c, .btn-cont, .btn-next, .btn-save, .submit.ready,
.btn-r, .btn-back, .btn-print, .btn-reset,
.triage-btn, .triage-restart {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--cta-font-size);
  font-weight: var(--cta-font-weight);
  padding: var(--cta-padding);
  border-radius: var(--cta-radius);
  min-height: var(--cta-min-height);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  line-height: 1.4;
}

/* ── Primary (teal bg, white text) ── */
.cta-primary,
.home-hero-link,
.btn-c, .btn-cont, .btn-next, .btn-save,
.submit.ready {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
  border: none;
}
.cta-primary:hover, .home-hero-link:hover,
.btn-c:hover, .btn-cont:hover, .btn-next:hover, .btn-save:hover,
.submit.ready:hover {
  background: var(--cta-primary-hover);
}

/* ── Secondary (white bg, border) ── */
.cta-secondary,
.btn-r, .btn-back, .btn-print,
.triage-btn, .triage-restart {
  background: var(--cta-secondary-bg);
  color: var(--cta-secondary-text);
  border: 1px solid var(--cta-secondary-border);
}
.cta-secondary:hover, .btn-r:hover, .btn-back:hover, .btn-print:hover,
.triage-btn:hover, .triage-restart:hover {
  border-color: var(--cta-secondary-hover-border);
  color: var(--cta-secondary-hover-text);
  background: var(--cta-secondary-hover-bg);
}

/* Triage modifiers (on top of secondary base) */
.triage-btn--yes {
  border-color: var(--teal-muted);
  color: var(--teal-cta);
}
.triage-btn--yes:hover {
  border-color: var(--teal-solid);
  background: var(--teal-faint);
}
.triage-btn--no { color: var(--slate); }
.triage-btn--no:hover { color: var(--teal-cta); }

/* ── Danger (red border, red text → red bg on hover) ── */
.btn-reset {
  background: var(--cta-danger-bg);
  color: var(--cta-danger-text);
  border: 1px solid var(--cta-danger-border);
}
.btn-reset:hover {
  background: var(--cta-danger-hover-bg);
  border-color: var(--cta-danger-hover-border);
}

/* ── Small button variant ── */
.btn-save, .btn-print, .btn-reset {
  padding: var(--cta-padding-sm);
  font-size: var(--text-xs);
}

/* ── FORM FIELDS ──
   Shared base for all text inputs, textareas, and selects.
   Tools (krisenplan) and module (mini-plan) inherit this base. */
input[type="text"], input[type="email"], input[type="tel"],
textarea, select,
.field input, .field textarea,
.mini-plan input, .mini-plan textarea, .mini-plan select {
  width: 100%;
  padding: var(--space-base) 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-warm-md);
  background: var(--card);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-base);
  transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus,
.field input:focus, .field textarea:focus,
.mini-plan input:focus, .mini-plan textarea:focus, .mini-plan select:focus {
  outline: none;
  border-color: var(--teal-solid);
  box-shadow: 0 0 0 3px var(--teal-muted);
}
textarea { min-height: 80px; resize: vertical; }

/* ── [from overrides.css] SPACING ── */

/* ── Content width ── */
.content {
  max-width: var(--content-width);
}

/* ── Hero inner containers ── */
.hero-content,
.module-hero-inner {
  max-width: var(--content-width);
}

/* ── Wide containers (grids) ── */
.nav-inner {
  max-width: var(--wide-width);
}
/* .footer-inner max-width consolidated to line ~167 */

.guide-body-inner {
  padding: var(--space-lg);
}

/* Dead CSS removed: .footer-brand, .footer-col, .footer-bottom
   (old multi-column footer replaced by footer-medium.njk / .footer-inner--compact) */

/* ── Compact footer layout ── */
.footer-inner--compact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg) var(--space-xl);
  text-align: left;
}

.footer-group {
  display: grid;
  gap: var(--space-sm);
}

.footer-inner--compact .footer-links {
  display: grid;
  justify-content: flex-start;
  justify-items: flex-start;
  gap: var(--space-sm);
}

.footer-group-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.footer-credit {
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--slate);
  margin: 0;
  max-width: 40ch;
}

.footer-attribution {
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--text);
  font-weight: 600;
  margin: 0;
}

.footer-disclaimer {
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--slate);
  margin: 0;
  max-width: 36ch;
}

.footer-emergency-note {
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--text);
  font-weight: 600;
  margin: 0;
  max-width: 32ch;
}

.footer-disclaimer a { color: var(--rose-text); font-weight: 600; }

.footer-inner .footer-link-alert {
  color: var(--alert);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.footer-inner .footer-link-alert:hover {
  color: var(--emergency-dark);
}

.footer-inner .footer-link-alert:visited {
  color: var(--alert);
}

/* ── Visited link styling ── */
a:visited {
  color: var(--teal-text);
}
/* Exception list: components whose color must NOT change on :visited */
.nav-links a:visited,
.nav-sos:visited,
.tool-back:visited,
.btn-c:visited,
.module-card:visited,
.tool-card:visited,
.entry-path-link:visited,
.entry-path-link--crisis:visited,
.tools-all-link:visited,
.invitation-phone:visited,
.invitation-email:visited,
.urgent-note-link:visited,
.footer-disclaimer a:visited {
  color: inherit;
}

.footer-links a:visited {
  color: var(--slate);
}

/* ── [from overrides.css] TOOL NAV LIGHT VARIANT ── */
.tool-nav {
  width: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:not(.dark-tool) .tool-nav .tool-back {
  color: var(--slate);
}

body:not(.dark-tool) .tool-nav .tool-back:hover {
  color: var(--teal-text);
}

body:not(.dark-tool) .tool-nav .tool-brand {
  color: var(--text);
}

/* ── [from overrides.css] TOOL NAV TEXT (non-dark) ── */
body:not(.dark-tool) .tool-back,
body:not(.dark-tool) .tool-brand {
  color: var(--text);
}

/* ── [from overrides.css] RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: var(--section-wide) 1.2rem var(--section-tight);
    min-height: auto;
  }
  .hero h1 {
    font-size: var(--text-tool-title);
  }
  .module-hero {
    padding: var(--section-wide) 1.2rem var(--section-tight);
    min-height: auto;
  }
  .section {
    padding: var(--section-tight) 1.2rem;
  }
}

/* ── [from overrides.css] MOBILE TYPOGRAPHY & TOUCH-TARGET IMPROVEMENTS ── */
@media (max-width: 600px) {
  :root {
    --text-xs:   0.82rem;      /* 13.1 px (was 0.75 rem / 12 px) */
  }

  /* Hardcoded small text → minimum 0.82 rem on mobile */
  .overview-badge,
  .module-time {
    font-size: var(--text-xs);
  }
  .module-number {
    font-size: var(--text-xs);        /* was 0.7 rem / 11.2 px */
  }
}

/* ── [from overrides.css] HERO SPLIT LAYOUT ── */
header.hero .hero-content {
  max-width: var(--wide-width);
}

.hero-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

.hero-text {
  max-width: 60ch;
}

.hero-text .hero-subtitle {
  max-width: none;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white-overlay-sm);
  border: 1px solid var(--white-overlay-md);
  color: var(--white-text);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 500;
  padding: 10px 22px;
  border-radius: var(--radius-round);
  transition: all 0.2s ease;
  margin-top: 1.5rem;
}

.hero-link:hover {
  background: rgba(255,255,255,0.17);
  border-color: var(--white-overlay-md);
  color: var(--white-text);
}

@media (max-width: 900px) {
  .hero-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-text {
    max-width: none;
  }
}

/* Module card accents: unified to single teal-light (line 381).
   Per-module color accents removed for calmer, editorial grid.
   data-accent attributes remain in HTML for future use if needed. */

/* Fix inconsistency: theme targets .module-card-arrow but HTML uses .module-arrow */
.module-card-arrow,
.module-arrow {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--border-warm-md);
  color: var(--text-soft);
  font-size: var(--text-xs);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.module-card:hover .module-card-arrow,
.module-card:hover .module-arrow {
  border-color: var(--teal-solid);
  color:var(--teal-cta);
}

/* ══════════ WERKZEUGE PAGE (extracted from inline <style>) ══════════ */

/* Audit 3: Werkzeuge-Blobs reaktiviert — subtile Tiefe ohne Kontrastverlust */
.werkzeuge-page .overview-hero {
  position: relative;
  overflow: hidden;
}

.werkzeuge-page .overview-hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, var(--teal-light) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.werkzeuge-page .overview-hero::after {
  display: none;
}

.werkzeuge-page .overview-hero-content,
.werkzeuge-page .overview-hero-inner {
  position: relative;
  z-index: 2;
}
.werkzeuge-page .overview-badge { background: rgba(217,236,236,0.42); color: var(--navy-mid); }
.werkzeuge-page .overview-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.werkzeuge-page .overview-note { background: var(--card); }

/* Situativer Guide */
.tool-guide { margin: 0 auto var(--section-standard); }
.tool-guide h2 {
  font-size: var(--text-lg); margin: 0 0 var(--heading-gap-h2);
}
.tool-guide-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-tight);
}
.tool-guide-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-md) 18px; border-radius: var(--card-radius);
  background: var(--card); border: 1px solid var(--border-warm);
  text-decoration: none; color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-guide-item:hover { border-color: var(--teal-light); box-shadow: var(--card-shadow-hover); }
.tool-guide-item strong { font-size: var(--text-base); font-weight: 600; color: var(--navy); }
.tool-guide-item span { font-size: var(--text-xs); color: var(--navy-mid); font-weight: 600; }
.tool-guide-item--alert { border-color: var(--alert-red-border); background: var(--alert-soft); }
.tool-guide-item--alert strong { color: var(--alert); }
.tool-guide-item--alert span { color: var(--alert); }
@media (max-width: 900px) { .tool-guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tool-guide-grid { grid-template-columns: 1fr; } }

/* Tool grid + cards */
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap-tight); }
.tool-card {
  display: block; background: var(--card);
  border: 1px solid var(--border-warm); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); padding: var(--card-padding);
  text-decoration: none; color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tool-card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--teal-light); }
.tool-card-kicker {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-mid); margin-bottom: var(--space-base); display: block;
}
.tool-card h3 {
  font-size: var(--text-lg); line-height: 1.15; color: var(--navy); margin: 0 0 var(--heading-gap-h3);
}
.tool-card p { margin: 0; font-size: var(--text-base); line-height: 1.75; color: var(--slate); }
.tool-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--border-warm);
  color: var(--text-soft); font-size: var(--text-xs); font-weight: 600;
}
.tool-card-arrow { color: var(--teal-text); font-size: var(--text-base); }

/* Collapsible tool grid */
.tool-details { margin: var(--space-base) 0 0; }
.tool-details-summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-lg); font-weight: 700; color: var(--navy);
  padding: 14px 0; list-style: none;
}
.tool-details-summary::-webkit-details-marker { display: none; }
.tool-details-summary::after {
  content: '\25B8'; margin-left: 8px;
  transition: transform 0.2s ease; font-size: var(--text-xs); color: var(--teal-text);
}
.tool-details[open] .tool-details-summary::after { transform: rotate(90deg); }
.tool-details .tool-grid { margin-top: var(--space-md); }

@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .tool-card { padding: 20px 18px; } }

/* ── Back-to-Top Button ── */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--slate);
  box-shadow: var(--shadow-nav);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--teal-cta-dark);
  color: #fff;
  border-color: var(--teal-cta-dark);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}
@media (min-width: 1100px) {
  /* Hide on desktop when TOC sidebar is visible */
  body[data-module-accent] .back-to-top { display: none; }
}

/* ── Tool Nav: Main-Nav links row ── */
.tool-nav-main {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  padding: 0 clamp(1rem, 3vw, 2rem);
  max-width: var(--content-width);
  margin: 0 auto var(--space-xs);
  font-size: var(--text-xs);
}
.tool-nav-main a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-soft);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.tool-nav-main a:hover {
  color: var(--teal-text);
}
.tool-nav-main .nav-sos {
  color: var(--alert);
  font-weight: 600;
  margin-left: auto;
}
.tool-nav-main .nav-sos:hover {
  opacity: 0.85;
}
@media (max-width: 600px) {
  .tool-nav-main {
    gap: 8px;
    padding: 10px 14px 6px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .tool-nav-main::-webkit-scrollbar {
    display: none;
  }
  .tool-nav-main a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border-warm-md);
    border-radius: var(--radius-round);
    background: var(--card);
    scroll-snap-align: start;
  }
  .tool-nav-main .nav-sos {
    margin-left: 0;
  }
}

/* ── Page-specific styles moved out of inline body styles for validator compliance ── */
body.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.error-page .card {
  max-width: 640px;
  width: 100%;
  margin: auto;
  padding: var(--card-padding);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
body.error-page h1 {
  margin: 0 0 12px;
  font-size: var(--text-2xl);
  font-family: 'DM Serif Display', serif;
}
body.error-page p {
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--slate);
}
body.error-page .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
body.error-page .actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: var(--cta-radius);
  text-decoration: none;
  font-weight: 700;
}
body.error-page .primary {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
}
body.error-page .secondary {
  border: 1px solid var(--cta-secondary-border);
  color: var(--cta-secondary-text);
  background: var(--cta-secondary-bg);
}
body.error-page .error-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 12px 24px;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
body.error-page .error-nav-link {
  color: var(--navy);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
}
body.error-page .error-main {
  margin-top: var(--section-standard);
}
body.error-page .footer-org {
  color: white;
}
body.error-page .footer-emergency {
  color: var(--alert);
}

body.module-overview-page .overview-hero::before {
  top: -24%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: none;
  display: none;
  opacity: 0.82;
}
body.module-overview-page .overview-hero::after {
  bottom: -18%;
  left: -6%;
  width: 520px;
  height: 520px;
  background: none;
  display: none;
  opacity: 0.78;
}
body.module-overview-page .overview-badge {
  background: var(--sand-subtle);
  color: var(--sand-deep);
}
body.module-overview-page .overview-note {
  background: #fff;
}
body.module-overview-page .overview-note p + p {
  margin-top: 10px;
}
body.module-overview-page .overview-section {
  padding-top: 8px;
}

body.draft-overview-page .draft-overview {
  max-width: 1080px;
  margin: 0 auto;
  padding: 120px 24px 72px;
}
body.draft-overview-page .draft-overview h1 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-section-title);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 14px;
}
body.draft-overview-page .draft-overview p.lead {
  max-width: 62ch;
  font-size: var(--text-base);
  color: var(--slate);
  line-height: 1.75;
  margin: 0 0 26px;
}
body.draft-overview-page .draft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap-tight);
}
body.draft-overview-page .draft-card {
  background: #fff;
  border: 1px solid rgba(45, 40, 35, 0.08);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap-tight);
}
body.draft-overview-page .draft-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.draft-overview-page .draft-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-round);
  background: var(--success-soft);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.draft-overview-page .draft-badge.alert {
  background: #f6ddd5;
  color: var(--alert);
}
body.draft-overview-page .draft-card h2 {
  font-size: var(--text-lg);
  line-height: 1.15;
  margin: 0;
  color: var(--navy);
}
body.draft-overview-page .draft-meta {
  font-size: var(--text-xs);
  color: var(--text-soft);
}
body.draft-overview-page .draft-goal {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
}
body.draft-overview-page .draft-links {
  display: flex;
  gap: var(--grid-gap-tight);
  flex-wrap: wrap;
  margin-top: auto;
}
body.draft-overview-page .draft-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-round);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 700;
}
body.draft-overview-page .draft-link.primary {
  background: var(--teal-cta);
  color: #fff;
}
body.draft-overview-page .draft-link.secondary {
  background: #eef4f3;
  color: var(--navy);
}
@media (max-width: 900px) {
  body.draft-overview-page .draft-grid {
    grid-template-columns: 1fr;
  }
  body.draft-overview-page .draft-overview {
    padding-top: 104px;
  }
}

body.impressum-page a {
  color: var(--teal-text);
}
body.impressum-page .hero {
  padding: 56px 24px 40px;
  text-align: center;
  border-bottom: 1px solid var(--border-warm);
}
body.impressum-page .hero-badge {
  display: inline-flex;
  background: var(--success-soft);
  color: var(--navy);
  padding: 5px 16px;
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
body.impressum-page .hero h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: var(--text-tool-title);
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
}
body.impressum-page .breadcrumb {
  text-align: center;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.impressum-page .breadcrumb a {
  color: var(--teal-text);
  font-size: var(--text-xs);
  text-decoration: none;
}
body.impressum-page .breadcrumb a:hover {
  text-decoration: underline;
}
body.impressum-page .breadcrumb span {
  font-size: var(--text-xs);
  color: var(--text-soft);
}
body.impressum-page .content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--section-tight) var(--space-lg) var(--section-standard);
}
body.impressum-page .section {
  margin-bottom: var(--section-tight);
}
body.impressum-page .section h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--success-soft);
  scroll-margin-top: 84px;
}
body.impressum-page .section p {
  font-size: var(--text-base);
  color: var(--slate);
  margin: 0 0 12px;
}
body.impressum-page .section p:last-child {
  margin-bottom: 0;
}
body.impressum-page .section strong {
  color: var(--text);
}
body.impressum-page .section a {
  color: var(--teal-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.impressum-page .info-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 16px 0;
}
body.impressum-page .info-box p {
  color: var(--slate);
  font-size: var(--text-xs);
  margin: 0;
}
body.impressum-page .info-box strong {
  color: var(--slate);
}

/* ══════════════════════════════════════════════════════════
   P2.1 Audit: Werkzeuge-Hero Split-Layout
   P2.2 Audit: Modul-Übersicht Hero Split-Layout
   ══════════════════════════════════════════════════════════ */

/* Gemeinsames Split-Muster für Overview-Hero-Seiten */
.werkzeuge-hero-inner,
.module-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: var(--wide-width);
  margin: 0 auto;
}

.werkzeuge-hero-visual,
.module-overview-hero-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow-hover);
  position: relative;
  z-index: 1;
}

.werkzeuge-hero-visual img,
.module-overview-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.werkzeuge-hero-text,
.module-overview-hero-text {
  position: relative;
  z-index: 2;
}

/* Mobile: gestapelt, Bild ausgeblendet */
@media (max-width: 860px) {
  .werkzeuge-hero-inner,
  .module-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .werkzeuge-hero-visual,
  .module-overview-hero-visual {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   P2.3 Audit: SVG-Icon-System (Phosphor Icons — inline SVG)
   Ersetzt Unicode-Symbole (⏱ →) in Modul-Karten und Tool-Karten
   durch konsistente, skalierbare SVG-Icons.
   ══════════════════════════════════════════════════════════ */

/* Icon-Basis: alle SVG-Icons im Kontext */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Modul-Karten: Zeitangabe mit Clock-Icon */
.module-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-soft);
}
.module-time .icon {
  width: 14px;
  height: 14px;
  opacity: 0.65;
}

/* Modul-Karten: Pfeil-Icon */
.module-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--teal-text);
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.module-card:hover .module-arrow {
  transform: translateX(3px);
}

/* Tool-Karten: Pfeil-Icon */
.tool-card-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--teal-text);
  transition: transform 0.2s ease;
}
.tool-card:hover .tool-card-arrow {
  transform: translateX(3px);
}

/* Kicker-Badges auf Tool-Karten: leicht aufgewertet */
.tool-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-text);
  background: var(--teal-subtle);
  padding: 3px 10px;
  border-radius: var(--radius-round);
  margin-bottom: var(--space-sm);
}

/* ══════════════════════════════════════════════════════════
   VISUAL POLISH PASS — Home + Werkzeuge
   More hierarchy, calmer atmospheres, clearer card families.
   Scoped to the requested surfaces to avoid cross-site drift.
   ══════════════════════════════════════════════════════════ */

.home-page .home-hero {
  padding-bottom: 56px;
  background:
    linear-gradient(180deg, var(--surface-hero-warm) 0%, var(--surface-teal-mist) 44%, var(--surface-alt) 100%);
}

.home-page .home-hero::before {
  background:
    radial-gradient(ellipse 72% 58% at 12% 100%, rgba(168,213,203,0.24) 0%, transparent 72%),
    radial-gradient(ellipse 38% 44% at 88% 16%, rgba(175,115,110,0.14) 0%, transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 52%);
}

.home-page .home-hero::after {
  content: '';
  display: block;
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  top: calc(var(--nav-height) + 1.5rem);
  width: 230px;
  height: 230px;
  border-radius: 34px;
  border: 1px solid rgba(45,40,35,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
  transform: rotate(13deg);
  opacity: 0.62;
  pointer-events: none;
}

.home-page .home-hero-subtitle {
  max-width: 54ch;
  line-height: 1.62;
}

.home-page .home-hero-visual {
  border: 1px solid rgba(45,40,35,0.08);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-atmosphere);
}

.home-page .home-hero-paths {
  width: 100%;
  max-width: none;
  margin-top: var(--space-2xl);
  padding: 22px clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(45,40,35,0.08);
  border-radius: calc(var(--card-radius) + 10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72));
  box-shadow: var(--shadow-soft);
}

.home-page .home-hero-paths-lead {
  max-width: 72ch;
  line-height: 1.62;
  margin-bottom: var(--space-base);
}

.home-page .entry-path-link {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  padding: 16px 18px 16px 22px;
  border-color: rgba(45,40,35,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,241,236,0.82));
  box-shadow: 0 1px 0 rgba(45,40,35,0.03);
}

.home-page .entry-path-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--teal-cta);
}

.home-page .entry-path-link:hover {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.home-page .entry-path-label {
  max-width: 30ch;
}

.home-page .entry-path-link--crisis {
  background: linear-gradient(180deg, rgba(254,242,242,0.92), rgba(255,255,255,0.98));
}

.home-page .entry-path-link--crisis::before {
  background: var(--alert);
}

.home-page .entry-path-link--crisis:hover {
  background: var(--alert-soft);
  border-color: rgba(185,28,28,0.22);
  color: var(--alert);
}

.home-page .tools-highlight {
  margin-top: calc(var(--section-standard) + 8px);
  padding: calc(var(--section-standard) - 8px) clamp(1.4rem, 2.3vw, 2rem) calc(var(--section-standard) - 6px);
  border: 1px solid rgba(45,40,35,0.08);
  border-radius: calc(var(--card-radius) + 14px);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), var(--surface-ink-mist) 100%);
  box-shadow: var(--shadow-soft);
}

.home-page .hero-tool-card {
  --tone-band: var(--teal-cta);
  --tone-surface: linear-gradient(180deg, var(--surface-teal-mist) 0%, rgba(255,255,255,0.98) 30%, #ffffff 100%);
  --tone-kicker-bg: var(--teal-subtle);
  --tone-kicker-text: var(--teal-text);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--card-padding) + 8px);
  border-width: 1px;
  border-color: rgba(45,40,35,0.08);
  background: var(--tone-surface);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.home-page .hero-tool-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--tone-band);
}

.home-page .hero-tool-card:hover {
  border-color: rgba(45,40,35,0.12);
  box-shadow: var(--shadow-atmosphere);
  transform: translateY(-2px);
}

.home-page .hero-tool-card[data-tone="sand"] {
  --tone-band: var(--amber);
  --tone-surface: linear-gradient(180deg, var(--surface-sand-mist) 0%, rgba(255,255,255,0.98) 30%, #ffffff 100%);
  --tone-kicker-bg: rgba(244,208,120,0.28);
  --tone-kicker-text: #8f5612;
}

.home-page .hero-tool-card[data-tone="blue"] {
  --tone-band: var(--blue-phase);
  --tone-surface: linear-gradient(180deg, var(--blue-phase-light) 0%, rgba(255,255,255,0.98) 30%, #ffffff 100%);
  --tone-kicker-bg: rgba(74,111,149,0.12);
  --tone-kicker-text: var(--blue-phase);
}

.home-page .hero-tool-badge {
  color: var(--tone-kicker-text);
  background: var(--tone-kicker-bg);
}

.home-page .hero-tool-card p {
  line-height: 1.62;
}

.werkzeuge-page .overview-hero {
  padding-bottom: calc(var(--section-tight) - 6px);
  background:
    linear-gradient(180deg, var(--surface-hero-warm) 0%, var(--surface-teal-mist) 48%, var(--bg) 100%);
  border-bottom: 1px solid rgba(45,40,35,0.05);
}

.werkzeuge-page .overview-hero::before {
  top: auto;
  right: -6%;
  bottom: -32%;
  width: 48%;
  height: 92%;
  background: radial-gradient(circle, rgba(168,213,203,0.8) 0%, rgba(168,213,203,0.22) 46%, transparent 72%);
  filter: none;
  opacity: 1;
}

.werkzeuge-page .overview-hero::after {
  content: '';
  display: block;
  top: calc(var(--nav-height) + 1rem);
  right: clamp(1.5rem, 5vw, 5rem);
  width: 220px;
  height: 220px;
  border: 1px solid rgba(45,40,35,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0));
  transform: rotate(14deg);
  opacity: 0.58;
}

.werkzeuge-page .overview-lead {
  max-width: 58ch;
  line-height: 1.62;
}

.werkzeuge-page .werkzeuge-hero-visual {
  border: 1px solid rgba(45,40,35,0.08);
  background: rgba(255,255,255,0.76);
  box-shadow: var(--shadow-atmosphere);
}

.werkzeuge-page .tool-guide {
  margin-bottom: calc(var(--section-standard) - 10px);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid rgba(45,40,35,0.08);
  border-radius: calc(var(--card-radius) + 12px);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), var(--surface-hero-warm) 100%);
  box-shadow: var(--shadow-soft);
}

.werkzeuge-page .tool-guide h2 {
  margin-bottom: 10px;
}

.werkzeuge-page .tool-guide p {
  max-width: 62ch;
  line-height: 1.62;
}

.werkzeuge-page .tool-guide-item {
  --tone-line: var(--teal-cta);
  --tone-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,245,242,0.88));
  position: relative;
  overflow: hidden;
  padding-left: 22px;
  border-color: rgba(45,40,35,0.08);
  background: var(--tone-surface);
  box-shadow: 0 1px 0 rgba(45,40,35,0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.werkzeuge-page .tool-guide-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tone-line);
}

.werkzeuge-page .tool-guide-item:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.werkzeuge-page .tool-guide-item[data-tone="sand"] {
  --tone-line: var(--amber);
  --tone-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,240,231,0.9));
}

.werkzeuge-page .tool-guide-item[data-tone="rose"] {
  --tone-line: #a45a55;
  --tone-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,242,240,0.9));
}

.werkzeuge-page .tool-guide-item[data-tone="blue"] {
  --tone-line: var(--blue-phase);
  --tone-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,243,248,0.96));
}

.werkzeuge-page .tool-guide-item[data-tone="green"] {
  --tone-line: var(--phase-green);
  --tone-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(168,213,203,0.18));
}

.werkzeuge-page .tool-guide-item--alert {
  --tone-line: var(--alert);
  --tone-surface: linear-gradient(180deg, rgba(254,242,242,0.98), rgba(255,255,255,0.98));
  border-color: var(--alert-red-border);
  box-shadow: none;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-base);
  padding-right: 22px;
}

.werkzeuge-page .tool-guide-item--alert::before {
  background: var(--alert);
}

.werkzeuge-page .tool-guide-item--alert span {
  justify-self: end;
  font-weight: 700;
}

.werkzeuge-page .tool-details {
  margin-top: var(--space-lg);
  padding-top: 6px;
  border-top: 1px solid rgba(45,40,35,0.08);
}

.werkzeuge-page .tool-details-summary {
  width: fit-content;
  padding: 12px 16px;
  border: 1px solid rgba(45,40,35,0.08);
  border-radius: var(--radius-round);
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-soft);
}

.werkzeuge-page .tool-details[open] .tool-details-summary {
  background: var(--surface-alt);
}

.werkzeuge-page .tool-details .tool-grid {
  margin-top: var(--space-lg);
}

.werkzeuge-page .tool-card {
  --tone-band: var(--teal-cta);
  --tone-surface: rgba(238,245,242,0.62);
  --tone-kicker-bg: var(--teal-subtle);
  --tone-kicker-text: var(--teal-text);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--card-padding) + 10px);
  border-color: rgba(45,40,35,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, var(--tone-surface) 18%, #ffffff 76%);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.werkzeuge-page .tool-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: var(--tone-band);
}

.werkzeuge-page .tool-card:hover {
  border-color: rgba(45,40,35,0.12);
  box-shadow: var(--shadow-atmosphere);
  transform: translateY(-2px);
}

.werkzeuge-page .tool-card[data-tone="blue"] {
  --tone-band: var(--blue-phase);
  --tone-surface: rgba(238,243,248,0.86);
  --tone-kicker-bg: rgba(74,111,149,0.12);
  --tone-kicker-text: var(--blue-phase);
}

.werkzeuge-page .tool-card[data-tone="ink"] {
  --tone-band: var(--navy-mid);
  --tone-surface: rgba(241,238,234,0.92);
  --tone-kicker-bg: rgba(86,102,122,0.12);
  --tone-kicker-text: var(--navy-mid);
}

.werkzeuge-page .tool-card[data-tone="sand"] {
  --tone-band: var(--amber);
  --tone-surface: rgba(246,240,231,0.88);
  --tone-kicker-bg: rgba(244,208,120,0.28);
  --tone-kicker-text: #8f5612;
}

.werkzeuge-page .tool-card[data-tone="rose"] {
  --tone-band: #a45a55;
  --tone-surface: rgba(251,242,240,0.92);
  --tone-kicker-bg: rgba(175,115,110,0.16);
  --tone-kicker-text: #8f4d48;
}

.werkzeuge-page .tool-card[data-tone="green"] {
  --tone-band: var(--phase-green);
  --tone-surface: rgba(168,213,203,0.18);
  --tone-kicker-bg: rgba(168,213,203,0.28);
  --tone-kicker-text: var(--phase-green);
}

.werkzeuge-page .tool-card[data-tone="amber"] {
  --tone-band: var(--amber);
  --tone-surface: rgba(254,243,226,0.92);
  --tone-kicker-bg: rgba(251,191,36,0.2);
  --tone-kicker-text: #8f5612;
}

.werkzeuge-page .tool-card[data-tone="warm"] {
  --tone-band: var(--navy);
  --tone-surface: rgba(247,242,235,0.92);
  --tone-kicker-bg: rgba(45,40,35,0.08);
  --tone-kicker-text: var(--navy);
}

.werkzeuge-page .tool-card-kicker {
  color: var(--tone-kicker-text);
  background: var(--tone-kicker-bg);
}

.werkzeuge-page .tool-card p,
.werkzeuge-page .overview-footer-note {
  line-height: 1.62;
}

@media (max-width: 900px) {
  .home-page .home-hero::after,
  .werkzeuge-page .overview-hero::after {
    display: none;
  }

  .home-page .home-hero-paths,
  .home-page .tools-highlight,
  .werkzeuge-page .tool-guide {
    border-radius: calc(var(--card-radius) + 8px);
  }
}

@media (max-width: 600px) {
  .home-page .home-hero {
    padding-top: 88px;
    padding-bottom: 34px;
  }

  .home-page .home-hero-subtitle {
    margin-bottom: var(--space-lg);
    font-size: var(--text-base);
  }

  .home-page .home-hero .home-hero-link {
    min-height: 46px;
    padding: 0 18px;
    font-size: var(--text-sm);
    box-shadow: none;
  }

  .home-page .home-hero-paths {
    margin-top: var(--space-lg);
    padding: 14px;
  }

  .home-page .home-hero-paths-lead {
    margin-bottom: var(--space-sm);
  }

  .home-page .entry-path-link {
    padding: 14px 14px 14px 18px;
    gap: var(--space-sm);
  }

  .home-page .entry-path-destination {
    font-size: var(--text-xs);
  }

  #orientierung {
    margin-top: var(--space-lg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .quick-triage {
    padding: var(--space-lg) var(--space-base);
  }

  .home-page .tools-highlight,
  .werkzeuge-page .tool-guide {
    padding-left: 16px;
    padding-right: 16px;
  }

  .werkzeuge-page .overview-hero {
    padding-top: 92px;
    padding-bottom: 24px;
  }

  .werkzeuge-page .tool-guide-item,
  .werkzeuge-page .tool-card {
    padding-left: 18px;
  }

  .werkzeuge-page .tool-guide-item--alert {
    grid-template-columns: 1fr;
  }

  .werkzeuge-page .tool-guide-item--alert span {
    justify-self: start;
  }

  .werkzeuge-page .tool-card {
    padding-top: 24px;
  }

  .werkzeuge-page .tool-details-summary {
    width: 100%;
    justify-content: space-between;
  }

  body.module-overview-page .overview-hero {
    padding-top: 92px;
  }

  body.module-overview-page .overview-lead,
  .werkzeuge-page .overview-lead {
    font-size: var(--text-base);
  }
}

@media (max-width: 900px) {
  .footer-inner--compact {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ══════════════════════════════════════════════════════════
   VISUAL POLISH PASS — Module Overview
   Extends the new overview language to /module/.
   ══════════════════════════════════════════════════════════ */

body.module-overview-page .overview-hero {
  padding-bottom: calc(var(--section-tight) - 4px);
  background:
    linear-gradient(180deg, var(--surface-hero-warm) 0%, var(--surface-sand-mist) 46%, var(--bg) 100%);
  border-bottom: 1px solid rgba(45,40,35,0.05);
}

body.module-overview-page .overview-hero::before {
  display: block;
  top: auto;
  right: -8%;
  bottom: -28%;
  width: 50%;
  height: 96%;
  background: radial-gradient(circle, rgba(221,210,191,0.82) 0%, rgba(221,210,191,0.18) 42%, transparent 74%);
  opacity: 1;
}

body.module-overview-page .overview-hero::after {
  display: block;
  top: calc(var(--nav-height) + 1rem);
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: auto;
  left: auto;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(45,40,35,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0));
  transform: rotate(12deg);
  opacity: 0.56;
}

body.module-overview-page .overview-lead {
  max-width: 58ch;
  line-height: 1.62;
}

body.module-overview-page .module-overview-hero-visual {
  border: 1px solid rgba(45,40,35,0.08);
  background: rgba(255,255,255,0.76);
  box-shadow: var(--shadow-atmosphere);
}

body.module-overview-page .overview-intro {
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

body.module-overview-page .overview-note {
  --overview-note-line: var(--amber);
  --overview-note-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,240,231,0.94));
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border-color: rgba(45,40,35,0.08);
  background: var(--overview-note-surface);
  box-shadow: var(--shadow-soft);
}

body.module-overview-page .overview-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--overview-note-line);
}

body.module-overview-page .overview-note--urgent {
  --overview-note-line: var(--alert);
  --overview-note-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,242,240,0.92));
}

body.module-overview-page .overview-note h2,
body.module-overview-page .overview-note p,
body.module-overview-page .overview-footer-note {
  line-height: 1.62;
}

body.module-overview-page .overview-note p + p {
  margin-top: 12px;
}

body.module-overview-page .overview-section {
  margin-top: calc(var(--section-standard) - 8px);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid rgba(45,40,35,0.08);
  border-radius: calc(var(--card-radius) + 12px);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), var(--surface-ink-mist) 100%);
  box-shadow: var(--shadow-soft);
}

body.module-overview-page .modules-grid {
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

body.module-overview-page .module-card {
  --module-tone-band: var(--teal-cta);
  --module-tone-surface: rgba(238,245,242,0.66);
  --module-tone-pill: var(--teal-subtle);
  --module-tone-text: var(--teal-text);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--card-padding) + 10px);
  border-left-width: 1px;
  border-color: rgba(45,40,35,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, var(--module-tone-surface) 18%, #ffffff 80%);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

body.module-overview-page .module-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: var(--module-tone-band);
}

body.module-overview-page .module-card:hover {
  border-color: rgba(45,40,35,0.12);
  box-shadow: var(--shadow-atmosphere);
  transform: translateY(-2px);
}

body.module-overview-page .module-card[data-accent="blue"] {
  --module-tone-band: var(--blue-phase);
  --module-tone-surface: rgba(238,243,248,0.9);
  --module-tone-pill: rgba(74,111,149,0.12);
  --module-tone-text: var(--blue-phase);
}

body.module-overview-page .module-card[data-accent="amber"] {
  --module-tone-band: var(--amber);
  --module-tone-surface: rgba(246,240,231,0.94);
  --module-tone-pill: rgba(244,208,120,0.28);
  --module-tone-text: #8f5612;
}

body.module-overview-page .module-card[data-accent="purple"] {
  --module-tone-band: var(--purple-dark);
  --module-tone-surface: rgba(241,238,247,0.94);
  --module-tone-pill: rgba(152,133,188,0.18);
  --module-tone-text: var(--purple-dark);
}

body.module-overview-page .module-card[data-accent="green"] {
  --module-tone-band: var(--phase-green);
  --module-tone-surface: rgba(168,213,203,0.2);
  --module-tone-pill: rgba(168,213,203,0.28);
  --module-tone-text: var(--phase-green);
}

body.module-overview-page .module-number {
  color: var(--module-tone-text);
  background: var(--module-tone-pill);
}

body.module-overview-page .module-card p {
  line-height: 1.62;
}

body.module-overview-page .module-card-footer {
  border-top-color: rgba(45,40,35,0.08);
}

@media (max-width: 900px) {
  body.module-overview-page .overview-hero::after {
    display: none;
  }
}

@media (max-width: 600px) {
  body.module-overview-page .overview-hero {
    padding-bottom: 24px;
  }

  body.module-overview-page .overview-intro {
    gap: 14px;
    margin-top: var(--space-lg);
  }

  body.module-overview-page .overview-note,
  body.module-overview-page .overview-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}