/* ==========================================================================
   /kontakt, Version B: Ergänzungen
   --------------------------------------------------------------------------
   Der Formular-Grundaufbau (.kn-form, .kn-field, .kn-label, .kn-select-wrap,
   .kn-aside, .kn-faq) steht unverändert in site.css und bleibt 1:1 aus dem
   Export. Hier kommt nur dazu, was Version B braucht: Fehlermeldung statt
   falscher Erfolgsmeldung, Topic-Chips, Preset-Hinweis, Feldfehler.
   ========================================================================== */

/* ---------- Hinweis, dass der Anlass aus dem Link schon gesetzt ist ------- */

.kn-preset { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0;
  padding: 8px 14px; border-radius: 100px; font-size: 13.5px; color: var(--fg-1);
  background: var(--accent); border: 1px solid var(--border-1); }
.kn-preset svg { flex-shrink: 0; color: var(--primary); }
.kn-preset strong { font-weight: 700; }

.kn-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Versand fehlgeschlagen --------------------------------------- */
/* Bewusst auffällig: vorher meldete die Seite in genau diesem Fall Erfolg
   und verwarf die Anfrage. Hier steht der direkte Weg. */

.kn-error { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
  border-radius: 14px; border: 1px solid hsl(4 74% 80%); background: hsl(4 86% 97%); }
.kn-error-icon { flex: 0 0 auto; color: hsl(4 74% 42%); margin-top: 1px; }
.kn-error strong { display: block; font-size: 15px; font-weight: 700; color: hsl(4 74% 32%); }
.kn-error p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-1); }
.kn-error a { color: hsl(4 74% 38%); font-weight: 700; }

/* ---------- Feldbezogene Fehler ----------------------------------------- */

.kn-feld-fehler { display: block; font-size: 12.5px; font-weight: 600;
  color: hsl(4 74% 40%); }
.kn-field:has(.kn-feld-fehler) input,
.kn-field:has(.kn-feld-fehler) select,
.kn-field:has(.kn-feld-fehler) textarea,
.kn-field:has(.kn-feld-fehler) .ap-knopf { border-color: hsl(4 74% 70%); }
/* Die Einwilligung steht ausserhalb eines .kn-field, ihre Meldung folgt
   direkt danach. Ohne diese Regel war sie das einzige Pflichtfeld ohne
   sichtbare Markierung. */
.kn-consent:has(+ .kn-feld-fehler) { border-color: hsl(4 74% 70%); background: hsl(4 86% 98%); }

/* ---------- Topics als Chips -------------------------------------------- */

.kn-topics { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kn-topics legend { padding: 0; }
.kn-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-topic { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 100px; border: 1px solid var(--border-1); background: var(--paper);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg-1);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.kn-topic:hover { border-color: var(--primary); }
.kn-topic svg { flex-shrink: 0; }
.kn-topic.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Anlass-Auswahl (Combobox statt <select>) --------------------- */
/* 47 Optionen in sechs Gruppen passen in kein natives Dropdown: auf dem
   Desktop eine Rolle ohne Suche, auf dem iPhone ein Rad. Hier ein Knopf,
   dahinter ein Suchfeld und die Liste. Bewusst wenig Oberflaeche: kein
   Rahmen um das Suchfeld, keine Filterleiste, keine Fusszeile, keine Icons.
   Jede Zeile ist gleich hoch, die Zweitzeile wird abgeschnitten.
   Auf 640px wird das Panel ein Vollbild-Sheet (responsive.css).
   Markup und Verhalten: src/legacy/anlass-picker.jsx */

/* Die Sektion muss ueber der naechsten liegen, sonst schneidet die FAQ
   darunter das geoeffnete Panel ab. Ursache ist nicht der z-index im Panel:
   `scroll-reveal.js` setzt auf jeder Sektion `will-change: transform`, also
   hat jede ihren eigenen Stapelkontext, und die spaetere gewinnt. Die Nav
   liegt mit z-index 50 weiterhin darueber. */
.kn-form-section { position: relative; z-index: 3; }

.ap { position: relative; }

.ap-knopf { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--border-1); background: var(--paper); color: var(--fg-1);
  border-radius: 12px; padding: 13px 16px; font-family: var(--font-sans); font-size: 15px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.ap-knopf:hover { border-color: var(--primary); }
.ap-knopf:focus-visible { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px hsl(var(--h-primary)/.12); }
.ap.is-offen .ap-knopf { border-color: var(--primary); box-shadow: 0 0 0 4px hsl(var(--h-primary)/.12); }
.ap-knopf > .lucide { flex: 0 0 auto; color: var(--fg-2); }
.ap-knopf.is-leer .ap-knopf-text { color: var(--fg-3); }

.ap-knopf-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Die Abteilung steht hinter der Bezeichnung, nicht darunter: sonst waechst
   das Feld um eine Zeile und steht neben „Telefon" schief. */
.ap-knopf-sub { color: var(--fg-3); }
.ap-knopf-sub::before { content: " · "; }

.ap-backdrop { display: none; }

/* Das Panel ist breiter als das Feld und waechst nach links: das Feld steht
   in der rechten Spalte des Formulars, zwei Zeilen pro Eintrag brauchen aber
   mehr als eine halbe Spalte. */
.ap-panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: auto; right: 0;
  width: max(100%, min(480px, calc(100vw - 40px)));
  display: flex; flex-direction: column; max-height: min(66vh, 540px);
  background: var(--paper); border: 1px solid var(--border-1); border-radius: 14px;
  box-shadow: 0 20px 44px -14px hsl(240 10% 10% / .2); overflow: hidden; }

