/* Oberfläche des Mailsystems. Farbrollen nach _vorlagen/DESIGN.oberflaeche.md:
   Hex-Werte stehen nur in den Tokenblöcken, kein CDN, keine Webfont (Archivo nur im font-stack). */
:root {
  color-scheme: light;
  --plane:#f9f9f7; --surface:#fcfcfb; --surface-2:#f2f2ee;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --hairline:rgba(11,11,11,.10);
  --slot-1:#2a78d6; --slot-2:#eb6834; --slot-3:#1baf7a; --slot-4:#eda100;
  --slot-5:#e87ba4; --slot-6:#008300; --slot-7:#4a3aa7; --slot-8:#e34948;
  --slot-0:#52514e;
  --gut:#006300; --kritisch:#d03b3b; --warnung:#fab219;
  --schatten:0 1px 2px rgba(11,11,11,.05), 0 4px 14px rgba(11,11,11,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plane:#0d0d0d; --surface:#1a1a19; --surface-2:#232322;
    --ink:#fff; --ink-2:#c3c2b7; --ink-muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --hairline:rgba(255,255,255,.10);
    --slot-1:#3987e5; --slot-2:#d95926; --slot-3:#199e70; --slot-4:#c98500;
    --slot-5:#d55181; --slot-6:#008300; --slot-7:#9085e9; --slot-8:#e66767;
    --slot-0:#c3c2b7;
    --gut:#0ca30c; --kritisch:#e66767;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; padding:0; }
body {
  background:var(--plane); color:var(--ink);
  font:15px/1.5 Archivo, Arial, system-ui, sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--slot-1); }
.huelle { max-width:980px; margin:0 auto; padding:12px 12px 64px; }

/* Kopf und Reiter */
header.kopf {
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 16px;
  padding-bottom:10px; border-bottom:1px solid var(--hairline);
}
.kopf h1 { margin:0; font-size:21px; font-weight:650; letter-spacing:-.01em; }
.kopf .sub { margin:2px 0 0; color:var(--ink-2); font-size:13px; }
.kopf .werkzeuge { margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
nav.reiter { display:flex; gap:2px; margin:0 0 14px; border-bottom:1px solid var(--hairline); overflow-x:auto; overflow-y:hidden; }
nav.reiter a {
  padding:11px 14px; font-size:14px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
nav.reiter a:hover { color:var(--ink); }
nav.reiter a[aria-current="page"] { color:var(--ink); font-weight:600; border-bottom-color:var(--slot-1); }
nav.reiter.unter { margin-top:0; }
form.inline { display:inline; margin:0; }

/* Bedienelemente */
button, .knopf, select, input[type=text], input[type=search], input[type=password], textarea {
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline); border-radius:7px; padding:8px 12px; min-height:40px;
}
button, .knopf { cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .knopf:hover { background:var(--surface-2); }
.stark, a.knopf.stark { background:var(--slot-1); border-color:transparent; color:var(--surface); font-weight:550; }
.stark:hover, a.knopf.stark:hover { filter:brightness(1.08); background:var(--slot-1); }
.leise, a.knopf.leise { border-color:transparent; background:transparent; color:var(--ink-2); }
.leise:hover { background:var(--surface-2); }
.klein, a.knopf.klein { padding:3px 9px; font-size:12.5px; min-height:32px; }
.ja { color:var(--gut); border-color:color-mix(in srgb, var(--gut) 40%, transparent); }
.nein { color:var(--kritisch); border-color:color-mix(in srgb, var(--kritisch) 40%, transparent); }
button:focus-visible, .knopf:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, a:focus-visible { outline:2px solid var(--slot-1); outline-offset:1px; }
textarea { width:100%; resize:vertical; }
input[type=text], input[type=search], input[type=password], select { width:100%; }
.knoepfe { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }

/* Karte, Filter, Meldungen */
.karte {
  background:var(--surface); border:1px solid var(--hairline); border-radius:10px;
  box-shadow:var(--schatten); padding:14px 14px; margin:0 0 16px;
}
.karte.schmal { max-width:420px; margin:24px auto; }
.karte h2 { margin:0 0 6px; font-size:15.5px; font-weight:600; overflow-wrap:anywhere; }
.karte h3 { margin:16px 0 6px; font-size:13.5px; font-weight:600; }
.hinweis { margin:0 0 10px; color:var(--ink-2); font-size:12.5px; }
.leer { color:var(--ink-muted); text-align:center; padding:24px 8px; }
.filter { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 12px; }
.filter .rechts { margin-left:auto; color:var(--ink-2); font-size:12.5px; }
.meldungen { list-style:none; margin:12px 0; padding:0; display:grid; gap:6px; }
.meldung, .fehler {
  display:flex; gap:8px; align-items:flex-start; padding:8px 12px; border-radius:8px; font-size:13.5px;
  background:var(--surface); border:1px solid var(--hairline);
}
.meldung.success { border-color:color-mix(in srgb, var(--gut) 40%, transparent); }
.meldung.error, .fehler { border-color:color-mix(in srgb, var(--kritisch) 50%, transparent); }
.meldung.warnung { border-color:color-mix(in srgb, var(--warnung) 70%, transparent); margin-top:6px; }
.marke {
  flex:none; display:inline-block; width:18px; height:18px; line-height:16px; text-align:center;
  border:1.5px solid currentColor; border-radius:50%; font-size:11px; font-weight:650;
}
.meldung.success .marke { color:var(--gut); }
.meldung.error .marke, .fehler .marke { color:var(--kritisch); }
.meldung.warnung .marke { color:var(--ink); }
.fehlertext { display:block; margin-top:4px; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere; }

/* Zeichen: Rahmen und Text in der Rolle, dazu eine Form (Rahmenart) */
.zeichen {
  display:inline-block; font-size:11.5px; line-height:18px; padding:0 8px; border-radius:999px;
  border:1px solid var(--axis); color:var(--ink-2);
}
.zeichen.zugeordnet { border-color:color-mix(in srgb, var(--gut) 45%, transparent); color:var(--gut); }
.zeichen.vorschlag { border-style:dashed; }
.zeichen.verworfen { text-decoration:line-through; color:var(--ink-muted); }
.zeichen.kritisch { border-color:color-mix(in srgb, var(--kritisch) 50%, transparent); color:var(--kritisch); border-width:2px; }

/* Mailliste: auf dem Telefon dreizeilig */
ul.liste { list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--hairline); border-radius:10px; overflow:hidden; }
ul.liste > li + li { border-top:1px solid var(--grid); }
.zeile { display:block; padding:10px 12px; color:var(--ink); text-decoration:none; }
a.zeile:hover { background:var(--surface-2); }
.zeile.statisch { display:block; }
.zeile .oben { display:flex; justify-content:space-between; gap:12px; }
.zeile .absender { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zeile .zeit { flex:none; color:var(--ink-muted); font-size:11.5px; }
.zeile .betreff { display:block; color:var(--ink-2); font-size:13.5px; overflow-wrap:anywhere; }
.zeile .neben { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:2px; font-size:12px; color:var(--ink-muted); }
.zeile.ungelesen .absender, .zeile.ungelesen .betreff { font-weight:650; color:var(--ink); }
.punkt { color:var(--slot-1); font-size:10px; margin-right:6px; }
.klammer { vertical-align:-1px; color:var(--ink-muted); }
.nur-lesegeraet { position:absolute; left:-9999px; }
nav.seiten { display:flex; gap:16px; justify-content:center; align-items:center; margin:14px 0; font-size:13px; }

/* Mail lesen */
dl.kopfdaten { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:6px 0 10px; font-size:13px; }
dl.kopfdaten dt { color:var(--ink-muted); }
dl.kopfdaten dd { margin:0; overflow-wrap:anywhere; }
.mailrahmen { width:100%; height:40vh; min-height:200px; resize:vertical; border:1px solid var(--hairline); border-radius:8px; background:var(--surface); }
.mailtext { background:var(--surface-2); border-radius:8px; padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:8px 0; }
ul.anhaenge, ul.zuordnungen { list-style:none; margin:0 0 10px; padding:0; }
ul.anhaenge li, ul.zuordnungen li { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; padding:6px 0; border-top:1px solid var(--grid); }
ul.zuordnungen li.verworfen { color:var(--ink-muted); }
.neben { color:var(--ink-muted); font-size:12px; }

/* Maske */
.maske fieldset { border:1px solid var(--hairline); border-radius:8px; margin:0 0 14px; padding:10px 12px 12px; }
.maske legend { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); padding:0 6px; }
.felder { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.feld { display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-2); }
.feld.breit { grid-column:1 / -1; }
.fussnote { font-size:11.5px; color:var(--ink-muted); }

@media (min-width:700px) {
  .huelle { padding:20px 20px 80px; }
}

@media print {
  body { background:Canvas; color:CanvasText; }
  .werkzeuge, nav.reiter, .knoepfe, .filter, nav.seiten, form { display:none !important; }
  .karte, ul.liste { box-shadow:none; border-color:GrayText; }
  .mailrahmen { height:auto; }
}

/* Zweiter Faktor */
.qr { display:flex; justify-content:center; margin:12px 0; }
.qr svg { max-width:100%; height:auto; background:white; padding:4px; }
.codes { list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; font-variant-numeric:tabular-nums; }