/* Phase 400 · Anruf-Klicksystem (Fenster "Wie ist der Anruf gelaufen?" und Stand-Marken).
   Ecken nach dna.css: Fenster 12, Wahlknöpfe 10, Knöpfe 8, Marken 6. */

.anruf-stand { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-sm, 3px); background: #f1f0ec; color: var(--ink-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.anruf-stand[data-stand="ok"] { background: var(--ok-bg); color: var(--ok); }
.anruf-stand[data-stand="warm"] { background: rgba(200,170,34,.16); color: #786614; }
.anruf-stand[data-stand="faellig"] { background: rgba(200,41,15,.12); color: #a3240d; }
.anruf-stand[data-stand="nicht"] { background: #ececec; color: #5a5a5a; }
.anruf-stand[data-stand="aus"] { background: var(--err-bg); color: var(--err); }

.anruf-fenster { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius-card, 6px); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.anruf-fenster::backdrop { background: rgba(10,10,10,.45); }
/* Das Portal setzt bei Fenstern den Rand auf null, dann klebt es oben links. Hier mittig. */
.anruf-fenster[open] { position: fixed; inset: 0; margin: auto; height: fit-content; }
/* Eigene display-Regeln dürfen das Ausblenden nicht aushebeln. */
.anruf-fenster [hidden] { display: none !important; }
.anruf-form { display: grid; gap: 14px; padding: 20px; }
.anruf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.anruf-label { display: block; color: var(--ink-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.anruf-name { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; }
.anruf-zu { width: 36px; height: 36px; border: 0; border-radius: var(--radius-button, 4px); background: #f1f0ec; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.anruf-tel { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-button, 4px); background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.anruf-frage { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.anruf-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.anruf-wahl { position: relative; }
.anruf-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.anruf-wahl span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md, 5px); background: var(--surface); font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; }
.anruf-wahl:last-child { grid-column: 1 / -1; }
.anruf-wahl input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.anruf-wahl input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.anruf-zeit { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.anruf-zeit label, .anruf-notiz-label { display: grid; gap: 5px; color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.anruf-zeit input, .anruf-notiz-label textarea { padding: 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-button, 4px); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; }
.anruf-notiz-label textarea { resize: vertical; }
.anruf-sperre { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.anruf-fehler { margin: 0; padding: 10px 12px; border-radius: var(--radius-button, 4px); background: var(--err-bg); color: var(--err); font-size: 13px; }
.anruf-fuss { display: flex; justify-content: flex-end; gap: 8px; }
.anruf-fuss button { min-height: 44px; padding: 0 18px; border-radius: var(--radius-button, 4px); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.anruf-abbrechen { border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); }
.anruf-speichern { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.anruf-speichern:disabled { opacity: .4; cursor: not-allowed; }

/* Aufklappbarer Anruf-Verlauf in Listen */
.anruf-verlauf { padding: 0 18px 10px; font-size: 12px; }
.anruf-verlauf summary { width: max-content; padding: 4px 0; color: var(--ink-muted); font-weight: 700; cursor: pointer; }
.anruf-verlauf ol { margin: 4px 0 0; padding: 0; list-style: none; border-left: 2px solid var(--hairline); }
.anruf-verlauf li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0 4px 12px; }
.anruf-verlauf time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.anruf-verlauf strong { font-weight: 700; }
.anruf-verlauf span { color: var(--ink-muted); }

/* Phase 371 · Adresse beim Termin (Kai 22.09.2026) */
.anruf-adresse { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.anruf-adresse input { padding: 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-button); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; }
.anruf-ort { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; }
.anruf-adresse small { color: var(--ink-muted); font-size: 11.5px; }

/* Phase 406 · Dasselbe Knopfbild wie in VP Digital */
.anruf-tel { background: var(--dna-klick); color: #fff; font-weight: 400; }
.anruf-wahl input:checked + span { border-color: var(--dna-klick); background: var(--dna-klick); color: #fff; }
.anruf-speichern { border-color: var(--dna-klick); background: var(--dna-klick); font-weight: 400; }
.anruf-speichern:hover { background: var(--dna-klick-hover); border-color: var(--dna-klick-hover); }
.anruf-abbrechen { border-color: var(--dna-klick); color: var(--dna-klick); font-weight: 400; }
.anruf-zu { border-radius: var(--radius-button); }

/* Phase 423: Austragen ist eine eigene Entscheidung. Der Knopf sieht bewusst
   nicht nach Hauptweg aus, und der zweite Schritt trägt einen roten Rand:
   Wer hier landet, soll merken, dass er gerade etwas Endgültiges tut. */
.anruf-austragen[hidden] { display: none !important; }
.anruf-austragen-knopf {
  margin-top: 4px; padding: 6px 12px;
  border: 1px solid var(--hairline-strong, #c9ccd0); border-radius: var(--radius-button, 8px);
  background: transparent; color: var(--ink-muted, #5a6672);
  font: 400 13px/18px var(--font-sans, Inter), sans-serif; cursor: pointer;
}
.anruf-austragen-knopf:hover { border-color: #b4542f; color: #b4542f; }
.anruf-austragen-schritt {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid #e3b4a5; border-left: 3px solid #b4542f;
  border-radius: var(--radius-md, 10px); background: #fdf6f4;
}
.anruf-austragen-schritt[hidden] { display: none !important; }
.anruf-austragen-schritt strong { display: block; color: #8a3a1d; font-size: 14px; }
.anruf-austragen-schritt p { margin: 4px 0 10px; color: var(--ink-muted, #5a6672); font-size: 12.5px; line-height: 1.45; }
.anruf-austragen-schritt label { display: block; color: var(--ink-muted, #5a6672); font-size: 12.5px; }
.anruf-austragen-schritt input[type="text"] {
  width: 100%; min-height: 38px; margin-top: 4px; padding: 0 10px;
  border: 1px solid var(--field, #c9ccd0); border-radius: var(--radius-button, 8px);
  font: inherit; font-size: 14px;
}
.anruf-austragen-schritt .anruf-sperre { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; color: #8a3a1d; }

/* Phase 424: Der Hinweis, dass Termin oder Rückruf im Kalender landen. */
.anruf-kalender-hinweis {
  margin: 8px 0 0; padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(12, 108, 63, .06); color: #0c6c3f;
  font-size: 12.5px; line-height: 17px; font-weight: 700;
}
.anruf-kalender-hinweis[hidden] { display: none !important; }

/* Phase 429: Woher der Kontakt kommt, direkt unter seinem Namen im Anruffenster.
   Eine Empfehlung bekommt den Goldton: sie verdient den anderen Einstieg als
   jemand, der bei einem Gewinnspiel mitgemacht hat. */
.anruf-herkunft { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 12px; font-weight: 400; }
.anruf-herkunft.ist-empfehlung { color: var(--dna-gold-dark, #786614); font-weight: 700; }