/* =============================================================================
   CheckPoint Ehrenamt · components.css
   Komponenten- und Grund-CSS. Baut ausschließlich auf den Tokens aus tokens.css
   auf – nirgends feste Weiß-/Schwarzwerte, damit der Dunkelmodus greift.

   Session 1: nur Reset + Grundtypografie. Topbar, Bottom-Nav, Karten und der
   .cp-page-Verlauf folgen in Session 4 (dort konsequent auf Tokens umgestellt).
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cp-user-bg);
  color: var(--cp-user-text);
  font-family: var(--cp-user-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Sichtbarer Fokus ist Pflicht (Barrierearmut, siehe CLAUDE.md). */
:focus-visible {
  outline: 2px solid var(--cp-user-teal-dark);
  outline-offset: 2px;
}

/* Mobile-first Seitencontainer (App-Breite 360–460px, viel Weißraum). */
.cp-page {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--cp-user-space-4);
}

/* Wenn Topbar + Bottom-Nav da sind: Inhalt darunter/darüber freihalten. */
.cp-has-nav .cp-page {
  padding-top: calc(56px + var(--cp-user-space-4));
  padding-bottom: calc(64px + var(--cp-user-space-5));
}

/* Mobile-first bleibt der Standard; auf Tablet/Desktop wächst die zentrierte
   Spalte (inkl. der fixierten Topbar/Bottom-Nav) auf eine angenehme Breite. */
@media (min-width: 768px) {
  .cp-page,
  .cp-topbar,
  .cp-bottomnav {
    max-width: 720px;
  }
}

/* =============================================================================
   Topbar (fix oben) – nutzt Tokens, kein festes Weiß (Dunkelmodus greift).
   ============================================================================= */
.cp-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  height: 56px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--cp-user-space-4);
  background: var(--cp-user-surface);
  border-bottom: 1px solid var(--cp-user-line);
}

.cp-topbar__logo {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--cp-user-text);
  text-decoration: none;
}

.cp-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--cp-user-space-2);
}

.cp-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cp-user-radius-pill);
  color: var(--cp-user-text);
  text-decoration: none;
  /* Auch als <button> nutzbar (Theme-Umschalter): Default-Chrome entfernen. */
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* Zähler-Badge auf der Glocke (ungelesene Benachrichtigungen). */
.cp-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--cp-user-radius-pill);
  background: var(--cp-user-red);
  color: var(--cp-user-on-brand);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* Ungelesene Benachrichtigung: Akzentstreifen (zusätzlich zum „Neu"-Tag). */
.cp-card--ungelesen { border-left: 3px solid var(--cp-user-teal); }

/* Theme-Umschalter ist ein Formular in der Topbar – kein Eigenabstand. */
.cp-topbar__theme {
  margin: 0;
  display: inline-flex;
}

.cp-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cp-user-radius-pill);
  background: var(--cp-user-teal-soft);
  color: var(--cp-user-teal-dark);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  overflow: hidden;
}

.cp-avatar__img { width: 100%; height: 100%; object-fit: cover; }

/* Profilbild auf der Profilseite. */
.cp-profilbild {
  width: 96px;
  height: 96px;
  border-radius: var(--cp-user-radius-pill);
  object-fit: cover;
}
.cp-profilbild--leer {
  display: grid;
  place-items: center;
  background: var(--cp-user-teal-soft);
  color: var(--cp-user-teal-dark);
  font-weight: 700;
  font-size: 1.6rem;
}

/* =============================================================================
   Bottom-Navigation (fix unten) – 4 Punkte, Tokens statt festem Weiß.
   ============================================================================= */
.cp-bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  z-index: 10;
  display: flex;
  background: var(--cp-user-surface);
  border-top: 1px solid var(--cp-user-line);
  padding-bottom: env(safe-area-inset-bottom);
}

.cp-navitem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--cp-user-space-2) 0;
  color: var(--cp-user-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

/* Aktiver Punkt: nicht nur über Farbe – auch fett + Markenton. */
.cp-navitem[aria-current="page"] {
  color: var(--cp-user-teal-dark);
  font-weight: 700;
}

h1 {
  margin: 0 0 var(--cp-user-space-3);
  font-size: 1.5rem;
  font-weight: 700;
}

.cp-muted {
  color: var(--cp-user-muted);
}

/* --- Formulare (Labels immer sichtbar, Felder >= 44px) -------------------- */
.cp-form {
  display: flex;
  flex-direction: column;
  gap: var(--cp-user-space-4);
  margin-block: var(--cp-user-space-5);
}

.cp-field {
  display: flex;
  flex-direction: column;
  gap: var(--cp-user-space-2);
}

.cp-field label {
  font-weight: 600;
}

.cp-field input,
.cp-field select,
.cp-field textarea {
  min-height: 44px;
  padding: 0 var(--cp-user-space-3);
  border: 1px solid var(--cp-user-line);
  border-radius: var(--cp-user-radius-md);
  background: var(--cp-user-surface);
  color: var(--cp-user-text);
  font: inherit;
}

.cp-field textarea {
  padding: var(--cp-user-space-3);
  min-height: 88px;
  resize: vertical;
}

/* --- Buttons (Primär = Türkis/weiß · Ghost = Fläche mit feinem Rahmen) ---- */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--cp-user-space-5);
  border: 1px solid transparent;
  border-radius: var(--cp-user-radius-md);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.cp-btn--primary {
  background: var(--cp-user-teal);
  color: var(--cp-user-on-brand);
}

