@import url("fonts.css");

/* ==========================================================================
   ETF Sparplan Rechner - Neobroker auf Weiss

   Der Grund ist ueberall #FFFFFF. Tiefe entsteht ueber Rahmen und leicht
   abgesetzte Bauteilflaechen, nie ueber einen anderen Seitenhintergrund.

   Mint hat auf Weiss nur 1,70:1 und ist deshalb ausschliesslich FLAECHE
   (Schaltflaechen, Badges, Diagrammfuellung) mit dunklem Text darauf.
   Fuer Text und Linien gilt --mint-ink mit 6,05:1. Bitte nicht tauschen.
   ========================================================================== */

:root {
  /* Marke */
  --mint: #00E0B8;              /* nur als Flaeche */
  --mint-ink: #00705C;          /* Text und Linien, 6,05:1 auf Weiss */
  --mint-tint: #EAFBF7;         /* sehr helle Markenflaeche */
  --mint-line: #B6EEE1;
  --on-mint: #04241E;           /* Text auf Mint, 9,68:1 */

  --rot: #C62F22;               /* Text auf Weiss, 5,48:1 */
  --rot-tint: #FDECEA;

  /* Grund und Bauteile */
  --bg: #FFFFFF;
  --raised: #F5F6F7;            /* Eingabefelder, Kacheln - kein Seitengrund */
  --line: #E4E6E9;
  --line-2: #D3D7DC;
  --text: #0A0B0C;
  --text-2: #474D55;
  --muted: #6C737C;
  --faint: #858C95;

  --positive: var(--mint-ink);
  --negative: var(--rot);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(10, 11, 12, .04), 0 4px 16px -6px rgba(10, 11, 12, .10);
  --ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--mint-ink);

  --f: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-num: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --sticky-h: 60px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: -.006em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--text); text-underline-offset: .16em; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: var(--mint-ink); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

h1, h2, h3, h4 { font-family: var(--f); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 1.5rem + 2.4vw, 3.35rem); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.28rem); font-weight: 700; letter-spacing: -.03em; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); background: var(--bg); border-top: 1px solid var(--line); }
.section--alt { background: var(--bg); }
.section__head { max-width: 56ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section__head p { color: var(--muted); margin-top: .6rem; font-size: 1.0625rem; }

.eyebrow {
  display: inline-block; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mint-ink); margin-bottom: .7rem;
}

.prose > * + * { margin-top: 1rem; }
.prose h3 { margin-top: 2rem; }
.prose h4 { margin-top: 1.5rem; }
.prose p { color: var(--text-2); }
.prose ul, .prose ol { padding-left: 1.15em; color: var(--text-2); }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--mint-ink); }
.prose strong { color: var(--text); }
.cols-2 { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Kopf ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--sticky-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: .75rem; }
.logo {
  font-weight: 700; font-size: 1.02rem; color: var(--text); text-decoration: none;
  letter-spacing: -.04em; white-space: nowrap; margin-right: auto;
}
.logo span { color: var(--mint-ink); }
.nav { display: none; gap: 1.4rem; margin-right: .5rem; }
@media (min-width: 980px) { .nav { display: flex; } }
.nav a { color: var(--muted); text-decoration: none; font-size: .8438rem; font-weight: 500; letter-spacing: -.01em; }
.nav a:hover { color: var(--text); }

/* Mitlaufendes Ergebnis: erscheint, sobald der Rechner nach oben aus dem
   Bild gelaufen ist. Haelt die Zahl waehrend der langen Lesestrecke praesent. */
