/* ==========================================================================
   Miss Intercontinental — Design System
   --------------------------------------------------------------------------
   EINE Quelle für alle Oberflächen. Wer hier nicht fündig wird, baut nicht
   schnell etwas Eigenes, sondern ergänzt diese Datei.

   DIE FLÄCHENLOGIK — das Wichtigste an diesem System
   Aus dem Model-App-Entwurf vom 15.08.2026. Die Wirkung entsteht NICHT aus
   einer hellen Fläche mit Goldakzent, sondern aus dem Wechsel dreier Flächen:

     Weiß      der Grund. Hier stehen Daten, Listen, Formulare.
     Schwarz   echte Flächen, keine Ränder: Kopfbereiche, hervorgehobene
               Karten, Navigation. Darauf leuchtet Gold.
     Beige     die warme Zwischenschicht: Hinweise, aktive Zustände,
               ruhige Karten.

   Eine Seite, die nur aus Weiß und Goldknöpfen besteht, sieht aus wie jede
   andere Verwaltung. Der Wechsel macht die Marke.

   Zwei Oberflächen, ein System:

     HQ (Standard)   Verwaltung, Deutsch, dicht. Überschriften serifenlos —
                     das ist ein Werkzeug, kein Prospekt.
     Außen           Model App, Fan App, Website. Englisch, ruhig, groß.
                     <html data-oberflaeche="aussen"> schaltet die
                     Serifen-Überschriften des Entwurfs frei.

   Serifen im HQ nur an einer Stelle: große Zahlen und der Seitentitel im
   dunklen Kopf. Dort tragen sie Charakter, ohne Lesbarkeit zu kosten.

   Reihenfolge der Abschnitte:
     1 Tokens · 2 Basis · 3 Typografie · 4 App-Rahmen · 5 Seitenkopf
     6 Karten & Flächen · 7 Buttons · 8 Formulare · 9 Tabellen
    10 Status · 11 Tab-Leiste · 12 Dropdown · 13 Toast · 14 Dialog
    15 Zustände · 16 Fortschritt · 17 Hilfsklassen · 18 Dunkle Bausteine
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften — Lora für Überschriften, Inter für alles andere.
   Gewählt am 27.08.2026 aus vier Paaren. Ausschlaggebend war nicht der
   Geschmack allein: Das Formular läuft in sechs Sprachen, eine davon
   Russisch. Die wärmeren Kandidaten (Fraunces, Figtree) haben kein
   Kyrillisch — dort wäre jeder russische Satz auf die Systemschrift
   gefallen, sichtbar als Bruch im Schriftbild. Lora und Inter decken
   Latein, Latein-erweitert und Kyrillisch ab.

   Selbst gehostet, mit Absicht: ein System mit Passdaten lädt nichts von
   fremden Servern nach. Aufgeteilt nach unicode-range, damit eine deutsche
   Seite die kyrillischen Dateien gar nicht erst anfordert — sonst lägen
   570 KB Schrift auf jeder Seite statt der tatsächlich gebrauchten 84 KB.

   Vorher stand hier Geist. Die Dateien dazu lagen nie im Plugin; jede Seite
   hat still die Systemschrift benutzt und zwei 404 erzeugt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-cyrillic-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-cyrillic-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-cyrillic-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-wght-italic.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  font-display: swap;
}

/* ==========================================================================
   1 · TOKENS
   Niemals Hex-Werte direkt in eine Komponente schreiben. Immer eine Variable.
   ========================================================================== */
:root {
  /* -- Die drei Flächen ---------------------------------------------------- */
  --paper:          #ffffff;   /* Grund. Weiß, nicht Beige — siehe unten */
  --cream:          #f7f0de;   /* Warm Ivory: warme Karte */
  --cream-tief:     #f3e7c4;   /* Pale Gold: eine Stufe kräftiger */
  /* DIE DUNKLEN FLÄCHEN SIND SCHWARZ, nicht braun.
     Am 27.08.2026 auf Creamstone #232018 umgestellt, am 28.08.2026 von Lars
     zurückgeholt — erst für die Navigation, dann für den Seitenkopf. Was in
     der Palette als warmes Dunkelbraun gedacht ist, liest sich auf einer
     großen Fläche neben weißem Grund nicht als warm, sondern als schmutzig.
     Ein kleiner Block schluckt den Farbstich, eine bildschirmhohe Spalte und
     ein breiter Banner zeigen ihn.

     Die Wärme des Systems kommt aus Gold, Elfenbein und den Linien — nicht
     aus dem Schwarz. Creamstone bleibt in der Palette als Textfarbe (--ink)
     und lebt dort weiter, wo er hingehört.                                   */
  --dark:           #0d0d0c;   /* echte dunkle Fläche */
  --dark-2:         #171614;   /* dunkle Fläche, eine Stufe heller */
  --dark-3:         #232120;   /* Linien und Felder auf Dunkel */
  --nav:            var(--dark);

  /* Der Grund ist WEISS, nicht elfenbein. Am 27.08.2026 mit Lars entschieden,
     nach dem Vorbild der Model-App: dort ist die Fläche weiß und die Wärme
     kommt aus einzelnen Bausteinen — dem dunklen Kopf, dem Hinweisstreifen,
     der gewählten Karte. Elfenbein über die ganze Seite nimmt genau diesen
     Bausteinen ihre Wirkung, weil sich dann nichts mehr abhebt.             */

  /* -- Gold: Honiggold, vier Tiefen je nach Untergrund ----------------------
     Gewählt am 20.08.2026 aus fünf Kandidaten. Honiggold hat die höchste
     Sättigung (66 %) und bleibt im warmen Farbwinkel des Entwurfs (41°) —
     es leuchtet mehr als der alte Ton, ohne die Farbe zu wechseln.
     Klassisches Blattgold (#d4af37) kippt bei 46° Richtung Gelb und passt
     schlechter zum Beige.                                                    */
  /* 03.09.2026 — HELLERES GOLD. Lars hat es am selben Tag für die Mailvorlage
     entschieden; die Oberfläche zieht jetzt nach, damit Mail und HQ dieselbe
     Farbe tragen. Vorher: --gold #ceaa51, --gold-hover #b8952f,
     --gold-hell #e0c989.

     DIE REGEL, DIE DAMIT ERNST GENOMMEN WIRD — sie stand schon vorher hier:
       Fläche  -> --gold      (dunkler Text darauf, 10,29:1)
       Linie, kleine Grafik und Zustandsrahmen AUF HELL -> --gold-ui (3,26:1)
       Text auf Hell -> --gold-deep (5,06:1)
       Fokusring -> --gold-deep, auf Dunkel --gold-hell
     #f7c760 ist auf Weiß nur 1,58:1. Als Linie oder Text auf Hell ist es
     unbrauchbar — deshalb sind rund zwanzig Stellen, die vorher --gold für
     eine Linie benutzt haben, auf --gold-ui umgestellt worden. Vorher fiel
     das nicht auf, weil #ceaa51 mit 2,21:1 nur etwas weniger falsch war. */
  --gold:           #f7c760;   /* Flächen und Knöpfe. Auf Schwarz 12,68:1,
                                  auf Weiß 1,58:1 — also NIE als Text auf Hell */
  --gold-hover:     #e9b23c;   /* dieselbe Fläche im Hover, ein Schritt tiefer */
  --gold-hell:      #f7c760;   /* auf dunklem Grund: Navigation, Hero, Karten.
                                  Auf --dark 12,31:1, auf --dark-2 11,45:1.
                                  War #e0c989 (der Logoton aus der .ai-Quelle);
                                  seit 03.09.2026 derselbe Wert wie --gold,
                                  damit auf Dunkel nicht zwei Goldtöne stehen. */
  --gold-deep:      #8b6929;   /* Dark Gold: Gold als Text auf Weiß, 5,06:1 */
  --gold-tief:      #7a5c21;   /* Gold als Text auf goldener Fläche. Nötig,
                                  weil --gold-deep auf Pale Gold nur 4,11:1
                                  erreicht — auf Weiß reicht es, auf der
                                  Pille nicht. Hier: 5,04:1.                 */
  --gold-ui:        #a78b4d;   /* Muted Gold: kleine Grafik auf Hell, 3,26:1 */

  /* Politur: der einzige Verlauf im System. Deutet Metall an, weil flache
     Farbe das nicht kann. NUR für hervorgehobene Knöpfe, den Hero-Titel und
     Markenmomente — nie für Fließtext, nie für kleine Symbole. Alle Stufen
     sind hell genug, dass dunkler Text darauf lesbar bleibt.                 */
  --gold-schimmer:  linear-gradient(115deg, #b8862f 0%, #f0d99a 38%, #d9ab3f 62%, #b8862f 100%);

  /* -- Text ---------------------------------------------------------------- */
  --ink:            #232018;
  --text:           var(--ink);
  --text-soft:      #4a443a;         /*  9,64:1 auf Weiß */
  --text-muted:     #6e675b;         /*  5,59:1 auf Weiß */
  --text-platzhalter: #74695a;       /*  5,37:1 auf Weiß */
  --text-on-dark:   #fbf6e8;         /* Soft Ivory, 15,06:1 auf Creamstone */
  --text-on-dark-soft: #b3aea4;
  --text-on-gold:   var(--ink);      /* 7.07:1 — Weiß auf Gold wäre 2.82:1 */
  --text-on-cream:  var(--ink);

  /* -- Semantische Flächen -------------------------------------------------- */
  --bg:             var(--paper);
  --surface:        var(--paper);
  --surface-warm:   var(--cream);
  --surface-2:      #fbf6e8;         /* Soft Ivory: Tabellenkopf */
  --bg-sunken:      #faf5e7;         /* eingelassene Leisten */
  --banner:         var(--dark);

  /* -- Linien --------------------------------------------------------------- */
  --line:           #e9dec7;
  --line-soft:      #f2e9d6;
  --line-strong:    #dccca6;         /* schmückende Linien */
  --line-feld:      #978a72;         /* Rahmen von Bedienelementen, 3,39:1.
                                        Wärmer als vorher und weiterhin über
                                        der Schwelle von 3:1 für Bedienteile. */
  --line-dark:      rgba(247, 244, 238, .10);

  /* -- Akzent --------------------------------------------------------------- */
  --accent:         var(--gold);
  --accent-text:    var(--gold-deep);
  /* MÜSSEN mit --gold mitwandern. Bis zum 03.09.2026 standen hier feste
     rgba-Werte des alten Goldes — sie folgten --gold NICHT, und im Test blieb
     die Symbolkachel im alten Ton stehen, während alles andere schon hell war. */
  --accent-soft:    rgba(247, 199, 96, .16);
  --accent-softer:  rgba(247, 199, 96, .08);

  /* -- Status ---------------------------------------------------------------
     Der Entwurf setzt Grün und Rot auf Gold — für eine Model-App richtig,
     für die Verwaltung nicht: bei 90 Ländern und täglicher Medienfreigabe
     muss auf einen Blick sichtbar sein, wo es hakt. Gedämpft gewählt, damit
     sie neben Gold nicht schreien. Farbe ist NIE das einzige Signal.        */
  --ok:             #2f6b4a;
  --ok-soft:        rgba(47, 107, 74, .10);
  --warn:           var(--gold-tief);
  --warn-soft:      rgba(247, 199, 96, .18);   /* mit --gold mitgewandert, 03.09.2026 */
  --danger:         #9d3129;
  --danger-soft:    rgba(157, 49, 41, .10);
  --info:           #3c5f7d;
  --info-soft:      rgba(60, 95, 125, .10);

  /* -- Radien: großzügig wie im Entwurf -------------------------------------- */
  /* Am 27.08.2026 je eine Stufe runder. Rundung ist der billigste Weg zu
     einem freundlicheren Eindruck — sie kostet keinen Kontrast und keinen
     Platz.                                                                  */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* -- Abstände: 4er-Rhythmus ----------------------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-8: 32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;

  /* Hoehe der Sponsoren-Logokachel. Steht hier als Grundwert, damit es die
     Tokenpruefung findet; je Stufe wird sie an der Kachel ueberschrieben —
     das ist eine Groesse aus den Einstellungen, keine Farbe.                 */
  --logo-hoehe: 96px;

  /* -- Schrift --------------------------------------------------------------- */
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  /* Kein eigenes Monospace im Plugin — der Systemstapel genügt für die
     wenigen Stellen (Sicherheitscode, Flugnummern) und spart eine Datei.   */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-heading: var(--font-ui);     /* HQ: serifenlos */

  --t-xs:  12px;  --t-sm:  13px;  --t-base: 15px;  --t-md:  17px;
  --t-lg:  21px;  --t-xl:  26px;  --t-2xl:  32px;  --t-3xl: 40px;

  --lh-tight: 1.18;                  /* war 1.12 — enge Überschriften wirken
                                        gedrängt, das ist das Gegenteil von
                                        freundlich */
  --lh-snug:  1.4;
  --lh-body:  1.65;

  /* -- Schatten: warm getönt, nie neutral-grau -------------------------------- */
  --sh-xs: 0 1px 2px rgba(35, 32, 24, .04);
  --sh-sm: 0 2px 8px rgba(35, 32, 24, .05);
  --sh-md: 0 8px 22px rgba(35, 32, 24, .07);
  --sh-lg: 0 20px 48px rgba(35, 32, 24, .12);

  /* -- Bewegung -------------------------------------------------------------- */
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 320ms;

  /* -- Ebenen ---------------------------------------------------------------- */
  --z-sticky:  20;
  --z-drawer:  40;
  --z-overlay: 60;
  --z-dialog:  70;
  --z-toast:   90;
}

/* Außen-Oberfläche: Model App, Fan App, Website.
   Überschriften in der Marken-Serife, wie im Entwurf. */
[data-oberflaeche='aussen'] {
  --font-heading: var(--font-display);
}

/* ==========================================================================
   2 · BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* Sichtbarer Fokus. Wird NIE entfernt — nur ersetzt, wenn an derselben Stelle
   etwas Besseres steht. Auf dunklen Flächen leuchtet er hell. */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.mi-auf-dunkel :focus-visible, .mi-nav :focus-visible, .mi-hero :focus-visible {
  outline-color: var(--gold-hell);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--cream-tief); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: #cfc7b8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cfc7b8; border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b9b0a0; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3 · TYPOGRAFIE
   Hierarchie über Gewicht, Laufweite und Fläche — nicht über Größe allein.
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text);
  margin: 0 0 var(--s-3);
  line-height: var(--lh-tight);
  font-weight: 650;
  letter-spacing: -.02em;
}
h1 { font-size: var(--t-2xl); letter-spacing: -.03em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }
h5 { font-size: var(--t-base); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

small, .mi-klein { font-size: var(--t-sm); }

/* Die Serifen-Zeile aus dem Entwurf. Für große Momente: Seitentitel im
   dunklen Kopf, Uhrzeiten, Namen. Nicht für Fließtext, nicht für Tabellen. */
.mi-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
}
.mi-display em { font-style: italic; color: var(--gold-hell); }

/* Die weit gesperrte Versal-Zeile. Sie ordnet einen Abschnitt, sie schmückt
   ihn nicht. */
.mi-kicker {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.mi-kicker .kline { display: inline-block; width: 22px; height: 1px; background: var(--gold-ui); flex: none; }

.mi-lead { font-size: var(--t-md); color: var(--text-muted); line-height: 1.55; }
.mi-muted { color: var(--text-muted); }
.mi-gold  { color: var(--accent-text); }

/* Zahlen laufen nicht auseinander. */
.mi-zahl, .mi-tabelle td.mi-zahl, .mi-kennzahl-wert {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ==========================================================================
   4 · APP-RAHMEN
   Dunkle Navigation links, weißer Inhalt rechts. Ab 1024px nebeneinander,
   darunter wird die Navigation zur Schublade.
   ========================================================================== */
.mi-app {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--bg);
}

.mi-nav {
  background: var(--nav);
  padding: var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.mi-nav-marke {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-dark);
}
/* .mi-nav-marke-name traegt seit dem 03.09.2026 kein Markup mehr — an seine
   Stelle ist der Lockup getreten. Die Regel bleibt stehen, weil ein Ausbau
   ohne Not eine Aenderung waere, die niemand angefordert hat, und weil sie
   der Rueckweg ist, falls das Bild in der schmalen Leiste doch nicht taugt. */
.mi-nav-marke-name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--text-on-dark);
  line-height: 1.1;
  letter-spacing: .01em;
}

/* Das Logo in der dunklen Leiste. Ein Knopf, kein Bild allein: Er fuehrt auf
   die Uebersicht, und ein Logo oben links, das nichts tut, ist eine verpasste
   Erwartung. Als button braucht er den Reset — sonst bringt er Rahmen,
   Innenabstand und die Systemschrift des Betriebssystems mit. */
.mi-nav-marke-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  /* Seit dem 08.09.2026 ein <a>: Auch die Marke fuehrt zur Uebersicht und soll
     sich im neuen Tab oeffnen lassen. Ohne diese Zeile bekaeme „Headquarter"
     unter dem Logo einen Unterstrich. */
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r-xs);
}
.mi-nav-marke-knopf:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
/* Die Breite deckelt die Hoehe: Der Lockup ist 8,7:1: Bei 216 px Breite wird
   er 25 px hoch. Ohne max-width wuerde er die ganze Spalte fuellen und die
   Wortmarke waere winzig gesetzt neben einem grossen Emblem. */
.mi-nav-marke-bild {
  display: block;
  width: 100%;
  max-width: 216px;
  height: auto;
}
.mi-nav-marke-sub {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold-hell);
  margin-top: 6px;
}

.mi-nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.mi-nav-titel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  /* 56 % statt 42 %: Bei kleinen Versalien mit Sperrung kam der Titel auf
     3,81:1 und lag damit unter der Schwelle. Jetzt 5,95:1 auf der
     Navigation und 4,98:1, falls der Baustein je auf Creamstone landet. */
  color: rgba(247, 244, 238, .56);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-2);
}
.mi-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-on-dark-soft);
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mi-nav-item svg { width: 18px; height: 18px; flex: none; opacity: .75; stroke-width: 1.6; }
.mi-nav-item:hover { background: rgba(247, 244, 238, .07); color: var(--text-on-dark); }
.mi-nav-item.active {
  background: rgba(217, 188, 132, .14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold-hell);   /* die Goldkante aus dem Entwurf */
}
.mi-nav-item.active svg { opacity: 1; color: var(--gold-hell); }
.mi-nav-zahl {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(247, 244, 238, .10);
  color: var(--text-on-dark-soft);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.mi-nav-item.active .mi-nav-zahl { background: var(--gold-hell); color: var(--ink); }

.mi-inhalt { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

.mi-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 60px;
  padding: 0 var(--s-6);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.mi-topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.mi-burger { display: none; }

.mi-haupt { padding: var(--s-6); max-width: 1320px; width: 100%; }
.mi-haupt > * + * { margin-top: var(--s-6); }

@media (max-width: 1023px) {
  .mi-app { grid-template-columns: minmax(0, 1fr); }
  .mi-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--sh-lg);
  }
  .mi-app.nav-offen .mi-nav { transform: none; }
  .mi-app.nav-offen::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 12, .55);
    z-index: calc(var(--z-drawer) - 1);
  }
  .mi-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: calc(var(--s-2) * -1);
    border-radius: var(--r-sm);
    color: var(--text);
  }
  .mi-burger:hover { background: var(--bg-sunken); }
  .mi-haupt { padding: var(--s-4); }
}

/* ==========================================================================
   5 · SEITENKOPF — der dunkle Block aus dem Entwurf
   Schwarze Fläche, Serifen-Titel, Gold kursiv als zweite Zeile,
   darunter die Fortschritts-Striche. Links Text, rechts Aktionen.
   ========================================================================== */
.mi-hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  border-radius: var(--r-xl);
  padding: var(--s-10) var(--s-8) var(--s-8);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}
/* Der weiche Lichtbogen oben rechts, wie im Entwurf. */
.mi-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 188, 132, .16) 0%, transparent 62%);
  pointer-events: none;
}
.mi-hero > * { position: relative; }
.mi-hero-text { max-width: 60ch; }
.mi-hero .mi-kicker { color: var(--text-on-dark-soft); letter-spacing: .18em; }
.mi-hero .mi-kicker .kline { background: var(--gold-hell); }
.mi-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--text-on-dark);
  margin: 0 0 var(--s-3);
}
.mi-hero h1 em { font-style: italic; color: var(--gold-hell); }
.mi-hero p { color: var(--text-on-dark-soft); font-size: var(--t-sm); margin: 0; }
.mi-hero-aktionen { display: flex; gap: var(--s-2); flex: none; }

/* Fortschritts-Striche: zehn Tage, einer davon aktiv. */
.mi-striche { display: flex; gap: 6px; margin-top: var(--s-5); }
.mi-strich { width: 34px; height: 2px; border-radius: var(--r-pill); background: rgba(247, 244, 238, .18); }
.mi-strich[data-stand='vorbei'] { background: var(--gold-hell); opacity: .55; }
.mi-strich[data-stand='heute']  { background: var(--gold-hell); height: 3px; }

