/* ============================================================
KLAR / FREUNDLICH / BUSINESS
Weiß, Blau-Schwarz, eine Akzentfarbe. Große, kräftige Sans-Überschriften,
weiche Karten, Pillen-Buttons, flache Abschnittskanten.
Ausgelegt für 19 Sprachen: Latein, Kyrillisch, Griechisch, Devanagari
und andere indische Schriften, Hangul, Arabisch/Hebräisch (RTL).
============================================================ */
/* ---------- 1 TOKENS ---------- */
:root {
--paper: #ffffff;
--tint: #eef2f8; /* Abschnitte, Flächen */
--tint-soft: #f6f8fb;
--ink: #0e1d38; /* Blau-Schwarz: Überschriften, Buttons */
--ink-soft: #33435c; /* Fließtext */
--muted: #5a6880; /* Hinweise (Kontrast ca. 5.6:1 auf Weiß) */
--rule: #dbe1ea;
--accent: #1f4e96; /* Links, Fokus, Auswahl */
--accent-tint: #e6edf8;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", "Nirmala UI", "Noto Sans Devanagari", "Noto Sans Bengali",
"Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Arabic",
"Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
--radius: 999px; /* Buttons, Tags */
--radius-card: 16px;
--radius-sm: 12px;
--shadow-card: 0 12px 32px rgba(14, 29, 56, 0.07);
--cut: 72px; /* Höhe der Abschnittskante */
--edge: polygon(0 calc(var(--cut) * 0.55), 30% var(--cut), 64% 0, 100% calc(var(--cut) * 0.7), 100% 100%, 0 100%);
/* Sprachabhängig (siehe Abschnitt 2) */
--track: -0.02em; /* Buchstabenabstand Überschriften */
--lh-head: 1.15; /* Zeilenhöhe Überschriften */
/* Aliase: bestehendes HTML und Inline-Styles bleiben funktionsfähig */
--primary-bg: var(--tint);
--section-bg: var(--paper);
--text-main: var(--ink-soft);
--text-muted: var(--muted);
--brand-dark: var(--ink);
--brand-accent: var(--accent);
--border-color: var(--rule);
--text-dark: var(--ink);
--text-body: var(--ink-soft);
--border-light: var(--rule);
--bg-surface: var(--paper);
--bg-body: var(--paper);
--accent-red: var(--accent);
--rule-strong: var(--ink);
--paper-alt: var(--tint);
}
/* ---------- 2. SPRACHEN & SCHRIFTSYSTEME ---------- */
/* Buchstabenabstand zerstört Ligaturen bzw. Verbindungen: bei diesen Schriften 0 */
:lang(ar), :lang(he), :lang(fa), :lang(ur),
:lang(hi), :lang(bn), :lang(ta), :lang(te), :lang(mr), :lang(gu), :lang(kn), :lang(ml), :lang(pa),
:lang(th), :lang(ko), :lang(ja), :lang(zh) { --track: 0; }
/* Höhere Zeilen für Schriften mit Ober-/Unterlängen und Vokalzeichen */
:lang(hi), :lang(bn), :lang(ta), :lang(te), :lang(mr), :lang(gu), :lang(kn), :lang(ml), :lang(pa),
:lang(th), :lang(ar), :lang(fa), :lang(ur) { --lh-head: 1.4; }
:lang(hi) body, :lang(bn) body, :lang(ta) body, :lang(te) body, :lang(mr) body,
:lang(gu) body, :lang(kn) body, :lang(ml) body, :lang(pa) body, :lang(th) body,
:lang(ar) body, :lang(fa) body, :lang(ur) body { line-height: 1.8; }
/* Koreanisch: nicht mitten im Wort umbrechen */
:lang(ko) { word-break: keep-all; }
/* Keine Silbentrennung, wo sie nicht existiert */
:lang(ko), :lang(ja), :lang(zh), :lang(th), :lang(ar), :lang(he), :lang(fa), :lang(ur),
:lang(hi), :lang(bn), :lang(ta), :lang(te), :lang(mr), :lang(gu), :lang(kn), :lang(ml), :lang(pa) {
hyphens: manual;
}
/* ---------- 3. BASIS ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
background: var(--paper);
color: var(--ink-soft);
line-height: 1.65;
font-size: 1.0625rem;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
color: var(--ink);
font-weight: 600;
line-height: var(--lh-head);
letter-spacing: var(--track);
overflow-wrap: break-word;
hyphens: auto; /* braucht lang="…" am */
text-wrap: balance;
}
h1 { font-weight: 700; }
p, li { hyphens: manual; text-wrap: pretty; }
a { color: var(--accent); }
::selection { background: var(--ink); color: #fff; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.btn-premium:focus-visible,
.btn-action:focus-visible,
.btn-restart:focus-visible,
.likert-btn:focus-visible,
.answer-text-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
}
button { font-family: inherit; touch-action: manipulation; }
/* ---------- 4. NAVIGATION ---------- */
header {
background: var(--paper);
padding: 1.2rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--rule);
position: sticky;
top: 0;
z-index: 100;
}
.logo { color: var(--ink); font-weight: 700; font-size: 1.3rem; text-decoration: none; letter-spacing: var(--track); }
nav a { position: relative; color: var(--ink-soft); text-decoration: none; margin-inline-start: 1.75rem; font-size: 0.95rem; font-weight: 500; }
nav a:hover { color: var(--ink); }
/* Aktiver Menüpunkt: Balken am oberen Rand */
nav a.active::before,
nav a[aria-current="page"]::before {
content: "";
position: absolute;
inset-inline: 0;
top: -1.2rem;
height: 3px;
background: var(--accent);
}
/* Header-Button: überschreibt Inline-Styles (Großbuchstaben, Spacing), Pillenform */
header nav button, header nav .btn {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 600 !important;
border-radius: 999px !important;
}
/* ---------- 5. LAYOUT & ABSCHNITTSKANTEN ---------- */
.section { padding: 100px 5%; background: var(--paper); }
.container { max-width: 1200px; margin: 0 auto; }
/* Getönter Abschnitt mit flacher Spitze oben (nur Form, keine Dekoration) */
.section.alt {
background: var(--tint);
padding-top: calc(88px + var(--cut)); /* kein negativer Rand: nichts wird überdeckt */
clip-path: var(--edge);
}
/* ---------- 6. HERO ---------- */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.badge {
display: inline-block;
color: var(--accent);
background: var(--accent-tint);
padding: 6px 14px;
border-radius: var(--radius);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); margin-bottom: 24px; line-height: 1.18; letter-spacing: -0.015em; max-width: 18em; }
.hero-subtitle { font-size: 1.2rem; font-weight: 400; color: var(--muted); margin-bottom: 30px; line-height: 1.65; max-width: 56ch; }
.hero-features { list-style: none; margin-bottom: 36px; }
.hero-features li {
margin-bottom: 12px;
font-size: 1rem;
font-weight: 500;
color: var(--ink);
display: flex;
align-items: flex-start;
gap: 12px;
}
.hero-features li::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
/* Hero-Grafik: fünf feine Achsen (Big Five) auf getönter Fläche */
.hero-visual {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 24px;
background-color: var(--tint);
background-image: repeating-linear-gradient(
to bottom,
transparent 0, transparent calc(20% - 1px),
#c9d3e2 calc(20% - 1px), #c9d3e2 20%
);
background-origin: content-box;
padding: 10% 8%;
}
/* ---------- 7. BUTTONS (Pillen) ---------- */
.btn,
.btn-premium {
background: var(--ink);
color: #fff;
border: 1px solid var(--ink);
padding: 16px 34px;
font-size: 1.05rem;
font-weight: 600;
border-radius: var(--radius);
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover,
.btn-premium:hover { background: var(--accent); border-color: var(--accent); }
.btn-premium { width: 100%; max-width: 380px; padding: 18px 40px; }
.btn-action {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 26px;
font-size: 1rem;
border-radius: var(--radius);
cursor: pointer;
font-weight: 600;
transition: background-color 0.15s, border-color 0.15s;
}
.btn-action.primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-action.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-action.secondary { background: var(--tint); color: var(--ink); border: 1px solid transparent; }
.btn-action.secondary:hover { background: var(--accent-tint); }
.btn-action.outline { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); }
.btn-action.outline:hover { border-color: var(--ink); }
.btn-restart {
background: var(--paper);
color: var(--ink);
border: 1px solid var(--rule);
padding: 14px 30px;
font-size: 1rem;
border-radius: var(--radius);
cursor: pointer;
font-weight: 600;
display: inline-block;
transition: border-color 0.15s;
}
.btn-restart:hover { border-color: var(--ink); }
/* ---------- 8. TRUST BAR ---------- */
.trust-bar { border-bottom: 1px solid var(--rule); padding: 20px 5%; background: var(--paper); }
.trust-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.trust-content img { filter: grayscale(1) opacity(0.6); }
/* ---------- 9. INHALTS-GRIDS ---------- */
.section-header { text-align: center; margin: 0 auto 56px; max-width: 720px; }
.section-header h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 16px; }
.section-header p { font-size: 1.15rem; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.feature-card { background: var(--paper); padding: 30px 28px 32px; border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: none; }
.feature-icon {
width: auto;
height: auto;
background: none;
color: var(--accent);
display: flex;
align-items: center;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-icon svg,
.feature-icon svg * { stroke-width: 1.5; }
.feature-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feature-card p { font-size: 1rem; color: var(--muted); }
.target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.target-card { padding: 32px 30px; background: var(--tint); border-radius: var(--radius-card); }
.target-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.target-card p { font-size: 1rem; color: var(--muted); }
/* ---------- 10. FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); padding: 26px 0; }
.faq-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
.faq-item p { font-size: 1rem; color: var(--ink-soft); }
/* Aufklappbar: Frage
Antwort
…
…
…
--pos: 0 bis 100, funktioniert auch in RTL */
.factor-scale { display: grid; grid-template-columns: 1fr auto minmax(120px, 2fr) auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.factor-name { font-weight: 600; color: var(--ink); font-size: 1rem; }
.factor-pole { font-size: 0.88rem; color: var(--muted); }
.factor-track { position: relative; height: 6px; background: var(--tint); border-radius: 6px; }
.factor-track > b,
.factor-marker {
position: absolute;
top: 50%;
inset-inline-start: calc(var(--pos, 50) * 1%);
width: 18px;
height: 18px;
background: var(--ink);
border: 3px solid var(--paper);
border-radius: 50%;
transform: translate(-50%, -50%);
}
[dir="rtl"] .factor-track > b,
[dir="rtl"] .factor-marker { transform: translate(50%, -50%); }
/* Fortschritt in 5 Abschnitten (Big Five): ×5
*/
.progress-segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 40px; }
.progress-segments span { height: 8px; border-radius: 8px; background: var(--tint); }
.progress-segments span.done { background: var(--ink); }
/* ---------- 14. PROFILE-SEITE ---------- */
.profile-section { margin-bottom: 90px; padding-top: 36px; border-top: 1px solid var(--rule); }
.profile-section h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 16px; }
.trait-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
.trait-tags .tag { font-size: 0.88rem; color: var(--ink-soft); background: var(--tint); padding: 6px 14px; border-radius: var(--radius); font-weight: 500; }
.profile-description { font-size: 1.2rem; color: var(--ink); line-height: 1.7; margin-bottom: 40px; max-width: 700px; }
.mutation-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; border-top: 1px solid var(--rule); padding-top: 36px; }
.mutation-grid::before { content: ""; position: absolute; top: 36px; bottom: 0; inset-inline-start: 50%; width: 1px; background: var(--rule); }
.mutation-box { background: transparent; }
.mutation-box h4 { font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; }
.mutation-box p { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.7; }
.mutation-box strong { color: var(--ink); font-weight: 700; }
/* ---------- 14b. PROFILSEITE: FIGUREN (reine CSS, sprachunabhängig, kein HTML nötig) ---------- */
/* Zuordnung über die Reihenfolge: 4 Abschnitte = 4 Basis-Typen (Dreieck, Quadrat, Sechseck, Kreis),
4 Kästen je Abschnitt = 4 Ängste (voll, Umriss, halb, schraffiert). Gleiche Figuren wie im Hero. */
/* Banner mit allen vier Figuren unter dem Seitentitel */
.editorial-header:has(~ .profile-section)::after {
content: "";
display: block;
aspect-ratio: 1000 / 190;
margin-top: 40px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 190'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='1000' height='190' rx='18'/%3E%3C/clipPath%3E%3Cg id='tri'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-34,0 34,0 0,-84'/%3E%3C/g%3E%3Cg id='sq'%3E%3Ccircle cy='-104' r='15'/%3E%3Crect x='-30' y='-82' width='60' height='82' rx='6'/%3E%3C/g%3E%3Cg id='hex'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-20,-84 20,-84 40,-42 20,0 -20,0 -40,-42'/%3E%3C/g%3E%3Cg id='cir'%3E%3Ccircle cy='-104' r='15'/%3E%3Ccircle cy='-40' r='40'/%3E%3C/g%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='1000' height='190' fill='%23eef2f8'/%3E%3Cg fill='%23e6ecf5'%3E%3Cpolygon points='-20,140 -20,35 100,29 100,140'/%3E%3Cpolygon points='100,140 100,35 220,29 220,140'/%3E%3Cpolygon points='220,140 220,54 340,60 340,140'/%3E%3Cpolygon points='340,140 340,35 480,29 480,140'/%3E%3Cpolygon points='480,140 480,70 620,76 620,140'/%3E%3Cpolygon points='620,140 620,35 720,41 720,140'/%3E%3Cpolygon points='720,140 720,54 840,48 840,140'/%3E%3Cpolygon points='840,140 840,70 960,76 960,140'/%3E%3Cpolygon points='960,140 960,35 1060,29 1060,140'/%3E%3C/g%3E%3Cg fill='%23dde5f0'%3E%3Cpolygon points='-20,140 -20,87 60,81 60,140'/%3E%3Cpolygon points='60,140 60,73 140,79 140,140'/%3E%3Cpolygon points='162,140 162,87 242,81 242,140'/%3E%3Cpolygon points='242,140 242,101 342,107 342,140'/%3E%3Cpolygon points='342,140 342,73 402,79 402,140'/%3E%3Cpolygon points='402,140 402,73 482,67 482,140'/%3E%3Cpolygon points='482,140 482,101 582,107 582,140'/%3E%3Cpolygon points='592,140 592,101 692,95 692,140'/%3E%3Cpolygon points='714,140 714,73 794,79 794,140'/%3E%3Cpolygon points='794,140 794,73 894,67 894,140'/%3E%3Cpolygon points='894,140 894,101 954,95 954,140'/%3E%3Cpolygon points='954,140 954,87 1034,81 1034,140'/%3E%3C/g%3E%3Crect y='140' width='1000' height='50' fill='%23d0dae8'/%3E%3Crect y='140' width='1000' height='1.2' fill='%23bfcbdd'/%3E%3Cellipse cx='290' cy='142' rx='32' ry='3.9' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.2'%3E%3Cuse href='%23tri' transform='translate(290 140) skewX(50) scale(0.842 -0.388)' fill='%230e1d38'/%3E%3C/g%3E%3Cellipse cx='430' cy='142' rx='28' ry='3.9' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.2'%3E%3Cuse href='%23sq' transform='translate(430 140) skewX(54) scale(0.749 -0.374)' fill='%230e1d38'/%3E%3C/g%3E%3Cellipse cx='570' cy='142' rx='30' ry='3.9' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.2'%3E%3Cuse href='%23hex' transform='translate(570 140) skewX(46) scale(0.796 -0.366)' fill='%230e1d38'/%3E%3C/g%3E%3Cellipse cx='710' cy='142' rx='27' ry='3.9' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.34'%3E%3Cuse href='%23cir' transform='translate(710 140) skewX(62) scale(0.702 -0.386)' fill='%230e1d38'/%3E%3C/g%3E%3Cuse href='%23tri' transform='translate(290 140) scale(0.842)' fill='%230e1d38'/%3E%3Cuse href='%23sq' transform='translate(430 140) scale(0.749)' fill='%231f4e96'/%3E%3Cuse href='%23hex' transform='translate(570 140) scale(0.796)' fill='%234a74ad'/%3E%3Cuse href='%23cir' transform='translate(710 140) scale(0.702)' fill='%237d96ba'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Karte pro Basis-Typ, umflossen vom Text */
.profile-section { display: flow-root; }
.profile-section::before {
content: "";
float: right;
float: inline-end;
width: 240px;
height: 140px;
margin-inline-start: 32px;
margin-bottom: 16px;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.profile-section .mutation-grid { clear: both; }
.profile-section:nth-of-type(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='240' height='140' rx='14'/%3E%3C/clipPath%3E%3Cg id='tri'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-34,0 34,0 0,-84'/%3E%3C/g%3E%3Cg id='sq'%3E%3Ccircle cy='-104' r='15'/%3E%3Crect x='-30' y='-82' width='60' height='82' rx='6'/%3E%3C/g%3E%3Cg id='hex'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-20,-84 20,-84 40,-42 20,0 -20,0 -40,-42'/%3E%3C/g%3E%3Cg id='cir'%3E%3Ccircle cy='-104' r='15'/%3E%3Ccircle cy='-40' r='40'/%3E%3C/g%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='240' height='140' fill='%23eef2f8'/%3E%3Cg fill='%23e6ecf5'%3E%3Cpolygon points='-20,104 -20,26 13,20 13,104'/%3E%3Cpolygon points='13,104 13,26 46,20 46,104'/%3E%3Cpolygon points='46,104 46,52 79,46 79,104'/%3E%3Cpolygon points='79,104 79,52 107,46 107,104'/%3E%3Cpolygon points='107,104 107,40 135,46 135,104'/%3E%3Cpolygon points='135,104 135,52 159,58 159,104'/%3E%3Cpolygon points='159,104 159,40 187,34 187,104'/%3E%3Cpolygon points='187,104 187,52 215,46 215,104'/%3E%3Cpolygon points='215,104 215,52 239,46 239,104'/%3E%3Cpolygon points='239,104 239,40 263,46 263,104'/%3E%3Cpolygon points='263,104 263,40 296,34 296,104'/%3E%3C/g%3E%3Cg fill='%23dde5f0'%3E%3Cpolygon points='-20,104 -20,65 -6,71 -6,104'/%3E%3Cpolygon points='16,104 16,65 35,59 35,104'/%3E%3Cpolygon points='45,104 45,75 69,69 69,104'/%3E%3Cpolygon points='69,104 69,65 83,71 83,104'/%3E%3Cpolygon points='83,104 83,75 97,69 97,104'/%3E%3Cpolygon points='119,104 119,65 133,71 133,104'/%3E%3Cpolygon points='155,104 155,75 174,81 174,104'/%3E%3Cpolygon points='196,104 196,55 215,49 215,104'/%3E%3Cpolygon points='237,104 237,75 256,69 256,104'/%3E%3Cpolygon points='278,104 278,75 292,69 292,104'/%3E%3C/g%3E%3Crect y='104' width='240' height='36' fill='%23d0dae8'/%3E%3Crect y='104' width='240' height='1.2' fill='%23bfcbdd'/%3E%3Cellipse cx='92' cy='106' rx='22' ry='2.7' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.2'%3E%3Cuse href='%23tri' transform='translate(92 104) skewX(50) scale(0.583 -0.268)' fill='%230e1d38'/%3E%3C/g%3E%3Cuse href='%23tri' transform='translate(92 104) scale(0.583)' fill='%230e1d38'/%3E%3C/g%3E%3C/svg%3E"); }
.profile-section:nth-of-type(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='240' height='140' rx='14'/%3E%3C/clipPath%3E%3Cg id='tri'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-34,0 34,0 0,-84'/%3E%3C/g%3E%3Cg id='sq'%3E%3Ccircle cy='-104' r='15'/%3E%3Crect x='-30' y='-82' width='60' height='82' rx='6'/%3E%3C/g%3E%3Cg id='hex'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-20,-84 20,-84 40,-42 20,0 -20,0 -40,-42'/%3E%3C/g%3E%3Cg id='cir'%3E%3Ccircle cy='-104' r='15'/%3E%3Ccircle cy='-40' r='40'/%3E%3C/g%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='240' height='140' fill='%23eef2f8'/%3E%3Cg fill='%23e6ecf5'%3E%3Cpolygon points='-20,104 -20,40 4,46 4,104'/%3E%3Cpolygon points='4,104 4,52 32,58 32,104'/%3E%3Cpolygon points='32,104 32,26 65,20 65,104'/%3E%3Cpolygon points='65,104 65,40 89,46 89,104'/%3E%3Cpolygon points='89,104 89,52 113,46 113,104'/%3E%3Cpolygon points='113,104 113,26 141,32 141,104'/%3E%3Cpolygon points='141,104 141,40 165,46 165,104'/%3E%3Cpolygon points='165,104 165,40 198,34 198,104'/%3E%3Cpolygon points='198,104 198,52 231,46 231,104'/%3E%3Cpolygon points='231,104 231,52 259,58 259,104'/%3E%3Cpolygon points='259,104 259,52 287,46 287,104'/%3E%3C/g%3E%3Cg fill='%23dde5f0'%3E%3Cpolygon points='-20,104 -20,75 -6,69 -6,104'/%3E%3Cpolygon points='16,104 16,75 35,69 35,104'/%3E%3Cpolygon points='57,104 57,65 81,59 81,104'/%3E%3Cpolygon points='81,104 81,75 100,81 100,104'/%3E%3Cpolygon points='122,104 122,55 136,61 136,104'/%3E%3Cpolygon points='158,104 158,55 172,49 172,104'/%3E%3Cpolygon points='194,104 194,65 213,71 213,104'/%3E%3Cpolygon points='213,104 213,75 227,69 227,104'/%3E%3Cpolygon points='249,104 249,55 268,61 268,104'/%3E%3Cpolygon points='278,104 278,65 292,71 292,104'/%3E%3C/g%3E%3Crect y='104' width='240' height='36' fill='%23d0dae8'/%3E%3Crect y='104' width='240' height='1.2' fill='%23bfcbdd'/%3E%3Cellipse cx='92' cy='106' rx='20' ry='2.7' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.2'%3E%3Cuse href='%23sq' transform='translate(92 104) skewX(54) scale(0.518 -0.259)' fill='%230e1d38'/%3E%3C/g%3E%3Cuse href='%23sq' transform='translate(92 104) scale(0.518)' fill='%231f4e96'/%3E%3C/g%3E%3C/svg%3E"); }
.profile-section:nth-of-type(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='240' height='140' rx='14'/%3E%3C/clipPath%3E%3Cg id='tri'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-34,0 34,0 0,-84'/%3E%3C/g%3E%3Cg id='sq'%3E%3Ccircle cy='-104' r='15'/%3E%3Crect x='-30' y='-82' width='60' height='82' rx='6'/%3E%3C/g%3E%3Cg id='hex'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-20,-84 20,-84 40,-42 20,0 -20,0 -40,-42'/%3E%3C/g%3E%3Cg id='cir'%3E%3Ccircle cy='-104' r='15'/%3E%3Ccircle cy='-40' r='40'/%3E%3C/g%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='240' height='140' fill='%23eef2f8'/%3E%3Cg fill='%23e6ecf5'%3E%3Cpolygon points='-20,104 -20,52 4,46 4,104'/%3E%3Cpolygon points='4,104 4,26 28,20 28,104'/%3E%3Cpolygon points='28,104 28,52 52,58 52,104'/%3E%3Cpolygon points='52,104 52,26 80,20 80,104'/%3E%3Cpolygon points='80,104 80,52 113,46 113,104'/%3E%3Cpolygon points='113,104 113,40 141,34 141,104'/%3E%3Cpolygon points='141,104 141,26 165,20 165,104'/%3E%3Cpolygon points='165,104 165,40 198,46 198,104'/%3E%3Cpolygon points='198,104 198,40 226,34 226,104'/%3E%3Cpolygon points='226,104 226,26 254,20 254,104'/%3E%3Cpolygon points='254,104 254,40 278,34 278,104'/%3E%3Cpolygon points='278,104 278,26 306,32 306,104'/%3E%3C/g%3E%3Cg fill='%23dde5f0'%3E%3Cpolygon points='-20,104 -20,75 -1,69 -1,104'/%3E%3Cpolygon points='21,104 21,65 40,71 40,104'/%3E%3Cpolygon points='62,104 62,75 81,69 81,104'/%3E%3Cpolygon points='91,104 91,75 110,69 110,104'/%3E%3Cpolygon points='132,104 132,75 151,69 151,104'/%3E%3Cpolygon points='151,104 151,65 175,71 175,104'/%3E%3Cpolygon points='175,104 175,55 199,61 199,104'/%3E%3Cpolygon points='209,104 209,75 223,69 223,104'/%3E%3Cpolygon points='245,104 245,55 264,49 264,104'/%3E%3C/g%3E%3Crect y='104' width='240' height='36' fill='%23d0dae8'/%3E%3Crect y='104' width='240' height='1.2' fill='%23bfcbdd'/%3E%3Cellipse cx='92' cy='106' rx='21' ry='2.7' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.2'%3E%3Cuse href='%23hex' transform='translate(92 104) skewX(46) scale(0.551 -0.253)' fill='%230e1d38'/%3E%3C/g%3E%3Cuse href='%23hex' transform='translate(92 104) scale(0.551)' fill='%234a74ad'/%3E%3C/g%3E%3C/svg%3E"); }
.profile-section:nth-of-type(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='240' height='140' rx='14'/%3E%3C/clipPath%3E%3Cg id='tri'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-34,0 34,0 0,-84'/%3E%3C/g%3E%3Cg id='sq'%3E%3Ccircle cy='-104' r='15'/%3E%3Crect x='-30' y='-82' width='60' height='82' rx='6'/%3E%3C/g%3E%3Cg id='hex'%3E%3Ccircle cy='-104' r='15'/%3E%3Cpolygon points='-20,-84 20,-84 40,-42 20,0 -20,0 -40,-42'/%3E%3C/g%3E%3Cg id='cir'%3E%3Ccircle cy='-104' r='15'/%3E%3Ccircle cy='-40' r='40'/%3E%3C/g%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='240' height='140' fill='%23eef2f8'/%3E%3Cg fill='%23e6ecf5'%3E%3Cpolygon points='-20,104 -20,52 8,46 8,104'/%3E%3Cpolygon points='8,104 8,40 36,46 36,104'/%3E%3Cpolygon points='36,104 36,52 69,58 69,104'/%3E%3Cpolygon points='69,104 69,52 93,58 93,104'/%3E%3Cpolygon points='93,104 93,52 117,58 117,104'/%3E%3Cpolygon points='117,104 117,26 141,32 141,104'/%3E%3Cpolygon points='141,104 141,52 165,46 165,104'/%3E%3Cpolygon points='165,104 165,52 198,46 198,104'/%3E%3Cpolygon points='198,104 198,40 231,46 231,104'/%3E%3Cpolygon points='231,104 231,52 264,58 264,104'/%3E%3Cpolygon points='264,104 264,40 297,46 297,104'/%3E%3C/g%3E%3Cg fill='%23dde5f0'%3E%3Cpolygon points='-20,104 -20,65 4,59 4,104'/%3E%3Cpolygon points='4,104 4,75 18,69 18,104'/%3E%3Cpolygon points='40,104 40,75 64,69 64,104'/%3E%3Cpolygon points='86,104 86,55 105,49 105,104'/%3E%3Cpolygon points='115,104 115,55 134,49 134,104'/%3E%3Cpolygon points='134,104 134,75 158,81 158,104'/%3E%3Cpolygon points='180,104 180,55 199,61 199,104'/%3E%3Cpolygon points='209,104 209,55 223,61 223,104'/%3E%3Cpolygon points='245,104 245,55 259,61 259,104'/%3E%3Cpolygon points='269,104 269,55 283,61 283,104'/%3E%3C/g%3E%3Crect y='104' width='240' height='36' fill='%23d0dae8'/%3E%3Crect y='104' width='240' height='1.2' fill='%23bfcbdd'/%3E%3Cellipse cx='92' cy='106' rx='18' ry='2.7' fill='%230e1d38' opacity='.12'/%3E%3Cg opacity='0.34'%3E%3Cuse href='%23cir' transform='translate(92 104) skewX(62) scale(0.486 -0.267)' fill='%230e1d38'/%3E%3C/g%3E%3Cuse href='%23cir' transform='translate(92 104) scale(0.486)' fill='%237d96ba'/%3E%3C/g%3E%3C/svg%3E"); }
/* Marker vor jeder Angst: Form des Typs, Füllung der Angst */
.mutation-box h4::before { width: 22px; height: 22px; background: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
.profile-section:nth-of-type(1) .mutation-box:nth-child(1) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 5 L36 33 H4 Z' fill='%230e1d38'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(1) .mutation-box:nth-child(2) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 5 L36 33 H4 Z' fill='none' stroke='%230e1d38' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(1) .mutation-box:nth-child(3) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='.5' stop-color='%230e1d38'/%3E%3Cstop offset='.5' stop-color='%230e1d38' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 5 L36 33 H4 Z' fill='url(%23g)' stroke='%230e1d38' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(1) .mutation-box:nth-child(4) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cpattern id='p' width='6' height='6' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='2.6' height='6' fill='%230e1d38'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M20 5 L36 33 H4 Z' fill='url(%23p)' stroke='%230e1d38' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(2) .mutation-box:nth-child(1) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='7' y='7' width='26' height='26' rx='3' fill='%231f4e96'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(2) .mutation-box:nth-child(2) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='7' y='7' width='26' height='26' rx='3' fill='none' stroke='%231f4e96' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(2) .mutation-box:nth-child(3) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='.5' stop-color='%231f4e96'/%3E%3Cstop offset='.5' stop-color='%231f4e96' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='7' y='7' width='26' height='26' rx='3' fill='url(%23g)' stroke='%231f4e96' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(2) .mutation-box:nth-child(4) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cpattern id='p' width='6' height='6' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='2.6' height='6' fill='%231f4e96'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='7' y='7' width='26' height='26' rx='3' fill='url(%23p)' stroke='%231f4e96' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(3) .mutation-box:nth-child(1) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 5 H28 L37 20 L28 35 H12 L3 20 Z' fill='%234a74ad'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(3) .mutation-box:nth-child(2) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 5 H28 L37 20 L28 35 H12 L3 20 Z' fill='none' stroke='%234a74ad' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(3) .mutation-box:nth-child(3) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='.5' stop-color='%234a74ad'/%3E%3Cstop offset='.5' stop-color='%234a74ad' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 5 H28 L37 20 L28 35 H12 L3 20 Z' fill='url(%23g)' stroke='%234a74ad' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(3) .mutation-box:nth-child(4) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cpattern id='p' width='6' height='6' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='2.6' height='6' fill='%234a74ad'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M12 5 H28 L37 20 L28 35 H12 L3 20 Z' fill='url(%23p)' stroke='%234a74ad' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(4) .mutation-box:nth-child(1) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='%237d96ba'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(4) .mutation-box:nth-child(2) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='%237d96ba' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(4) .mutation-box:nth-child(3) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='.5' stop-color='%237d96ba'/%3E%3Cstop offset='.5' stop-color='%237d96ba' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23g)' stroke='%237d96ba' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.profile-section:nth-of-type(4) .mutation-box:nth-child(4) h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cpattern id='p' width='6' height='6' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='2.6' height='6' fill='%237d96ba'/%3E%3C/pattern%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23p)' stroke='%237d96ba' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 768px) {
.profile-section::before { float: none; display: block; width: 100%; max-width: 280px; margin: 0 0 22px; height: auto; aspect-ratio: 240 / 140; }
}
/* ---------- 15. UNTERSEITEN ---------- */
.editorial-wrapper { max-width: 800px; margin: 80px auto 120px; padding: 0 20px; text-align: start; }
.editorial-header { margin-bottom: 56px; padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.editorial-header h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); margin-bottom: 20px; }
.editorial-lead { font-size: 1.3rem; color: var(--muted); line-height: 1.6; font-weight: 400; }
.editorial-content p { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.8; margin-bottom: 26px; max-width: 70ch; }
.editorial-content strong { font-weight: 600; color: var(--ink); }
.editorial-content em { font-style: italic; color: var(--muted); }
.editorial-content h2 { font-size: 1.6rem; color: var(--ink); margin-top: 60px; margin-bottom: 20px; }
.editorial-content ul { list-style: none; margin: 20px 0 36px; padding: 0; }
.editorial-content li { position: relative; padding: 12px 0 12px 30px; font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }
.editorial-content li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 1.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.editorial-content li strong { color: var(--ink); display: inline-block; margin-inline-end: 8px; }
/* ---------- 16. FOOTER ---------- */
.site-footer { margin-top: 0; padding: 56px 20px 48px; text-align: center; font-size: 0.88rem; color: var(--muted); line-height: 1.6; background: var(--tint); }
.site-footer-copyright { font-weight: 600; color: var(--ink); margin-bottom: 15px; }
.site-footer-disclaimer { max-width: 740px; margin: 0 auto 20px; text-align: start; font-size: 0.8rem; }
.site-footer-links a { color: var(--muted); text-decoration: none; margin: 0 12px; font-size: 0.85rem; font-weight: 600; }
.site-footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* ---------- 17. SUCHE ---------- */
.search-dropdown {
position: absolute;
top: calc(100% + 8px);
inset-inline: 0;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
max-height: 400px;
overflow-y: auto;
z-index: 50;
text-align: start;
}
.search-dropdown a.result-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.search-dropdown a.result-item:last-child { border-bottom: none; }
.search-dropdown a.result-item:hover { background: var(--tint-soft); }
.search-dropdown .result-cluster { font-size: 0.8rem; color: var(--muted); }
.search-dropdown .fallback-item { padding: 14px 20px; background: var(--tint-soft); font-size: 0.9rem; color: var(--muted); }
.search-dropdown .fallback-item a { font-weight: 700; color: var(--ink); }
.hidden { display: none; }
/* ---------- 18. RECHTLICHES ---------- */
.legal-wrapper { max-width: 800px; margin: 0 auto; padding: 80px 5% 120px; }
.legal-header { margin-bottom: 56px; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.legal-header h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0; overflow-wrap: break-word; word-break: break-word; }
.legal-content h2 { font-size: 1.5rem; margin: 48px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.legal-content h3 { font-size: 1.1rem; margin: 34px 0 12px; }
.legal-content p,
.legal-content li { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }
.legal-content ul { padding-inline-start: 20px; margin-bottom: 28px; }
.legal-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.legal-content a:hover { color: var(--accent); }
.privacy-highlight { background: var(--tint); border-inline-start: 4px solid var(--accent); padding: 24px 28px; margin: 40px 0; border-radius: var(--radius-sm); }
.privacy-highlight p { margin: 0; color: var(--ink); font-weight: 500; }
/* ---------- 18b. HERO ZENTRIERT + SZENE ---------- */
/* Zentrierter Hero mit getönter Fläche und Kante oben. Darunter eine textfreie Szene:
vier Figuren (= die vier Basis-Typen) werfen lange Schatten (= die unbewussten Ängste),
vor einer Büro-Silhouette. */
:root { --scene-far: #dfe6f1; --scene-floor: #d3dce9; }
.hero-center {
background: var(--tint);
clip-path: var(--edge);
overflow: hidden;
padding: calc(72px + var(--cut)) 5% 0;
text-align: center;
}
.hero-center h1 { margin-inline: auto; max-width: 19em; }
.hero-center .hero-subtitle { margin-inline: auto; text-align: center; }
.hero-center .hero-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 28px 0 0; }
.hero-center .hero-features li { margin: 0; }
.hero-center .btn { margin-top: 8px; }
.btn.btn-lg { padding: 20px 44px; font-size: 1.15rem; }
/* Szene: füllt die volle Breite (Boden und Silhouette laufen über den Rand hinaus),
bleibt auf dem Handy groß genug, weil die Figuren in der Mitte bleiben */
.hero-scene-wrap { margin-top: 56px; }
.hero-scene {
display: block;
position: relative;
inset-inline-start: 50%;
transform: translateX(-50%);
width: min(max(100%, 720px), 1100px);
height: auto;
overflow: visible;
}
[dir="rtl"] .hero-scene { inset-inline-start: auto; inset-inline-end: 50%; transform: translateX(50%); }
@media (max-width: 600px) {
.hero-center { padding: calc(48px + var(--cut)) 5% 0; }
/* Haken untereinander: eine Spalte in Breite des längsten Eintrags, Haken exakt untereinander */
.hero-center .hero-features { display: grid; justify-content: center; gap: 10px; text-align: start; }
.btn.btn-lg { padding: 18px 32px; font-size: 1.05rem; }
.hero-scene-wrap { margin-top: 40px; }
}
/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { display: none; }
.trust-content { flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 768px) {
:root { --cut: 24px; }
.section { padding: 64px 5%; }
.section.alt { padding-top: calc(64px + var(--cut)); }
.highlight-banner { padding: 48px 5% calc(48px + var(--slant)); }
.target-grid { grid-template-columns: 1fr; }
.mutation-grid { grid-template-columns: 1fr; gap: 30px; }
.mutation-grid::before { display: none; }
.profile-description { font-size: 1.1rem; }
.dossier-grid { gap: 40px; }
.dossier-header .subtitle { font-size: 1.15rem; }
.affiliate-section { padding: 26px 20px; }
.affiliate-card { flex-direction: column; text-align: center; margin-inline: 0; }
.factor-scale { grid-template-columns: 1fr 1fr; }
.factor-scale .factor-name { grid-column: 1 / -1; }
.factor-scale .factor-track { grid-column: 1 / -1; grid-row: 3; margin: 8px 0; }
.factor-scale .factor-pole.end { grid-row: 2; text-align: end; }
.legal-content h2 { font-size: 1.3rem; }
.legal-content h3 { font-size: 1rem; }
/* Header: nur Verzeichnis ausblenden, Button-Abstand, Umbruch auf schmalen Handys */
.hide-on-mobile { display: none !important; }
nav a { margin-inline-start: 0.8rem; font-size: 0.85rem; }
nav button { margin-inline-start: 1.8rem !important; padding: 9px 15px !important; font-size: 0.75rem !important; }
header { flex-wrap: wrap; gap: 10px; }
nav a.active::before,
nav a[aria-current="page"]::before { display: none; }
.search-box { padding: 18px 20px; font-size: 1rem; }
}
@media (max-width: 600px) {
p, li { hyphens: auto; } /* schmale Spalten brauchen Trennung */
:lang(ko) p, :lang(ja) p, :lang(zh) p, :lang(th) p, :lang(ar) p, :lang(he) p { hyphens: manual; }
/* Test */
.quiz-wrapper { margin: 20px auto; padding: 24px 16px; }
.question-text { font-size: 1.4rem; min-height: 100px; margin-bottom: 36px; }
.likert-scale { gap: 8px; }
.likert-label { display: none; }
.likert-btn.size-lg { width: 52px; height: 52px; }
.likert-btn.size-md { width: 44px; height: 44px; }
.likert-btn.size-sm { width: 38px; height: 38px; }
.answer-text-btn { padding: 15px 18px; }
/* Ergebnis und Unterseiten */
#result-screen { padding: 36px 0; }
.result-headline { font-size: 1.15rem; }
.result-section p,
.action-steps li { font-size: 1.05rem; }
.editorial-wrapper { margin-top: 40px; }
.editorial-lead { font-size: 1.15rem; }
.editorial-content p,
.editorial-content li { font-size: 1.05rem; }
}
/* ---------- 20. BEWEGUNG REDUZIEREN ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.fade-in { opacity: 1; }
}
/* ---------- 21. PRINT / PDF-EXPORT ---------- */
@media print {
header,
footer,
.site-footer,
#landing-page-content,
#quiz-screen,
#loading-screen,
#seo-footer,
.seo-footer,
[data-html2canvas-ignore] { display: none !important; }
#result-screen { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
body, main { background: #fff !important; }
.fade-in { opacity: 1 !important; animation: none !important; }
.affiliate-section, .feature-card { box-shadow: none !important; border: 1px solid var(--rule); }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
@page { size: A4; margin: 15mm; }
}