/* FantasyRise: shared stylesheet */

:root {
  --plum: #3B2440;
  --plum-deep: #2A1830;
  --plum-line: #56395C;
  --paper: #FAF5F3;
  --paper-warm: #F3E9E6;
  --accent: #BE3062;        /* der eine Akzent: Buttons, Links, Zahlen. 5.1:1 auf Papier */
  --accent-deep: #A3284F;   /* Hover */
  --rose: #BE3062;          /* Altname, zeigt auf den Akzent, damit jede Linkregel mitzieht */
  --rose-soft: #E9C3CE;
  --surface: #FFFFFF;
  --sage: #5F8B73;
  --amber: #C98B4B;
  --ink: #2A1E2E;
  --muted: #7C6976;
  --muted-light: #B9A6B4;   /* nur auf dunklen Flaechen, auf hellen nur 2.12:1 */
  --rule: #E4D6D3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.narrow { max-width: 680px; }

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.logo-mark {
  display: inline-block;
  vertical-align: -6px;
  margin-right: 10px;
}

.logo span { color: var(--rose); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
}

.nav a:hover, .nav a:focus-visible { color: var(--rose); }

.nav .btn-small {
  background: var(--accent);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  margin-left: 14px;
  font-weight: 700;
}
.nav .btn-small:hover { background: var(--accent-deep); color: #fff; }

/* ---------- Menues ---------- */
/* Vorher: 47 Seiten und sechs Links. Alles andere war nur ueber den Footer
   erreichbar, also praktisch nicht. Drei Menues bringen jede Seite auf zwei
   Klicks. Auf dem Telefon klappen sie in der Schublade auf statt zu schweben. */

/* Die Menues haengen am Kopf-Container, nicht am einzelnen Knopf. Mittig
   unter dem Knopf ausgerichtet liefen sie bei jeder realistischen Breite
   rechts aus dem Bild und erzeugten waagerechtes Scrollen: bei 1280px waren
   zwei von drei betroffen. */
.header-inner { position: relative; }
.nav-item { position: static; }

.nav-trigger {
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-trigger::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] { color: var(--rose); }
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-trigger:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 20px);
  right: 0;
  left: auto;
  max-width: 100%;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 30px;
  gap: 34px;
  box-shadow: 0 14px 40px rgba(42, 24, 48, 0.10);
  z-index: 60;
}
.nav-trigger[aria-expanded="true"] + .nav-menu { display: flex; }

.nav-col { min-width: 178px; }
.nav-col h3 {
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 12px;
}
.nav-menu a {
  display: block;
  padding: 5px 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.35;
}
.nav-menu a:hover, .nav-menu a:focus-visible { color: var(--rose); }

.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .nav-menu { gap: 26px; padding: 22px 24px; }
  .nav-col { min-width: 156px; }
}

@media (max-width: 940px) {
  .header-inner { position: static; }
  .nav { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 12px 24px 24px;
    gap: 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
  .nav.open .nav-item { border-bottom: 1px solid var(--rule); }
  .nav.open .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 1rem;
    color: var(--ink);
  }
  .nav.open .nav-menu {
    position: static;
    transform: none;
    display: none;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 16px;
    gap: 16px;
    background: transparent;
  }
  .nav.open .nav-trigger[aria-expanded="true"] + .nav-menu { display: flex; }
  .nav.open .btn-small {
    margin: 18px 0 0;
    text-align: center;
    padding: 14px 18px;
  }
  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
  }
}

/* ---------- Typography ---------- */

/* Der Sprung ist die Typografie: 700 gegen 400, gross gegen 17px, dazwischen
   wenig. Fraunces bleibt, laeuft aber schwerer und enger als vorher. */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; font-variation-settings: "opsz" 48; }

/* Artikelseiten: lange Fragetitel bleiben bei zwei bis drei Zeilen. */
.hero .narrow h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }

.eyebrow {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 18px;
}

p { margin: 0 0 1.1em; max-width: 68ch; }

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

.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--muted);
  max-width: 54ch;
}

/* ---------- Sections ---------- */

section { padding: 72px 0; }
section.tight { padding: 44px 0; }
@media (min-width: 900px) {
  section { padding: 96px 0; }
  section.tight { padding: 56px 0; }
}

.section-line { border-top: 1px solid var(--rule); }