@media (max-width: 767px) {
  .mi-hero { padding: var(--s-8) var(--s-5) var(--s-6); border-radius: var(--r-lg); }
  /* 06.09.2026: Mit dem dritten Knopf („Verwalten") ging die Rechnung nicht
     mehr auf. `flex: 1` teilte 350 px durch drei — 116 px je Knopf —, und
     „Alle Kontakte" und „Bearbeiten" liefen aus der schwarzen Flaeche heraus,
     wo der Hero sie abschnitt. Jetzt duerfen sie umbrechen und fuellen die
     Zeile, in der sie landen. */
  .mi-hero-aktionen { width: 100%; flex-wrap: wrap; }
  .mi-hero-aktionen > * { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   6 · KARTEN & FLÄCHEN
   Eine Karte ist kein Standard-Behälter. Sie hebt etwas heraus. Zusammen-
   gehörende Daten trennt man mit einer Haarlinie, nicht mit vier Kästen.
   Karten werden NICHT ineinander verschachtelt.
   ========================================================================== */
.mi-karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

/* Zwei Karten untereinander brauchen Luft dazwischen — 06.09.2026.
   Bis dahin stiessen sie Kante an Kante: zwei Rahmen, die sich zu einer
   doppelten Linie addieren, und keine Ahnung, wo die eine aufhoert. Der
   Abstand steht am zweiten Element und nicht als margin-bottom an allen,
   damit die letzte Karte keinen Rest nach unten haengen laesst. */
.mi-karte + .mi-karte { margin-top: var(--s-5); }
.mi-karte-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* Oben mehr als unten: Eine Ueberschrift gehoert zu dem, was UNTER ihr
     steht, nicht zu dem darueber. 06.09.2026 — vorher war es gleich viel,
     und der Kopf sass wie ein eigener Streifen ueber der Karte. */
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.mi-karte-kopf h3, .mi-karte-kopf h4 { margin: 0; }
.mi-karte-kopf .mi-karte-aktionen { margin-left: auto; display: flex; gap: var(--s-2); }
/* Die Zaehler-Pille gehoert ans rechte Ende, nicht dicht neben den Titel:
   Dort klebte sie am Hilfetext und sah aus wie ein Aufzaehlungszeichen.
   06.09.2026. */
.mi-karte-kopf > .mi-pille { margin-left: auto; }
.mi-karte-koerper { padding: var(--s-6); }
.mi-karte-fuss {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Anklickbare Karte: hebt sich leicht, sinkt beim Drücken ein. */
.mi-karte-klick { display: block; width: 100%; text-align: left; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mi-karte-klick:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.mi-karte-klick:active { transform: translateY(0); box-shadow: var(--sh-xs); }

/* Eingelassene Leiste für Filter und Werkzeuge. */
.mi-leiste {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.mi-leiste-feld { display: flex; flex-direction: column; gap: var(--s-2); }
.mi-leiste-feld > label {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.mi-leiste-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* Kennzahlen ohne Kästen — nur Haarlinien dazwischen. */
.mi-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.mi-kennzahl { padding: var(--s-5) var(--s-6); border-left: 1px solid var(--line-soft); }
.mi-kennzahl:first-child { border-left: 0; }
.mi-kennzahl-label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.mi-kennzahl-wert {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  margin-top: var(--s-2);
  letter-spacing: -.02em;
}
.mi-kennzahl-zusatz { font-size: var(--t-sm); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 767px) {
  .mi-kennzahl { border-left: 0; border-top: 1px solid var(--line-soft); }
  .mi-kennzahl:first-child { border-top: 0; }
}

/* ==========================================================================
   7 · BUTTONS
   Eine Hauptaktion je Ansicht. Alles andere ordnet sich unter.
   Mindestens 44px hoch — auch am Rechner, weil dieselbe Oberfläche später
   auf dem Tablet bedient wird.
   ========================================================================== */
.mi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.mi-btn svg { width: 17px; height: 17px; flex: none; stroke-width: 1.7; }
/* Spürbares Eindrücken, ohne die Nachbarn zu verschieben. */
.mi-btn:active { transform: translateY(1px); }
.mi-btn:disabled, .mi-btn[aria-disabled='true'] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Hauptaktion — Gold gefüllt. Genau eine je Ansicht. */
/* Dunklerer Rand: die Flaeche allein kommt gegen Weiss nur auf 2.45:1,
   die gefasste Kante auf 3.83:1 — und sie sieht aus wie gefasstes Metall. */
.mi-btn-primaer { background: var(--gold); color: var(--text-on-gold); border-color: var(--gold-ui); }
.mi-btn-primaer:hover { background: var(--gold-hover); border-color: var(--gold-hover); }   /* ink darauf: 6.28:1 */

/* Speichern — überall im System dieselbe Gestalt, damit sie erkennbar bleibt. */
.mi-btn-speichern { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.mi-btn-speichern:hover { background: #221f1a; }

/* Zweite Wahl */
.mi-btn-outline { background: transparent; color: var(--text); border-color: var(--line-feld); }
.mi-btn-outline:hover { border-color: var(--gold-ui); color: var(--accent-text); background: var(--accent-softer); }

/* Auf dunklem Grund (Seitenkopf) */
.mi-btn-hell { background: rgba(246, 243, 236, .10); color: var(--text-on-dark); border-color: rgba(246, 243, 236, .22); }
.mi-btn-hell:hover { background: rgba(246, 243, 236, .18); border-color: rgba(246, 243, 236, .4); }

/* Ohne Rahmen, für Nebensächliches */
.mi-btn-still { background: transparent; color: var(--text-muted); }
.mi-btn-still:hover { background: var(--bg-sunken); color: var(--text); }

/* Löschen und andere unwiderrufliche Dinge — deutlich abgesetzt platzieren. */
.mi-btn-gefahr { background: transparent; color: var(--danger); border-color: rgba(157, 49, 41, .32); }
.mi-btn-gefahr:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Der polierte Knopf. Höchstens EINER je Ansicht — er ist die Ausnahme,
   die den normalen Goldknopf hervorhebt. Wer ihn überall einsetzt, hat
   wieder nur eine Farbe. */
.mi-btn-glanz {
  background: var(--gold-schimmer);
  background-size: 190% 100%;
  background-position: 30% 0;
  color: var(--ink);
  border-color: var(--gold-ui);
  transition: background-position var(--dur-slow) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.mi-btn-glanz:hover { background-position: 72% 0; box-shadow: 0 2px 14px rgba(185, 134, 47, .28); }
.mi-btn-glanz:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .mi-btn-glanz { transition: none; } }

.mi-btn-klein { min-height: 36px; padding: 0 var(--s-3); font-size: var(--t-xs); border-radius: var(--r-xs); }
.mi-btn-breit { width: 100%; }

/* Nur-Symbol-Button. Braucht IMMER ein aria-label. */
.mi-btn-symbol { min-height: 44px; width: 44px; padding: 0; border-radius: var(--r-sm); color: var(--text-muted); }
.mi-btn-symbol:hover { background: var(--bg-sunken); color: var(--text); }

/* Wartender Button: Beschriftung bleibt lesbar, Bedienung ist gesperrt. */
.mi-btn[data-laedt='true'] { pointer-events: none; opacity: .75; }
.mi-btn[data-laedt='true']::before {
  content: '';
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mi-dreh .7s linear infinite;
}
@keyframes mi-dreh { to { transform: rotate(360deg); } }

.mi-btn-gruppe { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }

/* ==========================================================================
   8 · FORMULARE
   Beschriftung über dem Feld, Hilfetext darunter, Fehler direkt am Feld.
   Niemals nur ein Platzhalter als Beschriftung — er verschwindet beim Tippen.
   ========================================================================== */
.mi-feld { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.mi-feld:last-child { margin-bottom: 0; }

.mi-label { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.mi-label .mi-pflicht { color: var(--danger); margin-left: 2px; }
.mi-label .mi-optional { color: var(--text-muted); font-weight: 400; margin-left: var(--s-2); font-size: var(--t-xs); }

.mi-input, .mi-select, .mi-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1.5px solid var(--line-feld);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-textarea { min-height: 110px; padding: var(--s-3); resize: vertical; line-height: var(--lh-body); }
.mi-input::placeholder, .mi-textarea::placeholder { color: var(--text-platzhalter); }

/* ── Formatierungsleiste fuer Rundmails ──────────────────────────────────────
   Sechs Formate, die in jedem Mailprogramm ankommen. Der Kasten sieht aus wie
   ein .mi-textarea, ist aber ein beschreibbarer Bereich mit einer Leiste
   darueber — deshalb erbt er dessen Rahmen- und Fokuswerte, statt eigene zu
   erfinden.                                                                  */
.mi-mailwerk {
  border: 1px solid var(--line-feld);
  border-radius: var(--r-sm);
  background: #fff;
  overflow: hidden;
}
/* Der Fokus sitzt auf dem SCHREIBFELD, die Anzeige gehoert an den Kasten —
   sonst laege der Ring mitten im Bauteil, unter der Leiste. */
.mi-mailwerk:focus-within {
  border-color: var(--gold-ui);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mi-mailwerk-leiste {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: var(--s-2);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}

.mi-mailwerk-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: none;
  color: var(--text-soft);
  font-size: var(--t-sm);
  line-height: 1;
  cursor: pointer;
}
.mi-mailwerk-knopf:hover:not(:disabled) { background: #fff; border-color: var(--line-strong); color: var(--text); }
.mi-mailwerk-knopf:focus-visible {
  outline: 2px solid var(--gold-ui);
  outline-offset: 1px;
}
/* Der aktive Zustand traegt NICHT nur Farbe: Wer Farben schlecht
   unterscheidet, erkennt ihn am Rahmen und an der Flaeche. aria-pressed sagt
   dasselbe noch einmal fuer Vorlesegeraete.                                  */
.mi-mailwerk-knopf.ist-an {
  background: var(--accent-soft);
  border-color: var(--gold-ui);
  color: var(--gold-deep);
}
.mi-mailwerk-knopf:disabled { opacity: .45; cursor: not-allowed; }

.mi-mailwerk-feld {
  min-height: 180px;
  padding: var(--s-4);
  line-height: var(--lh-body);
  color: var(--text);
  overflow-wrap: break-word;
}
/* KEIN outline:none. Der Ring sitzt am Schreibfeld selbst, mit negativem
   Versatz — dadurch legt er sich knapp INNEN an die Kante des Kastens und
   markiert den ganzen Bauteil, ohne dass der Fokus irgendwo verschwindet.
   Das war am 06.09.2026 erst falsch gebaut (outline:none, Anzeige nur am
   Kasten) und ist von pruefe-design-system.mjs zu Recht beanstandet worden. */
.mi-mailwerk-feld:focus-visible {
  outline: 2px solid var(--gold-ui);
  outline-offset: -2px;
}
/* Der leere Zustand sagt, was zu tun ist — ein leeres weisses Feld sagt
   nichts. :empty allein greift nicht, weil der Browser ein <br> hinterlaesst. */
.mi-mailwerk-feld:empty::before {
  content: "Text der Rundmail …";
  color: var(--text-platzhalter);
}

/* Der Text im Feld soll aussehen wie spaeter in der Mail — sonst ueberrascht
   die Vorschau. Die Werte sind dieselben wie in mail-html.php.              */
.mi-mailwerk-feld p  { margin: 0 0 var(--s-4); }
.mi-mailwerk-feld p:last-child { margin-bottom: 0; }
.mi-mailwerk-feld h3 { margin: var(--s-5) 0 var(--s-3); font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.mi-mailwerk-feld ul,
.mi-mailwerk-feld ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.mi-mailwerk-feld li { margin: 0 0 var(--s-1); }
.mi-mailwerk-feld a  { color: var(--gold-deep); text-decoration: underline; }

.mi-input:hover, .mi-select:hover, .mi-textarea:hover { border-color: #6f675b; }
.mi-input:focus, .mi-select:focus, .mi-textarea:focus {
  outline: none;
  /* --gold-ui statt --gold: Der Rahmen IST hier die Fokusanzeige, weil
     outline:none steht. Er muss 3:1 gegen Weiß tragen — das helle Gold
     schafft 1,58:1 und wäre keine Anzeige, sondern ein Hauch. */
  border-color: var(--gold-ui);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mi-input:disabled, .mi-textarea:disabled, .mi-select:disabled {
  background: var(--bg-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
  border-color: var(--line);
}
/* Nur-Lesen ist NICHT dasselbe wie gesperrt: der Wert gilt, man darf ihn
   nur hier nicht ändern. Deshalb anders dargestellt. */
.mi-input[readonly], .mi-textarea[readonly] {
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--line);
  color: var(--text-soft);
}

.mi-select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5823a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

.mi-hilfe { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.5; }

/* Fehler am Feld. Zusätzlich role="alert" oder aria-live setzen, damit
   Vorleseprogramme ihn bemerken. */
.mi-fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--danger);
  font-weight: 500;
}
.mi-fehler svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.mi-feld[data-fehler] .mi-input,
.mi-feld[data-fehler] .mi-select,
.mi-feld[data-fehler] .mi-textarea { border-color: var(--danger); }
.mi-feld[data-fehler] .mi-input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

/* Kästchen und Schalter */
.mi-check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; min-height: 44px; padding: var(--s-2) 0; }
.mi-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold-deep); flex: none; cursor: pointer; }
.mi-check-text { font-size: var(--t-sm); }
.mi-check-hilfe { font-size: var(--t-xs); color: var(--text-muted); display: block; margin-top: 2px; }

.mi-fieldset { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.mi-fieldset > legend {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  width: 100%;
  margin-bottom: var(--s-4);
}

.mi-feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-4); }

/* Suchfeld mit Symbol */
.mi-suche { position: relative; }
.mi-suche svg { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; }
.mi-suche .mi-input { padding-left: var(--s-10); }

/* ==========================================================================
   9 · TABELLEN
   Die Prozess-Übersicht mit 90 Ländern ist die meistgenutzte Ansicht.
   Deshalb: ruhige Linien, klebender Kopf, Zahlen mit fester Breite.
   ========================================================================== */
.mi-tabelle-rahmen {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: auto;
}
.mi-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.mi-tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mi-tabelle tbody td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.mi-tabelle tbody tr:last-child td { border-bottom: 0; }
.mi-tabelle tbody tr { transition: background var(--dur-fast) var(--ease); }
.mi-tabelle tbody tr:hover { background: var(--accent-softer); }
.mi-tabelle td.mi-rechts, .mi-tabelle th.mi-rechts { text-align: right; }
.mi-tabelle .mi-haupt-zelle { font-weight: 600; color: var(--text); }

/* Sortierbarer Kopf. aria-sort am th setzen, nicht nur die Klasse. */
.mi-sort { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.mi-sort:hover { color: var(--accent-text); }
.mi-sort svg { width: 13px; height: 13px; opacity: .4; }
[aria-sort] .mi-sort svg { opacity: 1; color: var(--gold-ui); }

/* Zeilenaktionen erscheinen beim Überfahren, bleiben aber per Tastatur
   immer erreichbar — sonst sind sie ohne Maus unauffindbar. */
/* ZEILENKNOEPFE SIND IMMER SICHTBAR
   Bis zum 06.09.2026 standen sie auf opacity:0 und erschienen erst beim
   Ueberfahren der Zeile. Das ist ein verbreitetes Muster und war hier trotzdem
   falsch: Lars hat am 06.09.2026 gemeldet, er koenne Rundmails nicht loeschen
   — der Knopf „Verwerfen" war die ganze Zeit da, nur unsichtbar. Ein
   Bedienelement, das man nur findet, wenn man schon weiss, dass es da ist,
   gibt es fuer den Benutzer nicht.

   Der Ruhezustand ist deshalb gedaempft, nicht unsichtbar: Die Zeile bleibt
   ruhig, die Knoepfe sind aber lesbar und werden beim Ueberfahren und bei
   Tastaturfokus voll deutlich. Wer sie ganz verbergen will, muss zuerst
   erklaeren, wie man sie ohne Maus findet.                                   */
.mi-zeilen-aktionen { display: flex; gap: var(--s-1); justify-content: flex-end; opacity: .75; transition: opacity var(--dur) var(--ease); }
.mi-tabelle tr:hover .mi-zeilen-aktionen,
.mi-zeilen-aktionen:focus-within { opacity: 1; }
@media (hover: none) { .mi-zeilen-aktionen { opacity: 1; } }

/* ==========================================================================
   10 · STATUS
   Die Kette der Stufe 1: angelegt → versendet → ausgefüllt → gedruckt →
   unterschrieben → geprüft. Dazu Problem und Wartet.
   Jede Pille trägt Farbe UND Punkt UND Text. Farbe allein zählt nicht.
   ========================================================================== */
.mi-pille {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3) 3px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mi-pille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.mi-pille-neutral  { background: var(--bg-sunken);   color: var(--text-muted); border-color: var(--line); }
.mi-pille-laeuft   { background: var(--info-soft);   color: var(--info);       border-color: rgba(60, 95, 125, .2); }
.mi-pille-wartet   { background: var(--warn-soft);   color: var(--warn);       border-color: rgba(126, 95, 40, .22); }
.mi-pille-fertig   { background: var(--ok-soft);     color: var(--ok);         border-color: rgba(47, 107, 74, .22); }
.mi-pille-problem  { background: var(--danger-soft); color: var(--danger);     border-color: rgba(157, 49, 41, .22); }

/* Wartet-Zustand atmet leicht — das ist der Zustand, der Handeln verlangt. */
.mi-pille-wartet::before { animation: mi-atem 2.4s var(--ease) infinite; }
@keyframes mi-atem { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Fortschritt der Kette als Kette, nicht als Balken: man sieht, wo es steht. */
.mi-kette { display: flex; align-items: center; gap: var(--s-1); }
.mi-kette-glied { width: 26px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.mi-kette-glied[data-stand='fertig'] { background: var(--ok); }
.mi-kette-glied[data-stand='aktiv']  { background: var(--gold-deep); }   /* 4.59:1 gegen die Spur */
.mi-kette-glied[data-stand='problem'] { background: var(--danger); }
.mi-kette-text { font-size: var(--t-xs); color: var(--text-muted); margin-left: var(--s-2); }

/* ==========================================================================
   11 · TAB-LEISTE / UMSCHALTER
   Für Filter und Ansichten. Nur Text, keine Symbole — Zahlen erlaubt.
   ========================================================================== */
.mi-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.mi-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 0 var(--s-4);
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mi-tab:hover { color: var(--text); background: var(--accent-softer); }
/* Der aktive Reiter traegt Gold — 06.09.2026 auf Wunsch von Lars.
   Vorher war er eine weisse Kachel auf hellem Grund: Der Unterschied lag
   allein im Schatten, und auf einem hellen Bildschirm sah man ihn nicht.
   Jetzt traegt er die Farbe des Hauses.

   Der Verlauf ist flach und geht ueber zwei Goldtoene, die es ohnehin gibt
   (--gold zu --gold-hover) — genug, damit die Flaeche nicht flach wirkt, zu
   wenig, um Verzierung zu sein. Dunkler Text darauf: --text-on-gold ergibt
   7,07:1 auf dem hellen und 8,3:1 auf dem tiefen Ende. Weiss waere 2,82:1
   gewesen, derselbe Fehler wie in der Mailvorlage am 03.09.2026. */
.mi-tab.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-hover) 100%);
  color: var(--text-on-gold);
  font-weight: 600;
  box-shadow: var(--sh-xs);
}
.mi-tab.active:hover { color: var(--text-on-gold); }
.mi-tab-zahl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  /* --gold-tief statt --accent-text: Auf der goldenen Pille erreicht
     --accent-text (#8b6929) nur 4,39:1 — auf Weiss reicht es, hier nicht.
     Genau dafuer gibt es --gold-tief. Am 03.09.2026 nachgemessen. */
  color: var(--gold-tief);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
/* 03.09.2026: Hier stand weisser Text auf Gold — 2,21:1, gemessen auf der
   Vorschauseite. Das ist derselbe Fehler wie der Knopf der Mailvorlage
   (3,06:1). Jetzt dunkler Text auf heller Flaeche, 10,29:1. Der Rahmen in
   --gold-ui traegt die FORM: Die helle Pille allein waere gegen die weisse
   Karte 1,5:1 und damit als Form nicht zu erkennen. */
.mi-tab.active .mi-tab-zahl,
.mi-tab.active .mi-tab-stand {
  /* UMGEKEHRT auf dem goldenen Reiter: dunkle Pille, helles Gold darauf.
     Zuerst stand hier eine helle Pille mit goldenem Rahmen — die Fläche kam
     gegen das Gold auf 2,06:1 und war als Form nicht zu erkennen; der
     Kontrastlauf hat es am 06.09.2026 gemeldet. Ein Rahmen allein trägt die
     Form nicht, wenn die Fläche darin verschwindet.
     Jetzt: --dark gegen Gold als Form, --gold-hell darauf als Text (12,68:1
     laut Token). */
  background: var(--dark);
  color: var(--gold-hell);
  box-shadow: none;
}

/* Unterstrichene Variante für Seiten-Navigation innerhalb eines Bereichs */
/* Ein WORT am Reiter, keine Zahl.
   .mi-tab-zahl ist Monospace mit tabular-nums — richtig fuer Zaehler, falsch
   fuer „kein Zugang": Der Text sah aus wie Quelltext. 06.09.2026. */
.mi-tab-stand {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--gold-tief);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-left: var(--s-2);
  white-space: nowrap;
}

.mi-tabs-linie { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); padding: 0; background: none; border-radius: 0; }
.mi-tabs-linie .mi-tab { border-radius: 0; background: none; box-shadow: none; padding: 0 0 var(--s-3); min-height: 40px; border-bottom: 2px solid transparent; }
.mi-tabs-linie .mi-tab.active { border-bottom-color: var(--gold-ui); color: var(--text); background: none; }

/* ==========================================================================
   12 · DROPDOWN
   Kein sichtbares natives <select> für lange oder gestaltete Listen.
   Auswahl über data-wert am Eintrag lesen, nie über onclick mit eingebautem
   Text — Ländernamen enthalten Anführungszeichen und Apostrophe.
   ========================================================================== */
.mi-dd { position: relative; min-width: 0; }
.mi-dd-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  background: var(--surface);
  border: 1.5px solid var(--line-feld);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mi-dd-knopf:hover { border-color: #6f675b; }
.mi-dd.offen .mi-dd-knopf { border-color: var(--gold-ui); box-shadow: 0 0 0 3px var(--accent-soft); }
.mi-dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-dd-pfeil { width: 16px; height: 16px; flex: none; color: var(--gold-ui); transition: transform var(--dur) var(--ease); }
.mi-dd.offen .mi-dd-pfeil { transform: rotate(180deg); }

.mi-dd-menue {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  z-index: var(--z-overlay);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--s-1);
}
.mi-dd.offen .mi-dd-menue { display: block; animation: mi-auf var(--dur) var(--ease); }
.mi-dd-rechts .mi-dd-menue { left: auto; right: 0; }
@keyframes mi-auf { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.mi-dd-eintrag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mi-dd-eintrag:hover,
/* Tastatur-Markierung: sieht aus wie Hover, damit Maus und Tastatur
   dieselbe Sprache sprechen. Der Fokus bleibt derweil am Knopf. */
.mi-dd-eintrag.hervor { background: var(--accent-soft); color: var(--text); }
.mi-dd-eintrag.hervor { box-shadow: inset 2px 0 0 var(--gold-ui); }
.mi-dd-eintrag[aria-selected='true'] { color: var(--accent-text); font-weight: 600; }
.mi-dd-eintrag[aria-selected='true']::after { content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ui); }
.mi-dd-gruppe { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); padding: var(--s-3) var(--s-3) var(--s-1); }
.mi-dd-trenner { height: 1px; background: var(--line); margin: var(--s-1) var(--s-2); }
.mi-dd-eintrag.mi-gefahr { color: var(--danger); }
.mi-dd-eintrag.mi-gefahr:hover { background: var(--danger-soft); }

/* ==========================================================================
   13 · TOAST
   Kurze Rückmeldung. Nimmt NIE den Fokus. Behälter braucht aria-live="polite",
   bei Fehlern role="alert".
   ========================================================================== */
.mi-toasts {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
  max-width: min(420px, calc(100vw - var(--s-8)));
}
.mi-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--text-on-dark);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: mi-toast-rein var(--dur) var(--ease);
}
.mi-toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.mi-toast-fertig svg { color: #7bc39a; }
.mi-toast-problem svg { color: #e08b83; }
.mi-toast-schliessen { margin-left: auto; color: rgba(246, 243, 236, .5); width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-xs); }
.mi-toast-schliessen:hover { color: #fff; background: rgba(255, 255, 255, .1); }
/* Verschwinden geht schneller als Erscheinen — das fühlt sich wach an. */
.mi-toast.mi-geht { animation: mi-toast-raus 150ms var(--ease-in) forwards; }
@keyframes mi-toast-rein { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mi-toast-raus { to { opacity: 0; transform: translateY(6px) scale(.97); } }

@media (max-width: 767px) {
  .mi-toasts { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: none; }
}

/* ==========================================================================
   14 · DIALOG
   Wächst aus der Mitte, dunkler Schleier dahinter. Esc schließt, Fokus bleibt
   innen. Bei ungesicherten Eingaben vor dem Schließen nachfragen.
   ========================================================================== */
.mi-schleier {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: rgba(9, 9, 9, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  animation: mi-ein var(--dur) var(--ease);
}
@keyframes mi-ein { from { opacity: 0; } to { opacity: 1; } }

.mi-dialog {
  width: 100%;
  max-width: 560px;
  /* 880 nur fuer Formulare mit zwei Spalten (07.09.2026). Bei 560 stand das
     Kontaktformular in einer einzigen langen Saeule, und die Erklaerung neben
     einer Beschriftung brach auf vier Zeilen um. Breiter heisst hier: weniger
     Scrollen, nicht mehr Inhalt. */
  max-height: calc(100dvh - var(--s-16));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  animation: mi-dialog-rein var(--dur-slow) var(--ease);
}
.mi-dialog-breit { max-width: 880px; }
@keyframes mi-dialog-rein { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.mi-dialog-kopf { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-6) var(--s-6) var(--s-4); }
.mi-dialog-kopf h3 { margin: 0; }
.mi-dialog-kopf p { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.mi-dialog-x { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--text-muted); flex: none; }
.mi-dialog-x:hover { background: var(--bg-sunken); color: var(--text); }
.mi-dialog-koerper { padding: 0 var(--s-6) var(--s-6); overflow-y: auto; }
.mi-dialog-fuss { display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line-soft); background: var(--surface-2); }
@media (max-width: 640px) {
  .mi-dialog-fuss { flex-direction: column-reverse; }
  .mi-dialog-fuss > * { width: 100%; }
}

/* ==========================================================================
   15 · ZUSTÄNDE
   Laden, leer, Fehler. Die drei, die beim Bauen am häufigsten vergessen
   werden — und die im Betrieb am häufigsten auftreten.
   ========================================================================== */

/* Platzhalter in der Form des späteren Inhalts, kein kreisender Kringel. */
.mi-skelett {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, #f4efe5 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%;
  animation: mi-schimmer 1.4s linear infinite;
  border-radius: var(--r-xs);
}
@keyframes mi-schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mi-skelett-zeile { height: 13px; margin-bottom: var(--s-2); }
.mi-skelett-zeile:last-child { width: 62%; margin-bottom: 0; }
.mi-skelett-titel { height: 22px; width: 45%; margin-bottom: var(--s-3); }
.mi-skelett-kreis { width: 40px; height: 40px; border-radius: 50%; }

/* Leerer Zustand sagt, was zu tun ist — er entschuldigt sich nicht. */
.mi-leer { text-align: center; padding: var(--s-16) var(--s-6); max-width: 46ch; margin-inline: auto; }
.mi-leer-symbol { width: 44px; height: 44px; margin: 0 auto var(--s-4); color: var(--gold-ui); opacity: .55; stroke-width: 1.2; }
.mi-leer h3 { margin-bottom: var(--s-2); }
.mi-leer p { color: var(--text-muted); font-size: var(--t-sm); margin-inline: auto; }
.mi-leer .mi-btn { margin-top: var(--s-5); }

/* Fehler nennt die Ursache und einen Weg zurück. */
.mi-stoerung {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--danger-soft);
  border: 1px solid rgba(157, 49, 41, .22);
  border-radius: var(--r-md);
}
.mi-stoerung svg { width: 19px; height: 19px; color: var(--danger); flex: none; margin-top: 1px; }
.mi-stoerung-text { font-size: var(--t-sm); }
.mi-stoerung strong { display: block; color: var(--danger); margin-bottom: 2px; }

.mi-hinweis { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--info-soft); border: 1px solid rgba(60, 95, 125, .2); border-radius: var(--r-md); font-size: var(--t-sm); }
.mi-hinweis svg { width: 19px; height: 19px; color: var(--info); flex: none; margin-top: 1px; }

/* ==========================================================================
   16 · FORTSCHRITT
   ========================================================================== */
.mi-balken { height: 6px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
/* display:block ist hier kein Schönheitsfehler, sondern die Bedingung dafür,
   dass man überhaupt etwas sieht: Die Füllung ist ein <span>, und bei einem
   inline-Element wirkt height nicht. Am 27.08.2026 im Browser nachgemessen —
   die Balken waren 0 x 0 Pixel groß, seit es sie gibt.                       */
.mi-balken-fuellung { display: block; height: 100%; background: var(--gold-ui); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.mi-balken-fuellung[data-stand='fertig'] { background: var(--ok); }
.mi-balken-fuellung[data-stand='problem'] { background: var(--danger); }

/* Schritte eines mehrstufigen Ablaufs */
.mi-schritte { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mi-schritt { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-muted); }
.mi-schritt-nr {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line-feld);
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  flex: none;
}
.mi-schritt[data-stand='aktiv'] { color: var(--text); font-weight: 600; }
/* 03.09.2026: war weisser Text auf Gold (1,79:1). Dunkler Text auf heller
   Flaeche, der Rahmen in --gold-ui traegt den Kreis gegen den weissen Grund. */
.mi-schritt[data-stand='aktiv'] .mi-schritt-nr {
  /* --gold-deep und nicht --gold-ui: Der aktive Schritt sitzt auf
     --cream-tief (#f3e7c4), nicht auf Weiss. Dort traegt --gold-ui nur
     2,64:1 — der Kreis verschwaende in der Kachel. Am 03.09.2026 auf der
     Vorschauseite nachgemessen; auf Weiss allein waere es nicht aufgefallen. */
  border-color: var(--gold-deep);
  background: var(--gold);
  color: var(--text-on-gold);
}
.mi-schritt[data-stand='fertig'] .mi-schritt-nr { border-color: var(--ok); background: var(--ok); color: #fff; }
.mi-schritt-linie { width: 26px; height: 1px; background: var(--line-strong); }

/* -- Die Naechsten Schritte auf der Uebersicht ----------------------------- */
/* Seit dem 09.09.2026 eine gepflegte Liste statt vier fester Zeilen im Code:
   abhakbar, aenderbar, unterschiedlich lang. .mi-schritte darueber ist eine
   Kette nebeneinander — das liest sich ab dem fuenften Punkt nicht mehr, und
   ein Haken hat darin keinen Platz. Deshalb eigene Klassen und keine
   Ausnahmeregel auf der Kette. */
.mi-schritte-liste {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin: 0 0 var(--s-4); padding: 0; list-style: none;
}
.mi-schritt-zeile {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--text);
}
/* accent-color wie ueberall sonst im Haus. Ohne die Zeile stand hier das
   Blau des Browsers mitten in einer beigen Karte. */
.mi-schritt-zeile input[type='checkbox'] {
  width: 17px; height: 17px; margin-top: 2px; flex: none;
  accent-color: var(--gold-deep); cursor: pointer;
}
.mi-schritt-zeile label { cursor: pointer; }
/* Durchgestrichen UND blasser. Nur blass sieht nach „ausgegraut, kommt noch"
   aus; nur durchgestrichen bleibt genauso laut wie das Offene. */
.mi-schritt-zeile[data-erledigt] .mi-schritt-wort {
  text-decoration: line-through; color: var(--text-muted);
}
.mi-schritt-wort { min-width: 0; }
.mi-schritt-reihe { display: flex; align-items: center; gap: var(--s-2); }
.mi-schritt-reihe .mi-input { flex: 1 1 auto; min-width: 0; }
.mi-schritt-aktionen { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ==========================================================================
   17 · HILFSKLASSEN
   Bewusst wenige. Wer hier etwas vermisst, baut meist eine Komponente.
   ========================================================================== */
.mi-reihe   { display: flex; align-items: center; gap: var(--s-3); }
.mi-reihe-um { flex-wrap: wrap; }
.mi-spalte  { display: flex; flex-direction: column; gap: var(--s-3); }
.mi-schub   { margin-left: auto; }
.mi-trenner { height: 1px; background: var(--line); border: 0; margin: var(--s-5) 0; }

/* Nur für Vorleseprogramme sichtbar — für Beschriftungen, die visuell
   aus dem Zusammenhang hervorgehen. */
.mi-nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .mi-nav, .mi-topbar, .mi-toasts, .mi-seitenkopf-aktionen, .mi-zeilen-aktionen { display: none !important; }
  .mi-app { display: block; }
  .mi-karte { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}

/* ==========================================================================
   18 · DUNKLE UND BEIGE BAUSTEINE
   Der Kern der Marke. Eine Ansicht, die nur aus weißen Karten besteht, ist
   keine Miss-Intercontinental-Ansicht. Der Rhythmus lautet:
   weißer Grund → dunkler Block → beige Zwischenschicht → weiße Daten.

   Sparsam bleiben: ein dunkler Block je Ansicht, höchstens zwei. Wer alles
   dunkel macht, hat wieder keine Hierarchie.
   ========================================================================== */

/* -- Dunkle Karte: für das, was zählt --------------------------------------- */
.mi-karte-dunkel {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--text-on-dark-soft);
  border-radius: var(--r-xl);
  padding: var(--s-8);
}
.mi-karte-dunkel::before {
  content: '';
  position: absolute;
  top: -55%;
  right: -18%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 188, 132, .13) 0%, transparent 64%);
  pointer-events: none;
}
.mi-karte-dunkel > * { position: relative; }
.mi-karte-dunkel h2,
.mi-karte-dunkel h3,
.mi-karte-dunkel h4 { color: var(--text-on-dark); }
.mi-karte-dunkel .mi-kicker { color: var(--text-on-dark-soft); letter-spacing: .18em; }
.mi-karte-dunkel .mi-kicker .kline { background: var(--gold-hell); }
.mi-karte-dunkel a { color: var(--gold-hell); }
.mi-karte-dunkel hr,
.mi-karte-dunkel .mi-trenner { background: var(--line-dark); }

/* Die Zeile aus dem Entwurf: große Zeit, senkrechter Strich, Serifen-Titel. */
.mi-termin { display: flex; align-items: baseline; gap: var(--s-5); }
.mi-termin-zeit {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.mi-termin-trenner { width: 1px; align-self: stretch; background: var(--line-dark); flex: none; }
.mi-termin-titel {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--text-on-dark);
}
.mi-termin-zusatz { font-size: var(--t-xs); color: var(--text-on-dark-soft); margin-top: var(--s-1); }

/* Liste auf dunklem Grund — Haarlinien statt Kästen. */
.mi-dunkel-liste { display: flex; flex-direction: column; }
.mi-dunkel-zeile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-sm);
}
.mi-dunkel-zeile:first-child { border-top: 0; }
.mi-dunkel-zeile svg { width: 17px; height: 17px; flex: none; color: var(--gold-hell); stroke-width: 1.5; }
.mi-dunkel-zeile .mi-schub { color: var(--text-on-dark); font-variant-numeric: tabular-nums; }

/* -- Beige Karte: die warme Zwischenschicht --------------------------------- */
.mi-karte-warm {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--cream);
  border: 1px solid var(--cream-tief);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  color: var(--text-soft);
}
.mi-karte-warm-symbol {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--paper);
  border-radius: 50%;
  color: var(--gold-deep);
}
.mi-karte-warm-symbol svg { width: 19px; height: 19px; stroke-width: 1.6; }
.mi-karte-warm-text { min-width: 0; }

