/* ---- Icon-Set (harmonisierte Darstellung, siehe js/utils/icon.js) ----
   CSS-Maske statt <img>: die SVGs nutzen `currentColor`, was bei einer
   Einbindung per <img src> immer schwarz bliebe (kein Zugriff auf den
   Seiten-Farbkontext). Als Maske gezeichnet übernimmt das Icon stattdessen
   automatisch `color` der jeweiligen Stelle – ein Icon in einem farbigen
   Button ändert seine Farbe also einfach mit. Die mask-image-Eigenschaften
   selbst setzt icon.js direkt inline (siehe Kommentar dort, Bugfix zu
   relativen URLs in Custom Properties) – hier nur das Strukturelle. */
.icon {
  display: inline-block;
  flex-shrink: 0;
}

/* ---- Buttons ---- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.62rem 1rem;
  font-weight: 800;
  font-size: var(--fs-body-sm);
  transition: transform var(--ease-standard), background var(--ease-standard);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--color-pearl-aqua);
  /* Weiße Beschriftung auf Pearl Aqua (Kundenvorgabe). Icons in .btn--primary
     zeichnen über `currentColor` und werden dadurch automatisch mit weiß. */
  color: var(--color-text-on-dark);
}

.btn--primary:hover {
  background: #6fbdb5;
}

.btn--line {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.btn--danger {
  background: var(--color-danger);
  color: #ffffff;
}

.btn--danger:hover {
  background: #a6472f;
}

/* Borderless statt fester Rahmen (Kundenvorgabe nach Review 0.4.6: Rahmen
   wirkte nicht mehr zeitgemäß) – ruhender Zustand ohne sichtbare Kontur, Hover/Fokus
   zeigen stattdessen einen dezenten Hintergrund-Tint. Gilt einheitlich für
   alle Icon-Buttons der Anwendung (Kebab-Menü, Schließen-Buttons,
   Maximieren/Minimieren, Serie-Umschalter sowie die Bild-Icons).
   Größe einheitlich wie das Quick-Add-Icon (Review 0.4.6, nochmals um 30 %
   vergrößert in Review 0.4.7, Kundenvorgabe: alle Icons, die als Button
   dienen, sollen gleich groß sein – reine visuelle Indikatoren wie
   Demand-Icons oder Sichtbarkeits-Punkte sind davon bewusst ausgenommen, da
   sie keine Buttons sind). */
.icon-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  width: 47px;
  height: 47px;
  font-size: 1.69rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--ease-standard), color var(--ease-standard);
}

.icon-btn--disabled,
.icon-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.icon-btn:hover {
  background: var(--color-surface-card-muted);
  color: var(--color-text-primary);
}

/* Zeigt z. B. am 🔄-Button im Ereignis-Dialog an, dass bereits eine Serie
   konfiguriert ist (Review 0.4.2). */
.icon-btn.is-active {
  background: var(--color-pearl-aqua);
  /* Weißes Icon auf Pearl Aqua (Kundenvorgabe) – das Icon folgt `currentColor`. */
  color: var(--color-text-on-dark);
}

/* ---- Tags / Pills ---- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tag--sand {
  background: var(--color-sand);
  color: var(--color-shadow-grey);
}

.overflow-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--color-granite);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--fs-caption);
  padding: var(--space-1) var(--space-1);
  text-align: left;
}

.overflow-toggle:hover {
  color: var(--color-shadow-grey);
}

/* ---- Status-Badges ---- */

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  font-size: var(--fs-caption);
  font-weight: 800;
  white-space: nowrap;
  background: var(--color-sage-light);
  color: var(--color-shadow-grey);
}

.status-badge--abgeschlossen {
  background: var(--color-sage-light);
  color: var(--color-granite);
}

.status-badge--aktiv {
  background: var(--color-sage-very-light);
  color: var(--color-shadow-grey);
}
/* ---- Externe Links (Ort-Link/OpenStreetMap, weiterführende Informationen
   zum Ereignis) ---- */

.osm-link,
.external-link {
  color: var(--color-pearl-aqua);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.osm-link:hover,
.external-link:hover {
  color: var(--color-shadow-grey);
}

.external-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.external-link:hover {
  text-decoration: underline;
}

/* ---- Detailbereich ---- */

.detail-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.delete-confirm {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
}

.delete-confirm p {
  font-size: var(--fs-body-sm);
  margin-bottom: var(--space-3);
}

.delete-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.detail-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.detail-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
}

.detail-fields dt {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 2px;
}

.detail-fields dd {
  font-size: var(--fs-body-sm);
}

/* Direkt editierbare Felder in der Detailansicht (Review 0.4.3): Demand,
   Startdatum und Uhrzeit speichern sofort bei Änderung, ohne über
   "Bearbeiten" zu müssen. */
.detail-fields select,
.detail-fields input {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.35rem var(--space-2);
  background: var(--color-surface-card);
  font-family: inherit;
  font-size: var(--fs-body-sm);
}

.detail-action__hint {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* ---- Tages-Detailansicht (Objekt Tag Requirements, Phase 1) ---- */

.day-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.day-detail-section__title {
  font-size: var(--fs-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.day-detail-empty {
  font-size: var(--fs-body-sm);
  color: var(--color-lilac-ash);
}

/* ---- Task-Checkliste im Detail (Task V1 Slice B, Storyboard 2b) ----
   Nur Abhaken/Wiederöffnen; Hinzufügen/Entfernen/Umbenennen laufen über das
   Erfassen-Sheet ("Bearbeiten") – siehe .task-checklist-field weiter unten,
   dieselbe Reifegrad-100-Farbe (--color-reifegrad-100) für "erledigt" wie
   dort. */

.task-checklist__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-checklist__count {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-reifegrad-100);
}

.task-checklist__progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.task-checklist__progress-fill {
  height: 100%;
  background: var(--color-reifegrad-100);
  transition: width 0.2s ease;
}

.task-checklist__list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(36, 36, 38, 0.06);
  overflow: hidden;
}

.task-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
}

.task-checklist__item:last-child {
  border-bottom: none;
}

.task-checklist__item:disabled {
  cursor: default;
}

.task-checklist__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 2px solid var(--color-border-strong);
  color: var(--color-text-on-dark);
}

.task-checklist__item.is-done .task-checklist__checkbox {
  background: var(--color-reifegrad-100);
  border-color: var(--color-reifegrad-100);
}

.task-checklist__item-title {
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.task-checklist__item.is-done .task-checklist__item-title {
  color: var(--color-lilac-ash);
  text-decoration: line-through;
}

.task-checklist__loading {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

.task-checklist__locked-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* ---- Task-Checkliste im Erfassen-Sheet (Task V1 Slice B, Storyboard 6d) ----
   Entwurf: hinzufügen/entfernen/umbenennen/abhaken, wird erst beim Speichern
   des Tasks als Diff gegen die Ist-Checkliste angewandt
   (mobileCapture.js/state.js#applyChecklistDiff). */

.task-checklist-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-checklist-field__label {
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.task-checklist-field__optional {
  text-transform: none;
  font-weight: 400;
  color: var(--color-lilac-ash);
}

.task-checklist-field__count {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-sage-very-light);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.task-checklist-editor {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.task-checklist-editor__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.task-checklist-editor__row:last-child {
  border-bottom: none;
}

.task-checklist-editor__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--color-border-strong);
  background: transparent;
  padding: 0;
  color: var(--color-text-on-dark);
}

.task-checklist-editor__checkbox.is-done {
  background: var(--color-reifegrad-100);
  border-color: var(--color-reifegrad-100);
}

.task-checklist-editor__title {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--space-1) 0;
  font-size: var(--fs-body-sm);
  font-family: inherit;
  color: var(--color-text-primary);
}

.task-checklist-editor__title:focus {
  outline: none;
}

.task-checklist-editor__remove {
  flex: 0 0 auto;
  display: flex;
  appearance: none;
  border: none;
  background: transparent;
  padding: var(--space-1);
  color: var(--color-lilac-ash);
}

.task-checklist-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-checklist-add__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem var(--space-3);
  background: var(--color-surface-card);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.task-checklist-add__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: var(--color-shadow-grey);
  color: var(--color-text-on-dark);
  appearance: none;
}

/* ---- Event-Briefing (Reviews-and-Features/V0.1 Briefing und De-Briefing
   Features.md, Abschnitt 3) ---- */

/* Tagesbriefing-Textfeld in der Tages-Detailansicht: seit die Buttons im Kopf
   durch Icons ersetzt wurden (Review 0.4.5), steht mehr vertikaler Platz zur
   Verfügung. */
.day-briefing-textarea {
  min-height: 220px;
}

/* ---- De-Briefing-Einträge ---- */

.day-detail-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.day-detail-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.debriefing-entry-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.debriefing-entry {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card-muted);
}

.debriefing-entry__meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.debriefing-entry__text {
  font-size: var(--fs-body-sm);
}

.debriefing-entry__photo {
  display: block;
  width: 100%;
  max-height: 220px;
  margin-top: var(--space-2);
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.debriefing-entry__events {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.debriefing-entry__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.tag--merken {
  background: var(--color-sand);
  color: var(--color-shadow-grey);
}

.tag--klaeren {
  background: var(--color-signal-review-bg);
  color: var(--color-signal-review);
}

.tag--personalrelevant {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ---- Dialog: zusammengestelltes Tagesbriefing ---- */

.day-briefing-dialog {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-panel);
}

.day-briefing-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.day-briefing-dialog__header {
  flex: 0 0 auto;
  padding-bottom: var(--space-3);
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
}

.day-briefing-dialog__heading {
  min-width: 0;
}

.day-briefing-dialog__date {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  font-weight: 700;
}

.day-briefing-dialog__heading .detail-action__hint {
  margin-top: var(--space-1);
}

.day-briefing-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--space-1);
}

.day-briefing-dialog::backdrop {
  background: rgba(28, 26, 27, 0.45);
}

