/*
Theme Name: EMAS Northbound
Theme URI: https://intra.emas-verein.ch
Description: Eigenstaendiges Theme fuer das geschlossene EMAS-Vereins-Intranet.
  Northbound-Designsystem: monochromes Tinte/Papier (light-paper als Standard,
  dark-photo flach als Dark Mode), Archivo self-hosted (keine externen
  Ressourcen, revDSG), Radius 0, Haarlinien statt Schatten. BuddyPress-Screens
  laufen ueber BP Nouveau und Theme-Compat — das Theme deklariert BEWUSST kein
  add_theme_support('buddypress'), damit BuddyPress seine eigenen, gepflegten
  Templates rendert und wir nur die wenigen ueberschreiben, die anders sollen.
Author: EMAS
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: emas
*/

/* =========================================================================
   1 — ARCHIVO, self-hosted
   Eine Familie in allen Rollen (400/500/600/700). Keine Google Fonts,
   keine CDNs (revDSG). font-display: swap gegen FOIT.
   ========================================================================= */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/Archivo-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/Archivo-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/Archivo-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/Archivo-Bold.woff2') format('woff2');
}

/* =========================================================================
   2 — TOKEN
   Modusunabhaengige Skala (Typografie, Spacing, Motion) und die Farbtoken
   in zwei Lagen: :root = light-paper, [data-theme="dark"] = dark-photo.

   Anders als im Child-Theme gibt es KEINE Alias-Kette auf fremde Token
   mehr — es gibt genau einen Satz Namen, --nb-*. Das war der Grund fuer
   126 !important im alten Aufbau.
   ========================================================================= */
:root {
    --nb-font: Archivo, Helvetica, Arial, sans-serif;

    /* Sagt dem Browser, in welchem Modus er SEINE eigenen Flaechen malt:
       Rollbalken, Aufklapper der Auswahl, Datumswaehler, Zahlensteller.
       Ohne diese Zeile bleiben die im Dunkelmodus hell — das Theme faerbt
       nur, was im Dokument steht, nicht die Bedienteile des Browsers. */
    color-scheme: light;

    /* Typografie */
    --nb-size-title: 52px;
    --nb-size-metric: 30px;
    --nb-size-card-title: 24px;
    --nb-size-body: 18px;
    --nb-size-ui: 16px;
    /* Steuerelemente (Knopf, Tabelle, Reiter, Eingabe) stehen im Northbound
       eine Stufe unter dem Fliesstext — 15, nicht 16 und nicht 18. */
    --nb-size-control: 15px;
    --nb-size-label: 14px;
    --nb-size-caps: 12px;

    --nb-lh-title: 1.05;
    --nb-lh-card-title: 1.15;
    --nb-lh-metric: 1.1;
    --nb-lh-body: 1.55;
    --nb-track-title: -0.02em;
    --nb-track-caps: 0.1em;

    /* Spacing */
    --nb-space-1: 8px;
    --nb-space-2: 16px;
    --nb-space-3: 24px;
    --nb-space-4: 32px;
    --nb-space-5: 48px;
    --nb-space-6: 72px;

    /* Struktur. Rail und Kopfzeile sind das 128er-Raster aus dem Handoff;
       kompakt (< 768) faellt die Kopfzeile auf 72 und die Rail entfaellt. */
    --nb-container: 1152px;
    /* Breite der aktuellen Seite. Kopfzeile und Inhalt lesen dieselbe
       Groesse, damit sie buendig stehen; dashboard.css hebt sie fuer die
       Startseite an (dort steht der Wert und seine Herleitung). */
    --nb-page: var(--nb-container);
    --nb-rail: 128px;
    --nb-header: 128px;
    --nb-header-compact: 72px;
    --nb-subnav: 190px;
    --nb-hit: 44px;
    --nb-radius: 0;

    /* Symbole: eine Strichstaerke pro Bildschirm. */
    --nb-icon: 22px;
    --nb-icon-compact: 17px;
    --nb-icon-stroke: 2.4;

    /* Motion */
    --nb-dur-micro: 120ms;
    --nb-dur-short: 200ms;
    --nb-dur-medium: 320ms;
    --nb-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nb-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);

    /* Farben — light-paper */
    --nb-ink: #17191B;
    --nb-ink-2: rgba(23, 25, 27, 0.78);
    --nb-ink-3: rgba(23, 25, 27, 0.62);
    --nb-line: rgba(23, 25, 27, 0.35);
    --nb-line-soft: rgba(23, 25, 27, 0.14);
    /* Umriss eines STEUERELEMENTS (Eingabe, Auswahl, sekundaerer Knopf).
       Getrennt von --nb-line, weil der Rahmen dort die einzige Auskunft ist,
       dass da etwas zu bedienen ist — WCAG 1.4.11 verlangt dafuer 3:1 gegen
       den Grund. --nb-line (0.35) kommt auf #F4F2EF nur auf 2.18:1; 0.5
       ergibt 3.3:1. Dekorative Kanten (Karte, Trennstrich, Tabelle) bleiben
       bei --nb-line/--nb-line-soft — dort gilt die Forderung nicht, und die
       Haarlinie soll leise bleiben. Im Dunkelmodus reicht 0.45 schon (4.28:1
       gegen die Karte), darum steht dort derselbe Wert wie --nb-line. */
    --nb-line-control: rgba(23, 25, 27, 0.5);
    --nb-wash: rgba(23, 25, 27, 0.06);
    --nb-selected: rgba(23, 25, 27, 0.09);
    --nb-base: #F4F2EF;
    --nb-card: #FFFFFF;
    --nb-sunken: #EAE7E2;
    --nb-input: #FFFFFF;
    --nb-hover: #33383B;

    /* Signalfarben — nur Fehler und Warnung, nie Deko. */
    --nb-error: #A8352E;
    --nb-error-ink: #8E2A24;
    --nb-warning: #8A5A12;
    --nb-warning-ink: #8A5A12;
    /* Fuellung hinter einem Hinweis (.emas-note). 8 % der Signalfarbe, wie
       DrawerNote im Systembundle. Als eigenes Token und nicht als color-mix:
       das Theme rechnet nirgends Farben aus, es benennt sie. */
    --nb-error-wash: rgba(168, 53, 46, 0.08);
    --nb-warning-wash: rgba(138, 90, 18, 0.08);

    /* Wischflaeche unter dem Knopf beim Ueberfahren. */
    --nb-wipe: rgba(23, 25, 27, 0.16);

    /* Grund hinter einem Dialog. Tinte statt Schwarz — im Dunkelmodus liegt
       Schwarz auf fast Schwarz, der Dialog haette dann keine Kante mehr. */
    --nb-scrim: rgba(23, 25, 27, 0.55);

    /* Glas und Tinte AUF EINEM FOTO. Bewusst in beiden Themes gleich: unter
       der Flaeche liegt ein Bild, kein Papier — die Farbe richtet sich nach
       dem Bild, nicht nach hell oder dunkel. Werte aus dem Northbound-
       Handoff (glass/panel 15 %, blur 12 / saturate 115 %, scrim/base 23 %).
       Nur der Kopf von Profil und Gruppe benutzt sie; ohne Coverbild wird
       daraus wieder Papier (emas_cover_image_css in functions.php). */
    --nb-glass: rgba(24, 26, 28, 0.15);
    --nb-glass-blur: blur(12px) saturate(115%);
    --nb-photo-scrim: rgba(20, 22, 24, 0.23);
    --nb-on-photo: #FFFFFF;
    --nb-on-photo-2: rgba(255, 255, 255, 0.72);
    --nb-on-photo-line: rgba(255, 255, 255, 0.45);
    /* Tinte AUF einer weissen Flaeche, die auf dem Foto liegt (Knopf). */
    --nb-on-photo-inverse: #17191B;
}

/* dark-photo, flach ausgelegt: das Intranet hat keine Bildflaechen unter
   der Oberflaeche, also Fuellflaechen direkt aus den surface-Werten. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --nb-ink: #FFFFFF;
    --nb-ink-2: rgba(255, 255, 255, 0.85);
    --nb-ink-3: rgba(255, 255, 255, 0.62);
    --nb-line: rgba(255, 255, 255, 0.45);
    --nb-line-soft: rgba(255, 255, 255, 0.14);
    --nb-line-control: rgba(255, 255, 255, 0.45);
    --nb-wash: rgba(255, 255, 255, 0.09);
    --nb-selected: rgba(255, 255, 255, 0.06);
    --nb-base: #17191B;
    --nb-card: #1F2224;
    --nb-sunken: #101214;
    --nb-input: #2A2E30;
    --nb-hover: #DFE3E5;

    --nb-error: #C8443C;
    --nb-error-ink: #F0A49E;
    --nb-warning: #D59A3C;
    --nb-warning-ink: #E8C48A;
    --nb-error-wash: rgba(200, 68, 60, 0.08);
    --nb-warning-wash: rgba(213, 154, 60, 0.08);

    --nb-wipe: rgba(255, 255, 255, 0.18);

    /* Dunkler als im Hellen: der Dialog (--nb-card, #1F2224) muss sich gegen
       den Grund (#17191B) behaupten, und dazwischen liegen nur wenige Stufen. */
    --nb-scrim: rgba(4, 5, 6, 0.72);
}

/* Die Systemeinstellung wird BEWUSST nicht ausgewertet. Hell ist der
   Standard des Intranets — light-paper ist das Design, dark-photo die
   Ausnahme fuer den, der sie waehlt. Ein prefers-color-scheme-Block hier
   wuerde jedem mit dunkel eingestelltem Betriebssystem eine dunkle Seite
   zeigen, ohne dass er sie bestellt hat. Umgeschaltet wird ueber den
   Knopf am Fuss der Rail, die Wahl liegt in localStorage. */

/* =========================================================================
   3 — GRUNDLAGE
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* clip statt hidden: faengt die Full-Bleed-Baender ab, ohne einen
       Rollcontainer zu erzeugen (position: sticky bleibt heil). */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--nb-font);
    font-size: var(--nb-size-ui);
    font-weight: 400;
    line-height: var(--nb-lh-body);
    color: var(--nb-ink);
    background: var(--nb-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Markierter Text. Ohne diese Regel legt der Browser sein eigenes Blau
   ueber die Zeile — die einzige Farbe im Haus, die niemand bestellt hat.
   Tinte und Grund vertauscht, also dieselbe Umkehr wie am Knopf. */
::selection {
    color: var(--nb-base);
    background: var(--nb-ink);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--nb-space-2);
    font-weight: 700;
    line-height: var(--nb-lh-title);
    letter-spacing: var(--nb-track-title);
    color: var(--nb-ink);
    text-wrap: pretty;
}

