/* geldnachhause.de — gemeinsames Stylesheet
   Wird von index.html, impressum.html, datenschutz.html und den Korridorseiten genutzt.

   SCHRIFTEN: bewusst Systemschriften, KEINE Google Fonts.
   Google Fonts überträgt die IP-Adresse jedes Besuchers an Google (LG München I,
   Az. 3 O 17493/20). Die Datenschutzerklärung sagt zu, dass das nicht passiert.
   Wenn später eigene Schriften gewünscht sind: Dateien nach /fonts/ legen und hier
   per @font-face einbinden — NIEMALS wieder per <link> von einem fremden Server.
*/

:root{
  --paper:#E9EAE3;
  --paper-2:#F4F5F0;
  --ink:#12211D;
  --ink-soft:#4A5A54;
  --intaglio:#2F6B4F;
  --intaglio-2:#3F8A67;
  --stamp:#A93B2A;
  --rule:rgba(18,33,29,.14);
  --shadow:0 1px 0 rgba(18,33,29,.06), 0 12px 28px -18px rgba(18,33,29,.5);
  --maxw:660px;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','Segoe UI Mono','Roboto Mono',Consolas,'Courier New',monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  background-image:
    repeating-linear-gradient(90deg,rgba(47,107,79,.045) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(0deg,rgba(47,107,79,.035) 0 1px,transparent 1px 7px);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:1.14;margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--intaglio)}

/* eyebrow / stamp labels */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--intaglio);font-weight:600;
}

/* header */
header{border-bottom:1px solid var(--rule);padding:14px 0;background:rgba(244,245,240,.7);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:baseline;gap:10px}
.brand a,.brand b{font-weight:800;font-size:17px;color:var(--ink);text-decoration:none}
.brand span{font-size:12px;color:var(--ink-soft)}

/* hero */
.hero{padding:38px 0 8px}
.hero h1{font-size:clamp(28px,7vw,42px)}
.lede{margin:16px 0 0;color:var(--ink-soft);font-size:17px;max-width:52ch}

/* ── Rechner: die Quittung ───────────────────────────── */
.receipt{
  margin:26px 0 8px;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:3px;box-shadow:var(--shadow);overflow:hidden;
}
.receipt-top{padding:20px 20px 16px;border-bottom:1px dashed var(--rule)}
.field-label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.amount-row{display:flex;align-items:center;gap:10px}
.amount-row .cur{font-family:var(--mono);font-size:26px;color:var(--ink-soft)}
input[type=number]{
  font-family:var(--mono);font-size:30px;font-weight:600;
  width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;
  padding:2px 0;color:var(--ink);-moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--intaglio);outline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font-family:var(--mono);font-size:13px;padding:6px 11px;cursor:pointer;
  border:1px solid var(--rule);background:transparent;border-radius:999px;color:var(--ink-soft);
}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}

/* Zielland-Auswahl */
.dest{margin-top:18px;padding-top:16px;border-top:1px dashed var(--rule)}
.dest .chips{margin-top:8px}
.dest .chip{font-family:var(--sans);font-size:14px;padding:8px 14px}
.dest .chip[aria-pressed=true]{background:var(--intaglio);color:#fff;border-color:var(--intaglio)}

/* perforation */
.perf{height:14px;background:
  radial-gradient(circle at 7px 7px, var(--paper) 5px, transparent 5.5px) repeat-x;
  background-size:14px 14px;margin:0 -1px}

/* Anbieterzeilen */
.rows{padding:6px 0 4px}
.row{display:block;text-decoration:none;color:inherit;padding:16px 20px;border-bottom:1px solid var(--rule);transition:background .15s}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(47,107,79,.05)}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.prov{font-weight:700;font-size:15px}
.best{font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--intaglio);color:#fff;padding:3px 7px;border-radius:2px;margin-left:8px;vertical-align:2px}
.got{font-family:var(--mono);font-weight:600;font-size:clamp(19px,5.4vw,25px);white-space:nowrap}
.meta-row{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.loss{color:var(--stamp)}
.win{color:var(--intaglio);font-weight:600}
.bar{height:3px;background:rgba(18,33,29,.09);margin-top:9px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--intaglio-2)}
.row.worst .bar i{background:var(--stamp)}
.receipt-foot{padding:14px 20px;font-size:12px;color:var(--ink-soft);border-top:1px dashed var(--rule);background:rgba(47,107,79,.04)}

/* ── Textabschnitte ──────────────────────────────────── */
section{padding:44px 0}
main section{border-bottom:0}
section h2{font-size:clamp(21px,5vw,28px);margin-bottom:14px}
h2 .num{font-family:var(--mono);font-size:.6em;color:var(--intaglio);margin-right:8px;vertical-align:2px}
h3{font-size:16px;font-weight:600;margin:18px 0 6px}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:20px}
li{margin-bottom:6px}
.note{background:var(--paper-2);border-left:3px solid var(--intaglio);padding:16px 18px;border-radius:0 3px 3px 0;margin:0 0 14px}
ol.steps{list-style:none;padding:0;margin:0;counter-reset:s}
ol.steps li{counter-increment:s;padding:14px 0 14px 44px;position:relative;border-bottom:1px solid var(--rule);margin:0}
ol.steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;font-family:var(--mono);font-size:12px;color:var(--intaglio);font-weight:600}
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'+';color:var(--intaglio);font-family:var(--mono);margin-right:10px}
.faq details[open] summary:before{content:'–'}
.faq p{margin:10px 0 0;color:var(--ink-soft)}

/* Rechtsseiten: nummerierte Abschnitte mit Trennlinie */
.legal section{padding:26px 0;border-bottom:1px solid var(--rule)}
.legal section:last-of-type{border-bottom:0}
.legal h2{font-size:clamp(19px,4.4vw,23px);margin-bottom:12px}
dl.meta{margin:0;font-family:var(--mono);font-size:14px}
dl.meta dt{color:var(--ink-soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:14px}
dl.meta dd{margin:3px 0 0}

/* Korridor-Links */
.corridors{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.corridors a{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--ink);border:1px solid var(--rule);padding:7px 12px;border-radius:2px}
.corridors a:hover{border-color:var(--intaglio);color:var(--intaglio)}

footer{border-top:1px solid var(--rule);padding:28px 0 44px;font-size:13px;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.disclosure{font-size:12px;line-height:1.5}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}