/* Terras24 · Modul „Kontakt“ und das Blatt „Aufmaß anfragen“ (Angebotszettel und Formular) */
#kontakt .ko-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 8vw, 64px); }
#kontakt .gross { margin-bottom: clamp(28px, 6vw, 48px); }

/* Telefon groß */
#kontakt .ko-telefon { display: inline-flex; align-items: center; gap: .2em; max-width: 100%; color: var(--tinte); text-decoration: none; font: 860 clamp(40px, 10.6vw, 88px)/1 var(--display); font-stretch: 75%; letter-spacing: -.01em; white-space: nowrap; padding: 4px 0; }
#kontakt .ko-telefon svg { width: .62em; height: .62em; flex: none; color: var(--salbei-tief); stroke-width: 2.2; }
#kontakt .ko-telefon .zahl { font-weight: inherit; font-variant-numeric: proportional-nums; word-spacing: .14em; border-bottom: 3px solid var(--salbei-tief); padding-bottom: .04em; }
#kontakt .ko-telefon:hover .zahl { border-bottom-color: var(--tinte); }

/* Live-Status (der Kern füllt Punkt und Text) */
#kontakt .ko-status { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font: 640 16px/1.35 var(--text); color: var(--tinte); }
#kontakt .ko-status .punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--regen-2); }
#kontakt .ko-status .punkt.an { background: var(--salbei-tief); box-shadow: 0 0 0 4px rgba(62, 106, 66, .2); }

#kontakt .ko-danke { margin-top: 24px; padding: 16px 18px; border-left: 4px solid var(--salbei-tief); background: var(--kalk-2); }
#kontakt .ko-danke strong { display: block; font: 780 22px/1.1 var(--display); font-stretch: 85%; margin-bottom: 4px; }

/* Wege */
#kontakt .ko-wege { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-hell-2); }
#kontakt .ko-wege li { border-bottom: 1px solid var(--linie-hell-2); }
#kontakt .ko-weg { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 0; min-height: 64px; color: var(--tinte); text-decoration: none; }
#kontakt .ko-weg svg { width: 24px; height: 24px; grid-row: 1 / span 3; margin-top: 2px; color: var(--salbei-tief); }
#kontakt .ko-weg-name { font: 680 13px/1.2 var(--display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
#kontakt .ko-weg-wert { font: 760 22px/1.2 var(--display); font-stretch: 85%; overflow-wrap: anywhere; }
#kontakt .ko-weg-zusatz { margin-top: 4px; font-size: 15px; color: var(--tinte-2); }
#kontakt a.ko-weg:hover .ko-weg-wert { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--salbei-tief); }

#kontakt .ko-handlung { margin-top: 32px; }
#kontakt .ko-handlung .knopf { width: 100%; min-height: 60px; font-size: 18px; }
#kontakt .ko-mitnahme { margin-top: 12px; }
#kontakt .ko-mitnahme strong { color: var(--tinte); font-weight: 680; }

@media (min-width: 900px) {
  #kontakt .ko-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: end; }
  #kontakt .ko-handlung .knopf { width: auto; padding: 0 30px; }
  #kontakt .ko-formular { grid-column: 1 / -1; max-width: 640px; }
}

