/* Kontaktformular auf www.heitfeldplus.de/kontakt/ (Dienst „Mein“, 07.11.2026).
   Liegt NACH site.css der Website und gilt nur innerhalb von <main class="mk"> – Kopf und Fuß gestaltet site.css.
   Farben und Schriften wie die Website (Manrope, Instrument Serif, Gold #B09B6A, auf Weiß #7A6838). Schriften lädt
   site.css von /assets/fonts/. Bei Änderungen die Versionsangabe in Pages/Shared/_Layout.cshtml und
   wwwroot/fehler/zuviele.html hochzählen. */

/* ---------- Grundlagen innerhalb des Formularbereichs */
.mk {
  --ink: #1E2329;
  --text-2: #3A3F47;
  --muted: #5A5F68;
  --gold: #B09B6A;
  --gold-text: #7A6838;
  --gold-hover: #4F4322;
  --paper: #FFFFFF;
  --sand: #F6F4EF;
  --sand-2: #FCFBF8;
  --line: #ECE9E2;
  --line-2: #E4E1D8;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mk { background: #fff; font-family: var(--sans); color: var(--ink); font-size: 17px; line-height: 1.7; }
.mk a { color: var(--gold-text); }
.mk a:hover { color: var(--gold-hover); }
.mk :focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 4px; }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk h1, .mk h2, .mk h3, .mk p { margin: 0; }
.mk .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 18px; }
.mk h1 { font-family: var(--serif); font-weight: 400; color: var(--gold-text); font-size: clamp(40px, 5vw, 68px); line-height: 1.08; }
.mk .lead { margin-top: 24px; max-width: 520px; font-size: 19px; line-height: 1.65; color: var(--text-2); }
.mk .aktionen { display: flex; flex-wrap: wrap; gap: 14px; }
.mk .klein { font-size: 14px; line-height: 1.55; color: var(--muted); }
.mk .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: 0; }
.mk .knopf-dunkel { background: var(--ink); color: #fff; }
.mk .knopf-dunkel:hover { background: #000; color: #fff; }
.mk .knopf-rand { border: 1px solid #D8D4C8; background: #fff; color: var(--ink); }
.mk .knopf-rand:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Seite: Einleitung links, Formular rechts */
.mk .seite { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; padding-top: 72px; padding-bottom: 96px; }
.mk .einleitung { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }
.mk .formularbereich { flex: 1.25 1 420px; min-width: 0; }
.mk .infokasten { margin-top: 40px; max-width: 460px; background: var(--sand); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mk .infokasten-titel { font-weight: 600; }

/* ---------- Formular */
.mk .formular { display: flex; flex-direction: column; gap: 26px; }
.mk fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mk .frage { font-size: 15px; font-weight: 600; margin: 0 0 10px; padding: 0; }
.mk .chips { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk .chip-wahl { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mk .chip { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 8px 12px;
  border: 1px solid #D8D4C8; border-radius: 10px; background: #fff; color: var(--ink);
  font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; }
.mk .chip:hover { border-color: var(--ink); }
.mk .chip-wahl:checked + .chip { border: 1.5px solid var(--ink); background: var(--sand-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.mk .chip-wahl:focus-visible + .chip { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.mk .feldgruppe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk .feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 15px; font-weight: 600; }
.mk .feld small { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.mk .feld .zusatz { font-weight: 400; color: var(--muted); }
.mk .feld input, .mk .feld textarea, .mk .feld select { width: 100%; min-width: 0; height: 54px; padding: 0 14px;
  border: 1px solid #D8D4C8; border-radius: 10px; background: #fff; color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 400; }
.mk .feld textarea { height: 170px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.mk .feld input:focus, .mk .feld textarea:focus, .mk .feld select:focus { outline: 2px solid var(--gold-text); outline-offset: 1px; }
.mk .feld input::placeholder, .mk .feld textarea::placeholder { color: #8A8E95; }
.mk .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mk .feld [aria-invalid="true"] { border-color: #b23b33; background: #fdf3f2; }
.mk .fehlertext { margin: 0; color: #8e2b24; font-size: 14px; font-weight: 600; line-height: 1.45; }
.mk .hinweiskasten { border: 1.5px solid #b23b33; border-radius: 14px; background: #fdf3f2; color: #5c1c17;
  padding: 14px 18px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.mk .eil { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px;
  border: 1.5px solid #c08a1e; border-radius: 14px; background: #fbf1dc; color: #3d2a05; }
.mk .eil b { color: #7a4f06; }
.mk .eil .knopf { align-self: stretch; }
.mk .nur-kuendigung { display: flex; flex-direction: column; gap: 14px; }
/* Nur bei „Kündigung erhalten“ – ohne JavaScript über :has(); ohne :has() bleibt der Teil sichtbar */
@supports selector(:has(*)) {
  .mk .nur-kuendigung { display: none; }
  .mk .formular:has(#anliegen-kuendigung:checked) .nur-kuendigung { display: flex; }
}
/* Honigtopf: aus dem Bild geschoben, nicht display:none */
.mk .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mk .absenden { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ---------- Nach dem Absenden */
.mk .gesendet { display: flex; flex-direction: column; gap: 28px; }
.mk .gesendet .frage { margin-bottom: 16px; }
.mk .schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mk .schritte li { display: flex; align-items: flex-start; gap: 14px; color: var(--text-2); }
.mk .num { flex: 0 0 auto; width: 28px; height: 28px; margin-top: 1px; border: 1px solid var(--gold); border-radius: 50%;
  background: #fff; color: var(--gold-text); display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; }

@media (max-width: 820px) {
  .mk .seite { gap: 32px; padding-top: 36px; padding-bottom: 64px; }
  .mk .infokasten { display: none; }
  .mk .aktionen .knopf, .mk .absenden .knopf { width: 100%; }
  .mk .absenden { align-items: stretch; }
}