/* Selbstbild-Explorer: warme Surf-Optik, Themes wie /weltbild (space/forest/beach).
   Schriften lokal aus /fonts/fonts.css (DM Sans, Inter, JetBrains Mono). */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #07070f;
  --panel: rgba(18, 18, 30, 0.92);
  --panel-solid: #12121e;
  --panel-2: #191927;
  --ink: #f2f2f8;
  --ink-2: #b9b9cf;
  --ink-3: #8a8aa3;
  --line: #2a2a40;
  --accent: #ffd35c;
  --accent-soft: rgba(255, 211, 92, 0.14);
  --accent-glow: rgba(255, 211, 92, 0.28);
  --title-glow: rgba(255, 211, 92, 0.25);
  --hover: rgba(255, 255, 255, 0.06);
  --selection-ink: #14100a;
  --gut: #6fdd8b;
  --mittel: #ffd35c;
  --schwach: #ff9d66;
  --keine: #8a8aa3;
  --sans: "DM Sans", "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
}

body.forest {
  --bg: #081207;
  --panel: rgba(13, 26, 11, 0.92);
  --panel-solid: #0d1a0b;
  --panel-2: #142411;
  --ink: #eef6e8; --ink-2: #c2d6b8; --ink-3: #8ba382;
  --line: #26401f;
  --accent: #a4e878;
  --accent-soft: rgba(164, 232, 120, 0.13);
  --accent-glow: rgba(164, 232, 120, 0.3);
  --title-glow: rgba(164, 232, 120, 0.3);
}

