/* ==========================================================================
   AUC Design System - DGU Mitgliederportal
   Zusätzliche Portal-Komponenten, ergänzend zu auc.css.
   Mobile-first: Basis-CSS ist die Handyansicht, Desktop kommt über
   min-width-Media-Queries. Drei Breakpoints:
     600px  = schmales Tablet, zweispaltige Kacheln und Tabellenansicht
     900px  = Desktop, Seitenleiste statt Tab-Bar
     1200px = breiter Desktop, dreispaltige Kacheln, zentrierter Inhalt
   Abstände und Schriftgrößen laufen ab jetzt über die Tokens aus
   auc.css (--auc-space-*, --auc-fs-*). Harte px-Werte sind in neuen
   Regeln nicht mehr erwünscht.
   Radius-Tokens (--auc-radius-karte 14px, --auc-radius-badge 10px sowie
   8px für Buttons und Eingabefelder) steuern die Rundung von Karten,
   Kacheln, Badges und Formularelementen; Tabellenzellen und Reiterleiste
   bleiben bewusst kantig.
   ========================================================================== */

@import url("auc.css");

:root {
  --p-header-hoehe: 56px;
  --p-tabbar-hoehe: 64px;
}

@media (min-width: 900px) {
  :root { --p-header-hoehe: 64px; }
}

img, svg { max-width: 100%; }

.p-shell {
  min-height: 100vh;
  background: var(--auc-surface);
}

/* --------------------------------------------------------------------------
   Ansichten (Views): nur die aktive Ansicht wird angezeigt
   -------------------------------------------------------------------------- */
.view { display: none; }
.view.is-active { display: block; }

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */
.p-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--p-header-hoehe);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 96px;
  align-items: center;
  gap: var(--auc-space-2);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--auc-border);
  padding: 0 var(--auc-space-4);
}

.p-header-links {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
}

.p-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--auc-blau);
  background: transparent;
  border: none;
  border-radius: var(--auc-radius);
  cursor: pointer;
  flex-shrink: 0;
}
.p-header-back .material-icons { color: var(--auc-blau); font-size: 24px; }
.p-header-back:disabled { display: none; }

.p-header-abmelden {
  min-height: 44px;
  padding: 0 2px;
  border: none;
  background: transparent;
  font-family: var(--auc-font);
  font-size: var(--auc-fs-body);
  font-weight: 500;
  color: var(--auc-blau);
  cursor: pointer;
}
.p-header-abmelden:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: 2px;
}

.p-header-logo {
  grid-column: 2;
  justify-self: center;
  width: 102px;
  max-height: 32px;
  object-fit: contain;
}