.cp-btn--urgent {
  background: var(--cp-user-red);
  color: var(--cp-user-on-brand);
}

.cp-btn--ghost {
  background: var(--cp-user-surface);
  color: var(--cp-user-text);
  border-color: var(--cp-user-line);
}

/* --- Flash-Hinweise ------------------------------------------------------ */
.cp-flash {
  list-style: none;
  margin: 0 0 var(--cp-user-space-4);
  padding: var(--cp-user-space-3) var(--cp-user-space-4);
  border-radius: var(--cp-user-radius-md);
  background: var(--cp-user-surface-alt);
  color: var(--cp-user-text);
}

/* --- Liste & Tag --------------------------------------------------------- */
.cp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cp-user-space-2);
}

.cp-tag {
  display: inline-block;
  margin-left: var(--cp-user-space-2);
  padding: 0 var(--cp-user-space-2);
  border-radius: var(--cp-user-radius-pill);
  background: var(--cp-user-status-neutral-bg);
  color: var(--cp-user-status-neutral-text);
  font-size: 0.85rem;
}

/* --- Karte (Radius 12px, Innenabstand 16px, keine Verschachtelung) ------- */
.cp-card {
  display: flex;
  flex-direction: column;
  gap: var(--cp-user-space-1);
  padding: var(--cp-user-space-4);
  border: 1px solid var(--cp-user-line);
  border-radius: var(--cp-user-radius-lg);
  background: var(--cp-user-surface);
}

/* Leerer Platz (noch nicht besetzt): gestrichelt, abgesetzt. */
.cp-card--leer {
  border-style: dashed;
  background: var(--cp-user-surface-alt);
}

/* Dringender Status (Vertretung/unterbesetzt) – Rot statt Neutral. */
.cp-tag--urgent {
  background: var(--cp-user-status-urgent-bg);
  color: var(--cp-user-status-urgent-text);
  margin-left: 0;
}

.cp-card a {
  color: var(--cp-user-text);
  text-decoration: none;
}

/* --- Aktionsreihe (Buttons/Formulare nebeneinander) ---------------------- */
.cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-user-space-2);
  margin-top: var(--cp-user-space-2);
}

.cp-actions form {
  margin: 0;
}

/* --- Zwei-Knopf-Umschalter (kann / kann_nicht) --------------------------- */
.cp-toggle {
  display: flex;
  gap: var(--cp-user-space-2);
  margin: var(--cp-user-space-2) 0 0;
}

.cp-toggle__btn {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--cp-user-space-3);
  border: 1px solid var(--cp-user-line);
  border-radius: var(--cp-user-radius-md);
  background: var(--cp-user-surface);
  color: var(--cp-user-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Aktiver Zustand: Markenton + fett + „✓" im Text (nicht nur Farbe). */
.cp-toggle__btn.is-active {
  background: var(--cp-user-teal-soft);
  border-color: var(--cp-user-teal-dark);
  color: var(--cp-user-teal-dark);
  font-weight: 700;
}

/* --- Chat (zwei Kanäle, Text-only) --------------------------------------- */
.cp-chat {
  list-style: none;
  margin: 0 0 var(--cp-user-space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cp-user-space-2);
}

.cp-msg {
  padding: var(--cp-user-space-2) var(--cp-user-space-3);
  border: 1px solid var(--cp-user-line);
  border-radius: var(--cp-user-radius-md);
  background: var(--cp-user-surface);
}

/* Eigene Nachrichten abgesetzt (nicht nur Farbe: auch rechtsbündig). */
.cp-msg--eigen {
  background: var(--cp-user-teal-soft);
  border-color: transparent;
  align-self: flex-end;
}

.cp-msg__meta {
  font-size: 0.78rem;
  color: var(--cp-user-muted);
  margin-bottom: 2px;
}

.cp-msg__text {
  white-space: pre-wrap;
  word-break: break-word;
}