/* ---------- Formular (ohne JS im Abschnitt, mit JS im Blatt) ---------- */
#kontakt .ko-formular { padding-top: 8px; }
#kontakt .ko-formular-titel { margin-bottom: 20px; }
#blattAnfrage .ko-formular-titel { display: none; }
@media (min-width: 900px) { #blattAnfrage.blatt { padding-top: 28px; } }
:is(#kontakt, #blattAnfrage) .ko-form { display: grid; gap: 20px; }
:is(#kontakt, #blattAnfrage) .ko-feld { display: grid; gap: 6px; }
:is(#kontakt, #blattAnfrage) .ko-feld > label, :is(#kontakt, #blattAnfrage) legend { font: 680 15px/1.3 var(--text); color: var(--tinte); padding: 0; }
:is(#kontakt, #blattAnfrage) .ko-frei { font-weight: 450; color: var(--tinte-2); }
:is(#kontakt, #blattAnfrage) input[type="text"], :is(#kontakt, #blattAnfrage) input[type="tel"], :is(#kontakt, #blattAnfrage) input[type="email"], :is(#kontakt, #blattAnfrage) textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #8b9398; border-radius: var(--ecke); background: #fff; color: var(--tinte); font-size: 17px; line-height: 1.35; transition: border-color .2s, box-shadow .2s; }
:is(#kontakt, #blattAnfrage) textarea { min-height: 112px; resize: vertical; }
:is(#kontakt, #blattAnfrage) input:hover, :is(#kontakt, #blattAnfrage) textarea:hover { border-color: var(--tinte-2); }
:is(#kontakt, #blattAnfrage) input:focus-visible, :is(#kontakt, #blattAnfrage) textarea:focus-visible { outline: 3px solid var(--salbei-tief); outline-offset: 1px; border-color: var(--tinte); }
:is(#kontakt, #blattAnfrage) [aria-invalid="true"] { border-color: #a1321f !important; box-shadow: inset 0 0 0 1px #a1321f; }
:is(#kontakt, #blattAnfrage) .ko-feld-plz input { max-width: 10ch; }
:is(#kontakt, #blattAnfrage) .ko-gruppe { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; min-width: 0; }
:is(#kontakt, #blattAnfrage) .ko-gruppe legend { margin-bottom: 2px; }
:is(#kontakt, #blattAnfrage) .ko-hinweis { margin: -6px 0 0; font-size: 14.5px; color: var(--tinte-2); }
:is(#kontakt, #blattAnfrage) .ko-gruppe .ko-feld > label { font-weight: 560; }
@media (min-width: 560px) {
  :is(#kontakt, #blattAnfrage) .ko-gruppe:not(.ko-rueckruf) { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  :is(#kontakt, #blattAnfrage) .ko-gruppe:not(.ko-rueckruf) > :is(legend, .ko-hinweis, #ko-kontakt-fehler) { grid-column: 1 / -1; }
}

/* Fehler: Text, Symbol und Rand, nicht nur Farbe */
:is(#kontakt, #blattAnfrage) .ko-fehler { display: flex; gap: 6px; align-items: flex-start; margin: 0; font: 600 14.5px/1.35 var(--text); color: #a1321f; }
:is(#kontakt, #blattAnfrage) .ko-fehler::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #a1321f; color: #fff; font: 800 12px/1 var(--text); }

/* Rückrufzeit als Umschalter */
:is(#kontakt, #blattAnfrage) .ko-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#kontakt, #blattAnfrage) .ko-wahl label { position: relative; cursor: pointer; }
:is(#kontakt, #blattAnfrage) .ko-wahl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
:is(#kontakt, #blattAnfrage) .ko-wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--ecke); background: var(--kalk-2); box-shadow: inset 0 0 0 1.5px var(--linie-hell); color: var(--tinte); font: 680 15px/1 var(--display); font-stretch: 100%; transition: background .2s, color .2s; }
:is(#kontakt, #blattAnfrage) .ko-wahl input:checked + span { background: var(--tinte); color: #fff; box-shadow: none; }
:is(#kontakt, #blattAnfrage) .ko-wahl input:focus-visible + span { outline: 3px solid var(--salbei-tief); outline-offset: 2px; }

/* Einwilligung */
:is(#kontakt, #blattAnfrage) .ko-einwilligung { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--tinte); }
:is(#kontakt, #blattAnfrage) .ko-einwilligung input { width: 24px; height: 24px; margin: 0; accent-color: var(--salbei-tief); cursor: pointer; }
:is(#kontakt, #blattAnfrage) .ko-einwilligung label { cursor: pointer; padding-top: 1px; }
:is(#kontakt, #blattAnfrage) .ko-einwilligung a { color: var(--salbei-tief); font-weight: 650; }
:is(#kontakt, #blattAnfrage) .ko-einwilligung .ko-fehler { grid-column: 2; }
:is(#kontakt, #blattAnfrage) .ko-einwilligung input[aria-invalid="true"] { outline: 2px solid #a1321f; outline-offset: 2px; box-shadow: none; }

/* Honigtopf: für Menschen unsichtbar, für Programme ein Feld wie jedes andere */
:is(#kontakt, #blattAnfrage) .ko-honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

:is(#kontakt, #blattAnfrage) .ko-muster { margin: 0; padding: 10px 12px; border-radius: var(--ecke); background: var(--kalk-2); color: var(--tinte-2); font: 600 14px/1.4 var(--text); }
:is(#kontakt, #blattAnfrage) .ko-meldung { margin: 0; font: 640 15px/1.4 var(--text); color: #a1321f; }
:is(#kontakt, #blattAnfrage) .ko-meldung:empty { display: none; }
:is(#kontakt, #blattAnfrage) .ko-meldung.leise { color: var(--tinte-2); font-weight: 500; }
:is(#kontakt, #blattAnfrage) .ko-meldung a { color: inherit; }
:is(#kontakt, #blattAnfrage) .ko-senden { width: 100%; min-height: 56px; font-size: 17px; }
:is(#kontakt, #blattAnfrage) .ko-senden[aria-disabled="true"] { opacity: .7; cursor: progress; }

/* Angebotszettel */
#blattAnfrage .ko-zettel { padding: 14px 16px 12px; border-radius: var(--ecke); background: #fff; box-shadow: inset 0 0 0 1px var(--linie-hell); }
#blattAnfrage .ko-zettel-kopf { margin: 0 0 6px; font: 680 13px/1.2 var(--display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--salbei-tief); outline: none; }
#blattAnfrage .ko-zettel ul { list-style: none; margin: 0; padding: 0; }
#blattAnfrage .ko-zettel li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--linie-hell); }
#blattAnfrage .ko-zettel li:first-child { border-top: 0; }
#blattAnfrage .ko-z-was { min-width: 0; }
#blattAnfrage .ko-z-titel { display: block; font: 760 18px/1.15 var(--display); font-stretch: 85%; }
#blattAnfrage .ko-z-text { display: block; font-size: 14.5px; line-height: 1.35; color: var(--tinte-2); overflow-wrap: anywhere; }
#blattAnfrage .ko-z-preis { font-size: 20px; white-space: nowrap; font-variant-numeric: proportional-nums; }
#blattAnfrage .ko-z-weg { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--ecke); background: transparent; color: var(--tinte-2); cursor: pointer; }
#blattAnfrage .ko-z-weg:hover { background: var(--kalk-2); color: var(--tinte); }
#blattAnfrage .ko-z-weg svg { width: 20px; height: 20px; }
#blattAnfrage .ko-zettel .quelle { margin: 6px 0 0; }
#blattAnfrage .ko-zettel-leer { margin: 0; font-size: 15px; color: var(--tinte-2); }

/* Bestätigung */
#blattAnfrage .ko-erfolg { display: grid; gap: 14px; padding: 8px 0 4px; }
#blattAnfrage .ko-erfolg-zeichen { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--salbei-tief); color: #fff; }
#blattAnfrage .ko-erfolg-zeichen svg { width: 30px; height: 30px; }
#blattAnfrage .ko-erfolg h3 { font-size: clamp(34px, 8vw, 48px); outline: none; }
#blattAnfrage .ko-erfolg p { margin: 0; color: var(--tinte-2); }
#blattAnfrage .ko-erfolg .knopf { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
  #blattAnfrage .ko-erfolg { animation: ko-ein .6s var(--kurve) both; }
  #blattAnfrage .ko-erfolg-zeichen { animation: ko-ein .5s var(--kurve) .1s both; }
}
@keyframes ko-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
:is(#kontakt, #blattAnfrage) .ko-ablauf { margin: 4px 0 12px; }
:is(#kontakt, #blattAnfrage) .ko-zahlung { border: 0; padding: 0; margin: 0 0 8px; }
:is(#kontakt, #blattAnfrage) .ko-zahlung legend { font-weight: 700; padding: 0; }