/* ---------- Hero ---------- */

.hero { padding: 64px 0 56px; }
@media (min-width: 900px) { .hero { padding: 84px 0 72px; } }

.hero h1 { max-width: 16ch; }

/* Der Falz war links Text und rechts vierzig Prozent Leere. Rechts steht
   jetzt das Einzige, was hier ueberhaupt etwas beweist: eine echte
   Auszahlungshistorie. Screenshots vor Text, wie in der Recherche notiert. */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 56px;
  align-items: center;
}

.hero-proof {
  margin: 0;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 14px;
}

.hero-proof img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-proof figcaption {
  margin-top: 12px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-proof { max-width: 460px; }
}

/* War eine Pille. Jetzt dasselbe Label wie .eyebrow, damit jede Seite
   gleich anfaengt: Rubrik oben, dann die Frage. */
.since {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 18px;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover, .btn:focus-visible { background: var(--accent-deep); color: #fff; }
/* Lichtstreifen bei Hover, reines CSS */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
}
.btn:hover::before { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .btn::before { display: none; } }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--plum);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--plum);
  color: var(--paper);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Promise list (hero trust bar) ---------- */

/* Die Anzahl der Punkte schwankt je Seite zwischen vier und fuenfzehn, also
   kann keine Spaltenzahl aufgehen. Ein Kaestchenraster liess die letzte Reihe
   deshalb immer abgerissen aussehen. Jetzt nur noch waagerechte Linien: eine
   unvollstaendige Reihe ist dann eine kuerzere Reihe und kein Defekt. */

.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 32px;
  row-gap: 0;
  border-top: 1px solid var(--rule);
}

.promises li {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  font-size: 0.98rem;
  line-height: 1.45;
}

.promises strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.promises span { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 700px) {
  .promises li { border-right: none; padding-right: 0; }
}

/* ---------- Two-column split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
}

.track {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--plum);
  border-radius: 18px;
  padding: 28px 28px 24px;
}

.track.rose { border-top-color: var(--accent); }
.track p:last-child { margin-bottom: 0; }

.track h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.track .rate {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--rose);
  font-size: 1rem;
  margin-bottom: 12px;
  display: block;
}

/* ---------- Verified results ---------- */

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.result {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px 24px 22px;
}

.result.rose .track-label { color: var(--accent); }

.result .track-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.result .arc {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.result .arc .arrow { color: var(--muted); margin: 0 4px; }

.result .timeframe {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.result summary {
  cursor: pointer;
  color: var(--rose);
  font-size: 0.86rem;
  font-weight: 700;
  list-style: none;
}

.result summary::-webkit-details-marker { display: none; }
.result summary::after { content: " \2193"; }
.result[open] summary::after { content: " \2191"; }
.result summary:hover { color: var(--plum); }

.result .proof-frame {
  margin-top: 12px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  max-height: 320px;
  overflow-y: auto;
}

.result img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Plum panel ---------- */

.panel {
  background: var(--plum);
  color: var(--paper);
  border-radius: 20px;
  padding: 52px 44px;
}

.panel h2 { color: var(--paper); }
.panel p { color: var(--rose-soft); }
.panel a { color: #fff; }

@media (max-width: 600px) {
  .panel { padding: 36px 24px; border-radius: 14px; }
}

/* ---------- Quote / callout ---------- */

.callout {
  border-left: 3px solid var(--amber);
  padding: 4px 0 4px 22px;
  margin: 32px 0;
  color: var(--muted);
}


/* ---------- Interactive checklist ---------- */
/* Ein Werkzeug, keine Liste. Der Nutzen entsteht durch das Ergebnis am
   Ende, das jemand in eine Mail kopieren kann. */

.checker { border: 1px solid var(--rule); margin: 30px 0; }
.checker-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
}
.checker-head h3 {
  margin: 0 0 4px;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.checker-head p { margin: 0; font-size: 0.88rem; color: var(--muted); }

.checker ul { list-style: none; margin: 0; padding: 0; }
.checker li { border-bottom: 1px solid var(--rule); }
.checker li:last-child { border-bottom: 0; }
.checker label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 20px;
  cursor: pointer;
}
.checker label:hover { background: var(--paper-warm); }
.checker input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--sage); cursor: pointer;
}
.checker .q { display: block; font-weight: 500; color: var(--ink); }
.checker .w { display: block; font-size: 0.86rem; color: var(--muted); margin-top: 3px; }
.checker input:checked ~ div .q { color: var(--muted); }

