/* Inserieren: eine Frage pro Bildschirm. Handy zuerst: Fortschritt oben, Daumen-Leiste unten, Vorschau als Sheet.
   Ab 960 px steht die Live-Karte daneben. Tokens aus styles.css. */

.ins { background: var(--weiss); min-height: 100dvh; }
:root { --leiste: calc(84px + env(safe-area-inset-bottom, 0px)); --kopf: 64px; }

/* Kopf mit Fortschritt */
.ins-kopf { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ins-kopf .logo { font-size: 20px; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; }
.vorschau-knopf { border: 0; border-radius: 999px; min-height: 40px; padding: 0 16px; font-weight: 700; background: var(--grund); cursor: pointer; }
.zu { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grund); color: var(--ink); }
.zu svg { width: 18px; height: 18px; }
.fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--linie); }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--blau); border-radius: 0 3px 3px 0; transition: width .45s var(--sanft); }

/* Bühne */
.ins-buehne { padding: calc(var(--kopf) + 28px) max(20px, env(safe-area-inset-right, 0px)) calc(var(--leiste) + 32px) max(20px, env(safe-area-inset-left, 0px));
  max-width: 1120px; margin: 0 auto; display: grid; gap: 56px; align-items: start; }
.flow { min-width: 0; overflow-x: clip; overflow-clip-margin: 12px; } /* das Hereinschieben darf keine waagrechte Scrollleiste erzeugen */
.schritt { display: grid; gap: 14px; align-content: start; animation: rein-r .42s var(--sanft); }
.schritt.zurueck-rein { animation-name: rein-l; }
@keyframes rein-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes rein-l { from { opacity: 0; transform: translateX(-28px); } }
.schritt h1, .schritt h2.wie-h1 { font-size: clamp(34px, 9vw, 56px); letter-spacing: -.05em; line-height: 1; }
.zaehler { font-weight: 700; color: var(--grau); font-size: 14px; }
.unter { color: var(--ink-2); font-size: var(--t-m); max-width: 44ch; margin-top: -4px; }
.tipp { color: var(--grau); font-size: 13px; max-width: 52ch; }
.klein-titel { display: block; font-weight: 700; font-size: 14px; margin-top: 10px; }
.klein-titel small { font-weight: 500; color: var(--grau); }

