/* Villa Schwalbe – Anfrage */

.wasser--knapp { padding-bottom: 7.5rem; }
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }

.demo-hinweis {
  display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 2rem;
  padding: 1rem 1.2rem; border-radius: 12px; background: var(--flaeche);
  font-size: .94rem; color: var(--tinte);
}
.demo-hinweis .icon { color: var(--petrol); margin-top: .2rem; }
.demo-hinweis b { color: var(--tinte); }

.anfrage-form { display: grid; gap: 2rem; }
.anfrage-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; min-width: 0; }
.anfrage-form legend { font: 500 var(--h3)/1.2 var(--font-kopf); color: var(--text-kopf); margin-bottom: 1rem; padding: 0; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld-reihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld { display: grid; gap: .4rem; align-content: start; }
.feld label { font-size: .92rem; font-weight: 700; color: var(--text-kopf); }
.pflicht { color: var(--west-text); }
.optional { font-weight: 400; color: var(--text); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: .75rem .95rem; border-radius: 12px;
  border: 1px solid #cfd8da; background: var(--weiss); color: var(--tinte); font-size: 1rem;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.feld textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.feld input::placeholder, .feld textarea::placeholder { color: #6b7779; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--aqua); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tuerkis); box-shadow: 0 0 0 3px rgba(28, 186, 200, .25); }
.feld [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.feld-fehler { font-size: .88rem; font-weight: 600; color: #b3261e; }
.feld-info { font-size: .88rem; }
.haken-gruppe { display: grid; gap: .6rem; margin-top: .3rem; }
.haken { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; font-weight: 400 !important; color: var(--text) !important; cursor: pointer; }
.haken input { width: 22px; height: 22px; min-height: 0; margin-top: .15rem; accent-color: var(--petrol); flex: none; }
.haken--pflicht { color: var(--text-kopf) !important; }
.form-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-fuss p { font-size: .88rem; }
.knopf--gross { min-height: 58px; padding-inline: 2rem; font-size: 1.05rem; }

.fehler-zusammenfassung { padding: 1.1rem 1.3rem; border-radius: 12px; background: #fdf1f0; box-shadow: inset 0 0 0 1px #f0c7c3; color: #7d1a14; }
.fehler-zusammenfassung b { color: #7d1a14; }
.fehler-zusammenfassung ul { margin-top: .5rem; padding-left: 1.2rem; display: grid; gap: .3rem; }
.fehler-zusammenfassung a { color: #7d1a14; font-weight: 600; }
.fehler-zusammenfassung:focus-visible { outline-color: #b3261e; }

.bestaetigung { padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: calc(var(--radius) + 4px); background: var(--flaeche); }
.bestaetigung:focus { outline: none; }
.bestaetigung-kopf { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.bestaetigung-kopf .icon { width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: 50%; background: var(--petrol); color: var(--weiss); }
.bestaetigung h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.bestaetigung-liste { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.5rem; margin: 1.5rem 0; padding: 1.2rem 0; border-block: 1px solid var(--linie); }
.bestaetigung-liste dt { font-size: .9rem; }
.bestaetigung-liste dd { margin: 0; font-weight: 700; color: var(--tinte); overflow-wrap: anywhere; }
.bestaetigung-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

.anfrage-seite { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); display: grid; gap: 1.2rem; }
.schaetzung { padding: 1.5rem 1.6rem; border-radius: var(--radius); color: var(--weiss); background: linear-gradient(165deg, var(--petrol-tief), var(--petrol)); box-shadow: var(--schatten); }
.schaetzung h2 { color: var(--weiss); font-size: 1.35rem; margin-bottom: .9rem; }
.schaetzung-leer, .schaetzung-text { color: rgba(255, 255, 255, .88); font-size: .95rem; }
.schaetzung-naechte { font-weight: 700; color: var(--weiss); }
.schaetzung-liste { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin: .9rem 0; padding: .9rem 0; border-block: 1px solid rgba(255, 255, 255, .25); font-size: .9rem; font-variant-numeric: tabular-nums; }
.schaetzung-liste dt { color: rgba(255, 255, 255, .85); }
.schaetzung-liste dd { margin: 0; text-align: right; font-weight: 700; color: var(--weiss); }
.schaetzung-liste .minus { color: var(--mint); }
.schaetzung-summe { font: 800 clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem)/1.1 var(--font-text); color: var(--weiss); font-variant-numeric: tabular-nums; margin-top: .3rem; }
.schaetzung-summe span { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.schaetzung-klein { margin-top: 1rem; font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }

.direkt-kasten { padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--flaeche); display: grid; gap: .35rem; }
.direkt-kasten h2 { font-size: 1.2rem; margin-bottom: .3rem; }
.direkt-kasten a { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; text-decoration: none; color: var(--tinte); font-weight: 700; font-variant-numeric: tabular-nums; }
.direkt-kasten a:hover { color: var(--petrol); }
.direkt-kasten small { display: block; font-size: .78rem; font-weight: 600; color: var(--text); }
.direkt-kasten .icon { color: var(--petrol); width: 1.3rem; height: 1.3rem; }

.ablauf { list-style: none; padding: 0 0 0 .3rem; display: grid; gap: .9rem; counter-reset: schritt; }
.ablauf li { position: relative; padding-left: 2.6rem; font-size: .92rem; counter-increment: schritt; }
.ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--aqua);
}
.ablauf b { display: block; color: var(--text-kopf); }

@media (max-width: 980px) {
  .anfrage-raster { grid-template-columns: 1fr; }
  .anfrage-seite { position: static; }
}
@media (max-width: 560px) {
  .feld-reihe, .feld-reihe--drei { grid-template-columns: 1fr; }
  .feld-reihe--drei { grid-template-columns: 1fr 1fr; }
  .feld-reihe--drei .feld:first-child { grid-column: 1 / -1; }
  .bestaetigung-liste { grid-template-columns: 1fr; gap: .1rem; }
  .bestaetigung-liste dd { margin-bottom: .6rem; }
}

.feld .datum-feld { --datum-einzug: calc(.95rem + 1px); --datum-rechts: calc(.95rem + 1px); font-size: 1rem; }
/* Solange die ausgeschriebene Anzeige sichtbar ist, trägt die Hülle das Kästchen des Feldes */
.feld .datum-feld.zeigt-anzeige { border-radius: 12px; background: var(--weiss); box-shadow: inset 0 0 0 1px #cfd8da; transition: box-shadow .25s var(--ease-out); }
.feld .datum-feld.zeigt-anzeige:hover { box-shadow: inset 0 0 0 1px var(--aqua); }
.feld .datum-feld.zeigt-anzeige:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px #b3261e, 0 0 0 3px rgba(179, 38, 30, .12); }
@media (max-width: 560px) {
}
.anfahrt { padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--flaeche); display: grid; gap: .6rem; font-size: .92rem; }
.anfahrt h2 { font-size: 1.2rem; }
.anfahrt .hinweis-bestaetigen { display: block; }