.p-header-titel {
  display: none;
  min-width: 0;
  text-align: left;
  color: var(--auc-dunkelblau);
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-header-avatar {
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eaf1f7;
  color: var(--auc-blau);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(20, 190, 237, .45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

@media (min-width: 900px) {
  .p-header {
    padding: 0 var(--auc-space-6);
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .p-header-logo { display: none; }
  .p-header-titel {
    display: block;
    grid-column: 2;
    justify-self: start;
    font-size: 17px;
  }
  .p-header-avatar { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Inhaltsbereich
   -------------------------------------------------------------------------- */
.p-content {
  max-width: 100%;
  padding: var(--auc-space-4);
  padding-top: calc(var(--p-header-hoehe) + var(--auc-space-4));
  padding-bottom: 84px;
}

@media (min-width: 900px) {
  .p-content {
    padding: var(--auc-space-6) var(--auc-space-7);
    padding-top: calc(var(--p-header-hoehe) + var(--auc-space-6));
    padding-bottom: var(--auc-space-6);
    margin-left: 240px;
  }
}

@media (min-width: 1200px) {
  .p-content {
    max-width: 1180px;
    margin-left: calc(240px + max(0px, (100vw - 240px - 1180px) / 2));
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Tab-Bar (mobil) und Seitenleiste (Desktop)
   -------------------------------------------------------------------------- */
.p-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  background: var(--auc-bg);
  border-top: 1px solid var(--auc-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.p-tabbar ul {
  display: flex;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-tabbar li { flex: 1; min-width: 0; }

.p-tabbar-item {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 8px;
  color: var(--auc-graublau);
  background: transparent;
  border: none;
  text-decoration: none;
  font-family: var(--auc-font);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}
.p-tabbar-item .material-icons { font-size: 22px; color: var(--auc-graublau); }
.p-tabbar-item.is-aktiv,
.p-tabbar-item.is-aktiv .material-icons { color: var(--auc-blau); }
.p-tabbar-item:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: -2px;
}

.p-sidebar {
  display: none;
}

@media (min-width: 900px) {
  .p-tabbar { display: none; }

  .p-sidebar {
    display: block;
    position: fixed;
    top: var(--p-header-hoehe);
    left: 0;
    bottom: 0;
    width: 240px;
    background: var(--auc-bg);
    border-right: 1px solid var(--auc-border);
    padding: 16px 0;
    overflow-y: auto;
  }

  .p-sidebar ul { list-style: none; margin: 0; padding: 0; }

  .p-sidebar-kopf {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 20px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--auc-border);
  }
  .p-sidebar-marke {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--auc-dunkelblau);
  }
  .p-sidebar-nutzer {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .p-sidebar-nutzer-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .p-sidebar-nutzer-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--auc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .p-sidebar-nutzer-rolle {
    font-size: 12px;
    color: var(--auc-text-muted);
  }

  .p-sidebar-gruppe {
    padding: 16px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--auc-graublau);
  }
  .p-sidebar-gruppe:first-child { padding-top: 4px; }

  .p-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--auc-text);
    text-decoration: none;
    font-size: 14px;
    border-left: 4px solid transparent;
  }
  .p-sidebar-item .material-icons { font-size: 22px; color: var(--auc-blau); }
  .p-sidebar-item:hover {
    background: var(--auc-surface);
  }
  .p-sidebar-item:focus-visible {
    outline: 2px solid var(--auc-hellblau);
    outline-offset: -2px;
  }
  .p-sidebar-item.is-aktiv {
    background: var(--auc-surface);
    border-left-color: var(--auc-blau);
    font-weight: 600;
    color: var(--auc-blau);
  }
}

/* --------------------------------------------------------------------------
   Icon-Badge
   Abgerundetes Farbquadrat mit weissem Icon. Ausnahme von der Regel "Icons
   in AUC Blau oder Hellblau": hier traegt die Flaeche die Farbe, das Icon
   ist weiss (bzw. bei --weich in AUC Blau). Icons bleiben einfarbig.
   -------------------------------------------------------------------------- */
.p-iconbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--auc-radius-badge);
  background: var(--auc-dunkelblau);
  color: #fff;
}
.p-iconbadge .material-icons { font-size: 24px; color: #fff; }
.p-iconbadge--blau { background: var(--auc-blau); }
.p-iconbadge--hellblau { background: var(--auc-hellblau); }
.p-iconbadge--weich { background: #eaf1f7; }
.p-iconbadge--weich .material-icons { color: var(--auc-blau); }
.p-iconbadge--rund { border-radius: var(--auc-radius-circle); }
.p-iconbadge--sm { width: 36px; height: 36px; }
.p-iconbadge--sm .material-icons { font-size: 20px; }

/* --------------------------------------------------------------------------
   Kachel-Grid
   -------------------------------------------------------------------------- */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--auc-space-3);
}

@media (min-width: 900px) {
  .kachel-grid { grid-template-columns: repeat(3, 1fr); }
}

.kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--auc-space-2);
  min-height: 116px;
  max-width: 100%;
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  box-shadow: 0 3px 14px rgba(15, 66, 122, .05);
  padding: var(--auc-space-4);
  text-decoration: none;
  text-align: left;
  color: var(--auc-text);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.kachel:hover { background: var(--auc-surface); border-color: var(--auc-blau); }
.kachel:active { background: var(--auc-border); }
.kachel:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: 2px;
}

.kachel-titel {
  font-size: var(--auc-fs-body);
  font-weight: 500;
  color: var(--auc-dunkelblau);
  overflow-wrap: anywhere;
}

.kachel-untertitel {
  font-size: var(--auc-fs-small);
  color: var(--auc-text-muted);
  overflow-wrap: anywhere;
}

.kachel-status {
  margin-top: 4px;
  font-size: 12px;
  color: var(--auc-graublau);
}

/* --------------------------------------------------------------------------
   Typografie-Hilfsklassen
   -------------------------------------------------------------------------- */
.p-eyebrow {
  font-size: var(--auc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--auc-graublau);
}

.p-h1 {
  font-size: var(--auc-fs-h1);
  font-weight: 500;
  color: var(--auc-dunkelblau);
  margin: var(--auc-space-1) 0 var(--auc-space-3);
  overflow-wrap: anywhere;
}

.p-h2 {
  font-size: var(--auc-fs-h3);
  font-weight: 500;
  color: var(--auc-blau);
  margin: 0 0 var(--auc-space-2);
  overflow-wrap: anywhere;
}

.p-note {
  font-size: var(--auc-fs-small);
  color: var(--auc-text-muted);
}

/* --------------------------------------------------------------------------
   Seitenkopf: einheitlicher Aufbau je View (Eyebrow, H1, optionale
   Beschreibung)
   -------------------------------------------------------------------------- */
.p-seitenkopf {
  display: flex;
  flex-direction: column;
  gap: var(--auc-space-1);
  margin-bottom: var(--auc-space-5);
}
.p-seitenkopf .p-h1 { margin: 0; }
.p-seitenkopf-beschreibung {
  font-size: var(--auc-fs-body);
  color: var(--auc-text-muted);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Abschnitt: vertikaler Rhythmus-Container für Blockgruppen einer View
   -------------------------------------------------------------------------- */
.p-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--auc-space-5);
}

