/* Manea Mailarchiv — Oberflaeche aus dem Design-Handoff.
   ================================================================
   QUELLE: "Manea-Website Redesign/app.dc.html", <style>-Block, uebernommen.
   Aenderung gegenueber der Quelle: NUR die @font-face-Bloecke. Der Entwurf
   laedt rohe TTF aus assets/ (169 KB je Schnitt); ausgeliefert werden die
   bereits vorhandenen woff2-Subsets derselben Schriften. Familiennamen
   unveraendert: "Sora" und "Raleway".

   Alles andere steht Zeile fuer Zeile wie im Entwurf. Wer hier etwas aendert,
   aendert das Design und nicht seine Umsetzung. */

@font-face{font-family:"Raleway";src:url("/fonts/manea-sans-400-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("/fonts/manea-sans-400-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Raleway";src:url("/fonts/manea-sans-600-latin.woff2") format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("/fonts/manea-sans-600-latin-ext.woff2") format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Raleway";src:url("/fonts/manea-sans-700-latin.woff2") format("woff2");font-weight:700 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";src:url("/fonts/manea-sans-700-latin-ext.woff2") format("woff2");font-weight:700 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";src:url("/fonts/manea-display-latin.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";src:url("/fonts/manea-display-latin-ext.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Die Ziffern kommen aus Sora (LIESMICH des Entwurfspakets). Der Entwurf
   haengt dafuer einen Schnitt der Anzeigeschrift unter den NAMEN der
   Fliesstextfamilie und grenzt ihn auf U+0030-0039 ein (app.dc.html, Z. 22).

   WARUM DREI SCHNITTE STATT DES EINEN DES ENTWURFS. Der eine des Entwurfs
   (font-weight:100 900) wirkt in Chromium nicht -- und bei zwei Gewichten
   richtet er sogar Schaden an. Gemessen am 2026-09-10 mit den echten Dateien:
   steht er ZULETZT, kommen die Ziffern bei jedem Gewicht aus Raleway; steht er
   ZUERST (die Anordnung des Entwurfs), gewinnt er bei 500 und 600 die ganze
   Familie, und weil er nur Ziffern fuehrt, fallen die BUCHSTABEN dort auf die
   Systemschrift zurueck. Chromium waehlt je Familie und Gewicht EINEN Schnitt
   und prueft erst danach, ob er das Zeichen fuehrt; fehlt es, geht es zur
   naechsten Familie, nicht zum naechsten Schnitt.
   Traeger der Loesung ist deshalb die WORTGLEICHE Gewichtsangabe: nur Schnitte
   mit identischem Deskriptor bilden eine Gruppe, in der unicode-range
   entscheidet und der spaeter deklarierte den ueberlappenden Bereich
   uebernimmt. "Steht hinten" allein genuegt nicht.

   WARUM DIE ACHSE FESTGENAGELT IST. Raleway liegt in drei STATISCHEN
   Schnitten (400, 600, 700), Sora ist eine variable Schrift (Achse wght
   400-700). Ohne font-variation-settings folgt die Ziffer der angeforderten
   Stufe, der Buchstabe kann es nicht: bei font-weight:500 stuenden Ziffern aus
   Sora 500 neben Buchstaben aus der statischen 600er-Datei -- eine Stufe
   leichter, und das an jeder .card-h .note und im .banner-hinweis, die beide
   Zahlen fuehren. Genagelt wird deshalb auf das Gewicht, das die
   Raleway-DATEI daneben wirklich traegt. Die Vorschubbreite aendert das nicht
   (tabellarisch bleibt jede Ziffer 67.6 px), nur die Strichstaerke.

   WAS ES BRINGT. Raleway fuehrt kein "tnum". Seine zehn Ziffern messen 41.6
   bis 68.4 px (bei 100px Grad) -- damit blieb jedes tabular-nums dieser Datei
   wirkungslos: Rumpf, .app-cols/.num, .mono, .wm-row .meta und .u-code-field,
   fuenf Stellen. Zehn gleich lange Datumsangaben massen 66.2 bis 69.7 px. Sora
   fuehrt "tnum" und liefert 67.6 px fuer jede Ziffer. Erst damit steht in
   einer Spalte uebereinander, was uebereinander gehoert. */
@font-face{font-family:"Raleway";src:url("/fonts/manea-display-latin.woff2") format("woff2");font-weight:400;font-variation-settings:"wght" 400;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:"Raleway";src:url("/fonts/manea-display-latin.woff2") format("woff2");font-weight:500 600;font-variation-settings:"wght" 600;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:"Raleway";src:url("/fonts/manea-display-latin.woff2") format("woff2");font-weight:700 900;font-variation-settings:"wght" 700;font-display:swap;unicode-range:U+0030-0039}

:root{
    --bg:#fff; --bg2:#F7F7F8; --surface:#fff; --ink:#000000; --body:#545356; --muted:#6B6A6E;
    --line:#DFE0E4; --line2:#EDEDEF; --field:#F7F7F8;
    --accent:#157567; --accent-hover:#0F5A4F; --accent-text:#157567; --accent-soft:#E4EFEC; --brand:#1F9383;
    --ok:#15773A; --warn:#B45309; --danger:#B91C1C; --ok-bg:#E8F5EC; --warn-bg:#FBF2E3; --danger-bg:#FBEBEB;
    --nav:#FFFFFF; --nav-line:#DFE0E4; --nav-ink:#545356; --nav-label:#6B6A6E;
    /* Masse aus dem Entwurfspaket (ManeaWebsite_Redesign, app.dc.html).
       Uebernommen ist, was der Entwurf auch benutzt: --ui-radius-lg traegt
       dort 403 Flaechen, --ui-radius-sm 137 Felder. Die dort zwar erklaerten,
       aber nirgends benutzten Merkmale (--ui-fs-*, --ui-lh-*, --ui-bw-*,
       --ui-hover-op, --ui-disabled-op) stehen bewusst nicht hier. */
    --ui-radius-sm:8px; --ui-radius-lg:14px; --ui-dur:250ms; --ui-ease:ease;
    --ui-sh-sm:0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
    --ui-sh-md:0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
  }
  [data-theme="dark"]{
    --bg:#000000; --bg2:#0D0D0E; --surface:#141416; --ink:#FFFFFF; --body:#BBBCC1; --muted:#9A999E;
    --line:#2A2A2D; --line2:#1E1E20; --field:#141416;
    --accent:#157567; --accent-hover:#0F5A4F; --accent-text:#84B5A8; --accent-soft:#16211F; --brand:#61A494;
    --ok:#4ADE80; --warn:#FBBF24; --danger:#F87171; --ok-bg:#12251A; --warn-bg:#221A10; --danger-bg:#1B1226;
    --nav:#0A0A0B; --nav-line:#2A2A2D; --nav-ink:#BBBCC1; --nav-label:#9A999E;
    --ui-sh-sm:0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
    --ui-sh-md:0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15);
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{ margin:0; font-family:"Raleway",sans-serif; color:var(--body); background:var(--bg2); -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.55; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1, "lnum" 1; }
  .app-cols > span, .app-cols > button, .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1, "lnum" 1; }
  h1,h2,h3,h4{ font-family:"Sora",sans-serif; color:var(--ink); margin:0; letter-spacing:-0.02em; }
  p{ margin:0; }
  a{ color:var(--accent-text); text-decoration:none; }
  :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--ui-radius-sm); }
  input{ font-family:"Raleway",sans-serif; font-size:14px; }
  /* Platzhalter trugen die Browser-Vorgabe (#757575): auf --field sind das
     4,07:1, unter der Schwelle fuer Fliesstext. `opacity:1` ist noetig, weil
     Firefox Platzhalter sonst zusaetzlich abdunkelt. */
  ::placeholder{ color:var(--muted); opacity:1; }
  @keyframes appIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
  .a-in{ animation:appIn .3s cubic-bezier(.2,.7,.3,1) both; }
  /* Beim Themenwechsel keine Uebergaenge.

     Die Uebergangsregel unten faerbt Hintergruende in 250ms um, die Schrift
     darin springt aber sofort: Spans erben ihre Farbe und haben keinen
     Uebergang. Beim Wechsel stand deshalb 250ms lang die NEUE Schriftfarbe auf
     dem ALTEN Grund -- auf der hervorgehobenen Zugangszeile weiss auf Mint,
     gemessene 1,18:1. Waehrend des Wechsels wird deshalb alles hart
     umgeschaltet; app.js setzt das Merkmal fuer einen Bildaufbau. */
  html[data-theme-wechsel] *,
  html[data-theme-wechsel] *::before,
  html[data-theme-wechsel] *::after{ transition:none; }
  @media (prefers-reduced-motion:reduce){ .a-in{ animation:none !important; } }

  .logo-ink{ display:block; } .logo-white{ display:none; }
  [data-theme="dark"] .logo-ink{ display:none; } [data-theme="dark"] .logo-white{ display:block; }
  .app-tabs{ display:none; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  .app-tabs::-webkit-scrollbar{ height:4px; }
  .app-tabs::-webkit-scrollbar-track{ background:transparent; }
  .app-tabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
  @media (max-width:1180px){
    .app-shell{ grid-template-columns:1fr !important; }
    .app-rail{ display:none !important; }
    .app-tabs{ display:flex !important; }
    .app-table{ overflow-x:auto !important; }
    .app-cols{ min-width:720px; }
    .tbl-wrap .tbl{ min-width:720px; }
    .app-kpi{ grid-template-columns:1fr 1fr !important; }
    .app-two{ grid-template-columns:1fr !important; }
    .app-work{ grid-template-columns:1fr !important; }
  }
  @media (max-width:640px){ .app-kpi{ grid-template-columns:1fr !important; } .app-meta{ display:none !important; } }

  *{ -webkit-tap-highlight-color:transparent; }
  button, a, input, textarea, [role="option"], [role="tab"]{ transition:background-color var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease), opacity var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease); }
  button:active{ transform:scale(0.985); }
  input:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); outline:none; }
  [role="listbox"]{ animation:mnPop .2s cubic-bezier(.32,.72,0,1) both; transform-origin:top center; }
  @keyframes mnPop{ from{ opacity:0; transform:translateY(-5px) scale(.985); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }
  /* mobile-safety */
  @media (max-width:640px){
    .app-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .app-cols{ min-width:640px; }
    .tbl-wrap .tbl{ min-width:640px; }
  }

/* ================================================================
   BAUTEILE
   Die Klassennamen stammen aus den Ansichten der App, JEDER WERT aus
   dem Design-Handoff. Kein Wert ist aus dem alten Stylesheet uebernommen —
   Radien, Innenabstaende, Schriftgroessen, Gewichte und Farben stehen so in
   app.dc.html. Zweck dieser Schicht: die rund 40 Ansichten erben das Design,
   ohne dass jede einzeln umgeschrieben werden muss.
   ================================================================ */

/* --- Flaechen ---------------------------------------------------- */
.card{border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--surface)}
.card-h{padding:14px 16px;border-bottom:1px solid var(--line2);background:var(--bg2);
  border-radius:var(--ui-radius-lg) var(--ui-radius-lg) 0 0;font-family:"Sora",sans-serif;font-size:13px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h2,.card-h h3{font-size:13px;font-weight:600;font-family:"Sora",sans-serif;color:var(--ink)}
.card-h .note{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);font-family:"Raleway",sans-serif}
.card-b,.card-body{padding:18px}
.info-box,.tip{border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--surface);padding:14px 16px;
  font-size:13px;color:var(--body);display:flex;gap:10px;align-items:flex-start}
