/* Regeln der Archivanwendung, die der Prototyp Manea-Mailarchiv-v3.1 nicht
   braucht, weil er das Verhalten nicht hat. Die Blaetter des Pakets (tokens,
   manea, interactions, auth, controls) bleiben byte-gleich; was hier steht,
   ist die kurze Liste dessen, was unsere Seiten darueber hinaus tun. Jede
   Regel nennt ihren Grund -- ohne Grund gehoert nichts in diese Datei. */

/* Sitzungsbanner der Huelle (Stellvertretung, Betreibermodus, Statusmeldung)
   stehen VOR dem Seitenkopf. Der Prototyp kennt keine Sitzung und setzt seine
   .notice nur NACH dem Seitenkopf; gestapelt und vor dem Kopf klebten sie
   aneinander. Abstand wie die .notice im Dialog des Prototyps (18px), zum
   Seitenkopf der Rhythmus der Abschnitte (28px). */
main#main > .notice,
main#main > .form-error {
  margin-bottom: 18px;
}
main#main > .notice + .page-head,
main#main > .form-error + .page-head {
  margin-top: 28px;
}

/* Die abgeschottete Mailansicht (archive/detail): ein iframe mit eigener CSP.
   Ohne Regel zeichnet der Browser seinen 2px-Einsatzrahmen; die Hoehe setzt
   manea.js nach dem Laden am Inhalt. */
iframe[data-autosize] {
  display: block;
  width: 100%;
  border: 0;
}

/* Die amtliche Lesefassung einer E-Rechnung (archive/detail, E-Rechnung
   Teil 1, Release B): ein abgeschotteter Rahmen ohne allow-same-origin. Seine
   Hoehe kann die Seite nicht am Inhalt messen (anderer Ursprung) -- deshalb
   eine feste Hoehe; der Rahmen rollt selbst. */
iframe.lesefassung {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Tabellen in Tafeln eines Zweispalters. Der Prototyp legt in .two-col nur
   Aufgabenzeilen und Faktenlisten ab; wir legen dort auch Tabellen ab
   (Postfaecher der Uebersicht, Quellen und Berichte der Kundenseite). Unter
   dem Umbruch setzt er die Spalte auf "1fr" -- das Raster misst dann am
   Mindestinhalt der Tabelle, und die Seite laeuft seitlich ueber, obwohl
   .table-wrap rollen koennte. min-width:0 gibt der Spalte die Breite des
   Rasters zurueck; der Rahmen rollt, nicht die Seite. */
.two-col > * {
  min-width: 0;
}

/* Seitenkoepfe mit Daten statt Worten: die Postfachseite traegt eine
   Adresse als Ueberschrift, die Nachrichtenseite einen Betreff. Die Koepfe
   des Prototyps sind Worte und brechen von selbst; eine Adresse hat keine
   Bruchstelle und schob auf 390px die ganze Seite auseinander. */
.page-head h1,
.page-head p {
  overflow-wrap: anywhere;
}

/* Kontrollkaestchen-Listen in Feldern. Der Prototyp kennt Kaestchen nur in
   Filterzeilen und Anmeldeoptionen; unsere Formulare bieten Postfaecher zur
   Auswahl an (Prueferzugang). Seine Regel ".field label" macht jedes Label im
   Feld zum Blockfeldtitel -- das Kaestchen verlor Abstand und Gewicht. */
.field .check-label {
  display: flex;
  font-weight: 400;
  margin-bottom: 0;
}

/* Das Codefeld des zweiten Faktors im Dialog der Kontoeinstellungen. Der
   Prototyp kennt den Code nur auf der Anmeldekarte und bindet seine Regel an
   ".auth-card .code-input"; im Dialog rendert dasselbe Feld sonst als
   Fliesstext. Dieselben Werte wie auth.css, ohne !important -- im Dialog
   streitet keine Kartenregel um die Schriftgroesse. */
.modal .code-input {
  letter-spacing: .4em;
  font-size: 23px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 0;
}

/* Die tatsaechliche Kopfhoehe variiert mit Rolle und Bildschirmbreite.
   manea.js misst sie; Sprungziele brauchen danach nur noch einen kleinen
   Abstand statt zweier sich addierender, starrer Kopfhoehen. */
html {
  --app-header-height: 164px;
  scroll-padding-top: calc(var(--app-header-height, 164px) + 20px);
}
main#main > .section[id] {
  scroll-margin-top: 0;
}