.p-abschnitt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--auc-space-3);
  margin-bottom: var(--auc-space-2);
}
.p-abschnitt-kopf .p-h2 { margin: 0; }
.p-abschnitt-kopf-aktion {
  flex-shrink: 0;
  font-size: var(--auc-fs-small);
  color: var(--auc-blau);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}
.p-abschnitt-kopf-aktion:hover,
.p-abschnitt-kopf-aktion:focus-visible { text-decoration: underline; }
.p-abschnitt-kopf-aktion:focus-visible { outline: 2px solid var(--auc-hellblau); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Leerzustand und Hinweistexte
   -------------------------------------------------------------------------- */
.p-leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--auc-space-2);
  text-align: center;
  padding: var(--auc-space-6) var(--auc-space-4);
  color: var(--auc-text-muted);
}
.p-leerzustand .material-icons {
  font-size: 32px;
  color: var(--auc-graublau);
}
.p-leerzustand-text {
  font-size: var(--auc-fs-body);
  overflow-wrap: anywhere;
}

.p-hinweis {
  font-size: var(--auc-fs-small);
  color: var(--auc-text-muted);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Listen
   -------------------------------------------------------------------------- */
.p-liste {
  display: flex;
  flex-direction: column;
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  overflow: hidden;
}

.p-listeintrag {
  display: flex;
  align-items: center;
  gap: var(--auc-space-3);
  min-height: 48px;
  padding: var(--auc-space-2) var(--auc-space-3);
  color: var(--auc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--auc-border);
}
.p-listeintrag:last-child,
.p-liste > .p-listeintrag:last-child { border-bottom: none; }

.p-listeintrag--klickbar {
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
}
.p-listeintrag--klickbar:hover { background: var(--auc-surface); }
.p-listeintrag--klickbar:active { background: var(--auc-border); }
.p-listeintrag--klickbar:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: -2px;
}

.p-listeintrag .material-icons {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--auc-blau);
}

.p-listeintrag-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.p-listeintrag-titel {
  font-size: 14px;
  font-weight: 500;
  color: var(--auc-dunkelblau);
}

.p-listeintrag-untertitel {
  font-size: 12px;
  color: var(--auc-text-muted);
}

.p-listeintrag-chevron {
  flex-shrink: 0;
  color: var(--auc-graublau);
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   Zentraler Eingabefeldstil (Login, Profil, Zertifizierung)
   -------------------------------------------------------------------------- */
.p-feld {
  display: flex;
  flex-direction: column;
  gap: var(--auc-space-1);
}

.p-feld label {
  font-size: var(--auc-fs-small);
  font-weight: 500;
  color: var(--auc-text);
}

.p-feld input[type=email],
.p-feld input[type=password],
.p-feld input[type=text],
.p-feld input[type=tel],
.p-feld input[type=search],
.p-feld select {
  font-family: var(--auc-font);
  font-size: var(--auc-fs-body);
  color: var(--auc-text);
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius);
  padding: var(--auc-space-2) var(--auc-space-3);
  min-height: 48px;
  width: 100%;
}

