/* ==========================================================================
   Modernes Design des Architekturkompasses (Familie von aaron.de)
   Wird als letzte Stildatei geladen und überschreibt assets/style.css.
   Zurück zum alten Aussehen: die Zeile mit design.css aus den HTML-Dateien
   entfernen.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben ---------- */
:root {
  --bg: #f4f6fb;
  --surface: #fbfcfe;
  --surface-raised: #ffffff;
  --glas: rgba(255, 255, 255, .72);
  --ink: #121729;
  --muted: #5b647b;
  --line: #e1e5ee;
  --accent: #5b4cf0;
  --accent-soft: #eeecfe;
  --teal: #0a9a7c;
  --teal-soft: #e6f6f1;
  --coral: #d4543f;
  --coral-soft: #fdeeea;
  --gold: #a26a08;
  --gold-soft: #fdf3dd;
  --type-system: #0a9a7c;
  --type-pattern: #5b4cf0;
  --type-mechanism: #c4573f;
  --type-foundation: #a26a08;
  --type-practice: #2a6bd1;
  --verlauf: linear-gradient(110deg, #0a9a7c, #5b4cf0);
  --verlauf-text: linear-gradient(100deg, #0a9a7c 0%, #5b4cf0 55%, #8a3fd9 100%);
  --schimmer-o: .55;
  --shadow: 0 18px 40px -24px rgba(18, 23, 41, .28);
  --shadow-hover: 0 22px 46px -22px rgba(10, 154, 124, .42);
  --kopf-h: 4.4rem;
  --r: 14px;
  color-scheme: light;
}
/* Dunkler Modus: folgt dem Betriebssystem, solange niemand den Knopf mit Sonne und Mond benutzt.
   Der Knopf setzt data-theme="dark" oder "light" am html-Element (assets/thema.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090d18;
    --surface: #10162a;
    --surface-raised: #151c33;
    --glas: rgba(20, 26, 44, .66);
    --ink: #e8ebf4;
    --muted: #9aa4bc;
    --line: #242c45;
    --accent: #9b8dff;
    --accent-soft: #231f4a;
    --teal: #5ee6c8;
    --teal-soft: #0f2f2c;
    --coral: #ff8f78;
    --coral-soft: #3a1d1f;
    --gold: #f3c66f;
    --gold-soft: #33291a;
    --type-system: #5ee6c8;
    --type-pattern: #9b8dff;
    --type-mechanism: #ff8f78;
    --type-foundation: #f3c66f;
    --type-practice: #7fb0ff;
    --verlauf: linear-gradient(110deg, #3ccfae, #8b7cff);
    --verlauf-text: linear-gradient(100deg, #5ee6c8 0%, #9b8dff 55%, #d08bff 100%);
    --schimmer-o: 1;
    --shadow: 0 20px 44px -24px rgba(0, 0, 0, .7);
    --shadow-hover: 0 22px 50px -22px rgba(94, 230, 200, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #090d18;
  --surface: #10162a;
  --surface-raised: #151c33;
  --glas: rgba(20, 26, 44, .66);
  --ink: #e8ebf4;
  --muted: #9aa4bc;
  --line: #242c45;
  --accent: #9b8dff;
  --accent-soft: #231f4a;
  --teal: #5ee6c8;
  --teal-soft: #0f2f2c;
  --coral: #ff8f78;
  --coral-soft: #3a1d1f;
  --gold: #f3c66f;
  --gold-soft: #33291a;
  --type-system: #5ee6c8;
  --type-pattern: #9b8dff;
  --type-mechanism: #ff8f78;
  --type-foundation: #f3c66f;
  --type-practice: #7fb0ff;
  --verlauf: linear-gradient(110deg, #3ccfae, #8b7cff);
  --verlauf-text: linear-gradient(100deg, #5ee6c8 0%, #9b8dff 55%, #d08bff 100%);
  --schimmer-o: 1;
  --shadow: 0 20px 44px -24px rgba(0, 0, 0, .7);
  --shadow-hover: 0 22px 50px -22px rgba(94, 230, 200, .35);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Grundlage und Hintergrund ---------- */
html { background: var(--bg); }
body { background: transparent; font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--teal) 30%, transparent); }
/* Weiche Farbflächen und ein Polarlicht-Band, fest hinter dem Inhalt */
body::before {
  content: ""; position: fixed; z-index: -1; inset: -20vh -20vw; pointer-events: none;
  opacity: var(--schimmer-o);
  background:
    radial-gradient(38vw 30vw at 12% 8%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
    radial-gradient(42vw 34vw at 88% 14%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    radial-gradient(60vw 18vw at 50% 92%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 75%),
    linear-gradient(170deg, transparent 38%, color-mix(in srgb, var(--teal) 7%, transparent) 50%, color-mix(in srgb, var(--accent) 7%, transparent) 58%, transparent 70%);
  animation: schimmer 38s ease-in-out infinite alternate;
}
@keyframes schimmer { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3vw, 2vh, 0) scale(1.06); } }
a { color: var(--accent); text-underline-offset: .18rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kopfzeile: schmal, mitlaufend, Milchglas ---------- */
.kopf {
  position: sticky; top: 0; z-index: 15;
  height: var(--kopf-h); padding: 0 clamp(1rem, 3vw, 2.5rem); gap: 1.2rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
}
.kopf-text { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; }
.kopf h1, .kopf .kopf-titel { font-size: 1.22rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.kopf .start-link, .kopf-titel a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); transition: text-shadow .4s ease; }
.kopf .start-link::before, .kopf-titel a::before {
  content: ""; flex: none; width: 1.55rem; height: 1.55rem; background: var(--verlauf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zm0 2a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zm4.6 3.9-2.7 6.5-6.5 2.7 2.7-6.5zM12 10.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zm0 2a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zm4.6 3.9-2.7 6.5-6.5 2.7 2.7-6.5zM12 10.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kopf .start-link:hover, .kopf-titel a:hover { color: var(--ink); text-shadow: 0 0 1px var(--teal), 0 0 3px var(--teal), 0 0 10px color-mix(in srgb, var(--teal) 35%, transparent); }
/* Untertitel unter dem Titel, bündig mit dem Text hinter dem Kompass-Zeichen */
.kopf-text > p:last-child { margin: 0 0 0 2.1rem; color: var(--muted); font-size: .8rem; line-height: 1.3; }

/* Bereiche Konzepte und Werkzeuge als Umschalter (Switch) */
.bereiche { gap: .2rem; padding: .25rem; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.bereiche button { min-height: 2.3rem; padding: .35rem 1rem; border-radius: 9px; color: var(--muted); font-size: .92rem; font-weight: 600; transition: color .2s, background .2s, box-shadow .2s; }
.bereiche button:hover { color: var(--ink); }
.bereiche button[aria-current="page"] { background: var(--surface-raised); color: var(--accent); box-shadow: 0 1px 2px rgba(18, 23, 41, .08), 0 4px 12px -6px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bereiche button[aria-current="page"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface-raised)); color: #fff; } }
:root[data-theme="dark"] .bereiche button[aria-current="page"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface-raised)); color: #fff; }
.person-link { background: color-mix(in srgb, var(--surface-raised) 60%, transparent); border-color: var(--line); transition: border-color .2s, box-shadow .2s; }
.person-link:hover { border-color: transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box; box-shadow: var(--shadow-hover); }
.person-link[aria-current="page"] { background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box; border-color: transparent; }
.sprachwahl select { border-radius: .55rem; }

/* Knopf hell/dunkel: im hellen Modus Sonne, im dunklen Modus Mond */
.thema-knopf { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--surface-raised) 60%, transparent); color: var(--ink); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.thema-knopf:hover { border-color: transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box; box-shadow: var(--shadow-hover); }
.thema-knopf svg { grid-area: 1 / 1; width: 1.2rem; height: 1.2rem; transition: opacity .3s, transform .4s; }
.thema-knopf .ikon-sonne { color: #e3a008; }
.thema-knopf .ikon-mond { color: var(--accent); opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .thema-knopf .ikon-sonne { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .thema-knopf .ikon-mond { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thema-knopf .ikon-sonne { opacity: 0; transform: rotate(60deg) scale(.6); }
  :root:not([data-theme="light"]) .thema-knopf .ikon-mond { opacity: 1; transform: none; }
}
.bereiche + .thema-knopf { margin-left: .2rem; }
.kopf-text + .thema-knopf { margin-left: auto; }
.thema-knopf + .person-link { margin-left: -.6rem; }

/* ---------- Seitenleiste ---------- */
.raster { min-height: calc(100dvh - var(--kopf-h)); }
.seite { top: var(--kopf-h); height: calc(100dvh - var(--kopf-h)); background: color-mix(in srgb, var(--surface) 62%, transparent); border-right-color: color-mix(in srgb, var(--line) 80%, transparent); padding-top: 1.5rem; }
.suchfeld label, .filter h2, .themen-titel { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
#suche, #wz-suche { border-radius: 12px; padding: .7rem .9rem .7rem 2.4rem; background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") .8rem center / 1.05rem no-repeat; box-shadow: 0 1px 2px rgba(18, 23, 41, .04); transition: border-color .2s, box-shadow .2s; }
#suche:focus, #wz-suche:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.typ-chip { border-radius: 10px; padding: .5rem .7rem; transition: border-color .15s, background .15s, transform .15s; }
.typ-chip[data-type] { border-left-width: 3px; background: var(--surface-raised); }
.typ-chip:hover:not(:disabled) { transform: translateX(2px); }
.typ-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--type-color, var(--accent)) 12%, var(--surface-raised)); }
.typ-titel { font-weight: 620; }
.thema summary { font-weight: 620; font-size: .95rem; padding: .6rem .25rem; }
.thema summary:hover { color: var(--accent); }
.liste a { border-radius: 8px; }
.liste .en { font-weight: 600; }
.liste a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------- Startseite ---------- */
.start-hero {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 22px;
  background: var(--glas); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.start-hero::before { width: clamp(18rem, 32vw, 30rem); right: -8%; top: -55%; border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%); filter: blur(10px); }
.start-hero::after { content: ""; position: absolute; z-index: -1; width: clamp(14rem, 26vw, 24rem); aspect-ratio: 1; left: -6%; bottom: -60%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 20%, transparent), transparent 65%); filter: blur(10px); pointer-events: none; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem .3rem .6rem; border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--teal) 9%, transparent); color: var(--teal); font-size: .72rem; letter-spacing: .08em; font-weight: 700; }
.eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 60%, transparent); animation: puls 2.2s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .45rem transparent; } }
.start h2 { font-weight: 780; letter-spacing: -.04em; background: var(--verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.start-text { max-width: none; color: var(--ink); }
.wolke { border-color: color-mix(in srgb, var(--line) 80%, transparent); border-radius: 22px; background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wolke h2 { font-weight: 720; letter-spacing: -.02em; }
.wolke-gruppe h3 { color: var(--teal); font-weight: 700; }
.wolke-begriff { border-radius: 10px; background: color-mix(in srgb, var(--surface-raised) 85%, transparent); font-weight: 500; transition: border-color .15s, background .15s, transform .15s; }
.wolke-label { font-weight: 560; }
/* Anliegen: gleicher Verlaufsrahmen wie die Kacheln auf „Über mich“, beim Überfahren und solange ausgewählt */
.wolke-begriff { transition: transform .2s, box-shadow .2s, border-color .2s; }
.wolke-begriff:hover:not(:disabled) { transform: translateY(-3px); border-color: transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box; box-shadow: var(--shadow-hover); }
.wolke-begriff[aria-pressed="true"], .wolke-begriff[aria-pressed="true"]:hover:not(:disabled) { border-color: transparent; background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--verlauf) border-box; box-shadow: var(--shadow-hover); }

/* ---------- Ergebnisse und Karten ---------- */
.ergebnisse-kopf h2, .detail h2 { font-weight: 760; letter-spacing: -.035em; }
.ergebnis-karte {
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 18px;
  background: linear-gradient(var(--glas), var(--glas)) padding-box, linear-gradient(var(--line), var(--line)) border-box;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(18, 23, 41, .04);
  transition: transform .22s ease, box-shadow .22s ease;
}
.ergebnis-karte:hover, .ergebnis-karte:focus-within {
  transform: translateY(-4px); border-color: transparent;
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box;
  box-shadow: var(--shadow-hover);
}
.ergebnis-karte h3 { font-weight: 700; }
.ergebnis-typ { font-weight: 650; }
.ergebnis-aktion { color: var(--teal); font-weight: 650; }
.ergebnis-karte:hover .ergebnis-aktion { color: var(--accent); }

/* ---------- Konzeptseite ---------- */
.detail h2 { font-size: clamp(1.9rem, 3.1vw, 3.2rem); line-height: 1.08; }
.kategorie-pille, .typ-pille { font-weight: 650; letter-spacing: .01em; }
.leitgedanke {
  border: 1px solid color-mix(in srgb, var(--topic) 22%, var(--line)); border-radius: 20px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--topic) 9%, var(--surface-raised)), var(--surface-raised) 55%);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.leitgedanke::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--topic), color-mix(in srgb, var(--topic) 10%, transparent)); }