.briefing-event {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.briefing-event:last-child {
  border-bottom: none;
}

.briefing-event__title {
  font-weight: 800;
  font-size: 1.3rem;
}

.briefing-event__meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* Einheitliches, sicheres Markdown fuer laengere Lesetexte. Die Selektoren
   setzen den globalen Listen-Reset gezielt nur innerhalb dieses Containers
   zurueck. Eingabefelder bleiben absichtlich unformatiertes Markdown. */
.markdown-content {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.markdown-content > :first-child {
  margin-top: 0;
}

.markdown-content > :last-child {
  margin-bottom: 0;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content hr {
  margin: var(--space-2) 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  margin: var(--space-4) 0 var(--space-1);
  color: inherit;
  font-weight: 800;
  line-height: 1.25;
}

.markdown-content h1 {
  font-size: 1.35rem;
}

.markdown-content h2 {
  font-size: 1.2rem;
}

.markdown-content h3 {
  font-size: 1.05rem;
}

.markdown-content h4 {
  font-size: 0.95rem;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: var(--space-5);
}

.markdown-content ul {
  list-style: disc;
}

.markdown-content ol {
  list-style: decimal;
}

.markdown-content li {
  margin: 2px 0;
}

.markdown-content li > ul,
.markdown-content li > ol {
  margin: 2px 0;
}

.markdown-content a {
  color: var(--color-primary, #246b64);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown-content strong {
  font-weight: 800;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content blockquote {
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-sage-light, #bdcfc9);
  color: var(--color-text-muted);
}

.markdown-content blockquote > :first-child {
  margin-top: 0;
}

.markdown-content blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-content code {
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-sage-light, #bdcfc9) 32%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
}

.markdown-content__inline-code {
  padding: 1px 4px;
}

.markdown-content__code-block {
  max-width: 100%;
  padding: var(--space-3);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-sage-light, #bdcfc9) 22%, var(--color-surface-card, #fff));
  white-space: pre;
  overscroll-behavior-inline: contain;
}

.markdown-content__code-block code {
  padding: 0;
  background: transparent;
  white-space: inherit;
}

.markdown-content hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.markdown-content__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 14px 0;
  border-radius: 12px;
}

.markdown-content__missing-image {
  display: inline-block;
  color: var(--color-text-muted);
  font-style: italic;
}

.knowledge-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid var(--color-sage-light);
  border-radius: 10px;
  background: var(--color-surface-card);
  color: var(--color-text-muted);
}

.knowledge-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: 400 1rem var(--font-ui);
}

.knowledge-search:focus-within {
  border-color: var(--color-pearl-aqua);
  box-shadow: 0 0 0 2px rgba(124, 200, 193, 0.18);
}

.knowledge-search__clear {
  appearance: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--color-sage-very-light);
  color: var(--color-text-muted);
}

.knowledge-home,
.knowledge-category-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 var(--space-4);
}

.knowledge-readonly {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-bottom: 12px;
  padding: 8px 11px;
  border: 1px solid #cdeae6;
  border-radius: 10px;
  background: var(--color-pearl-aqua-very-light);
  color: #3f8f87;
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.4;
}

.knowledge-section-label {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-categories,
.knowledge-recent,
.knowledge-results {
  margin: 0 0 14px;
}

.knowledge-category {
  margin-bottom: 8px;
}

.knowledge-category__toggle {
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  text-align: left;
}

.knowledge-category__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.knowledge-category--aqua .knowledge-category__icon {
  background: var(--color-pearl-aqua);
  color: #ffffff;
}

.knowledge-category--sand .knowledge-category__icon {
  background: var(--color-sand);
  color: var(--color-text-primary);
}

.knowledge-category--green .knowledge-category__icon {
  background: var(--color-reifegrad-100-bg);
  color: var(--color-reifegrad-100);
}

.knowledge-category--neutral .knowledge-category__icon {
  border: 1px solid #cdeae6;
  background: var(--color-pearl-aqua-very-light);
  color: #3f8f87;
}

.knowledge-category__text {
  flex: 1 1 auto;
  min-width: 0;
}

.knowledge-category__text strong,
.knowledge-category__text span {
  display: block;
}

.knowledge-category__text strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-category__text span {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.69rem;
}

.knowledge-category__chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform var(--ease-standard);
}

.knowledge-category__toggle[aria-expanded="true"] .knowledge-category__chevron {
  color: var(--color-pearl-aqua);
  transform: rotate(90deg);
}

.knowledge-category__panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px 17px;
  padding: 8px 0 0 10px;
  border-left: 2px solid #cdeae6;
}

.knowledge-category__empty {
  margin: 0;
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.knowledge-document-row {
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  text-align: left;
}

.knowledge-document-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--color-sage-very-light);
}

.knowledge-document-row__text {
  flex: 1 1 auto;
  min-width: 0;
}

.knowledge-document-row__text strong,
.knowledge-document-row__meta {
  display: block;
}

.knowledge-document-row__text strong {
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-document-row__meta {
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-document-row__lock {
  display: flex;
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.knowledge-category__all {
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 36px;
  padding: 4px 10px;
  background: transparent;
  color: #3f8f87;
  font-size: 0.69rem;
  font-weight: 700;
}

.knowledge-recent__rows,
.knowledge-results__rows,
.knowledge-category-list__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-retry {
  appearance: none;
  border: 1px solid #cdeae6;
  display: block;
  margin: 0 auto;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--color-pearl-aqua-very-light);
  color: #3f8f87;
  font-weight: 700;
}

.knowledge-fallback {
  display: inline-block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.64rem;
}

.knowledge-fallback--detail {
  display: block;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4d8;
  color: #6c5220;
  font-size: 0.85rem;
}

.knowledge-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 12px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.knowledge-detail__meta span + span::before {
  content: "·";
  margin-right: 8px;
}

.knowledge-language {
  margin-bottom: 14px;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--color-border, #d9ddd9);
  border-radius: 9px;
  background: var(--color-surface, #fff);
}

.knowledge-detail__reference {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  color: var(--color-primary, #246b64);
  font-weight: 700;
  text-decoration: none;
}

.knowledge-detail > .knowledge-readonly {
  margin-top: 2px;
}

/* ---- Formular-Dialoge ---- */

.form-dialog {
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  width: min(560px, 92vw);
  box-shadow: var(--shadow-panel);
}

.form-dialog::backdrop {
  background: rgba(28, 26, 27, 0.45);
}

.form-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.form-dialog__form h2 {
  font-size: var(--fs-h2);
}

.form-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.form-field--checkbox label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--color-text-primary);
}



.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}

.form-grid .form-field--full {
  grid-column: 1 / -1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Bugfix: `display: flex` hier überschreibt sonst das `[hidden]`-Attribut
   (dessen UA-Regel `[hidden]{display:none}` von jeder Autoren-Regel mit
   explizitem `display` geschlagen wird) – betrifft z. B. das per JS ein-/
   ausgeblendete Datumsfeld im mobilen Erfassen-Sheet (mobileCapture.js). */
.form-field[hidden] {
  display: none;
}

.form-field label {
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem var(--space-3);
  background: var(--color-surface-card);
  font-family: inherit;
}

.form-field textarea {
  resize: vertical;
  min-height: 64px;
}

.form-field--tall-text textarea {
  min-height: 128px;
}

.form-error {
  color: var(--color-signal-review);
  font-size: var(--fs-body-sm);
  min-height: 1.2em;
}

.form-hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---- Dialog: kleine Bestätigungen (z. B. Event ohne Datum) ---- */

.confirm-dialog {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  width: min(420px, 92vw);
  box-shadow: var(--shadow-panel);
}

.confirm-dialog::backdrop {
  background: rgba(28, 26, 27, 0.45);
}

.confirm-dialog p {
  font-size: var(--fs-body-sm);
}

/* ---- Mobile-IA: Heute-Screen (siehe mobileHeute.js) ---- */

.mobile-heute {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-heute__fixed-header {
  flex: 0 0 auto;
  background: var(--color-surface-app);
}

.mobile-heute__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}

.mobile-placeholder {
  color: var(--color-lilac-ash);
  font-size: var(--fs-body-sm);
  padding: var(--space-2) 0;
}

.mobile-section-title {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-pearl-aqua);
  margin: var(--space-4) 0 var(--space-2);
}

.mobile-section-title--muted {
  color: var(--color-text-muted);
}

.mobile-heute__date-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.mobile-heute__date-btn {
  appearance: none;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  min-width: 0;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-text-primary);
  text-align: left;
}

.mobile-heute__today-label {
  flex-shrink: 0;
}

.mobile-heute__date-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-heute__date-chevron {
  flex-shrink: 0;
  color: var(--color-pearl-aqua);
}

.mobile-weather-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 36px;
  background: var(--color-surface-card);
  border-radius: var(--radius-pill);
  padding: 0;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.mobile-weather-chip__icon {
  transform: translate(-5px, -2px);
}

.mobile-weather-chip__temperature {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 2px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}

.mobile-heute__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mobile-heute__week-align {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  position: relative;
  top: -14px;
}

.mobile-heute__week-spacer {
  visibility: hidden;
  flex-shrink: 0;
}

.mobile-heute__week-label {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

/* Begrenzt auf eine feste Höhe (statt mit dem Seiteninhalt mitzuwachsen) und
   scrollt bei Bedarf ausschließlich selbst – das Tagesbriefing darüber
   bleibt an seiner Stelle stehen (Kundenvorgabe). */
.mobile-focus-list {
  max-height: 38vh;
  overflow-y: auto;
  margin-bottom: var(--space-2);
}

/* Kundenwunsch: bei abgeschlossenem Tag liegt ein großer, leicht schräger
   "Geschlossen"-Stempel über den Fokus-Karten – wie ein Stempel auf einem
   abgezeichneten Blatt Papier. overflow:hidden stellt sicher, dass der
   Stempel den Bereich darüber (Kopfzeile, Tagesbriefing-Vorschau,
   Abschnittstitel) auch bei kurzen Kartenlisten nie überragt. */
.mobile-heute__focus-wrap {
  position: relative;
  overflow: hidden;
}

/* Garantiert genug Fläche für einen gut lesbaren Stempel, auch wenn an einem
   abgeschlossenen Tag nur ein/kein Ereignis in der Liste steht (sonst würde
   der Stempel per object-fit:contain auf Briefmarkengröße schrumpfen). */
.mobile-heute__focus-wrap--closed {
  min-height: 230px;
}

.mobile-heute__closed-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: var(--space-4);
}

/* mask-size:contain (statt einer festen Breite) skaliert den Stempel auf die
   tatsächlich verfügbare Fläche herunter – bei wenigen/keinen Ereignissen
   bleibt er dadurch immer vollständig sichtbar, statt am unteren Rand
   abgeschnitten zu werden. Farbe entspricht dem Titel "Heute im Fokus"
   (.mobile-section-title) statt des im SVG hinterlegten Schwarz. */