.p-feld input[type=email]:focus-visible,
.p-feld input[type=password]:focus-visible,
.p-feld input[type=text]:focus-visible,
.p-feld input[type=tel]:focus-visible,
.p-feld input[type=search]:focus-visible,
.p-feld select:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: 1px;
  border-color: var(--auc-blau);
}

/* --------------------------------------------------------------------------
   Suchfeld
   -------------------------------------------------------------------------- */
.p-suchfeld {
  display: flex;
  align-items: center;
  gap: var(--auc-space-2);
  width: 100%;
  max-width: 100%;
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius);
  padding: var(--auc-space-2) var(--auc-space-3);
}

.p-suchfeld .material-icons { color: var(--auc-graublau); font-size: 20px; flex-shrink: 0; }

.p-suchfeld input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-family: var(--auc-font);
  font-size: 14px;
  color: var(--auc-text);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Fortschrittsbalken
   -------------------------------------------------------------------------- */
.p-fortschritt {
  width: 100%;
  max-width: 100%;
  height: 8px;
  background: var(--auc-border);
  border-radius: var(--auc-radius-pill);
  overflow: hidden;
}
.p-fortschritt--sm { height: 4px; }
.p-fortschritt--lg { height: 12px; }

.p-fortschritt-fuellung {
  height: 100%;
  border-radius: inherit;
  /* Keine Änderung (Schritt 6): reine Fläche ohne eigenen Text, die Prozentangabe steht in .p-fortschritt-text auf hellem Grund darunter. */
  background: var(--auc-hellblau);
}
.p-fortschritt-fuellung--ok { background: var(--auc-gruen); }
.p-fortschritt-fuellung--warnung { background: var(--auc-warning); }
.p-fortschritt-fuellung--fehler { background: var(--auc-rot); }

.p-fortschritt-text {
  margin-top: var(--auc-space-1);
  font-size: var(--auc-fs-small);
  color: var(--auc-text-muted);
}

/* --------------------------------------------------------------------------
   Chips (Filterschalter)
   -------------------------------------------------------------------------- */
.p-chips {
  display: flex;
  gap: var(--auc-space-2);
  max-width: 100%;
  flex-wrap: wrap;
}

.p-chips--leiste {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--auc-space-1);
}

.p-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: var(--auc-fs-body);
  color: var(--auc-blau);
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-pill);
  padding: 7px var(--auc-space-3);
  cursor: pointer;
}

.p-chip:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: 2px;
}

.p-chip.is-aktiv {
  background: var(--auc-blau);
  border-color: var(--auc-blau);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Modal / Bottom-Sheet
   -------------------------------------------------------------------------- */
.p-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(10, 40, 60, .45);
  align-items: flex-end;
  justify-content: center;
}
.p-modal.is-offen { display: flex; }

.p-modal-sheet {
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--auc-bg);
  border-radius: var(--auc-radius-karte) var(--auc-radius-karte) 0 0;
  padding: var(--auc-space-5) var(--auc-space-4);
}

.p-modal-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.p-modal-titel {
  font-size: 17px;
  font-weight: 500;
  color: var(--auc-dunkelblau);
  overflow-wrap: anywhere;
}

.p-modal-schliessen {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -8px 0 0;
  color: var(--auc-graublau);
  background: transparent;
  border: none;
  cursor: pointer;
}
.p-modal-schliessen .material-icons { font-size: 22px; }

.p-modal__aktionen {
  display: flex;
  justify-content: flex-end;
  gap: var(--auc-space-2);
  margin-top: var(--auc-space-4);
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .p-modal { align-items: center; }
  .p-modal-sheet {
    width: 560px;
    max-width: calc(100vw - 40px);
    max-height: 80vh;
    border-radius: var(--auc-radius-karte);
    padding: var(--auc-space-6) var(--auc-space-7);
  }
}

