/* Taschenvoll: Landingpage und kostenlose Rechner
   Layout: ruhige Creme-Fläche, eine zentrierte Spalte, Karten nur dort, wo ein Block für sich steht */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-300-normal.woff2") format("woff2") }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2") }
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2") }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2") }
@font-face { font-family: "DM Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-600-normal.woff2") format("woff2") }

:root {
  --canvas: #F7F3EE; --surface: #FBFAF7; --ink: #1F1D1B; --muted: #7A6E63;
  --taupe: #B8A99A; --sage: #9DA89D; --sage-ink: #5E6C5E; --note: #8FB08A; --terra: #C68A6E; --terra-ink: #A3654A;
  --line: #E8E2D9; --track: #EEE8E0; --focus: #8C7D6F;
  --display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --canvas: #1B1917; --surface: #23201D; --ink: #EEE8E0; --muted: #AFA294;
  --taupe: #8F8174; --sage: #8E9A8E; --sage-ink: #AEBDAE; --terra: #C68A6E; --terra-ink: #E0A487;
  --line: #36312B; --track: #2E2A26; --focus: #CDBFB0; color-scheme: dark } }
:root[data-theme="dark"] {
  --canvas: #1B1917; --surface: #23201D; --ink: #EEE8E0; --muted: #AFA294;
  --taupe: #8F8174; --sage: #8E9A8E; --sage-ink: #AEBDAE; --terra: #C68A6E; --terra-ink: #E0A487;
  --line: #36312B; --track: #2E2A26; --focus: #CDBFB0; color-scheme: dark }

* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased }
img, svg { max-width: 100% }
a { color: inherit }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px }
.wrap { max-width: 1140px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; text-wrap: balance; letter-spacing: .005em }
h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.06 }
h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15 }
h3 { font-size: 19px; font-weight: 400; line-height: 1.3 }
p { margin: 0 }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 56ch }
.muted { color: var(--muted) }
.num { font-variant-numeric: tabular-nums }
.out { color: var(--terra-ink) }
.good { color: var(--sage-ink) }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 11px 20px; border-radius: 999px; font: 500 15px/1.2 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap }
.btn:hover { border-color: var(--taupe) }
.btn.primary { background: var(--ink); color: var(--canvas); border-color: var(--ink) }
.btn.primary:hover { opacity: .9 }
.btn.lg { padding: 15px 26px; font-size: 16px }
.btn.sm { padding: 6px 12px; font-size: 13px }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted) }
.btn.ghost:hover { color: var(--ink) }
.link { color: var(--ink); text-underline-offset: 3px }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--canvas) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px }
.brand { display: flex; align-items: center; gap: 9px; font: 400 18px var(--display); text-decoration: none; color: var(--ink) }
.brand svg { width: 26px; height: 30px; flex: none }
.nav { display: flex; gap: 4px; margin-left: auto }
.nav a { text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: 999px; font-size: 15px }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink) }
.top .acts { display: flex; gap: 8px; align-items: center }
@media (max-width: 860px) { .nav { display: none } .top .acts { margin-left: auto } .top .acts .ghost { display: none } }

/* sections */
section[id] { scroll-margin-top: 72px }
section { padding-block: clamp(56px, 8vw, 96px) }
.sechead { display: grid; gap: 12px; margin-bottom: 36px; max-width: 680px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; min-width: 0 }