.mobile-heute__closed-stamp-icon {
  width: 100%;
  height: 100%;
  background-color: var(--color-pearl-aqua);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 3px 4px rgba(28, 26, 27, 0.28));
  /* Drehpunkt liegt am gezeichneten Nagel/Öse oben im Icon (nicht die Mitte) –
     das Schild soll wie an einer Schnur aufgehängt schwingen. */
  transform-origin: 44% 15%;
  animation: mobile-heute-stamp-sway 2.4s ease-in-out both;
}

/* Kundenwunsch: das Schild soll noch leicht nachschwingen, als hätte ein
   schwacher Windstoß (wie von einer zufallenden Tür) es angestoßen – ein
   auslaufendes Pendeln statt einer Dauerschleife, das bei -9deg zur Ruhe
   kommt (dem bisherigen festen Kippwinkel). */
@keyframes mobile-heute-stamp-sway {
  0% { transform: rotate(-9deg); }
  8% { transform: rotate(-15deg); }
  22% { transform: rotate(-4deg); }
  36% { transform: rotate(-12deg); }
  50% { transform: rotate(-6.5deg); }
  64% { transform: rotate(-10deg); }
  78% { transform: rotate(-8.2deg); }
  90% { transform: rotate(-9.4deg); }
  100% { transform: rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-heute__closed-stamp-icon {
    animation: none;
    transform: rotate(-9deg);
  }
}

.mobile-focus-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-card);
}
/* Heute und Zukunft beziehen Kartenrand und Icon aus derselben zentralen
   Demand-Farbskala. So kann insbesondere Neutral nicht mehr auf die ältere
   Reifegradfarbe zurückfallen. */
.mobile-focus-card--demand-strong-down { border-left-color: var(--color-demand-strong-down); }
.mobile-focus-card--demand-down { border-left-color: var(--color-demand-down); }
.mobile-focus-card--demand-neutral { border-left-color: var(--color-demand-neutral); }
.mobile-focus-card--demand-up { border-left-color: var(--color-demand-up); }
.mobile-focus-card--demand-strong-up { border-left-color: var(--color-demand-strong-up); }
.mobile-focus-card--demand-unknown { border-left-color: var(--color-demand-unknown); }

/* Vorbei/gestartet – kleiner und blasser statt
   ganz zu verschwinden. */
.mobile-focus-card--past {
  opacity: 0.55;
  padding: var(--space-1) var(--space-3);
}

/* Task-Statusfarben (Kundenvorgabe 27.08.2026, gültig für alle Screens):
   dieselben Farbcodes wie bei Ereignissen (siehe .mobile-focus-card--demand-*
   oben), über js/utils/taskStatus.js#taskStatusCardModifier() zugewiesen.
   `sand` ist keine Demand-Farbe, sondern derselbe Ton wie das "Heute"-Tag
   (in_progress, auf Nachfrage bestätigt) – kein neuer Farbwert, nur ein
   bereits vorhandener Token an anderer Stelle wiederverwendet. */
.mobile-focus-card--task-status-unknown { border-left-color: var(--color-demand-unknown); }
.mobile-focus-card--task-status-neutral { border-left-color: var(--color-demand-neutral); }
.mobile-focus-card--task-status-sand { border-left-color: var(--color-sand); }
.mobile-focus-card--task-status-strong-up { border-left-color: var(--color-demand-strong-up); }
.mobile-focus-card--task-status-down { border-left-color: var(--color-demand-down); }

.mobile-focus-card--task-done {
  opacity: 0.55;
}

.mobile-focus-card--task-done .mobile-focus-card__title {
  text-decoration: line-through;
}

.mobile-focus-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-focus-card__title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.mobile-focus-card__demand {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.mobile-focus-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 5px;
}

.mobile-briefing-preview {
  appearance: none;
  display: block;
  width: 100%;
  border: none;
  background: var(--color-surface-card);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-2);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-align: left;
}

.mobile-briefing-preview:focus-visible {
  outline: 2px solid var(--color-pearl-aqua);
  outline-offset: 2px;
}

.mobile-briefing-preview__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  font-size: var(--fs-body-sm);
}

.mobile-link-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 800;
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
}

.mobile-heute__closed-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- Mobile-IA: Erfassen-Sheet (siehe mobileCapture.js) ----
   Eigenständiges Smartphone-Formular als Bottom Sheet. Überschreibt
   dafür die native <dialog>-Zentrierung, um stattdessen am unteren Rand
   anzudocken. */
.mobile-capture-dialog {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: min(100%, 480px);
  max-width: 480px;
  max-height: 88vh;
  max-height: 88dvh;
  border: none;
  border-radius: 20px 20px 0 0;
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right))
    calc(var(--space-5) + env(safe-area-inset-bottom))
    max(var(--space-4), env(safe-area-inset-left));
  background: var(--color-surface-app);
  box-shadow: var(--shadow-panel);
  overflow-y: auto;
}

.mobile-capture-dialog::backdrop {
  background: rgba(28, 26, 27, 0.45);
}

/* Beobachtungen brauchen mehr Schreibfläche als die übrigen Schnellformen.
   Das Sheet darf dafür fast bis zum oberen Bildschirmrand wachsen. */
.mobile-capture-dialog[data-mode="beobachtung"] {
  max-height: 96vh;
  max-height: 96dvh;
}

#mc-field-text {
  min-height: 240px;
  resize: vertical;
}

#mi-field-description {
  min-height: 128px;
  resize: vertical;
}

.mobile-capture-dialog__handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  margin: 0 auto var(--space-3);
}

.mobile-capture-dialog__title {
  font-size: var(--fs-h2);
  margin: 0;
}

.mobile-capture-dialog__header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  background: var(--color-surface-app);
  border-bottom: 1px solid var(--color-border);
}

.mobile-capture-dialog__back {
  appearance: none;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-text-primary);
}

.mobile-capture-dialog__back[hidden] {
  display: none;
}

.mobile-capture-selection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-capture-selection[hidden] {
  display: none;
}

.mobile-capture-selection__intro {
  margin: -4px 0 var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

.mobile-choice-card {
  appearance: none;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-card-muted);
  color: var(--color-text-primary);
  text-align: left;
}

.mobile-choice-card__icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

.mobile-choice-card--knowledge .mobile-choice-card__icon {
  box-sizing: border-box;
  border: 1px solid #cdeae6;
  background: var(--color-pearl-aqua-very-light);
  color: #3f8f87;
}

.mobile-choice-card__text {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-choice-card__text strong,
.mobile-choice-card__text > span {
  display: block;
}

.mobile-choice-card__text strong {
  font-size: var(--fs-body);
  font-weight: 800;
}

.mobile-choice-card__text > span {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.mobile-choice-card__chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.mobile-choice-card--disabled {
  opacity: 0.45;
  cursor: default;
}

.mobile-choice-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: #ffffff;
  font-size: 0.6rem;
}

.mobile-capture-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-capture-form[hidden] {
  display: none;
}

.mobile-capture-form__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-capture-form__details[hidden] {
  display: none;
}

.mobile-capture-compat {
  display: none !important;
}

/* Ältere, noch zwischengespeicherte JS-Versionen setzen diesen Bereich
   beim Öffnen auf hidden. Im aktuellen Formular bleibt er stets sichtbar. */
#mc-details[hidden] {
  display: flex;
}

.mobile-capture-form__submit {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--fs-body);
}

.mobile-capture-form__actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: var(--space-2);
  width: min(100%, 480px);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right))
    calc(var(--space-3) + env(safe-area-inset-bottom))
    max(var(--space-4), env(safe-area-inset-left));
  background: var(--color-surface-app);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 16px rgba(36, 36, 38, 0.08);
}

.mobile-capture-form__actions .btn {
  flex: 1 1 0;
}

.mobile-capture-form__actions .mobile-capture-form__submit {
  width: auto;
}

.mobile-capture-form--fixed-action {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.mobile-capture-form__chip-label {
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-1);
}

.mobile-capture-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mobile-photo-action {
  appearance: none;
  border: 1px dashed var(--color-border-strong);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

.mobile-photo-action__label {
  font-size: var(--fs-body-sm);
  font-weight: 700;
}

.mobile-photo-action__status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-chip {
  appearance: none;
  background: var(--color-surface-card-muted);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-chip.is-active {
  background: var(--color-pearl-aqua);
  /* Weiße Beschriftung/Icon auf Pearl Aqua (Kundenvorgabe). */
  color: var(--color-text-on-dark);
}

.mobile-capture-dialog__cancel {
  appearance: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: center;
  padding: var(--space-3) 0 0;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

/* ---- Drill-downs (siehe mobileDetail.js) ---- */
.mobile-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.mobile-detail--event {
  gap: 0;
  padding-bottom: 0;
}

/* Tagesbriefing-Textfelder fügen sich auf Mobilgeräten in den Screen ein,
   statt wie ungestylte Browser-Textfelder auf der Oberfläche zu liegen. */
.mobile-detail .day-briefing-textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-app);
  resize: vertical;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard);
}

.mobile-detail .day-briefing-textarea:focus {
  outline: none;
  border-color: var(--color-pearl-aqua);
  box-shadow: 0 0 0 3px var(--color-pearl-aqua-very-light);
}

.mobile-detail__title {
  font-size: var(--fs-h2);
}

.mobile-event-detail__scroll > .mobile-detail__title {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 var(--space-3);
  font-size: 1.25rem;
  line-height: 1.3;
}

.mobile-event-detail__scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) 0 var(--space-4);
}

.mobile-detail__actions {
  display: flex;
  gap: var(--space-2);
}

.mobile-detail__actions .btn {
  flex: 1;
}

.mobile-detail__delete {
  appearance: none;
  background: transparent;
  border: none;
  width: auto;
  text-align: center;
  padding: var(--space-2) 0;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-danger);
}

.mobile-event-detail__edit {
  width: 100%;
  justify-content: center;
}

.mobile-detail__secondary-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.mobile-detail__secondary-action {
  appearance: none;
  border: none;
  background: transparent;
  padding: var(--space-2) 0;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.mobile-event-progress-row,
.mobile-event-demand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-event-progress {
  flex: 1 1 auto;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card-muted);
}