/* Dieselbe warme Karte, wenn etwas schiefging.
   06.09.2026 im Ordner vorgefunden: assets/js/pages/formulare.js benutzt
   .mi-karte-problem, definiert war sie nirgends — der Sammellauf meldete
   „UNBEKANNTE KLASSE". Die Karte wurde damit als heller Hinweis gezeichnet,
   obwohl sie von einer misslungenen Mail berichtet.
   Hier ergaenzt statt in der fremden Datei umgeschrieben: Die Absicht ist
   erkennbar, und die Klasse gehoert ohnehin ins Design-System.
   --danger traegt nur den Rahmen und die Ueberschrift; die Flaeche bleibt
   hell, damit der Text darauf lesbar bleibt. */
.mi-karte-problem {
  background: rgba(157, 49, 41, .05);
  /* 07.09.2026 gemessen: der Rahmen stand auf rgba(157, 49, 41, .28) und
     erreicht damit gegen Weiss 1,61 : 1. Eine Umrandung, die eine Stoerung
     markiert, ist ein Bedienelement und braucht 3 : 1 (WCAG 1.4.11). Die
     Flaeche bleibt bei 5 Prozent — dort sind --danger 6,69 : 1, --ink
     15,05 : 1 und --text-muted 5,18 : 1, alle drei ueber 4,5 : 1. */
  border-color: var(--danger);
}
.mi-karte-problem .mi-karte-warm-text strong { color: var(--danger); }
.mi-karte-problem .mi-karte-warm-symbol { color: var(--danger); }
.mi-karte-warm-text strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
.mi-karte-warm-text span { font-size: var(--t-xs); color: var(--text-muted); }
.mi-karte-warm .mi-karte-warm-pfeil { margin-left: auto; color: var(--text-muted); flex: none; }

/* -- Gold-Pille: die kleine Marke auf dunklem Grund -------------------------- */
.mi-marke-pille {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.mi-marke-pille-gold { background: var(--gold-hell); }
.mi-marke-pille-linie { background: transparent; color: var(--gold-hell); border: 1px solid rgba(217, 188, 132, .42); }

/* -- Knöpfe auf dunklem Grund ------------------------------------------------ */
.mi-karte-dunkel .mi-btn-outline,
.mi-hero .mi-btn-outline {
  color: var(--text-on-dark);
  border-color: rgba(247, 244, 238, .28);
  background: transparent;
}
.mi-karte-dunkel .mi-btn-outline:hover,
.mi-hero .mi-btn-outline:hover {
  border-color: var(--gold-hell);
  color: var(--gold-hell);
  background: rgba(217, 188, 132, .08);
}
.mi-karte-dunkel .mi-btn-still,
.mi-hero .mi-btn-still { color: var(--text-on-dark-soft); }
.mi-karte-dunkel .mi-btn-still:hover,
.mi-hero .mi-btn-still:hover { background: rgba(247, 244, 238, .08); color: var(--text-on-dark); }

/* -- Kennzahlen auf dunklem Grund -------------------------------------------- */
.mi-kennzahlen-dunkel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-6);
}
.mi-kennzahlen-dunkel .mi-kennzahl { padding: 0; border: 0; }
.mi-kennzahlen-dunkel .mi-kennzahl-label { color: var(--text-on-dark-soft); letter-spacing: .14em; }
.mi-kennzahlen-dunkel .mi-kennzahl-wert { color: var(--text-on-dark); font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }
.mi-kennzahlen-dunkel .mi-kennzahl-zusatz { color: rgba(247, 244, 238, .45); }

/* -- Statuspillen auf dunklem Grund ------------------------------------------ */
.mi-karte-dunkel .mi-pille-neutral { background: rgba(247, 244, 238, .10); color: var(--text-on-dark-soft); border-color: transparent; }
.mi-karte-dunkel .mi-pille-wartet  { background: rgba(217, 188, 132, .16); color: var(--gold-hell); border-color: transparent; }
.mi-karte-dunkel .mi-pille-fertig  { background: rgba(122, 190, 152, .16); color: #7abe98; border-color: transparent; }
.mi-karte-dunkel .mi-pille-problem { background: rgba(224, 139, 131, .16); color: #e08b83; border-color: transparent; }
.mi-karte-dunkel .mi-pille-laeuft  { background: rgba(140, 178, 212, .16); color: #8cb2d4; border-color: transparent; }

/* -- Zäsur: eine Haarlinie mit Goldpunkt, statt einer weiteren Karte ---------- */
.mi-zaesur { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-10) 0 var(--s-6); }
.mi-zaesur::before,
.mi-zaesur::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.mi-zaesur::before { flex: 0 0 0; }
.mi-zaesur-text {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   0 · GRUNDREGEL, DIE VOR ALLEM ANDEREN GILT
   Ergänzt am 20.08.2026.

   Das Attribut hidden blendet nur aus, SOLANGE kein CSS eine display-Regel
   für dasselbe Element setzt. Sobald eine Klasse display: grid oder flex
   vergibt — .mi-app und .mi-anmeldung tun das — gewinnt die Klasse, und das
   angeblich versteckte Element steht sichtbar da.

   Am 20.08.2026 genau so passiert: Anmeldemaske und Anwendung waren
   gleichzeitig zu sehen.
   ========================================================================== */
[hidden] { display: none !important; }

/* ==========================================================================
   19 · FLAGGEN UND ANMELDUNG
   Ergänzt am 20.08.2026 vom Server-Chat. Nach der goldenen Regel gehören
   auch diese Bausteine hierher und nicht in eine einzelne Seite.
   ========================================================================== */

/* Landesflagge als Bild, nicht als Emoji.
   Emoji-Flaggen sehen auf jedem System anders aus, auf Windows gar nicht —
   dort erscheinen zwei Buchstaben. Deshalb echte Dateien unter
   assets/flaggen/<iso2>.svg. Fehlt eine, zeigt .mi-flagge-code den Code.
   Solange die Dateien fehlen, greift überall der Code — nichts bricht. */
.mi-flagge {
  display: inline-block;
  width: 22px;
  height: 15px;
  margin-right: var(--s-2);
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(13, 13, 12, .10);
  background: var(--bg-sunken);
}
.mi-flagge-gross { width: 30px; height: 20px; }

/* Wehende Flagge als freigestelltes WebP.

   Die flache Variante bekommt eine gefasste Kante, weil ein Rechteck ohne
   Rahmen auf weissem Grund ausfranst. Ein wehendes Tuch bringt seine eigene
   Silhouette mit: Rahmen, Radius und Fuellfarbe wuerden einen sichtbaren
   Kasten um ein durchsichtiges Bild legen. Deshalb hier alles drei zurueck
   auf null - und `contain` statt `cover`, sonst schneidet die feste
   Kastengroesse den Zipfel der wehenden Kante ab. */
.mi-flagge-weht {
  border-radius: 0;
  box-shadow: none;
  background: none;
  object-fit: contain;
}

/* Vorschau im Land-Dialog. Gross genug, um zu erkennen, ob die Flagge stimmt
   und ob sie sauber freigestellt ist — deshalb auf beigem Grund: ein gemaltes
   graues Karomuster faellt auf Weiss nicht auf, hier schon. */
.mi-flagge-probe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 68px;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
}
.mi-flagge-probe img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Dateiauswahl. Der native Knopf des Browsers bleibt bedienbar - er ist an
   jedem System vertraut und barrierefrei; nur der Rahmen kommt von uns. */
.mi-datei {
  max-width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-feld);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--text);
}
.mi-datei::file-selector-button {
  margin-right: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-feld);
  border-radius: var(--r-xs);
  background: var(--bg-sunken);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.mi-flagge-code {
  display: inline-block;
  min-width: 22px;
  margin-right: var(--s-2);
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-align: center;
  vertical-align: 1px;
}

/* Anmeldung — die einzige Ansicht ohne Navigation.
   Dunkler Grund, damit klar ist: hier ist noch nichts freigeschaltet.

   ACHTUNG, gelernt am 20.08.2026: Es gibt KEIN --s-7. Die Stufen springen
   von 6 auf 8. Ein einziger undefinierter Wert macht in CSS die ganze
   Deklaration ungültig — still und ohne Meldung. Die Karte stand deshalb
   ohne jeden Innenabstand da. Vor jedem var(--s-…) kurz oben nachsehen. */
.mi-anmeldung {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--s-6);
  background: var(--dark);
}

.mi-anmeldung-karte {
  width: 100%;
  max-width: 400px;
  padding: var(--s-10) var(--s-8) var(--s-8);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

.mi-anmeldung-marke {
  text-align: center;
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-soft);
}
/* .mi-kicker ist ein Flex-Behälter und damit linksbündig. Hier muss er
   mittig stehen, sonst hängt die Zeile schief unter dem Titel. */
.mi-anmeldung-marke .mi-kicker { justify-content: center; margin-bottom: var(--s-3); }
/* Der Lockup im Anmeldefenster steht mittig und traegt seinen Abstand selbst.
   .mi-hero-marke bringt margin-bottom mit — hier ist es der Abstand zur
   Ueberschrift, deshalb kleiner als im Hero. Seit 03.09.2026. */
.mi-anmeldung-marke .mi-hero-marke { margin: 0 auto var(--s-4); height: 40px; }
.mi-anmeldung-marke h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.mi-anmeldung-marke h1 em { font-style: italic; color: var(--gold-deep); }

.mi-anmeldung-fuss {
  margin: var(--s-6) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* Jahresmarke — in welchen Jahrgängen eine Person dabei war.
   Das Kernbild der Kontaktliste. */
.mi-jahre { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mi-jahr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 58px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  line-height: 1.1;
}
.mi-jahr-zahl {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.mi-jahr-rolle {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}


/* ==========================================================================
   19 — FORMULARE
   Bausteine fuer mehrstufige Formulare. Entstanden am 22.08.2026 aus den
   Vorschauen "Contestant Information" und "Flight Information".

   Sechs Regeln erweitern bestehende Bausteine, statt neue anzulegen:
   .mi-feld, .mi-label, .mi-input, .mi-schritt, .mi-dd-knopf, .mi-dd-text.
   Sie stehen hier am Ende, damit die Erweiterung in der Kaskade greift —
   die Abschnitte davor bleiben unberuehrt.
   ========================================================================== */



/* --- 19.1  Formularraster ------------------------------------------------ */
/* Zwoelf Spalten. Ein Feld belegt so viele, wie sein Inhalt verdient:
   eine Postleitzahl ist nicht so breit wie eine Anschrift. Ohne das steht
   jedes Feld auf voller Breite und ein Formular sieht aus wie eine Liste. */
.mi-raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5) var(--s-5);
  align-items: start;
}
/* .mi-feld bringt aus dem System ein margin-bottom mit. Im Raster regelt
   die Zeilenluecke den Abstand — sonst addiert sich beides. */
.mi-raster > .mi-feld { margin-bottom: 0; }
.mi-raster > .mi-feld { grid-column: span 12; }
@media (min-width: 620px) {
  .mi-raster > .mi-feld[data-breite='2']  { grid-column: span 2; }
  .mi-raster > .mi-feld[data-breite='3']  { grid-column: span 3; }
  .mi-raster > .mi-feld[data-breite='4']  { grid-column: span 4; }
  .mi-raster > .mi-feld[data-breite='5']  { grid-column: span 5; }
  .mi-raster > .mi-feld[data-breite='6']  { grid-column: span 6; }
  .mi-raster > .mi-feld[data-breite='7']  { grid-column: span 7; }
  .mi-raster > .mi-feld[data-breite='8']  { grid-column: span 8; }
  .mi-raster > .mi-feld[data-breite='9']  { grid-column: span 9; }
  .mi-raster > .mi-feld[data-breite='10'] { grid-column: span 10; }
  /* 11 und 12 gab es nicht, weil 12 die Vorgabe ist. Ausgeschrieben ist es
     trotzdem besser: Wer im Markup data-breite='12' liest, sieht, dass die
     ganze Zeile ABSICHT ist und nicht nur die vergessene Angabe. */
  .mi-raster > .mi-feld[data-breite='11'] { grid-column: span 11; }
  .mi-raster > .mi-feld[data-breite='12'] { grid-column: span 12; }
}
@media (min-width: 480px) and (max-width: 619px) {
  .mi-raster > .mi-feld[data-breite='2'],
  .mi-raster > .mi-feld[data-breite='3'],
  .mi-raster > .mi-feld[data-breite='4'],
  .mi-raster > .mi-feld[data-breite='5'] { grid-column: span 6; }
}

/* Ein ausgefuelltes Feld traegt eine ruhige Marke an der Beschriftung.
   Farbe allein waere kein Signal — deshalb der Haken als Form. */
.mi-feld-haken {
  width: 15px; height: 15px; margin-left: auto;
  color: var(--ok); flex: none;
  opacity: 0; transform: scale(.7);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mi-feld[data-voll] .mi-feld-haken { opacity: 1; transform: none; }
/* Umbrechend, weil manche Beschriftung eine Erklaerung neben sich traegt.
   Ohne flex-wrap kann ein Flex-Element nicht unter seine Inhaltsbreite
   schrumpfen — die Erklaerung schob die Beschriftung dann aus dem Feld
   heraus, statt in die naechste Zeile zu rutschen. */
.mi-label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }

/* Markenzeichen im Feld, links. Die Beschriftung bleibt trotzdem stehen —
   ein Symbol allein ist keine Beschriftung. */
.mi-feld-marke { position: relative; }
.mi-feld-marke .mi-input { padding-left: 42px; }
.mi-feld-marke > svg {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--text-muted); pointer-events: none;
}
.mi-feld-marke .mi-input:focus ~ svg { color: var(--gold-deep); }

/* Auswahl mit Symbolen statt Klappliste: sechs Messenger sind schneller
   angetippt als aufgeklappt, und man sieht sofort, worum es geht. */
.mi-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mi-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  border: 1.5px solid var(--line-feld); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-soft);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mi-chip svg { width: 18px; height: 18px; flex: none; }
.mi-chip:hover { border-color: #6f675b; background: var(--cream); }
.mi-chip[aria-pressed='true'] { border-color: var(--gold-ui); background: var(--accent-softer); color: var(--ink); }
.mi-chip:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Flaggen in der Sprachwahl */
.mi-flagge-svg { width: 21px; height: 15px; flex: none; border-radius: 2.2px; }
/* .mi-dd-text ist im System auf eine Textzeile ausgelegt (nowrap, ellipsis).
   Sobald eine Flagge darin steht, braucht es eine Reihe — sonst stapeln
   sich Symbol, Flagge und Wort untereinander und der Knopf wird dreimal
   so hoch. */
.mi-dd-knopf .mi-dd-text { display: flex; align-items: center; gap: var(--s-2); }
.mi-dd-symbol { width: 17px; height: 17px; flex: none; color: var(--gold-ui); }

/* Einheit im Feld statt als Zeile darunter — spart eine Zeile je Feld. */
.mi-feld-einheit { position: relative; }
.mi-feld-einheit .mi-input { padding-right: 44px; font-family: var(--font-mono); }
/* Ein Wert, den das Formular selbst ausrechnet. Er steht am Feld, das ihn
   erzeugt — sonst sucht man ihn im Rest der Seite. */
.mi-abgeleitet {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start;
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  background: var(--accent-softer); color: var(--gold-deep);
  font-size: var(--t-xs); font-weight: 600;
}
.mi-abgeleitet:empty { display: none; }

/* Der Speicherstand. Er sagt nicht dauernd "gespeichert" — er meldet sich,
   wenn etwas passiert ist, und wird danach wieder still. Ein Formular mit
   63 Feldern, das seinen Stand verschweigt, verliert Antworten. */
.mi-speicherstand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--text-muted);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.mi-speicherstand[data-stand] { opacity: 1; }
.mi-speicherstand[data-stand='laeuft'] { color: var(--text-muted); }
.mi-speicherstand[data-stand='fertig'] { color: var(--ok); }
.mi-speicherstand[data-stand='problem'] { color: var(--danger); }
.mi-speicherstand svg { width: 14px; height: 14px; flex: none; }
@keyframes mi-dreht { to { transform: rotate(360deg); } }
.mi-speicherstand[data-stand='laeuft'] svg { animation: mi-dreht 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mi-speicherstand[data-stand='laeuft'] svg { animation: none; }
  .mi-speicherstand { transition: none; }
}

.mi-feld-einheit > span {
  position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%);
  font-size: var(--t-sm); color: var(--text-muted); pointer-events: none;
}

/* --- 19.2  Abschnitt eines mehrstufigen Formulars ------------------------ */
.mi-abschnitt-kopf { margin-bottom: var(--s-6); }
.mi-abschnitt-nr {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .18em; color: var(--gold-deep);
}
.mi-abschnitt-kopf h2 { font-size: var(--t-2xl); margin: var(--s-2) 0 0; }
.mi-abschnitt-kopf p { color: var(--text-muted); margin: var(--s-2) 0 0; max-width: 56ch; }
.mi-gruppe + .mi-gruppe { margin-top: var(--s-12); }
.mi-gruppe > h3 {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--t-md); letter-spacing: 0; text-transform: none;
  color: var(--text); font-weight: 600;
  padding-bottom: var(--s-4); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
/* Das Symbol sitzt in einer ruhigen Scheibe. Seine Faerbung sagt zusaetzlich
   zur Pille rechts, ob die Gruppe veroeffentlicht wird. */
.mi-gruppe-symbol {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-sunken); color: var(--text-muted);
}
.mi-gruppe-symbol svg { width: 19px; height: 19px; stroke-width: 1.6; }
.mi-gruppe[data-sicht='oeffentlich'] .mi-gruppe-symbol { background: var(--accent-softer); color: var(--gold-deep); }
.mi-gruppe[data-sicht='jury']        .mi-gruppe-symbol { background: var(--info-soft);     color: var(--info); }

/* --- 19.3  Die Sedcard --------------------------------------------------- */
.mi-sedcard {
  background: var(--dark); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); overflow: hidden; color: var(--text-on-dark);
}
.mi-sedcard-bild {
  position: relative; background: var(--dark-2);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-dark);
}
/* Erst wenn ein Foto da ist, darf es Platz beanspruchen. Ein leerer
   Platzhalter im Hochformat schiebt alles Wichtige aus dem Bild. */
.mi-sedcard-bild[data-hat-bild] {
  aspect-ratio: 4 / 5; display: grid; place-content: center; padding: 0;
}
.mi-sedcard-bild svg { width: 26px; height: 26px; color: rgba(247,244,238,.28); flex: none; }
.mi-sedcard-bild span { font-size: var(--t-xs); color: var(--text-on-dark-soft); }
.mi-sedcard-kopf { padding: var(--s-5) var(--s-5) var(--s-4); }
.mi-sedcard-land {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hell);
}
.mi-sedcard-name {
  font-family: var(--font-display); font-size: var(--t-xl);
  line-height: var(--lh-tight); color: var(--text-on-dark); margin: 0;
}
.mi-sedcard-beruf { font-size: var(--t-sm); color: var(--text-on-dark-soft); margin-top: var(--s-2); }
.mi-sedcard-zeilen { padding: 0 var(--s-5); margin: 0; }
.mi-sedcard-zeile {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--line-dark); font-size: var(--t-sm);
}
.mi-sedcard-zeile dt { flex: 0 0 88px; color: var(--text-on-dark-soft); font-size: var(--t-xs); }
.mi-sedcard-zeile dd { margin: 0; color: var(--text-on-dark); min-width: 0; }
.mi-sedcard-zeile dd.zahl { font-family: var(--font-mono); }
.mi-sedcard-luecke {
  display: inline-block; min-width: 68px;
  border-bottom: 1px dashed rgba(247,244,238,.28);
  color: rgba(247,244,238,.34); font-style: italic;
}
.mi-sedcard-masse {
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: var(--t-sm);
}
.mi-sedcard-masse span { color: var(--text-on-dark-soft); margin-right: var(--s-1); }
.mi-sedcard-masse b { color: var(--text-on-dark); font-weight: 500; }
.mi-sedcard-worte { display: flex; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-4) var(--s-5) 0; }
.mi-sedcard-wort {
  border: 1px solid rgba(210,172,103,.4); color: var(--gold-hell);
  border-radius: var(--r-pill); padding: 3px var(--s-3); font-size: var(--t-xs);
}
.mi-sedcard-motto {
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-md); line-height: var(--lh-snug); color: var(--gold-hell);
}
/* Der Stand sitzt IN der Karte, nicht als vierter Kasten daneben. */
.mi-sedcard-fuss {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-dark);
  background: var(--dark-2);
}
.mi-sedcard-fuss-text { min-width: 0; }
.mi-sedcard-fuss-zahl { font-family: var(--font-mono); font-size: var(--t-lg); line-height: 1; color: var(--text-on-dark); }
.mi-sedcard-fuss-label { font-size: var(--t-xs); color: var(--text-on-dark-soft); margin-top: 3px; }

@keyframes mi-wert-ein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.mi-sedcard [data-frisch] { animation: mi-wert-ein var(--dur) var(--ease); }

/* --- 19.4  Fortschrittsring --------------------------------------------- */
.mi-ring { width: 52px; height: 52px; flex: none; transform: rotate(-90deg); }
.mi-ring circle { fill: none; stroke-width: 4; }
.mi-ring .spur { stroke: rgba(247,244,238,.16); }
.mi-ring .wert {
  stroke: var(--gold-hell); stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease), stroke var(--dur) var(--ease);
}
.mi-ring[data-stand='fertig'] .wert { stroke: var(--ok); }

/* --- 19.5  Was noch fehlt ------------------------------------------------ */
.mi-fehlt-liste { display: flex; flex-direction: column; gap: 1px; margin-top: var(--s-3); }
.mi-fehlt-eintrag {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: var(--t-sm); color: var(--text-on-cream);
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.mi-fehlt-eintrag:hover { background: var(--cream-tief); }
.mi-fehlt-eintrag:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.mi-fehlt-eintrag svg { width: 14px; height: 14px; color: var(--gold-deep); flex: none; }
.mi-fehlt-schritt { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); flex: none; }

/* --- 19.6  Marke im Seitenkopf und gesperrter Schritt -------------------- */
/* Der Seitenkopf hatte rechts eine grosse leere Flaeche. Dort steht jetzt,
   wie weit man ist — die Information, die man beim Ankommen zuerst sucht. */