.leitgedanke h3 { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.leitgedanke h3::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--topic); }
.kernbild img, .blatt { border-radius: 14px; }
.blatt { border-color: color-mix(in srgb, var(--line) 85%, transparent); box-shadow: 0 1px 2px rgba(18, 23, 41, .04); }
.detail-toc { top: calc(var(--kopf-h) + 1rem); max-height: calc(100dvh - var(--kopf-h) - 2rem); border-left-color: color-mix(in srgb, var(--line) 85%, transparent); }
.detail-toc button { border-radius: 6px; }
.abschnitt { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
.abschnitt h3 { font-weight: 700; letter-spacing: -.02em; }
.abschnitt.gut, .abschnitt.schlecht { border-radius: 18px; }
.abschnitt.gut { background: linear-gradient(140deg, var(--teal-soft), color-mix(in srgb, var(--teal-soft) 30%, var(--surface-raised))); }
.abschnitt.schlecht { background: linear-gradient(140deg, var(--coral-soft), color-mix(in srgb, var(--coral-soft) 30%, var(--surface-raised))); }
.abschnitt code, .unterseite code { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.adr-knopf, .detail-ende button {
  border: 0; border-radius: 999px; padding: .55rem 1.15rem;
  background: var(--verlauf); background-size: 160% 100%; color: #fff; font-weight: 650;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: background-position .4s ease, transform .2s ease, box-shadow .2s;
}
.adr-knopf:hover, .detail-ende button:hover { background: var(--verlauf); background-size: 160% 100%; background-position: 100% 0; color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-hover); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .adr-knopf, :root:not([data-theme="light"]) .adr-knopf:hover, :root:not([data-theme="light"]) .detail-ende button, :root:not([data-theme="light"]) .detail-ende button:hover { color: #090d18; } }
:root[data-theme="dark"] .adr-knopf, :root[data-theme="dark"] .adr-knopf:hover, :root[data-theme="dark"] .detail-ende button, :root[data-theme="dark"] .detail-ende button:hover { color: #090d18; }
.adr-entwurf, .wz-zeile, .wz-fundstellen li { border-radius: 14px; }

/* ---------- Werkzeuge ---------- */
.wz-zeile { background: var(--glas); transition: border-color .2s, box-shadow .2s, transform .2s; }
.wz-zeile:hover { transform: translateY(-2px); border-color: transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box; box-shadow: var(--shadow-hover); }
.wz-buchstaben button { border-radius: 9px; }

/* ---------- Sanftes Einblenden beim Wechsel der Ansicht ---------- */
.detail > * { animation: einblenden .38s ease both; }
.ergebnis-karte { animation: einblenden .45s ease both; }
.ergebnis-karte:nth-child(2) { animation-delay: .03s; }
.ergebnis-karte:nth-child(3) { animation-delay: .06s; }
.ergebnis-karte:nth-child(4) { animation-delay: .09s; }
.ergebnis-karte:nth-child(5) { animation-delay: .12s; }
.ergebnis-karte:nth-child(n+6) { animation-delay: .15s; }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Fußzeile und Unterseiten ---------- */
.fuss { background: color-mix(in srgb, var(--bg) 70%, transparent); border-top-color: color-mix(in srgb, var(--line) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.unterseite h1 { font-weight: 760; letter-spacing: -.035em; }
.unterseite h2 { font-weight: 700; }
.kasten { border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line)); border-left-width: 1px; border-radius: 16px; background: linear-gradient(140deg, var(--teal-soft), var(--surface-raised) 60%); }
.ich img { border: 2px solid transparent; background: var(--verlauf) border-box; border-radius: 20px; }
.karte { border-radius: 16px; background: var(--glas); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s, box-shadow .2s; }
.karte:hover { transform: translateY(-3px); border-color: transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--verlauf) border-box; box-shadow: var(--shadow-hover); }
.karte svg { color: var(--teal); }
.karte h3 { font-weight: 680; }

/* ---------- Handy und Tablet ---------- */
@media (max-width: 900px) {
  .kopf { position: relative; height: auto; padding: .6rem 1rem; }
  .bereiche + .thema-knopf { margin-left: auto; }
  .seite { top: 0; height: 100dvh; background: var(--surface); }
  .detail-toc { top: auto; max-height: none; }
  .abschnitt { scroll-margin-top: 1rem; }
  .nav-toggle { border-radius: 10px; background: var(--surface-raised); }
}

/* Sehr schmale Handys: Kompass-Zeichen weglassen, damit Titel, Knopf und Porträt in eine Zeile passen */
@media (max-width: 400px) {
  .kopf .start-link::before, .kopf-titel a::before { display: none; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .eyebrow::before, .detail > *, .ergebnis-karte { animation: none !important; }
}
.start .wolke h2 { background: none; color: var(--ink); }
@media (max-width: 600px) {
  .kopf { gap: .6rem; }
  .kopf-text { flex: 1; min-width: 0; }
  .kopf h1, .kopf .kopf-titel { font-size: .98rem; white-space: nowrap; }
  .thema-knopf { width: 2.35rem; height: 2.35rem; }
  .thema-knopf + .person-link { margin-left: 0; }
  .kopf .start-link::before, .kopf-titel a::before { width: 1.25rem; height: 1.25rem; }
  .kopf .start-link, .kopf-titel a { gap: .4rem; }
}