/* v934: Postfach – Briefumschlag in der Kopfzeile (wie der runde Installieren-Knopf, 38 px) mit roter Zahl, kurzes
   Blinken bei neuer Post; Ansicht „Postfach“ als eine Karte über die volle Breite. Farben nur aus den App-Tokens, die Zahl
   in festem Dunkelrot (weiße Ziffern 5,6 : 1 in Tag und Nacht). */

/* ---------- Briefumschlag */
header.app-header .app-header-controls .postfach-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  overflow: visible;
  cursor: pointer;
}
header.app-header .app-header-controls .postfach-knopf[hidden] { display: none; }
header.app-header .app-header-controls .postfach-knopf:hover,
header.app-header .app-header-controls .postfach-knopf:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
}
header.app-header .app-header-controls .postfach-knopf.postfach-hat-neue { color: var(--text); }
header.app-header .app-header-controls .postfach-knopf.aktiv {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}
header.app-header .app-header-controls .postfach-knopf svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 35%;
}
header.app-header .app-header-controls .postfach-zahl {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #c62828;
  color: #fff;
  box-shadow: 0 0 0 2px var(--bg);
  font: 700 11px/19px var(--font);
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}
header.app-header .app-header-controls .postfach-zahl[hidden] { display: none; }

/* Blinken bei neuer Post: Umschlag wackelt, Zahl blinkt – dreimal, dann steht die Zahl. */
@keyframes postfach-wackeln {
  0%, 100% { transform: none; }
  20% { transform: scale(1.16) rotate(-9deg); }
  40% { transform: scale(1.16) rotate(9deg); }
  60% { transform: scale(1.08) rotate(-4deg); }
}
@keyframes postfach-zahl-blinken {
  0%, 100% { opacity: 1; transform: none; }
  45% { opacity: .2; transform: scale(.85); }
}
header.app-header .app-header-controls .postfach-knopf.postfach-blinkt svg { animation: postfach-wackeln .9s ease-in-out 3; }
header.app-header .app-header-controls .postfach-knopf.postfach-blinkt .postfach-zahl { animation: postfach-zahl-blinken .9s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
  header.app-header .app-header-controls .postfach-knopf.postfach-blinkt svg,
  header.app-header .app-header-controls .postfach-knopf.postfach-blinkt .postfach-zahl { animation: none; }
}

/* Handy: Mit dem Briefumschlag reicht die Zeile auf der Projektübersicht (dort steht zusätzlich „Installieren“) bei 375 px
   nicht – das Profilbild würde abgeschnitten. Tag/Nacht wird dann ein runder Knopf wie die anderen (zeigt Sonne bzw. Mond,
   Antippen schaltet um). Bis 370 px stehen die runden Knöpfe dort 4 statt 5 px auseinander – so bleibt „Installieren“
   auch bei 360 px (häufige Android-Breite) mit 20 px Rand links und rechts; erst unter 360 px weicht es. */
@media (max-width: 420px) {
  header.app-header .app-header-controls.mit-postfach { gap: 5px; }
  header.app-header .app-header-controls.mit-postfach .theme-toggle { width: 38px; border-radius: 50%; }
  header.app-header .app-header-controls.mit-postfach .theme-toggle-knob,
  html[data-theme="dark"] header.app-header .app-header-controls.mit-postfach .theme-toggle-knob { left: 3px; transform: none; transition: background-color .2s ease; }
  header.app-header .app-header-controls.mit-postfach .theme-toggle-icon { left: 3px; right: auto; }
  html[data-theme="dark"] header.app-header .app-header-controls.mit-postfach .theme-toggle-sun,
  html:not([data-theme="dark"]) header.app-header .app-header-controls.mit-postfach .theme-toggle-moon { display: none; }
}
@media (max-width: 370px) {
  body[data-app-view="projekte"] header.app-header .app-header-controls.mit-postfach { gap: 4px; }
}
@media (max-width: 359px) {
  body[data-app-view="projekte"] header.app-header .app-header-controls.mit-postfach .app-install-trigger { display: none !important; }
}

/* ---------- Ansicht „Postfach“ – volle Breite wie Arbeitslisten und To-dos (Anwender: Platz nutzen) */
body[data-app-view="postfach"] .app-layout,
body[data-app-view="postfach"] .app-layout > main { max-width: none; width: 100%; margin: 0; padding: 0; display: block; }
/* Bis 900 px setzt style.css den Seitenrand mit :not(#_) – hier gleich stark, damit die Karte bündig mit der Kopfzeile
   steht (20 px Rand am Handy) statt 16 + 16 px. */