h1 { font-size: var(--nb-size-title); }
h2 { font-size: var(--nb-size-metric); }
h3 { font-size: var(--nb-size-card-title); }
h4, h5, h6 { font-size: var(--nb-size-body); }

p, ul, ol, dl, blockquote, pre, table, figure {
    margin: 0 0 var(--nb-space-3);
}

a {
    color: var(--nb-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: text-decoration-thickness var(--nb-dur-micro) var(--nb-ease);
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--nb-ink);
    outline-offset: 3px;
}

/* In der Tabelle sitzt der Fokusrahmen innen, sonst wuerde er von der
   naechsten Zeile ueberdeckt. */
tr:focus-visible {
    outline-offset: -2px;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

hr {
    height: 0;
    margin: var(--nb-space-4) 0;
    border: 0;
    border-top: 1px solid var(--nb-line-soft);
}

code, pre, kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

pre {
    padding: var(--nb-space-3);
    overflow-x: auto;
    background: var(--nb-sunken);
    border: 1px solid var(--nb-line-soft);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid var(--nb-line-soft);
}

/* Radius 0 ist im Northbound eine Festlegung, kein Standardwert — deshalb
   hier einmal zentral, statt in jeder Komponente. */
input, textarea, select, button, .emas-button {
    border-radius: var(--nb-radius);
    font-family: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    min-height: var(--nb-hit);
    padding: 14px;
    font-size: var(--nb-size-control);
    color: var(--nb-ink);
    background: var(--nb-input);
    border: 1px solid var(--nb-line-control);
}

/* Auswahlfeld: derselbe Kasten wie ein Eingabefeld, dazu der gezeichnete
   Chevron aus zwei Verlaeufen — kein Bild, keine externe Ressource, keine
   Symbolschrift. Die Zeichnung stand bis zum 8.9.2026 nur unter #buddypress;
   sie gehoert an die allgemeine Regel, sonst traegt jedes Auswahlfeld
   ausserhalb von BuddyPress (Buchungsmaske, Bloecke) wieder den Pfeil des
   Betriebssystems. Die engere Regel in buddypress.css bleibt unberuehrt:
   sie ist spezifischer und setzt dort eigene Masse. */
select {
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px)),
        linear-gradient(-45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px));
    background-repeat: no-repeat, no-repeat;
    background-size: 7px 7px, 7px 7px;
    background-position: calc(100% - 21px) calc(50% - 1px), calc(100% - 14px) calc(50% - 1px);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--nb-dur-micro) var(--nb-ease);
}

select:hover {
    border-color: var(--nb-ink);
}

/* Ausgefuelltes Feld (Passwortverwaltung des Browsers). Chromium malt die
   Flaeche mit einer eigenen Farbe, die NICHT ueber background zu erreichen
   ist — deshalb der Innenschatten: er ist hier kein Gestaltungsmittel,
   sondern das einzige Werkzeug, das die Flaeche ueberhaupt trifft. Sichtbar
   bleibt der normale Feldgrund, die Haarlinien-Regel ist unberuehrt. Die
   Schrift braucht -webkit-text-fill-color, color allein wird dort ebenso
   uebergangen. Trifft vor allem die Anmeldeseite, also die erste Ansicht. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--nb-ink);
    -webkit-box-shadow: 0 0 0 100px var(--nb-input) inset;
    caret-color: var(--nb-ink);
}

/* Ankreuzfeld und Auswahlknopf.

   Es gab davon drei Fassungen im Theme: 18px mit Haekchen in buddypress.css
   (Abschnitt 14), 20px mit gefuelltem Kern in login.css (#rememberme,
   #pw-weak) und ueberall sonst den Browser-Standard — auf der
   Termin-Buchung von Events Manager etwa. Hier steht jetzt die einzige.

   Die Selektorliste ist lang, weil die drei Kontexte unterschiedlich stark
   adressiert werden muessen: BP Nouveau greift Formularelemente mit
   `.buddypress-wrap .standard-form ...` (0,3,1) ab, wp-admin die
   Anmeldefelder ueber Kennungen. Eine Regel mit drei Selektoren ist besser
   als drei Regelsaetze — dieselbe Ueberlegung wie bei der Tabelle in
   Abschnitt 5. Kein !important.

   Der Auswahlknopf ist rund. Das ist die EINZIGE Stelle im Haus mit einem
   Radius, und sie ist eine Entscheidung, kein Versehen: die Form traegt hier
   eine Auskunft, die sonst nur im Text steht — rund heisst eins aus vielen,
   eckig heisst mehrere moeglich. Ohne sie sehen beide ungesetzt gleich aus.
   Freigegeben am 7.9.2026 (Vorschlag C), festgehalten in docs/entscheide.md.
   ========================================================================= */
input[type="checkbox"],
input[type="radio"],
#buddypress .standard-form input[type="checkbox"],
#buddypress .standard-form input[type="radio"],
body.login #rememberme,
body.login #pw-weak {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--nb-input);
    background-image: none;
    border: 1px solid var(--nb-line-control);
    border-radius: var(--nb-radius);
    box-shadow: none;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--nb-dur-micro) var(--nb-ease),
                border-color var(--nb-dur-micro) var(--nb-ease);
}

input[type="radio"],
#buddypress .standard-form input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover,
#buddypress .standard-form input[type="checkbox"]:hover,
#buddypress .standard-form input[type="radio"]:hover,
body.login #rememberme:hover,
body.login #pw-weak:hover {
    border-color: var(--nb-ink);
}

/* wp-admin und manche Plugins setzen das Haekchen als Zeichen aus einer
   Symbolschrift in ::before. Das faellt hier weg — gezeichnet wird unten. */
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before,
body.login #rememberme:checked::before,
body.login #pw-weak:checked::before {
    content: none;
}

input[type="checkbox"]:checked,
#buddypress .standard-form input[type="checkbox"]:checked,
body.login #rememberme:checked,
body.login #pw-weak:checked {
    border-color: var(--nb-ink);
}

/* Das Haekchen: ein 5x10-Rechteck, von dem nur rechte und untere Kante
   stehen, um 45 Grad gedreht. Die Verschiebung um einen Punkt nach oben
   setzt den Knick optisch in die Mitte — geometrisch mittig sitzt er zu
   tief. Kein Bild, keine Schriftart, kein Schatten. */
input[type="checkbox"]:checked::after,
#buddypress .standard-form input[type="checkbox"]:checked::after,
body.login #rememberme:checked::after,
body.login #pw-weak:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid var(--nb-ink);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

/* Der gesetzte Auswahlknopf ist die volle Tintenflaeche mit Papierabstand zur
   Kante. Der Abstand entsteht ueber padding und background-clip, nicht ueber
   ein zweites Element. */
input[type="radio"]:checked,
#buddypress .standard-form input[type="radio"]:checked {
    padding: 4px;
    background-color: var(--nb-ink);
    background-clip: content-box;
    border-color: var(--nb-ink);
}

/* Eine Beschriftung, die das Kaestchen umschliesst, ist eine Zeile und keine
   Ueberschrift: Kaestchen links, Text daneben, Text in Lesefarbe. Faellt
   :has() aus, bleibt die Beschriftung ein Block ueber dem Kaestchen —
   lesbar, nur laenger. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--nb-hit);
    margin: 0;
    font-size: var(--nb-size-control);
    font-weight: 400;
    color: var(--nb-ink-2);
    cursor: pointer;
}

/* Symbole. Eine Strichstaerke pro Bildschirm, fill none, nie unter 16px. */
.emas-icon {
    display: block;
    flex: none;
    width: var(--nb-icon);
    height: var(--nb-icon);
    /* Der Grundstil weiter oben gibt jedem svg `max-width: 100%`, damit ein
       eingebettetes Bild nicht ueber seine Spalte hinauslaeuft. Ein Symbol
       hat aber eine feste Groesse, und wo es allein in einer schmalen,
       inhaltsabgeleiteten Flaeche steht (Tabellenzelle mit width: 1%),
       bezieht sich das Prozent auf eine Breite, die es selbst erst
       aufspannen muesste — dann faellt das Symbol in sich zusammen. Der
       Deckel gilt hier also nicht. */
    max-width: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--nb-icon-stroke);
}

.emas-icon--compact {
    width: var(--nb-icon-compact);
    height: var(--nb-icon-compact);
}

/* Das EMAS-Kreuz ist eine Flaeche, kein Strich. */
.emas-logo {
    display: block;
    flex: none;
    fill: currentColor;
    stroke: none;
}

/* =========================================================================
   4 — KNOEPFE
   Drei Auspraegungen aus dem System: primaer (gefuellte Tinte), sekundaer
   (Haarlinie) und Text (Beschriftung mit Regelstrich, der beim Ueberfahren
   waechst). Beim Ueberfahren laeuft eine Flaeche von links durch — keine
   Deckkraft, kein Schatten.
   ========================================================================= */
.emas-button,
button,
input[type="submit"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--nb-hit);
    padding: 15px 26px;
    font-size: var(--nb-size-control);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--nb-base);
    text-decoration: none;
    background-color: var(--nb-ink);
    background-image: linear-gradient(to right, var(--nb-wipe), var(--nb-wipe));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    border: 0;
    cursor: pointer;
    transition: background-size var(--nb-dur-medium) var(--nb-ease),
                color var(--nb-dur-micro) var(--nb-ease),
                border-color var(--nb-dur-micro) var(--nb-ease);
}

.emas-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    color: var(--nb-base);
    text-decoration: none;
    background-size: 100% 100%;
}

/* Der sekundaere Knopf ist Kante mit Text. Sein Wisch traegt VOLLE Tinte,
   nicht die 16-%-Lasur des gefuellten Knopfes: die Lasur ist dort ein
   Nachdunkeln der bereits schwarzen Flaeche, hier laege sie auf Papier und
   waere kaum zu sehen. Bis zum 8.9.2026 stand hier die Lasur und dazu eine
   zweite Zeile, die die Schriftfarbe im Hover auf Tinte festhielt — der
   Knopf hatte damit praktisch keine Rueckmeldung. Jetzt laeuft die Tinte
   in 320 ms von links durch und die Schrift kippt auf Papier, wie im
   Board (Abschnitt "Verzeichnissuche und nativer Knopf"). */
.emas-button--secondary {
    color: var(--nb-ink);
    background-color: transparent;
    background-image: linear-gradient(to right, var(--nb-ink), var(--nb-ink));
    border: 1px solid var(--nb-line-control);
}

.emas-button--secondary:hover {
    border-color: var(--nb-ink);
}

.emas-button--full {
    width: 100%;
}

/* Textknopf: keine Flaeche, dafuer der Regelstrich. Er ist die ganze
   sichtbare Reaktion — deshalb waechst er, statt zu blinken. */