.checker-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
}
.checker-score { font-size: 0.92rem; color: var(--ink); margin: 0; }
.checker-score strong { font-variant-numeric: tabular-nums; }
.checker-out {
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--rule);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--ink);
}

@media (max-width: 560px) {
  .checker label { padding: 12px 14px; }
  .checker-head, .checker-foot, .checker-out { padding-inline: 14px; }
}

/* ---------- Stat tiles ---------- */
/* Vierte Textur. Zahlen, die eine Seite trägt, stehen als Kachelreihe
   statt im Fließtext. Bewusst ohne Schatten und ohne Rahmenradius, damit
   sie zur Linienoptik passt statt nach Dashboard auszusehen. */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 30px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats > div {
  padding: 20px 22px 20px 0;
  border-right: 1px solid var(--rule);
}
.stats > div:last-child { border-right: 0; }
.stats .n {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stats .l {
  display: block;
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 620px) {
  .stats > div { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .stats > div:last-child { border-bottom: 0; }
}

/* ---------- Worked example ---------- */
/* Eine Rechnung, die jemand nachrechnen kann. Der Unterschied zwischen
   brutto und netto ist die Zahl, die in dieser Branche niemand nennt. */

.sums {
  margin: 26px 0;
  border: 1px solid var(--rule);
}
.sums h3 {
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.sums table { width: 100%; border-collapse: collapse; margin: 0; }
.sums td { padding: 10px 18px; border-bottom: 1px solid var(--rule); font-size: 0.94rem; }
.sums tr:last-child td { border-bottom: 0; }
.sums td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sums tr.total td { font-weight: 700; background: var(--paper-warm); }
.sums tr.total td:last-child { color: var(--plum); }
.sums .note { padding: 12px 18px; margin: 0; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--rule); }

/* ---------- Copyable template ---------- */
/* Ein Baustein, den jemand tatsächlich benutzt. Genau diese Art von
   Element wird von Assistenten wörtlich in Antworten übernommen. */

.template {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--plum);
  background: var(--paper-warm);
  margin: 28px 0;
}
.template-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
}
.template-head h3 {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Karla", system-ui, sans-serif;
  font-weight: 700;
}
.template-copy {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid var(--plum);
  background: transparent;
  color: var(--plum);
  border-radius: 999px;
  padding: 5px 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.template-copy:hover { background: var(--plum); color: var(--paper); }
.template-copy:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.template pre {
  margin: 0;
  padding: 20px 18px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.83rem;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
}
/* Eingabefeld-Block innerhalb einer .template. Der Nutzer fuellt aus,
   das <pre> darunter schreibt sich neu. Fuer den DMCA-Generator. */

.gen {
  padding: 18px;
  border-bottom: 1px solid var(--rule);
}
.gen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.gen label,
.gen-full {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.gen-full { margin-bottom: 16px; }
.gen-full:last-child { margin-bottom: 0; }
.gen .hint {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 3px;
}
.gen textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

@media (max-width: 620px) {
  .gen-grid { grid-template-columns: 1fr; }
}

.template-note {
  padding: 0 18px 16px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Gespraechsprotokoll: nummerierte Frage, Antwortfeld, Einschaetzung.
   Sitzt in einer .template, damit das Ergebnis wie die anderen kopierbaren
   Bloecke aussieht. */

.sheet { border-top: 1px solid var(--rule); }
.sheet-q {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
}
.sheet-n {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--plum);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.sheet-body { flex: 1 1 auto; min-width: 0; }
.sheet-ask {
  display: block;
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.sheet-body textarea { margin-top: 8px; }
.sheet-body select { margin-top: 8px; max-width: 260px; }
.sheet-foot {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.sheet-score { margin: 0; font-size: 0.92rem; color: var(--ink); }

@media (max-width: 620px) {
  .sheet-q { gap: 10px; padding: 14px; }
  .sheet-body select { max-width: 100%; }
}

/* Inhaltsverzeichnis fuer den langen Guide. Drei Spalten, damit die
   sechzehn Kapitel als Struktur lesbar sind statt als Liste. */

.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0 18px; }
.toc h2 {
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.toc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.toc-cols h3 {
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.toc-cols ol { margin: 0; padding-left: 1.1em; }
.toc-cols li { font-size: 0.9rem; line-height: 1.45; margin-bottom: 5px; color: var(--muted); }
.toc-cols a { color: var(--plum); text-decoration: none; border-bottom: 1px solid var(--rule); }
.toc-cols a:hover { border-bottom-color: var(--rose); }
.toc-note { margin: 18px 0 0; font-size: 0.85rem; color: var(--muted); }

@media (max-width: 760px) {
  .toc-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Answer-first block ---------- */
/* Steht direkt unter der Byline und beantwortet die Frage der Seite in
   einem Stück, das für sich allein zitierbar ist. Zweite Textur neben
   dem Fließtext, damit die Seiten nicht als ein Block gelesen werden. */

.answer {
  background: var(--paper-warm);
  padding: 26px 30px;
  margin: 0 0 8px;
}
.answer h2 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  font-family: "Karla", system-ui, sans-serif;
  font-weight: 700;
}
.answer p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.62;
}
.answer p + p { margin-top: 12px; }

@media (max-width: 560px) {
  .answer { padding: 20px 18px; }
}

/* ---------- Byline and source context ---------- */
/* Used at the top of every editorial page. Says who wrote it, when it was
   last verified, and where the working rules are published. */

.byline-band { padding: 0; }

.byline {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  margin: 0 0 34px;
  display: grid;
  gap: 16px;
}

.byline-who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.byline-mark {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 999px;
  background: var(--plum);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Auf das Textelement begrenzen, sonst gewinnt diese Regel gegen
   .byline-mark und macht die Initialen unsichtbar. */
.byline-who > div strong { display: block; font-weight: 700; }
.byline-who > div span { display: block; font-size: 0.87rem; color: var(--muted); }

.byline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0;
}
.byline-meta > div { margin: 0; }
.byline-meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.byline-meta dd {
  margin: 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.byline-context {
  margin: 0;
  font-size: 0.87rem;
  color: var(--muted);
}
.byline-context strong {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 6px;
}
.byline-context a { color: var(--rose); }

@media (max-width: 560px) {
  .byline-meta { gap: 12px 22px; }
}

/* ---------- Footer ---------- */

/* Vorher drei Spalten, davon eine mit elf Ueberschriften und 45 Links
   untereinander. Jetzt fuenf Spalten nach Absicht: kaufen, pruefen, nutzen,
   lernen, vergleichen. Dunkel, damit die Seite einen Boden hat. */
.site-footer {
  background: var(--plum);
  color: var(--rose-soft);
  padding: 64px 0 32px;
  font-size: 0.92rem;
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding-bottom: 36px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--plum-line);
}
.footer-brand .logo { color: var(--paper); }
.footer-brand .logo span { color: var(--rose-soft); }
.footer-brand p { margin: 8px 0 0; max-width: 40ch; color: var(--rose-soft); }
.footer-brand .btn { background: var(--paper); color: var(--plum); }
.footer-brand .btn:hover { background: var(--rose-soft); color: var(--plum-deep); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 28px;
  margin-bottom: 40px;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

.footer-grid h4 {
  font-family: 'Karla', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 14px;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; line-height: 1.35; }
.footer-grid a { color: var(--rose-soft); text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }

.footer-inline {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.85rem;
  padding: 18px 0;
  border-top: 1px solid var(--plum-line);
  color: var(--muted-light);
}
.footer-inline strong { color: var(--paper); font-weight: 700; margin-right: 4px; }
.footer-inline a { color: var(--rose-soft); text-decoration: none; }
.footer-inline a:hover { color: #fff; }

.footer-legal {
  border-top: 1px solid var(--plum-line);
  padding-top: 22px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted-light);
}
.footer-legal strong { color: var(--paper); }
.footer-legal a { color: var(--rose-soft); }

/* ---------- Utility ---------- */

.muted { color: var(--muted); }
.center { text-align: center; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  background: var(--plum);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}

/* ---------- Prose pages (guide, legal, articles) ---------- */

.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { max-width: 66ch; }
.prose li { margin-bottom: 8px; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 0.94rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  border-bottom: 2px solid var(--plum);
}
.prose tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .prose table { font-size: 0.85rem; }
  .prose th, .prose td { padding: 9px 8px; }
}

.prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

/* ---------- Forms ---------- */

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 620px) {
  .field-grid { grid-template-columns: 1fr; }
}

form label {
  display: block;
  font-size: 0.94rem;
  font-weight: 500;
}

form label.full { margin-bottom: 24px; }

.req { color: var(--rose); }

.hint {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 4px;
}

input[type="text"], input[type="email"], input[type="url"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(184, 85, 112, 0.14);
}

label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

label.check input { margin-top: 4px; }

.hp { position: absolute; left: -9999px; }

/* ---------- Calculator ---------- */

.calc .field { margin-bottom: 26px; }

.calc .field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.calc .field label { color: var(--paper); font-weight: 500; }

.calc .field-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--rose-soft);
  font-variant-numeric: tabular-nums;
}

.calc input[type="number"],
.calc select {
  max-width: 260px;
  font-variant-numeric: tabular-nums;
}

.calc .field-hint {
  font-size: 0.85rem;
  color: var(--muted-light);
  margin: 2px 0 12px;
  max-width: 46ch;
}

.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}
.calc input[type="range"]:focus { box-shadow: none; }
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--plum-line); border-radius: 2px;
}
.calc input[type="range"]::-moz-range-track {
  height: 4px; background: var(--plum-line); border-radius: 2px;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 22px; width: 22px; border-radius: 50%;
  background: var(--rose); border: 3px solid var(--plum); margin-top: -9px;
}
.calc input[type="range"]::-moz-range-thumb {
  height: 16px; width: 16px; border-radius: 50%;
  background: var(--rose); border: 3px solid var(--plum);
}

