/* Investment Elite – gemeinsame Gestaltung
 * Layout: eine linksbündige Lesespalte (max. 1080 px). Oben der Plan als Satz, darunter das Urteil,
 * dann der Fächer der simulierten Zukünfte. Eine Akzentfarbe: Grün heißt "Ziel erreicht".
 */
:root {
  --paper: #eef2ef;      /* Seitengrund, salbeigrau */
  --surface: #f8faf8;    /* Grafik- und Kartenfläche */
  --field: #e1e8e3;      /* Eingabefelder */
  --ink: #15201a;        /* Text */
  --ink-2: #47534d;      /* Nebentext */
  --ink-3: #69756f;      /* Achsen, Hinweise */
  --rule: #d2dad4;       /* Haarlinien */
  --hit: #0b7a55;        /* Ziel erreicht, Akzent */
  --hit-ink: #ffffff;    /* Text auf Akzent */
  --hit-soft: #d5eadf;
  --miss: #a3aea8;       /* Ziel verfehlt */
  --band: #e0e7e2;       /* Spanne 8 von 10 */
  --warn: #9a3412;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
  --step-3: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.4rem + 4.2vw, 4rem);
  --r-s: 6px;
  --r-m: 12px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1512;
    --surface: #151d19;
    --field: #1f2a24;
    --ink: #e6ede8;
    --ink-2: #b2beb7;
    --ink-3: #87948d;
    --rule: #28332d;
    --hit: #3cc28f;
    --hit-ink: #06140e;
    --hit-soft: #173327;
    --miss: #4f5c55;
    --band: #223129;
    --warn: #f59e70;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1512;
  --surface: #151d19;
  --field: #1f2a24;
  --ink: #e6ede8;
  --ink-2: #b2beb7;
  --ink-3: #87948d;
  --rule: #28332d;
  --hit: #3cc28f;
  --hit-ink: #06140e;
  --hit-soft: #173327;
  --miss: #4f5c55;
  --band: #223129;
  --warn: #f59e70;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--hit); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* Kopfzeile */
.top { padding-block: 18px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; font-size: var(--step-1); }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--step--1); }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Schaltflächen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: var(--paper); font-weight: 650; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--hit); color: var(--hit-ink); }
.btn-accent { background: var(--hit); color: var(--hit-ink); }
.btn-accent:hover { background: var(--ink); color: var(--paper); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink-3); }
.btn-line:hover { background: var(--field); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.link-btn:hover { color: var(--ink); }
.pro-tag {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.02em; background: var(--hit-soft); color: var(--ink); vertical-align: middle;
}

/* Formularfelder */
.input {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid transparent;
  border-bottom: 2px solid var(--ink-3); border-radius: var(--r-s) var(--r-s) 0 0; padding: 8px 10px; min-height: 44px; width: 100%;
}
.input:focus { outline: none; border-bottom-color: var(--hit); background: var(--surface); }
.label { display: block; font-size: var(--step--1); color: var(--ink-2); margin-bottom: 4px; }
select.input { appearance: auto; }

/* Fächer-Grafik */
.fan-host { position: relative; }
.fan-canvas { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; border-radius: 4px; }
.fan-tip {
  position: absolute; pointer-events: none; z-index: 2; min-width: 190px; max-width: 240px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; font-size: var(--step--1); line-height: 1.45; box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
}
.fan-tip b { display: block; margin-bottom: 4px; }
.fan-tip .row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.fan-tip .row span:first-child { color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); color: var(--ink-2); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid currentColor; }
.legend .l-hit i { border-color: var(--hit); }
.legend .l-miss i { border-color: var(--miss); }
.legend .l-mid i { border-top-width: 3px; border-color: var(--ink); }
.legend .l-inv i { border-color: var(--ink-3); border-top-width: 1px; }
.legend .l-goal i { border-top: 2px dashed var(--ink-2); }
.legend .l-band i { height: 10px; border: 0; background: var(--band); border-radius: 2px; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { color: var(--ink-2); font-weight: 600; }

/* Dialog */
dialog.sheet {
  border: 1px solid var(--rule); border-radius: 16px; padding: 0; background: var(--surface); color: var(--ink);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
}
dialog.sheet::backdrop { background: rgb(10 16 13 / 0.55); }
.sheet-body { padding: 24px; display: grid; gap: 16px; }
.sheet-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink-2); }
.sheet-close:hover { background: var(--field); color: var(--ink); }

/* Fußzeile */
.foot { border-top: 1px solid var(--rule); margin-top: 72px; padding-block: 28px 40px; color: var(--ink-3); font-size: var(--step--1); }
.foot .wrap { display: grid; gap: 12px; }
.foot p { max-width: 75ch; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

.notice { font-size: var(--step--1); color: var(--ink-2); }
.err { color: var(--warn); }

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