/* Erzeugt aus kontakt.html durch entwuerfe/unterseiten/bau/bau.mjs. Nicht von Hand ändern. */
/* Kontakt-Section „Mandant werden“, Vorschlag A „Steckbrief“ (Flo, 02.11.2026). Konzept: entwuerfe/kontakt/konzept.md.
   Die Anfrage wächst links als Blatt mit; am Handy steht sie als Streifen über der Karte. */
/* Sprünge und Fokus landen unter dem festen Kopf (bis 81 px hoch), auch auf Seiten ohne eigenen Abstand */
html:has(#mandant-werden){scroll-padding-top:96px}
.kt{background:var(--grund)}
.kt .innen{padding-block:clamp(56px,7vw,104px)}
.kt__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:start}
.kt h2{max-width:18ch;text-wrap:balance}
.kt__unter{margin-top:20px;font-size:1.125rem;line-height:1.75;max-width:31em}
.kt__kosten{margin-top:14px}
.kt__kosten .pfeillink{color:var(--tinte)}
.kt-nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Telefon als Alternative */
.kt-tel{display:grid;gap:12px;margin-top:36px}
.kt-tel__frage{font:600 15px/1.4 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-tel__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.kt-tel__zeiten{font-size:14px;line-height:1.5;color:var(--leise)}
.kt .status{font-size:14px;white-space:normal}
.kt .status__punkt{width:8px;height:8px}

/* Das Blatt: so kommt die Anfrage bei 7TAX an */
.kt-blattzone{position:relative;z-index:0;margin-top:48px}
.kt-blatt-titel{font-size:14px;line-height:1.5;color:var(--leise);margin-bottom:14px}
.kt-blatt{position:relative;max-width:440px;padding:26px 28px 28px;background:#fff;border:1px solid var(--tinte);border-radius:6px}
.kt-blatt::before{content:"";position:absolute;inset:0;transform:translate(9px,9px);background:var(--flaeche);border:1px solid #9ca8ab;border-radius:6px;z-index:-1}
.kt-blatt__kopf{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--linie);font:600 14px/1.4 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-blatt__datum{font-weight:400;color:var(--leise)}
.kt-blatt__einordnung{min-height:24px;font:600 16px/1.5 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-blatt__frist{display:inline-block;margin-left:6px;padding:1px 10px;border-radius:9999px;background:var(--p700);color:#fff;font:600 12.5px/1.6 "Inter",system-ui,sans-serif;vertical-align:2px}
.kt-blatt__frist[hidden]{display:none}
.kt-zeilen{display:grid;gap:12px;margin:22px 0 0}
.kt-zeile{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:baseline}
.kt-zeile dt{font-size:13.5px;line-height:1.45;color:var(--leise)}
.kt-zeile dd{margin:0;font:500 14.5px/1.45 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-druck{display:block;height:9px;margin-top:4px;border-radius:2px;background:var(--flaeche)}
.kt-siegel{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linie);font:600 14px/1.4 "Inter",system-ui,sans-serif;color:var(--p700)}
.kt-siegel[hidden]{display:none}
.kt-siegel__ring{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px solid var(--p700);border-radius:50%}
.kt-siegel__ring::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--p700);border-width:0 2px 2px 0;transform:rotate(45deg)}
.kt-blatt-fuss{max-width:440px;margin-top:32px;font-size:14px;line-height:1.5;color:var(--leise)}
.kt-streifen{display:none}
/* Das Blatt bleibt im Blick, während rechts weiter unten ausgewählt wird; die linke Spalte reicht dafür über die ganze
   Höhe der Karte. Nur wenn das Blatt unter dem Kopf ganz Platz hat. */
@media (min-width:1001px) and (min-height:600px){
  .kt__links{align-self:stretch}
  .kt-blattzone{position:sticky;top:112px}
}

/* Die Karte */
.kt-karte{background:#fff;color:var(--text);border:1px solid var(--linie);border-radius:24px;padding:40px}
.kt-schritt{margin:0;padding:0;border:0;min-width:0}
.kt-schritt+.kt-schritt{margin-top:48px;padding-top:40px;border-top:1px solid var(--flaeche)}
.js .kt-schritt{display:none}
.js .kt-schritt.kt-aktiv{display:block;margin-top:0;padding-top:0;border-top:0}
.kt-kopf{display:grid;gap:6px;margin-bottom:28px}
.kt-schritt__nr{font:500 14px/1.4 "Inter",system-ui,sans-serif;color:var(--leise)}
.kt-h3{font-size:1.5rem;outline:none}
.kt-pflichtsatz{font-size:14px;line-height:1.5;color:var(--leise)}
.kt-gruppen{display:grid;gap:32px}
.kt-gruppe{margin:0;padding:0;border:0;min-width:0}
.kt-gruppe[hidden],.kt-feld[hidden],.kt-bedingt[hidden]{display:none}
.kt-legend{display:block;padding:0;margin-bottom:12px;font:600 15px/1.4 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-opt{font-weight:400;color:var(--leise)}
.kt-hinweis{display:block;font:400 14px/1.5 "Inter",system-ui,sans-serif;color:var(--leise)}
.kt-legend .kt-hinweis{margin-top:2px}
.kt-nur{display:inline-block;margin-bottom:6px;font:600 13px/1.4 "Inter",system-ui,sans-serif;color:var(--p700)}
.js .kt-nur{display:none}

/* Auswahl als Kacheln: echte Radio- und Checkbox-Felder, das Label ist die ganze Kachel */
/* Spalten nach Platz: jede Kachel mindestens so breit, dass das längste Wort ganz hineinpasst */
.kt-wahl{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.kt-wahl--eins{grid-template-columns:minmax(0,1fr)}
.kt-wahl--kurz{grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr))}
.kt-kachel{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;background:#fff;border:1px solid var(--linie);border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.kt-kachel:hover{border-color:#9ca8ab}
.kt-kachel[hidden]{display:none}
.kt-kachel input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kt-marke{position:relative;flex:none;width:20px;height:20px;border:1.5px solid var(--leise);border-radius:50%;background:#fff;transition:border-color .15s ease,background-color .15s ease}
.kt-marke--eckig{border-radius:6px}
.kt-kachel input:checked+.kt-marke{border-color:var(--p700);background:var(--p700);box-shadow:inset 0 0 0 4px #fff}
.kt-kachel input:checked+.kt-marke--eckig{box-shadow:none}
.kt-kachel input:checked+.kt-marke--eckig::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kt-kachel:has(input:checked){border-color:var(--p700);box-shadow:inset 0 0 0 1px var(--p700);background:var(--p50)}
.kt-kachel:has(input:focus-visible){outline:2px solid var(--p600);outline-offset:2px}
.kt-text{display:block;min-width:0}
.kt-titel{display:block;font:600 15px/1.35 "Inter",system-ui,sans-serif;color:var(--tinte);overflow-wrap:break-word}
.kt-sub{display:block;margin-top:2px;font:400 14px/1.45 "Inter",system-ui,sans-serif;color:var(--leise)}
.kt-wahl--gross .kt-kachel{min-height:76px;padding:16px 20px}
.kt-wahl--gross .kt-titel{font-size:16px}

/* Eingabefelder; Rand mist-500, damit das Feld 3:1 Kontrast zum Weiß hat (WCAG 1.4.11) */
.kt-felder{display:grid;gap:24px}
.kt-feld{display:grid;gap:6px;grid-template-columns:minmax(0,1fr)}
.kt-feld--halb{max-width:340px}
.kt-label{font:600 15px/1.4 "Inter",system-ui,sans-serif;color:var(--tinte)}
/* Safari auf dem iPhone gibt dem Datumsfeld eine große Mindestbreite und zentriert den Wert */
.kt-eingabe::-webkit-date-and-time-value{text-align:left}
@supports (-webkit-touch-callout:none){input[type="date"].kt-eingabe{-webkit-appearance:none;appearance:none}}
.kt-eingabe{width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid #67787c;border-radius:12px;background:#fff;font:400 16px/1.4 "Inter",system-ui,sans-serif;color:var(--tinte)}
textarea.kt-eingabe{height:auto;min-height:112px;padding:12px 14px;resize:vertical}
.kt-eingabe:focus-visible{outline:2px solid var(--p600);outline-offset:2px}
.kt-eingabe[aria-invalid="true"]{border-color:#a8201a;box-shadow:inset 0 0 0 1px #a8201a}
.kt-fehler{font:600 14px/1.45 "Inter",system-ui,sans-serif;color:#a8201a}
.kt-fehler[hidden]{display:none}
.kt-gruppe--fehler .kt-kachel{border-color:#a8201a}
.kt-falle{display:none}

/* Fehlerliste oben in der Karte */
.kt-fehlerliste{margin-bottom:28px;padding:18px 20px;border:2px solid #a8201a;border-radius:16px;background:#fff;outline:none}
.kt-fehlerliste[hidden]{display:none}
.kt-fehlerliste__titel{margin-bottom:8px;font:600 16px/1.4 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-fehlerliste ul{margin:0;padding:0;list-style:none}
.kt-fehlerliste li+li{margin-top:4px}
.kt-fehlerliste a{font:600 15px/1.45 "Inter",system-ui,sans-serif;color:#a8201a;text-decoration:underline;text-underline-offset:3px}

/* Frist: Hinweis mit Telefon und Live-Status */
.kt-eilt{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px;padding:16px 20px;border-radius:16px;background:var(--p50)}
.kt-eilt__text{font:600 15px/1.45 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-eilt__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}

/* Wunschfenster */
.kt-tage{display:grid;gap:10px}
.kt-tag{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
.kt-tag__name{font:600 15px/1.35 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-tag .kt-kachel{min-height:52px}

/* Zusammenfassung vor dem Absenden (nur mit JavaScript, ohne steht ohnehin alles untereinander) */
.kt-uebersicht-block{display:none;margin-top:40px}
.js .kt-uebersicht-block{display:block}
.kt-uebersicht{margin:0;border-top:1px solid var(--linie)}
.kt-ue-zeile{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linie)}
.kt-ue-zeile dt{font:600 14px/1.45 "Inter",system-ui,sans-serif;color:var(--tinte)}
.kt-ue-zeile dd{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.kt-textknopf{padding:6px 0;border-radius:4px;background:none;font:600 15px/20px "Inter",system-ui,sans-serif;color:var(--tinte);text-decoration:underline;text-decoration-color:var(--p700);text-decoration-thickness:2px;text-underline-offset:6px}
.kt-textknopf:hover{background:none;text-decoration-color:transparent}
.kt-textknopf--klein{padding:2px 0;font-size:14px;color:var(--p700);text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
.kt-zurueck{justify-self:start;margin:8px 0 14px}
.kt-nurjs{display:none}
.js .kt-nurjs{display:inline-flex}
.kt-klein{font-size:14px;line-height:1.6;color:var(--leise)}
.kt-klein a{font-weight:600;color:var(--tinte);text-decoration-color:var(--p700);text-decoration-thickness:2px;text-underline-offset:4px}

/* Knopfleiste */
.kt-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:36px;padding-top:28px;border-top:1px solid var(--flaeche)}
.kt-leiste .knopf{min-height:48px;padding:14px 26px;font-size:16px;border-radius:9999px}
.kt-leiste__hinweis{font-size:14px;line-height:1.5;color:var(--leise)}
.kt-weiter{display:none}
.js .kt-weiter{display:inline-flex}
.js .kt-senden{display:none}
.js .kt-karte[data-schritt="4"] .kt-senden{display:inline-flex}
.js .kt-karte[data-schritt="4"] .kt-weiter{display:none}

/* Bestätigung */
.kt-danke{display:grid;gap:22px}
.kt-danke[hidden]{display:none}
.kt-danke__h3{font-size:1.5rem;outline:none}
.kt-absatz{font-size:17px;line-height:1.7}
.kt-danke__grafik{margin:4px 0}
.kt-danke__grafik svg{display:block;width:100%;max-width:520px;height:auto}
.kt-danke__grafik.ruht .ab *{animation-play-state:paused!important}


/* Unter 1000 px reicht der Platz nicht für Blatt und Karte nebeneinander: eine Spalte, das Blatt wird zum Streifen */
@media (max-width:1000px){
  .kt__raster{grid-template-columns:minmax(0,1fr);gap:28px}
  .kt__links{display:contents}
  .kt__kopf{order:1}
  .kt__rechts{order:2}
  .kt__links .kt-tel{order:3;margin-top:4px}
  .kt-blattzone{display:none}
  .js .kt-streifen{display:block;margin:-4px 0 22px;padding:12px 14px;border:1px solid var(--tinte);border-radius:6px;background:#fff}
  .kt-streifen__titel{font-size:13px;line-height:1.4;color:var(--leise)}
  .kt-streifen__text{margin-top:2px;font:600 14.5px/1.45 "Inter",system-ui,sans-serif;color:var(--tinte)}
}
@media (max-width:760px){
  .kt .innen{padding-block:56px 64px}
  .kt-karte{padding:24px 20px 28px;border-radius:20px}
  .kt-h3,.kt-danke__h3{font-size:1.3125rem}
  .kt-wahl--kurz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-kachel{min-height:52px;padding:12px 14px;gap:10px}
  .kt-tag{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-tag__name{grid-column:1 / -1}
  .kt-ue-zeile{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .kt-ue-zeile dd{grid-column:1 / 2}
  .kt-ue-zeile .kt-ue-aktion{grid-row:1;grid-column:2}
  .kt-leiste .knopf{width:100%}
}
@media (prefers-reduced-motion:reduce){.kt-kachel,.kt-marke{transition:none}}
/* kt: Ende Kontakt-Section (CSS) */
/* Hinweis auf den Ratgeber bei Anlass Wechsel (05.11.2026) */
.kt-wechsel{margin-top:12px;font-size:15px;color:var(--text)}
.kt-wechsel[hidden]{display:none}
.kt-wechsel .pfeillink{color:var(--tinte)}
.kt-absatz a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