.info-box svg,.tip svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent-text);margin-top:2px}
.empty-state{border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--surface);padding:36px;
  text-align:center;color:var(--muted)}
.empty-state .icon{width:46px;height:46px;margin:0 auto 14px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-text);display:grid;place-items:center}
.empty-state .icon svg{width:22px;height:22px}
.empty-state h2,.empty-state h3{font-size:15px;margin-bottom:6px}

/* --- Kopfzeile einer Flaeche ------------------------------------- */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.pagehead h1{font-family:"Sora",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em}
.pagehead .sub,.pagehead .note{font-size:13px;color:var(--muted)}

/* --- Knoepfe ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:"Sora",sans-serif;
  font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.btn:hover{border-color:var(--accent)}
.btn-primary,.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover,.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-danger{background:var(--surface);border-color:var(--line);color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent-text)}
.btn-sm{padding:8px 16px;font-size:12.5px;gap:6px}
.btn-sm svg{width:13px;height:13px}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}

/* --- Abzeichen --------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;
  padding:5px 10px;background:var(--field);color:var(--body);font-family:"Raleway",sans-serif}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.accent,.badge.info{background:var(--accent-soft);color:var(--accent-text)}

/* --- Felder ------------------------------------------------------ */
.inp,select.inp{width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--ui-radius-sm);
  background:var(--field);color:var(--ink);font-family:"Raleway",sans-serif;font-size:14px}
textarea.inp{height:auto;min-height:96px;padding:11px 12px;resize:vertical}
select.inp{cursor:pointer;appearance:none;-webkit-appearance:none;
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A999E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center / 14px;padding-right:38px}
.inp-date{height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--ui-radius-sm);background:var(--field);
  color:var(--ink);font-family:"Raleway",sans-serif;font-size:14px}
.label,.fld-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.searchbar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--ui-radius-sm);
  background:var(--field);padding:0 14px;height:44px}
.searchbar svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
/* Der Fokusring gehoert an .searchbar, nicht an das <input> darin: die
   Leiste zeichnet Rahmen und Rundung, das Feld ist nur der Textbereich. Die
   allgemeine Regel `input:focus{box-shadow:0 0 0 3px}` legte den Ring deshalb
   als ZWEITE Linie INNEN ins Feld -- und weil das Suchfeld autofocus traegt,
   sofort beim Seitenaufruf sichtbar. */
.searchbar:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent)}
.searchbar input:focus{box-shadow:none;border-color:transparent}
.searchbar input{flex:1;border:none;outline:none;background:transparent;color:var(--ink);
  font-family:"Raleway",sans-serif;font-size:14.5px}

/* --- Tabellen ---------------------------------------------------- */
/* overflow-x:auto, nicht hidden: eine breite Tabelle muss auf 360px scrollen
   koennen. Mit hidden waeren die rechten Spalten unerreichbar -- Mailadressen,
   IPs und ISO-Zeiten brechen nicht um. */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--surface);overflow-x:auto;max-width:100%}
/* Der Entwurf laesst seine Tabellen mit dem Schirm schmaler werden: 720px ab
   1180px Breite, 640px ab 640px. Eine feste Mindestbreite scrollt auf dem
   Telefon mehr, als noetig waere. */
.tbl-wrap .tbl{min-width:760px}
/* Steckt die Tabelle in einer Karte, rahmt die Karte -- nicht beide.
   Vorher zog "Verbundene Quellen" zwei 1px-Linien mit je 14px Radius
   ineinander. Der Entwurf hat an dieser Stelle GENAU EINEN Rahmen: app-table
   ist selbst die Karte (manea-app.html, Modul 3 und 6). */