.head-figure {
  display: none; align-items: baseline; gap: .45rem; text-decoration: none;
  padding: .3rem .7rem; border-radius: var(--pill);
  background: var(--mint-tint); border: 1px solid var(--mint-line);
  white-space: nowrap; animation: einblenden .18s ease-out;
}
.head-figure[hidden] { display: none; }
.head-figure.is-da { display: inline-flex; }
.head-figure span { font-size: .6875rem; color: var(--mint-ink); font-weight: 500; }
.head-figure b {
  font-family: var(--f-num); font-size: .8125rem; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
@keyframes einblenden { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* Ab 560px nur noch die Zahl, unter 340px gar nicht - dort wird es zu eng
   neben Logo und Schaltflaeche. */
@media (max-width: 560px) { .head-figure span { display: none; } }
@media (max-width: 340px) { .head-figure { display: none !important; } }

.btn--sm { padding: .42rem .85rem; font-size: .8125rem; }
.head-cta-kurz { display: none; }
@media (max-width: 700px) {
  .head-cta-lang { display: none; }
  .head-cta-kurz { display: inline; }
}

/* Lesefortschritt - bei rund 8.000 Woertern eine echte Orientierung */
/* scaleX statt animierter Breite: laeuft auf dem Compositor und haengt nicht
   davon ab, dass eine Prozentbreite gegen den Kopf aufgeloest wird. */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--mint); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- Auftakt ---------- */
.hero { background: var(--bg); padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.hero__top { position: relative; }
.hero__intro { max-width: 64ch; position: relative; z-index: 1; }

/* Bild nur am Desktop. Es sitzt rechts neben dem Text, laeuft bis an den
   Bildschirmrand und blendet nach links in den weissen Grund aus.
   Bewusst als Hintergrundbild statt <img>: es ist rein dekorativ, und so
   laedt es auf dem Handy gar nicht erst - dort ist es ohnehin ausgeblendet. */
.hero__bild { display: none; }
@media (min-width: 1080px) {
  .hero__bild {
    display: block; position: absolute; pointer-events: none;
    /* Liegt als Hintergrund hinter dem ganzen Hero, rechts buendig mit dem
       uebrigen Inhalt. Das Foto sitzt rechts und fuellt die Hoehe, der
       weisse Verlauf darueber deckt die linke Haelfte fuer den Text ab. */
    inset: 0; z-index: 0;
    border-radius: var(--r-lg); overflow: hidden;
    /* Der Verlauf muss weiter nach rechts reichen als beim ersten Foto:
       dieses hier hat auch links Bildinhalt (Pflanze, Fensterrahmen), und
       darauf faellt der Kontrast der Ueberschrift sonst auf unter 2:1.
       Mit diesen Stufen liegt er bei 9,2:1 und hoeher. */
    background:
      linear-gradient(to right,
        #FFFFFF 0%, #FFFFFF 40%,
        rgba(255,255,255,.9) 48%, rgba(255,255,255,.68) 55%,
        rgba(255,255,255,.38) 62%, rgba(255,255,255,0) 70%),
      /* Breite fest in Prozent statt "auto 100%": sonst wuerde das Foto mit
         der geringeren Hero-Hoehe proportional mitschrumpfen. So bleibt es
         gleich breit und wird nur oben und unten leicht beschnitten -
         Position 30% laesst dabei der Frau Kopffreiheit. */
      url("img/hero-cafe-2.webp") right 30% / 55% auto no-repeat;
  }
  .hero__top { min-height: clamp(320px, 24vw, 432px); }
}
.hero h1 { color: var(--text); max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--mint-ink); }
/* Verhindert, dass "ETF-Sparplan" am Bindestrich umbricht */
.nowrap { white-space: nowrap; }
.hero__lead { margin-top: .95rem; max-width: 56ch; font-size: clamp(1rem, .96rem + .3vw, 1.125rem); color: var(--text-2); }

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem .3rem .6rem; border-radius: var(--pill);
  background: var(--mint-tint); border: 1px solid var(--mint-line);
  font-size: .75rem; font-weight: 600; color: var(--mint-ink); margin-bottom: 1rem; letter-spacing: -.01em;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-ink); }

.hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.hero__fact {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .45rem .85rem; border-radius: var(--pill);
  background: var(--raised); border: 1px solid var(--line);
}
.hero__fact strong { font-size: .875rem; font-weight: 700; color: var(--mint-ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.hero__fact span { font-size: .75rem; color: var(--muted); }

/* Auf dem Handy zaehlt, dass der Rechner sofort sichtbar ist. Er steht im
   Quelltext aber hinter Einleitung und Kennzahlen und in einem anderen
   Container. "display: contents" loest die beiden Wrapper mobil auf, danach
   sind Ueberschrift, Rechner, Einleitung und Kennzahlen Geschwister und
   lassen sich frei sortieren. Die Lesereihenfolge bleibt dabei sinnvoll. */
@media (max-width: 700px) {
  .hero__grid { display: flex; flex-direction: column; gap: 1.5rem; }
  .hero__top, .hero__intro { display: contents; }
  .hero h1 { order: 1; }
  .calc { order: 2; }
  .hero__lead { order: 3; margin-top: 0; }
  .hero__facts { order: 4; margin-top: 0; }

  /* Auf dem kleinen Schirm zaehlt jede Zeile bis zum ersten Eingabefeld.
     "Deine Eingaben" sagt nichts, was die beschrifteten Felder nicht selbst
     zeigen. Gezielt nur der Kopf des Formulars - der Ergebnis-Kopf mit der
     Umschaltung zwischen Grafik und Tabelle bleibt. */
  #calcForm .panel__head { display: none; }
}

/* Auf dem Handy brechen die drei Pillen in drei verschieden breite Zeilen
   um - unruhig und platzraubend. Dort stattdessen eine Karte mit fester
   Zahlenspalte: die Werte fluchten untereinander, die Beschriftung bekommt
   die ganze Restbreite und bleibt einzeilig. */
@media (max-width: 700px) {
  .hero__facts {
    display: grid; gap: 0; margin-top: 1.25rem;
    border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  }
  .hero__fact {
    display: grid; grid-template-columns: 4.75rem 1fr;
    align-items: baseline; gap: .7rem;
    padding: .65rem .85rem; border: 0; border-radius: 0; background: var(--raised);
  }
  .hero__fact + .hero__fact { border-top: 1px solid var(--line); }
  .hero__fact strong { font-size: .9375rem; }
  .hero__fact span { font-size: .8125rem; }
}

/* ---------- Rechner ---------- */
.calc { display: grid; gap: .75rem; }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: start; } }

.panel {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.1rem, 2.5vw, 1.5rem); box-shadow: var(--shadow);
}
.panel__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.03em; }
.panel__sub { font-size: .8125rem; color: var(--muted); margin-top: .15rem; }
.panel__head { padding-bottom: .95rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line); }

.field + .field { margin-top: 1rem; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .9rem; margin-bottom: .4rem; flex-wrap: wrap; }
.field__label b { font-size: .875rem; font-weight: 600; white-space: nowrap; letter-spacing: -.015em; }
.field__hint { font-size: .7188rem; color: var(--faint); text-align: right; flex: 1 1 auto; min-width: 0; }

.input-row { display: flex; align-items: stretch; gap: .65rem; }
.input-wrap { position: relative; flex: 0 0 auto; width: 7.75rem; }
.input-wrap input {
  width: 100%; height: 42px; padding: 0 2rem 0 .7rem;
  font-family: var(--f-num); font-size: .9375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--text); background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.input-wrap input:focus { outline: none; background: var(--bg); border-color: var(--mint-ink); box-shadow: 0 0 0 3px var(--mint-tint); }
.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-wrap input[type="number"] { -moz-appearance: textfield; }
.input-wrap .unit { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); font-size: .8125rem; color: var(--faint); pointer-events: none; font-weight: 500; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 42px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--pill); background: var(--line-2); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--pill); background: var(--line-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--mint); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(10, 11, 12, .28);
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--mint); border: 2px solid var(--bg); }
input[type="range"]:focus-visible { box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--mint-tint); }

select { width: 100%; height: 42px; padding: 0 .7rem; font-family: var(--f); font-size: .875rem; font-weight: 500; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.switch-row:first-of-type { margin-top: 1.15rem; }
.switch-row__text b { display: block; font-size: .875rem; font-weight: 600; letter-spacing: -.015em; }
.switch-row__text span { font-size: .7188rem; color: var(--faint); }
.switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: var(--pill); background: var(--line-2); transition: background .16s ease; pointer-events: none; }
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 2px rgba(10, 11, 12, .25);
}
.switch input:checked + i { background: var(--mint); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { box-shadow: 0 0 0 3px var(--mint-tint); }

.subfields { display: none; padding: .9rem 0 .2rem; }
.subfields.is-open { display: block; }

/* Ergebnis */
.result__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--pill); }
.seg button { border: 0; background: transparent; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muted); padding: .3rem .85rem; border-radius: var(--pill); cursor: pointer; letter-spacing: -.015em; }
.seg button[aria-selected="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(10, 11, 12, .12); }

.headline-figure { margin: 1.35rem 0 1.25rem; }
.headline-figure small { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }
.headline-figure strong {
  display: block; font-family: var(--f); font-weight: 800;
  font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4rem); line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.055em; margin-top: .3rem;
}
.headline-figure .sub { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-family: var(--f-num); font-size: .8125rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 1140px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { padding: .7rem .8rem; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); min-width: 0; }
.kpi small { display: block; font-size: .6875rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b {
  display: block; font-family: var(--f-num); font-weight: 600; font-variant-numeric: tabular-nums;
  margin-top: .2rem; font-size: clamp(.9375rem, .86rem + .25vw, 1.0625rem); letter-spacing: -.03em;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi--growth b { color: var(--positive); }
.kpi--tax b, .kpi--cost b { color: var(--negative); }

.chart-box { position: relative; height: clamp(230px, 30vw, 300px); margin-top: 1.25rem; }
.view { display: none; }
.view.is-active { display: block; }
.table-scroll { overflow-x: auto; margin-top: 1.25rem; max-height: 330px; overscroll-behavior: contain; }

table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
th, td { padding: .55rem .7rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; font-size: .6875rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-2); }
td { font-family: var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-2); letter-spacing: -.02em; }
tbody tr:hover td { color: var(--text); }