.mobile-event-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.mobile-event-progress__value {
  flex: 0 0 auto;
  font-size: var(--fs-body-sm);
}
/* Basis der dezenten Icon-Kurzlinks in der Abschluss-Infobox. */
.mobile-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  color: #ffffff;
  flex-shrink: 0;
}

/* Neutrale Variante von .status-badge (siehe components.css weiter oben)
   für Eigenschaften, die keinen eigenen Status ausdrücken, aber optisch
   genauso als umrandetes Label erscheinen sollen (Ereignisart, Sichtbarkeit
   in der mobilen Ereignis-Detailansicht). */
.status-badge--neutral {
  background: var(--color-surface-card-muted);
  color: var(--color-text-muted);
}

.mobile-detail__primary-action {
  appearance: none;
  border: none;
  width: 100%;
  background: var(--color-shadow-grey);
  color: #ffffff;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-weight: 800;
  font-size: var(--fs-body);
  margin-top: var(--space-2);
}

.mobile-detail__primary-action--disabled {
  opacity: 0.4;
}

/* ---- Mobile-IA: Listen-Tab (Screen 7) + Inbox-Discovery (Screen 8),
   Mobile-Storyboard_v1.0 ---- */

.mobile-listen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-listen__fixed-header {
  flex: 0 0 auto;
  background: var(--color-surface-app);
}

.mobile-listen__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.mobile-listen__header--knowledge {
  justify-content: flex-start;
  gap: 4px;
}

.mobile-listen__knowledge-back {
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-height: 44px;
  margin-left: -10px;
  padding: 0;
  background: transparent;
  color: var(--color-text-primary);
}

.mobile-choice-screen__close {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-text-primary);
}

.mobile-listen__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-listen__heading-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-surface-card);
}

.mobile-listen__header-spacer {
  flex: 0 0 44px;
  width: 44px;
}

.mobile-listen__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.mobile-listen--selection {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  background: rgba(28, 26, 27, 0.45);
}

.mobile-choice-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right))
    calc(var(--mobile-tabbar-height) + var(--mobile-tabbar-bottom-offset) + var(--space-2))
    max(var(--space-4), env(safe-area-inset-left));
  border-radius: 20px 20px 0 0;
  background: var(--color-surface-app);
  box-shadow: var(--shadow-panel);
  box-sizing: border-box;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-choice-screen__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mobile-choice-screen__title {
  margin: 0;
  font-size: var(--fs-h2);
}