.mi-hero-zwei { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .mi-hero-zwei { grid-template-columns: minmax(0,1fr) 300px; align-items: end; } }
.mi-hero-stand { display: flex; flex-direction: column; gap: var(--s-4); }
.mi-hero-stand-kopf { display: flex; align-items: baseline; gap: var(--s-3); }
.mi-hero-stand-zahl { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--gold-hell); }
.mi-hero-stand-text { font-size: var(--t-xs); color: var(--text-on-dark-soft); }
.mi-hero-schritt {
  display: grid; grid-template-columns: 1fr auto; gap: 5px var(--s-3);
  align-items: center; width: 100%;
  padding: var(--s-2) 0; border: 0; border-top: 1px solid var(--line-dark);
  background: none; text-align: left; cursor: pointer;
  font-size: var(--t-xs); color: var(--text-on-dark-soft);
  transition: color var(--dur-fast) var(--ease);
}
.mi-hero-schritt:hover { color: var(--text-on-dark); }
.mi-hero-schritt:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 2px; }
.mi-hero-schritt b { font-weight: 500; }
.mi-hero-schritt-zahl { font-family: var(--font-mono); }
.mi-hero-balken { grid-column: 1 / -1; height: 3px; border-radius: var(--r-pill); background: rgba(247,244,238,.14); overflow: hidden; }
.mi-hero-balken > i { display: block; height: 100%; background: var(--gold-hell); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.mi-hero-schritt[data-fertig] .mi-hero-balken > i { background: var(--ok); }

.mi-hero-marke { display: block; height: 46px; width: auto; margin-bottom: var(--s-6); }
@media (max-width: 560px) { .mi-hero-marke { height: 34px; } }
/* Ein Schritt ist ein Knopf und muss auch so aussehen. Vorher war er nur
   Text mit einem Kreis davor — dass man springen kann, sah man nicht. */
.mi-schritt {
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mi-schritt:not([disabled]):hover { background: var(--cream); border-color: var(--line-strong); color: var(--text); }
.mi-schritt:not([disabled]):active { transform: translateY(1px); }
.mi-schritt:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.mi-schritt[data-stand='aktiv'] { background: var(--cream-tief); border-color: var(--gold-ui); }
.mi-schritt[disabled] { opacity: .45; cursor: not-allowed; }
/* Der kleine Pfeil erscheint im Hover — die knappste Art zu sagen: hier geht es hin. */
.mi-schritt-hin { width: 14px; height: 14px; opacity: 0; margin-left: -4px; transition: opacity var(--dur-fast) var(--ease), margin var(--dur-fast) var(--ease); }
.mi-schritt:not([disabled]):hover .mi-schritt-hin { opacity: .7; margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .mi-sedcard [data-frisch] { animation: none; }
  .mi-ring .wert, .mi-feld-haken { transition: none; }
}

/* --- 19.65  Wiederholbarer Block ---------------------------------------
   Ein Notfallkontakt reicht selten. Statt drei feste Saetze Felder
   anzubieten, waechst der Block mit — und schrumpft wieder. */
.mi-wdh-eintrag { position: relative; }
.mi-wdh-eintrag + .mi-wdh-eintrag {
  margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px dashed var(--line);
}
.mi-wdh-kopf {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm); font-weight: 600; color: var(--text-muted);
}
.mi-wdh-weg { margin-left: auto; }
.mi-wdh-mehr { margin-top: var(--s-5); }
/* Folgt auf einen wiederholbaren Block noch ein normales Raster, braucht es
   eine Zaesur — sonst steht das naechste Feld neben dem Plus-Knopf. */
.mi-wdh + .mi-raster {
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

/* --- 19.7  Sichtbarkeit: was veroeffentlicht wird und was nicht ---------
   Die Trennung intern/oeffentlich ist im Datenmodell festgelegt. Wer ein
   Formular ausfuellt, sieht sie sonst nirgends — also steht sie an der
   Gruppe, bevor das erste Feld ausgefuellt wird. Icon und Wort, nicht Farbe
   allein. */
.mi-sicht {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
  border: 1px solid transparent; white-space: nowrap;
}
.mi-sicht svg { width: 13px; height: 13px; flex: none; }
.mi-sicht[data-art='oeffentlich'] { background: var(--accent-softer); color: var(--gold-deep); border-color: rgba(161,125,44,.28); }
.mi-sicht[data-art='jury']        { background: var(--info-soft);     color: var(--info);      border-color: rgba(60,95,125,.24); }
.mi-sicht[data-art='intern']      { background: var(--bg-sunken);     color: var(--text-muted);border-color: var(--line); }

.mi-gruppe > h3 {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.mi-gruppe > h3 > .mi-sicht { margin-left: auto; }

/* ==========================================================================

/* ==========================================================================
   20 — LISTEN, FLUEGE UND REISEN
   Aus der Verwaltungstabelle "Fluege" und dem Flight-Info-Formular.
   ========================================================================== */



/* --- 20.1  Ankunftstage als Streifen ------------------------------------
   Die operative Frage ist nicht "wer kommt", sondern "wie viele landen am
   14.". Ein Balken je Tag beantwortet das schneller als jede Tabelle, und
   ein Klick filtert darauf. */
/* Am 27.08.2026 umgedreht: Diese Regeln waren fuer DUNKLEN Grund geschrieben —
   die Spur war rgba(weiss,.07), die Saeule das helle Gold. In der weissen Karte
   der Flugseite war die Spur damit unsichtbar und alle Tage sahen gleich aus.
   Grundfall ist jetzt hell; die dunkle Fassung steht darunter als Ueberschrift
   unter .mi-karte-dunkel.

   Die Breite ist gedeckelt: Bei fuenf Ankunftstagen zieht ein flex:1 jede
   Saeule auf 300 px, und ein 300 px breiter, 30 px hoher Balken liest sich
   nicht mehr als Saeule, sondern als Banner.                                 */
.mi-tage { display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; }
.mi-tag {
  flex: 1 1 44px; min-width: 0; max-width: 84px;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--text-on-dark-soft);
}
.mi-tag-saeule {
  height: 58px; display: flex; align-items: flex-end;
  background: var(--bg-sunken); border-radius: var(--r-xs); overflow: hidden;
}
.mi-tag-saeule > i {
  display: block; width: 100%; min-height: 4px; background: var(--gold-ui);
  border-radius: inherit; transition: height var(--dur-slow) var(--ease), background var(--dur) var(--ease);
}
.mi-tag-zahl { font-family: var(--font-mono); font-size: var(--t-xs); text-align: center; color: var(--text-muted); }
.mi-tag-datum { font-size: 10px; letter-spacing: .1em; text-align: center; color: var(--text-muted); }
.mi-tag:hover .mi-tag-saeule > i { background: var(--gold-deep); }
.mi-tag:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: var(--r-xs); }
/* Der gewaehlte Tag traegt Gruen, nicht ein staerkeres Gold: Neben den anderen
   Goldsaeulen waere eine weitere Goldstufe kaum zu unterscheiden. */
.mi-tag[aria-pressed='true'] .mi-tag-saeule > i { background: var(--ok); }
.mi-tag[aria-pressed='true'] .mi-tag-zahl,
.mi-tag[aria-pressed='true'] .mi-tag-datum { color: var(--text); font-weight: 700; }

/* Dieselbe Leiste auf dunklem Grund. */
.mi-karte-dunkel .mi-tag-saeule { background: rgba(247, 244, 238, .07); }
.mi-karte-dunkel .mi-tag-saeule > i { background: var(--gold-hell); }
.mi-karte-dunkel .mi-tag-zahl,
.mi-karte-dunkel .mi-tag-datum { color: var(--text-on-dark-soft); }
.mi-karte-dunkel .mi-tag:hover .mi-tag-saeule > i { background: #fff; }
.mi-karte-dunkel .mi-tag[aria-pressed='true'] .mi-tag-zahl,
.mi-karte-dunkel .mi-tag[aria-pressed='true'] .mi-tag-datum { color: var(--text-on-dark); }

/* --- 20.2  Person in der Tabellenzeile ---------------------------------- */
.mi-person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.mi-person-text { min-width: 0; }
.mi-person-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-person-rolle { font-size: var(--t-xs); color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; }
.mi-person-ohne { color: var(--text-muted); font-style: italic; font-weight: 400; }

/* --- 20.3  Flugangabe --------------------------------------------------- */
.mi-flug { display: flex; align-items: baseline; gap: var(--s-3); white-space: nowrap; flex-wrap: wrap; }
.mi-flug-tag { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.mi-flug-zeit { font-family: var(--font-mono); color: var(--text-soft); }
.mi-flug-nr { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); }
.mi-flug-strecke { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.mi-flug-leer { color: var(--text-platzhalter); font-style: italic; }

/* --- 20.4  Tagesgruppe in der Tabelle ----------------------------------- */
.mi-gruppenzeile td {
  background: var(--cream); border-top: 1px solid var(--line);
  font-weight: 600; font-size: var(--t-sm); color: var(--ink);
  position: sticky; top: 41px; z-index: 1;
  padding-top: var(--s-3); padding-bottom: var(--s-3);
}
.mi-gruppenzeile-inhalt { display: flex; align-items: center; gap: var(--s-3); }
.mi-gruppenzeile .zahl { font-family: var(--font-mono); color: var(--text-muted); font-weight: 400; }
.mi-gruppenzeile .zahl::before { content: '·'; margin-right: var(--s-3); }
/* Der Export sitzt in der Abschnittszeile, nicht in einem Menue daneben:
   wer die Zeile sieht, sieht auch, dass genau dieser Block exportierbar ist. */
.mi-gruppen-export {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: var(--t-xs); font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mi-gruppen-export svg { width: 13px; height: 13px; }
.mi-gruppen-export:hover { border-color: var(--gold-ui); color: var(--ink); background: var(--surface-warm); }
.mi-gruppen-export:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ==========================================================================

/* -- 20.5  Die Reise als Strecke ---------------------------------------------
   Ein Flugformular ist kein Fragenkatalog, sondern eine Strecke. Als solche
   dargestellt sieht man sofort, wo ein Glied fehlt. */
.mi-reise { background: var(--dark); border-radius: var(--r-lg); overflow: hidden; color: var(--text-on-dark); }
.mi-reise-teil { padding: var(--s-5); }
.mi-reise-teil + .mi-reise-teil { border-top: 1px solid var(--line-dark); }
.mi-reise-kopf { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: var(--s-4); }
.mi-reise-kopf svg { width: 15px; height: 15px; }
.mi-reise-punkt { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) 0; }
.mi-reise-marke { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold-hell);
  flex: none; margin-top: 5px; background: var(--dark); }
.mi-reise-punkt[data-leer] .mi-reise-marke { border-color: rgba(247,244,238,.28); }
.mi-reise-linie { width: 1.5px; margin-left: 4px; height: 14px; background: rgba(247,244,238,.2); }
.mi-reise-text { min-width: 0; }
.mi-reise-ort { color: var(--text-on-dark); font-size: var(--t-sm); }
.mi-reise-punkt[data-leer] .mi-reise-ort { color: rgba(247,244,238,.34); font-style: italic; }
.mi-reise-zeit { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-on-dark-soft); margin-top: 2px; }
.mi-reise-fuss { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line-dark); background: var(--dark-2); }
.mi-reise-zahl { font-family: var(--font-mono); font-size: var(--t-lg); line-height: 1; color: var(--text-on-dark); }
.mi-reise-label { font-size: var(--t-xs); color: var(--text-on-dark-soft); margin-top: 3px; }
.mi-reise { position: sticky; top: var(--s-6); }


/* ══ 21 Auswahlkarten und Zellenknöpfe ══════════════════════════════════════
   Eine Auswahl aus wenigen benannten Möglichkeiten. Ein <select> könnte das
   auch — aber nicht die zwei Zeilen Erklärung, die hier den Unterschied
   ausmachen ("37 Pflichtfelder" gegen "An- und Abreise"). Die ganze Karte ist
   klickbar, weil sie im <label> liegt.                                       */

/* Der untere Abstand gehoert hierher und nicht an das naechste Element:
   Eine Auswahlliste steht fast nie allein, und ohne ihn klebt das folgende
   Label an der letzten Karte. */
.mi-wahl-liste { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }

.mi-wahl {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-wahl:hover { border-color: var(--gold-ui); }
.mi-wahl:has(input:checked) { border-color: var(--gold-ui); background: var(--accent-soft); }
.mi-wahl:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.mi-wahl input { margin-top: 3px; accent-color: var(--gold-deep); width: 16px; height: 16px; flex: none; }
.mi-wahl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-wahl-text strong { font-weight: 600; }
.mi-wahl-text .mi-hilfe { margin: 0; }

/* Knöpfe in einer Tabellenzelle, die immer sichtbar bleiben. Nicht zu
   verwechseln mit .mi-zeilen-aktionen — die blenden sich erst beim Überfahren
   ein, was in einer langen Liste ruhiger wirkt, in einem Dialog mit vier
   Zeilen aber nur dazu führt, dass man die Knöpfe nicht findet.              */
.mi-zellen-knoepfe { display: flex; gap: var(--s-1); justify-content: flex-end; flex-wrap: wrap; }

/* ==========================================================================
   20 · LÄNDERWAHL — die Einplanung eines Jahrgangs
   196 Kontrollkästchen. Als Tabelle wären das 196 Zeilen zum Scrollen;
   als Raster passen bei gleicher Höhe dreimal so viele ins Bild.
   ========================================================================== */
.mi-laenderwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-1) var(--s-4);
}

.mi-laenderwahl-eintrag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mi-laenderwahl-eintrag:hover { background: var(--bg-sunken); }
.mi-laenderwahl-eintrag:focus-within {
  border-color: var(--gold-ui);
  background: var(--bg-sunken);
}

/* Der Haken ist gesetzt: warme Fläche statt nur ein Häkchen. Bei 196 Zeilen
   muss auf einen Blick sichtbar sein, wer dabei ist — ein 20-px-Kästchen
   allein trägt das nicht. */
.mi-laenderwahl-eintrag.ist-dabei {
  background: var(--cream);
  border-color: var(--cream-tief);
}

.mi-laenderwahl-eintrag input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gold-deep);
  flex: none;
  cursor: pointer;
}

.mi-laenderwahl-name {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-laenderwahl-region {
  font-size: var(--t-xs);
  color: var(--text-muted);
  flex: none;
}

/* Beim Speichern kurz ausgegraut, damit zwei Klicks nicht übereinander
   laufen — der Haken wird sofort gesetzt, der Server antwortet später. */
.mi-laenderwahl-eintrag.laeuft { opacity: .5; pointer-events: none; }

/* ==========================================================================
   21 · LÄNDER-MARKE — das wehende Tuch für die Sedcard
   Am 27.08.2026 aus vier Entwürfen gewählt (Variante C).

   Der Entwurf sah eine Goldkante direkt um die Flagge vor. Das funktioniert
   bei einem flachen Rechteck; das wehende Tuch ist freigestellt und hat keine
   geraden Kanten — ein Rahmen läge um leere Fläche. Deshalb wird aus der
   Fassung eine Platte: Gold als Haarlinie außen, das Tuch liegt darauf.

   Gehört NICHT in Listen der Verwaltung. Dort steht die flache Flagge.
   ========================================================================== */
.mi-laendermarke {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
}

.mi-laendermarke-fassung {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 92px;
  padding: var(--s-3);
  border: 1px solid var(--gold-ui);
  border-radius: var(--r-sm);
  background: var(--cream);
}
.mi-laendermarke-fassung img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Der Name in Versalien mit weiter Sperrung — die Schreibweise des
   Aufmarschs der Nationen. Mono, damit die Sperrung gleichmäßig bleibt. */
.mi-laendermarke-name {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--text);
  text-align: center;
  max-width: 128px;
  line-height: 1.35;
}

.mi-laendermarke-gross .mi-laendermarke-fassung {
  width: 256px;
  height: 184px;
  padding: var(--s-4);
  border-radius: var(--r-md);
}
.mi-laendermarke-gross .mi-laendermarke-name {
  font-size: var(--t-sm);
  max-width: 256px;
}

/* Auf dunklem Grund kehrt sich die Platte um: Gold leuchtet erst dort
   richtig, und das Tuch steht auf Fast-Schwarz plastischer. */
.mi-karte-dunkel .mi-laendermarke-fassung,
.mi-hero .mi-laendermarke-fassung,
.mi-laendermarke-dunkel .mi-laendermarke-fassung {
  border-color: var(--gold-hell);
  background: var(--dark-2);
}
.mi-karte-dunkel .mi-laendermarke-name,
.mi-hero .mi-laendermarke-name,
.mi-laendermarke-dunkel .mi-laendermarke-name {
  color: var(--text-on-dark);
}


/* ══ 22 Zwischentitel im Formular ════════════════════════════════════════════
   Eine Überschrift zwischen zwei Feldgruppen — „Ankunft", „Rückflug". Ein
   nacktes <h4> säße ohne Luft davor direkt auf dem vorigen Feld; ein <fieldset>
   mit <legend> wäre die reine Lehre, bringt aber in jedem Browser einen
   eigenen Rahmen und eine eigene Ausrichtung mit, die man erst wieder
   wegräumen muss. Deshalb diese eine Regel.                                  */

.mi-zwischentitel {
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mi-zwischentitel:first-child { margin-top: 0; }

/* ==========================================================================
   22 · ORTE — Hotels, Hallen, Studios
   Als Karten mit Bild, nicht als Tabellenzeilen: Bei einem Ort ist das Bild
   die Hauptinformation. Eine Zeile mit Text sagt nicht, ob das Hotel etwas
   taugt — ein Foto schon.
   ========================================================================== */
.mi-ortkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}

.mi-ortkarte {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-ortkarte:hover { border-color: var(--line-feld); background: var(--bg-sunken); }
.mi-ortkarte:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }

.mi-ortkarte-bild {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 88px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--text-muted);
}
.mi-ortkarte-bild img { width: 100%; height: 100%; object-fit: cover; }
.mi-ortkarte-bild svg { width: 28px; height: 28px; }

.mi-ortkarte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-ortkarte-name {
  font-size: var(--t-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vorschau des Bildes, das von einer fremden Seite kommt. */
.mi-ortkarte-vorschau {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* Trefferliste der Adresssuche. Bewusst schlicht — sie steht nur Sekunden. */
.mi-treffer {
  margin-top: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mi-treffer-zeile {
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.mi-treffer-zeile:first-child { border-top: 0; }
.mi-treffer-zeile:hover { background: var(--cream); }
.mi-treffer-zeile:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: -2px; }


/* ══ 23 Treffer einer Suche ══════════════════════════════════════════════════
   Zwei Kleinigkeiten, die eine Trefferliste erst brauchbar machen: die
   markierte Fundstelle und ein Nebenweg aus der Zeile heraus.                */

/* <mark> bringt in jedem Browser einen grellgelben Grund mit, der neben Gold
   billig aussieht. Hier nur fetter und in Goldbraun — die Fundstelle soll
   auffallen, nicht schreien.                                                 */
.mi-wahl mark,
.mi-tabelle mark {
  background: none;
  color: var(--gold-deep);
  font-weight: 700;
}

/* Ein zweiter Weg aus einer Auswahlkarte heraus, ohne sie auszuwählen.
   Der Klick darf NICHT bis zum <label> durchschlagen — sonst wählt man die
   Person aus, während man nur ihr Profil ansehen wollte.                     */
.mi-wahl-neben {
  margin-left: auto;
  align-self: center;
  flex: none;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--gold-deep);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
}
.mi-wahl-neben:hover { border-color: var(--gold-ui); background: var(--accent-softer); }
.mi-wahl-neben:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ==========================================================================
   23 · GALERIE — mehrere Bilder je Ort, jedes mit Überschrift und Text
   Ein Hotel zeigt sich nicht mit einem Foto, sondern mit Strand, Pool,
   Restaurant und Zimmern. Deshalb Kacheln mit eigenen Feldern statt einer
   Bilderleiste: Was auf der Sedcard steht, wird hier eingetragen.
   ========================================================================== */
.mi-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}

.mi-galerie-kachel {
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
/* Das Titelbild bekommt die warme Fläche — bei zwanzig Kacheln muss auf einen
   Blick sichtbar sein, welches davon in den Listen steht. */
.mi-galerie-kachel.ist-titel {
  background: var(--cream);
  border-color: var(--cream-tief);
}

.mi-galerie-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s-3);
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text-muted);
}
.mi-galerie-bild img { width: 100%; height: 100%; object-fit: cover; }
.mi-galerie-bild svg { width: 28px; height: 28px; }
.mi-galerie-marke { position: absolute; top: var(--s-2); left: var(--s-2); }

/* Feld, das gerade sichert. Kein Ladebalken — nur ein Hauch weniger Deckkraft,
   damit die Zeile nicht springt. */
.mi-galerie-kachel .laeuft { opacity: .55; }

/* Bildauswahl nach dem Webseiten-Import. Vierzig Kandidaten müssen auf einen
   Blick vergleichbar sein, deshalb kleine Kacheln in dichtem Raster. */
.mi-bildwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--s-2);
  max-height: 340px;
  overflow: auto;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}
.mi-bildwahl-kachel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r-xs);
  cursor: pointer;
  background: var(--paper);
}
.mi-bildwahl-kachel img { width: 100%; height: 100%; object-fit: cover; }
.mi-bildwahl-kachel input {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gold-deep);
  cursor: pointer;
}
.mi-bildwahl-kachel:has(input:checked) { border-color: var(--gold-ui); }
.mi-bildwahl-kachel:has(input:checked) img { opacity: .72; }
.mi-bildwahl-kachel:focus-within { border-color: var(--gold-ui); }

/* Das aktuelle Titelbild in der Auswahl. Ohne Markierung klickt man dasselbe
   Bild noch einmal an und wundert sich, dass nichts passiert. */
.mi-bildwahl-kachel.ist-titel { border-color: var(--gold-ui); }
.mi-bildwahl-kachel.ist-titel::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--gold-ui);
  border-radius: inherit;
  pointer-events: none;
}

/* ══ 24 Freigabeschalter ═════════════════════════════════════════════════════
   Ein Kippschalter, kein Häkchen. Beides speichert dasselbe Bit, aber ein
   Häkchen liest sich wie „Option angekreuzt" und ein Schalter wie „steht auf
   an" — und genau das ist die Frage bei einer Freigabe: steht das gerade
   draußen oder nicht? Der Schalter beantwortet sie aus drei Metern Entfernung.

   Aufbau:  <label class="mi-schalter"><input type="checkbox">
              <span class="mi-schalter-bahn"></span>
              <span class="mi-schalter-text">…</span></label>

   Die Bahn ist ein <span> und nicht das Eingabefeld selbst: Ein gestyltes
   <input> verliert je nach Browser seine Tastaturbedienung. So bleibt das
   echte Feld erhalten, liegt nur unsichtbar darunter. */

.mi-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  min-height: 44px;
  user-select: none;
}
.mi-schalter input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mi-schalter-bahn {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mi-schalter-bahn::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease);
}
.mi-schalter input:checked + .mi-schalter-bahn {
  background: var(--gold);
  /* Der Rahmen traegt die Form gegen den weissen Grund (3,26:1) — die helle
     Flaeche allein schafft 1,58:1. */
  border-color: var(--gold-ui);
}
/* Der Knopf ist weiss. Auf dem hellen Gold waere er 1,44:1 und man saehe
   nicht mehr, auf welcher Seite er steht — also bekommt er eine Kante.
   Am 03.09.2026 beim Umstellen auf das helle Gold aufgefallen. */
.mi-schalter input:checked + .mi-schalter-bahn::after {
  box-shadow: 0 0 0 1px var(--gold-ui), var(--sh-sm);
}
.mi-schalter input:checked + .mi-schalter-bahn::after { transform: translateX(22px); }
.mi-schalter input:focus-visible + .mi-schalter-bahn {
  outline: 2px solid var(--gold-ui);
  outline-offset: 2px;
}
.mi-schalter input:disabled + .mi-schalter-bahn { opacity: .5; cursor: wait; }

.mi-schalter-text { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.mi-schalter-text small {
  display: block;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Wenn die Freigabe steht, soll die Karte das zeigen, ohne dass man den
   Schalter sucht. */
.mi-freigabe.ist-offen { border-color: var(--gold-ui); }
.mi-freigabe-adressen {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-soft);
  display: grid;
  gap: var(--s-2);
  word-break: break-all;
}


/* ══ 24 Text in Signalfarbe ══════════════════════════════════════════════════
   .mi-gefahr gab es bis zum 28.08.2026 nur als .mi-dd-eintrag.mi-gefahr — also
   ausschliesslich innerhalb eines Dropdowns. Benutzt wurde die Klasse aber
   auch freistehend: an abgelaufenen Datumsangaben in der Formularliste und an
   der Systemzustands-Zeile der Uebersicht. Dort tat sie schlicht nichts, und
   nichts zu tun sieht genauso aus wie „alles in Ordnung". Genau der Fall, in
   dem eine fehlende Regel gefaehrlich wird.                                   */

.mi-gefahr { color: var(--danger); }
.mi-warnung { color: var(--warn); }
.mi-ok { color: var(--ok); }


/* ══ 25 Galerie: Bilder und Videos ═══════════════════════════════════════════
   Die Medien eines Kuenstlers oder Sponsors im Kontaktdialog. Bewusst als
   Raster mit fester Zeilenhoehe: Fotos aus Kameras haben jedes Format, und
   eine Liste, in der jede Zeile anders hoch ist, laesst sich nicht ueberfliegen.
   object-fit macht daraus einen ruhigen Streifen, ohne die Bilder zu zerren.  */

.mi-medien {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.mi-medium {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mi-medium-bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunken);
  display: grid;
  place-items: center;
}
.mi-medium-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-medium-bild svg { width: 28px; height: 28px; color: var(--text-muted); }

/* „Video" als Marke statt eines Abspielsymbols mitten im Bild: Ein Dreieck
   verspricht, dass hier etwas losgeht — hier geht aber nichts los, das ist
   eine Verwaltungsansicht.                                                    */
.mi-medium-marke {
  position: absolute;
  left: var(--s-2); top: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  background: rgba(13, 13, 12, .78);
  color: var(--text-on-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mi-medium figcaption { padding: var(--s-2); display: flex; flex-direction: column; gap: 4px; }

.mi-medium-knoepfe {
  display: flex;
  gap: var(--s-1);
  padding: 0 var(--s-2) var(--s-2);
  margin-top: auto;
  flex-wrap: wrap;
}
.mi-medium-knoepfe .mi-btn { padding-left: var(--s-2); padding-right: var(--s-2); }
.mi-medium-knoepfe .mi-btn[disabled] { opacity: .35; cursor: default; }

/* Ein Eingabefeld in einer Karte von 150 px Breite. Die normale Hoehe von
   44 px waere hier die Haelfte der Karte.                                      */
.mi-input-klein {
  padding: 6px var(--s-2);
  font-size: var(--t-sm);
  min-height: 0;
}

/* Dasselbe fuer ein Auswahlfeld. Ergaenzt am 01.09.2026: Die Klasse stand
   zuerst NUR innerhalb von .mi-sponsor-aktionen — also freistehend gar nicht,
   genau wie .mi-gefahr am 28.08.2026 nur innerhalb von Dropdowns existierte.
   Eine Klasse mit Vorfahren-Selektor ist keine Klasse des Systems.           */
.mi-select-klein {
  padding: 6px var(--s-2);
  font-size: var(--t-sm);
  min-height: 0;
  height: auto;
}

/* ══ 25 Außenschau — was nach außen ginge ════════════════════════════════════
   Sitzt über dem Freigabeschalter und beantwortet die eine Frage, die man sich
   davor stellt: Ist überhaupt schon genug da?

   Die Nullen stehen absichtlich in Warnfarbe, aber ohne Ausrufezeichen. Eine
   Null ist kein Fehler — beim Ergebnis eines Jahrgangs, dessen Finale erst
   kommt, ist sie der einzig richtige Wert. */

.mi-aussenschau {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.mi-aussenschau-titel {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.mi-aussenschau-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-4);
}
.mi-aussenschau-posten { text-align: center; }
.mi-aussenschau-zahl {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--text);
}
.mi-aussenschau-posten.ist-leer .mi-aussenschau-zahl { color: var(--warn); }
.mi-aussenschau-name {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 2px;
}
.mi-aussenschau-zusatz {
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-top: 1px;
}
.mi-aussenschau-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.mi-aussenschau-hinweis svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--info);
}


/* ══ 26 Sponsoren: Logokachel, Gruppe, Stufen ════════════════════════════════
   DIE KACHEL IST DER GANZE TRICK.

   Sechs Logos aus einem Markenhaus kamen am 01.09.2026 herein: zwei gestapelt,
   vier liegend, eines in Petrol, zwei in Schwarz, zwei in Mint. Nebeneinander
   gelegt sah das aus wie ein Zufallsfund — jedes in anderer Groesse, jedes auf
   anderer Hoehe. Nicht weil die Dateien schlecht waeren, sondern weil ein Logo
   ohne Bezugsflaeche keine Groesse hat.

   Also bekommt jedes eine: gleiche Kachel, gleiche Hoehe je Stufe, Logo
   hineingepasst statt gestreckt. Die Hoehe kommt aus der Stufe und steht als
   --logo-hoehe an der Kachel — das ist eine Groesse, keine Farbe; Farben
   bleiben ausschliesslich hier in dieser Datei.

   DER GRUND IST WEISS, IMMER.
   Zwei der sechs Logos sind reines Schwarz. Auf --dark verschwinden sie
   restlos — im Screenshot sieht die Stelle dann aus wie eine leere Karte, und
   niemand kommt auf die Idee, dass dort ein Logo steht. Solange es keine
   hellen Fassungen gibt, liegt jedes Logo auf Papier.

   Die Kachel hat eine feste Hoehe und KEIN aspect-ratio als einzige Quelle.
   Am 28.08.2026 war ein Fortschrittsbalken seit jeher 0 x 0 Pixel gross, weil
   die Hoehe an einer Bedingung hing, die nie eintrat. Eine Hoehe, die immer
   gilt, kann das nicht passieren.                                            */

.mi-sponsor-gruppe { margin-bottom: var(--s-8); }
.mi-sponsor-gruppe:last-child { margin-bottom: 0; }

.mi-sponsor-gruppe-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.mi-sponsor-gruppe-name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--text);
}
.mi-sponsor-gruppe-platz {
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.mi-sponsor-gruppe-zahl {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--text-muted);
}

.mi-sponsor-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}

.mi-sponsorkarte {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mi-sponsorkarte:hover { border-color: var(--line-feld); box-shadow: var(--sh-sm); }
.mi-sponsorkarte:focus-within { border-color: var(--gold-ui); }

/* Die Kachel selbst. Hoehe immer gesetzt, Breite immer voll — was auch immer
   an Bild hineinkommt, die Flaeche steht schon.                              */
.mi-logokachel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--logo-hoehe);
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mi-logokachel img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Kein Logo hinterlegt. Nicht leer lassen — eine leere Kachel liest sich als
   Ladefehler, ein Zeichen mit Wort als Aufgabe.                              */
.mi-logokachel-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: var(--t-xs);
}
.mi-logokachel-leer svg { width: 22px; height: 22px; }

.mi-sponsor-name {
  font-weight: 650;
  font-size: var(--t-base);
  color: var(--text);
  line-height: var(--lh-snug);
}
.mi-sponsor-zeile {
  font-size: var(--t-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.mi-sponsor-jahre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.mi-sponsor-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}
.mi-sponsor-aktionen .mi-select-klein {
  flex: 1 1 120px;
  min-width: 110px;
}

/* Stufe fehlt oder wurde geloescht. Auffaellig, aber nicht als Fehler — die
   Zuordnung ist in Ordnung, nur ihr Rang ist verwaist.                       */
.mi-sponsor-verwaist {
  border-color: var(--warn);
  background: var(--warn-soft);
}

/* -- Stufen bearbeiten (Einstellungen) ------------------------------------- */

.mi-stufen-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mi-stufenzeile {
  display: grid;
  grid-template-columns: 1fr 1fr 92px auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.mi-stufenzeile-voll { grid-column: 1 / -1; }
.mi-stufenzeile-knoepfe {
  display: flex;
  gap: var(--s-1);
  align-items: center;
}
.mi-stufenzeile-schluessel {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.mi-stufen-leistung {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-2);
}
.mi-stufen-leistung:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .mi-stufenzeile { grid-template-columns: 1fr; }
}


/* ==========================================================================
   24 · BILDER — die Verwaltung des Bildbestands

   Aufbau abgeschaut vom File Manager in Company Solution: links die Ordner,
   oben die Filter, in der Mitte die Kacheln, rechts der Schub mit den
   Angaben zum ausgewaehlten Bild. Der Aufbau ist dort dreimal benutzt und
   traegt.

   NEU GEBAUT wird hier nur, was es noch nicht gibt. Das Kachelraster ist
   .mi-galerie aus Abschnitt 23, der Speicherbalken .mi-balken aus 16, die
   Zustandsmarken .mi-pille aus 10. Wer hier eine fuenfte Kachelvariante
   ergaenzt, hat den Sinn des Systems verfehlt.
   ========================================================================== */

/* Zwei Spalten: Ordner und Inhalt. Der Schub liegt darueber, nicht daneben —
   sonst braeuchte die Mitte bei geoeffnetem Schub eine dritte Breite, und das
   Kachelraster wuerde bei jedem Klick umbrechen. */
.mi-bilder-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.mi-bilder-seite {
  position: sticky;
  top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.mi-bilder-ordner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}
.mi-bilder-ordner:hover { background: var(--bg-sunken); }
.mi-bilder-ordner.active { background: var(--cream); color: var(--gold-deep); font-weight: 600; }
.mi-bilder-ordner svg { width: 15px; height: 15px; flex: none; opacity: .55; }
.mi-bilder-ordner.active svg { opacity: 1; }
.mi-bilder-ordner-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-bilder-ordner-zahl {
  flex: none;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Die Ablageflaeche. Sie ist zugleich der Knopf zum Auswaehlen — ein
   getrennter Knopf daneben waere eine zweite Bedienung fuer dieselbe Sache. */
.mi-ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
  border: 1px dashed var(--line-feld);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-ablage:hover,
.mi-ablage:focus-visible { border-color: var(--gold-ui); background: var(--cream); }
.mi-ablage.ist-ueber { border-color: var(--gold-ui); background: var(--cream); color: var(--gold-deep); }
.mi-ablage svg { width: 26px; height: 26px; opacity: .5; }
.mi-ablage-titel { font-weight: 600; color: var(--text); }

/* Marken auf der Kachel. Absolut ueber dem Bild, damit sie das Raster nicht
   auseinanderziehen. */
.mi-bildkachel-marken {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
}
.mi-bildkachel-name {
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-bildkachel-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Der Schub. Ueber dem Inhalt, von rechts. */
.mi-bildschub {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.mi-bildschub.open { transform: translateX(0); }
.mi-bildschub-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line);
}
.mi-bildschub-titel { flex: 1; min-width: 0; }
.mi-bildschub-koerper { flex: 1; overflow-y: auto; padding: var(--s-6); }
.mi-bildschub-fuss {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
}

/* Die Vorschau im Schub trägt den Fokuspunkt. Klicken setzt ihn. */
.mi-fokus {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  cursor: crosshair;
}
.mi-fokus img { display: block; width: 100%; height: auto; }
.mi-fokus-punkt {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(13, 13, 12, .35);
  pointer-events: none;
}

/* Angabenliste im Schub. Kein <table> — es sind Paare, keine Daten. */
.mi-angaben { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); }
.mi-angaben dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  white-space: nowrap;
}
.mi-angaben dd {
  margin: 0;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.mi-bilder-blaettern { justify-content: center; margin-top: var(--s-5); }

/* Der Serverplatz-Block. Steht direkt unter dem dunklen Kopf. */
.mi-bilder-platte { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }
.mi-bilder-platte .mi-balken { margin: var(--s-3) 0; }
.mi-bilder-platte-ordner { gap: var(--s-2); }

/* Eine reine BESCHRIFTUNG, kein Bedienelement — deshalb nicht .mi-chip:
   der hat 44 px Mindesthoehe als Beruehrungsflaeche, einen Hover-Zustand und
   aria-pressed. Alles drei ist falsch fuer etwas, das man nur liest. */
.mi-marke-datei {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 2px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  font-size: var(--t-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.mi-marke-datei strong { color: var(--text); font-weight: 600; }

/* Die zweite Ueberschrift in der Seitenleiste braucht Luft nach oben —
   sonst klebt „Bestand" am letzten Profil und liest sich als dessen Teil. */
.mi-bilder-nav-zweit { margin-top: var(--s-4); }

/* Eine Quelle, die nicht antwortet. Kein Knopf — es gibt nichts zu oeffnen. */
.mi-bilder-ordner-kaputt { color: var(--danger); cursor: default; }
.mi-bilder-ordner-kaputt:hover { background: none; }
.mi-bilder-ordner-kaputt svg { opacity: 1; }

/* Die Liste „Was dieser Server kann" unter Einstellungen. Als <ul> gebaut,
   weil es eine Aufzaehlung IST — deshalb braucht sie den Listenschmuck weg. */
.mi-be-server { list-style: none; margin: 0; padding: 0; }
.mi-be-server > li { gap: var(--s-3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .mi-bilder-layout { grid-template-columns: minmax(0, 1fr); }
  .mi-bilder-seite { position: static; flex-direction: row; flex-wrap: wrap; }
  .mi-bilder-ordner { width: auto; }
}


/* ══ 27 Kacheln: ein Bereich, eine Fläche ════════════════════════════════════
   Die Einstellungen waren drei Karten untereinander. Bei drei geht das. Bei
   fünfzehn ist eine Liste von Karten kein Ueberblick mehr, sondern eine Rolle
   Papier — man scrollt an dem vorbei, was man sucht.

   Eine Kachel je Rubrik. Gleiche Groesse, gleiche Struktur: Zeichen, Name,
   ein Satz, darunter wie viele Einstellungen darin liegen. Das Raster fuellt
   sich automatisch auf — eine neue Rubrik ist eine Zeile im Verzeichnis, kein
   Layout-Eingriff.

   WARUM DIE KACHEL EIN <button> IST UND KEIN <div> MIT KLICK
   Ein div mit Klick erreicht die Tastatur nicht und wird von einer
   Vorlesesoftware nicht als bedienbar angesagt. Der Fokusrahmen kommt aus
   dem System und wird hier NICHT entfernt.

   Die Kachelhoehe ist gesetzt und nicht aus dem Inhalt gerechnet: Ein Satz
   mehr im Text darf die Nachbarkachel nicht verschieben. */

.mi-kachelgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* Alle Kacheln einer Reihe gleich hoch — sonst haengt eine mit zwei Zeilen
     Text 18 px tiefer als ihre Nachbarin, und das Raster sieht aus wie
     ausgefranst. Am 01.09.2026 im Browser gemessen: 216 gegen 198 px.
     grid-auto-rows allein genuegt nicht, weil ein <button> das Strecken der
     Zelle nicht von selbst uebernimmt — deshalb zusaetzlich height am Kind. */
  grid-auto-rows: 1fr;
  gap: var(--s-4);
}

.mi-kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 168px;
  height: 100%;
  padding: var(--s-5);
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.mi-kachel:hover {
  border-color: var(--line-feld);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.mi-kachel:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }
.mi-kachel:active { transform: none; }

/* Das Zeichen sitzt in einer warmen Fläche — der einzige Farbfleck der Kachel.
   Ohne sie steht ein graues Symbol im Weissen und die Kachel wirkt unfertig. */
.mi-kachel-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--gold-deep);
}
.mi-kachel-symbol svg { width: 24px; height: 24px; }

.mi-kachel-titel {
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--text);
  line-height: var(--lh-snug);
}
.mi-kachel-text {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.mi-kachel-zahl {
  margin-top: auto;
  padding-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-muted);
}

/* -- Volltextsuche über die Einstellungen ---------------------------------- */

.mi-suchkopf {
  margin-bottom: var(--s-6);
}
.mi-suchkopf .mi-suche { max-width: 520px; }

.mi-treffer-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Ein Treffer ist eine EINZELNE Einstellung, nicht die Rubrik. Wer „Imagick"
   sucht, will nicht die Kachel „System" finden, sondern die Zeile darin. */
.mi-esuche-treffer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-esuche-treffer:hover { border-color: var(--line-feld); background: var(--bg-sunken); }
.mi-esuche-treffer:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }
.mi-esuche-treffer svg { width: 18px; height: 18px; flex: none; color: var(--gold-ui); }

.mi-esuche-treffer-text { flex: 1 1 auto; min-width: 0; }
.mi-esuche-treffer-titel { font-weight: 600; color: var(--text); }
.mi-esuche-treffer-weg   { font-size: var(--t-xs); color: var(--text-muted); }

/* Eigene Regel statt .mi-wahl mark: Diese Klasse gilt nur innerhalb von
   .mi-wahl, waere hier also gar nicht vorhanden. Genau so ist am 28.08.2026
   .mi-gefahr ins Leere gelaufen. */
.mi-esuche-treffer mark {
  background: none;
  color: var(--gold-deep);
  font-weight: 700;
}

/* Zurück aus einer Rubrik. Kein Pfeil aus Zeichen gebaut — das Symbol dreht
   sich per CSS, damit es dieselbe Strichstaerke hat wie alles andere. */
.mi-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-soft);
  background: none;
  border: 0;
  padding: var(--s-1) 0;
  cursor: pointer;
}
.mi-zurueck:hover { color: var(--text); }
.mi-zurueck:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }
.mi-zurueck svg { width: 16px; height: 16px; transform: rotate(180deg); }

/* ══ 28 Suche in einem Abschnitt ═════════════════════════════════════════════
   Die schmale Leiste zwischen Kartenkopf und Kartenkoerper. Nicht .mi-leiste:
   Die ist die grosse Filterleiste einer ganzen Seite und bringt zu viel
   Gewicht, wenn sie dreimal auf derselben Seite steht.

   Sie ist per [hidden] weg, solange die Liste kurz ist — und sie wird NICHT
   mit der Liste zusammen neu gezeichnet, sonst verliert das Feld beim Tippen
   den Fokus. Siehe core/ui.js, suchleiste(). */

.mi-abschnitt-suche {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-sunken);
}
.mi-abschnitt-suche[hidden] { display: none; }
.mi-abschnitt-suche .mi-suche { flex: 1 1 auto; max-width: 380px; }
.mi-abschnitt-suche-zahl {
  font-size: var(--t-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Kopfzeile im Bearbeiten-Dialog: Logokachel neben ihren Knoepfen. Die Kachel
   ist sonst so breit wie ihre Zelle — hier soll sie eine feste Groesse haben,
   damit der Dialog nicht bei jedem Logo anders aussieht.                      */
.mi-sponsor-bearbeiten {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.mi-sponsor-bearbeiten .mi-logokachel { width: 200px; flex: none; }
.mi-sponsor-bearbeiten .mi-reihe { flex: 1 1 200px; }

/* ══ 29 Rundmails: Vorschau, Listenzuordnung, Schritte ═══════════════════════
   Neu am 03.09.2026 fuer den Bereich Mailings.

   WARUM DIE VORSCHAU EIN IFRAME BRAUCHT UND KEIN div
   Die Mailvorlage bringt ihr eigenes <style> mit und arbeitet mit Tabellen,
   bgcolor und festen Breiten. In die Seite eingesetzt wuerde sie das
   Design-System ueberschreiben — und, schlimmer, das Design-System wuerde
   SIE ueberschreiben, und man saehe eine Vorschau, die mit der Mail nichts
   zu tun hat. Der Rahmen faellt deshalb ans iframe, nicht an den Inhalt.

   Die Breite 640 px ist die Breite der Vorlage. Schmaler gezeigt waere die
   Vorschau eine Aussage ueber ein Postfach, das es nicht gibt.              */

.mi-mailvorschau {
  width: 100%;
  height: 620px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #eeeae2;
  display: block;
}

/* Die Textfassung. Nichtproportional, weil es genau darum geht: zu sehen,
   wie die Mail ohne Layout aussieht.                                        */
.mi-mailtext {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--text-soft);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Eine Zeile je Zielgruppe in der Listenzuordnung: Name links, Zahlen in der
   Mitte, Auswahl der Brevo-Liste rechts. Kein Raster mit festen Spalten —
   „National Directors" und „Jury" sind unterschiedlich lang, und eine feste
   Spalte waere entweder zu eng oder halb leer.                              */
.mi-listenzeile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.mi-listenzeile:first-child { border-top: 0; }
.mi-listenzeile-text { flex: 1 1 220px; min-width: 0; }
.mi-listenzeile-name { font-weight: 600; font-size: var(--t-base); color: var(--text); }
.mi-listenzeile-zweck { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.mi-listenzeile-zahl {
  flex: none;
  font-size: var(--t-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.mi-listenzeile-wahl { flex: 0 1 280px; min-width: 200px; }

/* Die zweite Zahl, die die erste erklaert: „0 in dieser Ausgabe — ueber alle
   Ausgaben waeren es 64". Sie steht UNTER der Zahl und nicht daneben, weil die
   Zeile bei acht Verteilern sonst auseinanderlaeuft.
   white-space wird ausdruecklich zurueckgesetzt: .mi-listenzeile-zahl steht
   auf nowrap, und ein ganzer Satz darin waere eine Zeile ohne Ende.          */
/* Ein Satz im Kartenkopf, der eine Bedienregel festhaelt — nicht laut wie eine
   Stoerung, aber auch nicht so leise wie Fliesstext. Kommt vor .mi-listenzeile-
   hinweis, weil er zur Karte gehoert und nicht zur Zeile.                     */
.mi-hinweis-fest {
  margin-top: var(--s-2);
  padding-left: var(--s-3);
  border-left: 2px solid var(--gold);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--text-muted);
}
.mi-hinweis-fest strong { color: var(--text); font-weight: 600; }

.mi-listenzeile-hinweis {
  margin-top: 4px;
  font-size: var(--t-xs);
  line-height: 1.35;
  white-space: normal;
  max-width: 34ch;
  text-align: right;
}

/* Der Weg einer Rundmail: ausfuellen, abgleichen, uebergeben. Drei Punkte,
   die sagen, wo man steht — und was als Naechstes kommt. .mi-schritte gibt es
   schon, sie ist aber der breite Assistentenkopf des Formulars; hier soll es
   in eine Kartenkopfzeile passen.                                           */
.mi-mailschritte { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mi-mailschritt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--t-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.mi-mailschritt svg { width: 15px; height: 15px; flex: none; }
.mi-mailschritt[data-stand='fertig'] {
  border-color: rgba(47, 107, 74, .35);
  background: var(--ok-soft);
  color: var(--ok);
}
.mi-mailschritt[data-stand='dran'] {
  border-color: var(--gold-ui);
  background: var(--accent-soft);
  color: var(--gold-tief);
  font-weight: 600;
}

/* Die Liste derer, die keine Adresse haben. Sie steht bewusst offen da und
   nicht hinter einem Aufklapper: Wer sie zuklappt, sieht sie nie wieder.    */
.mi-ohne-adresse {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow: auto;
}
.mi-ohne-adresse li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.mi-ohne-adresse li:last-child { border-bottom: 0; }
.mi-ohne-adresse span { color: var(--text-muted); }

/* Vorschau und Textfassung nebeneinander. Kein .mi-feld-reihe: Die verteilt
   den Platz gleichmaessig, und der Rahmen der Mail war damit 220 px breit —
   bei einer Vorlage, die 640 px misst. Am 03.09.2026 im Browsertest
   nachgemessen; im Bild sah es aus wie eine schmale Spalte, nicht wie ein
   Fehler.

   Die erste Spalte bekommt deshalb die Breite der Vorlage plus Rahmen, die
   zweite nimmt, was uebrig ist. Ist die Seite zu schmal, stapeln sie —
   nebeneinander waeren dann beide falsch.                                    */
.mi-vorschau-paar {
  display: grid;
  grid-template-columns: minmax(0, 672px) minmax(240px, 1fr);
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 1180px) {
  .mi-vorschau-paar { grid-template-columns: 1fr; }
}

/* ══ 30 Kontakte: Unterpunkte, Personenzeile, Profilbild ═════════════════════
   Neu am 05.09.2026. Der Bereich Kontakte ist bei 90 Ländern der längste im
   Haus — er bekommt eine zweite Ebene in der Navigation und eine Liste, die
   ein Mensch überfliegen kann.

   WARUM NICHT WEITER DIE TABELLE
   Eine Tabelle beantwortet „vergleiche Spalte für Spalte". Beim Suchen einer
   PERSON ist die Frage aber eine andere: „wo ist Maria". Dafür trägt ein
   Gesicht weiter als vier Spalten — und ein Name, der groß genug ist, um ihn
   im Vorbeiscrollen zu lesen. Die Tabelle bleibt unter „Alle" bestehen; dort
   ist der Vergleich der Zweck.                                               */

/* -- Unterpunkte der Navigation ------------------------------------------- */
.mi-nav-unterliste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px;
  padding-left: 30px;                 /* auf Höhe des Symboltexts darüber */
}
.mi-nav-unterliste[hidden] { display: none; }
.mi-nav-unter {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: 0;
  border-left: 2px solid var(--line-dark);
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  /* Seit dem 08.09.2026 ein <a> und keine Schaltflaeche mehr, damit sich ein
     Bereich im neuen Tab oeffnen laesst. Ohne diese Zeile zoege der Browser
     jedem Unterpunkt einen Strich unter den Text. */
  text-decoration: none;
  color: var(--text-on-dark-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mi-nav-unter:hover { color: var(--text-on-dark); border-left-color: var(--gold-ui); }
.mi-nav-unter.active {
  color: var(--gold-hell);
  border-left-color: var(--gold-hell);
  font-weight: 600;
}
.mi-nav-unter:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: -2px; }

/* -- Das Profilbild ------------------------------------------------------- */
/* Rund. Ein quadratisches Bild neben einem Namen sieht aus wie ein Beleg,
   ein rundes wie ein Mensch. Der Rahmen trägt die Form auch dann, wenn das
   Bild hell ist und der Grund ebenfalls.                                     */
.mi-portrait {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mi-portrait-gross { width: 112px; height: 112px; }

/* Ohne Bild: die Initialen. Nicht ein graues Platzhalter-Symbol — das sieht
   bei fünfzig Zeilen aus wie ein Fehler. Initialen sehen aus wie Absicht.    */
.mi-portrait-leer {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--gold-tief);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--gold-ui);
}
.mi-portrait-gross.mi-portrait-leer { font-size: 38px; }

/* Ein Bild, das noch auf Freigabe wartet, wird gezeigt — aber gekennzeichnet.
   Verstecken wäre die schlechtere Antwort: Dann wüsste niemand, dass es da
   ist, und die Person wartet vergeblich.                                     */
.mi-portrait-wartet { box-shadow: inset 0 0 0 2px var(--gold-ui); }

/* -- Eine Person in einer Liste ------------------------------------------- */
.mi-personenliste { display: flex; flex-direction: column; }
.mi-personenzeile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.mi-personenzeile:first-child { border-top: 0; }
.mi-personenzeile:hover { background: var(--bg-sunken); }
.mi-personenzeile:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.mi-personenzeile-text { flex: 1 1 auto; min-width: 0; }
.mi-personenzeile-name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.mi-personenzeile-zweit {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-top: 1px;
  overflow-wrap: anywhere;
}
.mi-personenzeile-rechts {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-muted);
  font-size: var(--t-sm);
}
@media (max-width: 640px) { .mi-personenzeile-rechts { display: none; } }

/* Die Zwischenüberschrift einer Gruppe. Klebt beim Scrollen oben fest —
   sonst weiß man nach zwanzig Zeilen nicht mehr, in welcher Gruppe man ist. */
.mi-gruppenkopf {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-tief);
}
.mi-gruppenkopf-zahl {
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--text-muted);
}

/* -- Der Kopf der Detailseite --------------------------------------------- */
.mi-personenkopf {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.mi-personenkopf-text { flex: 1 1 260px; min-width: 0; }
.mi-personenkopf-bild { flex: none; text-align: center; }
.mi-personenkopf-bild .mi-btn { margin-top: var(--s-3); }
/* Die Knopfgruppe ist flex und richtete deshalb links aus, waehrend das
   runde Bild darueber mittig stand. 06.09.2026. */
.mi-personenkopf-bild .mi-btn-gruppe { justify-content: center; }

/* -- Ein Feld in der Detailansicht ---------------------------------------- */
/* Beschriftung klein darüber, Wert darunter. Nicht nebeneinander: Bei
   „Straße und Hausnummer" gegen „PLZ" wäre die Spalte entweder zu breit
   oder der Wert zu schmal.                                                   */
.mi-angabe-gitter {
  display: grid;
  /* auto-FIT, nicht auto-fill, und 170 statt 220 — 06.09.2026.
     Mit auto-fill blieben leere Spalten stehen: Die fuenfte Angabe im
     Personenkopf (Zugang) rutschte in eine zweite Reihe und stand dort allein
     neben drei Luecken. auto-fit klappt die leeren Spuren zusammen, die
     vorhandenen fuellen die Breite. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-5) var(--s-6);
}
.mi-angabe-label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.mi-angabe-wert { font-size: var(--t-base); color: var(--text); overflow-wrap: anywhere; }
.mi-angabe-wert a { color: var(--accent-text); }
.mi-angabe-leer { color: var(--text-muted); }

/* Person in einer Tabellenzelle: kleines rundes Bild neben dem Namen. Der
   Name bleibt der Anker der Zeile — das Bild steht davor und nicht darüber,
   damit die Zeile nicht doppelt so hoch wird.                                */
.mi-zelle-person { display: flex; align-items: center; gap: var(--s-3); }
.mi-zelle-person .mi-portrait { width: 32px; height: 32px; font-size: 12px; }
.mi-zelle-person > span:last-child { min-width: 0; }
.mi-zelle-person .mi-muted { display: block; font-size: var(--t-xs); }
.mi-gruppenkopf-name { min-width: 0; overflow-wrap: anywhere; }

/* Ein Feld der Filterleiste, das nach rechts rueckt. NICHT .mi-leiste-rechts:
   Die ist selbst ein Flex-Behaelter in Zeilenrichtung und wuerde die
   Spaltenrichtung von .mi-leiste-feld ueberschreiben — Beschriftung und
   Bedienelement staenden dann nebeneinander statt untereinander.            */
.mi-leiste-feld-rechts { margin-left: auto; }

/* ══ 31 Anmeldeschirm ════════════════════════════════════════════════════════
   Nach dem Entwurf vom 05.09.2026 (BRIEFING NEUER CHAT/Login screen/).
   Uebernommen wurde der Aufbau: Bild ueber die ganze Flaeche, Anmeldekarte
   links, Ausgabe und Ort rechts oben, Hauptsponsoren im Fuss der Karte.

   DREI DINGE SIND GEGENUEBER DEM ENTWURF ANDERS — und zwar mit Grund:

   1. SCHRIFTEN. Der Entwurf laedt Cormorant Garamond und Manrope von
      fonts.bunny.net. Hier stehen Lora und Inter, die ohnehin im Plugin
      liegen: Lora ist wie Cormorant eine Serife, Inter wie Manrope eine
      Grotesk. Damit haengt die Anmeldeseite an keinem fremden Server — der
      sonst die IP-Adresse jedes Besuchers saehe und bei einem Ausfall die
      Seite mit Ersatzschrift zeigte.

   2. DER KNOPF traegt DUNKLEN Text. Im Entwurf steht weisse Schrift auf
      goldenem Verlauf — das ist im Projekt dreimal gebrochen worden und
      dreimal erst durch Messen aufgefallen (zuletzt die Mailvorlage mit
      3,06:1). Hier gilt dieselbe Regel wie ueberall: dunkler Text auf Gold.

   3. FARBEN aus dem Design-System statt eigener. Der Entwurf bringt --gold
      #aa7a2c und --gold-dark #78511c mit; das System hat mit --gold-ui und
      --gold-tief praktisch dieselben Werte und dazu die gemessenen
      Kontraste.                                                              */

.mi-login {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-columns: clamp(380px, 28vw, 500px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(24px, 4vh, 48px) clamp(24px, 4.7vw, 76px);
  background: var(--cream-tief);
}

/* -- Das Bild ------------------------------------------------------------- */
/* position: fixed, damit es beim Scrollen der Karte stehen bleibt. Auf einem
   Telefon ist die Karte hoeher als der Schirm, und ein mitscrollendes Bild
   wuerde unten mit einer Kante enden.                                        */
.mi-login-bild,
.mi-login-schleier {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mi-login-bild { z-index: -3; display: block; }
.mi-login-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Zwei Verlaeufe: links dunkler, damit die Karte steht, und unten dunkler,
   damit der Fussbereich nicht in einem hellen Himmel verschwindet.           */
.mi-login-schleier {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(29, 22, 15, .18) 0%, transparent 47%),
    linear-gradient(180deg, rgba(20, 15, 10, .03) 48%, rgba(20, 15, 10, .2) 100%);
}

/* -- Die Karte ------------------------------------------------------------ */
.mi-login-karte {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: 100%;
  max-height: calc(100svh - 48px);
  overflow: auto;
  padding: clamp(26px, 3.1vw, 48px);
  border: 1px solid rgba(190, 153, 83, .32);
  border-radius: var(--r-lg);
  background: rgba(255, 253, 249, .965);
  box-shadow: 0 28px 80px rgba(36, 24, 10, .2);
  backdrop-filter: blur(16px);
  scrollbar-width: thin;
}

.mi-login-marke { width: min(100%, 340px); margin: 0 auto var(--s-5); }
.mi-login-marke img { display: block; width: 100%; height: auto; }

.mi-login-titel {
  margin: 0;
  color: var(--gold-tief);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 2.8vw, 3.1rem);
  font-weight: 500;
  line-height: .98;
  text-align: center;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.mi-login-vorspann {
  margin: var(--s-3) 0 var(--s-8);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.25;
  text-align: center;
}

/* -- Felder --------------------------------------------------------------- */
.mi-login-feld + .mi-login-feld { margin-top: 17px; }
.mi-login-feld > label {
  display: block;
  margin: 0 0 var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
}
.mi-login-schale { position: relative; }
.mi-login-schale svg.mi-login-symbol {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
/* 54 px hoch: Auf einem Telefon ist alles unter 44 px schwer zu treffen, und
   ein Anmeldefeld trifft man mit dem Daumen.                                 */
.mi-login-schale .mi-input { height: 54px; padding-left: 50px; padding-right: 50px; }

.mi-login-auge {
  position: absolute;
  top: 50%;
  right: var(--s-2);
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  transform: translateY(-50%);
}
.mi-login-auge:hover { background: var(--accent-softer); color: var(--gold-tief); }
.mi-login-auge svg { width: 20px; height: 20px; }

.mi-login-zeile { display: flex; justify-content: flex-end; margin: var(--s-3) 0 var(--s-6); }
.mi-login-zeile a { color: var(--gold-deep); font-size: var(--t-sm); text-underline-offset: 4px; }

/* Der Knopf. Der Verlauf ist --gold-schimmer aus dem System, der Text DUNKEL
   — weisser Text auf Gold ist im Projekt verboten und misst hier 2,4:1.      */
.mi-login-knopf {
  position: relative;
  width: 100%;
  min-height: 55px;
  border: 1px solid var(--gold-ui);
  border-radius: var(--r-sm);
  background: var(--gold-schimmer);
  background-size: 180% 100%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(124, 80, 18, .18);
  transition: background-position var(--dur-slow) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.mi-login-knopf:hover { background-position: 100% 0; transform: translateY(-1px); }
.mi-login-knopf:active { transform: translateY(0); }
.mi-login-knopf[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Ein Hinweiskasten direkt ueber dem Knopf braucht Luft. Ohne diese Regel klebt
   er am Knopf — sichtbar im Einladungsschritt „Dein Passwort steht".
   Als Nachbarregel und nicht als margin-bottom am Hinweis selbst: In Dialogen
   und Tafeln steht derselbe Kasten ohne Knopf darunter und soll dort nichts
   verschieben. */
.mi-hinweis + .mi-login-knopf,
.mi-stoerung + .mi-login-knopf { margin-top: var(--s-6); }

.mi-login-sicher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: 17px 0 0;
  color: var(--text-muted);
  font-size: var(--t-xs);
}
.mi-login-sicher svg { width: 17px; height: 17px; color: var(--gold-ui); }

/* -- Hauptsponsoren ------------------------------------------------------- */
.mi-login-sponsoren { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.mi-login-sponsoren h2 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 13px;
  color: var(--gold-tief);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mi-login-sponsoren h2::before,
.mi-login-sponsoren h2::after { width: 100%; height: 1px; background: var(--line); content: ''; }

/* auto-fit statt fester sechs Spalten: Bei drei Sponsoren stuenden sonst drei
   leere Zellen daneben, und die Logos waeren halb so gross wie noetig.       */
.mi-login-sponsorliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-login-sponsor {
  display: grid;
  min-width: 0;
  height: 40px;
  place-items: center;
  border-radius: var(--r-xs);
}
a.mi-login-sponsor:hover { background: var(--accent-softer); }
/* Graustufen im Ruhezustand, Farbe beim Darueberfahren — dieselbe Sprache wie
   die Partnerleiste auf der Website.                                         */
.mi-login-sponsor img {
  display: block;
  max-width: 100%;
  max-height: 32px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
a.mi-login-sponsor:hover img,
a.mi-login-sponsor:focus-visible img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mi-login-sponsor img { transition: none; }
}

/* -- Ausgabe und Ort ------------------------------------------------------ */
.mi-login-ausgabe {
  position: absolute;
  top: clamp(30px, 7vh, 72px);
  right: clamp(24px, 4.7vw, 76px);
  z-index: 2;
  width: clamp(300px, 36vw, 480px);
  padding: 18px 26px 20px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-sm);
  background: rgba(255, 252, 246, .77);
  box-shadow: 0 16px 42px rgba(60, 38, 10, .12);
  text-align: center;
  backdrop-filter: blur(10px);
}
.mi-login-ausgabe-nr {
  margin: 0 0 11px;
  color: var(--gold-tief);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.mi-login-ausgabe-ort {
  margin: 0;
  color: var(--gold-tief);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.25vw, 2.3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

/* -- Telefon und Tablet --------------------------------------------------- */
/* Untereinander statt nebeneinander: Ausgabe oben auf dem Bild, Karte
   darunter. Der grosse Abstand oben laesst das Motiv wirken, statt es hinter
   der Karte zu begraben.                                                     */
@media (max-width: 960px) {
  .mi-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }
  .mi-login-bild img { object-position: center top; }
  .mi-login-schleier {
    background:
      linear-gradient(180deg, rgba(31, 22, 12, .08) 0%, transparent 38%),
      linear-gradient(180deg, transparent 42%, rgba(31, 22, 12, .2) 100%);
  }
  .mi-login-ausgabe {
    position: relative;
    top: auto;
    right: auto;
    order: 1;
    z-index: 1;
    width: min(calc(100% - 34px), 500px);
    padding: var(--s-4) var(--s-4) 18px;
    border-radius: 13px;
    background: rgba(255, 252, 246, .83);
  }
  .mi-login-karte {
    order: 2;
    width: min(100%, 520px);
    max-height: none;
    margin: clamp(200px, 28svh, 540px) auto 0;
    padding: 25px 20px 22px;
    overflow: visible;
    border: 2px solid rgba(183, 132, 44, .72);
    border-radius: 20px;
    background: rgba(255, 253, 249, .94);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .72), 0 28px 70px rgba(45, 28, 8, .22);
  }
  .mi-login-marke { width: min(100%, 345px); margin-bottom: var(--s-6); }
  .mi-login-titel { font-size: clamp(1.9rem, 9vw, 3rem); }
  .mi-login-vorspann { margin: 9px 0 var(--s-6); font-size: var(--t-md); }
}

@media (max-width: 420px) {
  .mi-login { padding-inline: 12px; }
  .mi-login-karte { margin-top: clamp(160px, 24svh, 300px); }
  .mi-login-sponsorliste { gap: 4px; }
  .mi-login-sponsor { height: 32px; }
  .mi-login-sponsor img { max-height: 26px; }
}

/* Ein sehr niedriges Fenster — Rechner mit flachem Bildschirm. Die Karte
   wird schmaler gepolstert, statt zu scrollen.                               */
@media (max-height: 800px) and (min-width: 961px) {
  .mi-login-karte { padding: 28px 34px; }
  .mi-login-marke { width: min(100%, 300px); margin-bottom: var(--s-3); }
  .mi-login-vorspann { margin-bottom: var(--s-5); }
  .mi-login-feld + .mi-login-feld { margin-top: var(--s-3); }
  .mi-login-schale .mi-input { height: 49px; }
  .mi-login-zeile { margin-bottom: var(--s-4); }
  .mi-login-sponsoren { margin-top: var(--s-4); padding-top: var(--s-4); }
}
/* Die Fehlermeldung in der Anmeldekarte braucht Luft nach oben — sie erscheint
   unter dem Knopf und klebte sonst am Hinweis darueber.                      */
#mi-anmelde-fehler { margin-top: var(--s-4); }

/* Die zwei Bildkacheln unter Einstellungen ▸ Anmeldeschirm. Nebeneinander,
   damit man den Zuschnitt vergleichen kann — untereinander muesste man
   scrollen und haette den anderen nicht mehr im Blick.                       */
.mi-login-bildwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.mi-login-bildkachel { display: flex; flex-direction: column; gap: var(--s-2); }
/* Feste Hoehe mit object-fit: Beide Vorschauen sollen gleich hoch stehen,
   auch wenn das eine Bild quer und das andere hochkant ist. Ohne das waere
   die Hochformat-Kachel dreimal so hoch wie die andere.                      */
.mi-login-vorschau {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

/* ══ 32 Mein Zugang: Anleitung und Schluessel ════════════════════════════════

   Zwei Bausteine fuer die Einrichtung des zweiten Faktors.

   1. .mi-anleitung — eine nummerierte Anleitung, in der jeder Schritt eigene
      Bedienelemente enthaelt. NICHT zu verwechseln mit .mi-schritte weiter
      oben: das ist die waagerechte Kette „wo stehe ich gerade", hier geht es
      um „was ist zu tun". Die Zahlen stehen in der Randspalte statt im Text,
      damit die zweite Zeile eines Schrittes unter der ersten beginnt und
      nicht unter der Zahl.

   2. .mi-schluessel — Zeichen, die jemand ABTIPPT oder ABSCHREIBT. Deshalb
      Monospace: nur dort haben 0/O und 1/l/I verschiedene Formen. Wer einen
      Wiederherstellungscode in einer Proportionalschrift abschreibt, tippt
      irgendwann eine Null als grosses O — und merkt es erst, wenn er sich
      nicht mehr anmelden kann. user-select: all macht das Markieren zu
      einem Klick.                                                            */

.mi-anleitung {
  list-style: none;
  counter-reset: mi-anleitung;
  margin: 0;
  padding: 0;
}
.mi-anleitung > li {
  counter-increment: mi-anleitung;
  position: relative;
  padding: 0 0 var(--s-5) var(--s-8);
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.mi-anleitung > li:last-child { padding-bottom: 0; }
.mi-anleitung > li strong { color: var(--text); font-weight: 600; }

/* Die Zahl im Kreis, buendig zur ersten Textzeile. */
.mi-anleitung > li::before {
  content: counter(mi-anleitung);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  background: var(--bg);
}

/* Die durchgehende Linie zwischen den Zahlen — sie macht aus drei Absaetzen
   eine Reihenfolge. Beim letzten Schritt faellt sie weg, sonst zeigte sie ins
   Leere.                                                                     */
.mi-anleitung > li::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.mi-anleitung > li:last-child::after { display: none; }

.mi-schluessel {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  letter-spacing: .06em;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

/* Der Punkt neben dem eigenen Namen in der Navigation: „an deinem Zugang ist
   etwas offen". Gold-hell und nicht --warn — --warn ist gold-tief und waere
   auf dem dunklen Navigationsgrund kaum zu sehen. Er traegt ein title, weil
   ein Punkt allein nichts sagt.                                              */
.mi-nav-punkt {
  margin-left: auto;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-hell);
}

/* ══ 33 QR-Code fuer den Authenticator ═══════════════════════════════════════

   Der Code links, die Ausweichwege rechts. Unter 620 px untereinander — auf
   einem Telefon nebeneinander waere der QR so klein, dass ihn keine zweite
   Kamera mehr fasst.

   DIE GROESSE IST KEINE GESCHMACKSFRAGE. 200 px fuer einen Code aus Version 9
   (53 x 53 Module plus Rand, also 61) sind gut 3 Bildpunkte je Modul. Darunter
   verschmieren die Module bei der Skalierung, und Telefone mit maessiger Kamera
   scheitern in schlechtem Licht.

   WEISSER GRUND, IMMER. Der Rahmen ist absichtlich nicht --bg-sunken und folgt
   nicht dem dunklen Erscheinungsbild: Ein QR auf grauem oder dunklem Grund
   verliert genau den Kontrast, der seine ganze Funktion ist.               */

.mi-qr-paar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  margin: var(--s-3) 0;
}
@media (max-width: 620px) {
  .mi-qr-paar { grid-template-columns: minmax(0, 1fr); }
}

.mi-qr-rahmen {
  width: 200px;
  padding: var(--s-2);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
/* Das SVG selbst traegt .mi-qr, damit es auch ausserhalb des Rahmens richtig
   sitzt — etwa, wenn der Code spaeter in einer Mail oder auf einer eigenen
   Seite steht. Die Groesse macht immer der Behaelter, nie der Code selbst.  */
.mi-qr { display: block; width: 100%; height: auto; }
.mi-qr-rahmen svg { display: block; width: 100%; height: auto; }

.mi-qr-daneben { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.mi-qr-daneben .mi-schluessel { width: 100%; margin: 0; }

/* Die Trennung zwischen „bequem" und „falls das nicht geht". Eine Linie mit
   Wort darin, kein zweiter Zwischentitel — es ist kein neuer Abschnitt,
   sondern derselbe Schritt auf anderem Weg.                                */
.mi-qr-oder {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.mi-qr-oder::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ══ 34 Benutzer: Zeile, Rechtetabelle, Einladung ════════════════════════════

   ZWEIZEILIGE TABELLENZELLE
   Name und E-Mail gehoeren zusammen, aber nicht in zwei Spalten: Bei sechs
   Spalten wird jede so schmal, dass eine lange Adresse umbricht und die Zeile
   doppelt so hoch wird. Untereinander in EINER Zelle bleibt die Zeile ruhig,
   und der Blick findet den Namen zuerst.

   Der ganze Block ist ein <button>, kein Link mit Aufschrift: Er fuehrt auf
   eine Ansicht innerhalb derselben Seite, nicht auf eine Adresse.            */

.mi-zeilen-knopf {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.mi-zeilen-knopf:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.mi-zeilen-name  { display: block; font-weight: 600; color: var(--text); }
.mi-zeilen-zweit { display: block; font-size: var(--t-xs); color: var(--text-muted); margin-top: 1px; }

/* Initialen statt Portraet: Ein Zugang ist keine Person im Adressbuch, und
   die meisten Team-Konten haben ohnehin kein Bild. Ein Kreis mit zwei
   Buchstaben traegt hier weiter als ein Platzhaltergesicht.                 */
.mi-initialen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--gold-deep);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

.mi-ok-text {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ok); font-size: var(--t-xs); font-weight: 600;
}
.mi-ok-text svg { width: 14px; height: 14px; }
.mi-leise { color: var(--text-muted); font-size: var(--t-xs); }
.mi-warnung-text { display: block; color: var(--gold-deep); margin-top: 2px; }

/* --- Die Rechtetabelle ---------------------------------------------------

   Die beiden Schalterspalten bekommen eine feste, schmale Breite. Ohne sie
   verteilt die Tabelle den Platz gleichmaessig, und „Sehen" waere so breit
   wie die Bereichsbeschreibung — der Schalter schwaemme dann irgendwo in der
   Mitte einer leeren Spalte.                                               */
.mi-rechte-tabelle th:not(:first-child),
.mi-rechte-tabelle td:not(:first-child) { width: 92px; }
.mi-rechte-tabelle td:first-child { max-width: 0; }   /* laesst den Text umbrechen */
.mi-rechte-tabelle .mi-schalter { margin-left: auto; }

/* Weicht dieser Schalter von der Rollen-Vorlage ab? Ein Punkt daneben, keine
   andere Farbe: Die Bahn ist an oder aus, und diese Aussage darf nicht mit
   „abweichend" verschwimmen. Man muss beides gleichzeitig lesen koennen.   */
.mi-schalter-abweichend { position: relative; }
.mi-schalter-abweichend::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-ui);
}

/* --- Einladung im Anmeldeschirm ----------------------------------------- */
.mi-einladung h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  color: var(--text);
}
.mi-einladung > p { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--text-muted); }
.mi-einladung .mi-login-feld { margin-bottom: var(--s-3); }
.mi-einladung #e-mail-anzeige { background: var(--bg-sunken); color: var(--text-muted); }

/* ══ 35 Hilfe: Kacheln und Fliesstext ════════════════════════════════════════

   Die Kachel ist eine ganze Zeile und kein Kaestchen im Raster: In der Hilfe
   liest man die Titel untereinander durch, bis einer passt. Nebeneinander
   zwingt der Blick zum Springen.                                            */

.mi-hilfe-kachel {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mi-hilfe-kachel + .mi-hilfe-kachel { margin-top: var(--s-2); }
.mi-hilfe-kachel:hover { border-color: var(--gold-ui); background: var(--accent-softer); }
.mi-hilfe-kachel:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.mi-hilfe-kachel-text  { flex: 1; min-width: 0; }
.mi-hilfe-kachel-titel { display: block; font-weight: 600; color: var(--text); }
.mi-hilfe-kachel-kurz  { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--text-muted); }
.mi-hilfe-kachel-pfeil { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.mi-hilfe-kachel:hover .mi-hilfe-kachel-pfeil { color: var(--gold-deep); }

/* --- Fliesstext ----------------------------------------------------------

   Der EINZIGE Ort im HQ mit laengerem Lesetext. Deshalb hier — und nur hier —
   eine begrenzte Zeilenlaenge: Ueber etwa 70 Zeichen verliert das Auge beim
   Zeilenwechsel den Anschluss. In Tabellen und Formularen gilt das nicht,
   dort liest niemand Absaetze.                                             */
.mi-fliesstext {
  max-width: 68ch;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--text-muted);
}
.mi-fliesstext > *:first-child { margin-top: 0; }
.mi-fliesstext > *:last-child  { margin-bottom: 0; }
.mi-fliesstext p  { margin: 0 0 var(--s-4); }
.mi-fliesstext b  { color: var(--text); font-weight: 600; }
.mi-fliesstext h3 {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text);
}
.mi-fliesstext ol, .mi-fliesstext ul { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.mi-fliesstext li { margin-bottom: var(--s-2); }
.mi-fliesstext a  { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.mi-fliesstext code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-sunken);
  color: var(--text);
}
/* Die Tabelle im Fliesstext darf breiter sein als der Text — sie wird nicht
   gelesen, sondern nachgeschlagen.                                          */
.mi-fliesstext .mi-tabelle { margin: 0 0 var(--s-4); }
.mi-fliesstext .mi-tabelle th { white-space: nowrap; }

/* Mehrere Pillen nebeneinander — Freigabeliste, Kategorien, Schlagworte.
   Als <ul> ohne Punkte: Es ist eine Aufzaehlung, und ein Screenreader soll
   sie auch als solche ansagen ("Liste, 3 Einträge").                        */
.mi-pillenliste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

/* ══ 36 Testbetrieb-Balken ═══════════════════════════════════════════════════

   Warngelb, ueber der ganzen Breite, ueber allem. Absichtlich unuebersehbar:
   Der teuerste Fehler waere, im Live-Betrieb zu glauben, man sei noch im Test.
   Ein dezenter Hinweis in einer Ecke wuerde nach zwei Tagen nicht mehr
   wahrgenommen — und genau darauf kommt es an.

   Er sitzt NICHT in .mi-app: Das ist ein Raster aus 264 px plus Rest, ein
   Kind darin waere entweder in der Navigationsspalte oder wuerde das Raster
   zerreissen. Stattdessen sticky ueber allem, und .mi-hat-balken schiebt die
   Anwendung darunter.                                                       */

.mi-betriebsbalken {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  min-height: 34px;
  padding: 6px var(--s-4);
  background: var(--gold);
  color: #3a2f14;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
.mi-betriebsbalken a {
  color: #3a2f14;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
/* Die Navigation ist 100vh hoch — ohne diese Zeile schoebe der Balken sie
   unten aus dem Bild.                                                       */
.mi-hat-balken .mi-nav { height: calc(100vh - 34px); }

/* Flagge und Landesname im dunklen Seitenkopf. Die Flagge sitzt eine Spur
   hoeher als die Grundlinie — ein Rechteck neben Kleinbuchstaben wirkt sonst
   abgesackt.                                                                */
.mi-hero-land {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.mi-hero-land .mi-flagge { vertical-align: -1px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Verwalten-Menü — Handlungen an einer Person, 06.09.2026
   ═══════════════════════════════════════════════════════════════════════════

   Steht in einem Dialog (components/verwalten-menue.js), nicht in einem
   Aufklappmenü: .mi-dd ist eine Auswahlliste, hier wird gehandelt.

   Jeder Eintrag trägt seine Erklärung mit. Ein Menü aus Verben allein
   („Archivieren") zwingt zum Ausprobieren — und Ausprobieren ist bei
   „Löschen" die falsche Art, es herauszufinden.

   Die kritischen Handlungen stehen unten unter eigener Überschrift und in
   --danger. Rot ist hier keine Verzierung: Es ist der einzige Unterschied,
   den man aus dem Augenwinkel sieht.                                        */

.mi-menueliste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.mi-menue-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  min-height: 44px;
  transition: background var(--dur-fast) var(--ease);
}
.mi-menueliste .mi-menue-eintrag:last-child { border-bottom: 0; }
.mi-menue-eintrag:hover:not(:disabled) { background: var(--accent-softer); }
.mi-menue-eintrag:focus-visible {
  outline: 2px solid var(--gold-ui);
  outline-offset: -2px;
}
.mi-menue-eintrag:disabled { cursor: not-allowed; opacity: .55; }
/* Gedaempft heisst „gerade nicht moeglich" und ist NICHT dasselbe wie
   gesperrt: Der Eintrag bleibt anklickbar und erklaert dann, warum es nicht
   geht. Ein Knopf, der stumm nichts tut, wird fuer kaputt gehalten.
   06.09.2026 — genau so ist Lars beim Loeschen aufgelaufen. */
.mi-menue-eintrag-gedaempft .mi-menue-titel-zeile { opacity: .7; }

.mi-menue-titel-zeile {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
}
.mi-menue-text {
  display: block;
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.45;
}

.mi-menue-titel {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--s-5) 0 var(--s-2);
}
.mi-menue-titel-gefahr { color: var(--danger); }

.mi-menue-eintrag-gefahr .mi-menue-titel-zeile { color: var(--danger); }
.mi-menue-eintrag-gefahr:hover:not(:disabled) { background: rgba(157, 49, 41, .07); }

/* Dieselbe Liste dient auch als AUSWAHL — etwa beim Zuweisen einer Betreuung
   (components/betreuung.js). Der Unterschied ist aria-pressed: Ein Eintrag,
   den man ausgewählt hat, bleibt sichtbar markiert, bis man bestätigt.

   Nicht nur die Hintergrundfarbe: Wer Farben schlecht unterscheidet, sähe
   sonst keinen Unterschied. Der Balken links trägt die Auswahl mit. */
.mi-menue-eintrag[aria-pressed="true"] {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--gold-deep);
}
.mi-menue-eintrag[aria-pressed="true"] .mi-menue-titel-zeile { font-weight: 700; }

/* Die Suchergebnisse können lang werden. Scrollen im Kasten statt im Dialog:
   Sonst wandert der Bestätigen-Knopf aus dem Bild, und man sucht ihn. */
.mi-menueliste-lang { max-height: 320px; overflow-y: auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   Aufklappbare Abschnitte im Formular — 06.09.2026
   ═══════════════════════════════════════════════════════════════════════════

   Das Kontaktformular trägt bis zu achtzehn Angaben plus Galerie. Alles
   untereinander hieß: scrollen, um zu erfahren, dass unten nichts steht, was
   einen angeht.

   Gebaut auf <details>/<summary> und nicht auf eigenem JavaScript. Der Browser
   bringt Tastaturbedienung, Fokus und Vorlesbarkeit mit — nachgebaut wäre
   beides schlechter, und die Suche im Browser (Strg+F) findet Inhalte in
   einem geschlossenen <details> weiterhin und klappt es auf.

   Der Kopf sagt, was drin ist: rechts steht eine Zusammenfassung, damit man
   nicht aufklappen muss, um zu sehen, ob etwas eingetragen ist.             */

.mi-klapp {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin: var(--s-4) 0;
  background: var(--surface);
}
.mi-klapp[open] { border-color: var(--line-strong); }

.mi-klapp-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  list-style: none;
  border-radius: var(--r-sm);
}
.mi-klapp-kopf::-webkit-details-marker { display: none; }
.mi-klapp-kopf:hover { background: var(--accent-softer); }
.mi-klapp-kopf:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: -2px; }

/* Der Pfeil. Ein eigenes Zeichen statt des Browser-Dreiecks: Das sieht auf
   jedem System anders aus und lässt sich nicht einfärben. */
.mi-klapp-pfeil {
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease);
  margin-left: 2px;
}
.mi-klapp[open] > .mi-klapp-kopf .mi-klapp-pfeil { transform: rotate(45deg); }

.mi-klapp-titel { flex: 1; }
.mi-klapp-stand {
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--text-muted);
  text-align: right;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-klapp-koerper { padding: 0 var(--s-4) var(--s-4); }

/* Die Sprachliste: scrollt im Kasten statt die Seite zu verlängern. */
.mi-wahlkasten {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: var(--s-2) var(--s-3);
}

/* Was gewählt ist, steht ÜBER der Liste — sonst muss man scrollen, um zu
   sehen, was man gerade angehakt hat. */
.mi-gewaehlt { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }

/* ══ 38 Druck: ein Dokument auf Papier ═══════════════════════════════════════

   WARUM EIN EIGENER BEHAELTER UND NICHT EINFACH window.print()

   window.print() druckt die GANZE Seite: Navigation, Kopfleiste, Knoepfe,
   Toasts. Gegen das App-Layout anzukaempfen waere zerbrechlich — jede neue
   Seite koennte etwas mitbringen, das die Druckregel nicht kennt.

   Stattdessen: components/druck-dokument.js kopiert den Inhalt nach
   #mi-druck und setzt body.mi-druckt. Die Regel unten blendet dann ALLES
   ausser diesem Behaelter aus, egal wie die Seite drumherum aussieht.

   Uebernommen von Company Solution (dort seit 01.09.2026 im Betrieb, mit
   derselben Begruendung im Kopf von druck-dokument.js). Dort steht in dieser
   Regel zusaetzlich ein Briefkopf; hier nicht, und das ist kein Versehen:
   Unsere Vertragsdokumente bringen Kopf, Goldlinie und Fusszeile auf JEDER
   Seite selbst mit (assets/js/vertraege/rahmen.js). Ein zweiter Kopf aus dem
   Design-System waere ein zweiter Kopf auf dem Blatt.

   DESHALB STEHT HIER FAST NICHTS
   Das Dokument ist eigenstaendig — es traegt seine Massangaben in mm, sein
   @page und seine Farben selbst, damit es in fuenf Jahren noch genauso
   aussieht wie unter der Unterschrift. Hier wird nur der Platz freigeraeumt.
   ------------------------------------------------------------------------- */

#mi-druck { display: none; }

@media print {
  /* Alles ausser dem Druckbehaelter verschwindet. */
  body.mi-druckt > *:not(#mi-druck) { display: none !important; }
  body.mi-druckt { background: #fff !important; margin: 0; padding: 0; }
  #mi-druck { display: block; background: #fff; }

  /* Der Behaelter selbst gibt nichts vor. Was er umschliesst, bringt sein
     Aussehen mit — sonst gaebe es zwei Stellen, an denen die Schriftgroesse
     eines Vertrags steht, und die zweite wird vergessen. */
  #mi-druck > * { margin: 0; }
}

/* Die Vorschau eines Dokuments im HQ.

   Ein IFRAME, kein <div>: Das Dokument bringt eigene Regeln fuer html, body
   und @page mit. Direkt in die Seite gelegt wuerde es die ganze Oberflaeche
   umstellen — dieselbe Falle wie bei der Mailvorlage, wo aus demselben Grund
   ein iframe steht (DESIGN_SYSTEM.md).

   Die Hoehe wird gesetzt, nicht gemessen: Ein iframe waechst nicht mit seinem
   Inhalt, und die Hoehe von aussen auszurechnen setzt Zugriff auf das innere
   Dokument voraus, den srcdoc erst nach dem Laden gibt. 70vh zeigt die erste
   Seite ganz und laesst erkennen, dass es weitergeht. */
.mi-dok-vorschau {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

/* ══ 39 Vorlagenkarten: was es gibt, bevor man sieht was laeuft ══════════════

   WARUM DIESE KARTEN EXISTIEREN
   /formulare zeigte bis zum 07.09.2026 nur den Ruecklauf. In einem Haus, in
   dem noch nichts verschickt ist, war die Seite leer — und eine leere Seite
   sieht aus wie ein Fehler, nicht wie ein Anfang. Jetzt steht oben, WAS es
   gibt und wie es zu den Leuten kommt.

   KEINE VIERTE KACHELVARIANTE
   .mi-kachel (Abschnitt 27) ist fuer Bereiche gedacht und traegt ein Symbol,
   .mi-kennzahl fuer eine einzelne Zahl. Hier steht beides zusammen mit einem
   Knopf — das ist ein eigener Fall, aber ein kleiner: Raster, Rahmen, Luft.
   Farben und Radien kommen aus den Tokens, nichts Eigenes.
   ------------------------------------------------------------------------- */

.mi-vorlagen {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: Bei zwei Formularen zwei Spalten, bei
     fuenf Vertragsvorlagen spaeter drei — ohne dass hier jemand nachzaehlt. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}

.mi-vorlage {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.mi-vorlage-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.mi-vorlage-kopf h4 {
  margin: 0;
  /* --font-heading, nicht --font-display: Im HQ ist die Ueberschriftenschrift
     serifenlos, und nur die Aussen-Oberflaeche schaltet auf Lora um. Eine
     Karte, die sich eigenmaechtig eine Serife nimmt, faellt aus dem Satz.
     (--font-serif gibt es nicht — pruefe-token.mjs hat es gemeldet, bevor die
     Regel still wirkungslos geworden waere.) */
  font-family: var(--font-heading);
  font-size: var(--t-md);
  font-weight: 600;
}
.mi-vorlage-wer {
  flex: none;
  font-size: var(--t-xs);
  color: var(--text-muted);
  letter-spacing: .04em;
}

.mi-vorlage .mi-hilfe { margin: 0; flex: 1; }

/* Die drei Zahlen: verschickt, offen, zurueck. Sie stehen auf einer beigen
   Leiste, damit sie sich vom Beschreibungstext abheben, ohne eine zweite
   Karte in der Karte zu sein. */
.mi-vorlage-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  border-radius: var(--r-xs);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.mi-vorlage-zahlen strong {
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 700;
  margin-right: 2px;
}

/* Der Knopf steht unten und ueber die ganze Breite: In einer Karte ist er die
   einzige Handlung, und eine einzelne Handlung sucht man nicht am Rand. */
.mi-vorlage .mi-btn { align-self: stretch; justify-content: center; }


/* ══ 37 Formulare: Ruecklauf am Menschen ═════════════════════════════════════

   Der Ruecklauf stand bisher nur auf der Seite /formulare — einer Liste ueber
   ALLE Formulare. Wer nachfassen will, arbeitet aber nicht an einer Liste von
   Formularen, sondern an einer Liste von Menschen: „Wen muss ich heute
   anrufen?" Deshalb steht derselbe Stand jetzt zusaetzlich dort, wo die
   Person steht — im Abschnitt „Betreut" auf der Karte ihres National
   Directors.

   ZWEI BAUSTEINE, MEHR NICHT

   1. .mi-formstand — die Staende einer Person nebeneinander. Nur ein
      Umbruch-Behaelter; die Marken darin sind .mi-pille aus Abschnitt 10.
      Eine sechste Pillenvariante waere genau das, was ORDNUNG.md verbietet.

   2. .mi-karte-problem steht NICHT hier, sondern in Abschnitt 18 bei
      .mi-karte-warm, von der sie abgeleitet ist. Sie ist am 07.09.2026 aus
      einem parallel laufenden Strang dort dazugekommen, waehrend sie hier
      ebenfalls entstand. Zwei Definitionen einer Klasse sind eine zu viel;
      geblieben ist die am besseren Ort. Gebraucht wird sie fuer den einen
      Fall, der aussieht wie ein Erfolg und keiner ist: Der Formular-Link ist
      entstanden, die Mail dazu nicht hinausgegangen.

   GEMESSEN, NICHT GESCHAETZT (07.09.2026, gegen --paper):
     --danger auf --danger-soft      6,14 : 1
     --ink auf --danger-soft        13,82 : 1
     --text-muted auf --danger-soft  4,75 : 1
   Alle drei ueber 4,5 : 1. --danger-soft ist durchsichtig; gerechnet wurde
   deshalb mit der Mischfarbe #f5eaea, nicht mit dem Token.                  */

.mi-formstand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Der Zusatz zu einer Marke: „3 fehlen", „seit 12 Tagen". Er gehoert zur
   Pille daneben, deshalb kleiner und stiller — aber nicht heller als
   --text-muted, sonst ist er auf hellem Grund nicht mehr zu lesen. */
.mi-formstand-zusatz {
  font-size: var(--t-xs);
  color: var(--text-muted);
}


/* ══ 38 Nachrichtenzentrale ══════════════════════════════════════════════════

   Neu am 07.09.2026. Vorbild ist die Nachrichtenzentrale aus Company
   Solution — ihr AUFBAU, nicht ihr Aussehen.

   WARUM EIN EIGENER RENDERER UND NICHT DIE VORHANDENE ENGINE
     In Company Solution liegt eine gemeinsame Chat-Engine (shared/chat-core),
     die WhatsApp-Blasen zeichnet. Sie einmal wiederzuverwenden, weil sie
     funktional passt, war dort schon der Fehler: Der Bildschirm zeigte
     Teams-artige Zeilen, die Engine lieferte Blasen, und am Ende wurde die
     Engine verbogen. Hier steht der eigene Renderer von Anfang an — die
     Flaechenlogik dieses Hauses (weiss, schwarz, beige) ist eine andere als
     die dortige Tealwelt, und Naehe in der Funktion ist kein Grund fuer
     Kompromisse in der Optik.

   DIE FLAECHEN DER ZENTRALE
     Weiss   die Karte, in der die Liste steht
     Ivory   was hereinkommt (--surface-2)
     Beige   was hinausgeht (--cream-tief) — die eigene Stimme traegt Gold
     Schwarz nur die Ungelesen-Marke. Sie ist das einzige, was schreien darf.

   GEMESSEN, NICHT GESCHAETZT (07.09.2026, WCAG-Formel, gegen die jeweilige
   Flaeche; 15 Paare gerechnet, keines durchgefallen):
     --ink auf --surface-2 (#fbf6e8)        15,06 : 1  eingehende Blase
     --ink auf --cream-tief (#f3e7c4)       13,20 : 1  eigene Blase
     --text-muted auf --surface-2            5,18 : 1
     --text-muted auf --cream                4,92 : 1  aktive Listenzeile
     --gold-tief auf --cream-tief            5,04 : 1  Anfangsbuchstaben
     --gold-hell auf --dark                 12,31 : 1  Ungelesen-Marke
     --accent-text auf --paper               5,06 : 1  Autorzeile
     --accent-text auf --accent-softer       4,89 : 1  Kopf der Systemkarte
     --gold-ui auf --paper                   3,26 : 1  Symbol (Bedienteil, 3:1)
     --gold-ui auf --accent-softer           3,15 : 1  Rand der Systemkarte
   --accent-softer ist durchsichtig; gerechnet wurde mit der Mischfarbe
   #fefbf2 auf Weiss, nicht mit dem Token. Der Browserlauf pruefe-kontraste
   konnte in dieser Sitzung nicht laufen (kein Chromium) — diese Zahlen sind
   gerechnet, nicht am gerenderten Bildschirm abgelesen.
   Fuer die Anfangsbuchstaben steht --gold-tief und NICHT --gold-ui: Der
   Buchstabe ersetzt ein Bild, ist also Text und braucht 4,5 : 1. Genau diese
   Korrektur war am 06.09.2026 in der Model App faellig.                     */

/* ── Der Rahmen ───────────────────────────────────────────────────────────── */

/* Zwei Spalten und eine feste Hoehe: Der Verlauf scrollt in SICH, nicht die
   Seite. Wer in einem Chat nach oben liest, will nicht die Kopfzeile der
   Anwendung mit hochschieben.

   Die Hoehe steht in dvh und nicht in vh. Auf dem Telefon rechnet vh mit der
   ausgefahrenen Adressleiste, und die Eingabezeile rutscht unter den
   Bildschirmrand — genau dort, wo man tippen will. */
.mi-nz {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--s-4);
  height: calc(100dvh - 230px);
  min-height: 460px;
}

.mi-nz-liste,
.mi-nz-verlauf {
  display: flex;
  flex-direction: column;
  min-height: 0;      /* ohne dies waechst das Kind aus dem Raster heraus */
  overflow: hidden;
  margin-top: 0;
}

/* ── Linke Spalte: Suche und Gespraechsliste ──────────────────────────────── */

.mi-nz-suche {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-sunken);
}
.mi-nz-suche .mi-suche { flex: 1; min-width: 0; }
.mi-nz-suche .mi-input { min-height: 38px; }

.mi-nz-eintraege {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-2);
}

/* Eine Zeile. Knopf und nicht div: Sie ist anklickbar, also gehoert sie in
   die Tastaturreihenfolge — und ein div mit onclick ist fuer eine
   Vorlesesoftware kein Bedienelement. */
.mi-nz-eintrag {
  display: flex;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur) var(--ease);
}
.mi-nz-eintrag:hover { background: var(--accent-softer); }
.mi-nz-eintrag.active {
  background: var(--surface-warm);
  border-color: var(--line-strong);
}
.mi-nz-eintrag + .mi-nz-eintrag { margin-top: 2px; }

/* Der Anfangsbuchstabe. Kein Platzhalterbild: Ein graues Kaestchen sagt „hier
   fehlt ein Foto", und das stimmt bei einem Verteiler gar nicht. */
.mi-nz-zeichen {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--cream-tief);
  color: var(--gold-tief);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: .02em;
}
.mi-nz-zeichen svg { width: 19px; height: 19px; }
/* Als Bild: dasselbe Profilbild wie auf der Sedcard. img und span tragen
   DIESELBE Klasse — sonst muesste jede Stelle wissen, ob ein Bild da ist, und
   die Groesse stuende an zwei Orten. object-fit deckt den Kreis auch dann,
   wenn das Bild nicht quadratisch ist. */
img.mi-nz-zeichen { object-fit: cover; display: block; }
/* Systemmeldungen tragen Schwarz statt Beige — sie kommen nicht von einem
   Menschen, und das soll man vor dem Lesen sehen. */
.mi-nz-zeichen-system { background: var(--dark); color: var(--gold-hell); }

.mi-nz-mitte { flex: 1; min-width: 0; }
.mi-nz-oben {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;          /* ohne dies kann der Name nicht schrumpfen */
}
/* AM 10.09.2026 BERICHTIGT — der Text lief aus der Karte heraus.
   Name und Vorschau sind <span>, also von Haus aus INLINE. An einem
   Inline-Element tut text-overflow: ellipsis gar nichts: Es hat keine Breite,
   die es kappen koennte. Die drei Zeilen standen da und wirkten, als seien
   sie kaputt — sie waren nur wirkungslos.
   display: block macht sie zu Bloecken, und min-width: 0 an den Eltern
   erlaubt dem Flex-Kind, unter seine Inhaltsbreite zu schrumpfen. Beides
   zusammen, eines allein reicht nicht. */
.mi-nz-name {
  display: block;
  min-width: 0;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Woher der Eintrag kommt — „Models", „Ansage". Klein und still: Es ist eine
   Einordnung, keine Nachricht. */
.mi-nz-marke {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
.mi-nz-vorschau {
  display: block;
  min-width: 0;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-nz-vorschau em { font-style: italic; }

.mi-nz-rechts {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
}
.mi-nz-zeit {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ZWEI MARKEN, UND SIE BEDEUTEN VERSCHIEDENES — der Fehler aus der Lernkurve.
     .mi-nz-zahl   was NEU ist. Schwarz mit Gold, unuebersehbar.
     .mi-nz-stand  wie viele Nachrichten es GIBT. Still, und sie bleibt auch
                   dann stehen, wenn alles gelesen ist.
   Haengt die Kennzeichnung allein am Ungelesen-Zaehler, verschwindet sie nach
   dem Lesen — und wirkt, als funktioniere sie nicht. */
.mi-nz-zahl {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--dark);
  color: var(--gold-hell);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}
/* Die stille Zahl. Sie stand als nackte „19" unter der Uhrzeit und sah aus
   wie ein Rest, den jemand vergessen hat. Eine schwache Pille macht daraus
   eine Marke — dieselbe Form wie die goldene daneben, nur ohne Alarm.
   Der volle Satz steht im title, weil eine Zahl allein nicht sagt, wovon. */
.mi-nz-stand {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Rechte Spalte: Kopf ──────────────────────────────────────────────────── */

.mi-nz-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mi-nz-kopf-text { flex: 1; min-width: 0; }
.mi-nz-kopf-titel {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-nz-kopf-unter {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.mi-nz-kopf-aktionen { flex: none; display: flex; gap: var(--s-2); }

/* ── Der Verlauf ──────────────────────────────────────────────────────────── */

.mi-nz-strom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--paper);
}

/* Der Datumstrenner. Mittig, ruhig, ohne Linie quer durch das Bild. */
.mi-nz-tag {
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
}

.mi-nz-msg {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  max-width: 78%;
}
/* Was ich selbst geschrieben habe, steht rechts. Der Anfangsbuchstabe faellt
   dabei weg: Wer die eigene Nachricht liest, weiss, von wem sie ist. */
.mi-nz-msg-eigen {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.mi-nz-msg-koerper { min-width: 0; }

.mi-nz-msg-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 3px;
}
.mi-nz-msg-eigen .mi-nz-msg-kopf { flex-direction: row-reverse; }
.mi-nz-msg-autor {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent-text);
}
.mi-nz-msg-zeit {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Die Blase. Die abgeflachte Ecke zeigt zum Absender — links oben bei dem,
   was hereinkommt, rechts oben bei dem, was hinausgeht. */
.mi-nz-blase {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 4px var(--r-md) var(--r-md) var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mi-nz-msg-eigen .mi-nz-blase {
  background: var(--cream-tief);
  border-color: var(--line-strong);
  border-radius: var(--r-md) 4px var(--r-md) var(--r-md);
}
.mi-nz-blase a { color: var(--accent-text); overflow-wrap: anywhere; }

/* Eine entfernte Nachricht bleibt als Luecke stehen. Wer sie spurlos
   verschwinden laesst, macht einen Verlauf nachtraeglich verhandelbar. */
.mi-nz-blase-weg {
  font-style: italic;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border-style: dashed;
}

/* Der Anhang unter der Blase, nicht darin: Er ist ein eigener Gegenstand. */
.mi-nz-anhang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  max-width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.mi-nz-anhang:hover { border-color: var(--gold-ui); background: var(--accent-softer); }
.mi-nz-anhang svg { width: 15px; height: 15px; flex: none; color: var(--gold-ui); }
.mi-nz-anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-nz-anhang-gross { display: block; max-width: 260px; border-radius: var(--r-sm); margin-top: var(--s-2); }

/* Ging die Nachricht zusaetzlich als Mail hinaus, steht das dran. Sonst
   waere „hat sie es bekommen?" eine Frage, die niemand beantworten kann. */
.mi-nz-weg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s-2);
  font-size: 11px;
  color: var(--text-muted);
}
.mi-nz-weg svg { width: 13px; height: 13px; }

/* Die Systemmeldung. Keine Blase — sie kommt von niemandem und steht deshalb
   ueber die ganze Breite, mit goldenem Rand statt einer Sprechrichtung. */
/* AM 10.09.2026 BERICHTIGT — der wichtigste Fehler an dieser Karte.
   Sie traegt .mi-nz-msg mit, und das ist display: flex. Kopf, Text und der
   Knopf wurden dadurch zu Flex-Kindern in EINER REIHE: Die Ueberschrift stand
   neben dem Text, der Knopf wurde an den rechten Rand gequetscht und brach
   dort mitten im Wort um. Es sah nach einem schlecht gestalteten Knopf aus —
   es war eine falsche Flussrichtung.
   display: block stellt die drei wieder untereinander. */
.mi-nz-sys {
  display: block;
  align-self: stretch;
  max-width: none;
  background: var(--accent-softer);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-ui);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-4);
}
.mi-nz-sys-kopf {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

/* WAS FUER EINE MELDUNG DAS IST — und nicht mehr das Wort „Systemmeldung".
   In einem Bereich, in dem JEDE Zeile eine Systemmeldung ist, sagt dieses
   Wort nichts; es stand neunzehnmal untereinander und trug kein einziges Mal
   eine Auskunft. Jetzt steht dort „Zugang", „Dokument", „Betrieb" — daran
   findet das Auge beim Ueberfliegen die Zeile, die es sucht. */
.mi-nz-sys-art {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* Die Uhrzeit rechts. Sie gehoert zur Zeile, nicht in den Lesefluss. */
.mi-nz-sys-kopf .mi-nz-msg-zeit { margin-left: auto; }
.mi-nz-sys-kopf svg { width: 14px; height: 14px; }
/* Das Gesicht der Systemmeldungen. Klein und rund im Kopf der Karte — es soll
   sagen, wer spricht, und nicht die Meldung ueberstrahlen. */
.mi-nz-sys-bild {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex: none;
}
.mi-nz-sys-text { font-size: var(--t-sm); line-height: 1.55; color: var(--text); }

/* Der Weg zum Ort. Eine Systemmeldung ohne ihn ist eine halbe Nachricht: Man
   weiss, dass etwas zu tun ist, und sucht sich die Stelle selbst.

   HIER STEHT NUR DIE PLATZIERUNG. Das Aussehen kommt aus .mi-btn-still
   .mi-btn-klein — den Knoepfen des Hauses. Vorher stand hier eine eigene
   Pille mit eigenem Rand, eigener Hoehe und eigener Schrift: ein zweiter
   Knopf neben dem, den es schon gibt. Genau das verbietet ORDNUNG.md, und
   das Ergebnis war auch sichtbar schlechter. */
.mi-nz-sys-ziel { margin-top: var(--s-3); }

/* Was schiefging, sieht auch anders aus — nicht nur anders formuliert.
   Farbe ist nie das einzige Signal: Der Rand links wechselt zusaetzlich die
   Staerke, und im Kopf steht das Wort „Fehler".
   Gemessen gegen die Mischfarbe #f5eaea auf Weiss:
     --danger auf --danger-soft      6,14 : 1
     --ink auf --danger-soft        13,82 : 1   */
.mi-nz-sys-fehler {
  background: var(--danger-soft);
  border-color: rgba(157, 49, 41, .32);
  border-left-color: var(--danger);
  border-left-width: 4px;
}
.mi-nz-sys-fehler .mi-nz-sys-art { color: var(--danger); }

/* ── Die Eingabe ──────────────────────────────────────────────────────────── */

.mi-nz-eingabe {
  flex: none;
  border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
}
.mi-nz-eingabe-zeile {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
}
/* Waechst mit dem Text, aber nur bis 140px. Danach scrollt das Feld — sonst
   frisst eine lange Nachricht den Verlauf auf, den man beim Schreiben
   braucht. */
.mi-nz-feld {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  line-height: 1.5;
}
.mi-nz-eingabe-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-size: 11px;
  color: var(--text-muted);
}
.mi-nz-zeichen-zahl { font-variant-numeric: tabular-nums; }
.mi-nz-zeichen-zahl[data-voll='true'] { color: var(--danger); font-weight: 600; }

/* Der geschlossene Rueckkanal. Er sagt, WARUM man nicht schreiben kann —
   ein ausgegrautes Feld ohne Begruendung ist die schlechtere Antwort. */
.mi-nz-zu {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.mi-nz-zu svg { width: 16px; height: 16px; flex: none; color: var(--gold-ui); }

/* Der Anhang, der noch nicht abgeschickt ist. */
.mi-nz-vorlage {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
  font-size: var(--t-xs);
}
.mi-nz-vorlage-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Zustaende ────────────────────────────────────────────────────────────── */

/* Der leere Verlauf und die leere Liste teilen sich diese Flaeche: Beide
   sagen dasselbe — hier ist noch nichts, und das ist kein Fehler. */
.mi-nz-nichts {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--s-8) var(--s-5);
  color: var(--text-muted);
  font-size: var(--t-sm);
}
.mi-nz-nichts strong { display: block; color: var(--text); margin-bottom: var(--s-2); }

/* ── Empfaengerauswahl im Dialog ──────────────────────────────────────────── */

.mi-nz-wahl {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: var(--s-2);
}
.mi-nz-wahl-zeile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
}
.mi-nz-wahl-zeile:hover { background: var(--accent-softer); }
.mi-nz-wahl-name { flex: 1; min-width: 0; font-size: var(--t-sm); }
.mi-nz-wahl-zusatz { font-size: var(--t-xs); color: var(--text-muted); }

/* ── Schmale Bildschirme ──────────────────────────────────────────────────── */

/* Unter 1000px stehen Liste und Verlauf untereinander. Zwei Spalten von je
   170px waeren beides unbrauchbar. */
@media (max-width: 1000px) {
  .mi-nz {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .mi-nz-liste { max-height: 44vh; }
  .mi-nz-verlauf { min-height: 60vh; }
  .mi-nz-msg { max-width: 92%; }
}

/* Gedruckt wird der Verlauf, nicht die Bedienung. */
@media print {
  .mi-nz { display: block; height: auto; }
  .mi-nz-liste, .mi-nz-suche, .mi-nz-eingabe, .mi-nz-kopf-aktionen { display: none; }
  .mi-nz-strom { overflow: visible; height: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Zeilenmenü in den Kontaktlisten — 06.09.2026
   ═══════════════════════════════════════════════════════════════════════════

   Der Knopf steht NEBEN der Personenzeile, nicht darin: .mi-personenzeile ist
   selbst ein <button>, und ein Knopf im Knopf ist ungültiges Markup — der
   Browser zieht ihn heraus, und die Tastaturbedienung bricht.

   Er erscheint beim Überfahren und bleibt auf Geräten ohne Zeiger stehen —
   dieselbe Regel wie bei .mi-zeilen-aktionen, damit sich die Listen gleich
   anfühlen. Der Fokus bringt ihn ebenfalls hervor, sonst wäre er mit der
   Tastatur unerreichbar.                                                    */

.mi-zeile-mit-menue { display: flex; align-items: center; }
.mi-zeile-mit-menue > .mi-personenzeile { flex: 1; min-width: 0; }

.mi-zeilenmenue {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-right: var(--s-3);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.mi-zeilenmenue svg { width: 18px; height: 18px; }
.mi-zeile-mit-menue:hover .mi-zeilenmenue,
.mi-tabelle tr:hover .mi-zeilenmenue,
.mi-zeilenmenue:focus-visible { opacity: 1; }
.mi-zeilenmenue:hover { background: var(--accent-soft); color: var(--text); }
.mi-zeilenmenue:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 1px; }
@media (hover: none) { .mi-zeilenmenue { opacity: 1; } }


/* ══ 38 Rubriken als Karten, und Luft um die Abschnitte ══════════════════════

   ZWEI DINGE AUS DEM 07.09.2026

   1. „Kategorie direkt drangeklatscht."
      .mi-fieldset trug nur einen Abstand nach UNTEN. Stand darueber ein
      Feld, klebte die Ueberschrift „KATEGORIEN" mit ihrer Trennlinie direkt
      am Eingabefeld darueber. Ein Abschnittswechsel braucht mehr Luft als
      ein Zeilenwechsel, sonst liest er sich nicht als Wechsel.

   2. Neun Rubriken als neun Ankreuzkaestchen untereinander waren eine
      Liste zum Abarbeiten, kein Angebot zum Auswaehlen: 500 Pixel Hoehe,
      auf denen rechts nichts steht. Als Karten im Gitter passen sie in
      drei Zeilen und sagen nebenbei, was die Wahl bewirkt.

   WARUM DAS KAESTCHEN SICHTBAR BLEIBT
   Eine Karte, die sich nur durch ihre Farbe als gewaehlt zeigt, ist fuer
   jeden zweifelhaft, der Farben schlecht unterscheidet. Das Kaestchen ist
   die Form daneben. Es ist ein echtes <input type=checkbox>, also
   funktionieren Tastatur, Vorlesehilfe und Formularauswertung ohne Zutun.  */

.mi-fieldset:not(:first-child) { margin-top: var(--s-8); }

.mi-wahlgitter {
  display: grid;
  /* 240 und nicht 190: Bei 190 passen im breiten Dialog vier Karten in eine
     Zeile, und neun Rubriken stehen dann als 4 + 4 + 1 da - die letzte allein.
     Bei 240 sind es drei mal drei, und die Beischrift passt in eine Zeile. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}

.mi-wahlkarte {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.mi-wahlkarte:hover { border-color: var(--line-strong); background: var(--surface-2); }
.mi-wahlkarte input {
  width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--gold-deep);
  flex: none; cursor: pointer;
}
.mi-wahlkarte:has(input:checked) {
  border-color: var(--gold-deep);
  background: var(--accent-softer);
}
/* Der Fokusring gehoert um die ganze Karte, nicht um das kleine Kaestchen —
   sonst sieht man mit der Tastatur nicht, wo man ist. */
.mi-wahlkarte:has(input:focus-visible) {
  outline: 2px solid var(--gold-ui);
  outline-offset: 2px;
}
.mi-wahlkarte-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-wahlkarte-titel { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.mi-wahlkarte-text  { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.4; }

/* ==========================================================================
   25 · ANALYSE — Zahlen zur Website und zum Kanal
   --------------------------------------------------------------------------
   WAS HIER BEWUSST NICHT STEHT

   Keine eigene Kachel, keine eigene Tabelle, keine eigene Karte. Die
   Analyseseite benutzt .mi-kennzahlen, .mi-tabelle, .mi-karte und .mi-balken
   wie jede andere Seite. Neu ist nur, was es vorher nirgends gab: die
   Trendmarke an einer Zahl, der Rahmen fuers Diagramm, der Donut, die
   Balkenliste mit Beschriftung und der Deutungskasten.

   Zum Vergleich: Die Analyseseite von Company Solution bringt ihr eigenes
   Stylesheet als rund tausendzeilige Zeichenkette mit und schiebt es zur
   Laufzeit in den Kopf. Damit hat sie eigene Knoepfe, eigene Karten und
   eigene Abstaende — und aendert man das Design-System, aendert sich diese
   eine Seite nicht mit.

   DIAGRAMME SIND SVG, KEINE BIBLIOTHEK
   Ein Balken- und ein Ringdiagramm rechtfertigen keine 90 KB Fremdcode, und
   der Prueflauf pruefe-fremdcode.mjs wuerde sie ohnehin melden. Das SVG wird
   im Modul erzeugt; hier steht nur, wie es sich in die Breite legt.
   ========================================================================== */

/* -- 25.1  Trendmarke an einer Kennzahl ------------------------------------ */
/* Farbe sagt Richtung, das Zeichen sagt es noch einmal — Rot und Gruen allein
   waeren fuer rund acht Prozent der Maenner keine Auskunft.                  */
.mi-an-trend {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600;
  background: var(--bg-sunken); color: var(--text-muted);
  white-space: nowrap;
}
.mi-an-trend[data-richtung='hoch']    { background: var(--ok-soft);     color: var(--ok); }
.mi-an-trend[data-richtung='runter']  { background: var(--danger-soft); color: var(--danger); }
/* Bei Absprungrate und Position ist weniger besser. Dieselbe Marke, andere
   Deutung — deshalb ein eigenes Attribut statt zweier Klassen.               */
.mi-an-trend[data-gut='runter'][data-richtung='runter'] { background: var(--ok-soft);     color: var(--ok); }
.mi-an-trend[data-gut='runter'][data-richtung='hoch']   { background: var(--danger-soft); color: var(--danger); }

/* -- 25.2  Diagrammrahmen -------------------------------------------------- */
.mi-an-diagramm { width: 100%; overflow-x: auto; }
.mi-an-diagramm svg { display: block; width: 100%; height: auto; min-width: 520px; }
.mi-an-saeule    { fill: var(--gold-ui); }
.mi-an-saeule-top { fill: var(--gold-deep); }
.mi-an-gitter    { stroke: var(--line); stroke-width: 1; }
.mi-an-achse     { fill: var(--text-muted); font-size: 11px; }
.mi-an-mittel    { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 4; }

.mi-an-legende { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--t-xs); color: var(--text-muted); }
.mi-an-legende span { display: inline-flex; align-items: center; gap: var(--s-2); }
.mi-an-legende i { width: 12px; height: 3px; border-radius: var(--r-pill); background: var(--gold-ui); display: inline-block; }
.mi-an-legende i[data-art='mittel'] { background: var(--text-muted); }

/* -- 25.3  Donut ----------------------------------------------------------- */
.mi-an-donut { position: relative; width: 168px; height: 168px; flex: none; }
.mi-an-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mi-an-donut circle { fill: none; stroke-width: 18; }
.mi-an-donut .spur { stroke: var(--bg-sunken); }
.mi-an-donut-mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.mi-an-donut-zahl  { font-size: var(--t-xl); font-weight: 600; line-height: 1.1; }
.mi-an-donut-label { font-size: var(--t-xs); color: var(--text-muted); }

/* -- 25.4  Balkenliste mit Beschriftung ------------------------------------ */
.mi-an-liste { display: flex; flex-direction: column; gap: var(--s-4); }
.mi-an-zeile { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: baseline; }
.mi-an-zeile .mi-balken { grid-column: 1 / -1; }
.mi-an-zeile-name { font-size: var(--t-sm); font-weight: 600; color: var(--text); min-width: 0; }
.mi-an-zeile-text { font-size: var(--t-xs); color: var(--text-muted); grid-column: 1 / -1; line-height: 1.45; }
.mi-an-zeile-wert { font-size: var(--t-sm); color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* -- 25.5  Deutungskasten -------------------------------------------------- */
/* Warm, nicht blau: Es ist keine Warnung und kein Systemhinweis, sondern die
   Einordnung einer Zahl. Blau haetten wir sonst zweimal in verschiedener
   Bedeutung auf derselben Seite.                                            */
.mi-an-deutung {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.55; color: var(--text-on-cream);
}
.mi-an-deutung-titel {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gold-deep); margin-bottom: var(--s-2);
}
.mi-an-deutung p { margin: 0 0 var(--s-2); }
.mi-an-deutung p:last-child { margin-bottom: 0; }

/* -- 25.6  Zwei Spalten, die auf schmalen Schirmen untereinander stehen ----- */
.mi-an-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); align-items: start; }
.mi-an-mitte { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }

/* -- 25.7  Zeitraumleiste -------------------------------------------------- */
.mi-an-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.mi-an-stand { font-size: var(--t-xs); color: var(--text-muted); }

/* -- 25.8  Farben der Donut-Abschnitte -------------------------------------
   Sechs Stufen aus der Hauspalette statt eines Regenbogens. Wer mehr Posten
   hat, fasst sie zu „Übrige" zusammen — mehr als sechs Abschnitte kann man
   in einem Ring ohnehin nicht mehr auseinanderhalten.                        */
.mi-an-donut .t1 { stroke: var(--gold-deep); }
.mi-an-donut .t2 { stroke: var(--gold-ui); }
.mi-an-donut .t3 { stroke: var(--gold); }
.mi-an-donut .t4 { stroke: var(--text-soft); }
.mi-an-donut .t5 { stroke: var(--line-strong); }
.mi-an-donut .t6 { stroke: var(--line); }
.mi-an-mitte-liste { flex: 1; min-width: 180px; }

/* -- 25.9  Zahlen in Tabellen ----------------------------------------------
   Tabellenziffern: gleiche Breite je Ziffer. Ohne das springt eine Spalte mit
   Aufrufzahlen bei jedem Neuzeichnen um ein paar Pixel, und man vergleicht
   Zahlen, die nicht untereinander stehen.                                    */
.mi-an-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -- 25.10  Balken mit Bedeutung -------------------------------------------
   Gewonnene und verlorene Abonnenten stehen in derselben Liste. Farbe allein
   traegt die Aussage nicht — die Zeilen heissen auch im Text "gewonnen" und
   "verloren". Die Farbe ist die zweite, schnellere Lesart.                   */
.mi-an-zeile[data-art='gut']      .mi-balken-fuellung { background: var(--ok); }
.mi-an-zeile[data-art='schlecht'] .mi-balken-fuellung { background: var(--danger); }

/* -- 25.11  Der Kanalkopf --------------------------------------------------
   Dunkel, weil er etwas anderes ist als alles darunter: Er zeigt den BESTAND
   (Abonnenten heute, Aufrufe seit Kanalstart), nicht den gewaehlten Zeitraum.
   Zwei Zahlenarten in gleich aussehenden Karten waeren die Verwechslung, die
   man hinterher nicht mehr aufloest. Die Flaechenlogik des Hauses macht den
   Unterschied ohne ein Wort Erklaerung.                                      */
.mi-an-kanal { display: flex; flex-direction: column; gap: var(--s-5); }
.mi-an-kanal-name { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--text-on-dark); line-height: 1.15; }
.mi-an-kanal-seit { font-size: var(--t-xs); color: var(--text-on-dark-soft); }

/* -- 25.12  Umschalter über einem Diagramm --------------------------------- */
.mi-an-schalter { display: flex; justify-content: flex-end; margin-bottom: var(--s-4); }

/* -- 25.13  Deutungskasten auf dunklem Grund -------------------------------
   Der warme Kasten ist auf Weiss richtig. In der dunklen Kanalkarte waere er
   ein greller Fleck — dort traegt dieselbe Rolle eine leicht aufgehellte
   Flaeche, wie bei den uebrigen dunklen Bausteinen des Hauses.               */
.mi-karte-dunkel .mi-an-deutung {
  background: rgba(247, 244, 238, .06);
  border-color: var(--line-dark);
  color: var(--text-on-dark-soft);
}
.mi-karte-dunkel .mi-an-deutung-titel { color: var(--gold-hell); }
.mi-karte-dunkel .mi-an-deutung b,
.mi-karte-dunkel .mi-an-deutung i { color: var(--text-on-dark); }

/* -- 25.14  Linie und Fläche (Bindungskurve, Livestream) -------------------
   Eine Kurve statt Säulen, wo die Werte einen ZUSAMMENHANG haben: Der Verlauf
   der Zuschauerbindung ist eine Bewegung durch ein Video, kein Nebeneinander
   von Tagen. Säulen würden dort eine Trennung behaupten, die es nicht gibt.  */
.mi-an-linie  { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-linejoin: round; }
.mi-an-flaeche { fill: var(--accent-soft); }
.mi-an-marke  { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 3 3; }

/* -- 25.15  Schwelle: Wert gegen Ziel --------------------------------------
   Für die Bedingungen des Partnerprogramms. Der Balken zeigt den Stand, der
   Text nennt beide Zahlen — ein Balken ohne Zahlen ist ein Gefühl.           */
.mi-an-schwelle { display: flex; flex-direction: column; gap: var(--s-2); }
.mi-an-schwelle-kopf { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.mi-an-schwelle-name { font-size: var(--t-sm); font-weight: 600; }
.mi-an-schwelle-wert { font-size: var(--t-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-an-schwelle-text { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.45; }

/* -- 25.16  Vorschaubilder von Videos --------------------------------------
   Feste Seitenverhaeltnisse und feste Groessen, damit beim Nachladen nichts
   springt: Ein Bild ohne reservierten Platz schiebt beim Eintreffen die ganze
   Tabelle nach unten, und man verliert die Zeile, die man gerade liest.

   Geladen wird von Googles Bildservern, aber OHNE Referrer — der Browser
   verraet damit nicht, von welcher Seite des HQ die Anfrage kam. Das steht so
   im Markup, nicht hier; die Regel gehoert trotzdem hierher erwaehnt, weil
   sie zur Gestaltungsentscheidung gehoert.                                    */
.mi-an-cover {
  display: block;
  width: 128px; height: 72px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
}
.mi-an-cover-leer {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); color: var(--text-muted);
}
.mi-an-cover-zelle { width: 148px; }

.mi-an-cover-gross {
  display: block; width: 100%; max-width: 480px;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.mi-an-cover-kopf { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: flex-start; }
.mi-an-cover-kopf > div { flex: 1; min-width: 260px; }

@media (max-width: 767px) {
  .mi-an-cover { width: 96px; height: 54px; }
  .mi-an-cover-zelle { width: 112px; }
}

/* -- 25.17  Zeichen im Auffrisch-Knopf -------------------------------------
   Der Knopf traegt ein Zeichen UND das Wort. Ein Zeichen allein waere fuer
   Tastatur und Vorlesesoftware ein leerer Knopf, und „neu abrufen" ist kein
   Vorgang, den ein Kreispfeil eindeutig benennt.                             */
.mi-btn svg { width: 15px; height: 15px; flex: none; }

/* -- 25.18  Kachelreihe: Cover mit Zahl darunter ---------------------------
   Fuer die Frage „was laeuft gerade" ist eine Tabelle das falsche Werkzeug.
   Wer wissen will, welche Machart funktioniert, muss die Bilder NEBENEINANDER
   sehen — nicht untereinander mit Zahlen dazwischen.

   Feste Seitenverhaeltnisse, damit beim Nachladen nichts springt. Bewusst
   16:9 auch bei Shorts: Das ist die Form, in der YouTube das Vorschaubild
   ausliefert. Es in 9:16 zu zwingen hiesse, einen Bildausschnitt zu behaupten,
   den es so nicht gibt.                                                      */
.mi-an-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s-4);
}
.mi-an-kachel {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--r-md);
}
.mi-an-kachel:hover .mi-an-kachel-bild { border-color: var(--gold-ui); }
.mi-an-kachel:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 3px; }
.mi-an-kachel-bild {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
  transition: border-color var(--dur-fast) var(--ease);
}
.mi-an-kachel-titel {
  font-size: var(--t-sm); font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mi-an-kachel-zahl { font-size: var(--t-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mi-an-kachel-rang {
  position: absolute; top: var(--s-2); left: var(--s-2);
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(13, 13, 12, .78); color: var(--gold-hell);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.mi-an-kachel-rahmen { position: relative; }

/* Seit dem 08.09.2026 ist eine Kachel nicht mehr immer ein Knopf: Auf der
   Social-Seite fuehrt sie nach draussen zu Instagram, Facebook oder TikTok und
   ist deshalb ein <a>. Ohne diese Zeile traegt sie dort eine Unterstreichung,
   die keine der Knopf-Kacheln hat — und zwei Kachelarten, die verschieden
   aussehen, liest man als zwei verschiedene Dinge. */
a.mi-an-kachel { text-decoration: none; }


/* ── Beitragsliste mit Coverbild ────────────────────────────────────────────
   08.09.2026. Die Kachelreihe darueber beantwortet „welche MACHART laeuft" —
   Bilder nebeneinander, wenig Zahlen. Diese Liste beantwortet die andere
   Frage: „welcher Beitrag hat WIE VIEL gebracht". Dafuer braucht es Zahlen in
   einer Spalte, untereinander, mit Tabellenziffern — sonst vergleicht man sie
   nicht, sondern liest sie einzeln.

   Das Bild bleibt trotzdem dabei und ist quadratisch: Es dient hier dem
   Wiedererkennen („ach, DER Beitrag"), nicht der Beurteilung des Motivs.

   Drei Spalten: Bild, Text, Zahlen. Unter 720 px rutschen die Zahlen in eine
   eigene Zeile und verteilen sich — untereinandergeschobene Zahlenspalten auf
   dem Telefon sind unlesbar.                                                */

/* ── Kachelraster fuer die staerksten Beitraege ─────────────────────────────
   08.09.2026. Die Liste darunter beantwortet „welcher Beitrag hat wie viel
   gebracht" — Zahlen in Spalten, untereinander vergleichbar. Dieses Raster
   beantwortet die andere Haelfte: WIE SAH ER AUS.

   Dafuer muss das Bild gross sein. Eine 84-Pixel-Vorschau ist ein Zeichen zum
   Wiedererkennen, kein Bild — man sieht daran nicht, warum ein Beitrag lief.
   Wer wissen will, welches Motiv, welcher Bildaufbau, welches Gesicht
   funktioniert, muss die Cover nebeneinander sehen und vergleichen koennen.

   DREI SEITENVERHAELTNISSE, und zwar echte:
     hoch     4:5  — Instagram-Feed und Reels-Cover
     quadrat  1:1  — gemischte Feeds
     breit   16:9  — Facebook-Bilder und YouTube-Cover
   Ein Cover in ein fremdes Verhaeltnis zu zwingen heisst, einen Ausschnitt zu
   behaupten, den es nicht gibt — dann steht der Kopf ausserhalb des Bildes.

   Die Rangziffer sitzt oben links, die Formatmarke unten links auf dem Bild.
   Beide auf dunklem Grund, weil ein Cover jede Helligkeit haben kann.        */

.mi-an-kacheln[data-form="hoch"]    { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mi-an-kacheln[data-form="quadrat"] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mi-an-kacheln[data-form="hoch"]    .mi-an-kachel-bild { aspect-ratio: 4 / 5; }
.mi-an-kacheln[data-form="quadrat"] .mi-an-kachel-bild { aspect-ratio: 1 / 1; }

.mi-an-kachel-marke {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(13, 13, 12, .78); color: var(--gold-hell);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
}
.mi-an-kachel-werte {
  display: flex; gap: var(--s-4); margin-top: 2px;
}
.mi-an-kachel-wert b {
  display: block; font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.mi-an-kachel-wert span { font-size: var(--t-xs); color: var(--text-muted); }

.mi-an-beitraege { display: grid; gap: var(--s-3); }

.mi-an-beitrag {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
a.mi-an-beitrag:hover { border-color: var(--gold-ui); }
a.mi-an-beitrag:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }

.mi-an-beitrag-bild {
  width: 84px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--line-soft);
}
.mi-an-beitrag-kopf {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: 4px;
}
.mi-an-beitrag-titel {
  font-size: var(--t-sm); font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mi-an-beitrag-zahlen { display: flex; gap: var(--s-5); }
.mi-an-beitrag-zahl { text-align: right; white-space: nowrap; }
.mi-an-beitrag-zahl b {
  display: block; font-size: var(--t-md); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.mi-an-beitrag-zahl span { font-size: var(--t-xs); color: var(--text-muted); }

@media (max-width: 720px) {
  .mi-an-beitrag { grid-template-columns: 64px 1fr; }
  .mi-an-beitrag-bild { width: 64px; }
  .mi-an-beitrag-zahlen { grid-column: 1 / -1; justify-content: space-between; gap: var(--s-3); }
}

/* ── Gedruckt fuer Sponsoren ────────────────────────────────────────────────
   Die Reichweitenseite ist die einzige, die aus dem Haus geht. Gedruckt wird
   der Bericht, nicht die Bedienung: Zeitraumwahl und der Knopf „Neu abrufen"
   verschwinden, Karten bleiben zusammen auf einer Seite.

   Die Deutungstexte bleiben ausdruecklich STEHEN. Sie sind der Grund, warum
   die Zahlen nicht missverstanden werden — und genau das ist beim Ausdruck
   wichtiger als auf dem Schirm, weil niemand mehr nachfragen kann.          */

@media print {
  .mi-an-kopf .mi-tabs,
  .mi-an-kopf .mi-btn { display: none !important; }
  .mi-an-beitrag { break-inside: avoid; }
  .mi-karte { break-inside: avoid; }
  .mi-an-druckkopf { display: block !important; }
}
.mi-an-druckkopf { display: none; }

/* ── Sedcard-Tafel ────────────────────────────────────────────────────────
   Die Reiter „Sedcard" und „Intern" auf der Kontaktkarte. Drei Klassen, mehr
   braucht es nicht: Felder, Raster, Karten und Knoepfe kommen alle aus dem
   Bestand.

   WARUM sctafel UND NICHT sedcard
   Abschnitt 19.3 weiter oben haelt bereits .mi-sedcard* — ein dunkles
   Kartendesign fuer die Sedcard als ANSICHT. Es ist heute an keiner Stelle
   in Gebrauch, steht aber da. Die Tafel hier ist etwas anderes: ein
   Formular. Denselben Namensstamm zu nehmen hiesse, zwei verschiedene Dinge
   unter einem Namen zu fuehren — und beim naechsten Aufraeumen loescht
   jemand die Haelfte des jeweils anderen. */
.mi-sctafel-kopf {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.mi-sctafel-wer {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--text-muted);
}
.mi-sctafel-wer strong { color: var(--text); font-weight: 600; }
/* Die Speicherleiste. Der Stand links, die Knoepfe rechts — und auf einem
   schmalen Schirm untereinander, damit der Knopf nicht abgeschnitten wird. */
.mi-sctafel-fuss {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
}

/* ══ 39 Kontextmenü und Mehrfachauswahl ══════════════════════════════════════

   Zwei Dinge, die zusammengehören: der Rechtsklick auf eine Zeile und das
   Auswählen mehrerer Zeilen. Beide beantworten dieselbe Frage — „was mache
   ich mit DIESEM Eintrag" —, nur einmal für einen und einmal für viele.

   WARUM EIN EIGENES MENÜ UND NICHT .mi-dd
     .mi-dd ist eine Auswahlliste (role="listbox"): Man wählt einen Wert.
     Hier wird gehandelt. Für Vorlesesoftware sind das zwei verschiedene
     Dinge, und ein listbox-Element, das etwas löscht, sagt das Falsche.

   GEMESSEN (10.09.2026, gegen die jeweilige Fläche):
     --text auf --paper               16,26 : 1
     --text-muted auf --paper          5,59 : 1
     --danger auf --paper              7,04 : 1   (der Löschen-Punkt)
     --ink auf --cream-tief           13,20 : 1   (die Auswahlleiste)
   Die Trefferfläche eines Menüpunkts ist 38 px hoch und volle Menübreite —
   ein 16-px-Symbol allein wäre nicht zu treffen.                            */

.mi-kmenue {
  position: fixed;
  z-index: 1200;          /* über Karten und Leisten, unter Dialog-Schleier */
  min-width: 208px;
  max-width: 280px;
  padding: var(--s-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  animation: mi-auf var(--dur-fast) var(--ease);
}

.mi-kmenue-punkt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}
.mi-kmenue-punkt:hover { background: var(--bg-sunken); }
.mi-kmenue-punkt svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
/* Damit die Beschriftungen auch ohne Symbol in einer Flucht stehen. */
.mi-kmenue-leer { width: 16px; flex: none; }

.mi-kmenue-punkt.gefahr { color: var(--danger); }
.mi-kmenue-punkt.gefahr svg { color: var(--danger); }
.mi-kmenue-punkt.gefahr:hover { background: var(--danger-soft); }

/* Ein gesperrter Punkt bleibt STEHEN und verschwindet nicht. Ein Menü, das
   je nach Zeile anders lang ist, zwingt bei jedem Öffnen zum Lesen — statt
   dass die Hand den Weg schon kennt. */
.mi-kmenue-punkt[aria-disabled='true'] {
  color: var(--text-platzhalter);
  cursor: default;
}
.mi-kmenue-punkt[aria-disabled='true']:hover { background: transparent; }
.mi-kmenue-punkt[aria-disabled='true'] svg { color: var(--text-platzhalter); }

.mi-kmenue-trenner {
  height: 1px;
  margin: var(--s-2) var(--s-2);
  background: var(--line-soft);
}

/* ── Auswahl im Verlauf ──────────────────────────────────────────────────── */

/* Das Kästchen steht NEBEN der Nachricht und nicht darin: Es gehört zur
   Auswahl, nicht zum Inhalt. Sichtbar wird es erst im Auswahlmodus — ein
   Kästchen an jeder Zeile, das man neunundneunzig Prozent der Zeit nicht
   braucht, macht aus einem Verlauf ein Formular. */
.mi-nz-strom:not(.waehlt) .mi-nz-wahlfeld { display: none; }

.mi-nz-wahlfeld {
  flex: none;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-right: var(--s-1);
  accent-color: var(--gold-deep);
  cursor: pointer;
}
/* Im Auswahlmodus ist die ganze Zeile die Trefferfläche — 20 px Kästchen
   allein wären eine Zielübung, und die Regel verlangt 44. */
.mi-nz-strom.waehlt .mi-nz-msg {
  cursor: pointer;
  border-radius: var(--r-sm);
  padding: var(--s-1);
  margin: calc(var(--s-1) * -1);
}
.mi-nz-strom.waehlt .mi-nz-msg:hover { background: var(--accent-softer); }
.mi-nz-strom.waehlt .mi-nz-msg[data-gewaehlt='true'] { background: var(--accent-soft); }
/* Im Auswahlmodus führt kein Knopf mehr irgendwohin — sonst klickt man beim
   Auswählen versehentlich auf „Zu den Dokumenten" und ist auf einer anderen
   Seite. */
.mi-nz-strom.waehlt .mi-nz-sys-ziel,
.mi-nz-strom.waehlt .mi-nz-anhang { pointer-events: none; opacity: .55; }

/* Die Leiste erscheint ÜBER der Eingabe und ersetzt sie nicht: Wer beim
   Auswählen die Eingabe verliert, verliert auch den halb getippten Satz. */
.mi-nz-wahlleiste {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-strong);
  background: var(--cream-tief);
  color: var(--text);
  font-size: var(--t-sm);
}
.mi-nz-wahlleiste-zahl { font-weight: 700; font-variant-numeric: tabular-nums; }
.mi-nz-wahlleiste-schub { margin-left: auto; display: flex; gap: var(--s-2); }

@media (max-width: 560px) {
  .mi-nz-wahlleiste-schub { margin-left: 0; width: 100%; }
  .mi-nz-wahlleiste-schub .mi-btn { flex: 1; }
}