.note { display: flex; gap: .65rem; margin-top: 1.25rem; padding: .85rem .95rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .7813rem; color: var(--muted); line-height: 1.55; }
.note b { color: var(--text); }

/* ---------- Bausteine ---------- */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.15rem 1.25rem; }
.card h4 { margin-bottom: .4rem; }
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.callout { border: 1px solid var(--mint-line); background: var(--mint-tint); padding: 1.1rem 1.25rem; border-radius: var(--r-md); }
.callout--brand { border-color: var(--line); background: var(--raised); }
.callout h4 { margin-bottom: .4rem; }

.example { display: grid; gap: .5rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.example > div { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .95rem 1rem; }
.example b { display: block; font-weight: 700; font-size: 1.4rem; color: var(--text); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.example span { font-size: .75rem; color: var(--muted); display: block; margin-top: .2rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); -webkit-overflow-scrolling: touch; }
.table-wrap table { font-size: .8438rem; }
.table-wrap th, .table-wrap td { padding: .7rem .9rem; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: .9rem; }
.table-wrap thead th { background: var(--raised); position: static; }
.table-wrap td { font-family: var(--f); letter-spacing: -.01em; }
.yes { color: var(--positive); font-weight: 600; }
.no { color: var(--negative); font-weight: 600; }

/* ---------- Broker ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.filters button {
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; letter-spacing: -.015em;
  padding: .45rem .85rem; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.filters button:hover { color: var(--text); border-color: var(--line-2); }
.filters button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }

.brokers { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.broker { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.15rem; position: relative; }
.broker.is-hidden { display: none; }
.broker--top { border-color: var(--mint); box-shadow: var(--shadow); }
.broker__flag {
  position: absolute; top: -9px; left: 1.15rem;
  background: var(--mint); color: var(--on-mint);
  font-size: .6563rem; font-weight: 700; padding: .15rem .55rem; border-radius: var(--pill);
}
.broker__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.broker__name { font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.broker__type { font-size: .6875rem; color: var(--faint); font-weight: 500; margin-top: .05rem; }
.broker__specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .7rem .75rem; margin-bottom: .85rem; background: var(--raised); border-radius: var(--r-sm); }
.broker__specs div { text-align: left; min-width: 0; }
.broker__specs b { display: block; font-family: var(--f-num); font-size: .8438rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.broker__specs span { font-size: .625rem; color: var(--faint); line-height: 1.3; display: block; margin-top: .1rem; }
.broker__list { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .8125rem; color: var(--text-2); }
.broker__list li { display: flex; gap: .5rem; align-items: flex-start; }
.broker__list li + li { margin-top: .35rem; }
.broker__list i { font-style: normal; flex: 0 0 auto; font-weight: 700; font-size: .75rem; line-height: 1.65; }
.broker__list .p i { color: var(--positive); }
.broker__list .m i { color: var(--negative); }
.broker__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rating { font-size: .6875rem; color: var(--muted); }
.rating b { display: block; font-size: .8125rem; color: var(--text); letter-spacing: .02em; }

.btn {
  display: inline-flex; align-items: center; gap: .35rem; justify-content: center;
  font: inherit; font-size: .8438rem; font-weight: 600; text-decoration: none; cursor: pointer;
  letter-spacing: -.02em; padding: .55rem 1.05rem; border-radius: var(--pill);
  background: var(--mint); color: var(--on-mint); border: 1px solid transparent;
  transition: filter .14s ease;
}
.btn:hover { filter: brightness(1.06); color: var(--on-mint); }
.btn--ghost { background: var(--bg); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: var(--raised); color: var(--text); filter: none; }
.btn--gold { background: var(--mint); color: var(--on-mint); }
.btn--lg { padding: .75rem 1.5rem; font-size: .9375rem; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; cursor: pointer; font-weight: 600; list-style: none; font-size: .9375rem; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 1.2rem; font-weight: 400; color: var(--mint-ink); transition: transform .18s ease; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 1.15rem 1.15rem; color: var(--text-2); font-size: .875rem; max-width: 78ch; }
.faq__body > * + * { margin-top: .75em; }

/* ---------- Glossar ---------- */
.glossary { display: grid; gap: .5rem; }
@media (min-width: 700px) { .glossary { grid-template-columns: 1fr 1fr; } }
.glossary div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .9rem 1rem; }
.glossary dt { font-weight: 600; margin-bottom: .2rem; font-size: .9375rem; letter-spacing: -.02em; }
.glossary dd { margin: 0; font-size: .8125rem; color: var(--muted); line-height: 1.55; }