body[data-app-view="postfach"]:not(#_) .app-layout { padding: 0; }
#view-postfach { --pf-link: #2563eb; color: var(--text); }
/* Linkfarbe wie die Elementlinks der Arbeitslisten (--al-accent) – der App-Akzent hat auf Weiß nur 3,7 : 1 */
html[data-theme="dark"] #view-postfach { --pf-link: #6b9bff; }
#view-postfach .pf-seite { display: grid; gap: 16px; padding: 20px 24px 28px; }
@media (max-width: 760px) { #view-postfach .pf-seite { padding: 14px 20px 22px; } }
#view-postfach .pf-karte {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
#view-postfach .pf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
#view-postfach .pf-titel { min-width: 0; }
#view-postfach .pf-titel h2 { margin: 0; color: var(--text); font-size: 18px; font-weight: 750; line-height: 1.25; }
#view-postfach .pf-stand { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
#view-postfach .pf-stand strong { color: var(--text); font-weight: 700; }
#view-postfach .pf-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: auto;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
#view-postfach .pf-knopf:hover,
#view-postfach .pf-knopf:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
#view-postfach .pf-knopf.pf-haupt {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-elevated));
}
#view-postfach .pf-knopf svg,
#view-postfach .pf-pfeil svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#view-postfach .pf-liste { margin: 0; padding: 0; list-style: none; }
#view-postfach .pf-nachricht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
#view-postfach .pf-nachricht:last-child { border-bottom: 0; }
#view-postfach .pf-nachricht.pf-ungelesen { background: color-mix(in srgb, var(--accent) 4%, var(--bg-elevated)); }
#view-postfach .pf-zeile {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 4px 14px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font: inherit;
  font-weight: 400;
  text-align: left;
}
#view-postfach .pf-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#view-postfach .pf-punkt { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: transparent; }
#view-postfach .pf-ungelesen .pf-punkt { background: var(--accent); }
#view-postfach .pf-inhalt { display: grid; gap: 3px; min-width: 0; }
#view-postfach .pf-betreff { color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
#view-postfach .pf-ungelesen .pf-betreff { font-weight: 700; }
#view-postfach .pf-meta,
#view-postfach .pf-was { color: var(--text-muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
#view-postfach .pf-was { color: color-mix(in srgb, var(--text-muted) 70%, var(--text)); }
#view-postfach .pf-pfeil { display: inline-grid; place-items: center; height: 21px; color: var(--text-muted); transition: transform .15s ease; }
#view-postfach .pf-auf .pf-pfeil { transform: rotate(90deg); }
#view-postfach .pf-aktionen { padding: 12px 20px 12px 12px; }
#view-postfach .pf-details { grid-column: 1 / -1; grid-row: 2; padding: 0 20px 14px 42px; }
#view-postfach .pf-elemente { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#view-postfach .pf-elemente > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
#view-postfach .pf-element {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pf-link);
  box-shadow: none;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pf-link) 45%, transparent);
  text-underline-offset: 3px;
}
#view-postfach .pf-element-ort { color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
/* Schritte untereinander – Schrittnamen enthalten selbst Kommas */
#view-postfach .pf-schritte {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  margin: 2px 0 0;
  padding: 0 0 0 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  list-style: disc;
}
#view-postfach .pf-schritte > li { overflow-wrap: anywhere; }
#view-postfach .pf-schritte > li::marker { color: var(--text-muted); }
#view-postfach .pf-mehr { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; }
#view-postfach .pf-ohne-recht { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
#view-postfach .pf-hinweis { margin: 0; padding: 18px 20px; color: var(--text-muted); font-size: 14px; }
#view-postfach .pf-fehler { color: color-mix(in srgb, var(--bad) 82%, var(--text)); }
#view-postfach .pf-leer { display: grid; gap: 6px; padding: 28px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
#view-postfach .pf-leer strong { color: var(--text); font-size: 15px; }
#view-postfach .pf-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  #view-postfach .pf-kopf { flex-wrap: wrap; padding: 14px 16px; }
  #view-postfach .pf-nachricht { grid-template-columns: minmax(0, 1fr); }
  #view-postfach .pf-zeile { padding: 14px 12px 8px 16px; }
  #view-postfach .pf-aktionen { grid-row: 2; padding: 0 16px 14px 38px; }
  #view-postfach .pf-details { grid-row: 3; padding: 0 16px 14px 38px; }
  #view-postfach .pf-elemente > li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- v937: Nachricht zu einem To-do – Angaben in einer Karte wie die Elemente einer Zuweisung. Statusfarbe nur
   als Punkt und unverändert (wie in den To-dos); „überfällig“ in den Farben der To-dos. */
#view-postfach { --pf-spaet: #b42318; --pf-spaet-soft: #fdecea; }
html[data-theme="dark"] #view-postfach { --pf-spaet: #ff8a80; --pf-spaet-soft: rgba(255, 138, 128, .12); }
#view-postfach .pf-todo-angaben {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 16px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
#view-postfach .pf-todo-angabe { display: contents; }
/* Mindestbreite = „Mangel an“: die Werte stehen in allen To-do-Karten an derselben Stelle */
#view-postfach .pf-todo-angabe dt { min-width: 5.2em; margin: 0; color: var(--text-muted); font-size: 12.5px; font-weight: 500; line-height: 21px; }
#view-postfach .pf-todo-angabe dd { min-width: 0; margin: 0; color: var(--text); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
#view-postfach .pf-todo-status { display: inline-flex; align-items: center; gap: 7px; }
#view-postfach .pf-todo-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-st, var(--text-muted)); }
#view-postfach .pf-todo-spaet {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--pf-spaet-soft);
  color: var(--pf-spaet);
  font-size: 12px;
  font-weight: 650;
  line-height: 20px;
}
#view-postfach .pf-todo-element { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }

/* v937: Ein Sprung läuft (Projekt wechseln, laden) – sein Knopf zeigt es an, weitere Tipps zählen solange nicht. */
#view-postfach .pf-knopf[aria-busy="true"],
#view-postfach .pf-element[aria-busy="true"] { cursor: progress; opacity: .72; }
#view-postfach .pf-knopf[aria-busy="true"]::after {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pf-dreht .75s linear infinite;
}
@keyframes pf-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #view-postfach .pf-knopf[aria-busy="true"]::after { animation: none; }
}