/* hero */
.hero { padding-block: clamp(48px, 7vw, 88px) clamp(48px, 7vw, 80px) }
.hero .wrap { padding-bottom: 28px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: center }
.hero-copy { display: grid; gap: 22px; justify-items: start }
.hero-copy h1 em { font-style: normal; color: var(--sage-ink) }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px }
.hero-note { font-size: 14px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap }
.hero-note span::before { content: "✓"; color: var(--sage-ink); margin-right: 6px; font-weight: 600 }
.mock { position: relative; display: grid; gap: 12px }
.mock-tile { display: flex; justify-content: space-between; align-items: end; gap: 16px }
.mock-tile .big { font: 300 clamp(30px, 3.4vw, 40px)/1 var(--display) }
.mock-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line) }
.mock-row:first-of-type { border-top: 0 }
.mock-row .emo { font-size: 20px; grid-row: span 2 }
.mock-row .name { font-weight: 500; font-size: 15px }
.mock-row .amt { font-size: 14px; color: var(--muted) }
.mock-row .bar { grid-column: 2 / -1 }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--sage-ink) }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage) }
.pill.close { color: var(--muted) } .pill.close::before { background: var(--taupe) }
.pill.behind { color: var(--terra-ink) } .pill.behind::before { background: var(--terra) }
.bar { height: 7px; border-radius: 7px; background: var(--track); overflow: hidden }
.bar > b { display: block; height: 100%; border-radius: 7px; background: var(--taupe) }
.bar.done > b { background: var(--sage) }
.mock-float { position: absolute; right: -14px; bottom: -44px; padding: 14px 18px; border-radius: 16px; display: grid; gap: 2px; box-shadow: 0 10px 30px rgba(31,29,27,.08) }
.mock-float .k { font-size: 12px; color: var(--muted) }
.mock-float .v { font: 400 20px var(--display) }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr } .mock-float { right: 12px } }

/* calculator cards */
.calcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.calc-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s }
.calc-card:hover { border-color: var(--taupe); transform: translateY(-2px) }
@media (prefers-reduced-motion: reduce) { .calc-card { transition: none } .calc-card:hover { transform: none } }
.calc-card p { font-size: 14px; color: var(--muted) }
.calc-card .sample { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; font-size: 13px; color: var(--muted); display: grid; gap: 2px }
.calc-card .sample b { font: 400 22px var(--display); color: var(--ink) }
.calc-card .go { font-size: 14px; font-weight: 500 }
.free-tag { justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); background: color-mix(in srgb, var(--sage) 22%, transparent); padding: 4px 10px; border-radius: 999px }
@media (max-width: 1000px) { .calcs { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .calcs { grid-template-columns: 1fr } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step }
.step { display: grid; gap: 10px; align-content: start }
.step::before { counter-increment: step; content: counter(step); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sage); color: var(--sage-ink); display: grid; place-items: center; font: 300 22px var(--display) }
.step p { color: var(--muted); font-size: 15px }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr } }

/* free vs plan */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch }
.compare .card { display: grid; gap: 16px; align-content: start }
.compare .plan-card { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px }
.checks li::before { content: "✓"; color: var(--sage-ink); font-weight: 600 }
.checks li span { color: var(--muted); display: block; font-size: 14px }
.checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr } .checks.two { grid-template-columns: 1fr } }

/* pricing */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.price-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; position: relative }
.price-card.featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.price-card .amount { font: 300 40px/1.1 var(--display) }
.price-card .amount .per { font: 400 14px var(--body); color: var(--muted); margin-left: 6px }
.price-card p { color: var(--muted); font-size: 14px }
.badge { position: absolute; top: -12px; left: 24px; background: var(--ink); color: var(--canvas); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px }
.fine { font-size: 13px; color: var(--muted); text-align: center; margin-top: 20px }
@media (max-width: 860px) { .prices { grid-template-columns: 1fr } }

/* faq */
.faq { display: grid; gap: 0; max-width: 780px; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0 }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 500; font-size: 17px; position: relative }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 300 26px var(--display); color: var(--muted) }
.faq details[open] summary::after { content: "–" }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 66ch }

/* final cta */
.final { text-align: center }
.final .card { display: grid; gap: 18px; justify-items: center; padding: clamp(36px, 6vw, 64px) 24px }
.final .lead { margin-inline: auto }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 36px 48px; font-size: 14px; color: var(--muted) }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: start }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px }
.foot a { color: var(--muted); text-decoration: none }
.foot a:hover { color: var(--ink); text-decoration: underline }

