/* Ein Tag mit dem Landy — Stil.
   Systemschriften, keine externen Ressourcen: schnell und datenschutzfreundlich. */

:root {
  --bg:#F3F0E7; --surface:#FFFFFF; --ink:#22271C; --muted:#5F6655;
  --line:#DCD7C7; --accent:#31492F; --accent-ink:#F7F5EE;
  --soft:#E8E9DB; --shadow:0 1px 2px rgba(34,39,28,.06), 0 8px 24px rgba(34,39,28,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#14170F; --surface:#1D2118; --ink:#ECEADF; --muted:#A3A995;
    --line:#31371F; --accent:#9CC17C; --accent-ink:#131709;
    --soft:#242918; --shadow:none;
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap {
  max-width:33rem; margin:0 auto;
  padding:2.4rem 1.35rem 1rem;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
}

.kicker {
  margin:0 0 .55rem; font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
h1 {
  margin:0 0 .7rem; font-size:clamp(2.05rem,8.5vw,2.7rem);
  line-height:1.08; letter-spacing:-.022em; font-weight:700;
}
p { margin:0 0 1rem; }
.lead { font-size:1.16rem; line-height:1.42; color:var(--ink); }
p, .lead { overflow-wrap:break-word; }
strong { font-weight:650; }

.facts {
  list-style:none; margin:1.4rem 0 0; padding:.9rem 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1rem;
}
@media (max-width:340px) { .facts { grid-template-columns:1fr; } }
.facts li {
  padding-left:1.05rem; position:relative;
  color:var(--muted); font-size:.95rem; line-height:1.35;
}
.facts li::before {
  content:""; position:absolute; left:0; top:.52rem;
  width:.38rem; height:.38rem; border-radius:50%; background:var(--accent);
}

.price {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1.4rem 1.3rem; margin:1.6rem 0 1.5rem; text-align:center;
  box-shadow:var(--shadow);
}
.price-num {
  font-size:clamp(3rem,15vw,3.9rem); line-height:1; font-weight:700;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.price-sub { color:var(--muted); margin-top:.35rem; font-size:.97rem; }
.price-note {
  margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--line);
  font-size:1rem;
}

.btn {
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; min-height:3.55rem; padding:.9rem 1.2rem; margin:0 0 .7rem;
  border-radius:12px; border:1px solid transparent; cursor:pointer;
  font:inherit; font-size:1.06rem; font-weight:600; text-decoration:none;
  transition:transform .06s ease, opacity .15s ease;
}
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-ghost {
  background:transparent; color:var(--muted); border-color:var(--line);
  font-weight:500; font-size:.98rem; min-height:3.1rem;
}
.btn-option {
  background:var(--surface); color:var(--ink); border-color:var(--line);
  justify-content:flex-start; font-weight:600;
}
.btn-option.muted { color:var(--muted); font-weight:500; background:transparent; }
.btn-option.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn[disabled] { opacity:.45; cursor:default; }
.options { margin-top:1.4rem; }

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1.3rem 1.2rem .4rem; margin-top:1.8rem; box-shadow:var(--shadow);
}
.card .lead { margin-bottom:1.1rem; }

.label {
  display:block; font-size:.87rem; font-weight:600; color:var(--muted);
  margin:0 0 .4rem;
}
.label.mt { margin-top:1.35rem; }
.opt-tag { font-weight:400; opacity:.75; }
.input {
  width:100%; padding:.85rem .95rem; font:inherit; font-size:1.05rem;
  color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:11px; margin-bottom:1.1rem;
}
.input:focus { outline:2px solid var(--accent); outline-offset:1px; }

.chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.3rem; }
.chip {
  font:inherit; font-size:.93rem; padding:.5rem .8rem; cursor:pointer;
  background:var(--bg); color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
}
.chip.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.fine { font-size:.84rem; color:var(--muted); line-height:1.45; margin:.15rem 0 1rem; }
.error { color:#B3261E; font-size:.92rem; margin:.2rem 0 1rem; }
@media (prefers-color-scheme: dark) { .error { color:#F2B8B5; } }

.success { padding-bottom:1rem; }
.tick { font-size:1.3rem; font-weight:700; margin-bottom:.4rem; }

.foot {
  max-width:33rem; margin:2.2rem auto 0; padding:1.1rem 1.35rem 2rem;
  font-size:.82rem; color:var(--muted); display:flex; gap:.6rem;
}
.foot a { color:var(--muted); }

.prose h2 { font-size:1.15rem; margin:1.8rem 0 .5rem; }
.prose { font-size:.97rem; }
.todo {
  background:var(--soft); border-left:3px solid var(--accent);
  padding:.75rem .9rem; border-radius:0 8px 8px 0; font-size:.92rem;
}