/* --------------------------------------------------------------------------
   Tabellen mit horizontalem Scroll, mobile Kartenliste als Alternative
   -------------------------------------------------------------------------- */
.p-tabelle-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  background: var(--auc-bg);
}

.p-kartenliste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-karte {
  width: 100%;
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  padding: var(--auc-space-3) var(--auc-space-4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: var(--auc-space-1);
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--auc-font);
}

.p-karte--akzent { box-shadow: inset 4px 0 0 var(--auc-hellblau); }
.p-karte--warnung { box-shadow: inset 4px 0 0 var(--auc-warning); }

.p-karte--klickbar {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color .12s ease, border-color .12s ease;
}
.p-karte--klickbar:hover { background: var(--auc-surface); }
.p-karte--klickbar:active { background: var(--auc-border); }
.p-karte--klickbar:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Statuspille
   -------------------------------------------------------------------------- */
.p-pille {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--auc-fs-small);
  font-weight: 500;
  padding: 3px var(--auc-space-2);
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.p-pille--info { background: rgba(20, 190, 237, .16); color: #0b6f8c; border-color: var(--auc-hellblau); }
.p-pille--ok { background: rgba(110, 215, 160, .18); color: #1f7a4d; border-color: var(--auc-gruen); }
.p-pille--warnung { background: rgba(247, 214, 109, .32); color: #7a5b00; border-color: var(--auc-warning); }
.p-pille--fehler { background: rgba(230, 60, 75, .12); color: #b32230; border-color: var(--auc-rot); }
.p-pille--neutral { background: rgba(154, 168, 185, .18); color: #566677; border-color: var(--auc-graublau); }
.p-pille--stark { background: var(--auc-hellblau); color: #fff; border-color: var(--auc-hellblau); }

/* --------------------------------------------------------------------------
   Aktionspille
   Pillenförmige Buttonvariante für sekundäre Aktionen wie "Kalender" oder
   "Alle Termine". Bewusst kein .btn, da .btn mobil 100% Breite und 48px
   Höhe hat. Mindesthöhe hier ist 36px, also unter den üblichen 48px
   Trefferflächen. Das ist nur zulässig, weil daneben immer eine grosse
   Trefferfläche liegt. Diese Pille nie als einzige Aktion einer Zeile
   verwenden.
   -------------------------------------------------------------------------- */
.p-aktionspille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 var(--auc-space-3);
  font-family: var(--auc-font);
  font-size: var(--auc-fs-small);
  font-weight: 500;
  white-space: nowrap;
  color: var(--auc-blau);
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.p-aktionspille .material-icons { font-size: 16px; color: currentColor; }
.p-aktionspille:hover { border-color: var(--auc-blau); background: #eaf1f7; }
.p-aktionspille:focus-visible { outline: 2px solid var(--auc-hellblau); outline-offset: 2px; }
.p-aktionspille--stark { color: #fff; background: var(--auc-blau); border-color: var(--auc-blau); }
.p-aktionspille--stark:hover { background: var(--auc-dunkelblau); border-color: var(--auc-dunkelblau); }

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */
.p-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--auc-hellblau);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
}
.p-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.p-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.p-avatar--lg { width: 72px; height: 72px; font-size: 22px; }
.p-avatar--gruppe { background: var(--auc-graublau); color: #fff; }

.p-karte-zeile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.p-karte-zeile .label { color: var(--auc-text-muted); }
.p-karte-zeile .wert { color: var(--auc-text); text-align: right; overflow-wrap: anywhere; }

/* Umschaltung Tabelle (ab 600px) und Kartenliste (unter 600px) für dieselben Daten */
.p-nur-tabelle { display: none; }
.p-nur-karten { display: block; }
@media (min-width: 600px) {
  .p-nur-tabelle { display: block; }
  .p-nur-karten { display: none; }
}

.p-tabelle {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
.p-tabelle th,
.p-tabelle td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--auc-border);
  vertical-align: top;
}
.p-tabelle th {
  color: var(--auc-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.p-tabelle td { color: var(--auc-text); }

/* --------------------------------------------------------------------------
   Block-Titel (Zwischenüberschrift innerhalb einer View)
   -------------------------------------------------------------------------- */
.p-block-titel {
  font-size: var(--auc-fs-body);
  font-weight: 500;
  color: var(--auc-blau);
  margin: 0 0 var(--auc-space-2);
}

/* --------------------------------------------------------------------------
   Ampel: Punkt und Text immer kombiniert, Punkt ab 10px, damit die Bedeutung
   auch ohne reine Farbwahrnehmung und auf kleinen Bildschirmen ankommt
   -------------------------------------------------------------------------- */
.p-ampel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--auc-fs-small);
  color: var(--auc-text-muted);
  white-space: nowrap;
}
.p-ampel-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.p-ampel-punkt.ampel-gruen { background: var(--auc-gruen); }
.p-ampel-punkt.ampel-gelb { background: var(--auc-warning); }
.p-ampel-punkt.ampel-rot { background: var(--auc-rot); }

/* --------------------------------------------------------------------------
   Verlaufspunkt (Zeitleiste, z. B. Zertifizierungsverlauf)
   -------------------------------------------------------------------------- */
.p-verlauf-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--auc-blau);
  margin-top: 4px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Toast-Stapel (übernommen aus Zertifizierung Workflow, index.html)
   -------------------------------------------------------------------------- */
.toast-stapel {
  position: fixed;
  right: var(--auc-space-3);
  left: var(--auc-space-3);
  bottom: calc(var(--p-tabbar-hoehe) + var(--auc-space-3));
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--auc-dunkelblau);
  color: #fff;
  padding: 12px 14px;
  border-radius: var(--auc-radius);
  box-shadow: 0 4px 14px rgba(10, 40, 60, .25);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-sichtbar { opacity: 1; transform: translateY(0); }
.toast .material-icons { color: var(--auc-hellblau); font-size: 19px; flex-shrink: 0; }
.toast.toast-ok .material-icons { color: var(--auc-gruen); }
.toast.toast-warn .material-icons { color: var(--auc-warning); }

@media (min-width: 601px) {
  .toast-stapel {
    left: auto;
    right: 20px;
    bottom: 20px;
    max-width: min(360px, calc(100vw - 40px));
  }
}

/* ==========================================================================
   iOS-Interaktionsmuster: Abgrenzung

   Übernommen werden weiterhin: großzügige Innenabstände in Karten,
   Schieberegler statt Haken bei Ein/Aus, Kachelauswahl statt Dropdown bei
   wenigen Optionen, ruhige Listenzeilen mit dezenten Trennlinien statt
   harter Kästen, Trefferflächen ab 48px.

   Neu: abgerundete Karten und Kacheln (--auc-radius-karte, 14px),
   abgerundete Datums- und Icon-Badges (--auc-radius-badge, 10px) sowie
   8px Standardrundung für Buttons und Eingabefelder. Grund ist eine
   ausdrückliche Kurskorrektur des Auftraggebers nach Vergleich mit dem
   Original-Referenzprojekt, das mit 8px und 12px arbeitet.

   Weiterhin nicht übernommen werden: SF-Schrift (es bleibt Jost),
   iOS-Systemfarben (es bleibt die AUC-Palette Dunkelblau, Blau, Hellblau,
   Graublau, Gruen, Warning, Rot), SF-Symbols (es bleiben Material Icons,
   einfarbig in AUC Blau oder Hellblau) sowie externe Schriften oder
   Icon-CDNs.

   Kantig bleiben ausdrücklich nur: Tabellenzellen (.auc-table,
   .p-tabelle) und die Reiterleiste (.p-reiter).
   ========================================================================== */

/* ==========================================================================
   Schieberegler (Ein/Aus)

   Rundung hier ausdrücklich erlaubt: Bahn ist eine Pille, Knopf ist ein
   Kreis, beides gehört laut Styleguide zu den einzigen erlaubten runden
   Formen (Pille und Kreis).
   ========================================================================== */

.p-schalter {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.p-schalter input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.p-schalter-spur {
  width: 52px;
  height: 32px;
  border-radius: var(--auc-radius-pill);
  background: var(--auc-graublau);
  transition: background .18s ease;
}

.p-schalter-knopf {
  width: 26px;
  height: 26px;
  border-radius: var(--auc-radius-circle);
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: var(--auc-shadow-karte);
  transition: transform .18s ease;
}

.p-schalter input:checked + .p-schalter-spur { background: var(--auc-hellblau); }
.p-schalter input:checked + .p-schalter-spur .p-schalter-knopf { transform: translateX(20px); }

.p-schalter input:focus-visible + .p-schalter-spur {
  outline: 3px solid var(--auc-hellblau);
  outline-offset: 2px;
}

.p-schalter input:disabled + .p-schalter-spur { opacity: .5; cursor: not-allowed; }
.p-schalter:has(input:disabled) { cursor: not-allowed; }

.p-schaltergruppe {
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  overflow: hidden;
}

.p-schalterzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--auc-space-3);
  min-height: 56px;
  padding: var(--auc-space-3) var(--auc-space-4);
  background: var(--auc-bg);
  border-bottom: 1px solid var(--auc-border);
  border-radius: var(--auc-radius);
}

.p-schaltergruppe .p-schalterzeile:last-child { border-bottom: none; }

.p-schalterzeile--ohne-rahmen {
  border-bottom: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.p-schalterzeile-text {
  display: flex;
  flex-direction: column;
}

.p-schalterzeile-titel {
  font-size: 14px;
  color: var(--auc-dunkelblau);
  overflow-wrap: anywhere;
}

.p-schalterzeile-hinweis {
  font-size: 12px;
  color: var(--auc-text-muted);
}

/* ==========================================================================
   Kachelauswahl statt Dropdown

   Ersatz für <select> mit wenigen Optionen, bedienbar per Finger, ohne
   native Dropdown-Liste. Der Auswahlzustand wird per JavaScript-Klasse
   .is-gewaehlt am Label gesetzt (verlässlich in jedem Browser), :has ist
   nur ein zusätzlicher Rückfall für Browser ohne JS-Unterstützung.
   ========================================================================== */

.p-wahl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--auc-space-2);
}

@media (min-width: 600px) {
  .p-wahl { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .p-wahl { grid-template-columns: repeat(3, 1fr); }
}

.p-wahl--breit {
  grid-template-columns: 1fr !important;
}

.p-wahl--kompakt {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.p-wahl-kachel {
  display: flex;
  align-items: center;
  gap: var(--auc-space-2);
  min-height: 48px;
  padding: var(--auc-space-3) var(--auc-space-4);
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius);
  cursor: pointer;
  font-size: var(--auc-fs-body);
  color: var(--auc-text);
  transition: background .12s ease, border-color .12s ease;
}

.p-wahl-kachel input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.p-wahl-kachel.is-gewaehlt,
.p-wahl-kachel:has(input:checked) {
  border-color: var(--auc-blau);
  box-shadow: inset 3px 0 0 var(--auc-blau);
  background: var(--auc-surface);
  font-weight: 500;
  color: var(--auc-blau);
}

.p-wahl-haken {
  visibility: hidden;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--auc-blau);
}
.p-wahl-kachel.is-gewaehlt .p-wahl-haken,
.p-wahl-kachel:has(input:checked) .p-wahl-haken {
  visibility: visible;
}

.p-wahl-kachel:has(input:focus-visible) {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: 2px;
}

.p-wahl-gruppe {
  border: none;
  margin: 0;
  padding: 0;
}

.p-wahl-gruppe-titel {
  font-size: var(--auc-fs-small);
  font-weight: 500;
  color: var(--auc-text);
  padding: 0;
  margin-bottom: var(--auc-space-2);
}

/* Variante für sehr kurze Optionen: Optik von .p-chip wiederverwenden */
.p-wahl--pillen .p-wahl-kachel {
  display: inline-flex;
  flex-shrink: 0;
  width: auto;
  min-height: 0;
  gap: 6px;
  white-space: nowrap;
  font-size: var(--auc-fs-body);
  color: var(--auc-blau);
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-pill);
  padding: 7px var(--auc-space-3);
}
.p-wahl--pillen .p-wahl-kachel.is-gewaehlt,
.p-wahl--pillen .p-wahl-kachel:has(input:checked) {
  background: var(--auc-blau);
  border-color: var(--auc-blau);
  color: #fff;
  font-weight: 500;
}
.p-wahl--pillen .p-wahl-kachel.is-gewaehlt .p-wahl-haken,
.p-wahl--pillen .p-wahl-kachel:has(input:checked) .p-wahl-haken {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Reiterleiste innerhalb einer Ansicht
   -------------------------------------------------------------------------- */
.p-reiter {
  display: flex;
  gap: var(--auc-space-1);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--auc-border);
  margin-bottom: var(--auc-space-5);
}

.p-reiter-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--auc-space-3) var(--auc-space-3);
  min-height: 48px;
  font-family: var(--auc-font);
  font-size: var(--auc-fs-body);
  color: var(--auc-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.p-reiter-btn.is-aktiv {
  color: var(--auc-blau);
  font-weight: 500;
  border-bottom-color: var(--auc-blau);
}

.p-reiter-btn:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: -2px;
}

@media (min-width: 900px) {
  .p-reiter {
    gap: var(--auc-space-3);
    overflow-x: visible;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Datumsblock (z. B. Termin- und Lehrenlisten)
   -------------------------------------------------------------------------- */
.p-datumsblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  min-height: 48px;
  background: var(--auc-dunkelblau);
  color: #fff;
  padding: var(--auc-space-1);
  border-radius: var(--auc-radius-badge);
}

.p-datumsblock-tag {
  font-size: var(--auc-fs-h3);
  font-weight: 500;
  line-height: 1;
}

.p-datumsblock-monat {
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Gruen bewusst als dunkleres Gruen statt --auc-gruen, da weisser Text
   auf dem hellen AUC-Gruen nicht ausreichend Kontrast haette. */
.p-datumsblock--gruen {
  background: #1f7a4d;
}

.p-datumsblock--blau {
  background: var(--auc-blau);
}

.p-datumsblock--sm {
  width: 42px;
  min-height: 42px;
}

/* --------------------------------------------------------------------------
   Terminzeile (gemeinsame Komponente für Home und Kalenderansicht)

   Wichtig für die Zugänglichkeit: der Kalender-Button liegt als
   Geschwisterelement neben .p-terminzeile-haupt, nicht darin verschachtelt.
   Ein Button innerhalb eines Buttons ist ungueltiges HTML und darf nicht
   entstehen.
   -------------------------------------------------------------------------- */
.p-terminliste {
  display: flex;
  flex-direction: column;
  gap: var(--auc-space-2);
}

.p-terminzeile {
  display: flex;
  align-items: stretch;
  gap: var(--auc-space-2);
  max-width: 100%;
  background: var(--auc-surface);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  overflow: hidden;
}
.p-terminzeile--gebucht {
  background: #f1f8f4;
  border-color: #a9cdbb;
}

.p-terminzeile-haupt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--auc-space-3);
  padding: var(--auc-space-3);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--auc-font);
  cursor: pointer;
}
.p-terminzeile-haupt:hover {
  background: rgba(15, 66, 122, .05);
}
.p-terminzeile-haupt:focus-visible {
  outline: 2px solid var(--auc-hellblau);
  outline-offset: -2px;
}

.p-terminzeile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}
.p-terminzeile-text .p-eyebrow {
  display: block;
}
.p-terminzeile-titel {
  font-size: var(--auc-fs-body);
  font-weight: 500;
  color: var(--auc-dunkelblau);
}
.p-terminzeile-meta {
  font-size: var(--auc-fs-small);
  color: var(--auc-text-muted);
}

.p-terminzeile-rechts {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--auc-space-1);
  padding: var(--auc-space-3) var(--auc-space-3) var(--auc-space-3) 0;
}
.p-terminzeile-zusatz {
  font-size: var(--auc-fs-eyebrow);
  color: var(--auc-blau);
  text-align: right;
  max-width: 92px;
}
.p-terminzeile--gebucht .p-terminzeile-zusatz {
  color: #1f7a4d;
}

/* --------------------------------------------------------------------------
   Karte, grosszuegige Variante (mehr Innenabstand als .p-karte)
   -------------------------------------------------------------------------- */
.p-karte--gross {
  padding: var(--auc-space-4) var(--auc-space-4);
}

@media (min-width: 900px) {
  .p-karte--gross {
    padding: var(--auc-space-5) var(--auc-space-5);
  }
}