/* Formular als Schaltflaeche in einer Tabellenzelle (Stellvertretung: das
   Beginnen braucht ein eigenes POST-Formular neben den Dialogknoepfen). Der
   Prototyp hat in Zellen nur Knoepfe, keine Formulare; ein <form> ist ein
   Block und wuerfe den Knopf in eine eigene Zeile. */
.table td > form {
  display: inline;
}

/* Links der Fusszeile (Impressum, Datenschutz, Standort). Bis 2026-09-25 stand
   ein Mittelpunkt zwischen ihnen; Sven: der Mittelpunkt ist ein KI-Element.
   Abstand statt Zeichen, wie zwischen den Gruppen der Fusszeile selbst. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* Kopf der Anmeldekarte wie die Kopfleiste und das Panel (Sven, 2026-09-24:
   "eher links Logo dann Schraegstrich wie aus dem Panel, dann anmelden
   kleiner daneben"). Das Paket (auth.css) setzt eine grosse Wortmarke mittig,
   den Themenknopf absolut in die Ecke und den Titel gross und mittig darunter.
   Hier stehen Marke, Schraegstrich und Titel (h1) links in einer Zeile, der
   Themenknopf am Ende derselben Zeile, und die Karte liest sich wie das Panel
   linksbuendig. Marke und Abstand sind kleiner als in der Kopfleiste, damit
   auch "Passwort zuruecksetzen" neben der Marke Platz hat. .product-name der
   Kopfleiste taugt fuer den Titel nicht: es verschwindet auf schmalen
   Schirmen. */
.auth-head {
  justify-content: flex-start;
  gap: 12px;
}
.auth-head > .icon-btn {
  position: static;
  margin-left: auto;
}
/* Das Paket setzt .brand-group flex-shrink: 0 (in der Kopfleiste richtig);
   in der Karte muss sie schrumpfen duerfen, und der Titel darf umbrechen --
   sonst schob "Passwort zuruecksetzen" bei 375 px den Themenknopf aus der
   Karte (gemessen: 390 px Seitenbreite). */
.auth-head .brand-group {
  gap: 14px;
  min-width: 0;
  flex-shrink: 1;
}
.auth-head .brand-link {
  padding-block: 0;
}
.auth-head .brand-link img {
  width: 104px;
}
.auth-head .auth-titel {
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink);
}
.auth-intro,
.auth-caption {
  text-align: left;
}

/* Echte Postfachadressen haben keine Wortgrenzen. Die Auswahl darf weder den
   Suchbereich noch den Zugriffsdialog seitlich verbreitern. Tabellen behalten
   ihren eigenen horizontalen Scrollbereich. */