.card > .tbl-wrap{border:0;border-radius:0;background:transparent}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line2);background:var(--bg2);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* 14px, nicht 12px: die Zeilenhoehe des Entwurfs (app-cols, 20 Fundstellen).
   Zwei Pixel je Seite klingen nach nichts und sind der Unterschied zwischen
   einer Liste, die atmet, und einer, die gedraengt wirkt. */
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line2);font-size:13px;color:var(--body);vertical-align:middle}
.tbl td:first-child{font-size:14px;font-weight:600;color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl .empty{text-align:center;color:var(--muted);padding:36px;font-size:13px}
.mono{font-variant-numeric:tabular-nums}

/* --- Raster und Hilfsklassen ------------------------------------- */
/* Beschriftung links, Wert rechts -- die Zeilensprache des Entwurfs.
   Bis zum 2026-09-06 trug .frow nur display:grid und gap:14px: EINE Spalte,
   keine Polsterung, keine Trennlinie. Auf dem Admin-Dashboard stand das
   Zustandsabzeichen dadurch UNTER seiner Beschriftung, und der Inhalt lag
   buendig an der Kartenkante -- dieselbe Fehlerklasse wie auf der Exportseite.

   Aktionsleisten benutzten dieselbe Klasse und funktionierten nur zufaellig
   (justify-content auf einem einspaltigen Raster). Sie haben jetzt eine eigene:
   .aktionsleiste. */
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line2)}
.frow:last-child{border-bottom:0}
.frow .fl{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.frow .fl b{font-size:14px;font-weight:600;color:var(--ink)}
.frow .fl span{font-size:13px;color:var(--body)}
.frow .fr{text-align:right;white-space:nowrap}

/* Aktionsleiste: Knoepfe am Ende einer Karte oder eines Formulars. Kein
   Innenabstand -- sie sitzt in einem Bereich, der schon polstert. */
.aktionsleiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.aktionsleiste.is-verteilt{justify-content:space-between}
.aktionsleiste.hat-abstand{margin-top:12px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stack{display:grid;gap:14px}
.fl{text-align:left}.fr{text-align:right}
.u-text-right{text-align:right}
.u-mt-4{margin-top:4px}.u-mt-18{margin-top:18px}
.u-card-gap{display:grid;gap:16px}
.u-form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sub{color:var(--muted);font-size:13px}
.note{color:var(--muted);font-size:12px}
.ok{color:var(--ok)}.warn{color:var(--warn)}.danger{color:var(--danger)}.accent{color:var(--accent-text)}
.fn-ref{font-size:10px;vertical-align:super;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px}

/* --- Kennzahlenreihe --------------------------------------------- */
.app-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.kpi{border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--surface);padding:18px;min-width:0}
.kpi-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi-value{display:block;margin-top:6px;font-family:"Sora",sans-serif;font-size:26px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.kpi-note{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
/* Ein langer Wert -- etwa ein Zeitstempel -- bricht um, statt die Karte zu
   sprengen. Frueher hing das an .stat-card .u-text-small. */
.kpi-value.is-lang{font-size:18px;word-break:break-word}
.kpi-state{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:"Sora",sans-serif;font-size:20px;
  font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.kpi-state svg{width:18px;height:18px;flex:0 0 auto}
.kpi-state.is-ok svg{color:var(--ok)}
.kpi-state.is-open svg{color:var(--muted)}

/* --- Arbeitsbereich der Uebersicht -------------------------------- */
/* Zwei Spalten aus dem Entwurf (reference/app, Bildschirm "Uebersicht"):
   links die offenen Aufgaben, rechts die Aufbewahrung. Die Masse sind die des
   Entwurfs -- 1.35fr/0.65fr, 20px Abstand, oben 20px Luft zur
   Kennzahlenreihe. Der Umbruch auf eine Spalte stand schon seit dem
   Handoff im Medienblock und wartete auf diese Grundregel: bis hierher gab es
   nur die Ausnahme fuer schmale Schirme, nie den Normalfall. */
.app-two{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;align-items:start;margin-top:20px}

/* Eine Aufgabe: Sinnbild, Text, Knopf -- dieselbe Zeilensprache wie die
   Zugangswahl der Einstiegsseite, damit das Produkt eine Sprache spricht. */
.aufgabe{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.aufgabe:last-child{border-bottom:0}
.aufgabe-marke{flex:0 0 auto;width:32px;height:32px;border-radius:var(--ui-radius-lg);
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.aufgabe-marke svg{width:16px;height:16px}
/* Dringend traegt den Warnton -- denselben, den die Mails fuehren. Kein Rot:
   der Entwurf kennt genau einen Warnton und kein Alarmrot. */
.aufgabe-marke.is-dringend{background:var(--warn-bg);color:var(--warn)}
.aufgabe-text{flex:1;min-width:0}
.aufgabe-titel{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.aufgabe-note{display:block;margin-top:2px;font-size:13px;color:var(--body)}
.aufgabe .btn{flex:0 0 auto}

/* Aufbewahrung: Beschriftung links, Wert rechts, Wert in der Anzeigeschrift. */
.pflichten{display:flex;flex-direction:column;gap:14px;padding:16px}
.pflicht{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink)}
.pflicht-wert{font-family:"Sora",sans-serif;font-weight:700;color:var(--ink);white-space:nowrap}
.pflicht-trenner{height:1px;background:var(--line2)}
.pflicht-note{font-size:12px;line-height:1.5;color:var(--muted)}

/* Keine offenen Aufgaben ist ein guter Zustand und sieht auch so aus:
   ruhig, ohne Symbol, ohne Farbe. */
.aufgaben-leer{padding:28px 16px;text-align:center;font-size:14px;color:var(--body)}

/* --- Arbeitsbereich der Suche ------------------------------------- */
/* Trefferliste und Vorschau nebeneinander, Masse aus dem Entwurf
   (reference/app, Bildschirm "Archivsuche"): 1.4fr/0.6fr. Wie bei .app-two
   stand auch hier bisher NUR die Umbruchregel fuer schmale Schirme im
   Blatt -- die Ausnahme war gebaut, der Normalfall nie.

   Sven am 2026-09-06: "Detail daneben und eben mehr Details wenn man mehr
   sehen will." Die Spalte zeigt deshalb Metadaten und fuehrt weiter, sie
   ersetzt die Detailseite nicht. */
.app-work{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;align-items:start;margin-top:20px}

/* --- Archivsuche ------------------------------------------------------------
   Alle Masse aus dem Entwurf, Abschnitt "1 ARCHIVSUCHE" (app.dc.html Z. 268
   bis 372). Dort stehen sie als Inline-Stile; die CSP dieser Anwendung erlaubt
   sie nur in Mailvorlagen, deshalb liegen sie hier als Klassen.

   Der Suchbereich ist eine Karte mit drei Baendern: Eingabe, Postfachchips und
   Filter im Kopf, darunter die Bilanzzeile auf --bg2. */
.such-karte{border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--surface)}
.such-kopf{padding:16px;border-bottom:1px solid var(--line2)}
.such-zeile{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:var(--ui-radius-lg);background:var(--field);padding:0 14px;height:44px}
/* Derselbe Fall wie bei .searchbar, und ich habe ihn hier wieder gebaut: die
   allgemeine Regel input:focus{box-shadow:0 0 0 3px} legt den Ring INNEN ins
   Feld, also als zweite Linie neben dem Rahmen der Leiste -- und weil das
   Suchfeld autofocus traegt, sofort beim Seitenaufruf. Der Ring gehoert an die
   Leiste: sie zeichnet Rahmen und Rundung, das Feld ist nur der Textbereich. */
.such-zeile:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent)}
.such-zeile .such-eingabe:focus{box-shadow:none;border-color:transparent}
.such-lupe{flex:0 0 auto;width:16px;height:16px;stroke:var(--brand)}
.such-eingabe{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);
  outline:none;font-family:"Raleway",sans-serif;font-size:14px}
.such-los{flex:0 0 auto;background:var(--accent);color:#FFFFFF;border:none;
  font-family:"Sora",sans-serif;font-weight:600;font-size:13px;padding:8px 16px;
  border-radius:var(--ui-radius-lg);cursor:pointer}
.such-gruppe{margin-top:14px}
.such-gruppe-titel{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.such-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Chip aus dem Entwurf: chipOff ist der Grundzustand, chipOn faerbt ihn.
   Als <a> gebaut, weil ein Chip den Suchbereich in der Adresse umschaltet --
   damit bleibt eine Suche verlinkbar und kommt ohne JavaScript aus. */
.such-chip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:"Raleway",sans-serif;font-size:13px;font-weight:600;color:var(--body);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;cursor:pointer;text-decoration:none}
.such-chip.is-an{color:#FFFFFF;background:var(--accent);border-color:var(--accent)}
.such-chip svg{flex:0 0 auto;width:12px;height:12px}
.such-alle{flex:0 0 auto;background:transparent;border:none;font-family:"Raleway",sans-serif;
  font-size:13px;font-weight:600;color:var(--accent-text);cursor:pointer;padding:6px 4px;
  text-decoration:none}
.such-summe{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.such-filter{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Zeitraum als Klappe -- die Gestalt des Entwurfs (Knopf mit Winkel, darunter
   eine Liste). Als <details> ohne Skript, wie die Kontoklappe: die CSP dieser
   Anwendung verbietet Inline-Skripte, und so ist es per Tastatur und
   Vorleseprogramm von Haus aus bedienbar.

   Warum ueberhaupt: zwei nackte <input type=date> standen live mit dem
   heutigen Datum in der Filterzeile und sahen nach einem gesetzten Filter aus,
   obwohl keiner gesetzt war. Nachgemessen fasst KEIN eigenes Skript sie an --
   app.js wirkt nur auf form[data-export-range], datepicker.js nur auf
   input.inp-date. Es kam also aus dem Browser. Die Felder tragen deshalb
   autocomplete="off" (sie haengen am selben Formular wie "Suchen", ausgefuellt
   wuerden sie mitgeschickt) und stehen in der Klappe statt in der Ruhezeile. */
.such-zeitraum{position:relative;flex:0 0 auto}
.such-zeitraum > summary{display:inline-flex;align-items:center;gap:7px;
  font-family:"Raleway",sans-serif;font-size:13px;font-weight:600;color:var(--body);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;cursor:pointer;list-style:none}
.such-zeitraum > summary::-webkit-details-marker{display:none}
.such-zeitraum.is-gesetzt > summary{color:#FFFFFF;background:var(--accent);border-color:var(--accent)}
.such-zeitraum-pfeil{flex:0 0 auto;width:12px;height:12px;transition:transform var(--ui-dur) var(--ui-ease)}
.such-zeitraum[open] .such-zeitraum-pfeil{transform:rotate(180deg)}
.such-zeitraum-klappe{position:absolute;left:0;top:calc(100% + 4px);z-index:40;min-width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-sh-md);padding:8px;display:flex;flex-direction:column;gap:4px}
.such-zeitraum-wahl{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--ui-radius-sm);
  font-size:13px;color:var(--ink);text-decoration:none}
.such-zeitraum-wahl:hover{background:var(--bg2)}
.such-zeitraum-wahl.is-an{font-weight:700;color:var(--accent-text)}
.such-zeitraum-genau{display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:8px 10px 4px;border-top:1px solid var(--line2);margin-top:4px}
.such-zeitraum-genau label{grid-column:1 / -1;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.such-datum{width:100%;height:34px;padding:0 8px;border:1px solid var(--line);
  border-radius:var(--ui-radius-sm);background:var(--field);color:var(--ink);
  font-family:"Raleway",sans-serif;font-size:13px}
.such-zeitraum-genau .btn{grid-column:1 / -1;margin-top:4px}
.such-merken{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;
  font-weight:600;color:var(--accent-text);background:transparent;border:none;cursor:pointer}
.such-merken svg{width:14px;height:14px}
.such-bilanz{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg2);
  border-bottom:1px solid var(--line2);flex-wrap:wrap;font-size:12px;color:var(--body)}
.such-bilanz .rechts{margin-left:auto;color:var(--muted)}

/* Trefferliste: Spaltenbreiten wie im Entwurf (28px Haken, Betreff dehnbar,
   190/150/104/92 fuer Absender, Postfach, Datum, Integritaet). */
/* Bei table-layout:fixed ist die Spaltenbreite die AUSSENbreite -- die
   Polsterung von .tbl (2x16px) geht davon ab. Mit den rohen Zahlen des
   Entwurfs blieben der Integritaetsspalte 60px Inhalt, und "verkettet" klemmte.
   Diese Tabelle polstert deshalb 12px seitlich (das ist der Spaltenabstand des
   Entwurfs), aussen 16px, und die Breiten tragen die Polsterung mit. */
.such-tabelle{table-layout:fixed}
.such-tabelle th,.such-tabelle td{padding-left:12px;padding-right:12px}
.such-tabelle th:first-child,.such-tabelle td:first-child{padding-left:16px}
.such-tabelle th:last-child,.such-tabelle td:last-child{padding-right:16px}
/* Die Zahlen sind die des Entwurfs plus 24px Polsterung, dann so weit
   zurueckgenommen, wie der Inhalt es zulaesst -- gemessen, nicht geschaetzt:
   "verkettet" misst 69px, "06.09.2026" 72px, das Kaestchen 15px. Zu gierige
   Spalten quetschten den Betreff bei 1280px auf 108px.
   min-width plus der waagerechte Lauf von .tbl-wrap ist die Antwort des
   Entwurfs selbst (dort .app-cols{min-width:720px}). */
.such-tabelle{min-width:700px}
.such-tabelle .sp-haken{width:44px}
.such-tabelle .sp-absender{width:186px}
.such-tabelle .sp-postfach{width:150px}
.such-tabelle .sp-datum{width:104px}
.such-tabelle .sp-integritaet{width:108px}
/* Nur die drei Textspalten kuerzen. Vorher traf die Regel JEDE Zelle -- auch
   die Hakenspalte, die dadurch drei Puenktchen hinter das Kaestchen setzte. */
.such-tabelle td.is-gekuerzt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-tabelle td.sp-fest{white-space:nowrap}
.such-betreff{font-family:"Raleway",sans-serif;font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:none}
.such-betreff:hover{text-decoration:underline}
.such-haken{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
.such-siegel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--ok)}
.such-siegel svg{width:13px;height:13px}
.such-siegel.is-offen{color:var(--muted)}

/* Auswahlband. Es steht immer -- ohne Haken exportiert es alle Treffer, mit
   Haken die Auswahl. Nur die BESCHRIFTUNG wechselt, und :has() leistet das
   ohne Skript. Wo :has() fehlt, faellt die Regel weg und beide Beschriftungen
   stehen da -- sichtbar zu viel, aber nie kaputt. */
.such-auswahl{display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--accent-soft);flex-wrap:wrap}
.such-form:not(:has(.such-haken:checked)) .mit-auswahl{display:none}
.such-form:has(.such-haken:checked) .ohne-auswahl{display:none}
.such-auswahl-text{font-size:13px;font-weight:700;color:var(--accent-text)}
.such-auswahl-hinweis{margin-left:auto;font-size:12px;color:var(--body)}
.such-leer{padding:44px 16px;text-align:center}
.such-leer-titel{display:block;font-family:"Sora",sans-serif;font-size:15px;font-weight:700;
  color:var(--ink)}
.such-leer-text{display:block;margin-top:6px;font-size:13px;color:var(--body)}
.such-leer .btn{margin-top:16px}

/* Objektdetail. Die Spalte klebt beim Blaettern durch lange Listen oben mit. */
.detail-spalte{position:sticky;top:20px}
.detail-liste{padding:16px;display:flex;flex-direction:column;gap:14px}
.detail-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.detail-wert{display:block;margin-top:4px;font-size:14px;color:var(--ink)}
.detail-wert.is-stark{font-weight:600}
.detail-wert.is-lang{overflow-wrap:anywhere}
.detail-trenner{height:1px;background:var(--line2)}
.detail-siegel{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;
  font-weight:700;color:var(--ok)}
.detail-siegel.is-offen{color:var(--muted)}
.detail-siegel svg{flex:0 0 auto;width:14px;height:14px}
.detail-taste{display:block;text-align:center;font-family:"Sora",sans-serif;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);font-weight:600;font-size:13px;padding:10px;
  border-radius:var(--ui-radius-lg);cursor:pointer;text-decoration:none}
.detail-taste:hover{background:var(--bg2)}
.detail-leer{padding:36px 16px;text-align:center;font-size:13px;color:var(--muted)}
/* Waehrend nachgeladen wird, bleibt die alte Spalte stehen und wird blass --
   ein Leeren waere ein Sprung, und der sieht aus wie ein Fehler. */
.detail-spalte.is-laedt .detail-liste,.detail-spalte.is-laedt .detail-leer{opacity:.45}
.detail-spalte .detail-liste,.detail-spalte .detail-leer{transition:opacity var(--ui-dur) var(--ui-ease)}
/* Der gewaehlte Treffer bleibt in der Liste erkennbar -- sonst weiss man nach
   dem Blaettern nicht mehr, wovon die Spalte spricht. */
.tbl tr.is-gewaehlt > td{background:var(--accent-soft)}
/* Ohne Rueckmeldung beim Ueberfahren weiss niemand, auf welcher Zeile er ist --
   bei sechs Spalten ueber die volle Breite ist das der Unterschied zwischen
   "lesbar" und "raten". Der gewaehlte Treffer behaelt seine Faerbung. */
.such-tabelle tbody tr:hover > td{background:var(--bg2)}
.such-tabelle tbody tr.is-gewaehlt:hover > td{background:var(--accent-soft)}
/* Das Kaestchen ist 15px gross. Anklickbar ist die ganze Zelle: die Polsterung
   wandert dafuer von der Zelle in die Beschriftung darin, sonst waere das
   Klickziel nur der Inhaltsbereich von 16px Breite. */
.such-tabelle td:first-child{padding:0}
.such-haken-zelle{display:flex;align-items:center;padding:14px 12px 14px 16px;cursor:pointer}

/* --- Postfachkacheln der Uebersicht ------------------------------ */
/* Postfachkacheln. Sie stehen seit POST-311 IN einer Karte mit Kopf, nicht mehr
   frei unter der Seite -- deshalb tragen sie hier die INNERE Sprache des
   Entwurfs: die leisere Linie (--line2), den kleinen Radius und die Flaeche des
   Seitengrunds, so wie jede andere Reihe innerhalb einer Karte. Eine Karte in
   der Karte waere zweimal derselbe Rahmen. */
.archive-mailbox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.archive-mailbox-card{border:1px solid var(--line2);border-radius:var(--ui-radius-sm);background:var(--bg2);padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.archive-mailbox-card:hover{border-color:var(--accent);background:var(--surface)}
.archive-mailbox-top{display:flex;gap:6px;flex-wrap:wrap}
.archive-mailbox-address{font-family:"Sora",sans-serif;font-size:14px;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.35}
.archive-mailbox-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}

/* Themen-Umschalter: der Kopf zeigt je Thema genau ein Symbol. */
.is-dark{display:none}
[data-theme="dark"] .is-dark{display:block}
[data-theme="dark"] .is-light{display:none}

@media (max-width:1180px){
  .app-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .archive-mailbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .app-kpi{grid-template-columns:1fr}
  .archive-mailbox-grid{grid-template-columns:1fr}
}

/* ================================================================
   GERUEST DER EINZELSEITEN
   Diese Regeln tragen AUSSCHLIESSLICH Struktur: Raster, Spalten, Abstaende,
   Flussrichtung, Ueberlauf. Keine Farbe, kein Radius, keine Schrift, kein
   Rahmen, kein Schatten -- alles Sichtbare kommt aus dem Design-Handoff.

   Warum sie existieren: das alte Stylesheet ist entfernt, und rund 220
   seitenspezifische Klassen haetten sonst gar keine Regel mehr. Ihr LAYOUT ist
   keine Gestaltungsentscheidung des alten Designs, sondern beschreibt, was auf
   der jeweiligen Seite nebeneinander steht.

   MEDIENABFRAGEN BLEIBEN MEDIENABFRAGEN. Der erste Anlauf hat ihren Inhalt
   flach herausgeschrieben -- damit galten Mobil-Ueberschreibungen bei jeder
   Breite, und dieselben Selektoren standen zweimal da. Das war der Grund fuer
   die 20 doppelten Regeln.
   ================================================================ */
.subnav{display:flex;gap:.2rem;padding:.45rem clamp(18px,4vw,52px);overflow-x:auto}
.subnav::-webkit-scrollbar{display:none}
.subnav a{padding:.3rem .7rem;white-space:nowrap}
.delegation-banner svg{width:15px}
.admin-banner a{margin-left:auto}
.invite-foot svg{width:16px;flex:none}
.status-flash{display:flex;align-items:center;gap:9px;padding:10px 14px;margin-bottom:14px}
.status-flash svg{width:15px;flex:none}
.legal-footnotes{margin-top:18px;padding:12px 2px 0}
.legal-footnotes h2{margin:0 0 7px}
.legal-footnotes ol{margin:0;padding-left:18px;display:grid;gap:6px}
.legal-footnotes li{padding-left:2px;overflow-wrap:anywhere}
.source-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.source-method-card{padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:168px}
.source-method-card h2{margin:0}
.source-method-card p{margin:0;flex:1}
.source-method-card .btn{align-self:flex-start}
.source-mailbox-panel{margin:0 0 16px}
.source-mailbox-body{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:18px;align-items:start}
.source-mailbox-copy{display:grid;gap:5px}
.source-mailbox-list{display:flex;flex-wrap:wrap;gap:8px}
.source-mailbox-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;max-width:100%;padding:6px 10px}
.source-mailbox-chip .d{width:7px;flex:none}
.source-mailbox-chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-mailbox-empty{padding:12px 14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mail-row .meta{white-space:nowrap}
.welcome{display:grid;place-items:start center}
/* Die Karte trug bis 2026-09-04 nur Breite und Polsterung -- kein Grund, kein
   Rahmen, keine Rundung. Auf der Anmeldeseite stand der Text deshalb lose auf
   der Seite statt in einem Feld. Sie bekommt jetzt dasselbe Material wie jede
   andere Flaeche der Oberflaeche: Grund, Haarlinie, Radius und Schatten aus den
   Merkmalen des Entwurfs (--ui-radius-lg, --ui-sh-md). Vorher standen hier 16px
   und ein eigenes Schattenrezept; --ui-sh-md ist im Hellmodus knapper als dieses
   Rezept -- die alte Beanstandung "zu viel Schatten" bleibt also erfuellt. */
.welcome-card{width:min(430px,100%);padding:30px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-sh-md)}
/* Das Sinnbild als Abzeichen, nicht als loses Symbol -- gleiche Sprache wie
   die Mandantenkachel und die Kennzahlenreihe. */
