/* ==========================================================================
   Am Puls — Einwilligungsverwaltung, Gestaltung
   --------------------------------------------------------------------------
   Kein eigenes Design: jede Farbe, jeder Radius, jeder Abstand und jede
   Schrift kommt aus tokens.css. Knöpfe benutzen die vorhandene Klasse .btn,
   damit sie sich nicht von den Knöpfen der Seite unterscheiden.
   Geändert wird hier nichts an bestehenden Klassen — die Datei fügt nur
   eigene hinzu (Präfix cc-).
   ========================================================================== */

/* --- Hinweisleiste ------------------------------------------------------
   Liegt über der Seite, verdeckt sie aber nicht: die Seite bleibt lesbar,
   scrollbar und bedienbar. z-index 90 ist bewusst gewählt: über der
   Kopfzeile (30), aber unter der Sprungmarke (100) — sonst wäre der
   Sprunglink für Tastaturbedienung nicht mehr erreichbar. */
.cc-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: linear-gradient(180deg, var(--surface-card-2), var(--surface-card));
  border-top: 1px solid var(--border-hi);
  box-shadow: var(--shadow-postit);
  padding: var(--sp-5) var(--page-pad);
  color: var(--text-body);
}
.cc-leiste[hidden] { display: none; }

.cc-leiste__innen {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.cc-leiste__text { flex: 1 1 380px; min-width: 0; }

/* Entspricht .kicker, nur eine Spur kleiner — die Leiste ist kein Abschnitt. */
.cc-leiste__kicker {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
}

.cc-leiste__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 68ch;
}

.cc-leiste__links {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.cc-verweis { color: var(--accent); text-decoration: underline; }
.cc-verweis:hover { color: var(--accent-hover); }

/* Annehmen und Ablehnen liegen nebeneinander und sehen gleich aus. */
.cc-leiste__aktionen {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.cc-knopf { min-width: 168px; }

/* Dritter Weg: mehr Auswahl, kein Gegenstück zu den beiden oberen — deshalb
   als Textknopf. Trotzdem mit ausreichend großer Klickfläche. */
.cc-textknopf {
  appearance: none;
  background: none;
  border: 0;
  padding: 10px 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.cc-textknopf:hover { color: var(--text-body); }


/* --- Einstellungen ------------------------------------------------------ */

.cc-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  max-width: min(680px, calc(100vw - 2 * var(--page-pad)));
  width: 100%;
  max-height: min(86vh, 900px);
  overflow: visible;
}
.cc-dialog::backdrop { background: rgba(10, 10, 10, 0.76); }

/* Ohne <dialog>-Unterstützung: als feste Fläche in der Mitte zeigen. */
.cc-dialog:not([open]) { display: none; }

.cc-dialog__innen {
  background: linear-gradient(180deg, var(--surface-card-2), var(--surface-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-postit);
  padding: var(--sp-7);
  max-height: min(86vh, 900px);
  overflow-y: auto;
}

.cc-dialog__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.cc-dialog__titel {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

/* Mindestens 24 × 24 px Zielfläche, damit der Knopf auch mit dem Finger
   sicher zu treffen ist. */
/* Die Überschrift bekommt beim Öffnen den Fokus, damit Vorlesesoftware sie
   zuerst liest. Sie ist aber kein Bedienelement — deshalb ohne Fokusrahmen. */
.cc-dialog__titel:focus { outline: none; box-shadow: none; }

.cc-dialog__zu {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  color: var(--text-muted);
  width: 36px; height: 36px;
  flex: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cc-dialog__zu:hover { color: var(--text-body); border-color: var(--border-hi); }

.cc-dialog__lead {
  margin: var(--sp-4) 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

.cc-liste { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

.cc-kat {
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.02);
}

.cc-kat__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Wie .checkbox auf der Kontaktseite, nur etwas größer gesetzt. */
.cc-schalter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  color: var(--text-body);
  cursor: pointer;
}
.cc-schalter input {
  accent-color: var(--accent);
  width: 18px; height: 18px;
  margin: 0;
  flex: none;
  cursor: pointer;
}
.cc-schalter input:disabled { cursor: default; opacity: 0.65; }
.cc-schalter__name { font-weight: var(--fw-semibold); font-size: 16px; }

.cc-kat__marke {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 3px 8px;
}

.cc-kat__text {
  margin: var(--sp-3) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.cc-kat__text--klein { font-size: 13px; }

.cc-dienste { margin: var(--sp-4) 0 0; }
.cc-dienst__name {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--sp-4);
}
.cc-dienst__daten { margin: var(--sp-2) 0 0; }
.cc-dienst__zeile {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cc-dienst__schluessel { color: var(--text-body); }

.cc-leer {
  margin: 0;
  padding: var(--sp-5);
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.cc-dialog__stand {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.cc-dialog__fuss[hidden] { display: none; }
.cc-dialog__fuss {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.cc-dialog__recht {
  margin: var(--sp-5) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}


/* --- Platzhalter für gesperrte Einbettungen ----------------------------- */
/* Gestrichelter Rahmen wie .card--open: das Feld ist sichtbar leer und
   wartet auf eine Entscheidung. */
.cc-sperre {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-3);
  background: var(--surface);
  padding: var(--sp-6);
  min-height: 220px;
}
.cc-sperre__inhalt { max-width: 46ch; text-align: center; }
.cc-sperre__titel {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
}
.cc-sperre__text {
  margin: var(--sp-3) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.cc-sperre__aktionen {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


/* --- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 760px) {
  .cc-leiste { padding: var(--sp-4) var(--page-pad); }
  .cc-leiste__innen { gap: var(--sp-4); }
  .cc-leiste__aktionen { width: 100%; }
  /* Die beiden gleichrangigen Knöpfe teilen sich die Zeile und bleiben
     damit auch am Telefon gleich groß. */
  .cc-leiste__aktionen .cc-knopf { flex: 1 1 140px; min-width: 0; }
  .cc-leiste__aktionen .cc-textknopf { flex: 1 0 100%; text-align: center; }
  .cc-dialog__innen { padding: var(--sp-5); }
  .cc-dialog__fuss .cc-knopf { flex: 1 1 100%; }
}

/* Sehr kleine Geräte: die Leiste darf nie mehr als die halbe Höhe einnehmen. */
@media (max-height: 520px) {
  .cc-leiste { max-height: 62vh; overflow-y: auto; }
}


/* --- Bewegung ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cc-leiste { animation: cc-herein var(--dur-3) var(--ease) both; }
  @keyframes cc-herein {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
}