.calc .scale {
  display: flex; justify-content: space-between;
  font-size: 0.76rem; color: var(--muted-light); margin-top: 6px;
}

.calc .verdict {
  background: var(--paper);
  border-radius: 14px;
  padding: 24px 22px;
  margin-top: 28px;
  color: var(--ink);
}
.calc .verdict-label { font-size: 0.88rem; color: var(--muted); margin: 0 0 4px; }
/* Ohne eigene Farbe gewann .panel p und die Zahl stand in Rosa auf Papier,
   gemessen 1.4:1 auf der Steuerseite, wo JS keine .up/.down-Klasse setzt. */
.calc .verdict-number {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 7vw, 2.7rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc .verdict-number.up { color: var(--sage); }
.calc .verdict-number.down { color: var(--rose); }
.calc .verdict-sub { font-size: 0.95rem; margin: 8px 0 0; color: var(--ink); }

.calc .rows { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px; }
.calc .row {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 0.95rem;
}
.calc .row span:first-child { color: var(--muted); }
.calc .row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

.calc .breakeven {
  margin-top: 26px; padding: 18px 20px;
  background: var(--plum-deep);
  border-left: 3px solid var(--amber);
  border-radius: 0;
}
.calc .breakeven p { color: var(--muted-light); font-size: 0.92rem; }
.calc .breakeven strong { color: var(--amber); }

/* ---------- Cookie consent banner ---------- */

/* War ein dunkler Balken ueber die volle Breite und damit auf jeder Seite
   das Erste, was auffiel. Als Karte unten links nimmt er ein Achtel des
   Platzes weg und der Falz gehoert wieder der Seite. Auf dem Telefon bleibt
   er volle Breite, weil eine schmale Karte dort nichts gewinnt. */

/* Als Karte unten links lag er auf jedem ersten Besuch ueber dem Inhalt:
   auf dem Desktop ueber der ersten Versprechen-Kachel, auf dem Telefon ueber
   der halben Seite. Jetzt ein flacher Balken am unteren Rand, eine Zeile. */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--plum-deep);
  color: var(--paper);
  border-top: 1px solid var(--plum-line);
  z-index: 200;
  padding: 10px 0;
}