.welcome-card .icon{width:44px;height:44px;border-radius:var(--ui-radius-lg);
  background:var(--accent-soft);color:var(--accent-text)}

.welcome-card .icon{width:46px;display:grid;place-items:center;margin:0 0 18px}
.welcome-card .icon svg{width:23px}
.welcome-card h1{margin-bottom:8px}
.welcome-card p{margin-bottom:20px}
.welcome-card .welcome-note{margin:18px 0 0}
.welcome-card .welcome-note a + a{margin-left:14px}
.welcome-card .cta{margin-top:14px}

/* Einstiegsseite: die Zugangswahl aus dem Entwurfspaket.

   Zwei Vorgaenger stehen hinter dieser Flaeche. Bis zum 2026-09-05 trug die
   Seite `.welcome-card` -- 430 Pixel fest, auf 1440 Pixeln eine Textspalte in
   1000 Pixeln Leere. Danach trug sie einen Produktauftritt mit zwei
   Auswahlkarten; die waren breit genug, aber sie trennten die falsche Sache.
   `login-auswahl.dc.html` trennt verwalten von lesen und legt beide Zugaenge
   UNTEREINANDER in eine schmale Karte, damit sie vergleichbar sind statt
   nebeneinander zu konkurrieren. Masse und Aufbau von dort. */
.zugangswahl{width:min(27rem,100%);display:grid;gap:18px}
.zugang-karte{overflow:hidden}
.zugang-kopf{padding:26px 30px 20px}
.zugang-kopf h1{font-family:"Sora",sans-serif;font-size:23px;line-height:1.15;
  font-weight:800;letter-spacing:-.025em}
.zugang-kopf p{margin-top:7px;font-size:14px;line-height:1.6;color:var(--muted)}
/* Eine Zeile pro Zugang: Sinnbild, Text, Pfeil. Der Hauptvorgang traegt die
   weiche Markenflaeche, der zweite bleibt neutral -- so ist die Empfehlung
   sichtbar, ohne dass der andere Weg wie eine Sackgasse aussieht. */
.zugang{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;
  border-top:1px solid var(--line2);text-decoration:none;color:inherit;
  transition:background-color var(--ui-dur) var(--ui-ease)}
.zugang:hover{background:var(--bg2)}
.zugang.is-primaer{background:var(--accent-soft)}
.zugang.is-primaer:hover{background:var(--bg2)}
.zugang-icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:var(--ui-radius-sm);background:var(--bg2);color:var(--accent-text)}
.zugang.is-primaer .zugang-icon{background:var(--accent);color:#fff}
.zugang-icon svg{width:20px;height:20px}
.zugang-text{flex:1;min-width:0}
.zugang-titel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:"Sora",sans-serif;
  font-size:17px;font-weight:700;color:var(--ink)}