/* calculator pages */
.calc-head { padding-block: clamp(36px, 5vw, 56px) 24px; display: grid; gap: 14px }
.crumbs { font-size: 14px; color: var(--muted) }
.crumbs a { color: var(--muted) }
.calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; padding-bottom: 24px }
.calc-in { display: grid; gap: 18px }
.calc-out { display: grid; gap: 14px; position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)) }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr } .calc-out { position: static } }
.group { display: grid; gap: 10px }
.group + .group { border-top: 1px solid var(--line); padding-top: 18px }
.group h2 { font-size: 20px; font-weight: 400 }
.field { display: grid; gap: 6px; min-width: 0; align-content: start }
.field label, .lbl { font-size: 14px; font-weight: 500 }
.field .hint { font-size: 13px; color: var(--muted) }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr } }
.input { width: 100%; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); border-radius: 12px; padding: 12px 14px; font: 16px var(--body); min-width: 0 }
.input:hover { border-color: var(--taupe) }
.money { position: relative }
.money .input { padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums }
.money::after { content: attr(data-unit); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 36px; gap: 10px; align-items: center }
.row .rlabel { font-size: 15px }
.row .input.rname { text-align: left; padding-right: 14px }
@media (max-width: 480px) { .row { grid-template-columns: minmax(0, 1fr) 120px 32px } }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--canvas) }
.seg button { border: 0; background: transparent; color: var(--ink); padding: 10px 16px; cursor: pointer; font: 15px var(--body) }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--canvas) }
.result { display: grid; gap: 8px }
.result .big { font: 300 clamp(38px, 5vw, 52px)/1.05 var(--display) }
.result .sub { color: var(--muted); font-size: 15px }
.kv { display: grid; gap: 8px; font-size: 15px; margin: 0 }
.kv div { display: flex; justify-content: space-between; gap: 12px }
.kv dt { color: var(--muted) }
.kv dd { margin: 0; font-variant-numeric: tabular-nums }
.kv .total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 600 }
.kv .total dt { color: var(--ink) }
.cta-card { display: grid; gap: 12px; background: var(--ink); color: var(--canvas); border-color: var(--ink) }
.cta-card p { color: color-mix(in srgb, var(--canvas) 75%, transparent); font-size: 15px }
.cta-card .btn { background: var(--canvas); color: var(--ink); border-color: var(--canvas); justify-self: start }
.privacy { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: start }
.prose { max-width: 70ch; display: grid; gap: 14px; color: var(--ink) }
.prose p, .prose li { color: var(--muted) }
.prose h2 { font-size: 26px; margin-top: 10px }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px }
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
@media (max-width: 860px) { .more { grid-template-columns: 1fr } }
.hbar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; font-size: 14px }
.hbar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chart text { fill: var(--muted); font: 11px var(--body) }
.stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--track) }
.stack i { display: block; height: 100% }
.c-fix { background: var(--taupe) } .c-var { background: var(--terra) } .c-sav { background: var(--sage) } .c-rest { background: var(--line) }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 8px }
.rule { display: grid; gap: 6px }
.rule-top { display: flex; justify-content: space-between; font-size: 14px }
.warn { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--terra) 16%, transparent); font-size: 14px }
.okmsg { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--sage) 22%, transparent); font-size: 14px }