body.beach {
  --bg: hsl(42, 48%, 89%);
  --panel: hsla(44, 56%, 94%, 0.92);
  --panel-solid: hsl(44, 56%, 94%);
  --panel-2: hsl(41, 34%, 87%);
  --ink: hsl(28, 36%, 16%); --ink-2: hsl(29, 30%, 27%); --ink-3: hsl(30, 20%, 36%);
  --line: hsl(38, 30%, 70%);
  --accent: hsl(197, 71%, 33%);
  --accent-soft: hsla(197, 71%, 33%, 0.1);
  --accent-glow: hsla(197, 71%, 33%, 0.3);
  --title-glow: hsla(29, 87%, 56%, 0.5);
  --hover: rgba(85, 62, 35, 0.08);
  --selection-ink: hsl(45, 70%, 96%);
  --gut: #1f8a4c;
  --mittel: #b07800;
  --schwach: #c25e1f;
  --keine: hsl(30, 20%, 46%);
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: radial-gradient(120% 60% at 50% 0%, var(--panel-2) 0%, var(--bg) 60%) fixed;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.forest { background: radial-gradient(120% 60% at 50% 0%, #10200c 0%, var(--bg) 60%) fixed; }
body.beach  { background: radial-gradient(120% 60% at 50% 0%, hsl(45, 60%, 93%) 0%, hsl(40, 44%, 85%) 100%) fixed; }
::selection { background: var(--accent); color: var(--selection-ink); }

a { color: var(--accent); }

/* ---- Ecken: Back-Link + Titel (wie /weltbild) ---- */
.back {
  position: fixed; top: 0.9rem; left: 1.2rem; z-index: 120;
  font-size: 0.82rem; letter-spacing: 0.12em; font-family: var(--mono);
  color: var(--ink-2); text-decoration: none;
  padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); transition: color .2s, border-color .2s;
}
.back:hover { color: var(--ink); border-color: var(--ink-3); }

.title-tag {
  position: fixed; top: 1.15rem; right: 1.2rem; z-index: 120;
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-family: var(--mono);
  color: var(--ink-2); text-shadow: 0 0 18px var(--title-glow);
}

/* ---- Hero ---- */
.hero {
  max-width: 860px; margin: 0 auto; padding: 5.5rem 1.25rem 1.5rem;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 700;
  letter-spacing: 0.01em; line-height: 1.2;
  text-shadow: 0 0 30px var(--title-glow);
}
.hero .lede { margin-top: 0.9rem; color: var(--ink-2); font-size: 1.02rem; }
.bruecke-zeile { margin-top: 0.8rem; color: var(--ink-2); font-size: 0.92rem; }
.hero-meta {
  margin-top: 1.1rem; display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.privat {
  font-size: 0.78rem; color: var(--ink-3); font-family: var(--mono);
  border: 1px dashed var(--line); border-radius: 999px; padding: 0.3rem 0.75rem;
}

.theme-switch { display: flex; gap: 0.35rem; }
.theme-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  width: 2.3rem; height: 2.3rem; cursor: pointer; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.6; transition: opacity .2s, border-color .2s, box-shadow .2s; padding: 0;
}
.theme-btn:hover { opacity: 1; }
.theme-btn.active { border-color: var(--accent); opacity: 1; box-shadow: 0 0 10px var(--accent-glow); }

/* ---- Modell-Navigation (sticky Pills) ---- */
.selector {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.wv-btn {
  display: inline-block; text-decoration: none;
  background: none; border: 1px solid transparent;
  color: var(--ink-2); font-family: var(--mono);
  font-size: 0.82rem; padding: 0.35rem 0.8rem;
  cursor: pointer; border-radius: 999px;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.wv-btn:hover { color: var(--ink); background: var(--hover); }
.wv-btn.active {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 14px var(--accent-glow);
}

/* ---- Modell-Sektionen ---- */
main { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.modell {
  margin: 1.75rem 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); backdrop-filter: blur(6px);
  overflow: hidden;
}
.m-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.4rem 0.9rem; border-bottom: 1px solid var(--line);
}
.m-head h2 { font-size: 1.35rem; font-weight: 700; }
.m-sub { font-size: 0.82rem; font-weight: 400; color: var(--ink-3); margin-left: 0.5rem; letter-spacing: 0.04em; }

.evidenz {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem;
  white-space: nowrap;
}
.evidenz[data-stufe="4"], .evidenz[data-stufe="3"] { color: var(--gut); border-color: var(--gut); }
.evidenz[data-stufe="2"] { color: var(--mittel); border-color: var(--mittel); }
.evidenz[data-stufe="1"] { color: var(--schwach); border-color: var(--schwach); }
.evidenz[data-stufe="0"] { color: var(--keine); }

.m-body {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.5rem; padding: 1.4rem;
}
@media (max-width: 820px) { .m-body { grid-template-columns: 1fr; } }

.stage { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; min-width: 0; }
.stage canvas {
  max-width: 100%; height: auto; touch-action: none;
  border-radius: 12px;
}
.stage canvas.kreuz, #cv-plutchik, #cv-schwartz, #cv-enneagramm { cursor: pointer; }
.stage canvas.kreuz { cursor: grab; }

.lesart {
  font-size: 0.85rem; color: var(--ink-2); text-align: center;
  min-height: 2.6em; max-width: 460px;
}
.lesart b, .lesart strong { color: var(--accent); }
.lesart .wert { font-family: var(--mono); }

/* ---- Steckbrief ---- */
.steckbrief {
  border-left: 1px solid var(--line); padding-left: 1.5rem;
  font-size: 0.9rem; color: var(--ink-2);
}
@media (max-width: 820px) { .steckbrief { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1rem; } }
.steckbrief h3 {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--mono); font-weight: 400;
  margin: 1rem 0 0.35rem;
}
.steckbrief h3:first-child { margin-top: 0; }
.steckbrief .mehr { margin-top: 0.9rem; }
.steckbrief .mehr a { text-decoration: none; font-family: var(--mono); font-size: 0.82rem; }
.steckbrief .mehr a:hover { text-decoration: underline; }

/* ---- Big Five: Regler + Facetten ---- */
.regler { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 0.55rem; }
.dim { border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.8rem; background: var(--panel-2); }
.dim-zeile { display: flex; align-items: center; gap: 0.7rem; }
.dim-name { flex: 0 0 10.5rem; font-size: 0.85rem; display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.dim-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim-kuerzel { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.dim input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.dim-wert { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); width: 2.2em; text-align: right; }
.dim details { margin-top: 0.35rem; }
.dim summary {
  cursor: pointer; font-size: 0.72rem; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: 0.08em; list-style: none;
}
.dim summary::before { content: "▸ "; }
.dim details[open] summary::before { content: "▾ "; }
.dim .facetten { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.25rem; line-height: 1.5; }

@media (max-width: 480px) { .dim-name { flex-basis: 8rem; } }

/* ---- MBTI ---- */
.dichotomien { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 0.5rem; }
.dicho {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem;
}
.dicho .achse { font-size: 0.68rem; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.dicho button {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  font-family: var(--sans); font-size: 0.82rem; padding: 0.45rem 0.6rem;
  border-radius: 10px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.dicho button:hover { color: var(--ink); border-color: var(--ink-3); }
.dicho button.an { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dicho button b { font-family: var(--mono); margin-right: 0.35rem; }

.typgitter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem;
  width: 100%; max-width: 460px;
}
.typ {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  color: var(--ink-2); padding: 0.45rem 0.2rem; text-align: center; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.typ .code { font-family: var(--mono); font-size: 0.82rem; display: block; }
.typ .name { font-size: 0.62rem; color: var(--ink-3); display: block; margin-top: 0.1rem; }
.typ:hover { color: var(--ink); border-color: var(--ink-3); }
.typ.an { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 14px var(--accent-glow); }
.typ.an .name { color: var(--accent); }

/* ---- Enneagramm: Flügelwahl ---- */
.fluegelwahl { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.fluegelwahl button {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  font-family: var(--mono); font-size: 0.76rem; padding: 0.3rem 0.7rem;
  border-radius: 999px; cursor: pointer;
}
.fluegelwahl button.an { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---- Ausblick + Brücke ---- */
.ausblick {
  margin: 2.5rem 0 1rem; padding: 1.6rem 1.6rem 1.8rem;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  text-align: center;
}
.ausblick h2 { font-size: 1.3rem; margin-bottom: 0.7rem; text-shadow: 0 0 24px var(--title-glow); }
.ausblick p { color: var(--ink-2); font-size: 0.95rem; max-width: 760px; margin: 0 auto; }
.ausblick .bruecke-gross { margin-top: 1.1rem; }
.pill-link {
  display: inline-block; margin-left: 0.4rem; text-decoration: none;
  border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft);
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  transition: box-shadow .2s, transform .2s;
}
.pill-link:hover { box-shadow: 0 0 16px var(--accent-glow); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .pill-link:hover { transform: none; } }

/* ---- Footer ---- */
.legal {
  text-align: center; padding: 0 1rem 2rem; font-size: 0.78rem;
}
.legal a { color: var(--ink-3); text-decoration: none; margin: 0 0.7rem; }
.legal a:hover { color: var(--ink-2); }