.zugang-was{display:block;margin-top:6px;font-size:14px;line-height:1.6;color:var(--body)}
.zugang-wer{display:block;margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.zugang-pfeil{flex:0 0 auto;width:17px;height:17px;margin-top:13px;color:var(--muted)}
.zugang-hilfe{padding:18px 30px;background:var(--bg2);border-top:1px solid var(--line2)}
.zugang-hilfe p{font-size:12.5px;line-height:1.6;color:var(--muted)}
.zugang-hinweise{display:grid;gap:8px}
.zugang-hinweise p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.zugang-hinweise a{font-weight:600}
.zugang-plakette{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px 8px}

/* Anmeldekarte aus `login-postfach.dc.html`. Die Felder sind hier 48px hoch und
   tragen den grossen Radius -- anders als in der Anwendung, wo der Entwurf 44px
   und den kleinen Radius benutzt. Zwei Flaechen, zwei Groessen; das ist in der
   Vorlage so und kein Versehen. */
.anmeldung{width:100%}
.anmelde-karte{overflow:hidden}
.anmelde-kopf{padding:26px 32px 0}
.anmelde-kopf h1{font-family:"Sora",sans-serif;font-size:24px;line-height:1.15;font-weight:800;
  letter-spacing:-.025em}
.anmelde-kopf p{margin-top:7px;font-size:14px;line-height:1.6;color:var(--muted)}
.anmelde-rumpf{padding:24px 32px 28px}
.feld{display:block}
.feld-name{display:block;font-size:12.5px;font-weight:600;color:var(--body);margin-bottom:7px}
.feld-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.feld-kopf .feld-name{margin-bottom:0}
.feld-kopf a{font-size:12.5px;font-weight:600}
.inp-gross{height:48px;padding:0 16px;border-radius:var(--ui-radius-lg);font-size:15px}
.pw-huelle{position:relative;display:block}
.pw-huelle .inp-gross{padding-right:52px}
.pw-zeigen{position:absolute;right:6px;top:6px;width:36px;height:36px;display:inline-flex;
  align-items:center;justify-content:center;border:none;border-radius:var(--ui-radius-sm);
  background:transparent;color:var(--muted);cursor:pointer;padding:0}
.pw-zeigen svg{width:17px;height:17px}
.anmelde-knopf{margin-top:20px;width:100%;background:var(--accent);color:#fff;border:none;
  font-family:"Sora",sans-serif;font-weight:600;font-size:15.5px;padding:15px;
  border-radius:999px;cursor:pointer}
.anmelde-knopf:hover{background:var(--accent-hover)}
.anmelde-fehler{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--danger)}
.anmelde-fuss{padding:16px 32px;border-top:1px solid var(--line2);background:var(--bg2)}
.anmelde-fuss a{font-size:13.5px;font-weight:600}
.anmelde-fuss p{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.u-mt-16{margin-top:16px}
.pager .nav{display:flex;gap:6px}
.invite-reveal{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invite-reveal .inp{flex:1;min-width:240px}
.invite-mb-list{display:flex;flex-direction:column;gap:4px;overflow:auto;padding:8px}
.invite-mb-opt{display:flex;align-items:center;gap:9px;padding:3px 4px;word-break:break-all}
.qo7pg{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.qo7pg-btn{display:inline-grid;place-items:center;min-width:32px;padding:0 9px}
.qo7pg-btn svg{width:14px}
.qo7pg-dots{padding:0 4px}
.wm-listhead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem 1rem}
/* Mailliste. Vorher drei gleich laute Spalten mit VARIABLER Absenderbreite:
   der Betreff begann auf jeder Zeile woanders, das Auge fand keine Kante, und
   weil der Betreff die Linkfarbe trug, war die Liste eine Wand aus Gruen.
   Jetzt: feste Absenderspalte, damit die Betreffe untereinander stehen; der
   Betreff in der Textfarbe (die ganze ZEILE ist der Link, der Betreff muss
   nicht zusaetzlich rufen); Absender und Metadaten treten zurueck; Haarlinien
   statt Fugen. Ziffern tabellarisch, damit Groessen und Daten fluchten. */
.wm-row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;
  gap:.6rem 1rem;padding:.7rem 1rem;align-items:baseline}
.mail-row + .mail-row{border-top:1px solid var(--line2)}
.mail-row:hover{background:var(--field)}
.wm-row .from{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.wm-row .subj{color:var(--ink);font-weight:600}
.wm-row .meta{color:var(--muted);font-size:12px;text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.wm-row .subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-row .meta{white-space:nowrap}
.wm-toolbar{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;padding:.6rem 1.1rem}
.wm-rhead{padding:1.1rem 1.3rem}
.wm-rhead h2{margin:0 0 .6rem}
.wm-rhead .meta{display:flex;flex-direction:column;gap:.2rem}
.wm-rbody{padding:1.3rem}
.wm-mail-frame{width:100%}
.wm-ratt{padding:1rem 1.3rem;display:flex;gap:.5rem;flex-wrap:wrap}
.att-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem}
.att-chip svg{width:13px}
.wm-secure-banner{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.45rem .7rem}
.wm-secure-banner svg{width:14px;flex:none}
.mail-manage{padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.9rem}
.mail-manage-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.mail-manage-label{display:flex;align-items:flex-start;gap:.5rem;flex:1;min-width:240px}
.mail-manage-label svg{width:16px;flex:none;margin-top:2px}
.mail-manage-label b{display:block}
.mail-manage-label .muted{display:block;margin-top:1px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.steps li{position:relative;padding-left:2rem}
.steps li::before{position:absolute;left:0;top:-1px;width:1.35rem;display:flex;align-items:center;justify-content:center}
.compliance-head{align-items:flex-start}
.compliance-hero{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;margin-bottom:16px}
.compliance-score{display:grid;gap:6px}
.compliance-template-version{margin-top:10px}
/* Die Leiste trug bis zum 2026-09-06 NUR overflow:hidden und ihre Fuellung nur
   eine Breite -- weder Hoehe noch Flaeche. Sie rendert damit als nichts:
   ausgerechnet der Nachweisstand war unsichtbar. Masse aus dem Entwurf
   (manea-app.html, Modul 9): 6px hoch, voll gerundet, Spur in --bg2,
   Fuellung in --accent.

   Die Fuellung traegt BEWUSST immer den Markenton, auch bei niedrigem Stand.
   Eine Ampel waere hier dieselbe Erfindung wie die Farbweiche, die Sven am
   2026-09-06 an den Mails beanstandet hat: der Entwurf faerbt Fortschritt
   nicht nach Hoehe. Die Aussage steht in der Zahl daneben, nicht in der
   Farbe. */
.compliance-score-bar{margin-top:12px;height:6px;border-radius:999px;background:var(--bg2);overflow:hidden}
.compliance-score-bar span{display:block;height:100%;border-radius:999px;background:var(--accent)}
.compliance-score-bar .is-score-0{width:0}
.compliance-score-bar .is-score-10{width:10%}
.compliance-score-bar .is-score-20{width:20%}
.compliance-score-bar .is-score-30{width:30%}
.compliance-score-bar .is-score-40{width:40%}
.compliance-score-bar .is-score-50{width:50%}
.compliance-score-bar .is-score-60{width:60%}
.compliance-score-bar .is-score-70{width:70%}
.compliance-score-bar .is-score-80{width:80%}
.compliance-score-bar .is-score-90{width:90%}
.compliance-score-bar .is-score-100{width:100%}
.compliance-hero-copy{min-width:0}
.compliance-hero-copy h2{margin-bottom:5px}
.compliance-hero-copy p{max-width:68ch}
.compliance-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.compliance-stats{margin-bottom:16px}
.compliance-legal-note{margin-top:0}
.compliance-tenant-grid,.compliance-main-grid,.compliance-evidence-grid{margin-bottom:16px}
.compliance-check-list{display:grid}
.compliance-check{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:13px 18px}
.compliance-check-icon{position:relative;width:30px;display:grid;place-items:center;margin-top:0;flex:none}
.compliance-check-icon svg{width:16px;display:block}
.compliance-check-icon.is-ok svg{display:block}
.compliance-check-text{min-width:0;padding-top:1px}
.compliance-check-text b{display:block}
.compliance-check-detail{display:block;margin-top:2px}
.compliance-access-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 0}
.compliance-access-row:first-child{padding-top:0}
.compliance-access-row b{display:block}
.compliance-access-row span:not(.badge):not(.d){display:block;margin-top:2px}
.compliance-action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.compliance-task-list,.compliance-retention-list{display:grid}
.compliance-task-row,.compliance-retention-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:13px 18px}
.compliance-task-row b,.compliance-retention-row b{display:block}
.compliance-task-row span:not(.badge):not(.d),.compliance-retention-row span{display:block;margin-top:2px}
.compliance-retention-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.compliance-retention-row strong{white-space:nowrap}
.compliance-control-matrix{margin-bottom:16px}
.compliance-control-list{display:grid}
.compliance-control-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:start;padding:14px 18px}
.compliance-control-row .badge{justify-content:center}
.compliance-control-copy b{display:block}
.compliance-control-copy span{display:block;margin-top:3px}
.compliance-control-copy small{display:block;margin-top:4px}
.compliance-dsgvo-list{margin-top:14px}
.compliance-status-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.compliance-metric-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.compliance-metric{padding:9px 10px}
.compliance-metric span{display:block}
.compliance-metric b{display:block;margin-top:2px}
.compliance-evidence-note{margin-top:10px}
.compliance-doc-grid,.compliance-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.compliance-doc-block,.compliance-package-link{padding:13px 14px}
.compliance-doc-block b,.compliance-package-link b{display:block;margin-bottom:5px}
.compliance-doc-block span,.compliance-package-link span{display:block}
.compliance-boundaries{margin-top:16px}
.u-icon-warn{width:16px;min-width:16px;max-width:16px}
.compliance-boundaries .u-help-list-clean{display:grid;gap:0}
.compliance-boundaries .u-warn-item{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:11px 0}
.compliance-boundaries .u-icon-warn{margin-top:3px}
.management-head{align-items:center}
.management-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;margin-bottom:16px}
.management-kicker{display:block;margin-bottom:5px}
.management-hero h2{margin-bottom:5px}
.management-hero p{max-width:76ch}
.management-hero-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.management-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.management-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:9px 12px;padding:15px 16px}
.management-card-icon{grid-row:1 / span 2;width:30px;display:grid;place-items:center;flex:none}
.management-card-icon svg{width:16px}
.management-card-main{min-width:0;display:block}
.management-card-title{display:block}
.management-card-body{display:block;margin-top:4px}
.management-card-metric{grid-column:2;display:inline-flex;align-items:center;justify-self:start;min-height:24px;padding:3px 8px}
.management-info-grid{align-items:start}
.management-list{display:grid}
.management-list-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:14px 18px}
@media(max-width:1100px){.management-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.source-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.source-mailbox-body{grid-template-columns:1fr}}
@media(max-width:880px){.subnav{padding:.42rem 12px}.row2,.row3,.row4{grid-template-columns:1fr;gap:12px}.welcome{padding:22px 16px 30px}.welcome-card{padding:26px 22px}.compliance-hero{grid-template-columns:1fr;align-items:stretch;padding:16px}.compliance-hero-actions{justify-content:flex-start}.compliance-hero-actions .btn{width:100%}.compliance-doc-grid,.compliance-package-grid{grid-template-columns:1fr}.compliance-action-row .btn{width:100%}.management-hero{grid-template-columns:1fr;padding:16px}.management-hero-actions{justify-content:flex-start}.management-hero-actions .btn{width:100%}.management-card-grid{grid-template-columns:1fr;gap:12px}.management-card{grid-template-columns:auto minmax(0,1fr);padding:14px}.management-list-row{grid-template-columns:1fr;gap:4px;padding:13px 16px}.source-method-grid{grid-template-columns:1fr;gap:12px}.source-method-card{min-height:0}.source-mailbox-list{display:grid;grid-template-columns:1fr}}
@media(max-width:600px){.legal-footnotes{margin-top:22px;padding:14px 0 0}.legal-footnotes h2{margin-bottom:9px}.legal-footnotes ol{padding-left:22px;gap:8px}.legal-footnotes li{padding-left:4px}}
.u-form-reset{margin:0}
.u-card-filter{padding:12px;margin-bottom:14px}
.u-card-accent-stack{margin-bottom:16px}
.u-padded-note{padding:16px;margin-bottom:16px}
.u-mt-2{margin-top:2px}
.u-mt-6{margin-top:6px}
.u-mt-7{margin-top:7px}
.u-mt-10{margin-top:10px}
.u-mb-10{margin-bottom:10px}
.u-mb-16{margin-bottom:16px}
.u-pt-0{padding-top:0}
.u-full{width:100%}
.u-input-full{margin-top:4px;width:100%}
.u-input-mono{margin-top:4px}
.u-select-sm{min-width:140px}
.u-max-140{max-width:140px}
.u-max-200{max-width:200px}
.u-max-240{max-width:240px}
.u-min-122{min-width:122px}
.u-restore-confirm{width:220px;max-width:min(52vw,260px);min-height:30px;padding:5px 9px}
.u-flex{display:flex}
.u-flex-center-8{display:flex;gap:8px;align-items:center}
.u-flex-center-10{display:flex;gap:10px;align-items:center}
.u-flex-end-6{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.u-flex-end-8{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.u-help-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.u-help-copy{margin:0;flex:1;min-width:240px}
.u-row-start{align-items:start}
.u-row-wide{grid-template-columns:1fr 1.4fr;align-items:start}
.u-row-sources{grid-template-columns:1fr 1.3fr;align-items:start}
.u-row-two-start{grid-template-columns:1fr 1fr;align-items:start}
.u-row-report{grid-template-columns:200px 1fr;align-items:end;gap:14px}
.u-span-all{grid-column:1 / -1}
.u-block{display:block}
.u-submeta{display:block;margin-top:3px}
.u-run-next{display:block}
.u-label-offset{display:block;margin-top:10px}
.u-form-note{display:inline-flex;align-items:center;gap:7px}
.u-form-note svg{width:15px;flex:none}
.u-hidden{display:none}
.empty-copy{margin:0}
.u-saved-search-panel{display:grid;gap:14px}
.u-saved-filter-group{display:grid;gap:4px}
.u-saved-filter-form{display:grid;gap:7px}
.u-saved-filter-form-row{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:8px;align-items:center;max-width:560px}
.u-icon-ok{flex:none;margin-top:4px}
.u-attachment-icon{vertical-align:-2px;margin-right:4px}
.u-list-copy-space{margin-bottom:14px}
.u-help-intro{margin-bottom:14px}
.u-help-outro{margin-top:14px}
.u-help-list-disc{list-style:disc;margin-left:20px}
.u-help-list-decimal{list-style:decimal;margin-left:20px}
.u-help-list-clean{list-style:none}
.u-check-item{padding:4px 0;display:flex;gap:8px}
.u-warn-item{padding:5px 0;display:flex;gap:8px}
.u-report-head{display:flex;align-items:center;gap:10px}
.u-report-actions{display:flex;gap:6px;align-items:center}
.u-report-desc{margin-bottom:12px}
.u-report-tip{margin-bottom:12px}
.u-report-tip-accent{margin-bottom:12px}
.u-note-block{display:block;margin-top:6px}
.u-section-title{margin:22px 0 10px}
.u-section-title-loose{margin:26px 0 10px}
.u-source-query{flex:1}
.u-source-runlist{margin:8px 0 4px;display:flex;flex-direction:column;gap:4px}
.u-source-run{display:flex;gap:14px;align-items:center}
.u-source-error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.u-invite-list-compact{margin-top:6px;overflow:auto}
.u-message-id{word-break:break-all}
.u-detail-note{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.u-detail-attachments-label{align-self:center}
.u-mail-pre{white-space:pre-wrap;word-break:break-word;padding:14px;margin:0}
.u-export-hint{align-self:end}
.u-export-text{margin-bottom:14px}
.u-export-actions{display:flex;gap:10px;flex-wrap:wrap}
.u-td-actions-nowrap{white-space:nowrap}
@media(max-width:880px){.u-row-wide,.u-row-sources,.u-row-two-start,.u-row-report{grid-template-columns:1fr}}
@media(max-width:640px){.u-saved-filter-form-row{grid-template-columns:1fr}}

/* ================================================================
   ZUSTAENDE, HILFSKLASSEN UND DATUMSWAEHLER
   Im alten Stylesheet trugen diese Klassen ausschliesslich Sichtbares
   (Farben, Gewichte) -- also genau das, was hier NICHT uebernommen wird.
   Neu definiert mit den Rollen des Handoffs.
   ================================================================ */
.is-active{color:var(--ink);font-weight:600}
.is-disabled{opacity:.5;pointer-events:none}
.from{color:var(--muted)}

.u-danger,.u-icon-danger{color:var(--danger)}
.u-strong-muted{color:var(--muted);font-weight:600}
.u-table-muted{color:var(--muted)}
.u-empty-italic{color:var(--muted);font-style:italic}
.u-text-left{text-align:left}
.u-inline-link{color:var(--accent-text);font-weight:600;text-decoration:none}
.u-list-copy{color:var(--body);font-size:13px}
.u-report-title{font-family:"Sora",sans-serif;font-size:14px;font-weight:600;color:var(--ink)}
.u-saved-filter-label{font-weight:600;color:var(--ink)}
.u-details-summary{cursor:pointer;font-weight:600;color:var(--accent-text)}
.u-card-accent{border-color:var(--accent)}
.u-card-h-connected{border-radius:var(--ui-radius-lg) var(--ui-radius-lg) 0 0}
.u-card-split{border-top:1px solid var(--line2)}
.u-code-field{font-variant-numeric:tabular-nums;letter-spacing:.08em;font-weight:600;color:var(--ink)}
.u-confirm-body{color:var(--body);font-size:13px}
.u-confirm-message{color:var(--ink);font-weight:600}
.u-confirm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.source-method-kicker{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.compliance-score-number{font-family:"Sora",sans-serif;font-size:36px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.compliance-score-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.compliance-score-note,.compliance-date-value{font-size:12px;color:var(--muted)}

/* Datumswaehler (js/datepicker.js) */
.qo7-dp-input{width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--ui-radius-sm);
  background:var(--field);color:var(--ink);font-family:"Raleway",sans-serif;font-size:14px}
.qo7-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.qo7-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.qo7-dp-day{display:grid;place-items:center;height:32px;border:none;border-radius:999px;background:transparent;
  color:var(--body);font-family:"Raleway",sans-serif;font-size:13px;font-weight:600;cursor:pointer}
.qo7-dp-day:hover{background:var(--field)}
.qo7-dp-day.is-selected{background:var(--accent);color:#fff;font-weight:700}
.qo7-dp-day.is-selected:hover{background:var(--accent);color:#fff}
.qo7-dp-day.is-today{color:var(--accent-text);font-weight:700;box-shadow:inset 0 0 0 1px var(--accent)}
.qo7-dp-day.is-disabled{color:var(--muted);opacity:.35;cursor:not-allowed}
.qo7-dp-day.is-disabled:hover{background:transparent}

/* Popup, Kopfzeile und Bedienknoepfe des Datepickers.
   Diese Regeln standen in precision.css und gingen beim Stylesheet-Wechsel
   verloren: public/js/datepicker.js vergibt die Klassen weiter, das Layout
   laedt precision.css aber nicht mehr. Ohne sie erscheint der Kalender als
   durchsichtiger, randloser Block ueber dem Seiteninhalt -- an genau den
   Stellen, an denen ein Pruefer arbeitet (Archivsuche, Export, Prueferlink).

   NICHT 1:1 uebernommen: precision.css nutzt --text, --text-2, --text-3,
   --line-2, --acc-dim, --acc-2, --acc-solid, --radius, --radius-lg,
   --font-sans und --font-display. Keines davon ist hier definiert; ein
   woertlicher Uebertrag haette den Fehler vom 2026-06-01 wiederholt
   (undefinierte Variablen, Regel faellt still aus). Abgebildet auf die
   Token dieser Datei. */
.qo7-dp-popup{background:var(--surface);border:1px solid var(--line);border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-sh-md);padding:12px;width:268px;
  font-family:'Raleway',sans-serif;color:var(--ink);user-select:none;
  animation:qo7-dp-pop .12s cubic-bezier(.32,.72,0,1)}
@keyframes qo7-dp-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.qo7-dp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px;padding-bottom:8px;
  border-bottom:1px solid var(--line2)}
.qo7-dp-title{flex:1;text-align:center;font-family:'Sora',sans-serif;font-weight:700;
  font-size:14px;color:var(--ink);letter-spacing:.01em}
.qo7-dp-nav{flex:none;width:28px;height:28px;display:grid;place-items:center;background:none;
  border:1px solid transparent;border-radius:var(--ui-radius-sm);color:var(--body);font-size:18px;line-height:1;
  cursor:pointer;font-family:'Raleway',sans-serif;
  transition:background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease),border-color var(--ui-dur) var(--ui-ease)}
.qo7-dp-nav:hover{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
.qo7-dp-today{flex:none;width:24px;height:24px;display:grid;place-items:center;background:none;
  border:1px solid transparent;border-radius:999px;color:var(--muted);cursor:pointer;font-size:10px;
  line-height:1;transition:background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease)}
.qo7-dp-today:hover{background:var(--accent-soft);color:var(--accent-text)}

/* Der Bestaetigungsdialog: app.js:57 setzt "card u-confirm-dialog". .card
   liefert Flaeche und Rahmen, aber nicht die Breite -- und das UA-Stylesheet
   polstert <dialog> mit 1em, was die Karte doppelt polstert. */
.u-confirm-dialog{max-width:440px;width:min(92vw,440px);padding:0}
.qo7-dp-day-other{color:var(--muted);opacity:.55}

/* =====================================================================
   Geruest der Shell -- aus resources/views/layouts/app.blade.php
   =====================================================================
   Diese Deklarationen standen bis 2026-09-04 als style="..."-Attribute im
   Blade. Das war nicht nur Stilfrage: app/Http/Middleware/SecurityHeaders.php
   liefert erzwungen "style-src 'self'" ohne 'unsafe-inline' aus (live
   nachgemessen). Der Browser verwirft jedes style-Attribut -- die Seite haette
   oberhalb 1180px weder Raster noch Seitenleiste gehabt, waehrend Tests,
   Bootcheck und Live-Smoke gruen melden, weil sie HTTP-Status messen und nicht
   Darstellung.

   Der Block sitzt bewusst HIER: nach den Bauteil-Regeln, aber VOR
   @media (max-width:1180px). Weiter unten wuerde er die Schubladen-Regeln
   schlagen und die mobile Ansicht brechen.

   Jede Regel deklariert GENAU die Eigenschaften des ersetzten Attributs.
   Nicht mehr: was vorher aus .subnav (253) oder .subnav a (255) kam, muss
   weiterhin von dort kommen. Deshalb .subnav .subnav-eintrag mit zwei Klassen
   -- .subnav a ist spezifischer als eine einzelne Klasse und wuerde sonst die
   Polsterung zurueckholen.
   ===================================================================== */

.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr;background:var(--bg2)}
.app-rail{background:var(--nav);border-right:1px solid var(--nav-line);display:flex;flex-direction:column}
/* Ohne Sitzung gibt es keine Navigation -- dann auch keine Spalte dafuer.
   Startseite und Anmeldeseiten erben dasselbe Layout und standen sonst neben
   einer leeren 250px-Flaeche. */
.app-shell-solo{grid-template-columns:1fr}
/* Die Huelle der Anmeldeseiten aus dem Entwurfspaket (login-auswahl.dc.html
   u. a.): eine zentrierte Spalte, die Wortmarke 64px hoch darueber, 40px
   Abstand zur Karte, die Fusszeile unten. Keine Kopfleiste -- die Wortmarke
   nennt die Marke, ein zweites Mal daneben braucht es sie nicht. */
.app-shell-solo .app-haupt{align-items:center;padding:56px 24px 40px}
.marke-zentral{display:inline-flex;flex:0 0 auto}
.marke-zentral img{height:64px;width:auto}
.app-shell-solo .a-in{margin-top:40px;width:100%;max-width:27rem;padding:0;flex:0 0 auto}
.marke-fuss{margin-top:auto;padding-top:40px;font-size:12px;line-height:1.6;
  color:var(--muted);text-align:center}
.marke-fuss a{color:var(--muted);text-decoration:underline}

/* Betriebsstatus auf der Wartungsseite (wartung.dc.html).

   Eigene Flaeche NEBEN der Meldung, nicht darin: eine Karte in einer Karte
   waere die falsche Sprache. Die Zeilen tragen ihre Farbe aus den Rollen --
   --ok fuer "laeuft", --warn fuer "Wartung". */
.betriebsstatus{width:100%;margin-top:16px;border:1px solid var(--line);
  border-radius:var(--ui-radius-lg);background:var(--surface);overflow:hidden;text-align:left}
.betriebsstatus-kopf{display:flex;align-items:center;gap:10px;padding:0 18px;height:48px;
  border-bottom:1px solid var(--line2);font-family:"Sora",sans-serif;font-weight:600;
  font-size:13px;color:var(--ink);margin:0}
.betriebsstatus-punkt{width:8px;height:8px;border-radius:999px;background:var(--brand);flex:none}
.betriebsstatus-zeile{display:flex;align-items:center;gap:12px;padding:16px 18px;
  font-size:14px;font-weight:600;color:var(--ink)}
.betriebsstatus-zeile + .betriebsstatus-zeile{border-top:1px solid var(--line2)}
.betriebsstatus-zeile > span:first-child{flex:1}
.betriebsstatus-ok,.betriebsstatus-wartung{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600}
.betriebsstatus-ok{color:var(--ok)}
.betriebsstatus-wartung{color:var(--warn)}
.betriebsstatus-pip{width:7px;height:7px;border-radius:999px;background:currentColor;flex:none}
.rail-kopf{padding:20px 18px;border-bottom:1px solid var(--nav-line);display:flex;align-items:center;gap:12px}
.nav-close{order:2;margin-left:auto;width:32px;height:32px;flex:0 0 auto;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink);cursor:pointer;padding:0}
.logo-ink,.logo-white{height:20px;width:auto}

.nav-gruppe-titel{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nav-label);padding:0 8px 8px}