.mobile-choice-screen__intro {
  margin: 4px 0 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

.mobile-inbox__csv-btn {
  appearance: none;
  border: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.mobile-listen-segmented {
  display: flex;
  background: var(--color-pearl-aqua-light);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin: var(--space-3) 0;
}

.mobile-listen-segmented__btn {
  appearance: none;
  border: none;
  background: transparent;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-2) 2px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.mobile-listen-segmented__btn.is-active {
  background: var(--color-shadow-grey);
  color: #ffffff;
  font-weight: 800;
}

.mobile-listen-segmented__badge {
  background: var(--color-danger);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
}

.mobile-inbox__meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.mobile-inbox {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mobile-inbox__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}

.mobile-inbox__import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-sage-very-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
}

.mobile-inbox__import-summary-close {
  appearance: none;
  border: none;
  background: transparent;
  flex-shrink: 0;
  color: var(--color-text-muted);
  display: flex;
}

/* Kartenstapel: feste Höhe (statt mit dem Inhalt mitzuwachsen), damit die
   Geste-Legende (links/rechts/oben) und der Tiefeneffekt der Hintergrund-
   karten immer konsistent sitzen. */
.mobile-discovery-stack {
  position: relative;
  height: min(56vh, 420px);
  margin: var(--space-2) 0;
}

.mobile-discovery-stack__legend {
  position: absolute;
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.mobile-discovery-stack__legend--dismiss {
  left: 2px;
  top: 44%;
  color: var(--color-danger);
}

.mobile-discovery-stack__legend--accept {
  right: 2px;
  top: 44%;
  color: var(--color-reifegrad-100);
}

.mobile-discovery-stack__legend--dismiss,
.mobile-discovery-stack__legend--accept {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mobile-discovery-stack__legend-text {
  writing-mode: vertical-rl;
}

.mobile-discovery-stack__legend-text--reverse {
  transform: rotate(180deg);
}

.mobile-discovery-stack__legend-arrow {
  writing-mode: horizontal-tb;
  font-size: 0.85rem;
  line-height: 1;
}

.mobile-discovery-stack__legend--park {
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  color: var(--color-signal-review);
}

.mobile-discovery-card-shadow {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 22px;
  height: calc(100% - 40px);
  background: var(--color-surface-card);
  border-radius: 20px;
  box-shadow: var(--shadow-panel);
}

.mobile-discovery-card-shadow--2 {
  transform: rotate(3deg) scale(0.94);
  opacity: 0.55;
}

.mobile-discovery-card-shadow--1 {
  transform: rotate(-2deg) scale(0.97);
  opacity: 0.8;
}

.mobile-discovery-card {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 14px;
  height: calc(100% - 32px);
  background: var(--color-surface-card);
  border-radius: 20px;
  box-shadow: var(--shadow-panel);
  padding: var(--space-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.mobile-discovery-card__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mobile-discovery-card__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.mobile-discovery-card__meta {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.mobile-discovery-card__demand-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.mobile-discovery-card__demand-box--positive {
  background: var(--color-reifegrad-100-bg);
  color: var(--color-reifegrad-100);
}

.mobile-discovery-card__demand-box--negative {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.mobile-discovery-card__demand-box--neutral {
  background: var(--color-surface-card-muted);
  color: var(--color-text-muted);
}

.mobile-discovery-card__demand-select {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: inherit;
  flex: 1;
}

.mobile-discovery-card__reason {
  font-size: var(--fs-body-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.mobile-discovery-card__info-link {
  font-size: var(--fs-caption);
  margin-bottom: var(--space-2);
}

.mobile-discovery-card__footer {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-discovery-actions {
  padding-top: var(--space-2);
}

.mobile-discovery-actions__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-2);
}

.mobile-discovery-actions__btn {
  appearance: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.mobile-discovery-actions__btn--dismiss {
  width: 52px;
  height: 52px;
  border: 2px solid var(--color-danger-bg);
  color: var(--color-danger);
}

.mobile-discovery-actions__btn--park {
  width: 44px;
  height: 44px;
  margin-top: 4px;
  border: 2px solid var(--color-signal-review-bg);
  color: var(--color-signal-review);
}

.mobile-discovery-actions__btn--accept {
  width: 52px;
  height: 52px;
  border: 2px solid var(--color-reifegrad-100-bg);
  color: var(--color-reifegrad-100);
}

.mobile-discovery-actions__caption {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* ---- Idee-MVP: Inbox-Typfilter + Idee-Karte (Screen 8,
   Mobile-Storyboard_v1.3) ---- */

.mobile-inbox__type-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.mobile-inbox__type-filter-btn {
  appearance: none;
  border: none;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.mobile-inbox__type-filter-btn--all {
  width: auto;
  padding: 0 var(--space-3);
  font-weight: 800;
  font-size: var(--fs-caption);
}

.mobile-inbox__type-filter-btn.is-active {
  background: var(--color-shadow-grey);
  color: #ffffff;
}

.mobile-discovery-card__type-icon {
  flex-shrink: 0;
}

.mobile-discovery-card__type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-pearl-aqua-light);
  color: var(--color-text-primary);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.mobile-idea-card__pitch {
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

/* Bildanhang auf der Inbox-Karte: ein schmaler Streifen unter der
   Beschreibung. Die Höhe ist bewusst fest und niedrig – die Karte soll ihre
   Proportionen behalten, egal ob das Foto quer oder hoch aufgenommen wurde,
   und der Text darf nie nach unten aus der Karte gedrängt werden. */
.mobile-idea-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 5.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-card-muted);
  cursor: zoom-in;
  margin-bottom: var(--space-3);
}

.mobile-idea-card__thumb[disabled] {
  cursor: default;
}

.mobile-idea-card__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-idea-card__thumb-hint {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  /* Eigener, undurchsichtiger Grund: der Hinweis liegt auf einem beliebigen
     Foto und muss auch über einer hellen Stelle lesbar bleiben. */
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
}

/* Vergrößerte Ansicht eines Bildanhangs (components/imageLightbox.js). */
.image-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.92);
}

.image-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.92);
}

/* Nur im geöffneten Zustand ein Flex-Container. Auf dem Grundselektor würde
   `display` die UA-Regel `dialog:not([open]) { display: none }` überschreiben
   und das geschlossene Overlay sichtbar lassen. */
.image-lightbox[open] {
  display: flex;
  /* Kein Slide-up (der Betrachter ist kein Sheet), aber auch kein harter
     Schnitt: ein kurzes Aufblenden bindet ihn an das angetippte Bild. */
  animation: image-lightbox-in 160ms ease-out;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

@keyframes image-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .image-lightbox[open] { animation: none; }
}

.image-lightbox__image {
  max-width: 100%;
  /* Lässt oben und unten Platz für Schließen-Knopf und Bildunterschrift. */
  max-height: 78dvh;
  object-fit: contain;
}

.image-lightbox__caption {
  color: #ffffff;
  font-size: var(--fs-body-sm);
  padding: 0 var(--space-4);
  text-align: center;
}

.image-lightbox__close {
  position: absolute;
  top: max(var(--space-3), env(safe-area-inset-top));
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
}

/* ---- Mobile-IA: Listen-Tab, Segment "Event-Liste" (Screen 7,
   Mobile-Storyboard_v1.1) ---- */

.mobile-eventlist {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mobile-eventlist-search {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-text-muted);
}

.mobile-eventlist-search__icon {
  flex-shrink: 0;
}

.mobile-eventlist-search__input {
  appearance: none;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

/* Clear-Button (Kundenwunsch): erscheint nur, solange das Suchfeld einen
   Wert trägt (siehe mobileSearchField.js/mobileZukunft.js), damit die Suche
   sich per Tap zurücksetzen lässt, ohne den Text erst zu markieren. */
.mobile-eventlist-search__clear {
  appearance: none;
  border: none;
  background: var(--color-surface-card-muted);
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-eventlist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}

/* "Meine Tasks" (docs/task-v1-technical-design.md Abschnitt 7.3): einzige
   Stelle in der App mit einer nutzergesteuerten Sortierung, deshalb neue,
   schlichte Klasse statt eines bestehenden Filter-Bausteins. */
.mobile-task-list__sort-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.mobile-task-list__sort {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.35rem var(--space-2);
  background: var(--color-surface-card);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.mobile-eventlist-chip {
  appearance: none;
  border: none;
  background: var(--color-pearl-aqua-light);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}

.mobile-eventlist-chip.is-active {
  background: var(--color-pearl-aqua-very-light);
  color: var(--color-reifegrad-100);
}

.mobile-eventlist-rows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-2);
}

.mobile-eventlist-row {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.mobile-eventlist-row:last-child {
  border-bottom: none;
}

.mobile-eventlist-row__main {
  flex: 1;
  min-width: 0;
}

.mobile-eventlist-row__title {
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-eventlist-row__meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.mobile-eventlist-row__demand,
.mobile-eventlist-row__chevron {
  flex-shrink: 0;
  color: var(--color-border-strong);
}

.mobile-eventlist-row__demand {
  color: var(--color-text-muted);
}

/* ---- Archiv (Mobile-Storyboard_v1.4): Typ-Icon je Zeile + Hervorhebung für
   "Klärung offen" (Kundenvorgabe: hervorgehoben und zuerst angezeigt) ---- */

.mobile-eventlist-row__type-badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--color-surface-card-muted);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-eventlist-row--klaeren {
  border-left: 3px solid var(--color-signal-review);
  padding-left: var(--space-2);
  margin-left: calc(-1 * var(--space-2) - 3px);
}

.mobile-eventlist-chip__icon {
  margin-right: 3px;
  vertical-align: -2px;
}

/* ---- Idee-MVP: Ideen-Pool (Screen 10, Mobile-Storyboard_v1.3) ---- */

.mobile-idea-pool-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-idea-pool-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.mobile-idea-pool-row:last-child {
  border-bottom: none;
}

.mobile-idea-pool-row__main {
  appearance: none;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  text-align: left;
}

.mobile-idea-pool-row__title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-idea-pool-row__erfasser {
  flex-shrink: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-idea-pool-row__star {
  appearance: none;
  border: none;
  background: transparent;
  flex-shrink: 0;
  color: var(--color-lilac-ash);
  padding: var(--space-2) 0 var(--space-2) var(--space-2);
}

.mobile-idea-pool-row__star.is-selected {
  color: var(--color-signal-review);
}

/* Gemeinsame Kartenform für mobile Listenübersichten. Der linke Rand trägt
   wie auf Heute/Zukunft die fachliche Farbcodierung; rechts stehen ein oder
   mehrere kompakte Status-/Typ-Icons. */
.mobile-overview-card {
  box-sizing: border-box;
  width: 100%;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.mobile-eventlist-row.mobile-overview-card {
  padding: var(--space-2) var(--space-3);
  border-bottom-color: var(--color-border);
}

.mobile-idea-pool-row.mobile-overview-card {
  padding: var(--space-2) var(--space-3);
  border-bottom-color: var(--color-border);
}

.mobile-overview-card--review { border-left-color: var(--color-signal-review); }
.mobile-overview-card--complete { border-left-color: var(--color-reifegrad-100); }
.mobile-overview-card--roster { border-left-color: var(--color-lilac-ash); }

/* Task-Statusfarben auf Listenzeilen (Archiv, "Meine Tasks"): `.mobile-
   overview-card`s eigenes Kurzform-`border` oben setzt `border-left-color`
   ebenfalls und stand bei gleicher Spezifität *nach* den allgemeinen
   `.mobile-focus-card--task-status-*`-Regeln (siehe weiter oben) – die
   Zeilen blieben deshalb grau, egal welcher Status. Der kombinierte Selektor
   hier hat höhere Spezifität und gewinnt unabhängig von der Reihenfolge im
   File, genau wie schon bei .mobile-daydetail-event-card weiter unten. */
.mobile-overview-card.mobile-focus-card--task-status-unknown { border-left-color: var(--color-demand-unknown); }
.mobile-overview-card.mobile-focus-card--task-status-neutral { border-left-color: var(--color-demand-neutral); }
.mobile-overview-card.mobile-focus-card--task-status-sand { border-left-color: var(--color-sand); }
.mobile-overview-card.mobile-focus-card--task-status-strong-up { border-left-color: var(--color-demand-strong-up); }
.mobile-overview-card.mobile-focus-card--task-status-down { border-left-color: var(--color-demand-down); }

/* Auf der Roster-Seite ersetzt bewusster Leerraum das dort nicht benötigte
   Archiv-Suchfeld und hält den Einstieg in die Kartenliste optisch ruhig. */
.mobile-roster-list__rows {
  margin-top: var(--space-7);
}

.mobile-overview-card__icons {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.mobile-overview-card__icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--color-surface-card-muted);
  color: var(--color-text-muted);
}

.mobile-overview-card__icon--complete {
  color: var(--color-reifegrad-100);
}

.mobile-overview-card__icon--dismissed {
  color: var(--color-danger);
}

.mobile-idea-pool-row__main {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  padding: 0;
}

.mobile-idea-pool-row__meta {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-overview-card__icon.mobile-idea-pool-row__star {
  padding: 0;
}

/* ---- Idee-MVP: Ideendetailansicht (Screen 10a, Mobile-Storyboard_v1.3) ---- */

.mobile-idea-detail__files-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.mobile-idea-detail__files-col {
  flex: 1;
  min-width: 0;
}

.mobile-idea-detail__files-label {
  font-size: var(--fs-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.mobile-idea-detail__file-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-idea-detail__file-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-pearl-aqua);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-idea-detail__file-empty {
  font-size: var(--fs-body-sm);
  color: var(--color-lilac-ash);
}

.mobile-idea-detail__file-input {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  width: 100%;
}

/* Anhang der Idee: Vorschau in der Erfassung und Anzeige im Detail. Das
   native <input type="file"> bleibt in beiden Fällen verborgen – seine
   Darstellung lässt sich nicht gestalten und passt nicht zu den übrigen
   Feldern des Sheets. */
/* Höhere Spezifität als `.form-field input`, sonst gewinnen dessen Rahmen
   und Innenabstand über das Verstecken. */
.form-field .mobile-attachment__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mobile-attachment__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
}

.mobile-attachment__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-card-muted);
}

.mobile-attachment__thumb {
  width: 3rem;
  height: 3rem;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
}

.mobile-attachment__thumb--file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.mobile-attachment__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-attachment__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.mobile-idea-detail__attachment {
  display: block;
}

.mobile-idea-detail__attachment-image {
  display: block;
  width: 100%;
  /* Begrenzt, damit ein Hochformat nicht den ganzen Screen füllt, aber ohne
     Beschnitt: der Anhang ist ein Beleg und soll ganz zu sehen sein. */
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
}

.mobile-idea-detail__attachment-file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-pearl-aqua);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-idea-detail__link-input {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.35rem var(--space-2);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  background: var(--color-surface-card);
}

.mobile-idea-detail__select-row {
  appearance: none;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-card-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.mobile-idea-detail__select-row .icon {
  color: var(--color-lilac-ash);
}

.mobile-idea-detail__select-row.is-selected .icon {
  color: var(--color-signal-review);
}

/* ---- Mobile-IA: Tag-Detail offen/abgeschlossen + Tagesabschluss-Screen
   (Mobile-Storyboard_v1.2) ---- */

.mobile-icon-btn--sm {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--color-surface-card);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-card);
}
.mobile-daydetail-event-card:not(:last-child) {
  margin-bottom: var(--space-2);
}

/* Die gemeinsame Overview-Karte setzt ihren vollständigen Rahmen später als
   die Fokus-Modifier. In der Tagesdetailansicht muss deshalb der fachliche
   Demand-Rand gezielt nachgezogen werden, damit Rand und Icon übereinstimmen. */
.mobile-daydetail-event-card.mobile-focus-card--demand-strong-down { border-left-color: var(--color-demand-strong-down); }
.mobile-daydetail-event-card.mobile-focus-card--demand-down { border-left-color: var(--color-demand-down); }
.mobile-daydetail-event-card.mobile-focus-card--demand-neutral { border-left-color: var(--color-demand-neutral); }
.mobile-daydetail-event-card.mobile-focus-card--demand-up { border-left-color: var(--color-demand-up); }
.mobile-daydetail-event-card.mobile-focus-card--demand-strong-up { border-left-color: var(--color-demand-strong-up); }
.mobile-daydetail-event-card.mobile-focus-card--demand-unknown { border-left-color: var(--color-demand-unknown); }

.mobile-dienstplan-card {
  appearance: none;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-pearl-aqua-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.mobile-dienstplan-card__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
}

.mobile-dienstplan-card__text {
  flex: 1;
  min-width: 0;
}

.mobile-dienstplan-card__title {
  display: block;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.mobile-dienstplan-card__subtitle {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-dienstplan-card__link {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
}

.mobile-roster-detail {
  gap: var(--space-3);
}

.mobile-roster-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card-muted);
}

.mobile-roster-meta__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--color-surface-card);
}

.mobile-roster-meta__text {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-roster-meta__text strong,
.mobile-roster-meta__text span {
  display: block;
}

.mobile-roster-meta__text strong {
  font-size: var(--fs-body-sm);
}

.mobile-roster-meta__text span {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-roster-preview {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-card-muted);
}

.mobile-roster-preview--empty {
  border-style: dashed;
}

.mobile-roster-preview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-roster-preview__empty-label {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.mobile-roster-preview__pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
}

.mobile-roster-upload-action {
  appearance: none;
  border: 1px solid var(--color-border-strong);
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
  font-weight: 700;
}

.mobile-daydetail-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--color-signal-review);
}

.mobile-daydetail-closebox {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-pearl-aqua-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

/* Optionaler Umsatz oben; darunter durch eine Trennlinie abgesetzt
   Tagesbewertung und Kurzlinks. Einen Tages-Demand kennt das Modell nicht. */
.mobile-daydetail-closebox__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mobile-daydetail-closebox__row--bottom {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.mobile-daydetail-closebox__umsatz {
  text-align: left;
}

.mobile-daydetail-closebox__label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.mobile-daydetail-closebox__umsatz-value {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--color-text-primary);
}

.mobile-daydetail-closebox__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

.mobile-daydetail-closebox__links {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.mobile-daydetail-readonly-text {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  opacity: 0.85;
}

.mobile-daydetail-closed-pill {
  text-align: center;
  background: var(--color-reifegrad-100-bg);
  color: var(--color-reifegrad-100);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-weight: 800;
  font-size: var(--fs-body);
}

.mobile-daydetail-reopen-link {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: center;
  padding: var(--space-2) 0;
  font-weight: 700;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

/* ---- Mobile-IA: Tagesabschluss-Screen (Screen 3a/9b) ---- */

/* Bugfix: die generische Scroll-Regel ".mobile-stack-screen > .mobile-detail"
   (layout.css) greift hier nicht, da dieser Screen bewusst eine eigene
   Wrapper-Klasse statt .mobile-detail nutzt (eigenes Layout, keine
   dt/dd-Feldliste) – deshalb dieselben Scroll-Eigenschaften hier direkt. */
.mobile-tagesabschluss {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-tagesabschluss__date {
  font-size: var(--fs-h2);
  text-align: center;
}

.mobile-tagesabschluss__count {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.mobile-tagesabschluss__label {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 4px;
}

.mobile-tagesabschluss-obs {
  background: var(--color-pearl-aqua-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.mobile-tagesabschluss-obs__time {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.mobile-tagesabschluss-obs__text {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.mobile-tagesabschluss-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-app);
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.mobile-tagesabschluss-input--textarea {
  min-height: 150px;
  resize: vertical;
}

.mobile-tagesabschluss-rating-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mobile-tagesabschluss-rating-btn {
  appearance: none;
  border: 2px solid transparent;
  background: var(--color-pearl-aqua-light);
  color: var(--color-lilac-ash);
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-tagesabschluss-submit {
  appearance: none;
  border: none;
  width: 100%;
  background: var(--color-pearl-aqua);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-weight: 800;
  font-size: var(--fs-body);
  margin-top: var(--space-2);
}

/* ---- Mobile-IA: Tagesabschlüsse-Liste (Screen 9) ---- */

.mobile-tagesabschluss-row__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.mobile-tagesabschluss-row__umsatz {
  font-weight: 800;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.mobile-tagesabschluss-row__rating-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-pearl-aqua-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* Zentrale Farbskala für gespeicherte Tagesbewertungen und die fünf
   auswählbaren Smileys im Tagesabschluss. */
.rating-color--1 { color: var(--color-rating-1); }
.rating-color--2 { color: var(--color-rating-2); }
.rating-color--3 { color: var(--color-rating-3); }
.rating-color--4 { color: var(--color-rating-4); }
.rating-color--5 { color: var(--color-rating-5); }

.mobile-tagesabschluss-row__rating-icon.rating-color--1,
.mobile-tagesabschluss-rating-btn.rating-color--1.is-active {
  background: var(--color-rating-1-bg);
  border-color: var(--color-rating-1);
  color: var(--color-rating-1);
}

.mobile-tagesabschluss-row__rating-icon.rating-color--2,
.mobile-tagesabschluss-rating-btn.rating-color--2.is-active {
  background: var(--color-rating-2-bg);
  border-color: var(--color-rating-2);
  color: var(--color-rating-2);
}

.mobile-tagesabschluss-row__rating-icon.rating-color--3,
.mobile-tagesabschluss-rating-btn.rating-color--3.is-active {
  background: var(--color-rating-3-bg);
  border-color: var(--color-rating-3);
  color: var(--color-rating-3);
}

.mobile-tagesabschluss-row__rating-icon.rating-color--4,
.mobile-tagesabschluss-rating-btn.rating-color--4.is-active {
  background: var(--color-rating-4-bg);
  border-color: var(--color-rating-4);
  color: var(--color-rating-4);
}

.mobile-tagesabschluss-row__rating-icon.rating-color--5,
.mobile-tagesabschluss-rating-btn.rating-color--5.is-active {
  background: var(--color-rating-5-bg);
  border-color: var(--color-rating-5);
  color: var(--color-rating-5);
}

.mobile-tagesabschluss-row__open-badge {
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--fs-caption);
  background: var(--color-signal-review-bg);
  color: var(--color-signal-review);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* Ohne Offen/Abgeschlossen-Filter (Mobile-Storyboard_v1.5) braucht auch die
   abgeschlossene Zeile ein eigenes Status-Label statt sich implizit aus dem
   aktiven Filter zu ergeben. */
.mobile-tagesabschluss-row__closed-badge {
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--fs-caption);
  background: var(--color-reifegrad-100-bg);
  color: var(--color-reifegrad-100);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* ---- Mobile-IA: Zukunft-Tab (Screen 5, Mobile-Storyboard_v1.6) ---- */

.mobile-zukunft {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-zukunft__fixed-header {
  flex: 0 0 auto;
  background: var(--color-surface-app);
}

.mobile-zukunft__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}

/* Tagesabschluss-Tab (Mobile-Storyboard_v1.5, eigener Hauptnavigationspunkt
   statt Segment in "Listen") – derselbe Fixkopf+Scroll-Aufbau wie
   .mobile-zukunft oben, da #mobile-screen selbst bewusst nicht scrollt. */
.mobile-tagesabschluesse-tab {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-tagesabschluesse-tab__fixed-header {
  flex: 0 0 auto;
  background: var(--color-surface-app);
}

.mobile-tagesabschluesse-tab__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}

/* Dieser Screen scrollt bereits über den äußeren Container. Die generische
   Listenregel darf hier keinen zweiten, selbst nicht scrollbaren Container
   mit `overscroll-behavior: contain` erzeugen – der würde Touch-Gesten auf
   den Karten abfangen, bevor sie den äußeren Scroller erreichen. */
.mobile-tagesabschluesse-tab .mobile-eventlist-rows {
  overflow-y: visible;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: auto;
}

.mobile-zukunft-month-header {
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 2px;
}

.mobile-zukunft-month-header.is-current {
  color: var(--color-pearl-aqua);
}

.mobile-zukunft-month:first-child .mobile-zukunft-month-header {
  margin-top: 0;
}

.mobile-zukunft-day {
  border-radius: var(--radius-sm);
}

.mobile-zukunft-day__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-2) 0 5px;
}

/* Tageskopf als Button statt reinem Text (Mobile-Storyboard_v1.8): Wochentag/
   Datum + Chevron bilden zusammen die klickbare Fläche, die zum Tag-Detail
   führt (siehe mobileZukunft.js#renderDayGroup) – dieselbe Konvention wie der
   Datumsbutton auf "Heute" (mobile-heute__date-btn), nur mit eigener,
   kompakterer Größe passend zur wiederholten Listendarstellung. */
.mobile-zukunft-day__link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mobile-zukunft-day__title {
  min-width: 0;
  margin: 0;
  font-weight: 900;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.mobile-zukunft-day__chevron {
  flex-shrink: 0;
  color: var(--color-pearl-aqua);
}

.mobile-zukunft-day__demand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 58%;
  padding: 2px 7px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-text-muted);
  font-size: 9px;
  line-height: 1.2;
}

.mobile-zukunft-day__demand-symbol {
  flex: 0 0 auto;
  font-weight: 800;
}

.mobile-zukunft-day__demand-label {
  min-width: 0;
  font-weight: 600;
  white-space: normal;
}

/* Die fünf vorbereiteten Tages-Demand-Zustände verwenden dieselben zentralen
   Farbklassen wie die SVG-Indikatoren. Besonders starke Tage behalten ihren
   vorhandenen Hook für die flächige Hervorhebung. */

.mobile-zukunft-day--demand-strong-down,
.mobile-zukunft-day--demand-strong-up {
  padding: 1px var(--space-2) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
}

.mobile-zukunft-day--demand-strong-down { background: var(--color-reifegrad-0-bg); }
.mobile-zukunft-day--demand-strong-up { background: var(--color-reifegrad-100-bg); }

.mobile-focus-card__subtitle {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Zentrale Demand-Farbzuordnung für maskierte SVGs, Textpfeile und Labels.
   Die höhere Spezifität der Icon-Regeln überschreibt lokale graue Defaults,
   ohne Kartenränder, Hintergründe, Größen oder Abstände zu verändern. */
.demand-color--demand-strong-down,
.icon.demand-color--demand-strong-down { color: var(--color-demand-strong-down); }
.demand-color--demand-down,
.icon.demand-color--demand-down { color: var(--color-demand-down); }
.demand-color--demand-neutral,
.icon.demand-color--demand-neutral { color: var(--color-demand-neutral); }
.demand-color--demand-up,
.icon.demand-color--demand-up { color: var(--color-demand-up); }
.demand-color--demand-strong-up,
.icon.demand-color--demand-strong-up { color: var(--color-demand-strong-up); }
.demand-color--demand-unknown,
.icon.demand-color--demand-unknown { color: var(--color-demand-unknown); }

/* Dieselben Farbcodes wie oben, unter eigenem Präfix für Task-Status-Icons
   (js/utils/taskStatus.js#taskStatusColorClass) statt Demand-Effekt. */
.task-status-color--unknown,
.icon.task-status-color--unknown { color: var(--color-demand-unknown); }
.task-status-color--neutral,
.icon.task-status-color--neutral { color: var(--color-demand-neutral); }
.task-status-color--sand,
.icon.task-status-color--sand { color: var(--color-sand); }
.task-status-color--strong-up,
.icon.task-status-color--strong-up { color: var(--color-demand-strong-up); }
.task-status-color--down,
.icon.task-status-color--down { color: var(--color-demand-down); }

/* Alle Dialoge bleiben im Smartphone-App-Modus auf jeder Viewportbreite
   Bottom Sheets und folgen derselben maximalen App-Breite. */
.form-dialog,
.day-briefing-dialog,
.confirm-dialog {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: min(100%, 480px);
  max-width: 480px;
  max-height: 88vh;
  max-height: 88dvh;
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}

#dienstplan-upload-dialog {
  overflow-y: auto;
  box-sizing: border-box;
}

#dienstplan-upload-dialog .form-dialog__form,
#dienstplan-upload-dialog .form-grid {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#dienstplan-upload-dialog .form-grid {
  grid-template-columns: 1fr;
}

#dienstplan-upload-dialog .form-field,
#dienstplan-upload-dialog input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

  /* Native Datumsfelder behalten insbesondere auf iOS trotz `min-width: 0`
     etwas intrinsische Breite für Datum und Kalender-Steuerelement. Bewusst
     Luft zum rechten Rand lassen, ohne das native Date-Picker-Verhalten zu
     verändern. */
  #dienstplan-upload-dialog input[type="date"] {
    display: block;
    inline-size: calc(100% - var(--space-4));
    min-inline-size: 0;
    max-inline-size: calc(100% - var(--space-4));
    align-self: flex-start;
  }
/* ---- Anmeldung ----
   Deckt die Anwendung vollständig ab, solange keine Sitzung besteht, ist aber
   als erster echter App-Screen gestaltet: ruhige Fläche, kein Card-in-Card,
   nur Tokens aus css/tokens.css und die bestehenden .form-field-/.btn-
   Komponenten. Der dezente Aqua-Verlauf oben nimmt die Farbe des Pearl-Aqua-
   Splash auf (siehe .pulse-splash), damit der Übergang nicht hart bricht. */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding:
    calc(env(safe-area-inset-top) + var(--space-6))
    max(env(safe-area-inset-right), var(--space-5))
    calc(env(safe-area-inset-bottom) + var(--space-6))
    max(env(safe-area-inset-left), var(--space-5));
  background-color: var(--color-surface-app);
  background-image: linear-gradient(
    180deg,
    var(--color-pearl-aqua-very-light) 0%,
    var(--color-surface-app) 42%
  );
  background-repeat: no-repeat;
}

.login-screen[hidden] {
  display: none;
}

body.is-signed-out {
  overflow: hidden;
}

.login-form {
  position: relative;
  z-index: 1;
  width: min(23rem, 100%);
  /* Etwas oberhalb der Mitte statt exakt zentriert – ohne Logo oben wirkt
     dead-center zu tief. margin-bottom:auto hält Platz für die Tastatur frei,
     overflow-y auf .login-screen fängt sehr kleine Displays ab. */
  margin: min(16vh, 120px) 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Pfannen-Signatur aus dem Splash, gleiche Position wie dort
   (.pulse-splash__signature): unten mittig, nur angedeutet. Reines
   Dekor – liegt hinter dem Formular und fängt keine Eingaben ab. */
.login-screen__mark {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: 0;
  width: clamp(86px, 24vw, 128px);
  height: auto;
  opacity: 0.12;
  transform: translateX(-50%);
  pointer-events: none;
}

.login-form__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.login-form__title {
  margin: 0;
  font-size: var(--fs-page-title);
  font-weight: 900;
  color: var(--color-text-primary);
}

.login-form__lede {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

/* Größere Touch-Ziele und eine leisere Rahmung als in den dichten
   App-Formularen – hier zählt die Bedienung am Smartphone, nicht die
   Informationsdichte. Beides über vorhandene Tokens. */
.login-form__field input {
  min-height: 44px;
  border-color: var(--color-border);
}

.login-form__password {
  position: relative;
  display: flex;
}

.login-form__password input {
  flex: 1;
  min-width: 0;
  padding-right: 44px;
}

.login-form__reveal {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
}

.login-form__reveal:hover,
.login-form__reveal:focus-visible {
  color: var(--color-text-primary);
}

.login-form__reveal[aria-pressed="true"] {
  color: var(--color-pearl-aqua);
}

/* Sekundäraktion – bewusst leiser als der Anmelden-Button: Textlink-Anmutung,
   kein Container, kleine Schrift, rechtsbündig unter dem Passwortfeld. */
.login-form__forgot {
  align-self: flex-end;
  margin-top: calc(var(--space-2) * -1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 800;
  color: var(--color-pearl-aqua);
}

.login-form__forgot:hover,
.login-form__forgot:focus-visible {
  text-decoration: underline;
}

/* Fester Platz für die Fehlermeldung, damit ein Anmeldefehler das Layout
   nicht springen lässt (login.js blendet #login-error per [hidden] ein/aus).
   Negative Ränder ziehen den reservierten Streifen enger an seine Nachbarn. */
.login-form__error-slot {
  min-height: 1.25em;
  margin-block: calc(var(--space-2) * -1);
}

.login-form__error-slot .form-error {
  min-height: 0;
}

.login-form__submit {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
}

.login-form__submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
}

/* Ladezustand soll sichtbar anders sein als "deaktiviert" (nicht nur ausgegraut). */
.login-form__submit.is-loading {
  opacity: 1;
}

.login-form__submit.is-loading .login-form__submit-label {
  opacity: 0.75;
}

.login-form__submit.is-loading .login-form__submit-spinner {
  display: block;
  animation: mobile-ptr-spin 700ms linear infinite;
}

.login-form__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
  transition: color var(--ease-standard);
}

/* "Passwort vergessen?" hebt diesen Hinweis kurz hervor – er beantwortet die
   Frage bereits (js/components/loginScreen.js). */
.login-form__note.is-highlight {
  color: var(--color-text-primary);
}

/* Autofill nicht in Browser-Gelb, sondern im App-Look darstellen. */
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-card) inset;
  caret-color: var(--color-text-primary);
}

/* Sanfter Anschluss an den Splash: der Inhalt blendet kurz nach oben ein,
   während die Pearl-Aqua-Startschicht darüber ausblendet. Die Pfannen-
   Signatur bleibt an ihrer Splash-Position stehen und blendet nur leise auf.
   Ruhig, nicht verspielt – der Login ist sofort nutzbar. */
@media (prefers-reduced-motion: no-preference) {
  .login-screen:not([hidden]) .login-form > * {
    animation: login-rise-in 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .login-screen:not([hidden]) .login-form > *:nth-child(1) { animation-delay: 40ms; }
  .login-screen:not([hidden]) .login-form > *:nth-child(2) { animation-delay: 80ms; }
  .login-screen:not([hidden]) .login-form > *:nth-child(3) { animation-delay: 120ms; }
  .login-screen:not([hidden]) .login-form > *:nth-child(4) { animation-delay: 150ms; }
  .login-screen:not([hidden]) .login-form > *:nth-child(5) { animation-delay: 175ms; }
  .login-screen:not([hidden]) .login-form > *:nth-child(6) { animation-delay: 195ms; }
  .login-screen:not([hidden]) .login-form > *:nth-child(7) { animation-delay: 215ms; }

  .login-screen:not([hidden]) .login-screen__mark {
    animation: login-mark-in 700ms ease both;
    animation-delay: 200ms;
  }
}

@keyframes login-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes login-mark-in {
  from { opacity: 0; }
  to { opacity: 0.12; }
}

/* Fehlermeldung fehlgeschlagener API-Anfragen. */
.api-error {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  background: var(--color-reifegrad-0-bg);
  color: var(--color-reifegrad-0);
  font-size: var(--fs-caption);
}

.api-error[hidden] {
  display: none;
}

/* --- Serientermine ------------------------------------------------------
   Ein abgesagter Termin bleibt in allen Listen stehen, statt lautlos zu
   verschwinden – wer ihn im Kalender hatte, soll die Absage sehen. Damit er
   sich nicht wie ein stattfindendes Ereignis liest, wird er zurückgenommen
   dargestellt und durchgestrichen; den Titelzusatz "Abgesagt ·" liefert
   utils/format.js, damit auch Vorlesehilfen ihn hören. */
.mobile-focus-card.is-cancelled {
  opacity: 0.6;
}

.mobile-focus-card.is-cancelled .mobile-focus-card__title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Hinweis anstelle von Aktionen, solange Serien nicht bearbeitbar sind. */
.mobile-detail__hint {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-card-muted);
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}

/* Kennzeichnung eines wiederkehrenden Termins. Das Icon läuft in der Textfarbe
   mit, bleibt aber zurückgenommen – es unterscheidet, ohne mit dem
   Demand-Indikator um Aufmerksamkeit zu konkurrieren. */
.mobile-focus-card__series {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  color: var(--color-text-muted);
  vertical-align: middle;
}

.status-badge .icon {
  margin-right: 4px;
  vertical-align: -1px;
}

/* --- Wiederholungsfelder in den Erfassungsformularen --------------------
   Wiederverwendetes Markup, deshalb eine gemeinsame Klasse. Die
   Felder liegen sichtbar abgesetzt, weil sie aus einem Ereignis eine Serie
   machen – das ist keine Nebeneinstellung. */
.capture-recurrence {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.capture-recurrence[hidden] {
  display: none;
}

.capture-recurrence__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

.capture-recurrence__toggle input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--color-pearl-aqua);
}

.capture-recurrence__toggle span,
.capture-recurrence__toggle strong,
.capture-recurrence__toggle small {
  display: block;
}

.capture-recurrence__toggle strong {
  font-size: var(--fs-body-sm);
}

.capture-recurrence__toggle small,
.capture-recurrence__hint {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.capture-recurrence__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-card-muted);
}

.capture-recurrence__fields[hidden] {
  display: none;
}

/* --- Geltungsbereich einer Serienänderung -------------------------------
   `.form-dialog` hat bewusst keinen Innenabstand – den bringt sonst das
   enthaltene `.form-dialog__form` mit. Dieser Dialog ist ein Formular ohne <form>
   (er entscheidet nur, er sendet nichts), deshalb setzt er ihn selbst. */
.series-scope-dialog {
  padding: var(--space-5);
}

/* Nur im geöffneten Zustand `display` setzen: ein geschlossenes <dialog> ist
   ausschließlich über sein `display: none` unsichtbar. Ein `display: flex` auf
   dem Element selbst würde es dauerhaft anzeigen und die Anwendung blockieren. */
.series-scope-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.series-scope__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.series-scope__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  cursor: pointer;
}

.series-scope__option input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--color-pearl-aqua);
}

