/* Carlito — freier Nachbau von Calibri mit identischen Massen (OFL,
   Lizenz unter fonts/LICENSE-Carlito.txt). Mitgeliefert statt auf die
   Systemschrift zu hoffen: Calibri gibt es nur auf Windows und in Office,
   auf dem Telefon saehe dieselbe Seite sonst anders aus.

   Auf Latein zugeschnitten — die volle Schrift bringt Kyrillisch und
   Griechisch mit und ist funfmal so gross.

   font-display: swap — lieber sofort in der Systemschrift lesen als eine
   halbe Sekunde auf ein leeres Fenster schauen. */
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Carlito';
  src: url('/fonts/Carlito-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Orbital-Palette, dieselbe wie im Roundcube-Skin und im hostpanel. */
:root {
  --bg: #070a12;
  --surface: #0d1626;
  --raised: #10203a;
  --border: rgba(120, 175, 255, 0.11);
  --border-strong: rgba(120, 175, 255, 0.22);
  --text: #e2ebfa;
  --muted: #8a9cbd;
  --faint: #56688f;
  --accent: #34d7e8;
  --violet: #8b7bff;
  --danger: #fb7185;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;

  /* Carlito wird mitgeliefert; die Nachrueckliste greift nur, solange die
     Schriftdatei noch laedt oder falls sie fehlt. Calibri steht davor, weil
     sie auf Windows ohnehin da ist und dieselben Masse hat. */
  --ui-font: 'Carlito', Calibri, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Das Attribut hidden blendet ueber die Browser-Regel [hidden]{display:none}
   aus. Jede eigene display-Regel ist spezifischer und gewinnt — .login hat
   display:flex, also blieb die Anmeldemaske trotz hidden stehen und die
   Oberflaeche erschien DARUNTER. Diese Zeile stellt das richtig, ein fuer
   alle Mal und fuer jedes Element mit hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(48rem 40rem at 82% -12%, rgba(52, 215, 232, 0.10), transparent 60%),
    radial-gradient(44rem 40rem at -8% 108%, rgba(139, 123, 255, 0.10), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 1rem;
}

/* Auf grossen Bildschirmen waechst die Grundgroesse mit.
   
   ACHTUNG, HIER LAG EIN FEHLER: Zuerst stand das auf `body`. rem bezieht
   sich aber auf `html` — es wuchs also nur, was die Schriftgroesse erbt,
   waehrend saemtliche Abstaende und Breiten in rem stehen blieben. Das
   Ergebnis war ein schiefes Verhaeltnis: groessere Schrift in unveraendert
   grossen Kaesten, und Kaestchen, die neben dem Text zu klein wirkten.
   
   Auf `html` gesetzt skaliert tatsaechlich alles gleichmaessig. */
html { font-size: 15px; }
@media (min-width: 1600px) { html { font-size: 16px; } }
@media (min-width: 2000px) { html { font-size: 17px; } }
@media (min-width: 2400px) { html { font-size: 18px; } }

h1 { font-size: 1.35rem; margin: 0 0 1.4rem; letter-spacing: -0.01em; }
h1 span, .brand span { color: var(--accent); }

/* ---------- Anmeldung ---------- */

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.card {
  width: 100%;
  max-width: 22rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.8rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin: 0 0 0.35rem;
}

input {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid transparent;
}

.card button[type="submit"] {
  width: 100%;
  padding: 0.6rem;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  color: #05121c;
  font-weight: 600;
}
button:disabled { opacity: 0.55; cursor: not-allowed; }

.error {
  margin: 0.9rem 0 0;
  color: var(--danger);
  font-size: 0.85rem;
}

/* ---------- Rahmen ---------- */

/* Die Oberflaeche fuellt genau das Fenster, und JEDE Spalte scrollt fuer
   sich. Vorher scrollte die ganze Seite als Ganzes: Wer unten in einer
   langen Liste eine Nachricht anklickte, musste erst wieder hochscrollen,
   um sie zu lesen. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 22, 38, 0.75);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.brand { font-weight: 600; letter-spacing: -0.01em; }
.spacer { flex: 1; }
.whoami { color: var(--muted); font-size: 0.85rem; }

.ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--muted);
  padding: 0.35rem 0.7rem;
}
.ghost:hover { color: var(--text); border-color: var(--accent); }

.burger {
  display: none;
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
  padding: 0.25rem 0.55rem;
}

/* min-height: 0 ist noetig, damit die Kinder ueberhaupt schrumpfen und
   damit scrollen duerfen — ohne das waechst der Kasten einfach mit. */
.body { display: flex; flex: 1; min-height: 0; }

/* ---------- Ordner ---------- */

/* Schmale Symbolleiste statt Textspalte. Die Beschriftung faehrt beim
   Ueberfahren heraus — der Platz gehoert der Post, nicht der Navigation. */
.folders {
  width: 4rem;
  flex: none;
  padding: 0.8rem 0.5rem;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.folder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 10px;
}
.folder svg { width: 20px; height: 20px; }

.folder:hover { background: var(--raised); color: var(--text); }
.folder:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.folder.active {
  background: var(--raised);
  color: var(--accent);
  border-color: var(--border-strong);
}
/* Der gewaehlte Ordner bekommt zusaetzlich einen Balken. Farbe allein
   genuegt nicht — wer sie schlecht unterscheidet, saehe sonst nichts. */
.folder.active::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Die Beschriftung liegt neben dem Symbol und erscheint beim Ueberfahren.
   pointer-events aus, damit sie nicht selbst den Zeiger einfaengt. */
.folder-label {
  position: absolute;
  left: calc(100% + 0.55rem);
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 6;
}
.folder:hover .folder-label,
.folder:focus-visible .folder-label {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Liste ---------- */

/* Feste, massvolle Breite — unabhaengig davon, ob gerade gelesen wird.
   Ueber die ganze Bildschirmbreite gezogen stuende das Datum meterweit vom
   Absender entfernt; unbegrenzt mitwachsen soll sie deshalb nicht. */
.list {
  flex: 0 0 clamp(19rem, 28%, 27rem);
  min-width: 0;
  padding: 1rem 1.2rem 3rem;
  overflow-y: auto;
}

.list-head {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--faint);
  margin-bottom: 0.8rem;
}

.messages { list-style: none; margin: 0; padding: 0; }

/* Zwei Zeilen je Nachricht: oben Absender und Datum, darunter der Betreff.
   Nebeneinander in drei Spalten klaffte zwischen Betreff und Datum eine
   Luecke ueber die halbe Breite. */
.msg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.8rem;
  align-items: baseline;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.from { grid-column: 1; grid-row: 1; }
.date { grid-column: 2; grid-row: 1; }
.subject { grid-column: 1 / -1; grid-row: 2; }
.msg:hover { background: var(--surface); }

/* Absender und Betreff stehen auf derselben Stufe — gleich gross. Vorher war
   der Betreff das groesste UND hellste Element der Zeile und hat alles
   erschlagen. Der Unterschied kommt jetzt nur noch aus der Helligkeit. */
.from,
.subject {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from { color: var(--muted); }
.subject { color: var(--text); }
.date { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; }

/* Betont wird nur, was ungelesen ist. Sonst ist Betonung ueberall und
   damit nirgends. */
.msg.unseen .from,
.msg.unseen .subject { color: var(--text); font-weight: 600; }
.msg.unseen { box-shadow: inset 2px 0 0 var(--accent); }

.empty { color: var(--faint); padding: 2rem 0.7rem; }

/* ---------- Leseansicht ---------- */

.reader {
  flex: 1.4;
  min-width: 0;
  padding: 1rem 1.4rem 4rem;
  border-left: 1px solid var(--border);
  overflow-y: auto;
}

/* Textbreite begrenzen. Auf einem breiten Bildschirm liefe die Zeile sonst
   ueber 1900 Pixel — beim Zurueckspringen findet das Auge die naechste Zeile
   nicht mehr. Rund 80 Zeichen sind die uebliche Grenze.
   
   Der HTML-Rahmen ist ausdruecklich ausgenommen: Dort steckt fremdes Layout
   mit Tabellen und Bildern, das seine eigene Breite mitbringt. */
.reader > *:not(.reader-html) { max-width: 80ch; }

.reader-close { display: none; margin-bottom: 1rem; }

.reader-subject {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.reader-meta {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  margin-bottom: 1rem;
}

.meta-row { display: flex; gap: 0.8rem; padding: 0.12rem 0; font-size: 0.87rem; }

.meta-label {
  flex: none;
  width: 4.2rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-top: 0.22rem;
}
.meta-value { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }

/* Der Hinweis, was der Benutzer NICHT sieht. Bewusst auffaellig: Eine still
   abgetragene HTML-Mail sieht sonst aus wie eine kaputte Mail. */
.note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--violet);
  background: rgba(139, 123, 255, 0.08);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1.1rem;
}
.att-head {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-right: 0.3rem;
}
/* Noch nicht anklickbar — Herunterladen kommt erst. Deshalb bewusst ohne
   Zeigefinger, damit niemand vergeblich klickt. */
.att {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
}

.reader-text {
  margin: 0;
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

/* ---------- Handy ---------- */

@media (max-width: 720px) {
  .burger { display: inline-block; }

  .folders {
    position: fixed;
    top: 3.4rem;
    left: 0;
    bottom: 0;
    z-index: 4;
    background: var(--surface);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  body.nav-open .folders { transform: translateX(0); }

  /* Auf dem Telefon nimmt die Liste die ganze Breite — dort gibt es keine
     Leseansicht daneben, gegen die sie sich behaupten muesste. */
  .list { flex: 1 1 auto; }

  /* Im ausgefahrenen Menue ist Platz, und Ueberfahren gibt es auf einem
     Telefon nicht — also stehen die Namen dort fest neben den Symbolen. */
  .folders { width: 13rem; padding: 0.8rem 0.6rem; }
  .folder { width: 100%; justify-content: flex-start; padding-left: 0.75rem; gap: 0.7rem; }
  .folder-label {
    position: static;
    opacity: 1;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    color: inherit;
    font-size: 0.9rem;
  }
  .folder.active::before { left: 0; }

  /* Nebeneinander ist auf dem Telefon kein Platz: Die Leseansicht legt sich
     ueber die Liste, mit Zurueck-Knopf. */
  body.reading .list { display: none; }
  .reader { border-left: none; padding-left: 1rem; padding-right: 1rem; }
  .reader-close { display: inline-block; }
  .meta-label { width: 3.4rem; }
}

/* Auf mittleren Fenstern nimmt die Ordnerspalte zu viel weg, sobald gelesen
   wird — dann tritt sie zurueck. */
@media (min-width: 721px) and (max-width: 1100px) {
  body.reading .folders { display: none; }
}

/* Abgeschotteter Rahmen fuer HTML-Nachrichten. Er hat einen eigenen
   Ursprung (sandbox ohne allow-same-origin) und darf nichts ausfuehren.
   
   Die 80-Zeichen-Grenze der Leseansicht gilt hier NICHT: Sie ist fuer
   Fliesstext gedacht. HTML-Post bringt Tabellen und Bilder mit und wird
   ueblicherweise auf 600 bis 800 Pixel gebaut — auf 80 Zeichen gequetscht
   bricht das um und sieht gedraengt aus. Deshalb gar keine Grenze: Die
   Lesflaeche gibt die Breite vor. */
.reader-html {
  width: 100%;
  border: none;
  background: transparent;
  display: block;
}

/* Knopf im Hinweis — "Bilder laden" bzw. "Als Text anzeigen". */
.note-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
.note-btn:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Prüfergebnisse (DKIM, SPF, DMARC, Spam) ---------- */

.auth {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1rem;
}

.merkmal {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: help;
}

/* Farbe allein genuegt nicht — wer sie schlecht unterscheidet, saehe keinen
   Unterschied. Deshalb steht das Ergebnis immer als Wort daneben
   ("DKIM pass", "SPF fail"). */
.merkmal-gut {
  color: #7ee7c7;
  background: rgba(126, 231, 199, 0.10);
  border-color: rgba(126, 231, 199, 0.30);
}
.merkmal-schlecht {
  color: var(--danger);
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.35);
}
.merkmal-unbekannt {
  color: var(--faint);
  background: rgba(120, 175, 255, 0.06);
  border-color: var(--border);
}

.reader-headers {
  margin: 0 0 1.2rem;
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  max-height: 24rem;
  overflow-y: auto;
}

/* Anhaenge sind jetzt Verweise zum Herunterladen. */
.att {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  cursor: pointer;
}
.att:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface);
}
.att-pfeil { width: 13px; height: 13px; opacity: 0.7; flex: none; }

/* ---------- Aktionsleiste über der Nachricht ---------- */

.reader-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.bar-spacer { flex: 1; }

.reader-bar .ghost { font-size: 0.82rem; padding: 0.3rem 0.65rem; }

/* Löschen sieht anders aus als der Rest — es ist die einzige Handlung
   hier, die etwas wegnimmt. */
.ghost.danger { color: var(--danger); border-color: rgba(251, 113, 133, 0.3); }
.ghost.danger:hover { color: #fff; background: rgba(251, 113, 133, 0.15); border-color: var(--danger); }

#act-flag { min-width: 2.2rem; text-align: center; }
#act-flag.active { color: var(--accent); border-color: var(--accent); }

/* Eigenes Verschieben-Menue. Die Auswahlliste des Betriebssystems liess
   sich nicht mitfaerben — weisser Kasten, blaue Markierung, geerbte
   Textfarbe hellgrau auf Weiss und damit unlesbar. */
.move-wrap { position: relative; }

.move-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
  min-width: 12rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.move-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  text-align: left;
  font-size: 0.85rem;
}
.move-item:hover { background: var(--raised); color: var(--text); }
.move-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.move-item svg { width: 16px; height: 16px; flex: none; }

.move-leer { display: block; padding: 0.5rem; color: var(--faint); font-size: 0.8rem; }

@media (max-width: 720px) {
  .reader-bar .ghost { font-size: 0.78rem; padding: 0.25rem 0.5rem; }
}

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

.settings {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem 1.5rem;
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.settings-card {
  width: 100%;
  max-width: 32rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 1.6rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.settings-card h2 { margin: 0 0 0.3rem; font-size: 1.1rem; letter-spacing: -0.01em; }
.settings-sub { margin: 0 0 1.4rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.settings-card label .opt { text-transform: none; letter-spacing: 0; color: var(--faint); }

.settings-card textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.settings-card textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Die Vorschau zeigt, was beim Empfaenger ankommt — das ist der Zweck der
   ganzen Einstellung, also gehoert es sichtbar daneben. */
.settings-hint {
  margin: -0.6rem 0 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.settings-bar { display: flex; align-items: center; gap: 0.6rem; }
.btn-primary {
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  color: #05121c;
  font-weight: 600;
}
.settings-status { color: var(--muted); font-size: 0.82rem; }

/* ---------- Schreiben ---------- */

.compose-btn { padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.compose-card { max-width: 44rem; }

/* KEINE Unterstreichung. Sie ist im Web die Auszeichnung fuer Verweise, die
   irgendwohin fuehren — diese Knoepfe fuehren nirgendwohin, sie schalten
   etwas um. Der Unterschied wird ueber Helligkeit gezeigt. */
.linkish {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  padding: 0 0 0.9rem;
  cursor: pointer;
  opacity: 0.85;
}
.linkish:hover { opacity: 1; text-decoration: none; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
  .compose-btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
  #settings-btn { display: none; }
}

/* ---------- Suche und Blättern ---------- */

.suche { position: relative; display: flex; align-items: center; }

.suche input {
  width: clamp(10rem, 22vw, 20rem);
  margin: 0;
  padding: 0.32rem 1.8rem 0.32rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.suche input::placeholder { color: var(--faint); }
.suche input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Das eigene Kreuz des Browsers passt nicht zum Rest — eigenes stattdessen. */
.suche input::-webkit-search-cancel-button { display: none; }
.suche-weg {
  position: absolute;
  right: 0.45rem;
  background: transparent;
  border: none;
  color: var(--faint);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
}
.suche-weg:hover { color: var(--text); }

.mehr {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.55rem;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  font-size: 0.85rem;
}
.mehr:hover { border-color: var(--accent); color: var(--text); background: var(--surface); }
.mehr:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 720px) {
  .suche input { width: 8rem; }
}

/* ---------- Planet ---------- */

/* Dasselbe Zeichen wie im Panel und im Roundcube-Skin: Ring, geneigte Bahn,
   Planet in der Mitte. Jedes Vorkommen hat eine eigene Verlaufs-Kennung —
   zweimal dieselbe id im Dokument, und es ist nicht definiert, welcher
   Verlauf greift. */
.planet { flex: none; display: block; }

.marke-gross {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.marke-gross h1 { margin: 0; }

 /* Abstand ueber den Rand des Zeichens, NICHT ueber gap: gap wirkt
   zwischen allen Teilen des Flex-Kastens, also auch zwischen "Orbital" und
   "Mail" — der Name stuende dann auseinandergerissen da. */
.brand { display: inline-flex; align-items: center; }
.brand .planet { margin-right: 0.5rem; }

/* ---------- Mehrfachauswahl ---------- */

.list-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding: 0 0.7rem;
}
/* Nicht umbrechen: In einer schmalen Spalte wurde aus
   "POSTEINGANG · 300 NACHRICHTEN" ein dreizeiliger Block, und alles daneben
   sass dadurch scheinbar schief. Lieber abschneiden als umbrechen. */
.list-kopf .list-head {
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kopf-spacer { flex: 1; min-width: 0.3rem; }

/* Derselbe Satz wie die Ueberschrift und "ALLE" daneben: schmale
   Versalschrift, gleicher Sperrsatz, gleiche Groesse. Vorher war es
   Fliessschrift in Tuerkis und fiel als einziges aus der Zeile. */
.modus {
  padding: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  opacity: 1;
  white-space: nowrap;
  /* Knoepfe bringen eine eigene Zeilenhoehe mit, die Spannen daneben nicht.
     Dadurch sass die Beschriftung eine Spur tiefer als ihre Nachbarn.
     Gleiche Zeilenhoehe fuer alle drei — dann sitzen sie auf einer Linie. */
  line-height: 1;
}
.modus:hover { color: var(--accent); }

/* Ein Kaestchen ohne Beschriftung sagt niemandem, wofuer es gut ist. */
.alle {
  display: none;
  align-items: baseline;
  line-height: 1;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.alle:hover { color: var(--muted); }


/* In rem, nicht in Pixeln: Die Grundgroesse waechst auf grossen Schirmen
   mit (16/17/18 px). Ein festes 15-Pixel-Kaestchen bliebe dabei stehen und
   saehe neben groesserem Text zu klein und schief aus. */
.alle input, .msg-wahl input {
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.msg-wahl {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-items: center;
  padding-left: 0.5rem;
}
.msg { grid-template-columns: 1fr auto auto; }
.msg.gewaehlt { background: var(--raised); box-shadow: inset 2px 0 0 var(--accent); }

.auswahl-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 0.82rem;
}
.auswahl-bar .ghost { font-size: 0.78rem; padding: 0.25rem 0.55rem; }
.auswahl-bar.arbeitet { opacity: 0.6; pointer-events: none; }
#auswahl-zahl { color: var(--accent); font-family: var(--mono); font-size: 0.75rem; margin-right: 0.3rem; }


/* ---------- Sichtbarkeit des Auswahlmodus ----------
   Bewusst ganz am Ende: Diese Regeln entscheiden ueber die Sichtbarkeit und
   duerfen von keiner Platzierungsregel weiter oben ueberschrieben werden.
   Genau das war der Fehler — ein spaeteres display:flex hat das none
   ausgehebelt. */
.msg-wahl { display: none; }
.alle { display: none; }
body.auswahl-modus .msg-wahl { display: flex; align-items: center; }
body.auswahl-modus .alle { display: flex; align-items: baseline; }

/* Der Browser gibt Kaestchen eine eigene Aussenkante. Die verschiebt sie
   gegenueber dem Text daneben — gemessen waren es sieben Pixel. */
.alle input, .msg-wahl input { margin: 0; align-self: center; }

/* OPTISCHE Korrektur, keine rechnerische: "ALLE" ist Versalschrift und hat
   keine Unterlaengen. Der Textkasten reserviert trotzdem Platz dafuer, also
   sitzen die Buchstaben tiefer im Kasten als dessen Mitte. Mathematisch
   zentriert wirkt das Kaestchen dadurch zu hoch. Ein Zehntel der
   Grundgroesse nach unten gleicht es aus — und waechst mit. */
.alle input {
  position: relative;
  /* An der Schriftlinie ausgerichtet saesse das Kaestchen mit seiner
     Unterkante auf der Linie und wirkte zu tief. Ein Stueck nach oben
     stellt es auf die Hoehe der Versalien daneben. */
  top: -0.12rem;
  /* Negativer Aussenabstand oben und unten: Das Kaestchen ist hoeher als
     der Text neben ihm und machte dadurch den ganzen Kasten hoeher — der
     Text "ALLE" wurde darin mittig gesetzt und sass damit hoeher als seine
     Nachbarn in derselben Zeile. Ohne Hoehenbeitrag richtet sich alles
     nach dem Text. Das Kaestchen ragt heraus, ohne etwas zu verschieben. */
  margin-block: -0.14rem;
}