.rail-nav{padding:14px 12px;display:grid;gap:18px;overflow-y:auto}
.nav-gruppe{display:grid;gap:2px}
.nav-eintrag{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;
  border:none;border-radius:var(--ui-radius-lg);background:transparent;color:var(--nav-ink);
  font-family:'Raleway',sans-serif;font-size:14px;font-weight:600;text-decoration:none}
.nav-eintrag.is-active{background:var(--accent);color:#fff}
.nav-eintrag[aria-disabled="true"]{color:var(--muted);cursor:default}
.nav-eintrag svg{flex:0 0 auto}
.nav-bald{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px}

.app-haupt{display:flex;flex-direction:column;min-width:0}
.app-kopf{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;
  align-items:center;gap:20px;flex-shrink:0;flex-wrap:wrap}
.nav-burger{width:36px;height:36px;flex:0 0 auto;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);
  cursor:pointer;padding:0}
.kopf-titel{min-width:0}
/* Wortmarke im Kopf -- nur ohne Navigation, wo die Seitenleiste fehlt. */
/* Konto-Chip: Person oben, Mandant darunter -- Masse aus dem Entwurf
   (12px/700 fuer den Namen, 10.5px gedaempft fuer den Mandanten). */
.profil-text{display:flex;flex-direction:column;min-width:0;text-align:left}
.profil-name{display:block;font-size:12px;font-weight:700;color:var(--ink);line-height:14px}
.profil-mandant{display:block;font-size:10.5px;color:var(--muted);line-height:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.kopf-marke-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.kopf-marke-logo img{height:22px;width:auto}
.kopf-h1{margin-top:2px;font-size:19px;font-weight:800}
.kopf-unterzeile{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kopf-suche{display:inline-flex;align-items:center;gap:9px;height:36px;background:var(--field);
  border:1px solid var(--line);border-radius:999px;padding:0 14px;text-decoration:none;
  font-family:'Raleway',sans-serif}
.kopf-suche-text{font-size:13px;color:var(--muted)}
.kopf-trenner{width:1px;height:24px;background:var(--line)}
/* Tastenkuerzel im Suchfeld -- im Entwurf steht es als eigener Chip rechts im
   Feld, nicht als Text. */
.kopf-suche-taste{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);
  border-radius:var(--ui-radius-sm);padding:2px 6px;line-height:1.2}
/* Der Pfeil am Konto-Chip: er zeigt, dass sich dahinter ein Menue oeffnet. */
.profil-pfeil{flex:0 0 auto;width:13px;height:13px;color:var(--muted)}

/* Kontomenue. Masse aus dem Entwurf: 286px breit, 8px unter dem Chip. */
.konto{position:relative}
.konto>summary{list-style:none;cursor:pointer}
.konto>summary::-webkit-details-marker{display:none}
.konto[open]>summary .profil-pfeil{transform:rotate(180deg)}
.konto-menue{position:absolute;right:0;top:calc(100% + 8px);z-index:120;width:286px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-sh-md);overflow:hidden}
.konto-kopf{padding:14px 16px;border-bottom:1px solid var(--line2)}
.konto-name{display:block;font-family:"Sora",sans-serif;font-size:14px;font-weight:700;color:var(--ink)}
.konto-mail{display:block;margin-top:2px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
/* Das Rollenabzeichen traegt bewusst den Grundstil von .badge, also die
   neutrale Flaeche: eine Rolle ist kein Zustand, den man gruen oder rot faerbt
   (POST-298, keine Statusfarben). */
.konto-rolle{margin-top:8px}
/* Ein Abschnitt zwischen Kopf und Aktionen -- fuer die Auskunft, in wessen
   Bestand gearbeitet wird. Die Beschriftung folgt der Sprache der Schiene
   (.nav-gruppe-titel): klein, gesperrt, Versalien. */
.konto-abschnitt{padding:12px 16px;border-bottom:1px solid var(--line2)}
.konto-abschnitt-titel{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.konto-mandant{display:block;font-size:13px;color:var(--ink)}
.konto-hinweis{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:var(--muted)}
.konto-aktionen{padding:8px}
.konto-eintrag{display:block;width:100%;text-align:left;padding:9px 10px;border:0;background:transparent;
  border-radius:var(--ui-radius-sm);font-family:"Raleway",sans-serif;font-size:13px;color:var(--ink);
  text-decoration:none;cursor:pointer}
.konto-eintrag:hover{background:var(--field)}
.konto-abmelden{color:var(--danger)}

/* Fuss der Seitenleiste: Kuerzel, Name, Rolle -- Masse aus dem Entwurf. */
.rail-fuss{margin-top:auto;padding:14px 18px;border-top:1px solid var(--nav-line);
  display:flex;align-items:center;gap:10px}
.rail-fuss-kuerzel{flex:0 0 auto;width:28px;height:28px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;
  font-family:"Sora",sans-serif;font-size:11px;font-weight:700}
.rail-fuss-text{flex:1;min-width:0}
.rail-fuss-name{display:block;font-size:12px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-fuss-rolle{display:block;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopf-knopf{width:36px;height:36px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink);cursor:pointer;padding:0}
/* Abmelden traegt bewusst die ruhigere Schrift-/Symbolfarbe: die gefaehrlichste
   Handlung der Kopfzeile soll das Auge nicht zuerst holen. */
.abmelden-knopf{color:var(--body)}
.profil-pille{display:inline-flex;align-items:center;gap:9px;height:36px;border:1px solid var(--line);
  border-radius:999px;padding:0 14px 0 5px;text-decoration:none}
.profil-kuerzel{width:28px;height:28px;border-radius:999px;background:var(--accent);color:#FFFFFF;display:grid;place-items:center;font-family:"Sora",sans-serif;font-size:11px;font-weight:700}
.profil-name{font-size:12px;font-weight:600;color:var(--ink)}
.abmelden-form{display:inline}
/* Kennung des Postfachzugangs: sieht aus wie die Profil-Pille, ist aber
   bewusst KEIN Bedienelement -- deshalb ohne die 44px-Trefferflaeche. Eine
   Mailadresse kann lang werden; sie kuerzt, statt die Kopfzeile zu sprengen. */
.postfach-kennung{display:inline-flex;align-items:center;height:36px;border:1px solid var(--line);
  border-radius:999px;padding:0 14px;font-size:12px;font-weight:600;color:var(--ink);
  max-width:min(38vw,260px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* flex:1 haelt die Fusszeile unten: .app-haupt ist eine Flex-Spalte, und ohne
   einen wachsenden Hauptbereich rutscht der Fuss auf kurzen Seiten mitten ins
   Bild. Fiel bei der Sichtpruefung des Abzugs auf. */
.a-in{padding:24px;min-width:0;flex:1}
.delegation-banner{border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);
  border-radius:var(--ui-radius-lg);padding:12px 16px;margin-bottom:16px;font-size:13px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.delegation-banner svg{flex:0 0 auto}
.admin-banner{border:1px solid var(--line);background:var(--accent-soft);color:var(--accent-text);
  border-radius:var(--ui-radius-lg);padding:12px 16px;margin-bottom:16px;font-size:13px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.admin-banner a{font-weight:600;color:var(--accent-text)}
.banner-hinweis{font-weight:500}
.bruecke-banner{border:1px solid var(--line);background:var(--bg2);color:var(--body);border-radius:var(--ui-radius-lg);
  padding:12px 16px;margin-bottom:16px;font-size:13px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap}
.bruecke-banner svg{flex:0 0 auto}

.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.subnav .subnav-eintrag{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-family:'Raleway',sans-serif;font-size:13px;font-weight:600;text-decoration:none;
  background:var(--surface);color:var(--body)}
.subnav .subnav-eintrag.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}

.meldung-ok{border:1px solid var(--ok);background:var(--ok-bg);color:var(--ok);border-radius:var(--ui-radius-lg);
  padding:12px 16px;margin-bottom:16px;font-size:13px;font-weight:600}
.meldung-fehler{border:1px solid var(--danger);background:var(--danger-bg);color:var(--danger);
  border-radius:var(--ui-radius-lg);padding:12px 16px;margin-bottom:16px;font-size:13px;font-weight:600}

.invite-foot{border-top:1px solid var(--line);background:var(--bg2);padding:14px 24px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--body)}
.invite-abmelden{margin-left:auto}
.app-fuss{border-top:1px solid var(--line);padding:16px 24px;display:flex;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--muted)}
.fuss-rechts{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}

/* ================================================================
   NAVIGATION UNTER 1180px: SCHUBLADE, MOBIL GEDACHT
   ================================================================
   Der Handoff blendet die Seitenleiste aus und zeigt .app-tabs. Eine waagerecht
   scrollende Reiterleiste versteckt aber genau die Punkte, die nicht
   hineinpassen -- auf einem Telefon sind das die meisten.

   Die Schublade ist KEINE Kopie der Desktop-Leiste. Was sich unterscheidet und
   warum:
     - Ziele 48px statt 38px. 44pt ist das Minimum (Apple HIG), 48dp die
       Material-Vorgabe; am Daumen ist der Unterschied zu 38px spuerbar.
     - 16px Abstand zwischen den Gruppen statt 18px Rasterluecke, dafuer mehr
       Luft AM RAND -- getroffen wird mit dem Daumen, nicht mit dem Zeiger.
     - Sichere Bereiche: env(safe-area-inset-*) fuer Kerbe und Gestenbalken.
     - Die Eintraege laufen versetzt ein (30ms je Zeile). Das ist keine
       Verzierung: es zeigt die Reihenfolge der Liste, statt sie auf einmal
       hinzustellen.

   BEWEGUNG. Die Kurve cubic-bezier(.32,.72,0,1) steht schon in Ihrem CSS --
   das ist die Feder von HeroUI, und alles hier benutzt genau sie. Austritt ist
   kuerzer als Eintritt (160ms gegen 260ms), weil ein Schliessen, das so lange
   braucht wie ein Oeffnen, sich zaeh anfuehlt. Beides ist unterbrechbar.
   ================================================================ */
.nav-burger,.nav-close{display:none}
.nav-scrim{display:none}

/* Druckfeedback ueberall: die Flaeche gibt unter dem Finger nach und kommt
   zurueck. Unter 100ms sichtbar, sonst fuehlt es sich tot an. */
.btn:active,.nav-eintrag:active,.subnav-eintrag:active,.nav-burger:active,.nav-close:active,
.profil-pille:active{transform:scale(.97)}
.btn,.nav-eintrag,.subnav-eintrag,.nav-burger,.nav-close,.profil-pille{
  transition:transform .16s cubic-bezier(.32,.72,0,1),background-color .22s cubic-bezier(.32,.72,0,1),
  border-color .22s cubic-bezier(.32,.72,0,1),color .22s cubic-bezier(.32,.72,0,1);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

@media (max-width:1180px){
  .app-shell{grid-template-columns:1fr}
  /* Schlaegt .app-rail{display:none !important} des Handoffs: die Leiste
     verschwindet nicht, sie wartet ausserhalb des Bildes. */
  .app-rail{display:flex !important;position:fixed;top:0;bottom:0;left:0;width:min(320px,88vw);
    z-index:80;transform:translateX(-100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
    overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--nav-line);
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left)}
  .app-rail.is-open{transform:none}
  /* Waehrend des Wischens folgt sie dem Finger -- ohne Uebergang, sonst haengt
     sie hinterher. */
  .app-rail.is-dragging{transition:none}
  .app-rail.is-closing{transition-duration:.16s}

  /* Mobil sind die Ziele groesser und stehen luftiger. */
  .app-rail .nav-eintrag{min-height:48px;padding:11px 12px;font-size:15px}
  .app-rail nav{padding:16px 14px 28px;gap:22px}
  .app-rail .nav-eintrag svg{width:18px;height:18px}

  /* Versetzter Einlauf, nur beim Oeffnen. */
  .app-rail.is-open .nav-eintrag{animation:navEin .26s cubic-bezier(.32,.72,0,1) both}
  .app-rail.is-open .nav-eintrag:nth-child(2){animation-delay:.03s}
  .app-rail.is-open .nav-eintrag:nth-child(3){animation-delay:.06s}
  .app-rail.is-open .nav-eintrag:nth-child(4){animation-delay:.09s}
  .app-rail.is-open .nav-eintrag:nth-child(5){animation-delay:.12s}

  .nav-burger,.nav-close{display:inline-flex}
  .nav-burger,.nav-close{min-width:44px;min-height:44px}

  /* Kopfzeile: der Ring bleibt 36px -- sonst muesste die ganze Zeile hoeher
     werden --, aber die Trefferflaeche waechst auf 44px. Die Regel sitzt an
     einem Kind, nicht an der Groesse selbst, damit Aussehen und Bedienbarkeit
     unabhaengig bleiben. 4px Ueberstand je Seite passen in die 10px Luecke. */
  .kopf-knopf,.profil-pille{position:relative}
  .kopf-knopf::after,.profil-pille::after{content:'';position:absolute;top:50%;left:50%;
    width:100%;height:44px;min-width:44px;transform:translate(-50%,-50%)}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .26s cubic-bezier(.32,.72,0,1)}
  .nav-scrim.is-open{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
}

@keyframes navEin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .app-rail,.nav-scrim{transition:none}
  .app-rail.is-open .nav-eintrag{animation:none}
  .btn:active,.nav-eintrag:active,.subnav-eintrag:active,.nav-burger:active,.nav-close:active,
  .profil-pille:active{transform:none}
}

@media (max-width:640px){
  /* Ohne Namen ist die Profilpille ein Kreis -- mit dem asymmetrischen
     Innenabstand des Handoffs saesse das Bild sonst ausser Mitte. */
  .profil-pille{width:36px;padding:0 !important;justify-content:center}
}