/* Felder */
.feld { width: 100%; min-height: 54px; border: 0; border-radius: var(--r-m); background: var(--grund); padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s, background .15s; }
.feld:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--blau); }
.feld.gross { min-height: 64px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.titel-feld { font-weight: 700; }
textarea.feld { padding: 14px 16px; line-height: 1.55; resize: vertical; min-height: 200px; font-size: 16px; }
@media (max-height: 560px) { textarea.feld { min-height: 112px; } } /* Tastatur offen oder Querformat: Feld soll über der Weiter-Leiste Platz haben */
.betrag { position: relative; display: flex; align-items: center; }
.betrag .feld.riesig { min-height: 96px; font-size: clamp(48px, 15vw, 72px); font-weight: 800; letter-spacing: -.05em; padding-right: 76px; -moz-appearance: textfield; }
.betrag > span { position: absolute; right: 22px; font-size: 32px; font-weight: 800; color: var(--grau); pointer-events: none; }
.betrag.klein > span { font-size: 17px; right: 16px; }
.betrag.klein .feld { padding-right: 40px; }
.feld::-webkit-outer-spin-button, .feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Art */
.art-kacheln { display: grid; gap: 10px; margin-top: 6px; }
.art { position: relative; border: 0; padding: 0; border-radius: var(--r-l); overflow: hidden; height: 128px; cursor: pointer; text-align: left; color: #fff; background: var(--nacht); transition: transform .2s var(--feder), box-shadow .2s; isolation: isolate; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .6s var(--sanft); }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .05) 75%); }
.art span { position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 1; display: grid; gap: 2px; }
.art b { font-size: 26px; letter-spacing: -.04em; line-height: 1.05; }
.art small { font-size: 14px; opacity: .88; }
/* Untertitel immer zwei Zeilen hoch, damit die Titel aller Kacheln auf einer Linie stehen */
@media (min-width: 560px) { .art small { min-height: 2.8em; line-height: 1.4; } }
.art:hover img { transform: scale(1.05); }
.art:active { transform: scale(.98); }
.art[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 6px var(--blau); }

/* Fotos */
.ablage { position: relative; display: grid; gap: 6px; place-items: center; text-align: center; padding: 40px 16px; border-radius: var(--r-l); background: var(--grund); cursor: pointer; box-shadow: inset 0 0 0 2px var(--linie); transition: box-shadow .15s, background .15s; }
.ablage svg { width: 40px; height: 40px; color: var(--blau); }
.ablage b { font-size: 19px; letter-spacing: -.02em; }
.ablage span { color: var(--grau); font-size: 14px; }
.ablage:hover, .ablage.drueber, .ablage:focus-within { box-shadow: inset 0 0 0 2px var(--blau); background: var(--blau-hell); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage.klein { padding: 16px; grid-auto-flow: column; justify-content: center; gap: 10px; }
.ablage.klein svg { width: 24px; height: 24px; }
.ablage.klein span { display: none; }
.foto-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 360px) { .foto-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Go-Live 05.11.: iPhone SE, sonst überdecken sich „Titelbild“ und ✕ */
.foto-liste li { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--linie); animation: auftauchen .3s var(--feder); }
@keyframes auftauchen { from { transform: scale(.85); opacity: 0; } }
.foto-liste img { width: 100%; height: 100%; object-fit: cover; }
.foto-liste .titelbild { position: absolute; left: 6px; top: 6px; /* Go-Live 05.11.: oben links, unten rechts sitzt der Bearbeiten-Knopf (iPhone SE: überdeckt) */ font-size: 11px; font-weight: 700; background: #fff; border-radius: 999px; padding: 3px 8px; }
.foto-liste button { position: absolute; top: 6px; border: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(12, 12, 13, .72); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.foto-liste .weg { right: 6px; }
.foto-liste .vor { left: 6px; }

/* Stadt */
.stadt-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.stadt-k { position: relative; border: 0; padding: 0; height: 92px; border-radius: var(--r-m); overflow: hidden; cursor: pointer; color: #fff; text-align: left; background: var(--nacht); transition: transform .2s var(--feder); }
.stadt-k img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stadt-k::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0) 70%); }
.stadt-k span { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 1; display: grid; line-height: 1.15; }
.stadt-k b { font-size: 18px; letter-spacing: -.03em; }
.stadt-k small { font-size: 12px; opacity: .85; }
.stadt-k:active { transform: scale(.97); }
.stadt-k[aria-checked="true"] { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 6px var(--blau); }

/* Chips, Segmente, Stepper */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-k { border: 0; border-radius: 999px; min-height: 46px; padding: 0 18px; font-weight: 700; font-size: 15px; background: var(--grund); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, transform .15s var(--feder); }
.chip-k:active { transform: scale(.95); }
.chip-k[aria-pressed="true"] { background: var(--ink); color: #fff; }
.gross-chips .chip-k { min-height: 54px; font-size: 16px; padding: 0 20px; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--grund); border-radius: 999px; padding: 4px; }
.segment button { border: 0; background: none; border-radius: 999px; min-height: 46px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.zaehl-reihe { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--grund); border-radius: var(--r-m); padding: 8px 8px 8px 18px; font-weight: 700; font-size: 17px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; font-size: 24px; font-weight: 700; cursor: pointer; box-shadow: var(--sh-1); }
.stepper button:active { transform: scale(.92); }
.stepper output { min-width: 40px; text-align: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Text */
.text-fuss { display: flex; justify-content: space-between; align-items: center; color: var(--grau); font-size: 13px; }
.leise-knopf { border: 0; background: none; color: var(--blau-tief); font-weight: 700; cursor: pointer; padding: 8px 0; }

/* Wer */
.rollen { display: grid; gap: 8px; margin-top: 6px; }
.rolle { border: 0; text-align: left; border-radius: var(--r-m); padding: 16px 18px; background: var(--grund); cursor: pointer; display: grid; gap: 2px; transition: transform .15s var(--feder); }
.rolle b { font-size: 18px; letter-spacing: -.02em; }
.rolle small { color: var(--grau); font-size: 14px; }
.rolle:active { transform: scale(.98); }
.rolle[aria-checked="true"] { background: var(--ink); color: #fff; }
.rolle[aria-checked="true"] small { color: #c9c9cc; }
.bestaetigen { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); cursor: pointer; margin-top: 10px; padding: 14px 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--linie); }
.bestaetigen input { width: 24px; height: 24px; accent-color: var(--blau); flex: none; margin: 0; }
.bestaetigen.fehlt { box-shadow: inset 0 0 0 2px var(--warn); animation: ruetteln .4s; }
@keyframes ruetteln { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.fehler { margin: 0; padding: 12px 16px 12px 34px; border-radius: var(--r-m); background: var(--schlecht-hell); color: var(--schlecht); font-size: 14px; display: grid; gap: 4px; }

/* Fertig */
/* Fertig: Haken, kurzer Satz, die Karte im Fokus, darunter klare Wege weiter */
.fertig { justify-items: center; text-align: center; padding-top: 4px; gap: 18px; }
.fertig-kopf { display: grid; justify-items: center; gap: 8px; }
.fertig-haken { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--gut, #1f8a4c); color: #fff; animation: auftauchen .5s var(--feder); }
.fertig-haken svg { width: 26px; height: 26px; }
.fertig h1, .fertig h2.wie-h1 { margin: 0; }
.fertig .unter { margin: 0 auto; }
.fertig-karte { width: min(280px, 72vw); aspect-ratio: 3 / 4; text-align: left; animation: landen .8s var(--feder); }
@keyframes landen { 0% { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(.86); } 60% { opacity: 1; } }
.fertig-knoepfe { display: grid; gap: 10px; width: min(380px, 100%); }
.fertig-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fertig-zwei .knopf { min-height: 50px; }
.fertig-knoepfe .k-link { justify-self: center; color: var(--ink-2); padding: 8px; }

/* Vorschau */
.vorschau { display: none; }
.vorschau-titel { font-weight: 700; font-size: 14px; color: var(--grau); margin-bottom: 12px; }
.vorschau-karte { width: 100%; aspect-ratio: 3 / 4; }
.vorschau-karte .karte { cursor: default; }
.vorschau-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(12, 12, 13, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: dimmen .2s; }
@keyframes dimmen { from { opacity: 0; } }
.sheet-innen { width: min(340px, 100%); display: grid; gap: 16px; animation: landen .5s var(--feder); }
.sheet-innen .vorschau-karte { width: 100%; }

/* Leiste */
.leiste { position: fixed; inset: auto 0 0; z-index: 30; display: flex; gap: 10px; align-items: center; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--linie); }
.leiste .weiter { flex: 1; }
.leiste .weiter.wartet { background: #b9b9bd; }
.zurueck { flex: none; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--grund); cursor: pointer; display: grid; place-items: center; }
.zurueck svg { width: 22px; height: 22px; }
.zurueck[disabled] { display: none; } /* im ersten Schritt: Weiter über die volle Breite */
.leiste[hidden] { display: none; }

.toast { position: fixed; left: 50%; bottom: calc(var(--leiste) + 12px); transform: translate(-50%, 20px); background: var(--ink); color: #fff; font-weight: 700; padding: 12px 18px; border-radius: 999px; opacity: 0; transition: .25s; pointer-events: none; z-index: 60; width: max-content; max-width: min(440px, calc(100vw - 32px)); text-align: center; line-height: 1.35; }
.toast:where(.an) { border-radius: 18px; } /* Go-Live 05.11.: war am iPhone SE ein schmaler schwarzer Kreis (left: 50% halbiert die Breite) */
.toast.an { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 560px) {
  .art-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art { height: 280px; }
  .art::after { background: linear-gradient(0deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0) 65%); }
  .stadt-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stadt-k { height: 110px; }
  .foto-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* iPad hochkant (700–959 px, Paul 03.11.: „iPad-gerecht“): eine ruhige Spalte statt eines auseinandergezogenen Handy-Layouts, Weiter-Knopf nicht über die ganze Breite */
@media (min-width: 700px) and (max-width: 959px) {
  .ins-buehne { max-width: 680px; }
  .leiste { justify-content: center; }
  .leiste .weiter { flex: 0 1 420px; }
}
@media (min-width: 960px) {
  .ins-buehne { grid-template-columns: minmax(0, 1fr) 340px; padding-top: calc(var(--kopf) + 56px); }
  .vorschau { display: block; position: sticky; top: calc(var(--kopf) + 32px); }
  .vorschau-knopf { display: none; }
  .ins-buehne.ohne-vorschau { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .ins-buehne.ohne-vorschau .vorschau { display: none; }
  .stadt-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Leiste am PC unter dem Inhalt mittig statt über volle Breite */
  .leiste { justify-content: center; }
  .leiste .weiter { flex: 0 1 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .schritt, .fertig-karte, .sheet-innen, .foto-liste li { animation: none; }
}
.recht-hinweis { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; } .recht-hinweis a { color: inherit; }

/* Ort: Suche über alle Orte und PLZ in Österreich, Vorschläge direkt darunter */
.ort-suche { position: relative; }
.ort-treffer { list-style: none; margin: 8px 0 0; padding: 6px; border-radius: var(--r-m); background: #fff; box-shadow: var(--sh-2), inset 0 0 0 1px var(--linie); display: grid; gap: 2px; }
.ort-treffer[hidden] { display: none; }
.ort-treffer button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; background: none; border-radius: 10px; padding: 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ort-treffer button:hover, .ort-treffer button:focus-visible { background: var(--grund); outline: none; }
.ort-treffer b { font-size: 16px; }
.ort-treffer small { color: var(--grau); font-size: 13px; white-space: nowrap; }
.ort-gewaehlt { margin: 10px 0 0; font-weight: 700; color: var(--gut, #1f7a45); }
.ort-suche + .ort-gewaehlt + .klein-titel, .ort-suche + .ort-gewaehlt[hidden] + .klein-titel { margin-top: 22px; }

/* Preis vorschlagen */
.vorschlag { margin: 10px 0 4px; }
.vorschlag-knopf { padding-left: 0; }
.vorschlag-ergebnis { margin-top: 8px; padding: 14px 16px; border-radius: var(--r-m); background: var(--blau-hell); display: grid; gap: 6px; justify-items: start; }
.vorschlag-ergebnis b { font-size: 22px; letter-spacing: -.02em; }
.vorschlag-ergebnis b small { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.vorschlag-ergebnis p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* Frei ab und Befristung: Datumsfelder unter den Chips */
#abDatum, #befristetBis { margin-top: 10px; max-width: 320px; }
.befristung { margin-top: 6px; }

/* ---------- Konto (Login direkt vor dem Veröffentlichen) ---------- */
.meine-link { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; padding: 9px 12px; border-radius: 999px; white-space: nowrap; }
.meine-link:hover { background: var(--grund); }
.angemeldet { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.angemeldet a { color: inherit; }
.login-box { margin-top: 16px; }
.login-box[hidden], .meine[hidden], .boost-sheet[hidden], .ins-buehne[hidden], .k-form[hidden] { display: none; }
.k-login { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-l); background: var(--grund); }
.k-fenster .k-login { padding: 0; background: transparent; } /* im Fenster (konto-ui.js) kein zweiter Kasten im Kasten */
.k-login > b { font-size: 21px; letter-spacing: -.03em; line-height: 1.15; }
.k-login > p { margin: 0 0 4px; color: var(--ink-2); font-size: 14.5px; }
.k-google { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linie); }
.k-google svg { width: 20px; height: 20px; }
.k-oder { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 12.5px; }
.k-oder::before, .k-oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.k-form { display: grid; gap: 8px; }
.k-form input { width: 100%; border: 0; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); padding: 14px; font: inherit; font-size: 16px; color: var(--ink); }
.k-form input:focus { outline: 2px solid var(--blau); }
.k-form input[inputmode="numeric"] { letter-spacing: .35em; font-size: 22px; font-weight: 700; text-align: center; }
.k-hinweis { margin: 0; color: var(--ink-2); font-size: 14px; }
.k-link { border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; padding: 4px; }

/* ---------- Meine Inserate ---------- */
.meine { padding: calc(var(--kopf) + 24px) max(20px, env(safe-area-inset-right, 0px)) 48px max(20px, env(safe-area-inset-left, 0px)); max-width: 760px; margin: 0 auto; }
.meine-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meine-kopf h1, .meine-kopf h2.wie-h1 { font-size: clamp(32px, 7vw, 48px); letter-spacing: -.05em; line-height: 1; }
.meine-unter { color: var(--ink-2); margin: 10px 0 22px; font-size: 14.5px; }
.meine-laden { color: var(--ink-2); }
.meine-leer { display: grid; gap: 8px; justify-items: start; padding: 26px; border-radius: var(--r-l); background: var(--grund); }
.meine-leer b { font-size: 22px; letter-spacing: -.03em; }
.meine-leer p { margin: 0 0 8px; color: var(--ink-2); }
#meineInhalt { display: grid; gap: 16px; }
.mi { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); }
.mi.pausiert .mi-bild img { filter: grayscale(1) opacity(.6); }
.mi-bild { position: relative; display: block; width: 96px; height: 116px; border-radius: 14px; overflow: hidden; background: var(--grund); }
.mi-bild img { width: 100%; height: 100%; object-fit: cover; }
.mi-status { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--gut-hell); color: var(--gut); }
.mi.pausiert .mi-status { background: #fff; color: var(--ink-2); }
.mi-text { display: grid; gap: 3px; align-content: center; min-width: 0; }
.mi-text b { font-size: 22px; letter-spacing: -.03em; }
.mi-text .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mi-text small { color: var(--ink-2); }
.mi-boost { justify-self: start; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--blau-tief, #1257c6); background: var(--blau-hell); padding: 3px 9px; border-radius: 999px; }
.mi-zahlen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mi-zahlen div { display: grid; gap: 1px; padding: 10px 6px; border-radius: 12px; background: var(--grund); text-align: center; }
.mi-zahlen b { font-size: 20px; letter-spacing: -.03em; line-height: 1.1; }
.mi-zahlen span { font-size: 12px; font-weight: 600; }
.mi-zahlen small { font-size: 10.5px; color: var(--ink-2); }
.mi-verlauf { grid-column: 1 / -1; display: grid; gap: 4px; }
.mi-verlauf svg { width: 100%; height: 44px; display: block; }
.mi-verlauf .linie { fill: none; stroke: var(--blau); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mi-verlauf .flaeche { fill: var(--blau-hell); stroke: none; }
.mi-verlauf span { font-size: 12px; color: var(--ink-2); }
.mi-tipp { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-2); padding: 10px 12px; border-radius: 12px; background: #fbfaf6; box-shadow: inset 0 0 0 1px var(--linie); }
.mi-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mi-knoepfe .knopf { flex: 1 1 0; min-height: 44px; }
.mi-knoepfe .mi-weg { flex: 0 0 48px; padding: 0; }
.mi-weg svg { width: 20px; height: 20px; }
@media (max-width: 420px) { .mi-zahlen { gap: 4px; } .mi-zahlen div { padding: 8px 2px; } .mi-zahlen b { font-size: 17px; } .mi-zahlen span { font-size: 10.5px; } .mi-zahlen small { font-size: 9.5px; } }

/* ---------- Boost ---------- */
/* Boost: dunkles Blatt über stark abgedunkeltem Hintergrund (hebt sich von der hellen Seite ab), am Handy von unten */
.boost-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(8, 8, 9, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; align-items: end; justify-items: center; animation: dimmen .2s; }
.boost-innen { width: min(560px, 100%); max-height: 92dvh; overflow-y: auto; background: var(--nacht); color: #fff; border-radius: 26px 26px 0 0; padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; animation: landen .4s var(--feder); box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
.boost-innen::before { content: ""; justify-self: center; width: 40px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .25); margin-bottom: 6px; }
.boost-innen h2 { font-size: 28px; letter-spacing: -.04em; line-height: 1.05; }
.boost-text { margin: 0; color: rgba(255, 255, 255, .72); }
.boost-stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.boost-stufe { position: relative; display: grid; gap: 2px; padding: 18px 8px 12px; border: 0; border-radius: 16px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--nacht-3); font: inherit; color: #fff; cursor: pointer; text-align: center; transition: transform .15s var(--feder); }
.boost-stufe:active { transform: scale(.97); }
.boost-stufe b { font-size: 14px; }
.boost-stufe span { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.boost-stufe small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.boost-stufe i { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; background: var(--blau); color: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.boost-stufe i.gruen { background: var(--gut, #1f8a4c); }
.boost-stufe[aria-checked="true"] { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px var(--blau); }
.boost-klein { margin: -4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); text-align: center; }
.boost-punkte { margin: -4px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.boost-haken { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; min-height: 44px; border-radius: 14px; background: var(--nacht-2); box-shadow: inset 0 0 0 1px var(--nacht-3); font-size: 14px; line-height: 1.35; cursor: pointer; }
.boost-haken input { width: 22px; height: 22px; margin: 0; accent-color: var(--blau); }
.boost-haken a { color: #fff; text-decoration: underline; white-space: nowrap; }
.boost-innen .knopf.aus { opacity: .45; }
.boost-innen .knopf.rand { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.boost-innen .k-link { justify-self: center; color: rgba(255, 255, 255, .7); }
@media (min-width: 640px) { .boost-sheet { align-items: center; padding: 24px; } .boost-innen { border-radius: 26px; padding: 24px 22px; } .boost-innen::before { display: none; } .boost-stufen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 440px) { body.mit-vorschau .meine-link { display: none; } }
.zeigt-meine .ins-kopf .fortschritt { display: none; }

/* Straße + Hausnummer nebeneinander; Vorschläge schweben über dem Rest (Tastatur am Handy verdeckt sie nicht) */
.adresse { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: start; }
.adresse .ort-treffer { position: absolute; left: 0; right: calc(-96px - 10px); top: 100%; z-index: 20; max-height: 46dvh; overflow-y: auto; }
.adresse #nummer { text-align: center; }

/* Handy-Runde 01.11. abends: Tippziele in der Kopfzeile ≥ 44 px */
.ins-kopf .logo { min-height: 44px; }
.zu { width: 44px; height: 44px; }
.meine-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
.leise-knopf, .fertig-knoepfe .k-link { min-height: 44px; }

/* ---------- 01.11. spät: Erzähl kurz, Haus, Kontakt, Fotoprüfung, PLZ-Prüfung ---------- */
.beschreib-feld { min-height: 132px; font-size: 17px; }
.entwurf { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-m); background: var(--grund); font-size: 15px; }
.entwurf-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.entwurf-knoepfe .knopf { min-height: 44px; flex: 1 1 0; min-width: 0; padding: 0 14px; white-space: nowrap; }
.erkannt { scroll-margin-bottom: calc(var(--leiste) + 16px); display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-m); background: var(--blau-hell, #eef3fd); font-size: 15px; animation: auftauchen .3s var(--sanft); }
.erkannt p { margin: 0; }
.erkannt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.erkannt-chips span { background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 14px; }
#schrittFuerSchritt { justify-self: start; }
.text-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ki-knopf { border: 0; border-radius: 999px; min-height: 44px; padding: 0 16px; font-weight: 700; background: var(--ink); color: #fff; cursor: pointer; }
.ki-knopf:disabled { opacity: .6; }
.feld-bk[hidden] { display: none; }
.kontakt-k { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left; border-radius: var(--r-m); padding: 16px 18px; background: var(--grund); cursor: pointer; color: var(--ink); min-height: 72px; }
.kontakt-k b { display: block; font-size: 18px; letter-spacing: -.02em; }
.kontakt-k small { display: block; color: var(--grau); font-size: 14px; margin-top: 2px; }
.kontakt-k .haken { flex: none; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--linie-stark, #b9bcc4); background: #fff; display: grid; place-items: center; }
.kontakt-k[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blau); background: var(--blau-hell, #eef3fd); }
.kontakt-k[aria-pressed="true"] .haken { background: var(--blau); box-shadow: none; }
.kontakt-k[aria-pressed="true"] .haken::after { content: ""; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.kontakt-feld { display: grid; gap: 8px; }
.kontakt-feld .tipp { margin: 0; }
.ort-gewaehlt.falsch { color: var(--ink); background: #fff4d6; padding: 10px 12px; border-radius: 12px; font-weight: 600; }
/* Prüfen und KI-Arbeit auf den Foto-Kacheln: das eigene Foto, darüber ein ruhiger Ring (Paul 05.11.: das Punkteraster sah „hingerotzt“ aus) */
.foto-liste li.prueft { background: var(--grund); }
.foto-liste li.prueft img { filter: saturate(.7); }
.foto-liste .kachel-status { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(12, 12, 13, .42); color: #fff; }
.foto-liste li.prueft:not(:has(img)) .kachel-status { background: none; color: var(--ink-2); }
.foto-liste .kachel-status small { font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.kachel-ring { position: relative; width: 44px; height: 44px; }
.kachel-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kachel-ring circle { fill: none; stroke-width: 3.5; }
.kachel-ring .bahn { stroke: rgba(255, 255, 255, .3); }
.kachel-ring .wert { stroke: #fff; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 * (1 - var(--p, 0))); transition: stroke-dashoffset .3s linear; }
.kachel-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kachel-ring.dreht svg { animation: kachel-dreh 1s linear infinite; }
.kachel-ring.dreht .wert { stroke-dasharray: 34 113.1; stroke-dashoffset: 0; }
.foto-liste li.prueft:not(:has(img)) .kachel-ring .bahn { stroke: var(--linie); }
.foto-liste li.prueft:not(:has(img)) .kachel-ring .wert { stroke: var(--ink); }
@keyframes kachel-dreh { to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .kachel-ring.dreht svg { animation: none; } .kachel-ring .wert { transition: none; } }
@keyframes pruefen { from { opacity: .45; } }
.foto-nein { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foto-nein li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 10px 6px 10px 10px; border-radius: 14px; background: #fff4d6; animation: auftauchen .3s var(--sanft); }
.foto-nein img, .foto-nein .ohne-bild { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.foto-nein .ohne-bild { display: grid; place-items: center; background: #f1d58a; font-weight: 800; font-size: 22px; }
.foto-nein span { font-size: 14px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.foto-nein b { display: block; font-size: 14px; }
.foto-nein button { width: 44px; height: 44px; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ink-2); }
.karte-preis.leer { font-size: 22px; letter-spacing: -.02em; opacity: .75; }
.mi-klapp { grid-column: 1 / -1; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linie); padding: 0 12px; min-width: 0; }
.mi-klapp summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.mi-klapp p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.mi-tabelle { overflow-x: auto; margin: 0 -4px 10px; }
.mi-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.mi-tabelle th, .mi-tabelle td { padding: 6px 4px; text-align: right; font-weight: 500; white-space: nowrap; border-top: 1px solid var(--linie); }
.mi-tabelle thead th { border-top: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: normal; vertical-align: bottom; }
.mi-tabelle tbody th, .mi-tabelle thead th:first-child { text-align: left; }
@media (max-width: 420px) { .mi-tabelle th, .mi-tabelle td { padding-inline: 2px; } .mi-tabelle thead th { font-size: 10.5px; } }
.mi-anfragen { grid-column: 1 / -1; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linie); padding: 0 12px; }
.mi-anfragen summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.mi-anfrage { padding: 10px 0; border-top: 1px solid var(--linie); display: grid; gap: 2px; }
.mi-anfrage a { font-weight: 700; overflow-wrap: anywhere; }
.mi-anfrage small { color: var(--grau); }
.mi-anfrage p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; }
/* Schritt 1: Diktieren und „Mit KI verbessern“ unter dem Beschreibungsfeld (Cloud, 02.11.) */
.beschreib-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.beschreib-knoepfe:not(:has(button:not([hidden]))) { display: none; }
.diktier-knopf, .ki-klein { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.diktier-knopf { border: 0; background: var(--weiss, #fff); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linie); }
.diktier-knopf svg, .ki-klein svg { width: 18px; height: 18px; flex: none; }
.diktier-knopf[aria-pressed="true"] { background: var(--blau); color: #fff; box-shadow: none; }
.diktier-knopf[aria-pressed="true"] svg { animation: diktier-puls 1.2s ease-in-out infinite; }
@keyframes diktier-puls { 50% { transform: scale(1.18); } }
.ki-klein:disabled, .diktier-knopf:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .diktier-knopf[aria-pressed="true"] svg { animation: none; } }
/* Foto-Knöpfe (✕, ↑): sichtbar klein, Tippfläche ≥ 44 px (Durchlauf 03.11.) */
.foto-liste button::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }

/* Rückfragen nach dem Lesen (Paul 03.11.): eine Frage nach der anderen, Antwort antippen, „Weiß ich nicht“ und „Passt so“ immer da */
.rueckfrage { scroll-margin-bottom: calc(var(--leiste) + 16px); display: grid; gap: 12px; padding: 16px; border-radius: var(--r-m); background: #fff; box-shadow: var(--sh-2, 0 6px 24px rgba(0,0,0,.08)), inset 0 0 0 1px var(--linie); animation: auftauchen .3s var(--sanft); }
.rueckfrage[hidden] { display: none; }
.rf-kopf { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rf-kopf small { margin-left: auto; font-weight: 600; color: var(--grau); font-size: 12.5px; }
.rf-ki { background: var(--blau); color: #fff; border-radius: 5px; padding: 2px 6px; font-size: 11px; }
.rf-titel { margin: 0; font-size: 21px; line-height: 1.2; }
.rf-sub { margin: -6px 0 0; color: var(--ink-2); font-size: 14.5px; }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-chips .chip-k { min-height: 46px; text-align: left; }
.rf-eigen { display: flex; align-items: center; gap: 8px; }
.rf-eigen .feld { flex: 1; min-width: 0; min-height: 48px; font-size: 17px; }
.rf-eigen span { font-weight: 800; color: var(--grau); }
.rf-eigen .knopf { min-height: 48px; padding: 0 18px; flex: none; }
.rf-ort .feld { width: 100%; min-height: 48px; font-size: 17px; }
.rf-ort .ort-treffer:empty { display: none; }
.rf-ort .leer { padding: 10px 12px; color: var(--grau); font-size: 14px; }
.rf-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.rf-unten .knopf { min-height: 46px; padding: 0 22px; }
.rf-leise { border: 0; background: none; color: var(--blau-tief); font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 0; cursor: pointer; }

/* ---------- „Was macht es aus?“ als ruhige Liste: eine Eigenschaft pro Zeile (Paul 04.11.: „viel zu viel auf einmal … komfortabler einstellen“) ---------- */
.eig-liste { display: grid; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); }
.eig { display: grid; gap: 10px; padding: 14px; border-top: 1px solid var(--linie); }
.eig:first-child { border-top: 0; }
.eig[hidden] { display: none; }
.eig-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.eig-kopf b { font-size: 16px; }
.eig-kopf small { font-size: 13px; color: var(--grau); }
.eig-quelle { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--grund); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.eig-quelle[hidden] { display: none; }
.eig-wahl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--grund); }
.eig-wahl button { min-height: 44px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.15; cursor: pointer; transition: background .15s, color .15s; }
.eig-wahl button[aria-checked="true"] { background: var(--ink); color: #fff; }
.eig-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eig-chips .chip-k { min-height: 44px; padding: 0 14px; font-size: 14px; }
.eig-chips .chip-k small { font-weight: 600; opacity: .7; }
.eig .befristung { display: grid; gap: 8px; margin: 0; }
.eig .befristung[hidden] { display: none; }
.eig .befristung .chip-k { min-height: 44px; padding: 0 14px; font-size: 14px; }
.eig .befristung .tipp { margin: 0; }
.eig-energie .zwei { margin-top: 2px; }
.aus-fotos-hinweis { margin: -4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--grund); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.aus-fotos-hinweis[hidden] { display: none; }
@media (max-width: 380px) { .eig-wahl button { font-size: 14px; } }
@media (min-width: 960px) {
  .eig { grid-template-columns: 190px minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .eig > .befristung, .eig-mehr > .eig-chips, .eig-energie > .zwei { grid-column: 2; }
  .eig-kopf { flex-direction: column; align-items: flex-start; }
  .eig-quelle { margin-left: 0; }
}

/* „Einfach sagen“: tippen oder diktieren, die KI trägt ein (public/inserieren.js sagUebernehmen) */
.sag-es { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; margin: 2px 0 6px; }
.sag-titel { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--grau); }
.sag-es .feld { min-height: 48px; font-size: 15px; }
.sag-es .feld::placeholder { color: var(--grau); }
.sag-mik, .sag-ok { min-width: 48px; height: 48px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.sag-mik { display: grid; place-items: center; background: var(--grund); color: var(--ink); }
.sag-mik svg { width: 20px; height: 20px; }
.sag-mik[aria-pressed="true"] { background: var(--ink); color: #fff; animation: sag-puls 1s ease-in-out infinite alternate; }
.sag-ok { padding: 0 16px; background: var(--ink); color: #fff; }
.sag-es.arbeitet { opacity: .6; pointer-events: none; }
@keyframes sag-puls { to { box-shadow: 0 0 0 6px rgba(17, 17, 18, .12); } }
@media (prefers-reduced-motion: reduce) { .sag-mik[aria-pressed="true"] { animation: none; } }

/* Kaution mit einem Tipp: 2 oder 3 Monatsmieten */
.kaution-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kaution-schnell[hidden] { display: none; }
.kaution-schnell button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--grund); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

.foto-liste li:not(.prueft) img { cursor: zoom-in; } /* antippen = groß ansehen (FotoStudio.ansehen) */
/* Kein Stripe-Schlüssel: kein Boost-Knopf */
.boost-aus #fertigBoost, .boost-aus [data-aktion="boost"] { display: none !important; }