/* NF-R105 - Kontaktwahl ueber den Anfrageformularen (Logik: js/kontaktwahl.js).
   Eine Darstellung fuer alle Seiten; die Seiten setzen nur die Variablen (Akzent, Flaeche, Schrift).
   Vorgaben: NorthFrame dunkel mit Gold.
   Gestaltung: Segmentleiste wie eine ruhige Auswahl (Referenz Fiasco: Direktkontakt sichtbar getrennt
   vom Formular), Text plus dezentes Icon, ein klarer aktiver Zustand, nichts blinkt. Auf schmalen
   Breiten (Container unter 340 px) steht das Formular in der ersten Zeile, WhatsApp und E-Mail
   teilen sich die zweite - so bleibt jede Beschriftung ganz lesbar, auch bei 320 px. */
.kw{--kw-akz:#c49a56;--kw-akz-text:#1a1307;--kw-flaeche:rgba(255,255,255,.035);--kw-rand:rgba(255,255,255,.12);
  --kw-text:#eef0f4;--kw-leise:#8a95a8;--kw-radius:14px;--kw-schrift:inherit;--kw-schrift-titel:inherit;
  --kw-dlg-grund:#0f141e;--kw-dlg-text:#eef0f4;--kw-dlg-leise:#9aa4b6;--kw-dlg-rand:rgba(255,255,255,.12);
  container-type:inline-size;margin:0 0 18px;font-family:var(--kw-schrift)}
.kw-frage{margin:0 0 10px;font-size:13px;line-height:1.4;letter-spacing:.01em;color:var(--kw-leise)}
.kw-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--kw-rand);
  border-radius:var(--kw-radius);background:var(--kw-flaeche)}
.kw-opt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 10px;border-radius:calc(var(--kw-radius) - 4px);
  color:var(--kw-text);font-size:14px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;
  border:1px solid transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}
.kw-opt svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.kw-opt:hover{background:rgba(255,255,255,.05);border-color:var(--kw-rand)}
.kw-opt.ist-aktiv,.kw-opt[aria-current="true"]{background:color-mix(in srgb,var(--kw-akz) 16%,transparent);border-color:color-mix(in srgb,var(--kw-akz) 55%,transparent);color:var(--kw-text)}
.kw-opt.ist-aktiv svg,.kw-opt[aria-current="true"] svg{color:var(--kw-akz);opacity:1}
.kw-opt:focus-visible{outline:2px solid var(--kw-akz);outline-offset:2px}
/* Mittlere Breite (340 bis 459 px, z. B. Formularkarten am Schreibtisch): eine Zeile, das Formular etwas breiter */
@container (min-width:340px) and (max-width:459px){
  .kw-wahl{grid-template-columns:1.42fr 1fr 1fr}
  .kw-opt{gap:6px;padding:8px 6px;font-size:13.5px}
  .kw-opt svg{width:16px;height:16px}
}
/* Schmal (unter 340 px, Telefone): Formular in der ersten Zeile, WhatsApp und E-Mail darunter */
@container (max-width:339px){
  .kw-wahl{grid-template-columns:1fr 1fr}
  .kw-opt[data-kw="formular"]{grid-column:1 / -1}
  .kw-opt{font-size:13.5px;padding:8px}
}
/* NF-R106: sehr schmal (unter 230 px - Seitenzoom 150 % auf einem 320-px-Telefon): alle drei untereinander, keine
   Beschriftung wird abgeschnitten oder ragt aus der Leiste. */
@container (max-width:229px){
  .kw-wahl{grid-template-columns:minmax(0,1fr)}
  .kw-opt{justify-content:flex-start;min-width:0;overflow-wrap:anywhere}
}
/* Ohne Skript: die echten Kontaktlinks als ruhige Zeile. Mit Skript uebernimmt der Dialog. */
.kw-direkt{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--kw-leise)}
.kw-direkt a{color:var(--kw-text);text-underline-offset:3px}
.kw-js .kw-direkt{display:none}

