/* mietzinscheck — klares Schweizer Editorial-Design: warmes Papier, Tinte,
   ein roter Akzent. Hairline-Borders, weiche Elevation, viel Ruhe. */

:root {
  --papier: #f7f5f0;
  --karte: #ffffff;
  --tinte: #191d21;
  --tinte-60: #6b7177;
  --rot: #d7282f;
  --rot-flaeche: #fcefee;
  --linie: #e8e3d8;
  --ok: #1c6e45;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(25, 29, 33, .05), 0 10px 30px rgba(25, 29, 33, .07);
  --mass: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Kopf ─────────────────────────────────────────────── */
.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  max-width: var(--mass);
  margin: 0 auto;
  padding: 1.4rem 1.2rem 0;
}

.marke {
  font-family: "Archivo Black", "Archivo", sans-serif;
  letter-spacing: .05em;
  font-size: 1rem;
}
.marke-punkt { color: var(--rot); }

.kopf-badge {
  font-size: .8rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  border-radius: 999px;
  padding: .35rem .85rem;
  box-shadow: 0 1px 2px rgba(25, 29, 33, .04);
}
.badge-quelle { color: var(--tinte-60); margin-left: .35rem; }

/* ── Hero ─────────────────────────────────────────────── */
main { max-width: var(--mass); margin: 0 auto; padding: 0 1.2rem 4rem; }

.hero { padding: 3.6rem 0 2.6rem; }

.hero h1 {
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-size: clamp(2.4rem, 8vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 1.3rem;
}

.unterstrichen {
  background: linear-gradient(transparent 78%, rgba(215, 40, 47, .35) 78%);
}

.lead { font-size: 1.08rem; max-width: 36rem; margin: 0 0 1.4rem; color: #2c3136; }

.hero-punkte {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.5rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--tinte-60);
}
.hero-punkte li::before { content: "✓"; color: var(--rot); font-weight: 700; margin-right: .4rem; }

/* ── Karten ───────────────────────────────────────────── */
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2rem 1.8rem 1.7rem;
  margin-bottom: 3.5rem;
}

.karte-titel {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  color: var(--tinte-60);
  margin-bottom: 1.5rem;
}

/* ── Formular ─────────────────────────────────────────── */
.feld { margin-bottom: 1.25rem; display: flex; flex-direction: column; }
.feld-reihe { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; }
@media (min-width: 560px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }

label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }

input, select {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  background: #fff;
  border: 1px solid #d4cebf;
  border-radius: 10px;
  padding: .7rem .8rem;
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover { border-color: #b9b2a0; }
input:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--tinte);
  box-shadow: 0 0 0 3px rgba(25, 29, 33, .12);
}
button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(215, 40, 47, .4);
  outline-offset: 2px;
}
input.fehler { border-color: var(--rot); background: #fdf6f6; }

.hilfe { font-size: .78rem; color: var(--tinte-60); margin-top: .35rem; }

.knopf {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: .95rem 1.4rem;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.knopf-haupt {
  background: var(--tinte);
  color: #fff;
  width: 100%;
  font-size: 1.02rem;
  box-shadow: 0 2px 6px rgba(25, 29, 33, .18);
}
.knopf-haupt:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(25, 29, 33, .22); }
.knopf-haupt:active { transform: none; box-shadow: 0 1px 3px rgba(25, 29, 33, .2); }
.knopf-rot { background: var(--rot); }
.knopf-rot:hover { background: #c2232a; }

.form-notiz { font-size: .78rem; color: var(--tinte-60); margin: .8rem 0 0; text-align: center; }
.form-notiz a { color: inherit; }

/* ── Ergebnis ─────────────────────────────────────────── */
.ergebnis { margin-bottom: 3.5rem; }

.verfuegung {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.9rem 1.8rem;
  animation: einblenden .45s ease both;
}
@keyframes einblenden {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .verfuegung { animation: none; }
}

.verfuegung-kopf {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-60);
  border-bottom: 1px solid var(--linie);
  padding-bottom: .8rem;
  margin-bottom: 1.5rem;
}

.betrag-zeile { text-align: center; padding: .4rem 0 1.1rem; }
.betrag {
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-size: clamp(2.8rem, 10vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.betrag-einheit { font-size: .95rem; font-weight: 500; color: var(--tinte-60); }
.betrag-jahr { font-weight: 700; margin-top: .35rem; }

.frist-band {
  background: var(--rot-flaeche);
  border: 1px solid rgba(215, 40, 47, .25);
  border-left: 4px solid var(--rot);
  border-radius: 10px;
  color: #8f1b20;
  padding: .85rem 1.1rem;
  font-weight: 500;
  font-size: .93rem;
  margin: 1.2rem 0;
}
.frist-band strong { font-variant-numeric: tabular-nums; color: var(--rot); }

.aufschluesselung { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.1rem 0; }
.aufschluesselung td { padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.aufschluesselung td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aufschluesselung tr.summe td { border-bottom: none; border-top: 2px solid var(--tinte); font-weight: 700; }

.annahmen { margin: 1.1rem 0; font-size: .84rem; }
.annahmen summary { cursor: pointer; font-weight: 600; color: var(--tinte-60); }
.annahmen ul { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--tinte-60); }
.annahmen li { margin-bottom: .35rem; }

.cta-block { border-top: 1px solid var(--linie); margin-top: 1.4rem; padding-top: 1.5rem; }
.preis-zeile { font-size: 1rem; margin: 0 0 1rem; }
.preis-zeile strong { font-variant-numeric: tabular-nums; }

.hinweis-karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.7rem 1.8rem;
}
.hinweis-karte h2 { margin-top: 0; font-size: 1.25rem; }
.hinweis-karte p { margin: .5rem 0; color: #2c3136; }

/* ── Vertrauen / FAQ ──────────────────────────────────── */
.vertrauen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 2.4rem 0;
  margin-bottom: 3.5rem;
}
@media (min-width: 640px) { .vertrauen { grid-template-columns: 1fr 1fr 1fr; } }
.vertrauen h3 {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 .55rem;
}
.vertrauen h3::before { content: ""; display: block; width: 1.6rem; height: 3px; background: var(--rot); border-radius: 2px; margin-bottom: .7rem; }
.vertrauen p { font-size: .87rem; color: var(--tinte-60); margin: 0; line-height: 1.55; }

.faq h2 {
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}
.faq details { border-bottom: 1px solid var(--linie); padding: .9rem 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq summary::marker { color: var(--rot); }
.faq p { color: var(--tinte-60); font-size: .93rem; }

/* ── Modal ────────────────────────────────────────────── */
.modal {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(25, 29, 33, .25);
  padding: 2.1rem 1.9rem;
  max-width: 26rem;
  width: calc(100vw - 2.4rem);
  background: var(--karte);
}
.modal::backdrop { background: rgba(25, 29, 33, .45); backdrop-filter: blur(2px); }

.modal-stempel {
  display: inline-block;
  background: var(--rot-flaeche);
  color: var(--rot);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .14em;
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: 1rem;
}
.modal-stempel-ok { background: #ebf5ef; color: var(--ok); }

.modal h2 { margin: 0 0 .7rem; font-size: 1.3rem; line-height: 1.3; }
.modal p { font-size: .93rem; color: #2c3136; }

.modal-schliessen-form { position: absolute; top: .6rem; right: .7rem; margin: 0; }
.modal-schliessen {
  font-size: 1.4rem; line-height: 1;
  background: none; border: none; cursor: pointer; color: var(--tinte-60);
  padding: .2rem .4rem; border-radius: 8px;
}
.modal-schliessen:hover { background: var(--papier); }

#hp-feld { position: absolute; left: -9999px; height: 1px; width: 1px; opacity: 0; }

.checkbox-zeile {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .87rem; font-weight: 400;
  margin: .2rem 0 1.1rem;
}
.checkbox-zeile input { width: auto; margin-top: .25rem; accent-color: var(--rot); }

/* ── Fuss ─────────────────────────────────────────────── */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.8rem 1.2rem 2.4rem;
}
.fuss-disclaimer {
  max-width: var(--mass); margin: 0 auto .8rem;
  font-size: .76rem; color: var(--tinte-60);
}
.fuss-links { max-width: var(--mass); margin: 0 auto; display: flex; gap: 1.4rem; font-size: .84rem; }
.fuss-links a { color: var(--tinte-60); }