.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--rose-soft);
  max-width: none;
}

.cookie-banner a { color: #fff; }

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.btn-sm { padding: 8px 18px; font-size: 0.86rem; }

.cookie-banner .btn { background: var(--paper); color: var(--plum); }
.cookie-banner .btn:hover { background: var(--rose); color: #fff; }
.cookie-banner .btn-ghost { background: transparent; color: var(--paper); border: 1px solid var(--plum-line); }
.cookie-banner .btn-ghost:hover { background: var(--plum-line); color: var(--paper); }

@media (max-width: 720px) {
  .cookie-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .cookie-banner p { font-size: 0.8rem; }
  .cookie-actions { justify-content: flex-end; }
  .cookie-actions .btn { padding: 7px 16px; font-size: 0.82rem; }
}


/* ==========================================================================
   Rhythmus, Bewegung, Fortschritt
   Die Seite las sich als eine Fläche: jede Sektion derselbe Grundton, die
   Trennung nur eine 1px-Linie. Drei Bänder wechseln jetzt die Fläche, damit
   das Auge sieht wo ein Gedanke anfängt, und die Bewegung ist bewusst klein.
   ========================================================================== */

/* ---------- Flächenwechsel ---------- */

.band-warm {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.band-white {
  background: #fff;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Genau ein dunkler Block pro Seite. Das schliesst .panel mit ein: eine
   .band-dark direkt neben einem dunklen Panel hebt sich gegenseitig auf. */
.band-dark {
  background: var(--plum);
  color: var(--paper);
  border-top: 1px solid var(--plum-line);
  border-bottom: 1px solid var(--plum-line);
}
.band-dark h1,
.band-dark h2,
.band-dark h3 { color: var(--paper); }
.band-dark p { color: var(--rose-soft); }
.band-dark .lead { color: var(--rose-soft); }
.band-dark a:not(.btn) { color: #fff; border-bottom-color: var(--plum-line); }
.band-dark a:not(.btn):hover { border-bottom-color: var(--rose-soft); }
.band-dark hr,
.band-dark .rule { border-color: var(--plum-line); }

/* Zwei gleich getönte Bänder direkt hintereinander ergeben eine doppelte
   Linie und keinen Wechsel. Die innere Kante fällt weg. */
.band-warm + .band-warm,
.band-white + .band-white,
.band-dark + .band-dark { border-top: 0; }

/* Buttons in einem dunklen Band. Ohne das steht Pflaume auf Pflaume und
   der Button verschwindet: gemessener Kontrast 1.14, praktisch unsichtbar.
   Das ist genau die Spezifitaetskollision, vor der CLAUDE.md warnt, nur
   diesmal durch die Flaeche statt durch einen Selektor. */

.band-dark .btn {
  background: var(--paper);
  color: var(--plum);
}
.band-dark .btn:hover,
.band-dark .btn:focus-visible {
  background: var(--rose-soft);
  color: var(--plum-deep);
}

.band-dark .btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--rose-soft);
}
.band-dark .btn-ghost:hover,
.band-dark .btn-ghost:focus-visible {
  background: var(--paper);
  color: var(--plum);
}

/* Helle Bausteine in einem dunklen Band. .sums hat selbst keine Flaeche,
   nur einen Rahmen, also stand die Tabelle direkt auf Pflaume und die Zahlen
   waren mit 1.14 unsichtbar. Die Ueberschrift verlor zusaetzlich gegen
   .band-dark h3 und wurde hell auf hell.

   Die Bausteine bekommen deshalb hier eine eigene Flaeche, und der Reset
   greift auf alle Nachfahren, weil sonst jede einzelne Elementregel aus
   .band-dark gewinnt. Eng auf diese vier Klassen begrenzt, damit nichts
   nach aussen leckt. */

.band-dark .sums,
.band-dark .template,
.band-dark .checker {
  background: var(--paper);
}

.band-dark .sums *,
.band-dark .template *,
.band-dark .checker *,
.band-dark .calc-light *,
.band-dark .answer * {
  color: var(--ink);
}
.band-dark .calc-light .muted,
.band-dark .calc-light .verdict-label,
.band-dark .calc-light .scale { color: var(--muted); }
.band-dark .calc-light .field-value { color: var(--accent); }

.band-dark .sums .note,
.band-dark .template-note,
.band-dark .checker .w,
.band-dark .checker-head p { color: var(--muted); }

.band-dark .sums h3,
.band-dark .template-head h3,
.band-dark .checker-head h3 { color: var(--muted); }

.band-dark .sums a,
.band-dark .template a,
.band-dark .checker a,
.band-dark .answer a { color: var(--plum); }

/* ---------- Lesefortschritt ---------- */
/* 2px, fixed, nur skaliert. Der billigste Effekt mit der groessten Wirkung,
   und auf langen Seiten die einzige Auskunft darueber, wie viel noch kommt. */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 100;
  pointer-events: none;
}

/* ---------- Reveal ---------- */
/* Laeuft genau einmal, startet bevor das Element sichtbar wird, und ist
   komplett aus, wenn das System reduzierte Bewegung verlangt. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}

.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .progress { display: none; }
}

/* ---------- Hover, ueberall dieselbe Kurve ---------- */

.btn, .btn-small, .template-copy, .result, .track, .card {
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.result:hover, .track:hover, a.card:hover { transform: translateY(-2px); border-color: var(--accent); }


/* ---------- Bewerbung in drei Schritten ---------- */
/* Fuenfzehn Felder auf einem Bildschirm sind der Fall, in dem ein
   mehrstufiges Formular deutlich besser abschliesst. Ohne JavaScript sind
   alle drei Schritte sichtbar und das Formular ist genau das, was es vorher
   war: die Aufteilung haengt an .js-steps, das nur JS setzt. */

.steps-head { margin: 0 0 26px; }

.steps-count {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: var(--muted);
}
.steps-count strong { color: var(--ink); }
.steps-count span { color: var(--ink); }
.steps-count span::before { content: "\00b7"; margin: 0 8px; color: var(--rule); }

.steps-bar {
  height: 3px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.steps-bar span {
  display: block;
  height: 100%;
  width: 33.33%;
  background: var(--rose);
  border-radius: 999px;
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}

.step-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.js-steps .step[hidden] { display: none; }
.js-steps .step h2:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .steps-bar span { transition: none; }
}


/* ---------- Werkzeuge auf der Startseite ---------- */
/* Die Rechner und Vorlagen sind der einzige echte Unterschied zu jeder
   anderen Agenturseite, und sie waren auf der Startseite unsichtbar. Keine
   Karten mit Schatten: die Trennung sind Linien, wie ueberall sonst hier. */

.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.tool {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
.tool:hover, .tool:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.tool:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }

.tool-kind {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rose);
}

.tool strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.tool-does {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.tool::after {
  content: "Open \2192";
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--plum);
}
.tool:hover::after { color: var(--rose); }

.band-white .tool { background: var(--paper); }

/* Founder line on the commercial pages: a person, not a company voice */
.founder-line { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--muted); max-width: 62ch; }
.founder-line strong { color: var(--ink); }


/* ==========================================================================
   Design System v2, 11. September 2026
   Ein Akzent, ein Typografie-Sprung, drei Karten-Komponenten, ein Boden.
   ========================================================================== */

/* ---------- Ankuendigungsleiste ---------- */
/* Die erste Zahl in Sekunde eins. Steht ueber dem Header, scrollt mit weg. */
.announce {
  background: var(--plum-deep);
  color: var(--rose-soft);
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: center;
  padding: 9px 24px;
}
.announce strong { color: #fff; font-weight: 700; }
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--rose-soft); }