.emas-button--text,
.emas-button--text:hover {
    gap: 12px;
    padding: 0;
    color: var(--nb-ink);
    background: none;
    border: 0;
}

/* Der Strich ist 64 breit und steht zusammengezogen auf 42 (42/64 =
   0.65625). Gedehnt wird per transform, nicht per Breite — eine wachsende
   Breite wuerde bei jedem Bild den Knopf neu umbrechen lassen. */
.emas-button--text::after {
    content: "";
    display: block;
    flex: none;
    width: 64px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0.65625);
    transform-origin: left center;
    transition: transform var(--nb-dur-medium) var(--nb-ease);
}

.emas-button--text:hover::after,
.emas-button--text:focus-visible::after {
    transform: scaleX(1);
}

.emas-button[disabled],
button[disabled] {
    color: var(--nb-ink);
    background-color: var(--nb-wash);
    background-image: none;
    border-color: transparent;
    opacity: 0.42;
    cursor: default;
}

/* =========================================================================
   5 — KLEINE BAUSTEINE
   Marke, Zaehler, Avatar, Reiter, Tabelle. Aus N5/N6 des Entwurfs.
   ========================================================================= */

/* Marke: benennt, faerbt nicht. Nicht klickbar, kein Hover. */
.emas-badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 7px 11px;
    font-size: var(--nb-size-caps);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nb-ink);
    background: none;
    border: 1px solid var(--nb-line);
    cursor: default;
}

.emas-badge--error {
    color: var(--nb-error-ink);
    border-color: var(--nb-error);
}

.emas-badge--warning {
    color: var(--nb-warning-ink);
    border-color: var(--nb-warning);
}

/* Hinweis: die stehende Auskunft zu einer Sache, die auf dem Schirm steht —
   ein abgesagter Termin, eine gesperrte Anmeldung. Im Systembundle heisst
   das Bauteil DrawerNote; die Masse kommen von dort: 3-px-Signalkante links,
   Fuellung in 8 % derselben Farbe, Titel 15/600, Text 15/1.5 in der zweiten
   Tintenstufe.

   Unterschied zur Marke darueber: die Marke BENENNT einen Zustand in einem
   Wort und steht in einer Zeile mit anderem. Der Hinweis ist ein eigener
   Block mit Titel und Satz und traegt darum die Flaeche.

   Warnung ist die Vorgabe, Fehler die Ausnahme — wie im Bundle. */
.emas-note {
    padding: 14px 0 14px var(--nb-space-2);
    background: var(--nb-warning-wash);
    border-left: 3px solid var(--nb-warning);
}

.emas-note--error {
    background: var(--nb-error-wash);
    border-left-color: var(--nb-error);
}

.emas-note__title {
    margin: 0;
    font-size: var(--nb-size-control);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--nb-ink);
}

.emas-note__text {
    margin: 4px 0 0;
    font-size: var(--nb-size-control);
    line-height: 1.5;
    color: var(--nb-ink-2);
}

/* Zaehler: Ziffern ohne eigenen Hover, immer in einem Ziel und immer neben
   einem Wort. Der zugaengliche Name sitzt am Ziel, nicht an der Zahl. */
.emas-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: var(--nb-size-caps);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: var(--nb-track-caps);
    color: var(--nb-ink);
    /* Flaeche statt Kante: bei 24 px Hoehe nimmt eine 2-px-Linie ein
       Sechstel weg und drueckt die Ziffer zusammen. */
    background: var(--nb-selected);
}

/* Avatar: Quadrat wie das Bild, ohne Bild Initialen mit hoechstens zwei
   Zeichen. Groessen aus der Skala. */
.emas-ava {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Kein Rahmen: das Bild traegt seine eigene Kante, und ohne Bild trennt
       die gesenkte Flaeche das Feld schon vom Papier. Dieselbe Entscheidung
       wie beim grossen Avatar in der Plakette (buddypress.css Abschnitt 2). */
    background: var(--nb-sunken);
    font-size: var(--nb-size-label);
    font-weight: 500;
    line-height: 1;
    color: var(--nb-ink-2);
}

.emas-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.emas-ava--32 { width: 32px; height: 32px; }
.emas-ava--40 { width: 40px; height: 40px; }
.emas-ava--44 { width: 44px; height: 44px; }
.emas-ava--48 { width: 48px; height: 48px; }
.emas-ava--72 { width: 72px; height: 72px; }

/* Reiter */
.emas-tabs {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid var(--nb-line-soft);
}

.emas-tabs a {
    min-height: var(--nb-hit);
    display: inline-flex;
    align-items: flex-start;
    padding: 0 0 12px;
    margin-bottom: -1px;
    font-size: var(--nb-size-control);
    font-weight: 500;
    color: var(--nb-ink-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--nb-dur-micro) var(--nb-ease),
                border-color var(--nb-dur-medium) var(--nb-ease);
}

.emas-tabs a:hover {
    color: var(--nb-ink);
    text-decoration: none;
}

.emas-tabs a[aria-current="page"] {
    font-weight: 600;
    color: var(--nb-ink);
    border-bottom-color: var(--nb-ink);
}

/* Tabelle: Kopf in caps an der kraeftigen Haarlinie, Zeilen 18 oben und
   unten, erste Spalte traegt den Namen.

   Die Tabelle aus dem WordPress-Editor (wp-block-table) bekommt dieselbe
   Optik. Sie steht hier als zweiter Selektor an jeder Regel und nicht als
   eigener Satz Regeln, damit die Tabelle nur an einer Stelle gepflegt wird.
   Der Vorsatz .emas-prose ist noetig, nicht Zierde: die Blockbibliothek von
   WordPress wird NACH dem Theme-Stylesheet ausgegeben, ihr
   `.wp-block-table td, .wp-block-table th { border: 1px solid; padding: .5em }`
   traegt (0,1,1) und wuerde eine gleich starke Regel des Themes schlagen.
   Mit dem Vorsatz stehen wir auf (0,2,1) — ohne !important.

   Dritter Selektor: die Nutzertabellen von BuddyPress. Sie sollen genau
   diese Optik tragen, darum stehen sie hier und nicht als zweiter Satz
   Regeln in buddypress.css. Drei Klassen statt einer, weil BuddyPress drei
   vergibt und keine davon durchgaengig:

     .bp-tables-user        Benachrichtigungen, Profilsichtbarkeit
     .notification-settings E-Mail-Einstellungen — traegt .bp-tables-user
                            NICHT, die Klasse steht hartverdrahtet in
                            bp-activity-notifications.php und den vier
                            Geschwisterdateien, nicht in einem Template
     table.bp-list          Mitglieder verwalten in der Gruppe, von
                            Backbone gefuellt. Mit dem Element davor, denn
                            .bp-list allein haengt auch an jeder
                            Aktivitaets- und Mitgliederliste, und die sind
                            ul und keine Tabelle.

   Alle drei am Markup geprueft. In einem :is(), damit die Regeln nicht
   dreifach stehen; :is() wiegt so viel wie sein staerkstes Glied, hier also
   table.bp-list mit (0,1,1).

   Der Vorsatz #buddypress ist Pflicht: BP Nouveau adressiert mit
   `.buddypress-wrap .bp-tables-user tr td` (0,3,1) und schlaegt jede
   klassenbasierte Regel des Themes. Mit der Kennung stehen wir auf (1,1,1).
   Die BP-eigenen Abweichungen (Spaltenbreiten, Zeilenknoepfe, schmale
   Bildschirme) stehen in buddypress.css Abschnitt 15, die der
   Einstellungen in Abschnitt 16. */
.emas-table,
.emas-prose .wp-block-table table,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) {
    margin: 0;
    font-size: var(--nb-size-control);
}

/* Nouveau legt der Kopfzeile einen 2-px-Strich in #ccc unter und den Zeilen
   eine graue Flaeche. Beides weg, bevor die Haarlinien kommen. */
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) thead tr,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) tbody tr {
    background: none;
    border: 0;
}

/* Der Rahmen wird ausdruecklich genullt, bevor die Haarlinie unten kommt:
   die Blockbibliothek zeichnet sonst einen Kasten um jede Zelle. */
.emas-table th,
.emas-prose .wp-block-table th,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) th {
    padding: 0 var(--nb-space-2) 14px 0;
    font-size: var(--nb-size-caps);
    font-weight: 500;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nb-ink-3);
    border: 0;
    border-bottom: 1px solid var(--nb-line);
}

.emas-table td,
.emas-prose .wp-block-table td,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) td {
    padding: 18px var(--nb-space-2) 18px 0;
    color: var(--nb-ink-2);
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--nb-line-soft);
}

.emas-table th:last-child,
.emas-table td:last-child,
.emas-prose .wp-block-table th:last-child,
.emas-prose .wp-block-table td:last-child,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) th:last-child,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) td:last-child {
    padding-right: 0;
}

.emas-table td:first-child,
.emas-prose .wp-block-table td:first-child,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) td:first-child {
    font-weight: 600;
    color: var(--nb-ink);
}

.emas-table tbody tr:hover,
.emas-prose .wp-block-table tbody tr:hover,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) tbody tr:hover {
    background: var(--nb-wash);
}

.emas-table tbody tr:last-child td,
.emas-prose .wp-block-table tbody tr:last-child td,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) tbody tr:last-child td {
    border-bottom: none;
}

/* Wert mit Symbol davor. Ersetzt in schmalen Tabellen die Spalten-
   ueberschrift: das Symbol sagt, was der Wert ist, das Wort steht am
   title und fuer Screenreader daneben.

   Hier steht das Symbol in voller Groesse (22), nicht in der kompakten.
   Kompakt (17) ist fuer Symbole neben einer Beschriftung gedacht — hier
   TRAEGT das Symbol die Auskunft und muss neben 15px-Text bestehen. Das
   Schloss faellt zusaetzlich auf, weil es die Flaeche schlechter fuellt als
   ein Strichsymbol; darum ist seine Geometrie auf 17 von 24 Einheiten
   verbreitert, dieselbe Breite wie das Kalenderblatt-Symbol. */
.emas-cellicon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

/* Kurzinfo nach 300 ms, dieselbe Flaeche und dieselbe Verzoegerung wie in
   der Rail — nur ueber dem Symbol statt daneben: in der rechten Spalte
   einer 320er-Karte waere rechts kein Platz. Auf der Karte braucht sie
   anders als in der Rail eine Haarlinie, sonst schwimmt die gesenkte
   Flaeche. Das Wort steht zusaetzlich als screen-reader-text in der Zelle;
   diese Flaeche ist nur die sichtbare Ausgabe davon. */
.emas-tip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    padding: 7px 11px;
    font-size: var(--nb-size-caps);
    font-weight: 500;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nb-ink);
    background: var(--nb-sunken);
    border: 1px solid var(--nb-line-soft);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nb-dur-micro) var(--nb-ease) 300ms,
                visibility 0s linear 300ms;
}