/* ---------- Schluss und Fuss ---------- */
.cta {
  background: var(--mint-tint); border: 1px solid var(--mint-line); color: var(--text);
  border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem); text-align: center;
}
.cta h2 { color: var(--text); }
.cta p { color: var(--text-2); max-width: 52ch; margin: .8rem auto 1.65rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.cta .btn--gold { background: var(--mint); color: var(--on-mint); }
.cta .btn--ghost { background: var(--bg); border-color: var(--mint-line); color: var(--text); }
.cta .btn--ghost:hover { background: var(--bg); border-color: var(--mint-ink); }

.site-footer { background: var(--bg); color: var(--muted); border-top: 1px solid var(--line); padding-block: 2.75rem 1.75rem; font-size: .8438rem; }
.site-footer h4 { color: var(--text); font-size: .75rem; margin-bottom: .8rem; font-weight: 600; letter-spacing: -.015em; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--mint-ink); }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
/* Auf dem Handy fielen die vier Bloecke untereinander, weil 180px Mindest-
   breite dort nicht zweimal nebeneinander passen. Feste zwei Spalten sind
   hier besser: die drei Linklisten stehen paarweise, der Markenblock mit
   seinem Beschreibungssatz bekommt die volle Breite - in einer halben
   Spalte wuerde er auf sechs Zeilen umbrechen. */
@media (max-width: 700px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}
.footer__grid ul { list-style: none; padding: 0; }
.footer__grid li + li { margin-top: .45rem; }
.footer__bottom { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .7813rem; }
.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.disclaimer { margin-top: 1.25rem; font-size: .7188rem; line-height: 1.6; color: var(--faint); max-width: 92ch; }

/* ---------- Legal ---------- */
.legal { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.legal .wrap { max-width: 76ch; }
.legal h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.4rem); margin-bottom: .4rem; }
.legal .updated { color: var(--faint); font-size: .8125rem; margin-bottom: 2.25rem; }
.legal h2 { font-size: clamp(1.15rem, 1.05rem + .6vw, 1.4rem); margin-top: 2.25rem; margin-bottom: .6rem; }
.legal p { color: var(--text-2); }
.legal p + p, .legal ul { margin-top: .85rem; }
.legal ul { padding-left: 1.15em; color: var(--text-2); }
.legal li + li { margin-top: .35rem; }
.legal dl { margin-top: .85rem; display: grid; gap: .35rem .9rem; grid-template-columns: max-content 1fr; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0; color: var(--text-2); }
@media (max-width: 520px) { .legal dl { grid-template-columns: 1fr; } .legal dd { margin-bottom: .5rem; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--mint); color: var(--on-mint); padding: .7rem 1.15rem; font-weight: 600; border-radius: 0 0 var(--r-sm) 0; }
.skip:focus { left: 0; }

.preview-bar { background: var(--mint); color: var(--on-mint); font-size: .8125rem; font-weight: 600; padding: .5rem 0; text-align: center; letter-spacing: -.015em; }
.preview-bar a { color: var(--on-mint); text-decoration: underline; text-underline-offset: .16em; }

@media print {
  .site-header, .filters, .cta, .seg, .preview-bar { display: none !important; }
  body { background: #fff; color: #000; }
}