.series-scope__option strong,
.series-scope__option small {
  display: block;
  font-size: var(--fs-body-sm);
}

/* Ein gesperrter Bereich bleibt sichtbar und nennt seinen Grund – wer ihn
   sucht, soll erfahren warum, statt ihn zu vermissen. */
.series-scope__option.is-blocked {
  cursor: default;
  background: var(--color-surface-card-muted);
}

.series-scope__option.is-blocked strong {
  color: var(--color-text-muted);
}

.series-scope__option small {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
/* ---- Pulse Splash Screen --------------------------------------------
   Liegt als reine Startschicht über Login bzw. App. Der weiche, mehrstufige
   Radialverlauf bleibt vollständig in CSS; nur die Pfannen-Signatur ist ein
   kleines SVG. */
.pulse-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding:
    calc(var(--space-8) + env(safe-area-inset-top))
    max(var(--space-5), env(safe-area-inset-right))
    calc(148px + env(safe-area-inset-bottom))
    max(var(--space-5), env(safe-area-inset-left));
  background-color: var(--color-pearl-aqua);
  background-image: radial-gradient(
    ellipse 82% 64% at 50% 51%,
    #b8ebe4 0%,
    #91d8d1 29%,
    #72c2bc 51%,
    #51a09f 76%,
    #34787a 100%
  );
  opacity: 1;
  transition: opacity var(--pulse-splash-fade-out-ms, 550ms) ease-in-out;
  isolation: isolate;
}