/* spar-challenges */
.ch-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; padding-bottom: 20px }
@media (max-width: 900px) { .ch-top { grid-template-columns: 1fr } }
.ch-settings { display: grid; gap: 16px }
.ch-settings .rowf { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end }
.ch-stats { display: grid; gap: 10px }
.ch-stats .big { font: 300 clamp(36px, 4.6vw, 48px)/1.05 var(--display) }
.ch-msg { min-height: 1.4em; font-size: 15px }
.ch-acts { display: flex; flex-wrap: wrap; gap: 8px }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding-block: 8px 24px }
.cell { appearance: none; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px 9px; display: grid; gap: 2px; justify-items: center; cursor: pointer; position: relative; min-height: 76px; transition: background .15s, border-color .15s }
.cell:hover { border-color: var(--taupe) }
.cell .k { font-size: 11px; color: var(--muted); letter-spacing: .04em }
.cell .v { font: 400 19px var(--display); font-variant-numeric: tabular-nums }
.cell .d { font-size: 11px; color: var(--muted) }
.cell.now { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.cell.late:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--terra) 60%, var(--line)) }
.cell[aria-pressed="true"] { background: color-mix(in srgb, var(--sage) 30%, var(--surface)); border-color: var(--sage) }
.cell[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 5px; right: 8px; font-size: 12px; font-weight: 700; color: var(--sage-ink) }
.cell[aria-pressed="true"] .v { color: var(--sage-ink) }
.cell.env { padding-top: 22px; background-image: linear-gradient(to bottom right, transparent 49%, var(--line) 50%, transparent 51%), linear-gradient(to bottom left, transparent 49%, var(--line) 50%, transparent 51%); background-size: 50% 18px; background-position: left top, right top; background-repeat: no-repeat }
.cell.env[aria-pressed="true"] { background-color: color-mix(in srgb, var(--sage) 30%, var(--surface)) }
.cell.drawn { animation: pulse 1.2s ease 2 }
@keyframes pulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--note) } }
@media (prefers-reduced-motion: reduce) { .cell { transition: none } .cell.drawn { animation: none } }
.print-only { display: none }
@media print {
  @page { margin: 12mm }
  body { background: #fff; color: #000; font-size: 11pt }
  .top, .foot, .no-print, .prose, .more-sec { display: none !important }
  .print-only { display: block }
  .wrap { max-width: none; padding: 0 }
  .ch-top { display: block }
  .cgrid { grid-template-columns: repeat(8, 1fr); gap: 4px }
  .cell { border: 1px solid #555; border-radius: 6px; min-height: 0; padding: 5px 2px; background: #fff !important; color: #000; break-inside: avoid; box-shadow: none !important }
  .cell .v { font-size: 13pt }
  .cell[aria-pressed="true"]::after { color: #000 }
  .cell.env { background-image: none }
}
.field .seg { justify-self: start }
@media print { .ch-stats { background: #fff; border-color: #999 } .ch-stats .privacy, .ch-msg { display: none } }

.calc-card .go-btn { justify-self: start; align-self: end; margin-top: 8px }
.calc-card:hover .go-btn { border-color: var(--ink); background: var(--ink); color: var(--canvas) }

/* Challenges gegen Freunde */
.fr-sec { padding-bottom: 20px }
.fr-card { display: grid; gap: 16px; max-width: 760px }
.fr-card h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 4px }
.fr-lead { margin: 0; max-width: 60ch }
#fr-body { display: grid; gap: 16px }
.fr-small { font-size: 13px; margin: 0 }
.fr-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px }
.fr-invite { border: 1px solid var(--note); background: color-mix(in srgb, var(--note) 12%, var(--surface)); border-radius: 16px; padding: 18px; display: grid; gap: 12px }
.fr-invite p { margin: 0 }
.fr-form { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end }
.fr-form .field { flex: 1 1 200px }
.fr-group { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 12px }
.fr-group header { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center }
.fr-group h3 { margin: 0; font-size: 19px }
.fr-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.fr-board li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 12px }
.fr-board li.me { background: color-mix(in srgb, var(--taupe) 14%, transparent) }
.fr-board .bar { grid-column: 2 / -1; height: 8px }
.fr-rank { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px }
.fr-who { display: grid; min-width: 0 }
.fr-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fr-who .muted { font-size: 12px }
.fr-pct { font-weight: 600; font-size: 17px }
.fr-new summary { cursor: pointer; color: var(--muted); font-size: 15px; margin-bottom: 12px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }