/* Dimi_2 v2 (D3): Tokens, Typografie, Kopfleiste und Hero aus outputs/dimi2-v2/style.css.
   Überschreibt nur Variablen und die Regeln von Kopfleiste und Hero des Elternthemes; übrige Abschnitte folgen in D4. */
/* Schrift: Poppins (aus der Firmenpräsentation), lokal ausgeliefert, Lizenz OFL (fonts/OFL.txt). Kein Google-Fonts-Aufruf. */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"); }
:root {
  --paper: #F5F2EB; --mist: #EBE6DA; --ink: #12213A; --muted: #5A6470; --line: color-mix(in srgb, var(--navy-deep) 16%, transparent);
  --on-night: #F5F2EB; --on-night-muted: #AEB9C6;
  --sand: #C8B48A; --ocker: #AB7115; --petrol: #0B4666; --navy-deep: #091A2C; --ocker-ink: #7A500C;
  --serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Name bleibt, Überschriften nutzen jetzt Poppins */
  --navy: var(--navy-deep); --night: var(--navy-deep); /* Eltern-Theme-Werte (#0E2841) auf Token Navy-Deep abbilden */
  --white: #FFFFFF; --sand-hover: #D8C69F; --error: #8A2A1A; /* abgeleitet: Weiß, Sand aufgehellt für Hover, Fehlerton nur für Formularstatus */
  --wrap: 1200px; --radius: 20px;
}
body.c, body.c :where(button, input, select, textarea) { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Poppins ist breiter als die frühere Schrift: auf sehr schmalen Anzeigen lange Wörter umbrechen statt die Seite zu verbreitern. */
@media (max-width: 400px) { body.cd :where(h1, h2, h3, p, li, cite, blockquote, dd, dt, b, strong, a) { overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; } body.cd :where(h1, h2, h3) { hyphens: manual; } } /* Überschriften nicht silbenweise zerhacken */
::selection { background: rgba(200,180,138,.45); }
:focus-visible { outline-color: var(--ocker); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; }

/* Kopfleiste: Papier, halbtransparent */
body.c .nav { background: rgba(245,242,235,.86); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); }
body.cd .nav .wrap { height: 60px; gap: 24px; }
body.c .nav .brand, body.c .nav .links a, body.c .nav .menu summary, body.c .nav .nav-mail { color: var(--ink); }
body.c .nav .brand { font-family: var(--serif); font-weight: 400; font-size: 20px; }
body.c .nav .brand img { background: none; padding: 0; border-radius: 0; width: 40px; height: auto; }
/* Mobil: Wortmarke einzeilig, Menü bündig mit dem Seitenrand (fixed innerhalb der gefilterten Kopfleiste, damit die Scrollbar nicht verschiebt), CTA-Eintrag in Palette */
@media (max-width: 833px) {
  body.cd .nav .wrap { gap: 12px; }
  body.c .nav .brand { white-space: nowrap; font-size: 18px; }
  body.c .menu ul { position: fixed; left: auto; right: 0; top: 60px; width: 100%; max-width: 390px; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; }
}
body.c .menu li.cta a { color: var(--ocker-ink); }
@media (max-width: 360px) { body.c .nav .brand { font-size: 17px; gap: 8px; } body.c .nav .brand img { width: 34px; } body.c .nav-mail { display: none; } }
body.c .nav:has(.menu[open]) { z-index: 70; } /* offenes Menü über dem Einwilligungsbanner (z-index 60), sonst Menüpunkte im Querformat verdeckt */
body.c .nav .links { gap: 20px; font-size: 15px; }
/* Tablet und Smartphone quer (834 bis 1023 px): Kopfleiste einzeilig halten */
@media (min-width: 834px) and (max-width: 1023px) { body.cd .nav .wrap { gap: 16px; } body.c .nav .brand { white-space: nowrap; font-size: 18px; } body.c .nav .links { gap: 8px; font-size: 14px; } body.c .nav .links a { padding-inline: 2px; } body.c .nav .cta-sm { white-space: nowrap; padding: 0 14px; font-size: 14px; } }
body.c .nav .links a { opacity: .82; padding: 14px 4px; }
body.c .nav .cta-sm { align-items: center; min-height: 44px; padding: 0 18px; font-size: 15px; background: var(--navy); color: var(--white); }
@media (min-width: 834px) { body.c .nav .cta-sm { display: inline-flex; } }
body.c .nav .cta-sm:hover { background: var(--petrol); }
body.c .nav :focus-visible { outline-color: var(--ocker); }

/* Hero: Text links, Datencluster (Three.js, sonst SVG) rechts bzw. darunter */
body.cd .hero-c { padding: 0; overflow: hidden; }
.hero-c .wrap { position: relative; display: grid; justify-items: start; align-content: center; gap: 28px; min-height: min(calc(100svh - 60px), 720px); padding-block: 40px 56px; }
.hero-c .wrap > * { margin: 0; }
.hero-c .lockup img { display: none; }
.hero-c .lockup p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; }
.hero-c .lockup p::before { content: ""; width: 34px; height: 1px; background: var(--sand); }
.hero-c .lockup b { display: inline; font-size: inherit; font-weight: 500; letter-spacing: 0; color: var(--on-night); white-space: nowrap; }
.hero-c .lockup span { display: inline; margin: 0; white-space: nowrap; }
.hero-c h1 { font-size: clamp(40px, 5.8vw, 84px); line-height: .98; letter-spacing: -.025em; max-width: none; }
.hero-c h1 em { font-style: normal; color: var(--sand); }
.hero-c .lead { max-width: 26em; }
.hero-c .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 12px 26px; background: var(--sand); color: var(--navy-deep); }
.hero-c .btn:hover { background: var(--sand-hover); }
.hero-c .btn-ghost { color: var(--sand); }
.hero-c :focus-visible { outline-color: var(--sand); }
/* SVG-Fallback (mobil, reduzierte Bewegung, ohne WebGL); mit Canvas ersetzt ihn .fx-hero */
.hero-c .wrap::after { content: ""; display: block; width: 100%; height: min(44vh, 420px); background: url(motiv-hero.svg) center / contain no-repeat; }
.fx-on .hero-c .wrap::after { display: none; }
.fx-hero { position: relative; width: 100%; height: min(44vh, 420px); pointer-events: none; }
@media (min-width: 1024px), (min-width: 768px) and (min-height: 700px) {
  .hero-c .wrap > :not(.fx-hero) { max-width: 66%; }
  .hero-c .wrap::after, .fx-hero { position: absolute; top: 0; bottom: 0; right: 22px; width: 34%; height: auto; max-width: none; max-height: 640px; margin-block: auto; }
}
@media (max-width: 833px) {
  body.cd .hero-c { padding: 0; }
  .hero-c .wrap { min-height: 0; padding-block: 40px 48px; }
}

/* Fußzeile: Papier mit Linie, wie im Prototyp */
footer { background: var(--paper); border-top: 1px solid var(--line); font-size: 14px; padding: 32px 0; }
footer p.h { font-family: var(--serif); font-weight: 400; font-size: 19px; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
footer .li { color: var(--ocker-ink, #7A500C); }
footer .li svg { fill: currentColor; }
footer .legal { align-items: center; }
footer li a { display: inline-block; min-width: 44px; }
/* Sehr schmal: Rechtslinks untereinander; die Trennpunkte (Textknoten) werden unsichtbar und ohne Höhe, damit keiner am Zeilenende hängt */
@media (max-width: 400px) {
  footer .legal span:last-child { display: flex; flex-direction: column; align-items: flex-start; visibility: hidden; line-height: 0; }
  footer .legal span:last-child a { visibility: visible; display: flex; align-items: center; min-height: 44px; line-height: 1.5; }
}
body.c .nav .nav-mail { flex: none; min-width: 44px; justify-content: center; }

/* FAQ: native details/summary, ohne Skript */
.faq { border-top: 1px solid var(--line); }
.faq-list { margin-top: 32px; border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.0625rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--ocker); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 20px; max-width: 46rem; color: var(--muted); }
.faq summary:focus-visible { outline: 2px solid var(--ocker); outline-offset: 2px; }

/* Phase-2-Korrekturen: Linkfarbe, Schatten (Konzept: nur Cookie-Banner), Mindestgröße 14 px */
body.c a.skip-link { color: var(--ink); }
body.c .fx-chapters a { color: var(--on-night); }
body.c .menu ul { box-shadow: none; border: 1px solid var(--line); }
body.c figcaption.wp-element-caption { font-size: 14px; }
:root { --link: var(--petrol); } /* Links auf Token statt WP-Preset #1F4FBF (Eltern-Theme base.css Z. 20) */
@media (min-width: 834px) and (max-width: 1023px) { body.c .nav .brand { margin-right: 8px; } } /* Marke und erster Link: mindestens 16 px (Gap) plus 8 px */
/* Dreierraster für Unterseiten mit drei Karten (umsetzung, projektleitung); unter 834 px gelten die Eltern-Regeln. */
@media (min-width: 834px) { .problems.problems-3, .gains.gains-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.cd:not(.home) .gains.gains-3 h3 { hyphens: manual; overflow-wrap: break-word; } /* "Technologieunabhängig" nicht trennen */