.emas-cellicon:hover .emas-tip {
    opacity: 1;
    visibility: visible;
}

/* Ohne Kopfzeile richtet sich die Spaltenbreite allein nach dem Inhalt.
   Die beiden Symbolspalten sollen so schmal wie moeglich stehen, damit der
   Gruppenname den Rest bekommt. */
.emas-table--gruppen td:nth-child(2),
.emas-table--gruppen td:nth-child(3) {
    width: 1%;
    white-space: nowrap;
}

.emas-table a,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) td a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.emas-table a:hover,
#buddypress :is(.bp-tables-user, .notification-settings, table.bp-list) td a:hover {
    text-decoration: underline;
}

/* Die Listenzeile aus N6 ist keine eigene Komponente: unter 768 px wird
   dieselbe Tabelle zur Zeile umgestellt (siehe assets/css/dashboard.css).
   Ein zweites Markup fuer denselben Inhalt waere Pflege in zwei Haeusern. */

/* =========================================================================
   6 — HUELLE: Rail, Kopfzeile, Inhalt, Fusszeile, untere Leiste
   Das 128er-Raster aus N1: Rail 128 links, Kopfzeile 128 oben.
   ========================================================================= */
/* dvh statt vh: 100vh ist auf iOS Safari das Fenster OHNE Adressleiste und
   damit groesser als das, was man sieht — die Seite bekaeme einen Rollweg,
   den niemand gefuellt hat. dvh misst, was gerade wirklich da ist. Die
   vh-Zeile davor bleibt als Rueckfall fuer Browser ohne dvh stehen. */
.emas-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Nur fuer Screenreader — WordPress und BuddyPress setzen diese Klasse an
   Beschriftungen, die sichtbar doppelt waeren. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.emas-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--nb-card);
    border: 2px solid var(--nb-ink);
}

.emas-skip:focus {
    left: var(--nb-space-3);
    top: var(--nb-space-1);
}

/* --- Rail --------------------------------------------------------------
   Bleibt stehen, waehrend der Inhalt laeuft. Flat, nicht Glas: Glas ist im
   System nur ueber Fotos erlaubt, und das Intranet hat keine.

   z-index: 1, damit die Rail ueber der Inhaltsspalte liegt. Sticky allein
   reicht nicht: die Full-Bleed-Baender (Titelbild der Mitgliedsseite) laufen
   absichtlich nach links unter die Rail, und ihr Kasten
   (#cover-image-container) ist selbst positioniert. Zwei positionierte
   Elemente ohne z-index entscheidet die Reihenfolge im Dokument — und die
   Inhaltsspalte steht NACH der Rail, malt also darueber. Mit einer Stufe
   liegt die Rail wieder oben, ohne dass die Baender rechnen muessen, wo sie
   aufzuhoeren haetten. */
.emas-rail {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: flex-start;
    flex: none;
    width: var(--nb-rail);
    /* svh, nicht dvh: die Rail klebt (position: sticky) und traegt am Fuss
       den Modusknopf. Mit dvh wuechse und schrumpfte sie beim Rollen mit der
       Adressleiste, der Knopf wanderte dabei. svh ist das kleinste Mass —
       die Rail steht damit still und ihr Fuss bleibt immer erreichbar. */
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--nb-sunken);
}

.emas-rail__logo {
    flex: none;
    width: 100%;
    height: var(--nb-header);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nb-ink);
    text-decoration: none;
}

.emas-rail__logo svg {
    width: 76px;
    height: 76px;
}

.emas-rail__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding-top: 26px;
}

.emas-rail__foot {
    margin-top: auto;
    padding-bottom: 30px;
}

/* Der Umschalter zeigt immer nur das Symbol des Modus, in den er fuehrt. */
.emas-mode__moon { display: none; }
:root[data-theme="dark"] .emas-mode__sun { display: none; }
:root[data-theme="dark"] .emas-mode__moon { display: block; }

.emas-rail__slot {
    position: relative;
    display: flex;
    justify-content: center;
    width: var(--nb-rail);
}

/* Die Ziele sind Links, der Modusknopf ist ein Knopf. Die Zentrierung muss
   deshalb hier stehen und nicht aus der Knopfregel kommen — die greift bei
   einem a nicht, und die Glyphe sasse links an der Textkante. */
.emas-rail__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    color: var(--nb-ink);
    background: none;
    border: 0;
    text-decoration: none;
    transition: background-color var(--nb-dur-micro) var(--nb-ease);
}

.emas-rail__item:hover {
    color: var(--nb-ink);
    background: var(--nb-wash);
}

.emas-rail__item[aria-current="page"] {
    border: 2.4px solid var(--nb-ink);
}

/* Kurzinfo nach 300 ms — das System zeigt die Beschriftung erst, wenn
   jemand wirklich stehen bleibt. */
.emas-rail__tip {
    position: absolute;
    left: calc(50% + 38px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    padding: 7px 11px;
    font-size: var(--nb-size-caps);
    font-weight: 500;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nb-ink);
    background: var(--nb-sunken);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nb-dur-micro) var(--nb-ease) 300ms,
                visibility 0s linear 300ms;
}

.emas-rail__slot:hover .emas-rail__tip,
.emas-rail__item:focus-visible + .emas-rail__tip {
    opacity: 1;
    visibility: visible;
}

/* --- Inhaltsspalte ----------------------------------------------------- */
.emas-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Die Kopfzeile steht auf derselben Breite wie der Inhalt darunter und
   nimmt dasselbe Polster — Seitenname und erste Karte fluchten damit auf
   einer Kante. Auch die Haarlinie unten endet dort, wo der Inhalt endet.

   EBENENORDNUNG DES THEMES, hier ihr wichtigster Punkt:
     0    Inhalt, auch das Titelband und sein Kopf
     1    Rail und alles, was der Inhalt selbst uebereinander legt
     10   Kopfzeile — und in ihr die Tafel (90) mit ihrem Griff (91)
     100  Sprungmarke, sie geht ueber alles
   Die Stufe MUSS hier stehen und nicht erst auf Seiten mit Titelbild: die
   Kopfzeile macht damit einen Bezugsrahmen auf, und die 90 der Tafel gilt
   nur INNERHALB davon. Nach aussen zaehlt allein diese Zahl. Stand sie auf
   1 (so war es, und nur auf Fotoseiten), lag die Tafel mit der Kopfzeile
   auf derselben Stufe wie der Feed — und bei Gleichstand entscheidet die
   Reihenfolge im Dokument, die fuer den spaeter stehenden Feed spricht:
   seine Datumsmarken lagen ueber dem offenen Menue.
   Inhalt nimmt darum keine Stufe ab 10. */
.emas-header {
    position: relative;
    z-index: 10;
    flex: none;
    width: 100%;
    max-width: var(--nb-page);
    margin: 0 auto;
    height: var(--nb-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nb-space-4);
    padding: 0 var(--nb-space-5);
    border-bottom: 1px solid var(--nb-line-soft);
}

.emas-header__title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
}

.emas-header__eyebrow {
    font-size: var(--nb-size-caps);
    font-weight: 500;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    color: var(--nb-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emas-header__h {
    margin: 0;
    font-size: var(--nb-size-title);
    line-height: var(--nb-lh-title);
    letter-spacing: var(--nb-track-title);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emas-header__right {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--nb-space-4);
}

/* Suchfeld in der Kopfzeile: Symbol und Feld sind EIN Kasten. */
.emas-searchfield {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 260px;
    padding: 14px;
    background: var(--nb-input);
    border: 1px solid var(--nb-line-control);
}

/* Symbol und Feld sind EIN Kasten — also traegt der Kasten den Fokusring und
   nicht das Feld darin. Das Feld gibt seinen eigenen Umriss deshalb ab
   (outline: none weiter unten); ohne diese Regel bliebe der Fokus unsichtbar. */
.emas-searchfield:focus-within {
    outline: 2px solid var(--nb-ink);
    outline-offset: 3px;
}

.emas-searchfield__icon {
    display: flex;
    color: var(--nb-ink);
}

.emas-searchfield input[type="search"] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: var(--nb-size-control);
    background: transparent;
    border: 0;
    outline: none;
}

.emas-me {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--nb-hit);
    font-size: var(--nb-size-label);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.emas-me:hover {
    text-decoration: none;
}

.emas-me__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emas-main {
    flex: 1;
    display: block;
    padding: var(--nb-space-5) 0 var(--nb-space-6);
}

/* Auf BuddyPress-Screens traegt das Coverbild den oberen Abschluss, dort
   darf kein zusaetzlicher Abstand stehen. */
body.buddypress .emas-main {
    padding-top: 0;
}

.emas-container {
    width: 100%;
    max-width: var(--nb-page);
    margin: 0 auto;
    padding: 0 var(--nb-space-5);
}

/* Lesespalte fuer Fliesstext. NICHT fuer BuddyPress-Screens — die brauchen
   die volle Breite (siehe index.php / page.php). */
.emas-prose {
    max-width: 68ch;
    font-size: var(--nb-size-body);
}

.emas-entry__meta {
    margin: 0 0 var(--nb-space-4);
    font-size: var(--nb-size-label);
    font-weight: 500;
    color: var(--nb-ink-3);
}

.emas-entry__media {
    margin: 0 0 var(--nb-space-4);
}

/* Ohne Kante: das Bild steht in einer Karte, die schon eine hat — zwei
   Rahmen ineinander sind einer zu viel. */
.emas-entry__media img {
    display: block;
    width: 100%;
}

/* Suchformular auf der Suchseite: Feld und Knopf sind EIN Block, die
   geteilte Linie wird nicht doppelt gezeichnet. */
.emas-search {
    display: flex;
    max-width: 480px;
    margin: 0 0 var(--nb-space-4);
}

.emas-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 0;
}

.emas-search button {
    flex: 0 0 auto;
}

/* --- Trefferliste der Suche -------------------------------------------
   Die Klasse .emas-entry steht auf VIER Templates, darunter index.php —
   und das umschliesst auch jeden BuddyPress-Screen. Die Zeilenform haengt
   darum an body.search und nicht an der Klasse allein; sonst bekaeme das
   Profil eine Haarlinie um den Inhalt.

   Eine Zeile je Treffer: Titel als Ziel, darunter der Auszug, Haarlinie
   dazwischen. Kein Kasten — die Liste steht in der Lesespalte und braucht
   keine zweite Kante. */
body.search .emas-entry {
    padding: var(--nb-space-3) 0;
    border-bottom: 1px solid var(--nb-line-soft);
}

body.search .emas-entry:first-of-type {
    border-top: 1px solid var(--nb-line-soft);
}

body.search .emas-entry h2 {
    margin: 0 0 var(--nb-space-1);
    font-size: var(--nb-size-card-title);
    font-weight: 600;
    line-height: var(--nb-lh-card-title);
    letter-spacing: var(--nb-track-title);
}

/* Der Unterstrich wachse nicht, er erscheint: in einer Liste gleichartiger
   Zeilen ist der Regelstrich aus Abschnitt 4 zu viel Bewegung. */
body.search .emas-entry h2 a {
    color: var(--nb-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color var(--nb-dur-micro) var(--nb-ease);
}

body.search .emas-entry h2 a:hover {
    border-bottom-color: var(--nb-ink);
}

/* Der Auszug ist eine Beistellung zum Titel und kein Fliesstext: eine
   Stufe kleiner als der Lesegrad, zweite Tintenstufe. WordPress kuerzt ihn
   schon auf 55 Woerter, ein zweiter Deckel im CSS waere doppelt. */
body.search .emas-entry .emas-prose {
    font-size: var(--nb-size-ui);
    color: var(--nb-ink-2);
}

body.search .emas-entry .emas-prose p:last-child {
    margin-bottom: 0;
}

/* "Keine Treffer." ist eine Auskunft und keine Aussage der Seite. */
body.search .emas-container > p.emas-prose {
    color: var(--nb-ink-3);
}

/* Seitenzahlen. Dieselbe Form wie in BuddyPress (buddypress.css Abschnitt
   10), hier fuer die Ausgabe von the_posts_pagination():
   nav.navigation.pagination > .nav-links > a.page-numbers und
   span.page-numbers.current. Am gerenderten Markup geprueft, nicht aus dem
   Gedaechtnis. */
.navigation.pagination {
    margin: var(--nb-space-4) 0 0;
    padding: var(--nb-space-2) 0 0;
    border-top: 1px solid var(--nb-line-soft);
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nb-space-1);
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: var(--nb-size-label);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--nb-ink-3);
    text-decoration: none;
    border: 2px solid transparent;
    transition: color var(--nb-dur-micro) var(--nb-ease),
                border-color var(--nb-dur-micro) var(--nb-ease);
}

.navigation.pagination a.page-numbers:hover {
    color: var(--nb-ink);
    border-color: var(--nb-line-soft);
}

.navigation.pagination .page-numbers.current {
    color: var(--nb-base);
    background: var(--nb-ink);
    border-color: var(--nb-ink);
}

.emas-footer {
    padding: var(--nb-space-4) 0;
    font-size: var(--nb-size-label);
    font-weight: 500;
    color: var(--nb-ink-3);
    border-top: 1px solid var(--nb-line-soft);
}

/* --- Tafel, nur kompakt -------------------------------------------------
   Variante C des Entwurfs vom 7.9.2026. Die untere Leiste ist ersatzlos
   gefallen — sie stand fest auf vier Spalten, obwohl footer.php je nach
   aktiver BuddyPress-Komponente eins bis vier Ziele lieferte, und liess
   damit leere Felder stehen. An ihre Stelle tritt ein Griff links in der
   Kopfzeile, der eine Tafel ueber den ganzen Schirm hereinfaehrt: erst die
   Ziele, darunter die Karten, die auf dem Dashboard in den Seitenspalten
   stehen.

   Gebaut aus <details>. Der Browser traegt damit Auf und Zu, den Zustand
   fuer Screenreader und die Bedienung per Tastatur — ohne eine Zeile
   JavaScript, und darum auch OHNE JavaScript. Dieselbe Bauweise wie der
   Aufklapper an der Lesezeichen-Karte.

   Der Schliessknopf IST der Griff: ein <details> kennt genau ein <summary>,
   ein zweiter Knopf koennte gar nicht zumachen. Offen wandert der Griff
   darum an den rechten Rand und tauscht sein Symbol. */
.emas-tafel {
    display: none;
}

/* Tinte geerbt, nicht gesetzt: auf dem Profil mit Titelbild traegt die
   Kopfzeile weisse Tinte fuer das Foto (buddypress.css, Abschnitt 2), und der
   Griff steht mitten darin. Fest auf --nb-ink stuende er dunkel auf dem
   Foto. */
.emas-tafel__griff {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--nb-hit);
    height: var(--nb-hit);
    margin-left: -10px;
    color: inherit;
    list-style: none;
    cursor: pointer;
}

/* Beide Schreibweisen: WebKit braucht das Pseudoelement, alle anderen
   nehmen list-style oben. */
.emas-tafel__griff::-webkit-details-marker {
    display: none;
}

/* Fest im Fenster, nicht in der Tafel: beim Rollen bleibt der Knopf stehen.
   14 statt 16 oben, damit das 44er Quadrat auf der Mitte der 72er Kopfzeile
   sitzt — gerechnet ab der Unterkante der Adminleiste, siehe die Tafel
   darunter.

   Hier wird die Tinte doch gesetzt: offen steht der Knopf nicht mehr in der
   Kopfzeile, sondern auf der Tafel — und die liegt auf Papier, auch dort, wo
   die Kopfzeile weiss auf einem Foto schreibt. */
.emas-tafel[open] > .emas-tafel__griff {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 14px);
    right: var(--nb-space-2);
    z-index: 91;
    margin-left: 0;
    color: var(--nb-ink);
}

.emas-tafel__zu {
    display: none;
}

.emas-tafel[open] .emas-tafel__auf {
    display: none;
}

.emas-tafel[open] .emas-tafel__zu {
    display: block;
}

/* overscroll-behavior haelt das Rollen in der Tafel: sonst schoebe die
   Seite darunter weiter, sobald die Tafel am Ende ist.

   Oben nicht 0, sondern die Hoehe der Adminleiste. Sie steht fest am
   Fensterrand und traegt z-index: 100000 — dagegen kommt keine Stufe von
   uns an, und die Tafel begann bisher DARUNTER: ihr Kopf mit «Menü» und der
   Schliessknopf lagen dahinter, das Menue liess sich nur mit der Ruecktaste
   schliessen. WordPress gibt die Hoehe selbst heraus
   (--wp-admin--admin-bar--height, kompakt 46, breit 32); darum keine feste
   Zahl. Wer die Leiste abgeschaltet hat, hat die Property nicht — dann
   greift die 0 aus dem zweiten Argument. */
.emas-tafel__panel {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    padding: 0 var(--nb-space-2) var(--nb-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--nb-base);
    animation: emas-tafel-ein var(--nb-dur-medium) var(--nb-ease-enter);
}

/* Von links, weil der Griff links steht. Wer weniger Bewegung bestellt hat,
   bekommt die Tafel sofort — die Sternregel weiter unten setzt jede
   Animationsdauer auf 1 ms. */
@keyframes emas-tafel-ein {
    from { transform: translateX(-100%); }
    to   { transform: none; }
}

/* Dieselbe Hoehe wie die Kopfzeile der Seite: der Schliessknopf steht damit
   genau dort, wo eben der Griff stand. */
.emas-tafel__kopf {
    flex: none;
    display: flex;
    align-items: center;
    height: var(--nb-header-compact);
    border-bottom: 1px solid var(--nb-line-soft);
}

.emas-tafel__titel {
    margin: 0;
    font-size: var(--nb-size-card-title);
    line-height: var(--nb-lh-card-title);
    letter-spacing: var(--nb-track-title);
    font-weight: 700;
}

/* Die Suche stand kompakt bisher gar nicht zur Verfuegung — in der
   Kopfzeile ist sie unter 768 ausgeblendet und hatte keinen Ersatz. Hier
   hat sie die volle Breite. */
.emas-tafel .emas-searchfield {
    flex: none;
    width: 100%;
}

.emas-tafel__nav {
    flex: none;
    display: flex;
    flex-direction: column;
}

/* 56 statt 44: die Zeile ist hier das einzige Ziel auf ihrer Hoehe, und ein
   Daumen trifft sie ohne Zielen. */
.emas-tafel__ziel {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    min-height: 56px;
    padding: 12px 0;
    font-size: var(--nb-size-body);
    font-weight: 500;
    color: var(--nb-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--nb-line-soft);
}

.emas-tafel__ziel:hover,
.emas-tafel__ziel:focus-visible {
    color: var(--nb-ink);
    text-decoration: none;
}

.emas-tafel__ziel[aria-current="page"] {
    font-weight: 700;
    color: var(--nb-ink);
}

/* Der Zaehler steht am Ende der Zeile, nicht auf dem Symbol: anders als im
   44er Quadrat der alten Leiste ist hier Platz dafuer. */
.emas-tafel__ziel .emas-count {
    margin-left: auto;
}

.emas-tafel__karten {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
}

/* Der Modusknopf haengt am Fuss der Rail und verschwand unter 768 mit ihr —
   hell/dunkel war kompakt gar nicht erreichbar. Hier steht er in der
   Kopfzeile und nur dort, wo die Rail fehlt. */
.emas-header__mode {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--nb-hit);
    height: var(--nb-hit);
    padding: 0;
    /* Geerbt wie beim Griff — auf dem Foto schreibt die Kopfzeile weiss. */
    color: inherit;
    background: none;
    border: 0;
}

.emas-header__mode:hover {
    color: inherit;
    background: none;
}

/* =========================================================================
   9 — KARTE UND IHRE INNEREIEN
   Karte, Leerzustand, Terminliste, Kalenderblatt, Kennzahl, Vorschau und
   Lesezeichen. Standen bis zum 7.9.2026 in assets/css/dashboard.css, das nur
   auf vier Seitentypen laedt. Seit die Tafel (Abschnitt 6) dieselben Karten
   auf JEDER Seite traegt, gehoeren sie in das Stylesheet, das ueberall laeuft.
   dashboard.css behaelt das Spaltenraster, das Beitragsfeld und den Feed.
   ========================================================================= */

/* =========================================================================
   Karte
   ========================================================================= */
.emas-card {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    padding: 26px;
    background: var(--nb-card);
    border: 1px solid var(--nb-line-soft);
}

.emas-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);
}

/* Beschriftung ist eine echte Ueberschrift (h2) — nur eben klein gesetzt,
   damit der Titel in der Karte die Stimme behaelt. */
.emas-card__label {
    margin: 0;
    font-size: var(--nb-size-caps);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    color: var(--nb-ink);
}

.emas-card__title {
    font-size: var(--nb-size-card-title);
    line-height: var(--nb-lh-card-title);
    font-weight: 700;
}

.emas-card__text {
    margin: 0;
    font-size: var(--nb-size-body);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-2);
}

.emas-card > p:last-child {
    margin-bottom: 0;
}

/* Eine Reihe Knoepfe unter dem Text. */
.emas-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-2);
    padding-top: var(--nb-space-1);
}

.emas-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* =========================================================================
   Leerzustand und Modulfehler
   Der Leerzustand ist im frischen Intranet der Normalfall, also
   ausformuliert und nicht grau. Der Modulfehler gilt je Modul und nennt
   Ursache, Folge und Handlung — das Wort «Fehler» traegt die Bedeutung,
   nicht die Farbe.
   ========================================================================= */
.emas-empty,
.emas-modulerror {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nb-space-2);
}

/* =========================================================================
   Terminliste
   Eine Karte statt zwei: der naechste Termin ist die erste, betonte Zeile,
   die uebrigen folgen kompakt darunter, getrennt durch Haarlinien. Das
   Datum steht in jeder Zeile als Kalenderblatt, nicht als Text.
   ========================================================================= */
.emas-termine {
    display: flex;
    flex-direction: column;
}

.emas-termin {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: 14px 0;
    border-top: 1px solid var(--nb-line-soft);
}

.emas-termin--lead {
    align-items: flex-start;
    padding: 0 0 20px;
    border-top: none;
}

.emas-termin__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emas-termin--lead .emas-termin__body {
    gap: 6px;
}

.emas-termin__title {
    font-size: var(--nb-size-control);
    font-weight: 500;
    line-height: 1.3;
}

/* Als Link traegt der Titel den Ton der Zeile, nicht den der Linkfarbe;
   das Ziel wird erst beim Zeigen sichtbar (wie im Feed). */
a.emas-termin__title {
    color: var(--nb-ink);
    text-decoration: none;
}

a.emas-termin__title:hover,
a.emas-termin__title:focus-visible {
    text-decoration: underline;
}

/* Die ganze Zeile ist die Trefferflaeche: der Titel-Link legt sich als
   Flaeche ueber die Zeile (Kalenderblatt und Metazeile eingeschlossen).
   Nur in der Terminliste — die Feed-Zeile traegt eigene Knoepfe, die eine
   solche Flaeche zudecken wuerde. */
.emas-termine .emas-termin {
    position: relative;
}

.emas-termine a.emas-termin__title::after {
    content: "";
    position: absolute;
    inset: 0;
}

.emas-termine .emas-termin:has(a.emas-termin__title):hover {
    background: var(--nb-sunk);
}

.emas-termine .emas-termin:has(a.emas-termin__title:focus-visible) {
    outline: 2px solid var(--nb-ink);
    outline-offset: 2px;
}

.emas-termin--lead .emas-termin__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: pretty;
}

.emas-termin__meta {
    font-size: var(--nb-size-label);
    line-height: 1.4;
    color: var(--nb-ink-3);
}

.emas-termin--lead .emas-termin__meta {
    font-size: var(--nb-size-control);
    color: var(--nb-ink-2);
}

.emas-termin__note {
    font-size: var(--nb-size-label);
    line-height: 1.4;
    color: var(--nb-ink-3);
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Kalenderblatt
   Kein Strichsymbol, sondern eine Flaeche mit dem Datum darin: Monat als
   Streifen in Tinte, Tagesziffer auf gesenktem Grund darunter. Radius 0,
   Ziffern tabellarisch — wie der Rest des Systems.

   Keine Kante: der Block steht IN einer Karte, die schon eine hat. Der
   Tinte-Streifen ist die Marke, die gesenkte Flaeche der Halt — sonst
   staende hier ein dritter Rahmen. */
.emas-datebox {
    flex: none;
    display: flex;
    flex-direction: column;
    width: 64px;
    background: var(--nb-sunken);
    text-align: center;
    overflow: hidden;
}

.emas-datebox__month {
    display: block;
    padding: 3px 0;
    background: var(--nb-ink);
    color: var(--nb-card);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.emas-datebox__day {
    display: block;
    padding: 6px 0 8px;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nb-ink);
}

/* In den Folgezeilen ist das Blatt kleiner — die Zeile soll nicht hoeher
   werden als ihr Text. */
.emas-termin:not(.emas-termin--lead) .emas-datebox {
    width: 46px;
}

.emas-termin:not(.emas-termin--lead) .emas-datebox__month {
    font-size: 10px;
}

.emas-termin:not(.emas-termin--lead) .emas-datebox__day {
    padding: 3px 0 5px;
    font-size: 18px;
}

/* =========================================================================
   Kennzahl
   Ziffer gross, Wort darunter — ohne eigenes Ziel. Anklickbar ist der
   Textknopf darunter, nicht die Zahl.
   ========================================================================= */
.emas-metrics {
    display: flex;
    gap: var(--nb-space-4);
    flex-wrap: wrap;
}

.emas-metric {
    display: block;
    min-width: 0;
}

.emas-metric__value {
    display: block;
    font-size: var(--nb-size-metric);
    line-height: var(--nb-lh-metric);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nb-ink);
}

.emas-metric__label {
    display: block;
    margin-top: 6px;
    font-size: var(--nb-size-label);
    font-weight: 500;
    color: var(--nb-ink-2);
}

/* =========================================================================
   Ungelesenes: zwei Kennzahlen, darunter die letzten zwei Betreffzeilen
   ========================================================================= */
.emas-preview {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    padding-top: var(--nb-space-2);
    border-top: 1px solid var(--nb-line-soft);
}

.emas-preview span {
    font-size: var(--nb-size-body);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================================
   Lesezeichen: persoenliche Links in der linken Spalte
   Variante C des Entwurfs: eine KACHEL je Link statt einer Zeile mit
   Trennstrich — der gesenkte Ton trennt, kein Strich. Symbol links, Name,
   rechts der Loeschknopf; die festen Eintraege des Vorstands stehen oben und
   tragen keinen. Aufgeklappt wird das Eingabefeld mit <details>; dafuer
   braucht es kein Skript.
   ========================================================================= */
.emas-lesezeichen {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Volle Trefferflaeche: die Kachel ist so hoch wie ein Steuerelement.
   Beim Ueberfahren laeuft die Wischflaeche von links durch — dieselbe
   Bewegung wie unter jedem Knopf des Themes (style.css, Abschnitt 4), keine
   Deckkraft und kein Schatten. Sie haengt an der KACHEL, nicht am Link:
   sonst bliebe der Streifen unter dem Loeschknopf stehen. Mit
   :focus-within antwortet sie auch der Tastatur. Wer wenig Bewegung
   eingestellt hat, bekommt sie in 1 ms — die Regel dafuer steht global in
   style.css. */
.emas-lesezeichen__zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--nb-hit);
    padding: 0 12px;
    background-color: var(--nb-sunken);
    background-image: linear-gradient(to right, var(--nb-wipe), var(--nb-wipe));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size var(--nb-dur-medium) var(--nb-ease);
}

.emas-lesezeichen__zeile:hover,
.emas-lesezeichen__zeile:focus-within {
    background-size: 100% 100%;
}

/* Das Ziel nimmt die Kachel bis zum Knopf: anklickbar ist die Beschriftung
   samt Symbol, nicht bloss das Wort. */
.emas-lesezeichen__ziel {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: var(--nb-size-control);
    line-height: 1.2;
    color: var(--nb-ink);
}

.emas-lesezeichen__titel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.emas-lesezeichen__form {
    flex: none;
    margin: 0;
}

/* Der Loeschknopf ist ein Symbol, keine Flaeche. Der Grundstil macht aus
   jedem button einen gefuellten Knopf — das wird hier zurueckgenommen,
   genau wie bei den Moderationszeichen im Feed (.emas-feed__zeichen). */
.emas-lesezeichen__weg {
    min-height: 0;
    padding: 4px;
    color: var(--nb-ink-3);
    background: none;
    border: 0;
}

.emas-lesezeichen__weg:hover,
.emas-lesezeichen__weg:focus-visible {
    color: var(--nb-ink);
    background: none;
}

/* Der Aufklapper sieht aus wie ein Textknopf, ist aber ein summary — die
   Dreiecksmarke der Browser faellt weg, der Regelstrich uebernimmt. Offen
   bleibt er gedehnt: das ist der Zustand, nicht bloss das Ueberfahren. */
.emas-lesezeichen__neu > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--nb-size-control);
    font-weight: 600;
    color: var(--nb-ink);
    list-style: none;
    cursor: pointer;
}

.emas-lesezeichen__neu > summary::-webkit-details-marker {
    display: none;
}

.emas-lesezeichen__neu > summary::after {
    content: "";
    display: block;
    flex: none;
    width: 64px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0.65625);
    transform-origin: left center;
    transition: transform var(--nb-dur-medium) var(--nb-ease);
}

.emas-lesezeichen__neu > summary:hover::after,
.emas-lesezeichen__neu > summary:focus-visible::after,
.emas-lesezeichen__neu[open] > summary::after {
    transform: scaleX(1);
}

/* Gesenkte Flaeche wie beim Eingabefeld ueber dem Feed: das Formular ist
   kein Inhalt der Karte, sondern eine Werkbank darin. */
.emas-lesezeichen__anlegen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--nb-space-2);
    padding: var(--nb-space-2);
    background: var(--nb-sunken);
}


/* Kompakt: Kartenpolster eine Stufe tiefer, Kennzahlen nebeneinander,
   mehrspaltige Tabellen als Listenzeilen. Stand bis zum 7.9.2026 in
   dashboard.css — verschoben mit den Regeln, zu denen es gehoert. */
@media (max-width: 767px) {
    .emas-card {
        gap: 12px;
        padding: var(--nb-space-2);
    }

    .emas-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    /* Auf 390 px hat eine mehrspaltige Tabelle keinen Platz. Statt eines
       zweiten Markups wird dieselbe Tabelle zur Listenzeile: Kopf weg,
       Zeile ist die Flaeche, erste Zelle der Anker, die naechste kuerzt
       zuerst, die letzte steht rechts. */
    .emas-table thead {
        display: none;
    }

    .emas-table,
    .emas-table tbody,
    .emas-table tr,
    .emas-table td {
        display: block;
    }

    .emas-table tr {
        display: flex;
        align-items: center;
        gap: var(--nb-space-2);
        min-height: var(--nb-hit);
        padding: 12px 0;
        border-top: 1px solid var(--nb-line-soft);
    }

    .emas-table tbody tr:first-child {
        border-top: none;
    }

    .emas-table td {
        padding: 0;
        font-size: var(--nb-size-label);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none;
    }

    /* Anker links in fester Breite, die zweite Zelle traegt den Namen und
       gibt als erste nach. */
    .emas-table td:first-child {
        flex: none;
        max-width: 40%;
        font-weight: 500;
    }

    .emas-table td:nth-child(2) {
        flex: 1;
        min-width: 0;
        font-weight: 500;
        color: var(--nb-ink);
    }

    /* Ab der dritten Spalte faellt der Inhalt weg statt zu quetschen — auf
       390 px passen Datum, Name und Ort nicht nebeneinander. Die Zeile
       fuehrt ohnehin auf die Seite, wo alles steht. */
    .emas-table td:nth-child(n + 3) {
        display: none;
    }
}

/* =========================================================================
   7 — FLIESSTEXT UND BLOECKE (.emas-prose)
   Alles, was der WordPress-Editor auf eine Statuten-, Protokoll- oder
   Merkblattseite legt. Nur hier, nicht global: BuddyPress-Screens laufen
   ueber .emas-bp und sollen von diesen Regeln nichts abbekommen.

   Warum ueberall der Vorsatz .emas-prose steht: die Blockbibliothek von
   WordPress wird NACH dem Theme-Stylesheet in den Kopf geschrieben (im
   Abruf: style.css auf Zeile 38, die wp-block-*-Stile ab Zeile 88). Bei
   gleicher Spezifitaet gewinnt also WordPress. Der Vorsatz hebt jede Regel
   hier um eine Klasse an — das ist der Ersatz fuer !important, das im
   Theme nicht vorkommt.
   ========================================================================= */

/* --- Ueberschriften ----------------------------------------------------
   Die Groessen stehen schon in Abschnitt 3 (h2 = metric, h3 = card-title,
   h4 = body). Hier kommt nur der Rhythmus dazu: der Abstand ueber einer
   Ueberschrift ist deutlich groesser als der darunter, damit sie zu dem
   gehoert, was ihr folgt. */
.emas-prose h2 {
    margin-top: var(--nb-space-5);
}

.emas-prose h3 {
    margin-top: var(--nb-space-4);
}

.emas-prose h4,
.emas-prose h5,
.emas-prose h6 {
    margin-top: var(--nb-space-3);
}

.emas-prose > *:first-child {
    margin-top: 0;
}

.emas-prose > *:last-child {
    margin-bottom: 0;
}

/* --- Listen ------------------------------------------------------------
   Der Browser setzt hier 40 px Einzug; das ist keine Groesse aus der
   Skala. Verschachtelte Listen tragen keinen eigenen Aussenabstand, sonst
   reisst die Liste in der Mitte auf. */
.emas-prose ul,
.emas-prose ol {
    padding-left: var(--nb-space-3);
}

.emas-prose li {
    margin-bottom: var(--nb-space-1);
}

.emas-prose li:last-child {
    margin-bottom: 0;
}

.emas-prose li > ul,
.emas-prose li > ol {
    margin: var(--nb-space-1) 0 0;
}

.emas-prose li::marker {
    color: var(--nb-ink-3);
}

/* --- Zitat -------------------------------------------------------------
   Haarlinie links, aufrecht, kein Anfuehrungszeichenbild. Ein Zitat ist
   eine Quelle, keine Verzierung. */
.emas-prose blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--nb-space-3);
    font-style: normal;
    color: var(--nb-ink-2);
    border-left: 1px solid var(--nb-line);
}

.emas-prose blockquote > *:last-child {
    margin-bottom: 0;
}

.emas-prose blockquote cite {
    display: block;
    margin-top: var(--nb-space-2);
    font-size: var(--nb-size-label);
    font-style: normal;
    font-weight: 500;
    color: var(--nb-ink-3);
}

/* --- Bild mit Unterschrift ---------------------------------------------
   Randlos: das Bild traegt sich selbst, eine Kante darum waere die zweite
   Ansage. Die Unterschrift steht im Labelgrad in der dritten Tintenstufe —
   sie ist Beiwerk, nicht Fliesstext. Deckt figure/figcaption (Blockeditor)
   und wp-caption (klassischer Editor) mit denselben Werten ab. */
.emas-prose figure {
    margin-left: 0;
    margin-right: 0;
}

.emas-prose figure img,
.emas-prose .wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

.emas-prose figcaption,
.emas-prose .wp-caption-text {
    margin: var(--nb-space-1) 0 0;
    font-size: var(--nb-size-label);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-3);
}

/* Die klassische Bildunterschrift bringt eine Inline-Breite in Pixeln mit;
   auf schmalen Fenstern liefe sie damit aus der Spalte. */
.emas-prose .wp-caption {
    max-width: 100%;
    margin: 0 0 var(--nb-space-3);
}

/* --- Tabelle -----------------------------------------------------------
   Die Optik steht in Abschnitt 5 an denselben Regeln wie .emas-table. Hier
   bleiben nur die zwei Dinge, die es dort nicht gibt: der 3-px-Balken, den
   die Blockbibliothek unter thead legt, und der Ausbruch aus der 68ch-
   Lesespalte — eine dreispaltige Tabelle darf breiter stehen als der Satz,
   .wp-block-table rollt sie waagrecht (das kommt von WordPress). */
.emas-prose .wp-block-table thead {
    border-bottom: 0;
}

.emas-prose .wp-block-table {
    margin-left: 0;
    margin-right: 0;
}

/* --- Code --------------------------------------------------------------
   Haarlinienkasten auf gesenkter Flaeche. Abschnitt 3 setzt pre schon so;
   hier kommt das Feld im Satz dazu und die Reparatur an wp-block-code, das
   `font-family: inherit` auf das code-Element legt und damit die
   Schreibmaschine wieder abschaltet. */
.emas-prose code {
    padding: 2px 6px;
    background: var(--nb-sunken);
    border: 1px solid var(--nb-line-soft);
}

.emas-prose pre code,
.emas-prose .wp-block-code code {
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: none;
    border: 0;
}

/* --- Trennlinie --------------------------------------------------------
   Die Blockbibliothek setzt 2 px in der Textfarbe; im Northbound ist die
   Trennung eine Haarlinie. */
.emas-prose hr {
    height: 0;
    margin: var(--nb-space-5) 0;
    border: 0;
    border-top: 1px solid var(--nb-line-soft);
}

/* --- Knopf-Bloecke -----------------------------------------------------
   Der Editor gibt ein a.wp-block-button__link aus, kein button — die
   Knopfregeln aus Abschnitt 4 greifen dort nicht. Sie werden hier fuer den
   Anker wiederholt, mit derselben Wischflaeche und denselben Token.
   Gegner sind zwei Regeln von WordPress auf (0,1,0):
   `:root :where(.wp-element-button, .wp-block-button__link)` aus den
   Global Styles und `:where(.wp-block-button__link)` aus der
   Blockbibliothek. Der Vorsatz .emas-prose bringt uns auf (0,2,0). */
.emas-prose .wp-block-buttons {
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-3);
}

.emas-prose .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--nb-hit);
    padding: 15px 26px;
    font-size: var(--nb-size-control);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nb-base);
    text-decoration: none;
    background-color: var(--nb-ink);
    background-image: linear-gradient(to right, var(--nb-wipe), var(--nb-wipe));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    border: 0;
    border-radius: var(--nb-radius);
    transition: background-size var(--nb-dur-medium) var(--nb-ease),
                color var(--nb-dur-micro) var(--nb-ease);
}

.emas-prose .wp-block-button__link:hover {
    color: var(--nb-base);
    text-decoration: none;
    background-size: 100% 100%;
}

/* Die Umriss-Ausfuehrung des Editors wird zum sekundaeren Knopf. Sie traegt
   die Klasse einmal am Anker und einmal am Umschlag, beide Faelle sind
   gefasst — WordPress verteilt sie je nach Alter des Inhalts anders. */
.emas-prose .wp-block-button.is-style-outline > .wp-block-button__link,
.emas-prose .wp-block-button__link.is-style-outline,
.emas-prose .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.emas-prose .wp-block-button__link.is-style-outline:hover {
    color: var(--nb-ink);
    background-color: transparent;
    border: 1px solid var(--nb-line-control);
}

/* Verweise im Fliesstext brauchen hier nichts Eigenes: Abschnitt 3 gibt
   jedem a den Unterstrich, der beim Ueberfahren von 1 auf 2 px waechst —
   dieselbe Reaktion wie bei .emas-button--text. Nur der Knopfblock oben
   nimmt sie ausdruecklich zurueck. */

/* -------------------------------------------------------------------------
   7.1 — Die uebrigen Bloecke (Freigabe vom 7.9.2026, Vorschlag C)

   Galerie, Spalten, Details, Medien-und-Text, Cover und Pullquote fielen
   bisher auf das CSS von WordPress zurueck. Sie stehen hier NICHT als
   Layout-Neubau, sondern als Auflage: WordPress 7.1 liefert das Layout
   weiterhin aus — nicht mehr ueber 'wp-block-library' (das bestellt
   emas-hardening Abschnitt 8 ab, wirkungslos seit 7.1), sondern ueber ein
   Stylesheet je Block ('wp-block-columns', 'wp-block-gallery', ...) plus die
   Layout-Regeln aus den Block-Supports. Am gerenderten Markup geprueft.

   Deshalb steht ueberall der Vorsatz .emas-prose: die Blockstile tragen
   (0,1,0), wir damit (0,2,0). Kein !important, und nichts wird nachgebaut,
   was der Kern schon richtig macht — Flex, Grid und die Umbrueche auf
   schmalen Bildschirmen bleiben seine.
   ------------------------------------------------------------------------- */

/* --- Galerie ------------------------------------------------------------
   Die Bilder teilen sich ihre Linien, statt jedes eine zu ziehen: der
   Grund der Galerie IST die Linie, die Bilder legen sich als Papierflaechen
   mit zwei Pixel Abstand darauf. Dieselbe Geste wie bei den Gesichtern im
   Gruppenverzeichnis (buddypress.css Abschnitt 11).

   Der Abstand laeuft ueber die Variable des Kerns, nicht ueber gap allein:
   der Kern rechnet die Spaltenbreite mit
   calc(N% - var(--wp--style--unstable-gallery-gap) * ...). Wer nur gap
   setzt, bekommt eine Zeile zu wenig oder einen Umbruch zu frueh. */
.emas-prose .wp-block-gallery.has-nested-images {
    --wp--style--unstable-gallery-gap: 2px;
    gap: 2px;
    background: var(--nb-line-soft);
    border: 1px solid var(--nb-line-soft);
}

.emas-prose .wp-block-gallery.has-nested-images figure.wp-block-image {
    background: var(--nb-card);
}

/* Die Unterschrift eines einzelnen Bildes in der Galerie liegt bei
   is-cropped als Band ueber dem Bild. Northbound setzt sie darunter, in den
   Labelgrad und in die dritte Tintenstufe — wie figcaption in Abschnitt 7. */
.emas-prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    position: static;
    max-height: none;
    padding: var(--nb-space-1);
    font-size: var(--nb-size-label);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-3);
    background: none;
    text-align: left;
}

/* Die Unterschrift der GANZEN Galerie steht ausserhalb des Rasters. */
.emas-prose .wp-block-gallery > figcaption {
    margin-top: var(--nb-space-1);
    font-size: var(--nb-size-label);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-3);
    text-align: left;
}

/* --- Spalten ------------------------------------------------------------
   Trennlinie in der Rinne statt einer blossen Luecke. Sie haengt an der
   Spalte, nicht am Umschlag: nur so trifft sie genau die Rinnen, die es
   wirklich gibt, und verschwindet mit der letzten Spalte von selbst. */
.emas-prose .wp-block-columns {
    gap: var(--nb-space-4);
    margin-bottom: var(--nb-space-4);
}

.emas-prose .wp-block-columns > .wp-block-column + .wp-block-column {
    padding-left: var(--nb-space-4);
    border-left: 1px solid var(--nb-line-soft);
}

/* Unter 782 stapelt der Kern die Spalten. Dann steht die Linie oben, nicht
   links — eine senkrechte Linie an einer vollbreiten Spalte waere sinnlos.
   Die Grenze ist die des Kerns, nicht die des Themes (768): sonst gaebe es
   14 Pixel, in denen beide Regeln zugleich gelten. */
@media (max-width: 781px) {
    .emas-prose .wp-block-columns > .wp-block-column + .wp-block-column {
        padding-top: var(--nb-space-3);
        padding-left: 0;
        border-top: 1px solid var(--nb-line-soft);
        border-left: 0;
    }
}

/* --- Details ------------------------------------------------------------
   Kein Kasten, sondern zwei Haarlinien: kraeftig oben, leise unten. Das
   Dreieck des Browsers faellt weg, an seine Stelle tritt ein Winkel aus zwei
   Kanten, der sich beim Aufklappen dreht — kein Bild, keine Schriftart. */
.emas-prose .wp-block-details {
    margin-bottom: var(--nb-space-3);
    border-top: 1px solid var(--nb-line);
    border-bottom: 1px solid var(--nb-line-soft);
}

.emas-prose .wp-block-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nb-space-2);
    min-height: var(--nb-hit);
    padding: 12px 0;
    font-size: var(--nb-size-body);
    font-weight: 600;
    line-height: var(--nb-lh-body);
    list-style: none;
    cursor: pointer;
}

/* Beide Schreibweisen: WebKit braucht das Pseudo-Element, alle anderen
   nehmen list-style oben. */
.emas-prose .wp-block-details > summary::-webkit-details-marker {
    display: none;
}

.emas-prose .wp-block-details > summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--nb-dur-short) var(--nb-ease);
}

.emas-prose .wp-block-details[open] > summary::after {
    transform: translateY(1px) rotate(225deg);
}

.emas-prose .wp-block-details > *:not(summary) {
    max-width: 68ch;
    color: var(--nb-ink-2);
}

.emas-prose .wp-block-details > *:last-child {
    margin-bottom: var(--nb-space-3);
}

/* --- Medien und Text ----------------------------------------------------
   Das Raster kommt vom Kern (50% / 1fr, gestapelt unter 601). Northbound
   nimmt nur den Innenabstand zurueck: der Kern setzt 8% auf beiden Seiten,
   das laesst den Text weder an der Bildkante noch an der Lesebreite
   stehen. Hier ist es ein Spacing-Token, und nur zwischen Bild und Text. */
.emas-prose .wp-block-media-text > .wp-block-media-text__content {
    padding: 0 0 0 var(--nb-space-4);
}

.emas-prose .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
    padding: 0 var(--nb-space-4) 0 0;
}

@media (max-width: 600px) {
    .emas-prose .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content,
    .emas-prose .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right > .wp-block-media-text__content {
        padding: var(--nb-space-3) 0 0;
    }
}

.emas-prose .wp-block-media-text > .wp-block-media-text__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Cover --------------------------------------------------------------
   Die Abdunklung des Kerns ist reines Schwarz. Northbound nimmt dafuer den
   Grund hinter einem Dialog — Tinte statt Schwarz, damit die Flaeche im
   Dunkelmodus nicht auf fast Schwarz auf fast Schwarz liegt. Der Text
   darauf steht in Papier, in beiden Modi. */
.emas-prose .wp-block-cover,
.emas-prose .wp-block-cover-image {
    min-height: 320px;
    padding: var(--nb-space-5);
    border-radius: var(--nb-radius);
}

.emas-prose .wp-block-cover .wp-block-cover__background,
.emas-prose .wp-block-cover-image .wp-block-cover__background {
    background-color: var(--nb-scrim);
}

.emas-prose .wp-block-cover .wp-block-cover__inner-container,
.emas-prose .wp-block-cover-image .wp-block-cover__inner-container {
    color: #FFFFFF;
}

/* --- Pullquote ----------------------------------------------------------
   Der Kern zentriert und setzt 4em Innenabstand. Northbound stellt es links
   auf die Grundlinie des Textes, mit der Haarlinie oben und unten und der
   Quelle im Labelgrad — dieselbe Familie wie blockquote weiter oben, nur
   groesser. */
.emas-prose .wp-block-pullquote {
    padding: var(--nb-space-4) 0;
    margin: var(--nb-space-5) 0;
    text-align: left;
    border-top: 1px solid var(--nb-line);
    border-bottom: 1px solid var(--nb-line);
}

.emas-prose .wp-block-pullquote blockquote p {
    max-width: 52ch;
    font-size: var(--nb-size-card-title);
    font-weight: 600;
    line-height: var(--nb-lh-card-title);
    letter-spacing: var(--nb-track-title);
}

.emas-prose .wp-block-pullquote cite {
    display: block;
    margin-top: var(--nb-space-2);
    font-size: var(--nb-size-label);
    font-style: normal;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    color: var(--nb-ink-3);
}

/* =========================================================================
   8 — KOMPAKT (< 768)
   Northbound laesst diesen Bereich offen; die Werte hier stammen aus N4/N6:
   Grenze 767, Kopfzeile 72, Seitenrand 16, Kartenpolster 16, Rail entfaellt,
   alle Innenmasse fallen eine Stufe auf der Skala.
   ========================================================================= */
@media (max-width: 767px) {
    :root {
        --nb-size-title: 34px;
        --nb-size-metric: 24px;
        /* Die Rail entfaellt hier — und mit ihr muss ihre Breite auf 0.
           Sonst rechnen die Full-Bleed-Baender (buddypress.css, Abschnitt 2)
           weiter mit einer Rail, die gar nicht steht: ihr
           margin-right: calc(50% - 50vw - var(--nb-rail)) schob das
           Titelband 128 px ueber den rechten Fensterrand hinaus. */
        --nb-rail: 0px;
    }

    .emas-rail {
        display: none;
    }

    .emas-header {
        height: var(--nb-header-compact);
        gap: var(--nb-space-2);
        padding: 0 var(--nb-space-2);
    }

    /* Die Tafel tritt an die Stelle der Rail. Ihr Griff ist das erste Kind
       der Kopfzeile; damit der Seitenname daneben und nicht in der Mitte
       steht, schiebt der Titel den Rest nach rechts. */
    .emas-tafel {
        display: block;
    }

    .emas-header__title {
        margin-right: auto;
    }

    .emas-header__mode {
        display: flex;
    }

    /* Kompakt traegt die Kopfzeile den Seitennamen in einer Zeile; die
       Augenbraue faellt weg, sonst passt bei 72 px nichts mehr hinein. */
    .emas-header__eyebrow {
        display: none;
    }

    .emas-header__h {
        font-size: var(--nb-size-card-title);
        line-height: var(--nb-lh-card-title);
    }

    .emas-header .emas-searchfield,
    .emas-header .emas-button--text,
    .emas-me__name {
        display: none;
    }

    .emas-header__right {
        gap: var(--nb-space-1);
    }

    .emas-container {
        padding: 0 var(--nb-space-2);
    }

    .emas-main {
        padding: var(--nb-space-2) 0 var(--nb-space-4);
    }
}

/* Wer weniger Bewegung bestellt hat, bekommt sie nicht — die Rueckmeldung
   bleibt aber: jeder Zustandswechsel findet weiter statt, nur eben sofort.
   Das Theme selbst bewegt an genau zwei Stellen etwas (die Wischflaeche unter
   dem Knopf, der wachsende Regelstrich am Textknopf); beide springen hier auf
   ihren Endwert, statt dorthin zu laufen.

   transition-delay wird BEWUSST nicht angetastet: die Kurzinfo in der Rail
   und auf der Karte wartet ihre 300 ms ab, weil sie sonst bei jedem
   Vorbeifahren aufblitzt. Warten ist keine Bewegung.

   animation-iteration-count gehoert zwingend dazu. Eine Dauer von 1 ms allein
   stoppt eine Endlosanimation nicht, sie beschleunigt sie — der Ladekreisel
   von BP Nouveau (@keyframes in dessen buddypress.css) liefe dann hunderte
   Male je Sekunde und waere ein Flackern statt einer Beruhigung.

   Die drei !important sind die einzigen im Theme und hier nicht zu vermeiden:
   die Regel muss ueber fremde Stylesheets (BP Nouveau, Better Messages)
   greifen, und ein Sternselektor verliert gegen jede Klasse. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Ablage — die Liste der Dokumente auf einer gewoehnlichen Seite
   (page-ablage.php). Fast alles steht schon: die Tabelle traegt
   .emas-table, die Kategorienzeile .emas-tabs, der Einleitungssatz
   .emas-prose. Neu ist nur, was diese eine Seite braucht. */

.emas-ablage__intro {
    margin-bottom: var(--nb-space-4);
}

.emas-ablage__filter {
    margin-bottom: var(--nb-space-3);
}

/* Art und Datum sind Beistellungen, keine Spalten zum Lesen: sie nehmen
   nur ihre Breite und brechen nicht. Den Rest bekommt der Titel. */
.emas-ablage .emas-table th:not(:first-child),
.emas-ablage .emas-table td:not(:first-child) {
    width: 1%;
    white-space: nowrap;
}

/* Die Dateiart steht in Versalien wie der Tabellenkopf — sie ist eine
   Einordnung, kein Wort im Satz. */
.emas-ablage__typ {
    font-size: var(--nb-size-caps);
    letter-spacing: var(--nb-track-caps);
    color: var(--nb-ink-3);
}

.emas-ablage__datum {
    color: var(--nb-ink-3);
}

/* Unter 560 px faellt die Dateiart weg: drei Spalten drueckten den Namen
   auf einem Telefon in den Umbruch, und die Art ist die entbehrlichste der
   drei. Der Verweis fuehrt ohnehin zum Herunterladen, wo der Browser den
   Dateinamen samt Endung nennt. */
@media (max-width: 559px) {
    .emas-ablage .emas-table th:nth-child(2),
    .emas-ablage .emas-table td:nth-child(2) {
        display: none;
    }
}