/* ── Dialog: auf dem Schreibtisch eine kleine Karte, auf dem Telefon ein Blatt von unten ─────── */
.kw-dialog{--kw-akz:#c49a56;--kw-akz-text:#1a1307;--kw-dlg-grund:#0f141e;--kw-dlg-text:#eef0f4;--kw-dlg-leise:#9aa4b6;--kw-dlg-rand:rgba(255,255,255,.12);--kw-radius:14px;
  /* margin:auto ausdruecklich: die Seiten setzen *{margin:0} und nahmen dem Dialog damit die Mitte. */
  width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;margin:auto;padding:0;border:1px solid var(--kw-dlg-rand);border-radius:calc(var(--kw-radius) + 4px);
  background:var(--kw-dlg-grund);color:var(--kw-dlg-text);font-family:var(--kw-schrift,'Inter',system-ui,sans-serif);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.kw-dialog::backdrop{background:rgba(4,6,10,.55)}
.kw-dialog[open]{animation:kwRein .26s cubic-bezier(.2,.8,.2,1)}
.kw-dlg-innen{padding:22px 22px 20px}
.kw-dlg-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.kw-dlg-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:color-mix(in srgb,var(--kw-akz) 16%,transparent);color:var(--kw-akz)}
.kw-dlg-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kw-dlg-titel{flex:1;margin:0;font-family:var(--kw-schrift-titel,inherit);font-size:19px;font-weight:600;line-height:1.25;color:var(--kw-dlg-text)}
.kw-dlg-zu{display:grid;place-items:center;width:40px;height:40px;margin:-6px -8px 0 0;border:0;border-radius:50%;background:transparent;color:var(--kw-dlg-leise);cursor:pointer}
.kw-dlg-zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.kw-dlg-zu:hover{background:rgba(127,127,127,.14);color:var(--kw-dlg-text)}
.kw-dlg-text{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--kw-dlg-leise)}
.kw-dlg-wert{display:flex;flex-direction:column;gap:2px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--kw-dlg-rand);border-radius:var(--kw-radius)}
.kw-dlg-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--kw-dlg-leise)}
.kw-dlg-zahl{font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--kw-dlg-text);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.kw-dlg-aktionen{display:grid;gap:10px}
.kw-dlg-primaer,.kw-dlg-sekundaer{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 18px;border-radius:var(--kw-radius);
  font:inherit;font-size:15.5px;font-weight:600;text-decoration:none;cursor:pointer;transition:filter .2s ease,background-color .2s ease}
.kw-dlg-primaer{background:var(--kw-akz);color:var(--kw-akz-text);border:1px solid var(--kw-akz)}
.kw-dlg-primaer svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kw-dlg-primaer:hover{filter:brightness(1.07)}
.kw-dlg-sekundaer{background:transparent;color:var(--kw-dlg-text);border:1px solid var(--kw-dlg-rand)}
.kw-dlg-sekundaer:hover{background:rgba(127,127,127,.1)}
.kw-dlg-primaer:focus-visible,.kw-dlg-sekundaer:focus-visible,.kw-dlg-zu:focus-visible{outline:2px solid var(--kw-akz);outline-offset:2px}
.kw-dlg-status{min-height:1.5em;margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--kw-dlg-text)}
.kw-dlg-status:empty{min-height:0;margin:0}
.kw-dlg-status--fehler{color:#f2a08f}
.kw-dlg-hinweis{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--kw-dlg-leise)}
@keyframes kwRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .kw-dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:calc(var(--kw-radius) + 6px) calc(var(--kw-radius) + 6px) 0 0;border-bottom:0}
  .kw-dlg-innen{padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
  .kw-dialog[open]{animation:kwHoch .3s cubic-bezier(.2,.8,.2,1)}
  .kw-dlg-innen::before{content:'';display:block;width:40px;height:4px;margin:-6px auto 14px;border-radius:2px;background:var(--kw-dlg-rand)}
}
@keyframes kwHoch{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.kw-dialog.kw-dlg-ruhig[open]{animation:none}
@media (prefers-reduced-motion:reduce){.kw-dialog[open]{animation:none}.kw-opt{transition:none}}
/* Einstieg des ausfuehrlichen Projektformulars (anfrage/): unter dem Einleitungstext, nicht volle Breite. */
.kw--einstieg{max-width:560px;margin:28px auto 0}