/* ---------- Karte ---------- */
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 26px 26px 22px;
  color: inherit;
  text-decoration: none;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* ---------- Hero, Startseite ---------- */
.hero-proofline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--muted);
}
.hero-proofline li { display: flex; align-items: center; }
.hero-proofline li + li::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--rule); margin: 0 12px; }
.hero-proofline strong { color: var(--ink); font-weight: 700; margin-right: 5px; }

.hero-figure {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 22px 22px 18px;
}
.hero-figure .big {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-figure .big .arrow { color: var(--accent); margin: 0 8px; }
.hero-figure .sub { display: block; margin: 8px 0 16px; font-size: 0.9rem; color: var(--muted); }
.hero-figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); }
.hero-figure figcaption { margin-top: 12px; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .btn-row .btn { padding: 13px 22px; font-size: 0.95rem; }
}

/* ---------- Zahlenband ---------- */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.numbers > div { padding: 8px 28px 8px 0; border-right: 1px solid var(--rule); }
.numbers > div + div { padding-left: 28px; }
.numbers > div:last-child { border-right: 0; }
.numbers .n {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.numbers .l { display: block; margin-top: 8px; font-size: 0.88rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 860px) {
  .numbers { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .numbers > div:nth-child(2) { border-right: 0; }
  .numbers > div:nth-child(3) { padding-left: 0; }
}
@media (max-width: 460px) {
  .numbers { grid-template-columns: 1fr; }
  .numbers > div, .numbers > div + div { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .numbers > div:last-child { border-bottom: 0; }
}

/* ---------- Haekchenliste ---------- */
.checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; line-height: 1.5; }
.checks li::before {
  content: "\2713";
  grid-column: 1; grid-row: 1 / span 2;
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 0.8rem; font-weight: 700; margin-top: 2px;
}
.checks li > * { grid-column: 2; }
.checks strong { display: block; }
.checks span { color: var(--muted); font-size: 0.94rem; }
.band-dark .checks li::before { background: var(--rose-soft); color: var(--plum-deep); }
.band-dark .checks strong { color: var(--paper); }
.band-dark .checks span { color: var(--rose-soft); }
.checks.two { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
@media (max-width: 760px) { .checks.two { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 18px;
  font-family: 'Karla', sans-serif; font-weight: 400; font-size: 1.5rem; color: var(--accent);
  transition: transform .18s ease;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 22px; max-width: 66ch; color: var(--ink); }
.faq details p + p { margin-top: -10px; }

/* ---------- Gruender ---------- */
.founder {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: center;
}
.founder-mark {
  width: 96px; height: 96px; border-radius: 999px;
  background: var(--plum); color: var(--paper);
  display: grid; place-items: center;
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 2rem;
}
.founder h2 { font-size: 1.6rem; margin-bottom: 8px; }
.founder p { margin: 0 0 8px; }
.founder .facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 560px) { .founder { grid-template-columns: 1fr; gap: 16px; } .founder-mark { width: 72px; height: 72px; font-size: 1.5rem; } }

/* ---------- Break-even-Widget ---------- */
.calc-mini { max-width: 720px; }
.calc-mini .verdict { margin-top: 22px; }

/* ---------- Bewerbung: Hero und Formular nebeneinander ---------- */
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px;
  align-items: start;
}
.apply-form-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 30px 28px;
}
.apply-aside .checks { margin-top: 30px; }
@media (max-width: 960px) {
  .apply-grid { grid-template-columns: 1fr; gap: 28px; }
  .apply-form-card { padding: 24px 20px; border-radius: 16px; }
}

/* Break-even-Widget auf hellem Grund. Die .calc-Regeln sind fuer das dunkle
   Panel geschrieben, das hier nicht stehen darf, weil die Seite schon ein
   dunkles Band traegt. */
.calc-light .field { margin-bottom: 22px; }
.calc-light .field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.calc-light .field label { font-weight: 500; color: var(--ink); }
.calc-light .field-value { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.calc-light input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; margin: 10px 0 0; padding: 0; border: 0; cursor: pointer; }
.calc-light input[type="range"]:focus { box-shadow: none; outline: none; }
.calc-light input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--rule); border-radius: 2px; }
.calc-light input[type="range"]::-moz-range-track { height: 4px; background: var(--rule); border-radius: 2px; }
.calc-light input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 22px; width: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--rule); margin-top: -9px; }
.calc-light input[type="range"]::-moz-range-thumb { height: 16px; width: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; }
.calc-light .scale { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); margin-top: 6px; }
.calc-light .verdict { background: var(--paper-warm); border-radius: 14px; padding: 22px 22px; margin-top: 6px; }
.calc-light .verdict-label { font-size: 0.88rem; color: var(--muted); margin: 0 0 4px; }
.calc-light .verdict-number { font-family: 'Fraunces', Georgia, serif; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-light .verdict-sub { font-size: 0.95rem; margin: 8px 0 0; color: var(--ink); }

/* Drei Zahlen nebeneinander, kleiner als das Startseitenband */
.numbers.three { grid-template-columns: repeat(3, 1fr); }
.numbers.three .n { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.numbers.three .l { font-size: 0.82rem; }
@media (max-width: 860px) { .numbers.three { grid-template-columns: repeat(3, 1fr); } .numbers.three > div:nth-child(2) { border-right: 1px solid var(--rule); } .numbers.three > div:nth-child(3) { padding-left: 20px; } }
@media (max-width: 460px) { .numbers.three { grid-template-columns: 1fr; } .numbers.three > div, .numbers.three > div + div { border-right: 0; padding-left: 0; } }