.pulse-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.pulse-splash__quote {
  position: relative;
  z-index: 1;
  max-width: min(84vw, 760px);
  margin: 0;
  color: #fffdf8;
  font-family: var(--font-accent);
  font-size: clamp(3rem, 9vw, 5.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-align: center;
  text-wrap: balance;
  visibility: hidden;
}

.pulse-splash__quote.is-writing {
  visibility: visible;
  -webkit-mask-image: linear-gradient(
    100deg,
    #000 0%,
    #000 47.5%,
    rgba(0, 0, 0, 0.72) 49%,
    transparent 52.5%,
    transparent 100%
  );
  mask-image: linear-gradient(
    100deg,
    #000 0%,
    #000 47.5%,
    rgba(0, 0, 0, 0.72) 49%,
    transparent 52.5%,
    transparent 100%
  );
  -webkit-mask-size: 210% 100%;
  mask-size: 210% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: pulse-splash-write-on var(--pulse-splash-write-on-ms, 2500ms) cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: -webkit-mask-position, mask-position;
}

.pulse-splash__quote.is-fading {
  visibility: visible;
  animation: pulse-splash-fade-in var(--pulse-splash-reduced-fade-ms, 260ms) ease-out both;
}

.pulse-splash__quote.is-written {
  visibility: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.pulse-splash__signature {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  width: clamp(86px, 24vw, 128px);
  height: auto;
  color: #ffffff;
  opacity: 0.18;
  transform: translateX(-50%);
}

@keyframes pulse-splash-write-on {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes pulse-splash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-splash {
    transition: none;
  }

}

/* ---- Bestätigung nach dem Erfassen (js/components/celebration.js) ----
   Liegt über allem, hält aber niemanden auf: Die Fläche fängt einen Tap zum
   Abbrechen ab, verschwindet aber nach knapp zwei Sekunden von selbst. */
.celebration {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
  /* Nur so viel Abdunkelung, dass der Blick auf die Mitte fällt – der
     dahinterliegende Screen bleibt erkennbar, weil die Bestätigung ihn nicht
     ersetzt, sondern nur kurz überlagert. */
  background: rgba(28, 26, 27, 0.42);
  backdrop-filter: blur(2px);
  animation: celebration-in 160ms ease-out;
}

.celebration.is-leaving {
  opacity: 0;
  transition: opacity 260ms ease-in;
}

/* Eigene Größe statt eines Nullpunkts: als Flex-Kind ohne Maße würde das
   Abzeichen darin zusammengedrückt und aus dem Kreis ein Oval. */
.celebration__stage {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
}

.celebration__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-pearl-aqua);
  box-shadow: var(--shadow-panel);
  /* Federnd statt linear: der Überschwung am Ende ist das, was den Moment
     als Belohnung lesbar macht. */
  animation: celebration-badge-pop 520ms cubic-bezier(0.18, 1.5, 0.4, 1) backwards;
}

