/* Mietcheck /mietcheck: Handy zuerst, ein Schritt pro Bildschirm, ruhige Ergebniskarte in Blau/Grau (kein Rot). Tokens aus styles.css. */
.mc { background: var(--grund); min-height: 100dvh; }
.mc-in { max-width: 640px; padding-block: 28px 48px; }
.mc-kopf { display: grid; gap: 8px; margin-bottom: 22px; }
.mc-kopf[hidden] { display: none; }
.mc-kopf h1 { font-size: clamp(34px, 9vw, 56px); letter-spacing: -.045em; line-height: 1.02; }
.mc-sub { color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }

/* Formular-Karte */
.mc-form { display: grid; gap: 18px; padding: 22px 18px; border-radius: var(--r-l); background: var(--weiss); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 40px rgba(17, 17, 18, .06); }
.mc-form[hidden] { display: none; }
.mc-fortschritt { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mc-fortschritt i { height: 4px; border-radius: 4px; background: var(--linie); transition: background .3s var(--sanft); }
.mc-fortschritt i.an { background: var(--blau); }
.mc-schritt { display: grid; gap: 14px; animation: mc-rein .35s var(--sanft) both; }
.mc-schritt[hidden] { display: none; }
@keyframes mc-rein { from { opacity: 0; transform: translateY(8px); } }
.mc-schritt h2 { font-size: 26px; letter-spacing: -.035em; line-height: 1.1; }
.mc-hilfe { color: var(--ink-2); margin-top: -6px; }
.mc-feld { display: grid; gap: 6px; }
.mc-feld > span:first-child { font-weight: 700; font-size: 14.5px; }
.mc-feld input { width: 100%; min-height: 58px; border: 0; border-radius: var(--r-m); background: var(--grund); box-shadow: inset 0 0 0 1.5px var(--linie); padding: 0 16px; font: inherit; font-size: 20px; font-weight: 700; color: var(--ink); }
.mc-feld input:focus { outline: 2px solid var(--blau); outline-offset: 0; background: #fff; }
.mc-gross input { min-height: 68px; font-size: 30px; letter-spacing: -.02em; }
.mc-mit-einheit { position: relative; display: block; }
.mc-mit-einheit input { padding-right: 56px; }
.mc-mit-einheit b { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--grau); font-size: 18px; }
/* Ort zur PLZ: tippbar („Stimmt, weiter“), sieht darum auch wie ein Knopf aus */
.mc-ort { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; margin-top: -4px; padding: 8px 14px; border: 0; border-radius: var(--r-m); background: var(--blau-hell); box-shadow: inset 0 0 0 1.5px #8ab4ff; color: var(--blau-tief); font: inherit; font-weight: 700; font-size: 15.5px; text-align: left; cursor: pointer; transition: transform .15s var(--feder), background .15s; }
.mc-ort[hidden] { display: none; }
.mc-ort:active { transform: scale(.98); }
.mc-ort { flex-wrap: wrap; }
.mc-ort > span { flex: 1 1 170px; min-width: 0; overflow-wrap: anywhere; }
.mc-ort i { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 14px; color: #fff; background: var(--blau); border-radius: 999px; padding: 8px 8px 8px 14px; min-height: 36px; box-sizing: border-box; }
.mc-ort i svg { width: 18px; height: 18px; }
.mc-ort-hinweis { margin: -4px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--grund); color: var(--ink-2); font-weight: 600; font-size: 15px; line-height: 1.4; }
.mc-ort-hinweis[hidden] { display: none; }
.mc-oder, .mc-frage-klein { font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.mc-oder { color: var(--grau); font-weight: 500; }
.mc-frage-klein small { color: var(--grau); font-weight: 500; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-chips button { min-height: 46px; min-width: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--grund); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linie); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, color .15s, transform .15s var(--feder); }
.mc-chips button:active { transform: scale(.97); }
.mc-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.mc-chips-gross { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mc-chips-gross button { min-height: 64px; border-radius: var(--r-m); padding: 10px 18px; display: grid; justify-items: start; text-align: left; gap: 2px; }
.mc-chips-gross b { font-size: 17px; }
.mc-chips-gross small { font-weight: 500; color: var(--ink-2); font-size: 13.5px; }
.mc-chips-gross button[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.mc-fehler { margin: 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--blau-hell); color: var(--blau-tief); font-weight: 600; font-size: 14.5px; }
.mc-fehler[hidden] { display: none; }
.mc-leiste { display: grid; grid-template-columns: auto 1fr; gap: 10px; position: sticky; bottom: 0; padding: 10px 0 calc(4px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--weiss) 30%); }
.mc-leiste [hidden] { display: none; }
.mc-leiste .knopf[hidden] + .knopf { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .mc-in { padding-block: 48px 72px; }
  .mc-form { padding: 32px; }
  .mc-chips-gross { grid-template-columns: repeat(3, 1fr); }
}

/* Ergebnis: ruhige Karte, Ton nur über Blau-Abstufungen */
.mc-ergebnis { display: grid; gap: 14px; }
.mc-ergebnis[hidden] { display: none; }
.mc-ergebnis.zeigt > * { animation: mc-rein .5s var(--sanft) both; }
.mc-ergebnis.zeigt > :nth-child(2) { animation-delay: .08s; } .mc-ergebnis.zeigt > :nth-child(3) { animation-delay: .16s; }
.mc-karte { display: grid; gap: 14px; padding: 24px 20px; border-radius: var(--r-l); background: var(--weiss); box-shadow: 0 10px 40px rgba(17, 17, 18, .07); border-top: 6px solid var(--linie); }
.mc-karte.guenstig { border-top-color: #8ab4ff; }
.mc-karte.ueblich { border-top-color: var(--blau); }
.mc-karte.teuer { border-top-color: var(--blau-tief); }
.mc-karte h2 { font-size: clamp(28px, 8vw, 42px); letter-spacing: -.04em; line-height: 1.05; }
.mc-karte h2 em { font-style: normal; color: var(--blau-tief); }
.mc-satz { color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }
.mc-zahlen { display: grid; gap: 10px; }
.mc-zahlen div { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-m); background: var(--grund); }
.mc-zahlen span { font-size: 13.5px; color: var(--ink-2); }
.mc-zahlen b { font-size: 22px; letter-spacing: -.03em; }
.mc-zahlen small { font-size: 13px; color: var(--grau); }
@media (min-width: 600px) { .mc-zahlen { grid-template-columns: 1fr 1fr; } }
.mc-skala { position: relative; height: 14px; margin: 18px 6px 4px; border-radius: 999px; background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie); }
.mc-skala-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--blau-hell); box-shadow: inset 0 0 0 1.5px #8ab4ff; }
.mc-skala-median { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--blau); }
.mc-skala-du { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px #fff, 0 4px 12px rgba(0, 0, 0, .2); }
.mc-skala-du span { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: var(--ink); }
.mc-skala-text { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--grau); }
.mc-basis { font-size: 13.5px; color: var(--grau); line-height: 1.45; }
.mc-gemein { margin: 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--grund); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.mc-gemein b { color: var(--ink); }
.mc-hinweise { display: grid; gap: 10px; }
.mc-hinweis { padding: 16px 18px; border-radius: var(--r-m); background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); }
.mc-hinweis b { font-size: 16px; }
.mc-hinweis p { margin-top: 4px; color: var(--ink-2); line-height: 1.5; font-size: 15px; }
.mc-hilfe-block { display: grid; gap: 8px; padding: 18px; border-radius: var(--r-m); background: var(--blau-hell); color: var(--ink); }
.mc-hilfe-block ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.mc-hilfe-block a { color: var(--blau-tief); font-weight: 600; }
.mc-hilfe-block p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.mc-recht { font-size: 13px !important; }
.mc-knoepfe { display: grid; gap: 10px; }
@media (min-width: 600px) { .mc-knoepfe { grid-template-columns: 1fr auto; } }
@media (prefers-reduced-motion: reduce) { .mc-schritt, .mc-ergebnis.zeigt > * { animation: none; } }
/* Vorzeilen auf hellem Grund (die gemeinsame .vorzeile ist für Fotos gedacht und weiß) */
.mc .vorzeile { color: var(--blau-tief); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* Platzhalter deutlich heller als eine echte Eingabe (sonst sieht „950“ wie ein ausgefüllter Wert aus) */
.mc-feld input::placeholder { color: #b4b4b9; font-weight: 600; opacity: 1; }
.mc-inserat { font-weight: 700; color: var(--ink-2); margin-top: -6px; } /* Titel der geprüften Wohnung */