/* Steht das Feld weit unten, klappt das Panel nach oben auf, statt unter den
   Rand des Fensters zu laufen (auswahl.jsx misst den Platz beim Oeffnen). */
.ap-panel.is-oben { top: auto; bottom: calc(100% + 6px); }

/* Ohne Suchfeld ist die Liste kurz und bleibt so breit wie das Feld. Die
   Extrabreite braucht nur der Anlass mit seinen zwei Zeilen je Eintrag. */
.ap-panel.is-schmal { width: 100%; }

/* Das Suchfeld ist der Kopf des Panels, kein eigener Kasten darin. */
.ap-suche { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 16px; border-bottom: 1px solid var(--border-1); }
.ap-suche > .lucide { flex: 0 0 auto; color: var(--fg-3); }
.ap-titel { flex: 1 1 auto; padding: 15px 0; font-size: 15px; font-weight: 700; color: var(--fg-1); }
/* `input.ap-suche-feld` statt `.ap-suche-feld`, sonst gewinnt die
   Export-Regel `.kn-form input[type="text"]` und das Suchfeld traegt einen
   zweiten Rahmen im schon gerahmten Panel. Gleiche Spezifitaet reicht, weil
   kontakt-neu.css nach site.css geladen wird. */
.ap-suche input.ap-suche-feld { flex: 1 1 auto; width: auto; min-width: 0; border: 0;
  border-radius: 0; background: transparent; outline: none; box-shadow: none;
  padding: 15px 0; font-family: var(--font-sans); font-size: 15px; color: var(--fg-1); }
.ap-suche input.ap-suche-feld:focus { border: 0; box-shadow: none; }
.ap-suche-feld::placeholder { color: var(--fg-3); }
.ap-schliessen { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--fg-3); cursor: pointer; }
.ap-schliessen:hover { background: var(--page-bg-surface); color: var(--fg-1); }

.ap-liste { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }

/* Die Abteilung ist die einzige Gliederungsebene und traegt ihren Ton aus
   dept-tones.css. Die Gruppen ohne Abteilung (Gespraech, Bausteine,
   Kommerzielles, Sicherheit) bleiben grau. */
.ap-gruppe { position: sticky; top: 0; z-index: 1; padding: 16px 8px 8px; background: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3); }
.ap-gruppe.dept-collab { color: var(--dept-collab-ink); }
.ap-gruppe.dept-intel { color: var(--dept-intel-ink); }
.ap-gruppe.dept-automate { color: var(--dept-automate-ink); }
.ap-gruppe.dept-flow { color: var(--dept-flow-ink); }
.ap-gruppe.dept-people { color: var(--dept-people-ink); }
.ap-gruppe.dept-care { color: var(--dept-care-ink); }

/* Lösung oder KI-Mitarbeiter: ein Icon, keine zweite Ueberschrift. */
.ap-art { flex: 0 0 auto; display: inline-flex; color: var(--fg-3); }
.ap-opt.is-gewaehlt .ap-art, .ap-opt.is-aktiv .ap-art { color: var(--fg-2); }

/* Gleiche Hoehe fuer jede Zeile: der Ergebnis-Satz wird abgeschnitten, statt
   die Liste unruhig zu machen. */
.ap-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; scroll-margin: 44px; }
.ap-opt.is-aktiv { background: var(--page-bg-surface); }
.ap-opt.is-gewaehlt { background: var(--accent); }
.ap-opt > .lucide { flex: 0 0 auto; color: var(--primary); }
.ap-opt-text { flex: 1 1 auto; min-width: 0; }
.ap-opt-label { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  color: var(--fg-1); }
.ap-opt-hint { display: block; font-size: 12.5px; line-height: 1.4; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ap-leer { padding: 32px 18px; text-align: center; }
.ap-leer p { margin: 0 0 14px; font-size: 14px; color: var(--fg-2); }
.ap-leer-btn { padding: 9px 16px; border-radius: 100px; border: 1px solid var(--primary);
  background: var(--paper); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--primary); cursor: pointer; }
.ap-leer-btn:hover { background: var(--accent); }

/* ---------- Kleinigkeiten ----------------------------------------------- */

.kn-submit[disabled] { opacity: .7; cursor: progress; }
.kn-direct-plain li span { font-size: 14px; line-height: 1.5; color: var(--fg-1); }
.kn-direct-plain li svg { color: var(--primary); }