.celebration__sparks {
  position: absolute;
  inset: 0;
}

.celebration__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--spark-size, 8px);
  height: var(--spark-size, 8px);
  margin: calc(var(--spark-size, 8px) / -2) 0 0 calc(var(--spark-size, 8px) / -2);
  border-radius: var(--radius-pill);
  background: var(--spark-color, var(--color-pearl-aqua));
  animation: celebration-spark 620ms cubic-bezier(0.2, 0.8, 0.3, 1) var(--spark-delay, 0ms) backwards;
  opacity: 0;
}

.celebration__headline {
  margin: var(--space-5) 0 0;
  font-family: var(--font-accent);
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1.1;
  color: var(--color-text-on-dark);
  animation: celebration-text-in 420ms ease-out 120ms backwards;
}

.celebration__note {
  margin: 0;
  max-width: 22rem;
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.86);
  animation: celebration-text-in 420ms ease-out 200ms backwards;
}

@keyframes celebration-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes celebration-badge-pop {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes celebration-spark {
  from { transform: translate(0, 0) scale(0.4); opacity: 1; }
  to { transform: translate(var(--spark-x), var(--spark-y)) scale(1); opacity: 0; }
}

@keyframes celebration-text-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Ohne Bewegung bleibt die Aussage dieselbe: Die Funken entfallen bereits im
   JavaScript, hier hören zusätzlich Pop und Einblenden auf. Der Moment wird
   dadurch ruhig, nicht unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .celebration,
  .celebration__badge,
  .celebration__headline,
  .celebration__note {
    animation: none;
  }

  .celebration.is-leaving {
    transition: none;
  }
}

/* ---- Globaler Bottom-Sheet-Standard (js/components/bottomSheet.js) ---- */
  /* Bewusst `backwards` statt `both`: `both`/`forwards` würde den Endwert
     transform:translateY(0) dauerhaft auf dem Dialog stehen lassen. Ein
     gesetztes transform macht das Element aber zum Containing Block für seine
     position:fixed-Kinder – die am Viewport verankerte Speichern-Leiste des
     Capture-Sheets würde dadurch über das Formular rutschen. `backwards`
     liefert denselben Einfahr-Effekt und lässt danach keinen Transform zurück. */
  .bottom-sheet[open] {
    animation: bottom-sheet-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .bottom-sheet[open]::backdrop {
    animation: bottom-sheet-backdrop-in 280ms ease-out backwards;
  }

  /* Während des Ziehens folgt das Sheet dem Finger ohne Transition, beim
     Loslassen unter der Schwelle federt es weich zurück. */
  .bottom-sheet {
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    touch-action: pan-y;
  }

  .bottom-sheet.is-sheet-dragging {
    transition: none;
    animation: none;
  }

  .bottom-sheet.is-sheet-closing {
    animation: bottom-sheet-slide-down 200ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  .bottom-sheet.is-sheet-closing::backdrop {
    animation: bottom-sheet-backdrop-out 200ms ease-in both;
  }

  /* Automatisch ergänzter Standardgriff für Sheets ohne eigenen (der
     Capture-Dialog bringt seinen eigenen mit). Die vergrößerte Trefferfläche
     per Padding hält die Ziehzone bequem erreichbar, ohne den schmalen
     Strich optisch zu verändern. */
  .sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-border);
  }
@keyframes bottom-sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes bottom-sheet-slide-down {
  from { transform: translateY(var(--sheet-close-from, 0)); }
  to { transform: translateY(100%); }
}

@keyframes bottom-sheet-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bottom-sheet-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Reduzierte Bewegung: Sheets erscheinen und verschwinden ohne Slide. Das
   Drag-to-dismiss bleibt bedienbar, nur die Animation entfällt (bottomSheet.js
   schließt in diesem Fall sofort). */
@media (prefers-reduced-motion: reduce) {
  .bottom-sheet[open],
  .bottom-sheet[open]::backdrop,
  .bottom-sheet.is-sheet-closing,
  .bottom-sheet.is-sheet-closing::backdrop {
    animation: none;
  }

  .bottom-sheet {
    transition: none;
  }
}

/* Bottom Sheets, die kein <dialog> sind (zustandsgesteuertes "Mehr"-Menü,
   siehe attachBottomSheetPanel in js/components/bottomSheet.js). Dieselben
   Vorgaben wie oben – nur ohne die [open]-Selektoren, die es hier nicht gibt. */
.sheet-panel {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-y;
}

.sheet-panel.is-sheet-entering {
  animation: bottom-sheet-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.sheet-panel.is-sheet-dragging {
  transition: none;
  animation: none;
}

.sheet-panel.is-sheet-closing {
  animation: bottom-sheet-slide-down 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Der abdunkelnde Hintergrund blendet mit dem Panel ein. */
.mobile-listen--selection {
  animation: bottom-sheet-backdrop-in 280ms ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-panel,
  .sheet-panel.is-sheet-entering,
  .sheet-panel.is-sheet-closing,
  .mobile-listen--selection {
    animation: none;
    transition: none;
  }
}

/* ---- Pull-to-refresh (js/components/pullToRefresh.js) ----
   Hängt an #app-mobile, wird per JS an die Oberkante des jeweiligen
   Screen-Scrollers gesetzt (`top`). Sichtbarer Weg und Deckkraft steuert der
   Handler über die Custom Properties --ptr-shift / --ptr-opacity /
   --ptr-progress; während des Ziehens bewusst ohne CSS-Transition, damit der
   Indikator dem Finger 1:1 folgt (dezentes Peek). Nur die Zustände
   .is-loading / .is-returning bekommen eine Transition. */
.mobile-ptr {
  position: absolute;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-panel);
  pointer-events: none;
  opacity: var(--ptr-opacity, 0);
  transform: translateX(-50%)
    translateY(calc(-100% - 4px + var(--ptr-shift, 0px)));
}

.mobile-ptr.is-loading,
.mobile-ptr.is-returning {
  transition: transform 200ms ease, opacity 200ms ease;
}

.mobile-ptr.is-loading {
  opacity: 1;
  transform: translateX(-50%) translateY(16px);
}

.mobile-ptr__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-pearl-aqua);
  /* Vor der Schwelle dreht der Ring anteilig mit dem Zug. */
  transform: rotate(calc(var(--ptr-progress, 0) * 280deg));
}

.mobile-ptr.is-armed .mobile-ptr__spinner {
  border-top-color: var(--color-pearl-aqua);
  border-right-color: var(--color-pearl-aqua);
}

.mobile-ptr.is-loading .mobile-ptr__spinner {
  animation: mobile-ptr-spin 700ms linear infinite;
}

@keyframes mobile-ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein vertikaler Weg – der Peek ist hier nur ein Deckkraft-Fade. */
  .mobile-ptr {
    transform: translateX(-50%) translateY(16px);
  }
  .mobile-ptr.is-loading,
  .mobile-ptr.is-returning {
    transition: opacity 150ms linear;
  }
  .mobile-ptr__spinner,
  .mobile-ptr.is-loading .mobile-ptr__spinner {
    animation: none;
    transform: none;
  }
}