.mailbox-scope .scope-btn,
.access-form .check-label {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mailbox-scope .scope-btn svg {
  flex-shrink: 0;
}
.access-table td:first-child,
.access-table td:nth-child(3),
.export-mailbox-table td:first-child {
  max-width: 22rem;
  overflow-wrap: anywhere;
}

/* Adressen duerfen umbrechen, Personen- und Rechteangaben aber nicht auf
   wenige Buchstaben pro Zeile zusammenschrumpfen. Die bestehenden,
   fokussierbaren .table-wrap-Rahmen rollen auf kleinen Bildschirmen; die
   Mindestbreiten gelten nur fuer diese Verwaltungs- und Exporttabellen. */
.access-table {
  min-width: 50rem;
}
.access-current-table {
  min-width: 70rem;
}
.access-table th:first-child,
.access-table td:first-child,
.access-table th:nth-child(3),
.access-table td:nth-child(3) {
  min-width: 16rem;
}
.access-table th:nth-child(2),
.access-table td:nth-child(2) {
  min-width: 13rem;
}
.access-current-table th:nth-child(4),
.access-current-table td:nth-child(4) {
  min-width: 7rem;
}
.access-current-table th:nth-child(5),
.access-current-table td:nth-child(5) {
  min-width: 9rem;
}
.access-current-table th:last-child,
.access-current-table td:last-child {
  min-width: 12rem;
}
.export-mailbox-table {
  min-width: 50rem;
}
.export-mailbox-table th:first-child,
.export-mailbox-table td:first-child {
  min-width: 16rem;
}
body[data-entry="exports"] .table:not(.export-mailbox-table) {
  min-width: 56rem;
}
body[data-entry="exports"] .table:not(.export-mailbox-table) th:nth-child(3),
body[data-entry="exports"] .table:not(.export-mailbox-table) td:nth-child(3),
body[data-entry="exports"] .table:not(.export-mailbox-table) th:nth-child(4),
body[data-entry="exports"] .table:not(.export-mailbox-table) td:nth-child(4) {
  min-width: 9rem;
}
.export-request-scope {
  min-width: 14rem;
  max-width: 22rem;
  overflow-wrap: anywhere;
}
.export-request-mailboxes {
  margin-top: 5px;
  font-size: 11px;
  color: var(--secondary);
}
.export-request-mailboxes > summary {
  cursor: pointer;
}
.export-request-mailboxes ul {
  margin-top: 6px;
  padding-left: 16px;
}

/* POST-361: Firmen und persoenliche Zugangsaktionen bleiben nebeneinander
   lesbar, ohne auf dem Handy in einer breiten Verwaltungstabelle zu verschwinden. */
.partner-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  border-top: 1px solid var(--line);
}
.partner-page {
  min-width: 0;
}
.partner-grant-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--secondary);
}
.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.partner-row-main {
  flex: 1 1 22rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.partner-row-main > strong,
.partner-row-main > a {
  font-size: 14px;
}
.partner-row-main small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--secondary);
}
.partner-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.partner-row-actions form {
  margin: 0;
}
.partner-grant-details,
.search-filter-details {
  margin-top: 12px;
}
.partner-grant-details > summary,
.search-filter-details > summary,
.partner-choice > summary {
  width: fit-content;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent-text);
}
.partner-grant-details > summary:focus-visible,
.search-filter-details > summary:focus-visible,
.partner-choice > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.partner-grant-details ul {
  padding-left: 20px;
  overflow-wrap: anywhere;
}
.partner-choice[open] > summary,
.search-filter-details[open] > summary {
  margin-bottom: 12px;
}
.partner-choice,
.auth-card .auth-caption,
.partner-grant-details dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.partner-grant-details dd {
  margin: 4px 0 12px;
}
.mail-technical-details > summary,
.export-policy-details > summary {
  cursor: pointer;
  padding: 10px 0;
  min-height: 44px;
  color: var(--accent-text);
}
.mail-technical-details[open] > summary,
.export-policy-details[open] > summary {
  margin-bottom: 12px;
}
.export-range-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.export-range-form .field {
  flex: 1 1 12rem;
  min-width: 0;
}
.workspace.workspace-static {
  cursor: default;
  background: transparent;
}
.search-filter-summary,
.export-task-intro {
  font-size: 13px;
  line-height: 1.6;
  color: var(--secondary);
}
.overview-search {
  margin-bottom: 28px;
}
.selection-bar .btn {
  max-width: 100%;
  white-space: normal;
}
.selection-bar [data-selection-action-label] {
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  /* Exportaktionen stehen auf dem Handy bei ihrem Umfang statt ausserhalb
     der sichtbaren Tabelle. Explizite Tabellenrollen erhalten die Zuordnung. */
  body[data-entry="exports"] .table.export-mobile-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .export-mobile-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .export-mobile-table tbody,
  .export-mobile-table tr,
  .export-mobile-table td {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .export-mobile-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .export-mobile-table tr:last-child {
    border-bottom: 0;
  }
  body[data-entry="exports"] .table.export-mobile-table td {
    min-width: 0;
    height: auto;
    padding: 8px 16px;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .export-mobile-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary);
  }
  .export-mobile-table .btn.small {
    min-height: 44px;
  }
  .partner-row-actions {
    width: 100%;
  }
  .partner-row-actions .btn {
    min-height: 44px;
  }
  .partner-row-main {
    flex-basis: 100%;
  }
  .subnav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Viele Postfaecher sollen die Rechte- und Datumsfelder nicht um Dutzende
   Zeilen nach unten schieben. Die Auswahl ist bei langen Listen fokussierbar
   und rollt selbst; kurze Listen brauchen keinen weiteren Rahmen. */
.access-mailboxes {
  max-height: 14rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.access-mailboxes .check-label {
  padding-block: 3px;
}
.access-form .field > .date-input {
  width: 100%;
}
.access-intro {
  margin-bottom: 18px;
}

/* Vorlagen und Formaterklaerung sind Nachschlagehilfe, nicht die Hauptaufgabe.
   Native details lassen sie ohne ein weiteres Skript oeffnen. */
.access-templates > summary,
.export-format-help > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.access-templates[open] > summary {
  margin-bottom: 14px;
}
.export-format-help {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Auf schmalen Seiten brauchen Zugangssuche und Absenden eine gemeinsame
   Zeile. Die Suchbox darf schrumpfen, statt den Suchen-Knopf wegzuschieben. */
@media (max-width: 700px) {
  .access-search > .button-row {
    width: 100%;
    flex-wrap: nowrap;
  }
  .access-search .small-search {
    flex: 1;
    min-width: 0;
    width: auto;
  }
}

/* Explicit mailbox selection for the scoped customer audit export. */
.audit-mailbox-options {border:0;max-height:360px;overflow:auto;margin:16px 0;padding:0;}
.audit-mailbox-options legend {font-size:14px;font-weight:500;margin-bottom:8px;}
.audit-mailbox-option {display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;}
.audit-mailbox-option .checkbox {flex-shrink:0;}
.audit-mailbox-option > span {min-width:0;overflow-wrap:anywhere;}

/* This short mailbox rule dialog fits its content while keeping a full touch target. */
#modal:has(form[data-postfach-policy]) {height:fit-content;min-height:0;}
#modal form[data-postfach-policy] .check-label {display:flex;align-items:center;gap:10px;min-height:44px;}

/* R21: Die vorhandene Anmeldung bleibt im Manea-Design. Lesbare Schriftgroessen
   und wrap-faehige Nebenwege ersetzen kleine Verkaufs- und Rechtstexte. */
.auth-head .auth-titel {
  font-size: 16px;
  line-height: 1.4;
}
.auth-head > .icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
}
.auth-card .auth-caption,
.auth-card .auth-note {
  font-size: 13px;
  line-height: 1.65;
}
.auth-card .field label,
.auth-options .check-label,
.auth-options a {
  font-size: 13px;
}
.auth-card .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  font-size: 16px;
}
.auth-card .btn.full,
.auth-card .sso-button {
  font-size: 14px;
}
.auth-options {
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 16px;
}
.auth-options a {
  margin-left: auto;
}
.auth-secondary-entry {
  margin-top: 18px;
}
.auth-secondary-entry .auth-note {
  margin-top: 8px;
}
.auth-card .auth-footer {
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 18px;
  font-size: 12px;
}
.auth-footer > span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.auth-footer .text-btn {
  font-size: 12px;
}
@media (max-width: 380px) {
  .auth-head .brand-group {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .auth-head .brand-separator {
    display: none;
  }
  .auth-head .auth-titel {
    flex-basis: 100%;
    font-size: 18px;
  }
}