/* KV-Rechner: Formular links, Live-Preis rechts (ab 960 px), mobil untereinander mit Preisleiste unten */

.kv-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.kv-raster > * { min-width: 0; }

/* Courts */
.courts { display: flex; flex-direction: column; }
.court-zeile { padding: 14px 0 0; margin: 14px 0 0; border-top: 1px dashed var(--g3); }
.court-zeile:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.court-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.court-kopf b { font-size: 15px; }
.court-zeile .gruppe { margin-top: 12px; }
.court-zeile > fieldset.gruppe:first-child, .court-kopf + fieldset.gruppe { margin-top: 0; }
.groessen-feld { margin-top: 12px; }
.court-anzahl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.court-anzahl label { font-size: 14px; font-weight: 700; color: var(--g7); }
.court-neu { margin-top: 14px; align-self: flex-start; }
.court-neu::before { content: '+'; font-size: 20px; line-height: 1; }

/* Live-Preis */
.kv-summe { margin-bottom: 14px; }
.summe-karte { position: relative; }
.summe-karte .marke + .zeilen { margin-top: 8px; }
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie-dunkel); font-size: 14.5px; }
.zeilen li:first-child { border-top: 0; padding-top: 4px; }
.zeilen li > span { min-width: 0; }
.zeilen li small { display: block; color: var(--auf-schwarz); font-size: 12.5px; margin-top: 2px; }
.zeilen li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.summe-fuss { margin-top: 12px; padding-top: 14px; border-top: 1px solid #5a5a55; }
.summe-fuss .betrag-gross { color: var(--weiss); }
.summe-karte > .marke + .summe-fuss { margin-top: 10px; padding-top: 0; border-top: 0; }
.summe-fuss .betrag-gross.spanne { font-size: 27px; }
.summe-spanne { margin-top: 12px; padding: 12px; border-radius: 10px; background: #1c1c1a; font-size: 14px; }
.summe-spanne b { display: block; color: var(--gelb); font-size: 17px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.summe-hinweis { font-size: 12.5px; color: var(--auf-schwarz); margin: 12px 0 0; }
.summe-karte.rechnet .zeilen, .summe-karte.rechnet .summe-fuss { opacity: .55; transition: opacity .2s; }
.summe-status { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--auf-schwarz); }
.summe-status .kreisel { width: 14px; height: 14px; border-width: 2px; }
.summe-leer { color: var(--auf-schwarz); font-size: 14.5px; margin: 8px 0 0; }
.summe-fehler { color: #ffb4a9; font-size: 14px; margin: 8px 0 0; }
.summe-vorteile { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--linie-dunkel); font-size: 13px; color: var(--auf-schwarz); display: grid; gap: 4px; }
.summe-vorteile li::before { content: '✓  '; color: var(--gelb); font-weight: 700; }

/* PLZ und Ort immer nebeneinander */
.plz-ort { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 2fr); gap: 12px; }
/* Fehlermeldung der PLZ über die ganze Zeile (PLZ 1 Teil + Abstand + Ort 2 Teile) */
.plz-ort > .feld:first-child .feld-fehler { width: calc(300% + 12px); }

/* Bauort abweichend */
.bauort { margin-top: 14px; }
.bauort .feld { margin-top: 12px; max-width: 220px; }

/* Fotos */
.ablage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 110px;
  border: 2px dashed var(--g3); border-radius: 12px; padding: 16px; text-align: center; color: var(--g7);
  font-size: 15px; cursor: pointer; background: var(--g1); transition: border-color .15s, background .15s;
}
.ablage b { color: var(--schwarz); }
.ablage small { color: var(--g6); font-size: 13px; }
.ablage.ziehen, .ablage:hover { border-color: var(--schwarz); background: var(--weiss); }
.foto-input:focus-visible + .ablage { outline: var(--fokus); outline-offset: 2px; }
.foto-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.foto-liste li { position: relative; border-radius: 10px; overflow: hidden; background: var(--g2); aspect-ratio: 1; }
.foto-liste img { width: 100%; height: 100%; object-fit: cover; }
.foto-liste button {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .78); color: var(--weiss); font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.foto-liste button:focus-visible { outline: 3px solid var(--gelb); outline-offset: 1px; }
.foto-liste .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: rgba(0, 0, 0, .6); color: var(--weiss); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeichen { text-align: right; font-size: 12.5px; color: var(--g6); margin-top: 4px; }

/* Absenden */
.kv-absenden .ankreuzen { margin-bottom: 16px; }
.kv-absenden .klein { margin: 12px 0 0; text-align: center; }
.fehlerliste { margin-bottom: 16px; }
.fehlerliste:empty { display: none; }
.kv-kontakt .felder { margin-top: 18px; }
.fehlerliste ul { margin: 6px 0 0; padding-left: 18px; }
.fehlerliste a { color: inherit; }

/* Persönlicher Link */
.begruessung { margin-bottom: 18px; }

/* Preisleiste mobil */
.preisleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--abstand) calc(10px + env(safe-area-inset-bottom)); background: var(--schwarz); color: var(--weiss);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); transform: translateY(110%); transition: transform .2s;
}
.preisleiste.sichtbar { transform: none; }
.preisleiste .marke { color: var(--auf-schwarz); }
.preisleiste b { display: block; font-family: var(--schrift-fett); font-weight: 400; font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.preisleiste .knopf { margin-left: auto; min-height: 44px; }
.eingebettet .preisleiste { display: none; }

/* Ergebnis */
.ergebnis-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
.kv-karte .kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.kv-karte .tabelle { margin-top: 6px; }
.spanne-zeile td { background: var(--gelb-hell); padding: 12px 12px !important; border-radius: 0 0 10px 10px; }
.spanne-zeile .spanne-betrag { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kv-karte .knopfreihe { margin-top: 14px; }
.termin-karte h2 { font-size: 21px; margin: 4px 0 6px; }
.termin-karte > p { color: var(--g7); }
.termin-karte .terminwahl { margin-top: 16px; }
.terminknopf { margin-top: 18px; }
.foto-status { margin-top: 14px; }
.foto-status .hinweis { margin: 0; }

@media (min-width: 960px) {
  .kv-raster {
    grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px;
    grid-template-areas: "projekt summe" "kontakt summe" "weiteres summe" "absenden summe";
    grid-template-rows: auto auto auto 1fr;
  }
  .kv-projekt { grid-area: projekt; }
  .kv-kontakt { grid-area: kontakt; }
  .kv-weiteres { grid-area: weiteres; }
  .kv-absenden { grid-area: absenden; align-self: start; }
  .kv-summe { grid-area: summe; align-self: start; position: sticky; top: 16px; }
  .preisleiste { display: none; }
  .ergebnis-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}