/* ==========================================================================
   style-neu.css - das Stylesheet von mhsys.

   Bis 2026-09-06 lag das CSS in zwei Dateien: estyle.css (Grundgeruest -
   Sidebar, .content, Boxen, Tabellen, Formulare) und style-neu.css (die
   neue Designlinie). Beide wurden auf jeder Seite geladen, estyle zuerst.
   Zusammengefasst zu dieser einen Datei, in genau der Reihenfolge - der
   Basis-Teil steht unten unter "TEIL 1", die Designlinie ab "TEIL 2".

   Aufbau:
     :root   - Farbpalette als Variablen (siehe unten)
     TEIL 1  - Grundgeruest (frueher estyle.css)
     TEIL 2  - Designlinie: Komponenten der ueberarbeiteten Seiten

   Farben immer ueber die Variablen setzen, nicht als Hex-Wert wiederholen.
   Reihenfolge innerhalb der Teile nicht umstellen - an mehreren Stellen
   haengt die Wirkung an der Position (spaeter gewinnt bei gleicher
   Spezifitaet), die betroffenen Regeln sind einzeln kommentiert.
   ========================================================================== */

:root {
    /* Markenblau - Standard / Hover (Buttons, Links, aktive Zustaende) */
    --mh-blau:          #026ab3;
    --mh-blau-hover:    #01517f;

    /* Helle Chip-Flaeche - Standard / Hover
       (Pills, Badges, Card-Header, Sekundaer-Button, Unternavi) */
    --mh-hell:          #dff1fd;
    --mh-hell-hover:    #c7e6fc;

    /* Rand zur hellen Chip-Flaeche - Standard / Hover */
    --mh-rand:          #a1d5f9;
    --mh-rand-hover:    #7cc4ef;

    /* Dezenter Kartenrand (Card-Body, Inputs darin) */
    --mh-rand-leise:    #dbe7f3;

    /* Blasser Seiten-/Panel-Hintergrund (fast weiss) */
    --mh-flaeche:       #f9fbfd;

    /* Neutrales Badge-Grau / dezente Trennlinie */
    --mh-grau:          #eef2f5;

    /* Zurueckgenommener Text (Hinweise, inaktive Icons, Meta-Angaben) */
    --mh-text-leise:    #888;

    /* ---- Neutrale Grautoene (06.09.2026 zusammengelegt) ---- */
    --mh-flaeche-grau:  #f9f9f9;   /* helle Flaeche, Zebrastreifen, Chip-Grund */
    --mh-rand-grau:     #ddd;      /* heller Rand */
    --mh-rand-grau-satt:#c2c2c2;   /* kraeftiger Rand, Formularfelder */
    --mh-text:          #333;      /* Fliesstext */
    --mh-text-label:    #666;      /* Beschriftungen, Meta-Angaben */
    /* Ueberschriften nutzen weiter #16202a, reines Schwarz bleibt reines Schwarz */

    /* ---- Blaugrau: kuehl gebrochene Grautoene ---- */
    --mh-blaugrau-hell: #dde3e8;   /* Flaechen: neutrale Pillen, Chips */
    --mh-blaugrau-rand: #cfd8de;   /* Raender dazu, eine Stufe dunkler */
    --mh-blaugrau-text: #8a97a3;   /* Icons und Text darauf */
    /* --mh-blaugrau-dunkel waere #556 - bleibt vorerst als Literal, 6 Stellen */

    /* ---- Navigationsleiste ---- */
    --mh-navi:          #1c6dab;   /* Grund der Hauptnavi (Sidebar) und der
                                      mobilen Kopfleiste - beide muessen
                                      gleich sein; die persoenliche Farbwahl
                                      in der Sidebar ueberschreibt diese
                                      Variable auf :root (JS in header.inc.php),
                                      damit die Kopfleiste mitzieht */
    --mh-sidebar-text:  #cfe2f0;   /* Oberpunkte, Icons */
    --mh-sidebar-text-2:#b9d5e8;   /* Unterpunkte, bewusst eine Stufe leiser */

    /* ---- Signalfarben ---- */
    --mh-rot:           #d82323;   /* Alarm: Glocke, Prioritaet, Grenzlinie */
    --mh-rot-hell:      #fdecec;   /* Flaeche dazu */
    --mh-rot-hell-hover:#fbdcdc;   /* deren Hover - bewusst eigener Ton */
    --mh-rot-dunkel:    #a3271c;   /* Text auf roter Flaeche */
    --mh-rot-signal:    #ee3a2e;   /* helleres Signalrot fuer gefuellte Knoepfe auf
                                      dunklem Grund (Express in der Topbar) - der
                                      Alarmton --mh-rot wirkt dort zu duester */

    --mh-orange:        #eea710;   /* Warnung, wichtige Prioritaet */
    --mh-orange-hell:   #e8b84b;   /* Vorschau beim Ueberfahren, bevor gesetzt ist */
    --mh-orange-text:   #b8860b;   /* dunkler, wo es als Fliesstext lesbar sein muss */
    --mh-orange-warn:   #e07b00;   /* kraeftiges Warnorange fuer Textmeldungen, die
                                      auffallen sollen, ohne Alarm zu sein - die
                                      beiden Toene darueber sind dafuer zu gelb
                                      (#eea710) bzw. zu gedeckt (#b8860b) */

    --mh-lila-hell:     #efe9fb;   /* Flaeche fuer Hinweise, die weder Alarm noch
                                      Warnung sind, sondern eine offene Frage -
                                      erstmals: "Langsamdreher, auslaufen lassen?"
                                      in den Bestellvorschlaegen. Rot und Orange
                                      sind dort belegt (ausverkauft / wird knapp)
                                      und wuerden Dringlichkeit behaupten, die
                                      nicht besteht. */
    --mh-lila-text:     #6b3fb5;   /* Text auf dieser Flaeche */

    --mh-notiz:         #fff8e1;   /* Notizflaeche */
    --mh-notiz-rand:    #f0dfa0;   /* Rand dazu */
    --mh-warnung-hell:  #fff3c4;   /* .boxwarnung - bewusst NICHT die Notizfarbe */

    --mh-gruen:         #146c43;   /* Erfolg, Text auf gruener Flaeche */
    --mh-gruen-hell:    #e7f5ee;   /* Flaeche dazu */
    --mh-gruen-rand:    #bfe3d0;   /* Rand dazu */
    --mh-gruen-signal:  #5cc80d;   /* gefuellte Erfolgsmeldung */
    --mh-gruen-mittel:  #1a8250;   /* freundliches Gruen fuer gefuellte Flaechen mit
                                      weisser Schrift: --mh-gruen wirkt dort fast
                                      schwarzgruen, --mh-gruen-signal traegt weisse
                                      Schrift gar nicht (2,2:1). Dieser Ton kommt auf
                                      4,8:1 und bleibt damit lesbar. */
}

/* ==========================================================================
   TEIL 1 - GRUNDGERUEST (frueher core/estyle.css)
   Sidebar, .content, Boxen, Tabellen, Basis-Formulare. Wird von TEIL 2
   an vielen Stellen bewusst ueberschrieben.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    min-height: 100vh;
    background-color: #fff;
    font-size:13px;
}

/* Linke Navigationsleiste */
.sidebar {
    width: 220px;
    flex-shrink: 0;
    background-color: var(--mh-navi);
    color: var(--mh-sidebar-text);
    font-family: 'Barlow', Arial, sans-serif;
    padding-top: 20px;
    padding-left:3px;
    padding-bottom: 20px;
    min-height: 100vh;
}

a {
    color:var(--mh-blau);
    text-decoration:none;
}

td {
    padding:3px;
}

a:hover {
    text-decoration:underline;
}

/* Die Linie kommt aus background-color + height, nicht aus einem Rahmen -
   deshalb border:none statt des frueheren "solid #00ffff 0px" (ein Cyan,
   das wegen Breite 0 nie gezeichnet wurde). */
hr {
    background-color: var(--mh-blau);
    height: 1px;
    border: none;
    text-align: left;
}



.logo {
    text-align: center;
    margin-bottom: 0px;
}

.sideicons {
    text-align: center;
    margin-bottom: 5px;
    margin-top:5px;
    padding-bottom:10px;
}

.sideicons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--mh-sidebar-text);
    font-size: 14px;
}

.sideicons a:hover {
    text-decoration:none;
    background-color: rgba(255,255,255,0.12);
    color: #fff;
}

.logo img {
    width: 168px;
    height: auto;
}

.sidebar ul {
    list-style: none;
    padding: 0 10px;
}

.sidebar ul li {
    font-size: 12px;
    margin-bottom: 1px; /* Weniger Abstand */
}

.sidebar ul li a {
    color: var(--mh-sidebar-text);
    text-decoration: none;
    padding: 4px 6px;
    display: block;
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Status-Balken (Basis) - kompakter als zuvor, gleiche Bedeutungsfarben (inline style) */
.status-bar {
    color: #fff;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    margin: 4px 10px;
    font-size: 11.5px;
    line-height: 1.4;
}

.status-bar a {
    color: #fff;
}

.status-bar__icon {
    font-size: 13px;
    margin-right: 4px;
}

.status-bar__count {
    font-weight: 700;
    margin-right: 3px;
}

.status-bar__label {
    letter-spacing: 0.5px;
}

/* Status-Balken mit Tabs (z.B. EZV versandbereit / in Produktion) - Box komplett in der Farbe des aktiven Tabs */
.ezv-tabs {
    text-align: left;
    padding: 6px 8px 8px;
    transition: background-color 0.15s ease;
}

.ezv-tabs[data-active-tab="versandbereit"] {
    background-color: var(--mh-orange);
}

.ezv-tabs[data-active-tab="produktion"] {
    background-color: var(--mh-orange);
}

.ezv-tabs__nav {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.ezv-tabs__btn {
    flex: 1;
    border: none;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    background-color: rgba(255,255,255,0.18);
    opacity: 0.75;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ezv-tabs__btn:hover {
    opacity: 1;
}

.ezv-tabs__btn--active {
    opacity: 1;
    background-color: rgba(255,255,255,0.32);
}

.ezv-tabs__panel {
    display: none;
    text-align: center;
}

.ezv-tabs__panel--active {
    display: block;
}



.sidebar ul li a:hover {
    background-color: rgba(255,255,255,0.1);
}

.sidebar ul li.main-item a {
    font-weight: 600; /* Nur Oberpunkte fett */
    font-size: 12.5px; /* Etwas größere Schrift für Oberpunkte */
    font-family: 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
    letter-spacing: 0.3px;
    color: #fff;
    border-bottom:1px solid rgba(255,255,255,0.15);
}

.submenu {
    padding-left: 15px;
}

.submenu li a {
    font-size: 12.5px; /* Kleinere Schrift für Unterpunkte */
    padding: 4px 6px;
    color: var(--mh-sidebar-text-2);
}

/* Zähler in der Sidebar-Navigation (z.B. TODOs) - gut lesbar auf dunklem Blau */
.nav-count {
    font-weight: 700;
}
.nav-count--urgent {
    color: #ff8a80;
}
.nav-count--muted {
    color: var(--mh-sidebar-text-2);
}

/* Kompakte Navigation (nur Admin): Unterpunkte erst nach Klick auf den Pfeil sichtbar */
.nav-compact .submenu {
    display: none;
}

.nav-compact .submenu.nav-open {
    display: block;
}

.nav-compact li.main-item {
    display: flex;
    align-items: center;
}

.nav-compact li.main-item > a {
    flex: 1;
}

.nav-compact .nav-caret {
    cursor: pointer;
    padding: 3px 12px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    color: #8FB8D6;
    user-select: none;
    flex-shrink: 0;
}

.nav-compact .nav-caret:hover {
    text-decoration: underline;
}

/* Inhaltsbereich */
.content {
    flex: 1;
    min-width: 0;
    margin-left: 0px;
    padding: 20px;
    background-color: var(--mh-flaeche);
}

.content h1 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
}

.content p {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 12px;
    color: var(--mh-text-label);
}

.content input {
    padding:0 3px 0 3px;
    border:1px solid var(--mh-rand-grau-satt);
    margin:4px;
}

.content textarea { padding:5px; }

.content select {
    padding:0 3px 0 3px;
    border:1px solid var(--mh-rand-grau-satt);
}

/* Viel Inhalt für Scroll-Test */
.content .infobox {
    background-color:var(--mh-flaeche-grau);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--mh-rand-grau);
    color:#000;
    width:100%;
}

/* .content .unternavi stand hier frueher noch einmal (dunkelblaue Pille,
   weisse Links) - jede einzelne Eigenschaft davon wird weiter unten im
   Design-Teil ueberschrieben, die Regel war also wirkungslos. Entfernt. */

/* Viel Inhalt für Scroll-Test */
.content .infobox3 {
    background-color: var(--mh-flaeche);
    padding: 20px;
    border-radius: 8px;
    width:100%;
    margin-bottom:15px;
}

/* Viel Inhalt für Scroll-Test */
.content .infobox2 {
    background-color:var(--mh-hell);
    padding: 20px;
    border-radius: 8px;
    width:100%;
    margin-bottom:15px;
}

.content a {
    font-weight:bold;
}



/* Prioritaet einer Bestellung: ein Schalter je Stufe, die gewaehlte gefuellt in
   ihrer Signalfarbe. Er sitzt als Datenzeile in der Karte "Versanddaten" und
   fuellt deren Wertspalte ganz aus - drei gleich breite Segmente (flex: 1),
   damit er bei jeder Kartenbreite buendig bleibt und nicht herausragt (mit
   fester Segmentbreite tat er das schon bei 1280px um 24 Pixel).
   Vorher waren es drei Emoji-Kreise auf dunkelblauem Grund UEBER der Tabelle:
   eine eigene Formensprache, die mit nichts sonst auf der Seite zusammenging. */
.prio-schalter {
    display: flex;
    width: 100%;
    border: 1px solid var(--mh-rand-grau);
    border-radius: 6px;
    overflow: hidden;
}

.prio-schalter__opt {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mh-text-label);
    background: #fff;
    border-left: 1px solid var(--mh-rand-grau);
    transition: background 0.15s ease, color 0.15s ease;
}

.prio-schalter__opt:first-child {
    border-left: none;
}

.prio-schalter__opt:hover {
    background: var(--mh-hell);
    color: var(--mh-text);
    text-decoration: none;
}

/* Die gewaehlte Stufe traegt ihre Farbe gefuellt - das ist der einzige
   Unterschied, den man im Vorbeigehen erkennen muss. Der Hover-Zwilling steht
   dabei, sonst faerbt die Regel darueber die aktive Stufe beim Ueberfahren
   wieder hell ein. */
.prio-schalter__opt--aktiv,
.prio-schalter__opt--aktiv:hover {
    color: #fff;
    font-weight: 700;
}

.prio-schalter__opt--gruen.prio-schalter__opt--aktiv,
.prio-schalter__opt--gruen.prio-schalter__opt--aktiv:hover {
    background: var(--mh-gruen-mittel);
}

.prio-schalter__opt--orange.prio-schalter__opt--aktiv,
.prio-schalter__opt--orange.prio-schalter__opt--aktiv:hover {
    background: var(--mh-orange-warn);
}

.prio-schalter__opt--rot.prio-schalter__opt--aktiv,
.prio-schalter__opt--rot.prio-schalter__opt--aktiv:hover {
    background: var(--mh-rot);
}



/* Erfolgsmeldung - bewusst leiser als Fehler und Warnung daneben: dass etwas
   geklappt hat, muss man zur Kenntnis nehmen, nicht lesen. Deshalb flach (kein
   Rahmen), halbe Hoehe und die helle Erfolgsflaeche aus der Palette, dieselbe
   wie bei .status-badge--success. Vorher war sie 20px hoch gepolstert, gerahmt
   und in kraeftigem Gruen - zwei davon untereinander fuellten den halben
   Bildschirm. */
.boxok {
    background-color: var(--mh-gruen-hell);
    color: var(--mh-gruen);
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
}


.boxfehler {
    background-color:var(--mh-rot-hell);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ec839a;
    width:100%;
    margin-bottom:15px;
}


.boxwarnung {
    background-color:var(--mh-warnung-hell);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e6c200;
    width:100%;
    margin-bottom:15px;
}


.boxhinweis1 {
    background-color: #eafffb;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #a8f8ff;
    width:100%;
    margin-bottom:15px;
}



.designbox {
    border-radius: 8px; /* Leicht abgerundete Ecken */
    border-collapse: collapse; /* Kein Abstand zwischen Zellen und Rand */
    width: 100%; /* Tabelle füllt den verfügbaren Platz */
    margin: 20px 0; /* Abstand um die Tabelle */
}

.designbox th, .designbox td {
    padding: 12px; /* Innenabstand */
    text-align: left; /* Text linksbündig */
}

.designbox th {
    background-color: var(--mh-hell); /* Hellgrauer Hintergrund für Kopfzeilen */
    font-weight: bold; /* Fettschrift für Kopfzeilen */
    border-bottom:1px solid var(--mh-rand);
    border-top-left-radius: 8px;  /* obere linke Ecke */
    border-top-right-radius: 8px; /* obere rechte Ecke */
}

.designbox tr:nth-child(odd) {
    background-color: var(--mh-flaeche-grau); /* Alternierende Zeilenfarbe */
    border-bottom:1px solid var(--mh-rand-grau-satt);
}

.designbox tr:nth-child(even) {
    background-color: #fff; /* Weiß für gerade Spalten */
    border-bottom:1px solid var(--mh-rand-grau-satt);
}


.sendstatus {
    margin-top:10px;
    width:700px;
    max-width:100%;
    text-align:center;
    font-size:30px;
    font-weight:bold;
    color:#FFF;
    padding:8px;
    margin-bottom:15px;
    border-radius:8px;
}

/* Farbvarianten, damit die Farbe nicht mehr an jeder Aufrufstelle inline
   gesetzt werden muss (Werte aus pack_scan.php uebernommen, damit beide
   Scan-Seiten dieselbe Rueckmeldung zeigen). */
.sendstatus--ok      { background-color:#6ac500; }
.sendstatus--info    { background-color:#13dbff; }
.sendstatus--warnung { background-color:#d8970b; }
.sendstatus--fehler  { background-color:#b70b0c; }
.sendstatus--abschluss { background-color:#FE2EF7; }   /* pack_scan.php: Versand beendet */

/* Fuer Meldungen, die ein ganzer Satz sind, statt eines Schlagworts */
.sendstatus--klein { font-size:22px; }

/* Auf dem Handy waeren 30px so gross, dass jede Meldung dreizeilig umbricht */
@media (max-width: 767px) {
    .sendstatus { font-size:22px; }
    .sendstatus--klein { font-size:16px; }
}



.timebox {
    display: flex;
    gap: 15px;
}

.timebutton {
    padding: 15px;
    width: 150px;
    text-align: center;
    color: #fff;
}

.timebutton a {
    color: #fff;
    text-decoration: none;
    display: block;
}



.recent-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    margin-top: 4px;
}

.search-item {
    background-color: var(--mh-grau);
    padding: 4px 10px;
    font-size: 12.5px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-item a {
    font-size: 12.5px;
    color: var(--mh-text-label);
    text-decoration: none;
}

/* Rahmenlos auf dem hellen Badge-Grau; Hover eine Stufe dunkler auf
   --mh-blaugrau-hell, damit die Rueckmeldung erhalten bleibt. Zwei
   eigene Zwischentoene (#f2f3f5 / #e8eaed) gab es hier frueher, die
   sind bei der Farbzusammenlegung entfallen. */
.search-item:hover {
    background-color: var(--mh-blaugrau-hell);
}

.search-item:hover a {
    color: var(--mh-blau);
}



/* ===== Dashboard: Kennzahlen-Kacheln ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.kpi-card {
    display: block;
    background-color: var(--mh-blau);
    color: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kpi-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.kpi-card .kpi-value {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
}

.kpi-card .kpi-value-sub {
    font-size: 12px;
    color: #eaf5ff;
    margin-top: 2px;
}

.kpi-card .kpi-label {
    font-size: 12px;
    color: var(--mh-sidebar-text);
    font-weight: normal;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Zwei Gruppen, gedeckte Töne passend zur Markenfarbe #026ab3 */
    .kpi-card.kpi-finance   { background-color: #0b3550; } /* Privatkunden: dunkles Marineblau */
    .kpi-card.kpi-b2b       { background-color: #3f6e6a; } /* B2B/Händler: gedecktes Petrol */


.info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    font-family: Arial, sans-serif;
}

.info-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--mh-text-label);
    font-size: 11px;
    line-height: 1;
    color: var(--mh-text-label);
}

.info-tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 220px;              /* Tooltip-Breite */
    background-color: var(--mh-text);
    color: #fff;
    text-align: left;
    padding: 8px 10px;
    border-radius: 4px;

    position: absolute;
    z-index: 100;
    bottom: 125%;              /* über dem Icon anzeigen */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;

    font-size: 12px;
}

/* kleiner Pfeil unter dem Tooltip */
.info-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--mh-text) transparent transparent transparent;
}

.info-tooltip:hover .info-tooltip-text {
    visibility: visible;
    opacity: 1;
}



/* ===== TESTWEISE: Inputs & Buttons neu gestylt ===== */

.content input[type="text"],
.content input[type="number"],
.content input[type="email"],
.content input[type="password"],
.content input[type="date"],
.content input[type="search"],
.content textarea,
.content select {
    border: 1px solid var(--mh-rand-grau-satt);
    border-radius: 4px;
    padding: 1px 4px;
    margin-right: 0;
}

.content input[type="submit"],
.content input[type="button"],
.content button {
    background-color: #6bb6e8;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 1px 8px;
    line-height: 1.3;
    margin-left: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.content input[type="submit"]:hover,
.content input[type="button"]:hover,
.content button:hover {
    background-color: #4a9edb;
}


/* ==========================================================================
   TEIL 2 - DESIGNLINIE
   Komponenten der schrittweise ueberarbeiteten Seiten. Wiederverwendbare
   Bausteine: order-section / kv-row / order-actions-bar + order-pill /
   list-row / order-empty / count-badge / order-posi-menu / mh-overlay.
   ========================================================================== */


/* Persoenliche Sidebar-Farbe je Mitarbeiter, am Ende der Hauptnavi (nur lokal
   im jeweiligen Browser gespeichert, siehe JS in core/header.inc.php) */
.sidebar-colorpicker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 10px 10px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.sidebar-colorpicker label {
    font-size: 11px;
    color: var(--mh-sidebar-text-2);
    flex: 1;
}

.sidebar-colorpicker input[type="color"] {
    width: 30px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.sidebar-colorpicker button {
    font-size: 11px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: none;
    color: var(--mh-sidebar-text);
    cursor: pointer;
}

.sidebar-colorpicker button:hover {
    background: rgba(255,255,255,0.1);
}

/* Kleine Formular-Zeilen (Bestellhinweis / Lieferscheininfo) */
.order-infobar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
}

/* align-items: stretch statt center - dasselbe Mittel wie in .knopfreihe:
   der "speichern"-Knopf (padding 1px aus TEIL 1) war dadurch spuerbar
   flacher als das Textfeld daneben (padding 5px + Rand) und sass mitten
   in der Zeile. Jetzt gibt das Feld die Hoehe vor, der Knopf zieht mit -
   ohne dass irgendwo eine Pixelhoehe steht. Die Beschriftung davor soll
   nicht mitwachsen, sondern mittig daneben stehen. */
.order-infobar form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.order-infobar form > span {
    align-self: center;
}

/* Waagrechter Innenabstand bleibt, senkrecht macht das stretch die Hoehe */
.order-infobar input[type="submit"] {
    padding-left: 14px;
    padding-right: 14px;
}

.order-infobar input[type="text"] {
    width: 300px;
    padding: 5px 8px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 5px;
}

.order-warning {
    background-color: var(--mh-rot);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.order-warning a {
    color: #fff;
    text-decoration: underline;
}

/* Hauptraster: zwei Karten nebeneinander */
.order-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

@media (max-width: 950px) {
    .order-grid { grid-template-columns: 1fr; }
}

/* Zwei Karten nebeneinander, gleich hoch (order_anfrage.php). Das Raster
   selbst bleibt bei align-items: start - order.php braucht das so. Der
   Aussenabstand der Karten faellt hier weg, sonst waere die rechte Karte um
   ihn kuerzer als die Zeile. */
.order-grid--gleich { align-items: stretch; }
.order-grid--gleich > .order-card { margin-bottom: 0; }

/* Ein Knopf als Formular im Kopf eines Abschnitts ("Angebot erstellen"). */
.order-section__header .kopf-form { margin: 0; display: flex; }
.content .order-section__header .kopf-form .order-pill { margin: 0; font-weight: normal; }
/* Mit dem Knopf wuerde der Kopf 9 px hoeher als seine Nachbarn. */
.order-section__header:has(.kopf-form) { padding-top: 6px; padding-bottom: 6px; }

/* Datum o. ae. rechts im Kopf: die Abstaende von .report-meta sind fuer die
   Zeile unter einer Ueberschrift gedacht und machten jeden Kopf, in dem sie
   steht, hoeher als die daneben (Anfrage 40 gegen Kunde 37 px, 16.09.2026). */
.order-card__header .report-meta,
.order-section__header .report-meta { margin: 0; line-height: normal; }

/* Ein Textfeld ueber die ganze Breite seiner Zeile. */
.content textarea.feld-breit,
.content input.feld-breit,
.content select.feld-breit { width: 100%; box-sizing: border-box; }
/* Einzeilige Felder in derselben Hoehe wie im Raster daneben */
.content input.feld-breit,
.content select.feld-breit { height: 30px; }

/* Hinweis unter einem Feld in den Stammdatenformularen (shops.php): ohne das
   zog der negative Abstand von .report-meta den Text ins Textfeld darueber. */
.search-field + .report-meta { margin-top: 4px; }


/* ── Anfragen & Angebote: die gemeinsame Liste (order_anfragen.php) ── */

/* Ein Angebot zu einer Anfrage steht eingerueckt unter ihr. Die Einrueckung
   kommt aus einem Strich in der Zelle und nicht aus padding-left: die Spalte
   ist .nicht-umbrechen, ein Einzug am <td> haette die Nummer aus der Spalte
   geschoben, sobald die Tabelle eng wird. */
.vorgang-liste tr.vorgang-kind td { background: var(--mh-flaeche); }
.vorgang-liste tr.vorgang-kind td:first-child { padding-left: 8px; }

.vorgang-kind__strich {
    display: inline-block;
    width: 14px;
    margin-right: 6px;
    border-bottom: 1px solid var(--mh-rand);
    vertical-align: middle;
}


/* ── Anfragen & Angebote in der Ticket-Seitenleiste ─────────────────── */

/* Ein Angebot zu einer Anfrage haengt unter ihr */
.list-row--kind { padding-left: 14px; border-left: 2px solid var(--mh-rand); }

.vorgang-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.content .vorgang-aktionen .order-pill { margin: 0; }

/* Das Feld fuer eine AN-/AG-Nummer: so breit wie sein Inhalt, nie breiter
   als die Spalte (die Seitenleiste ist schmal). */
.content input.feld-nummer {
    flex: 1 1 130px;
    min-width: 0;
    margin: 0;
    height: 30px;
    box-sizing: border-box;
}

.vorgang-meldung { margin: 8px 0 0; font-size: 12px; }
.vorgang-meldung--fehler { color: var(--mh-rot-dunkel); }


/* ── Angebot (order_angebot.php, 16.09.2026) ───────────────────────── */

/* Alles, was man mit dem Angebot tut, in einer Leiste oben */
.angebot-aktionen {
    /* Eine Hoehe fuer alle Bedienelemente der Leiste (docs/module/designlinie.md:
       eine Hoehenvariable am Baustein, keine Einzelkorrekturen). Ohne sie war
       "Stand setzen" samt Pulldown 41 px, der Rest 33 px. */
    --angebot-hoehe: 34px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
}

.angebot-aktionen .knopfreihe { align-items: center; }

/* Die Reihen stehen hier NEBENeinander - der Abstand fuer untereinander
   stehende Knopfreihen wuerde alle ausser der ersten 8 px nach unten ruecken. */
.angebot-aktionen > .knopfreihe + .knopfreihe { margin-top: 0; }

.content .angebot-aktionen select,
.content .angebot-aktionen input[type="submit"],
.content .angebot-aktionen button,
.content .angebot-aktionen a.btn-primary,
.content .angebot-aktionen a.btn-secondary {
    height: var(--angebot-hoehe);
    box-sizing: border-box;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.content .angebot-aktionen a.btn-primary,
.content .angebot-aktionen a.btn-secondary,
.content .angebot-aktionen button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.angebot-info {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mh-text-leise);
}

.angebot-info + .angebot-info { margin-top: 2px; }
.angebot-info--hinweis { font-style: italic; }
.angebot-info--fehler { color: var(--mh-rot-dunkel); }

/* Checkliste unter der Aktionsleiste: was zum Verschicken noch fehlt */
.angebot-check {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.7;
}

.angebot-check__zeile { color: var(--mh-text-leise); }
.angebot-check__zeile i { width: 14px; margin-right: 4px; }
.angebot-check__zeile--ok i { color: var(--mh-gruen); }
.angebot-check__zeile--fehlt { color: var(--mh-rot-dunkel); }
.angebot-check__zeile--warnung { color: var(--mh-orange-text); }

/* Vorschlag "Adresse aus Bestellung #... uebernehmen" unter dem E-Mail-Feld */
.adressvorschlag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12px;
    color: var(--mh-text-leise);
}

.content .adressvorschlag .order-pill { margin: 0; }

/* Vorschlagsliste der Artikelsuche unter dem Namensfeld. */
.artikelsuche {
    /* fixed und an <body>: die Tabelle steht in .tabelle-scroll (overflow-x:
       auto), und ein Kasten darin wird unten abgeschnitten - ausgerechnet bei
       der Eingabezeile. Die Koordinaten setzt core/angebot_formular.js, alles
       Uebrige steht hier. */
    position: fixed;
    z-index: 1000;
    width: max-content;
    min-width: 280px;
    max-width: 90vw;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid var(--mh-blau);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.artikelsuche__zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--mh-rand);
}

.artikelsuche__zeile:last-child { border-bottom: 0; }
.artikelsuche__zeile--aktiv { background: var(--mh-blau); }
.artikelsuche__zeile--aktiv .artikelsuche__name,
.artikelsuche__zeile--aktiv .artikelsuche__meta { color: #fff; }

.artikelsuche__bild {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
    background: var(--mh-flaeche);
    border-radius: 4px;
}

.artikelsuche__text { display: flex; flex-direction: column; min-width: 0; }
.artikelsuche__name { font-size: 13px; color: var(--mh-text); }
.artikelsuche__meta { font-size: 11px; color: var(--mh-text-leise); }

/* Positionen und Summe in einer Tabelle; jede Zeile ist ein Formular */
.angebot-posten td { vertical-align: top; }

.content .angebot-posten input[type="text"],
.content .angebot-posten input[type="number"],
.content .angebot-posten select,
.content .angebot-posten button {
    height: 28px;
    box-sizing: border-box;
    margin: 0;
}

.content .angebot-posten button { padding: 0 10px; line-height: 1; }

.angebot-posten .ap-pos { width: 32px; color: var(--mh-text-leise); }
.angebot-posten td.ap-pos,
.angebot-posten td.ap-summe { padding-top: 13px; }
/* Nur die Bezeichnung waechst, alle anderen Spalten so schmal wie ihr Inhalt.
   Sonst verteilt die Tabelle den freien Platz auf alle, und die Mindestbreiten
   ergaben zusammen 8 px mehr als die Seite (waagrechter Rollbalken). */
.angebot-posten .ap-name { min-width: 220px; }
.angebot-posten th:not(.ap-name),
.angebot-posten td:not(.ap-name):not([colspan]) { width: 1%; white-space: nowrap; }
.angebot-posten .ap-name input { width: 100%; }
.content .angebot-posten input.ap-hinweis { margin-top: 4px; font-size: 12px; }
.angebot-posten .ap-sku input { width: 110px; }
.angebot-posten .ap-anzahl input { width: 56px; text-align: right; }
.angebot-posten .ap-preis input { width: 72px; text-align: right; }
.angebot-posten .ap-mwst select { width: 66px; }
.angebot-posten .ap-summe { white-space: nowrap; }
.angebot-posten .ap-aktion .knopfreihe { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
.angebot-posten tr.ap-neu td { background: var(--mh-flaeche); }

.angebot-posten .ap-summenzeile td { border: 0; padding-top: 2px; padding-bottom: 2px; }
.angebot-posten .ap-summenzeile--gesamt td { padding-top: 10px; font-size: 14px; border-top: 1px solid var(--mh-rand); }
/* Der Nachlass soll sich von den uebrigen Summenzeilen abheben - er ist das
   Einzige, was Geld abzieht. */
.angebot-posten .ap-summenzeile--rabatt td { color: var(--mh-gruen); }

/* Konditionen als Raster statt einer Zeile je Feld */
.angebot-konditionen {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px 12px;
}

.angebot-konditionen .ak-feld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.angebot-konditionen .ak-feld > span { font-size: 11px; color: var(--mh-text-label); }

.content .angebot-konditionen input,
.content .angebot-konditionen select {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    margin: 0;
}

.content .angebot-konditionen textarea { width: 100%; box-sizing: border-box; margin: 0; }
.angebot-konditionen .ak-feld--breit { grid-column: span 2; }
.angebot-speichern { margin-top: 12px; }

@media (max-width: 700px) {
    .angebot-konditionen { grid-template-columns: 1fr; }
    .angebot-konditionen .ak-feld--breit { grid-column: auto; }
}

/* Datum mit Uhrzeit als Textfeld (time.php, "16.09.2026 14:30") und ein
   Ein-Buchstaben-Feld daneben. max-width, damit es mobil nicht uebersteht. */
.content input.feld-zeit { width: 170px; max-width: 100%; box-sizing: border-box; }
.content input.feld-typ { width: 48px; text-transform: uppercase; box-sizing: border-box; }

.order-card {
    background: #fff;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.order-card__header {
    background: var(--mh-hell);
    border-bottom: 1px solid var(--mh-rand);
    padding: 10px 16px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 2px;
}

.order-card__header .order-card__extra {
    font-weight: normal;
    font-size: 12.5px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.order-card__body {
    padding: 4px 16px 12px 16px;
}

/* Label/Wert Zeilen statt starrer Tabellenspalten */
.kv-row {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f1f1;
}

.kv-row:last-child {
    border-bottom: none;
}

/* Steht in der Wertspalte ein Bedienelement statt Text, sitzt die
   Beschriftung daneben sonst oben und das Element wirkt abgesackt.
   Bewusst ein Zusatz und nicht die Grundregel: Zeilen mit mehrzeiligem
   Wert (Anschriften) brauchen die Beschriftung weiterhin oben. */
.kv-row--mitte {
    align-items: center;
}

.kv-label {
    flex: 0 0 125px;
    color: var(--mh-text-label);
    font-size: 12.5px;
    padding-top: 2px;
}

.kv-value {
    flex: 1;
    min-width: 0;
}

.kv-value form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.kv-value select {
    max-width: 220px;
}

/* design_copyfunction() setzt white-space:nowrap inline - in einer Karte laeuft
   eine lange Email damit ueber den Rand hinaus (.order-card hat overflow:hidden,
   der Rest wird also abgeschnitten). Hier bewusst wieder freigegeben. */
.kv-value .copy-wrap {
    white-space: normal !important;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

/* Kleines "i"-Icon für ergänzende Hinweise per Tooltip (title-Attribut) statt
   fest sichtbarem grauem Hilfstext - hält Formulare mit vielen Feldern
   aufgeräumt (z.B. wawi_update_mass.php). */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mh-rand-leise);
    color: var(--mh-blau);
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    line-height: 1;
    cursor: help;
}

.info-icon:hover {
    background: var(--mh-rand);
}

/* Responsives Formularraster für Suchkriterien/Filter mit mehreren kurzen
   Feldern nebeneinander statt einer langen Zeilenliste (z.B. wawi_update_mass.php). */
.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 20px;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-field label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: bold;
    color: var(--mh-text);
}

.search-field input[type="text"] {
    width: 100%;
}

.order-address {
    line-height: 1.55;
    padding: 4px 0 10px 0;
}

.order-address__maps {
    display: inline-block;
    margin-top: 4px;
    font-size: 12.5px;
}

/* E-Mail Aktionen */
.order-actions-bar {
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.order-actions-bar__label {
    font-weight: bold;
    color: var(--mh-text);
    font-size: 12.5px;
}

/* Schlichte Aktions-/Info-Zeile OHNE eigene Box - für Inhalte, die schon in
   einer umrahmten Karte stecken (z.B. .order-section__body), damit keine
   "Box-in-Box" entsteht. Gleiches Flex-Layout wie .order-actions-bar. */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 10px;
}

.action-row:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   KNOPFREIHE - mehrere Knoepfe nebeneinander, immer gleich hoch.

   .btn-primary/.btn-secondary (Innenabstand 8px, Schrift 13px) und
   .order-pill (4px, 12,5px, plus Rand) sind absichtlich unterschiedlich
   gross: die Pille ist fuer Listen, Filterzeilen und Kartenkoepfe gedacht,
   der Knopf fuer Formulare. Stehen sie aber in EINER Reihe nebeneinander,
   sieht der Groessenunterschied nach Versehen aus.

   align-items: stretch loest das ohne ausgerechnete Pixelwerte: der
   groessere Knopf gibt die Hoehe vor, die anderen ziehen mit - auch dann
   noch, wenn sich Schriftgroesse oder Innenabstand irgendwann aendern.
   .order-pill und .btn-* zentrieren ihren Inhalt selbst, die Beschriftung
   sitzt also weiterhin mittig.

   IMMER verwenden, sobald in einer Zeile mehr als ein Knopf steht - nie
   Hoehen von Hand angleichen. Erste Verwendung: sys_push.php
   ("Speichern" + "Jetzt senden").
   ========================================================================== */
.knopfreihe {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

/* ".content input" aus TEIL 1 gibt jedem Feld 4 px Aussenabstand. In einer
   Zeile mit align-items: stretch wird der Knopf dadurch 8 px niedriger als
   das Pulldown daneben und sitzt 4 px tiefer - genau der Fehler, den
   .knopfreihe verhindern soll (gemessen 16.09.2026 in order_angebot.php,
   "Stand setzen": Pulldown 41 px, Knopf 33 px). */
.content .knopfreihe input,
.content .knopfreihe select,
.content .knopfreihe button,
.content .knopfreihe textarea {
    margin: 0;
}

/* Erklaerender Kleintext neben den Knoepfen soll nicht mitwachsen, sondern
   mittig daneben stehen (z.B. die Rueckmeldung nach dem Anmelden in
   push_register.php) */
.knopfreihe > .kv-hinweis {
    align-self: center;
    margin-top: 0;
}

/* Ebenso Kennzeichen und schlichte Links ("Zurücksetzen") neben den Knöpfen */
.knopfreihe > .status-badge,
.knopfreihe > a:not([class]) {
    align-self: center;
}

/* Textfelder in einer .knopfreihe: Breite als Wunschmaß, das auf schmalen
   Schirmen nachgibt - statt style="width:450px" (produktion.php,
   tickets_adressbuch.php, tickets_konfig.php; dort standen Feld und Knopf
   bis 17.09.2026 in 19 gegen 33 px nebeneinander) */
.content .knopfreihe input.feld-lang   { flex: 0 1 450px; min-width: 0; }
.content .knopfreihe input.feld-mittel { flex: 0 1 320px; min-width: 0; }

/* Viele Haken nebeneinander, die sich auf die Breite verteilen
   (wawi_empfehlungen.php: ausgeschlossene Produkttypen) */
.haken-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
    margin-bottom: 12px;
}

/* Ein Formular mit .knopfreihe, unter dem noch etwas folgt */
.knopfreihe--luft { margin-bottom: 14px; }

/* Selektor doppelt mit .content davor - genau wie bei .btn-primary weiter
   unten: ".content button" / ".content input[type=submit]" aus TEIL 1 sind
   spezifischer als eine blosse Klasse und faerben die Pille sonst hellblau
   ein, sobald sie an einem <button> statt an einem <a> haengt (so gesehen bei
   "Jetzt senden" in sys_push.php). Alle .order-pill--*-Abwandlungen weiter
   unten brauchen die Verdopplung deshalb ebenfalls, sonst verlieren sie
   gegen diese Regel hier. */
.order-pill, .content .order-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--mh-hell);
    border: 1px solid var(--mh-rand);
    color: var(--mh-blau);
    /* <button> erbt weder Schriftart noch -groesse von der Seite */
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.order-pill:hover, .content .order-pill:hover {
    background: var(--mh-hell-hover);
    border-color: var(--mh-rand-hover);
    color: var(--mh-blau);
    text-decoration: none;
}

/* Sektionstitel (Versand, Positionen, Protokoll) */
.order-section {
    margin-bottom: 24px;
}

.order-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--mh-hell);
    border: 1px solid var(--mh-rand);
    border-radius: 8px 8px 0 0;
    padding: 10px 16px;
    font-weight: bold;
    font-size: 14.5px;
}

/* Fuehrendes Symbol in einer Abschnitts-Kopfzeile (Sprechblase bei "Alle
   Nachrichten", Uhr beim Scan-Protokoll usw.). Im Markup steht dahinter nur ein
   Leerzeichen, das bei fetter 14,5px-Schrift zu knapp am Text klebt.
   Bewusst nur auf das erste Symbol im Titel-Span: Symbole in Knoepfen (.order-pill)
   der gleichen Kopfzeile bringen ihren Abstand ueber deren eigenes gap mit. */
.order-section__header > span > i:first-child {
    margin-right: 5px;
}

.order-section__header .order-card__extra {
    font-weight: normal;
    font-size: 12.5px;
}

.order-section__body {
    background: #fff;
    border: 1px solid var(--mh-rand-leise);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 14px 16px;
}

/* Karte OHNE Kopfzeile: den oberen Rand und die oberen Ecken liefert sonst
   der __header. Fehlt er, sieht die Karte oben abgeschnitten aus - der Body
   traegt sie dann selbst. */
.order-section__body:first-child {
    border-top: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
}

/* Versand: eine Karte pro Sendung */
.shipment {
    border-bottom: 1px solid #f1f1f1;
    padding: 12px 0;
}

.shipment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.shipment__head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.shipment__date {
    color: var(--mh-text-label);
    font-size: 12.5px;
}

/* Noch kein Versanddatum - blasser und kursiv, damit der Platzhalter nicht wie
   eine echte Angabe aussieht */
.shipment__date--offen {
    color: var(--mh-text-leise);
    font-style: italic;
}

.shipment__row {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-top: 1px dashed var(--mh-rand-grau);
    font-size: 13px;
}

.shipment__row:first-of-type {
    border-top: none;
}

/* Erzeugtes DHL-Label - eigene, deutlich hervorgehobene Box statt einer
   weiteren gestrichelten Zeile, damit auf einen Blick klar ist, welche
   Pakete schon ein Label haben (Unterschied zu den Gewichts-Buttons
   darunter, die ein NEUES Label erzeugen) */
.shipment__label {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--mh-gruen-hell);
    border: 1px solid var(--mh-gruen-rand);
    border-radius: 6px;
    font-size: 13px;
    color: var(--mh-gruen);
}

.shipment__label .order-actions-bar__label,
.shipment__label a {
    color: var(--mh-gruen);
}

/* Klammer um die Aktionen des Labels. Auf dem Desktop loest sie sich auf, die
   Aktionen sind also ganz normale Kinder der Flex-Zeile - am Handy wird daraus
   im @media-Block eine eigene zweite Zeile (siehe dort). */
.shipment__label-aktionen {
    display: contents;
}

/* Rechtsbuendig ans Zeilenende (Storno bzw. "Label storniert!") */
.shipment__label-ende {
    margin-left: auto;
}

.shipment__label--cancel {
    background: var(--mh-flaeche-grau);
    border-color: var(--mh-rand-grau);
    color: var(--mh-text-label);
}

.shipment__label--cancel .order-actions-bar__label,
.shipment__label--cancel a {
    color: var(--mh-text-label);
}

.label-weights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.label-weights .label-weights__typ {
    font-weight: bold;
    font-size: 12.5px;
    align-self: center;
    margin-right: 2px;
}

/* Bestellpositionen */
.posi-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}

.posi-row:last-child {
    border-bottom: none;
}

/* Position mit Personalisierung/Wunschname etwas absetzen */
.posi-row--wunsch {
    background: var(--mh-flaeche-grau);
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: 6px;
    border-bottom-color: transparent;
}

.posi-bundle {
    font-weight: bold;
    padding: 8px 0;
    color: var(--mh-blau);
}

.posi-typ {
    flex: 0 0 130px;
    padding-top: 2px;
}

.posi-artnr {
    color: var(--mh-text-leise);
    font-size: 12px;
    margin-top: 2px;
}

.posi-qty {
    flex: 0 0 40px;
    font-weight: bold;
}

.posi-main {
    flex: 1;
    min-width: 0;
}

.posi-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.posi-title__name {
    color: #000;
    font-weight: normal;
}

.posi-bestand {
    font-size: 12px;
    color: var(--mh-text-leise);
}

.posi-bestand--korr {
    color: var(--mh-orange-text);
    font-weight: bold;
}

/* Herstellungsart-Hinweis (Textildruck, JIT, Rubs, Schokolade, Grusskarten) */
.posi-herstellung {
    display: inline-block;
    font-size: 11.5px;
    font-weight: bold;
    color: #556;
    background: var(--mh-grau);
    padding: 2px 9px;
    border-radius: 10px;
    margin-top: 5px;
}

/* In der Produkttyp-Spalte (order.php Bestellpositionen) - kein Abstand
   noetig, dort steht sie nicht unter, sondern neben Menge/Titel */
.posi-typ .posi-herstellung {
    margin-top: 0;
}

/* Wunschname / Personalisierung - deutlich abgesetzte Box */
.posi-wunsch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    padding: 7px 10px;
    background: var(--mh-notiz);
    border: 1px solid var(--mh-notiz-rand);
    border-radius: 6px;
}

.posi-wunsch__label {
    font-size: 11.5px;
    font-weight: bold;
    color: #8a6d00;
    white-space: nowrap;
}

.posi-wunsch form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.posi-wunsch input[type="text"] {
    flex: 1 1 auto;
    min-width: 70px;
    max-width: 200px;
    padding: 4px 8px;
    border: 1px solid var(--mh-rand-grau);
    border-radius: 4px;
}

.posi-wunsch input[type="submit"] {
    flex: 0 0 auto;
}

/* Unaufdringlicher Link statt Fehlerbox, wenn (noch) kein Wunschtext hinterlegt
   ist - nicht jedes Produkt braucht zwingend einen. Details/Summary wie bei
   .order-posi-menu, damit das Eingabefeld erst bei Bedarf erscheint. */
.posi-wunsch-add {
    margin-top: 6px;
    font-size: 12.5px;
}

.posi-wunsch-add > summary {
    list-style: none;
    cursor: pointer;
    color: var(--mh-blau);
}

.posi-wunsch-add > summary::-webkit-details-marker {
    display: none;
}

.posi-wunsch-add > summary:hover {
    text-decoration: underline;
}

.posi-wunsch-add form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    margin-top: 6px;
}

.posi-wunsch-add input[type="text"] {
    flex: 1 1 auto;
    min-width: 70px;
    max-width: 200px;
    padding: 4px 8px;
    border: 1px solid var(--mh-rand-grau);
    border-radius: 4px;
}

.posi-wunsch-add input[type="submit"] {
    flex: 0 0 auto;
}

/* Position aendern - Formular direkt in der Zeile statt in einer eigenen Seite
   (frueher order_posi.php mit target="_blank"). Aufklappen ueber details/summary
   wie bei .posi-wunsch-add darueber, damit es ohne Javascript auskommt.
   Beschriftung ueber dem Feld, weil die Zeile sonst nicht zu lesen ist: vier
   gleich aussehende Kaestchen nebeneinander sagen nicht, welches der Preis ist. */
.posi-edit {
    margin-top: 6px;
    font-size: 12.5px;
}

.posi-edit > summary {
    list-style: none;
    cursor: pointer;
    color: var(--mh-blau);
}

.posi-edit > summary::-webkit-details-marker {
    display: none;
}

.posi-edit > summary:hover {
    text-decoration: underline;
}

.posi-edit__form {
    /* Eine Hoehe fuer alle Bedienelemente der Zeile, an genau einer Stelle - wie
       --wawi-hoehe in wawi.php und --retoure-hoehe bei den Retouren. Ohne das
       sitzt der Knopf ein paar Pixel tiefer als die Felder daneben. */
    --posi-edit-hoehe: 30px;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;   /* alle Felder sitzen auf einer Grundlinie */
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    background: var(--mh-flaeche-grau);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
}

.posi-edit__feld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.posi-edit__feld > span {
    font-size: 11px;
    color: var(--mh-text-label);
}

/* input im Selektor, weil .content input[type=text] aus TEIL 1 sonst gewinnt
   (Attributselektor zaehlt wie eine Klasse) - siehe CLAUDE.md */
.content .posi-edit__form input[type="text"],
.content .posi-edit__form input[type="number"],
.content .posi-edit__form select,
.content .posi-edit__form button,
.content .posi-edit__form input.btn-primary {
    height: var(--posi-edit-hoehe);
    box-sizing: border-box;
}

/* Die Positionen eines Angebots (order_angebot.php) nutzen dieselbe Zeile - dort
   stehen ein Pulldown (MwSt-Satz) und ein Knopf zum Loeschen daneben, und die
   muessen genauso hoch sein wie die Felder (docs/module/designlinie.md). */
.content .posi-edit__form button {
    padding: 0 12px;
    line-height: 1;
}

/* .btn-primary bringt padding: 8px mit - bei fester Hoehe rechnet das dagegen
   und die Beschriftung sitzt nicht mittig (siehe CLAUDE.md) */
.content .posi-edit__form input.btn-primary {
    padding: 0 12px;
    line-height: 1;
}

.posi-edit__feld--anzahl input { width: 70px; }
.posi-edit__feld--mwst   select { width: 90px; }
.posi-edit__feld--sku    input { width: 130px; }
.posi-edit__feld--artnr  input { width: 150px; }
.posi-edit__feld--preis  input { width: 90px; }

.posi-edit__feld--name {
    flex: 1 1 220px;
}

/* Derselbe Aussenabstand wie oben - hier mit align-items: flex-end, dort
   rutscht dadurch das Pulldown 4 px unter die Felder daneben. */
.content .posi-edit__form input,
.content .posi-edit__form select,
.content .posi-edit__form button {
    margin: 0;
}

/* Bis 16.09.2026 trugen in order_angebot.php "Bezeichnung" UND "Hinweis"
   die Klasse --name. Zwei wachsende Felder teilen sich den Rest, und weil
   die Zeile einer bestehenden Position mehr Elemente hat als die Zeile
   "neue Position" (Nummer, Summe, speichern, loeschen), brach jede anders
   um: Artikelnummer stand einmal bei x=744 und einmal bei x=508, nichts
   fluchtete. Der Hinweis hat jetzt eine eigene Spalte, davor ein fester
   Umbruch - damit liegen beide Zeilen deckungsgleich uebereinander. */
.posi-edit__feld--hinweis {
    flex: 1 1 320px;
}

/* Feste Breite, damit die erste Spalte fluchtet, egal ob dort "1" oder
   "neu" steht. */
.posi-edit__feld--pos {
    flex: 0 0 34px;
}

/* Erzwungener Zeilenumbruch in einer flex-wrap-Zeile. */
.posi-edit__umbruch {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.posi-edit__namewrap {
    position: relative;
    display: block;
}

.posi-edit__feld--name input {
    width: 100%;
}

.posi-edit__varianten {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--mh-text-label);
    line-height: 1.6;
}

.posi-edit__varianten-titel {
    font-weight: bold;
}

.posi-edit__variante--aktiv {
    color: var(--mh-blau);
    font-weight: bold;
}

.posi-pers {
    font-size: 12.5px;
    color: var(--mh-text-label);
    margin-top: 4px;
}

.posi-side {
    flex: 0 0 auto;
    text-align: right;
    font-size: 12.5px;
    white-space: nowrap;
}

.posi-new-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
}

/* Protokoll */
.protokoll-entry {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f1f1;
}

.protokoll-entry:last-child {
    border-bottom: none;
}

/* Manuell über das Eingabefeld erstellte Einträge (orpr_typ = NOTIZ) optisch von den
   automatisch erzeugten Status-Einträgen abheben - gelbe Karte statt schlichter Zeile */
.protokoll-entry--notiz {
    background: var(--mh-notiz);
    border: 1px solid var(--mh-notiz-rand);
    border-bottom: 1px solid var(--mh-notiz-rand);
    border-radius: 6px;
    padding: 9px 12px;
    margin: 4px 0;
}

.protokoll-notiz-badge {
    display: inline-block;
    background: var(--mh-blau);
    color: #fff;
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
}

.protokoll-date {
    flex: 0 0 145px;
    color: var(--mh-text-label);
    font-size: 12px;
}

.protokoll-text {
    flex: 1;
}

.protokoll-del {
    flex: 0 0 auto;
    font-size: 12px;
}

.order-empty {
    color: var(--mh-text-leise);
    font-size: 13px;
    padding: 8px 0;
}

/* Aktionen-Menü (Bestellpositionen: Bestand korrigieren, Shopify-Abgleich, Bestellsumme) */
.order-posi-menu { position: relative; display: inline-block; }
.order-posi-menu > summary {
    list-style: none; cursor: pointer; color: var(--mh-blau); font-weight: normal; font-size: 12.5px;
}
.order-posi-menu > summary::-webkit-details-marker { display: none; }
.order-posi-menu[open] > summary { text-decoration: underline; }
.order-posi-menu__body {
    position: absolute; right: 0; top: 100%; z-index: 1000;
    background: var(--mh-flaeche); border: 1px solid var(--mh-blau); border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); min-width: 220px; padding: 4px 0;
}
.order-posi-menu__body a {
    display: block; padding: 7px 12px; font-size: 13px; font-weight: normal;
    color: #000; text-decoration: none; white-space: nowrap;
}
.order-posi-menu__body a:hover { background: var(--mh-blau); color: #fff; }

/* Dezente Anzeige-/Utility-Leiste (z.B. "Fertige ausblenden", "Seite drucken")
   - bewusst KEIN order-pill/-actions-bar, damit sich reine Anzeigeoptionen
   klar von echten Aktions-Buttons abheben. Rechtsbündig über dem eigentlichen
   Inhalt, mit dünner Trennlinie als grafische Abgrenzung. */
.view-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 0 2px 10px 2px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--mh-grau);
    font-size: 12px;
    color: var(--mh-text-leise);
}

.view-toolbar a {
    color: var(--mh-text-leise);
    font-weight: normal;
    text-decoration: none;
}

.view-toolbar a:hover {
    color: var(--mh-blau);
    text-decoration: underline;
}

/* Generische Listenzeile für Report-/Kontrollseiten (z.B. sys_control.php) */
.list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
}

.list-row:last-child {
    border-bottom: none;
}

/* Express-Bestellung innerhalb einer Liste hervorheben (z.B. pack_scan.php Packlisten) -
   gleicher Aufbau wie .posi-row--wunsch, nur rot statt gelb. */
.list-row--express {
    background: var(--mh-rot-hell);
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: 6px;
    border-bottom-color: transparent;
}

.list-row__main {
    flex: 1;
    min-width: 0;
}

.list-row__meta {
    color: var(--mh-text-leise);
    font-size: 12px;
}

/* Vormerkungen je Produkt (wawi_remind.php). Datum und Loeschknopf halten ihre
   Breite, die E-Mail nimmt den Rest. */
.remind-tabelle__datum,
.remind-tabelle__aktion {
    white-space: nowrap;
    width: 1%;
}

.remind-tabelle__datum {
    color: var(--mh-text-leise);
    font-size: 12px;
}

/* E-Mail-Adressen haben keine Leerzeichen, an denen ein Browser umbrechen
   koennte - ohne break-word schiebt eine lange Adresse auf dem Handy die
   ganze Tabelle in die Breite. */
.remind-tabelle__mail {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Offene Packliste als Spalten (pack_scan.php). Aktion, Zeit und Bestellnummer
   sollen nicht umbrechen - die Empfaengerspalte darf dafuer den Rest nehmen. */
.pack-scan-tabelle__aktion,
.pack-scan-tabelle__zeit,
.pack-scan-tabelle__nr,
.pack-scan-tabelle__hinweis {
    white-space: nowrap;
    width: 1%;
}

.pack-scan-tabelle__zeit {
    color: var(--mh-text-leise);
    font-size: 12px;
}

/* Express-Bestellung: dieselbe Signalfarbe wie vorher an der .list-row, jetzt
   auf der ganzen Zeile. Ohne das td-Prefix gewinnt der Zebrastreifen der
   designbox. */
.pack-scan-tabelle__express td {
    background: var(--mh-rot-hell);
}

/* Mitarbeiter an der offenen Packliste (pack_scan.php) - bewusst kraeftiger als
   der Rest der Kopfzeile: beim Packen ist die wichtigste Frage, wer die Liste
   gerade in der Hand hat. */
.pack-liste__mitarbeiter {
    font-weight: bold;
    font-size: 15px;
    /* Der Kopf ist ein Flex mit space-between. Ohne das auto-Margin wuerde der
       Name als mittleres Kind auf halbe Strecke rutschen - so klebt er am Knopf
       und "Liste #N" bleibt rechts aussen. */
    margin-right: auto;
}

.list-row__actions {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12.5px;
}

/* Icons (z.B. gelesen/löschen bei glocke.php) links vor der Meldung statt
   rechts als Aktion danach */
/* Die Symbole selbst sind .zeilen-aktion (rahmenlos, farbiger Grund erst beim
   Ueberfahren) und bringen Farbe, Groesse und Innenabstand mit - hier deshalb
   nur noch der Behaelter. Eigene Farbregeln standen frueher hier; sie waren
   spezifischer als .zeilen-aktion und haetten das Rot des Loeschsymbols
   ueberschrieben. */
.list-row__icons {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
}

/* Bereits gelesene Meldung optisch zurueckgenommen */
.list-row--gelesen {
    color: #999;
}

.list-row--gelesen .list-row__main a {
    color: #999;
}

/* Listeneintrag mit Titel + Code-/Debug-Ausgabe darunter (z.B. GraphQL-Mutation)
   - generisch gehalten fuer weitere Seiten mit
   ähnlicher "Eintrag + Rohdaten"-Anzeige. */
.debug-entry {
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}

.debug-entry:last-child {
    border-bottom: none;
}

.debug-entry__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: bold;
}

.debug-entry__code {
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre;
    overflow-x: auto;
}

/* Zähler-Badge (z.B. Anzahl Einträge in einem Section-Header) */
/* Zaehler-Badge (Anzahl Eintraege in einem Section-Header).
   Der Grund war frueher --mh-hell - dieselbe Farbe, die .order-section__header
   selbst hat. Die Flaeche war damit unsichtbar und uebrig blieb eine blaue Zahl
   mit unerklaerlichem Abstand drumherum. Jetzt gefuelltes Markenblau, das sich
   vom hellen Kopf abhebt (Rot bleibt den Dringlichkeits-Badges in Topbar und
   Ticket-Ordnern vorbehalten).
   Feste Hoehe mit passender line-height statt senkrechtem Padding: der Badge
   steht mitten im Titeltext, und ein Padding haette die Zeilenbox des Kopfes
   aufgezogen. min-width haelt einstellige Zahlen rund, tabular-nums sorgt
   dafuer, dass 11 und 99 gleich breit sind. */
.count-badge {
    display: inline-block;
    min-width: 21px;
    height: 19px;
    padding: 0 7px;
    border-radius: 10px;
    background: var(--mh-blau);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 19px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    margin-left: 7px;
    /* middle richtet die Mitte des Badges an der Mitte der x-Hoehe aus, also an
       der Mitte der Kleinbuchstaben. Die optische Mitte der Kopfzeile liegt
       hoeher, weil Versalien und Oberlaengen darueber hinausragen - der Badge
       sass dadurch sichtbar zu tief. Die Verschiebung per position/top statt
       ueber vertical-align, damit die Zeilenbox des Kopfes unberuehrt bleibt
       und nichts nachrutscht. */
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* ==========================================================================
   Erweiterung (ab order.php-Redesign): semantische Status-Badges, Seitenkopf
   mit Aktionen, zweispaltiges Layout mit rechter Detail-Spalte, Notizbox.
   Generisch gehalten, da für weitere Seiten (wawi.php, ...) wiederverwendbar.
   ========================================================================== */

/* Semantische Status-Badges (im Unterschied zu .order-pill immer einfarbig-blau) */
.status-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--success { background: var(--mh-gruen-hell); color: var(--mh-gruen); }
.status-badge--warning { background: #fdf1dc; color: #92400e; }
.status-badge--danger  { background: var(--mh-rot-hell); color: var(--mh-rot-dunkel); }
.status-badge--neutral { background: var(--mh-grau); color: #556; }
/* Offene Frage statt Zustand - siehe --mh-lila-hell oben */
.status-badge--lila    { background: var(--mh-lila-hell); color: var(--mh-lila-text); }

/* Primär-Button (z.B. Hauptaktion im Seitenkopf). Selektor doppelt mit .content
   davor, weil ".content button"/".content input[type=submit]" (TEIL 1)
   sonst dank höherer Spezifität (Klasse+Element) diese Farben überschreibt,
   sobald die Klasse an einem <button>/<input type="submit"> statt <a> hängt.

   Fuer <input> reicht das .content-Praefix allerdings NICHT: ein
   Attributselektor zaehlt wie eine Klasse, ".content input[type=submit]" ist
   also (0,2,1) und schlaegt ".content .btn-primary" (0,2,0). Deshalb die
   dritte Fassung mit "input" im Selektor - gleiche Spezifitaet wie TEIL 1,
   und weil TEIL 2 spaeter in der Datei steht, gewinnt sie. Ohne das sahen die
   Speichern-Knoepfe in material.php, time.php und wawi_bestand.php weiter aus
   wie die alten hellblauen Formularknoepfe. Gilt genauso fuer .btn-secondary
   und .btn-important weiter unten. */
.btn-primary, .content .btn-primary, .content input.btn-primary {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--mh-blau);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:hover, .content .btn-primary:hover, .content input.btn-primary:hover {
    background: var(--mh-blau-hover);
    color: #fff;
    text-decoration: none;
}

.btn-primary:disabled, .content .btn-primary:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Seitenkopf: Titel + Status-Badges links, Aktionen rechts */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.page-header-bar__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.page-header-bar__title {
    font-size: 20px;
    font-weight: 700;
    color: #16202a;
}

.page-header-bar__meta {
    flex-basis: 100%;
    font-size: 12.5px;
    color: var(--mh-text-label);
    margin-top: 2px;
}

.page-header-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Zweispaltiges Layout: Hauptbereich + rechte Detail-Spalte (z.B. Kundendaten) */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .page-layout { grid-template-columns: 1fr; }
}

/* Notizbox (z.B. interner Hinweis) - gleiche Optik wie .posi-wunsch, aber allgemein nutzbar */
.note-box {
    background: var(--mh-notiz);
    border: 1px solid var(--mh-notiz-rand);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
}

/* Ein Hinweiskasten allein zwischen Abschnitten - derselbe Abstand wie
   zwischen zwei .order-section (wawi_empfehlungen.php) */
.note-box--abschnitt {
    margin-bottom: 24px;
}

.note-box__label {
    display: block;
    font-size: 11.5px;
    font-weight: bold;
    color: #8a6d00;
    margin-bottom: 4px;
}

.note-box form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.note-box input[type="text"] {
    flex: 1;
    min-width: 120px;
    padding: 5px 8px;
    border: 1px solid var(--mh-notiz-rand);
    border-radius: 5px;
}

/* ==========================================================================
   Erweiterung (ab wawi_bestellungen.php): Card-Header-Variante ohne blaues
   Banner (schlichter, wie im Claude-Design-Mockup) + Sekundär-Button.
   ========================================================================== */

.order-card__header--plain {
    background: #fff;
    border-bottom: 1px solid var(--mh-grau);
    font-size: 15px;
    font-weight: 700;
    color: #16202a;
}

.btn-secondary, .content .btn-secondary, .content input.btn-secondary {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--mh-hell);
    color: var(--mh-blau);
    font-size: 13px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:hover, .content .btn-secondary:hover, .content input.btn-secondary:hover {
    background: var(--mh-hell-hover);
    color: var(--mh-blau);
    text-decoration: none;
}

.btn-secondary:disabled, .content .btn-secondary:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Wichtiger als .btn-primary - für die eine, abschließende Haupt-Aktion einer
   Seite (z.B. Batch abschließen + freigeben), wenn daneben noch eine
   Sekundär-Aktion steht, die nicht gleich prominent wirken soll. Gleiche
   Maße wie .btn-primary, nur im dunkleren Blau der Hauptnavi (#1c6dab)
   statt im Standard-Aktionsblau, damit sie sich davon abhebt. */
.btn-important, .content .btn-important, .content input.btn-important {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: #1c6dab;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-important:hover, .content .btn-important:hover, .content input.btn-important:hover {
    background: var(--mh-blau-hover);
    color: #fff;
    text-decoration: none;
}

.btn-important:disabled, .content .btn-important:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Das Bearbeiten-Menue in der Kopfzeile (.order-posi-menu) ist absolut
   positioniert und ragt aus der Karte heraus - mit dem overflow:hidden von
   .order-card wurde es am unteren Kartenrand abgeschnitten. Das Clipping ist
   dort nur fuer die runden Ecken da, also runden Kopf- und Fusszeile hier
   selbst ab. Steht nach .order-card, damit overflow:visible gewinnt. */
.wawi2-bestellung-block {
    overflow: visible;
}

.wawi2-bestellung-block > .order-card__header {
    border-radius: 8px 8px 0 0;
}

.wawi2-bestellung-block > .wb-card__footer {
    border-radius: 0 0 8px 8px;
}

/* Bestellpositionen-Zeile (wawi_bestellungen.php) - Aufbau wie .posi-row, eigene Felder */
.wb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid #f1f1f1;
}

.wb-row:last-child {
    border-bottom: none;
}

.wb-row--done {
    background: var(--mh-flaeche);
}

.wb-checkbox {
    flex: 0 0 auto;
    width: 15px;
    display: flex;
    justify-content: center;
}

.wb-checkbox input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.wb-row__status {
    flex: 0 0 auto;
}

.wb-row__qty {
    flex: 0 0 45px;
    font-weight: bold;
    font-size: 13px;
}

.wb-row--done .wb-row__qty,
.wb-row--done .wb-row__name {
    font-weight: normal;
    color: var(--mh-text-leise);
}

/* Editierbare Stückzahl (nur $admin == 1, siehe wawi_bestellungen.php) - etwas
   breiter als die reine Textanzeige, damit Zahl + Spinner-Pfeile Platz haben */
.wb-row__qty--edit {
    flex-basis: 70px;
}

.wb-anzahl-input {
    width: 60px;
    box-sizing: border-box;
    padding: 2px 4px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
}

.wb-row__name {
    flex: 1 1 auto;
    font-size: 13px;
}

.wb-row__name a {
    color: var(--mh-text);
    font-weight: normal;
    text-decoration: none;
}

.wb-row__name a:hover {
    color: var(--mh-blau);
    text-decoration: underline;
}

.wb-row__action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
}

/* Eintrag, den es nur im Handy-Menue gibt (Sammeletiketten, wawi_bestellungen.php)
   - auf dem Desktop steht er als Direktlink in der Kopfzeile. */
.order-posi-menu__body .wb-menu-mobil {
    display: none;
}

/* Zeilen-Aktion als Icon-Knopf (OK / zuruecksetzen / Etiketten / loeschen).
   Vorher standen dort vier durch "·" getrennte Textlinks - die Zeile lief damit
   optisch zu. Die Bedeutung steht jetzt im title-Attribut. */
/* .zeilen-aktion ist derselbe Knopf generisch nutzbar - gleiche Regeln, damit
   eine Loesch-Aktion ueberall gleich aussieht (versand_label.php). */
.wb-aktion,
.zeilen-aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border-radius: 5px;
    color: var(--mh-text-leise);
    font-size: 13px;
    text-decoration: none;
}

.wb-aktion:hover,
.zeilen-aktion:hover {
    background: var(--mh-hell);
    color: var(--mh-blau);
    text-decoration: none;
}

.wb-aktion--ok:hover {
    background: var(--mh-gruen-hell);
    color: var(--mh-gruen);
}

/* Loeschen einer Bestellposition (nur Admin) - bewusst rot, damit die destruktive
   Aktion nicht wie die harmlosen Nachbaraktionen (OK/RESET/Etiketten) aussieht.
   Steht nach .wb-aktion, damit das Rot dessen Grundfarbe schlaegt. */
.wb-row__del,
.zeilen-aktion--del {
    color: var(--mh-rot);
}

.wb-row__del:hover,
.zeilen-aktion--del:hover {
    background: var(--mh-rot-hell);
    color: var(--mh-rot-dunkel);
}

/* Dasselbe Symbol als <button> - wenn die Aktion ein POST-Formular braucht.
   ".content button" aus TEIL 1 gibt ihm sonst Rahmen und hellblauen Grund
   (bis 16.09.2026 nur fuer sys_sicherung.php geloest, seitdem allgemein;
   erster weiterer Nutzer: die Positionstabelle in order_angebot.php). */
.content button.zeilen-aktion {
    border: 0;
    background: transparent;
    color: var(--mh-text-leise);
    padding: 0 7px;
    cursor: pointer;
}

.content button.zeilen-aktion:hover { background: var(--mh-hell); color: var(--mh-blau); }
.content button.zeilen-aktion--del { color: var(--mh-rot); }
.content button.zeilen-aktion--del:hover { background: var(--mh-rot-hell); color: var(--mh-rot-dunkel); }

.wb-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-top: 1px solid var(--mh-grau);
}

/* stretch statt flex-start: damit sind Notizfeld und Speichern-Knopf ohne
   ausgerechnete Pixelwerte automatisch gleich hoch - das hoehere der beiden
   gibt die Zeilenhoehe vor, das andere zieht mit. Das Feld selbst steht
   deshalb auf rows="1" (siehe wawi_bestellungen.php), sonst waere es mit
   seinen zwei Standardzeilen immer das hoehere. */
.wb-card__footer form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 320px;
}

/* .content-Praefix noetig: ".content textarea" (TEIL 1, Klasse+Element) ist
   spezifischer als die blosse Klasse und hat Innenabstand, Rand und Radius
   hier sonst ueberschrieben. */
.wb-notiz, .content .wb-notiz {
    flex: 1 1 auto;
    max-width: 500px;
    /* keine eigene Mindesthoehe - die Hoehe kommt aus dem stretch oben */
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 5px;
    font-family: inherit;
    resize: vertical;
}

/* ==========================================================================
   Fixierte Topbar (oben im Content-Bereich, jede Seite via header.inc.php).
   Suchfeld sucht ueber die bestehende order.php-Logik (GET order=...).
   Glocke + Meldungen-Bereich sind vorerst nur grafische Platzhalter.
   ========================================================================== */

/* Grund wie die Hauptnavi links. Bewusst dieselbe Variable: waehlt jemand in
   der Sidebar seine persoenliche Farbe, zieht die Leiste automatisch mit
   (das JS in header.inc.php setzt --mh-navi auf :root). */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--mh-navi);
    border: none;
    border-radius: 0;
    padding: 7px 20px;
    margin: -20px -20px 20px -20px;
}

.topbar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 280px;
    max-width: 420px;
}

/* Auf dem blauen Grund braucht das Feld einen hellen statt eines dunklen
   Rahmens - #666 verschwand darauf fast. */
.topbar__search input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    font-size: 13px;
}

.content .topbar__search input[type="text"]:focus {
    outline: none;
    border-color: #fff;
}

/* Blau auf Blau haette sich kaum abgehoben - deshalb die helle Chip-Flaeche
   der Designlinie mit blauer Schrift. */
.topbar__search button {
    flex: 0 0 auto;
    border: none;
    background: var(--mh-hell);
    color: var(--mh-blau);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
}

.topbar__search button:hover {
    background: #fff;
}

.topbar__meldungen {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.topbar__meldungen .status-badge {
    padding: 7px 13px;
    font-size: 12.5px;
    text-decoration: none;
    /* Symbol und Text stehen als Flex-Paar: gleiche Hoehe unabhaengig davon,
       was drinsteht (die Leiste stretcht, das Badge zentriert seinen Inhalt).
       Frueher stand im Express-Hinweis ein Raketen-Emoji - das baute zwei
       Pixel hoeher als ein Icon und liess den Dev-Knopf daneben tiefer sitzen;
       seit beide fa-Icons sind, ist das Paar hier die Absicherung, nicht mehr
       die Reparatur.
       Das gap ist Pflicht, kein Feinschliff: zwischen Flex-Items gibt es
       keinen Wortzwischenraum, ein Leerzeichen im Markup wird getrimmt -
       ohne gap klebt der Text am Symbol. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Express-Hinweis: gefuelltes Signalrot mit weisser Schrift, randlos - das
   soll in der Leiste sofort ins Auge springen. Eigener Modifier statt
   .status-badge--danger anzufassen, die anderswo dezent bleiben soll. */
.topbar__meldungen .status-badge--danger,
.mobile-meldungen .status-badge--danger,
.mobile-topbar .status-badge--danger {
    background: var(--mh-rot-signal);
    color: #fff;
    font-weight: 700;
    border: none;
}

.topbar__meldungen .status-badge--danger:hover,
.mobile-meldungen .status-badge--danger:hover,
.mobile-topbar .status-badge--danger:hover {
    background: var(--mh-rot);
    color: #fff;
}

/* Dev-Zugang: derselbe Bau wie der Express-Hinweis, nur in Warnorange statt
   Signalrot - ein offener Dev-Token ist ein Hinweis, kein Alarm. Stand vorher
   als breiter Streifen in der Sidebar. */
.topbar__meldungen .status-badge--dev,
.mobile-topbar .status-badge--dev {
    background: var(--mh-orange-warn);
    color: #fff;
    font-weight: 700;
    border: none;
}

.topbar__meldungen .status-badge--dev:hover,
.mobile-topbar .status-badge--dev:hover {
    background: var(--mh-orange-text);
    color: #fff;
}

/* Glocke + Express-Hinweis im mobilen Burger-Menue (Duplikat der Topbar-Inhalte,
   da die Topbar selbst unter 768px komplett verschwindet) - auf Desktop nicht
   sichtbar, das Suchfeld wird mobil bewusst nicht mitgenommen */
.mobile-meldungen {
    display: none;
}

.topbar__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    color: var(--mh-sidebar-text);
    text-decoration: none;
}

.topbar__bell:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}

.topbar__bell--alert {
    border-color: var(--mh-rot);
    color: var(--mh-rot);
    background: var(--mh-rot-hell);
}

.topbar__bell--alert:hover {
    background: var(--mh-rot-hell-hover);
}

.topbar__bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    background: var(--mh-rot);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
}

/* Dezente Abwandlung fuer Zaehler, die keine Aufforderung sind (TODOs): dieselbe
   Form, aber die helle Chip-Flaeche statt des Alarmrots. Glocke, Tickets und
   Kalender melden etwas Faelliges - ein Merkzettel tut das nicht, und vier rote
   Punkte nebeneinander stumpfen die Leiste ab. Steht NACH der Grundregel, damit
   sie deren Farben schlaegt (gleiche Spezifitaet). */
.topbar__bell-badge--leise {
    background: var(--mh-hell);
    color: var(--mh-blau);
    font-weight: 600;
}

/* Stufe dazwischen: als "wichtig" markierte TODOs. Nicht das Alarmrot der
   Grundregel - das heisst in dieser Leiste "faellig/ungelesen" (Glocke, Tickets,
   Kalender) -, aber auch nicht das leise Blau eines blossen Merkzettels.
   Steht wie --leise NACH der Grundregel, damit sie deren Farbe schlaegt
   (gleiche Spezifitaet). */
.topbar__bell-badge--wichtig {
    background: var(--mh-orange-warn);
    color: #fff;
}

/* Der eigentliche Seiteninhalt (Titel, Karten, Tabellen - alles was
   design_header() ab dem Titel ausgibt, siehe .content-inner in
   core/design.inc.php + core/footer.inc.php) ist auf breiten Desktop-
   Bildschirmen schmaler (wirkte sonst gestreckt): 80% der Breite, die nach
   der 220px breiten Sidebar uebrig bleibt, linksbuendig (Leerraum sammelt
   sich rechts). Topbar, Unternavi und der graue .content-Hintergrund bleiben
   bewusst ueber die volle Breite. Nur Desktop, auf Mobile bleibt die Sidebar
   off-canvas und beansprucht keinen Platz in der Breitenberechnung. */
@media (min-width: 769px) {
    .content-inner {
        max-width: calc((100vw - 220px) * 0.8);
        margin-left: 0;
        margin-right: auto;
    }
}

/* Unternavi (seitenspezifische Sekundaernavigation, z.B. wawi.php) - haengt in
   der Desktop-Ansicht direkt unter der Topbar statt als freischwebende Pille
   ueber dem Seitentitel; hellblauer Hintergrund mit dunkelblauen Links statt
   der bisherigen dunkelblauen Pille mit weissen Links */
.content .unternavi {
    background-color: var(--mh-hell);
    color: var(--mh-blau);
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    width: 100%;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* inline-flex statt der Standard-Inline-Darstellung, damit der Zaehler daneben
   (.unternavi__badge) mittig zur Beschriftung sitzt. Vorher richtete ihn
   vertical-align: middle an der Grundlinie der Schrift aus - der Badge ist mit
   seinem Innenabstand hoeher als die Mittellaenge der Schrift und ragte dadurch
   unten ueber die Grundlinie hinaus, die Zahl sass sichtbar zu tief.
   align-items: center laesst die Zeile das selbst ausrechnen, ohne dass hier
   irgendwo eine Pixelzahl steht (gleiches Vorgehen wie bei .knopfreihe).
   Das Burger-Menue macht es unten schon genauso. */
.content .unternavi a {
    display: inline-flex;
    align-items: center;
    gap: 6px;           /* ersetzt das Leerzeichen vor dem Badge - in einem
                           Flex-Container faellt reiner Leerraum weg */
    color: var(--mh-blau);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 16px;
    position: relative;
}

.content .unternavi a:first-child {
    padding-left: 0;
}

/* Dezenter vertikaler Strich statt frueherem " - " als Trenner zwischen den Punkten */
.content .unternavi a:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(2, 106, 179, 0.25);
}

.content .unternavi a:hover {
    text-decoration: underline;
}

/* Kleiner dunkelblauer "offen"-Zähler-Badge neben einem Unternavi-Punkt (z.B. Anzahl
   offener Produktion-Positionen je Kategorie) - runder Zähler, bewusst dezenter als
   ein rotes Warnsignal (gleiches Blau wie die Hauptnavi-Sidebar, siehe TEIL 1). */
.content .unternavi .unternavi__badge {
    display: inline-block;
    min-width: 16px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #1c6dab;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    /* kein vertical-align mehr noetig: der Link darueber ist inline-flex mit
       align-items: center und stellt den Badge selbst auf Mitte */
}

/* Verwaltungs-/Konfigurationspunkte innerhalb einer Unternavi (z.B. Textilmotive,
   Druckdaten, Laser-Namen-Batch in der Produktion-Subnavi) - rechtsbuendig und
   dezenter als die taeglichen Arbeitskategorien, damit der Unterschied auf einen
   Blick klar ist. Eigener Rahmen statt des normalen a::before-Trenners davor. */
.content .unternavi .unternavi__settings {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-left: 16px;
    border-left: 1px solid rgba(2, 106, 179, 0.3);
}

.content .unternavi .unternavi__settings-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(2, 106, 179, 0.55);
    margin-right: 2px;
}

.content .unternavi .unternavi__settings a {
    font-weight: normal;
    font-size: 12px;
    opacity: 0.75;
}

.content .unternavi .unternavi__settings a:hover {
    opacity: 1;
}

/* Folgt die Unternavi direkt auf die Topbar, wird sie randlos und
   kantenbuendig gehaengt statt als eigene Karte. margin-top:-20px statt 0,
   weil sich Margins sonst mit der Topbar (margin-bottom:20px) zum groesseren
   Wert aufsummieren wuerden statt zu verschwinden - -20px hebt das beim
   Margin-Collapsing exakt auf.

   Bewusst "+" (direkter Nachbar) statt "~": mit "~" galt die Regel auch dann,
   wenn eine Seite noch etwas zwischen Topbar und design_header() ausgegeben
   hat - das negative margin-top zog die Unternavi dann ueber die untere Kante
   dieser Ausgabe (in produktion.php ueber die "Bestand korrigiert!"-Box).
   Solche Meldungen gehoeren ohnehin hinter design_header(); sollte es doch
   einmal vorkommen, verliert die Unternavi jetzt nur ihre Kantenbuendigkeit,
   statt fremde Inhalte zu ueberdecken. */
.topbar + .unternavi {
    margin: -20px -20px 20px -20px;
    width: auto;
    border-radius: 0;
}

/* ==========================================================================
   Responsives Grundgerüst (mobil): Sidebar wird zum Off-Canvas-Burger-Menü,
   die Topbar verschwindet komplett auf dem Handy (kommt in einem zweiten
   Schritt mobil-tauglich zurück). Der Content selbst bleibt unangetastet,
   nur .content bekommt oben etwas Platz für den fixierten Burger-Button.
   ========================================================================== */

.mobile-nav-toggle,
.mobile-nav-overlay,
.mobile-topbar,
.mobile-statusbar {
    display: none;
}

@media (max-width: 768px) {

    body {
        display: block;
        padding-top: 56px; /* Platz fuer den fixierten .mobile-topbar-Header */
    }

    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 300;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 8px;
        background: var(--mh-navi);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;   /* wie beim Overlay: 100vh rechnet ohne die Adressleiste,
                             die untersten Menuepunkte laegen sonst ausserhalb */
        width: 260px;
        max-width: 85vw;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 250;
    }

    .sidebar.mobile-nav-open {
        transform: translateX(0);
    }

    /* Glocke + Express stehen jetzt im Sticky-Header oben (.mobile-topbar) - das
       Duplikat im Burger-Menue bleibt daher auf Mobile ausgeblendet (Basisregel
       .mobile-meldungen{display:none} von weiter oben greift unveraendert) */

    .mobile-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 240;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mobile-nav-overlay.mobile-nav-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Wird im zweiten Schritt mobil-tauglich wieder aufgebaut */
    .topbar {
        display: none;
    }

    /* Sticky-Header: bleibt beim Scrollen oben stehen, Logo entfaellt mobil
       zugunsten des schmalen Textlinks. Der Burger-Button (fixed, top:12px,
       40px hoch) liegt visuell darin - links Platz fuer ihn freihalten.
       Glocke links / Express rechts neben dem Textlink, dieser zentriert
       ueber den verbleibenden Platz (flex:1). */
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        padding: 0 12px 0 56px;
        background: var(--mh-navi);
        z-index: 220;
    }

    /* Eigene Farben statt der Desktop-Werte (helles Pastell auf hellem Topbar-Grau) -
       auf dem dunkelblauen mobilen Header sonst kaum lesbar */
    .mobile-topbar .topbar__bell {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.5);
    }

    .mobile-topbar .topbar__bell:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .mobile-topbar .topbar__bell--alert {
        color: #fff;
        border-color: #fff;
        background: rgba(216, 35, 35, 0.35);
    }

    .mobile-topbar .topbar__bell--alert:hover {
        background: rgba(216, 35, 35, 0.5);
    }

    .mobile-topbar__brand {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* .status-badge ist ein reines inline-block mit Padding und kam dadurch auf rund
       22px - im Header stand es damit niedriger als die Glocken-Knoepfe (28px) und
       das Status-Menue. Hier auf dieselbe feste Hoehe gezogen. */
    .mobile-topbar__express,
    .mobile-topbar .status-badge--dev {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 28px;
        padding: 0 9px;
        box-sizing: border-box;
    }

    /* Nur das Symbol: Glocken, Brand, Statusmenue und Express fuellen die
       Leiste bereits, die Uhrzeit steht im title und auf der Zielseite. */
    .mobile-topbar .dev-badge__text {
        display: none;
    }

    /* Selbst als reines Symbol drueckt der Knopf den Schriftzug auf wenige
       Pixel zusammen - uebrig bleibt ein angeschnittener Buchstabe. Solange
       ein Dev-Zugang offen ist, hat der Hinweis darauf Vorrang vor der Marke;
       ist er zu, kommt sie von selbst zurueck. Die Kopplung per :has() ist
       wichtig - ohne den Knopf darf der Schriftzug nicht verschwinden. */
    .mobile-topbar:has(.status-badge--dev) .mobile-topbar__brand {
        display: none;
    }

    /* Haelt den Textlink optisch zentriert, auch wenn kein Express-Hinweis da ist -
       gleiche Breite wie der Bell-Button gegengerechnet */
    .mobile-topbar__express-spacer {
        flex: 0 0 auto;
        width: 28px;
    }

    /* Reduzierte Bestellstatus-Boxen direkt unter dem Sticky-Header. Umbricht auf
       mehrere Zeilen statt horizontal zu scrollen (kein overflow-x). Sticky statt fixed,
       damit die (variable, je nach Zeilenzahl) Hoehe nicht manuell im .content-Abstand
       nachgezogen werden muss - der normale Dokumentfluss erledigt das automatisch. */
    /* Die Bestellstatus-Pills sassen frueher als eigener, klebender Block unter dem
       Sticky-Header und brauchten dort je nach Anzahl zwei bis drei Zeilen. Jetzt
       stecken sie in einem Aufklappmenue IM Header, links neben dem Express-Hinweis -
       der Block darunter entfaellt damit komplett. */
    .mobile-statusbar {
        display: inline-block;
        position: relative;
        flex: 0 0 auto;
    }

    /* Hoehe und Radius bewusst identisch zu .topbar__bell und .mobile-topbar__express,
       damit die drei Elemente im Header eine saubere Linie ergeben. */
    .mobile-statusbar > summary {
        list-style: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 28px;
        padding: 0 9px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
    }

    .mobile-statusbar > summary::-webkit-details-marker { display: none; }

    .mobile-statusbar[open] > summary { background: rgba(255, 255, 255, 0.18); }

    /* "versandbereit / in Produktion" - nowrap, damit die Zahlenpaarung bei schmalen
       Displays nicht umbricht und den Header hoeher macht. */
    .mobile-statusbar__count {
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    /* Panel haengt am rechten Rand des Knopfes, damit es bei schmalen Displays nicht
       aus dem Bild laeuft. Hoehe gedeckelt, falls viele Status gleichzeitig anliegen. */
    .mobile-statusbar__body {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 1000;
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: max-content;
        max-width: 78vw;
        max-height: 60vh;
        overflow-y: auto;
        padding: 10px;
        background: #fff;
        border: 1px solid var(--mh-rand-leise);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Ausfuehrliche Status-Boxen mit Kundennamen-Listen (Sidebar-Inhalt) - auf Mobile
       durch die reduzierten Boxen oben (.mobile-statusbar) ersetzt, um Dopplung im
       aufklappbaren Menue zu vermeiden. Auf Desktop unveraendert sichtbar. */
    .sidebar-statusbars {
        display: none;
    }

    .mobile-statusbar__pill {
        display: inline-block;
        flex: 0 0 auto;
        padding: 5px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobile-statusbar__pill--success { background: var(--mh-gruen-signal); color: #fff; }
    .mobile-statusbar__pill--info    { background: #13a5cf; color: #fff; }
    .mobile-statusbar__pill--warning { background: #ffd987; color: #7a5400; }
    .mobile-statusbar__pill--danger  { background: var(--mh-rot); color: #fff; }
    .mobile-statusbar__pill--neutral { background: var(--mh-blaugrau-hell); color: var(--mh-text); }

    .content {
        margin-left: 0;
        padding-top: 20px;
    }
}

/* ==========================================================================
   Tickets (tickets.php) - eigenes Ticketsystem (Ablösung Freshdesk), aktuell
   Dummy/Prototyp mit Beispieldaten. Drei-Spalten-Ansicht: Liste / Verlauf /
   Kontext, ausserhalb der normalen Content-Breite (siehe .content-inner:has
   unten), da eine E-Mail-Client-Ansicht die volle Breite braucht.
   ========================================================================== */

/* .content-inner ist normalerweise auf 80% begrenzt (siehe oben) - fuer die
   Tickets-Ansicht bewusst aufgehoben, da drei nebeneinander scrollende Spalten
   sonst zu schmal wuerden. */
.content-inner:has(> .tickets-page) {
    max-width: none;
    min-height: 100%;
}

/* Kein JS, keine feste/gemessene Hoehe, keine eigenen Scrollleisten je Spalte -
   bewusst einfach gehalten: .tickets-page wird MINDESTENS so hoch wie der
   restliche verfuegbare Platz in .content (der wiederum schon durch die lange
   Hauptnavi links auf die entsprechende Hoehe gestreckt wird, siehe
   align-items:stretch im body-Flex in TEIL 1), waechst aber bei Bedarf
   ueber den Bildschirm hinaus mit dem tatsaechlichen Inhalt - dann scrollt
   ganz normal die gesamte Seite (wie auf jeder anderen Seite im System),
   statt einzelne Spalten intern scrollen zu lassen. */
.tickets-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* "Maximieren"-Knopf im Tickets-Seitenkopf: blendet die linke Hauptnavigation
   aus, damit die drei Ticket-Spalten mehr Platz haben. Rein clientseitig ueber
   sessionStorage gemerkt (siehe Script in tickets.php) - .content ist bereits
   flex:1 in einer flex-row body (TEIL 1), nimmt den freiwerdenden Platz
   also automatisch ein, sobald .sidebar aus dem Layout verschwindet. */
body.tickets-nav-collapsed .sidebar {
    display: none;
}

.tickets-layout {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    flex: 1;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 1300px) {
    .tickets-layout { grid-template-columns: 280px 1fr 260px; }
}

/* "Zur Liste"-Link, (i)-Kontext-Knopf und dessen Schliessen-Button sind nur
   auf dem Handy sichtbar - auf Desktop stehen ohnehin alle drei Spalten
   gleichzeitig da */
.ticket-mobile-back,
.ticket-context-toggle,
.ticket-context-close {
    display: none;
}

/* Gleiche Optik wie .ticket-trust-btn (Absender vertrauen) daneben, statt der
   nackten Browser-Button-Standardoptik - beide stehen als reine Icon-Knoepfe
   in derselben Zeile und sollen als zusammengehoerendes Paar wirken. */
.ticket-context-toggle, .content .ticket-context-toggle {
    height: 28px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: var(--mh-hell);
    color: var(--mh-blau);
    cursor: pointer;
}

.ticket-context-toggle:hover, .content .ticket-context-toggle:hover {
    background: var(--mh-hell-hover);
}

@media (max-width: 768px) {

    /* Auf dem Handy immer nur EINE Spalte gleichzeitig sichtbar: standardmaessig
       die Liste, nach Klick auf ein Ticket (serverseitig entschieden - siehe
       ticket_id in der URL, kein JS-Routing noetig) die Detailansicht. Die
       Kontext-Spalte bleibt zusaetzlich immer versteckt, bis der (i)-Knopf sie
       als Overlay einblendet. */
    .tickets-layout {
        display: block;
        border: none;
        border-radius: 0;
    }

    .tickets-layout .tickets-col:nth-child(2),
    .tickets-layout .tickets-col:nth-child(3) {
        display: none;
    }

    .tickets-layout.tickets-layout--mobile-detail .tickets-col:nth-child(1) {
        display: none;
    }

    .tickets-layout.tickets-layout--mobile-detail .tickets-col:nth-child(2) {
        display: block;
    }

    .tickets-col + .tickets-col {
        border-left: none;
        border-top: 1px solid var(--mh-rand-leise);
    }

    .ticket-mobile-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        color: var(--mh-blau);
        font-size: 13px;
        font-weight: 600;
    }

    .ticket-context-toggle {
        display: inline-flex;
    }

    /* Kontext-Spalte als Overlay von rechts, nur wenn per (i)-Knopf geoeffnet */
    .tickets-layout.tickets-context-open .tickets-col--context {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 260;
        background: #fff;
        overflow-y: auto;
        padding-top: 8px;
    }

    .ticket-context-close {
        align-items: center;
        gap: 6px;
        margin: 0 14px 8px;
        padding: 6px 12px;
        border: 1px solid var(--mh-rand-leise);
        border-radius: 6px;
        background: var(--mh-flaeche);
        color: #556;
        font-size: 13px;
    }

    .tickets-layout.tickets-context-open .ticket-context-close {
        display: inline-flex;
    }
}

.tickets-col {
    min-width: 0;
}

.tickets-col + .tickets-col {
    border-left: 1px solid var(--mh-rand-leise);
}

.tickets-col__head {
    /* Bewusst nicht mehr sticky: die Spalten scrollen nicht mehr fuer sich,
       sondern die ganze Seite - ein zusaetzliches sticky hier wuerde sich
       mit der bereits sticky Topbar (page-weiter Scroll-Kontext) ueberlagern. */
    background: var(--mh-flaeche);
    border-bottom: 1px solid var(--mh-rand-leise);
    padding: 10px 14px;
}

.tickets-col__body {
    padding: 0;
}

/* Eine Leiste fuer alle Ordner: links die Haupt-Tabs (Offen/Wichtig/Bearbeitet),
   rechts Spam/Unwanted als kleine Icon-Knoepfe. align-items:stretch statt fester
   Hoehen, damit die Icon-Knoepfe automatisch exakt so hoch werden wie die
   Tab-Leiste (deren Hoehe haengt an Schriftgroesse/Zeilenhoehe). */
.ticket-filterbar {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.ticket-filterbar .ticket-filter-tabs {
    flex: 1 1 auto;
    min-width: 0;
}

/* Filter-Reiter (Alle/Offen/Wartend/Erledigt) über der Ticketliste - Segmented-
   Control-Optik (aktiver Reiter als weisse Flaeche mit leichtem Schatten)
   statt einzelner Pills, wirkt wie echte Tabs ohne dafuer JS zu brauchen
   (einfache GET-Links wie ueberall sonst im Code). */
.ticket-filter-tabs {
    display: flex;
    gap: 2px;
    background: var(--mh-grau);
    border-radius: 8px;
    padding: 3px;
}

.ticket-filter-tabs a {
    flex: 1;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #556;
    white-space: nowrap;
}

.ticket-filter-tabs a:hover {
    background: rgba(255,255,255,0.6);
    text-decoration: none;
}

.ticket-filter-tabs a.ticket-filter-tabs__active {
    background: #fff;
    color: var(--mh-blau);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.tickets-search {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 4px;
}

/* Zentrale Suche ueber ALLE Tickets, oben im Seitenkopf neben "Neues Ticket" -
   ersetzt die vorherige rein clientseitige Suche je Ordner. .content-Praefix
   wie bei .btn-primary/.ticket-header-icon-btn: gleiche Spezifitaet wie
   ".content button" (TEIL 1), sonst gewinnt dessen hellblauer Hintergrund. */
/* Feste Hoehe fuer Suchfeld/-Knopf UND fuer "Neues Ticket" gemeinsam, statt sich
   auf die (je nach Element leicht unterschiedliche) natuerliche Padding-Hoehe
   zu verlassen - beide sollen optisch exakt gleich hoch stehen. */
.tickets-global-suche {
    display: flex;
    align-items: center;
}

.tickets-global-suche input[type="text"] {
    width: 220px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    border: 1px solid var(--mh-rand-leise);
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    line-height: normal;
    vertical-align: top;
}

.tickets-global-suche button, .content .tickets-global-suche button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 0 6px 6px 0;
    background: #fff;
    color: var(--mh-blau);
    cursor: pointer;
    line-height: normal;
}

/* Nur innerhalb von .tickets-page skopiert (nicht .page-header-bar__actions
   allein) - diese Klasse ist seitenuebergreifend fuer jeden Seitenkopf im
   Einsatz, hier soll nur "Neues Ticket" betroffen sein */
.tickets-page .page-header-bar__actions .btn-primary,
.content .tickets-page .page-header-bar__actions .btn-primary {
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tickets-global-suche button:hover, .content .tickets-global-suche button:hover {
    background: var(--mh-hell);
}

/* Statuszeile bei aktiver Suche, ersetzt dort die Tabs/Ordner-Icons */
.ticket-suche-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    font-size: 12.5px;
    color: #556;
}

/* Spam/Unwanted - "Papierkorb"-Ansichten als kleine Icon-Buttons neben der
   Suche statt gleichwertig neben den Haupt-Tabs (keine taeglichen
   Arbeitskategorien), mit Zaehler-Badge wenn nicht leer */
.ticket-icon-link {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--mh-rand-leise);
    color: var(--mh-text-leise);
    font-size: 13px;
}

.ticket-icon-link:hover {
    background: var(--mh-flaeche);
    color: #556;
    text-decoration: none;
}

.ticket-icon-link--active {
    background: var(--mh-hell);
    border-color: var(--mh-rand);
    color: var(--mh-blau);
}

/* Kompakte Variante fuer die gemeinsame Filterleiste: Hoehe kommt vom
   stretch der Leiste (= Hoehe der Tab-Leiste), nur die Breite ist fix. */
.ticket-icon-link--klein {
    width: 28px;
    height: auto;
    font-size: 12px;
}

.ticket-icon-link--klein .ticket-icon-link__badge {
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 14px;
}

/* Icon-Knopf im Tickets-Seitenkopf (Maximieren/Sync) in Primary-Blau statt
   grau wie .ticket-icon-link - eigenstaendige Klasse statt Modifier, da diese
   beiden Knoepfe bewusst staerker hervorstechen sollen als die Ordner-Icons.
   Selektor doppelt mit .content davor (gleiches Muster wie bei .btn-primary
   oben): ".content button" (TEIL 1) hat als Klasse+Element dieselbe
   Spezifitaet wie eine einfache Klasse und wuerde sonst z.B. die Textfarbe
   ueberschreiben - genau das fuehrte hier zu einem weissen (unsichtbaren)
   Icon auf weissem Grund. */
.ticket-header-icon-btn, .content .ticket-header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--mh-rand);
    background: #fff;
    color: var(--mh-blau);
    font-size: 14px;
    cursor: pointer;
}

.ticket-header-icon-btn:hover, .content .ticket-header-icon-btn:hover {
    background: var(--mh-hell);
    color: var(--mh-blau-hover);
}

.ticket-header-icon-btn--active, .content .ticket-header-icon-btn--active {
    background: var(--mh-blau);
    color: #fff;
}

.ticket-header-icon-btn:disabled, .content .ticket-header-icon-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Mitarbeiter-Switcher neben Maximieren/Sync - gleiche Randfarbe wie die
   Icon-Knoepfe, damit die drei optisch als zusammengehoerige Gruppe wirken */
.ticket-mitarbeiter-switch, .content .ticket-mitarbeiter-switch {
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--mh-rand);
    background: #fff;
    color: var(--mh-blau);
    font-size: 12.5px;
    font-weight: 600;
}

a.ticket-mitarbeiter-switch--leer, .content a.ticket-mitarbeiter-switch--leer {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

a.ticket-mitarbeiter-switch--leer:hover, .content a.ticket-mitarbeiter-switch--leer:hover {
    background: var(--mh-hell);
}

.ticket-icon-link__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--mh-rot);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
}

/* Zeilen-Wrapper: Checkbox (Mehrfachauswahl) + der eigentliche klickbare
   Ticket-Link nebeneinander - Checkbox bewusst NICHT innerhalb des <a>
   (verschachtelte interaktive Elemente), sondern als Geschwister davor */
.ticket-item-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f1f1f1;
}

/* Gleiche Spezifitaets-Falle wie bei .ticket-bulkbar: display:flex auf einer
   Klasse gleicher Spezifitaet wie [hidden] wuerde das Ausblenden per
   row.hidden (Ticketsuche) sonst wirkungslos machen */
.ticket-item-row[hidden] {
    display: none;
}

.ticket-item-row .ticket-item {
    border-bottom: none;
    flex: 1;
    min-width: 0;
}

.ticket-item-checkbox {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0 0 12px;
    cursor: pointer;
}

/* Zähler + Löschen-Aktion, erscheint nur wenn mindestens eine Checkbox aktiv ist.
   [hidden] hier explizit erzwingen: display:flex und das hidden-Attribut haben
   gleiche Spezifitaet, ohne diese Regel wuerde die eigene Klasse das native
   Ausblenden ueberstimmen und die Leiste bliebe dauerhaft sichtbar. */
.ticket-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--mh-rot-hell);
    border: 1px solid #f3c6c6;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--mh-rot-dunkel);
}

.ticket-bulkbar[hidden] {
    display: none;
}

.ticket-bulkbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Schließen/Löschen hier kleiner als normale .btn-primary/.btn-secondary -
   die Leiste sitzt in der schmalen linken Spalte, die Standardgröße wirkte
   dort zu wuchtig neben dem Zähler-Text. .content-Präfix wie bei .btn-primary
   selbst noetig, sonst gewinnt ".content button" (TEIL 1) die Groesse. */
.ticket-bulkbar__actions .btn-primary,
.content .ticket-bulkbar__actions .btn-primary,
.ticket-bulkbar__actions .btn-secondary,
.content .ticket-bulkbar__actions .btn-secondary {
    padding: 4px 10px;
    font-size: 12px;
}

/* "Ordner leeren" (nur bei Spam/Unwanted sichtbar) - zentriert ueber der Liste,
   bewusst nicht rechtsbuendig wie ein normaler Aktions-Button, da es die
   einzige Aktion in dieser Kopfzeile ist */
.ticket-ordner-leeren {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Eine Zeile in der Ticket-Liste (linke Spalte) */
.ticket-item {
    display: block;
    position: relative;
    padding: 10px 14px 10px 18px;
    color: #16202a;
    border-left: 3px solid transparent;
}

.ticket-item:hover {
    background: var(--mh-flaeche);
    text-decoration: none;
}

.ticket-item--active {
    background: var(--mh-hell);
    border-left-color: var(--mh-blau);
}

.ticket-item--active:hover {
    background: var(--mh-hell);
}

.ticket-item--prio-wichtig {
    border-left-color: var(--mh-rot);
}

.ticket-item--active.ticket-item--prio-wichtig {
    border-left-color: var(--mh-blau);
}

.ticket-item__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    /* min-width:0 noetig, sonst verhindert Flexbox' Default (min-width:auto)
       das Greifen von text-overflow:ellipsis bei langen Absendernamen -
       Zeile liefe sonst ueber und erzwang eine horizontale Scrollleiste. */
    min-width: 0;
}

/* Gelesen/Ungelesen-Markierung (wie im E-Mail-Postfach) - Platz bleibt immer
   reserviert, damit die Zeilen nicht je nach Status horizontal verspringen */
.ticket-item__unread-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
}

.ticket-item--unread .ticket-item__unread-dot {
    background: var(--mh-blau);
}

.ticket-item__sender {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: normal;
    color: #16202a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-item--unread .ticket-item__subject {
    font-weight: 700;
}

.ticket-item__time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--mh-text-leise);
}

.ticket-item__subject {
    font-size: 12.5px;
    color: var(--mh-text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-item__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 11px;
    color: var(--mh-text-leise);
}

.ticket-item__meta .fa-triangle-exclamation { color: var(--mh-rot); }

/* Mittlere Spalte: Verlauf/Konversation */
.ticket-detail__title {
    font-size: 17px;
    font-weight: 700;
    color: #16202a;
    margin-bottom: 6px;
}

.ticket-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ticket-detail__meta select {
    height: 28px;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0 6px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 5px;
    background: #fff;
}

/* Antworten/Notiz-Leiste direkt unter dem Kopfbereich (Betreff/Status/etc.) -
   oeffnet erst bei Klick das jeweilige Formular (siehe Toggle-Script), statt es
   permanent am Seitenende einzublenden. Schliessen/Loeschen rechts abgesetzt
   (eigene Gruppe + space-between), damit sie sich von Antworten/Notiz abheben. */
.ticket-action-bar {
    --ticket-aktion-hoehe: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mh-rand-leise);
}

/* Die Gruppen ordnen nur den Quelltext - im Layout fliessen alle Knoepfe in
   EINER umbrechenden Reihe. Als eigene Flexboxen nebeneinander brauchten sie
   rund 740px, die mittlere Spalte hat bei 1280px Fensterbreite 463px: die
   rechte Gruppe stand 13px ueber den Rand (17.09.2026). Das Mehr-Menue bleibt
   ueber margin-left:auto rechts in seiner Zeile. */
.ticket-action-bar__group {
    display: contents;
}

/* Eine Hoehe fuer Knoepfe und Menue - vorher 32,9 gegen 34px */
.content .ticket-action-bar button,
.ticket-action-bar .ticket-mehr-menu > summary {
    height: var(--ticket-aktion-hoehe);
    box-sizing: border-box;
}

/* Schmale Leiste fuer die E-Mail-Anhaenge des Tickets, direkt unter den
   Antworten/Notiz/Schliessen/Loeschen-Buttons */
.ticket-attachments-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--mh-rand-leise);
    background: var(--mh-flaeche);
}

.ticket-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--mh-hell);
    border: 1px solid var(--mh-rand);
    color: var(--mh-blau);
    font-size: 12px;
}

.ticket-attachment-chip:hover {
    background: var(--mh-hell-hover);
    text-decoration: none;
}

.ticket-attachment-chip__size {
    color: #6a9cb8;
}

.ticket-thread {
    padding: 14px;
}

.ticket-msg {
    max-width: 82%;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--mh-rand-leise);
    background: var(--mh-flaeche);
}

.ticket-msg--mitarbeiter {
    margin-left: auto;
    background: var(--mh-hell);
    border-color: var(--mh-rand);
}

.ticket-msg--notiz {
    margin-left: auto;
    max-width: 100%;
    background: var(--mh-notiz);
    border-color: var(--mh-notiz-rand);
}

.ticket-msg__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 5px;
}

.ticket-msg__author {
    font-weight: 700;
    color: #16202a;
}

.ticket-msg--notiz .ticket-msg__author::before {
    content: "🔒 Interne Notiz · ";
    font-weight: 700;
    color: #8a6d00;
}

.ticket-msg__time {
    color: var(--mh-text-leise);
    white-space: nowrap;
}

/* Antwort, die im Hintergrund verschickt wird (Job ticket_antwort) */
.ticket-msg__versand {
    margin-left: 8px;
    font-size: 12px;
    color: var(--mh-orange-text);
    white-space: nowrap;
}

.ticket-msg__versand--fehler {
    color: var(--mh-rot);
    font-weight: bold;
}

/* KEIN white-space:pre-line hier: der Text kommt bereits durch nl2br() (siehe
   ticket_nachricht_html()), das fuegt echte <br>-Tags ein UND laesst das
   urspruengliche \n-Zeichen im Markup stehen - mit pre-line wuerde der Browser
   dieses uebrig gebliebene \n zusaetzlich als eigenen Zeilenumbruch werten und
   jede Zeile doppelt umbrechen (genau das vom Nutzer gemeldete Problem). */
.ticket-msg__body {
    font-size: 13.5px;
    line-height: 1.55;
}

/* Sanitiertes HTML aus E-Mails (siehe html_email_sanitieren()) - eigenes
   overflow-x, damit z.B. eine breite Tabelle in der Mail nicht die ganze
   Spalte aufreisst; word-break gegen sehr lange unbrechbare Woerter/Links */
.ticket-msg__body--html {
    white-space: normal;
    overflow-x: auto;
    word-break: break-word;
}

/* Ohne diesen Reset addiert sich der Browser-Standardabstand jedes <p> (oben
   UND unten) mit dem Platz, den ein bewusst leerer Absatz "<p><br></p>"
   (Quill-Markup fuer eine Leerzeile) selbst einnimmt - eine einzelne Leerzeile
   im Editor sah in dieser Ansicht dadurch wie zwei bis drei Umbrueche aus. */
.ticket-msg__body--html p {
    margin: 0 0 0.8em;
}

.ticket-msg__body--html p:last-child {
    margin-bottom: 0;
}

/* Manche Mails stecken ihren kompletten Fliesstext in ein <pre> (Weiterleitungen
   aus Groupware/Formularmailern, Ticket 1103 "Flaeche Osterbrooksweg"). <pre>
   bringt vom Browser white-space:pre mit - jede Zeile lief also genau so lang
   weiter wie im Original und verschwand rechts hinter dem overflow-x der Blase,
   statt umzubrechen. pre-wrap behaelt die Umbrueche des Originals und bricht
   lange Zeilen trotzdem am Rand um. Schrift bewusst wie der uebrige Text: das
   ist Fliesstext einer E-Mail, kein Quelltext (<code> bleibt unangetastet). */
.ticket-msg__body--html pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: inherit;
    margin: 0 0 0.8em;
}

.ticket-msg__body--html table {
    border-collapse: collapse;
    max-width: 100%;
}

.ticket-msg__body--html td,
.ticket-msg__body--html th {
    padding: 4px 8px;
    border: 1px solid var(--mh-grau);
}

.ticket-msg__body--html a {
    color: var(--mh-blau);
}

/* Antwortbereich unten in der mittleren Spalte */
/* Absender + Status/Prio-Auswahl + "Absender vertrauen" (rechtsbuendig via
   margin-left:auto) + mobiler (i)-Knopf, in einer Zeile, umbricht bei Bedarf */
.ticket-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Feste Hoehe passend zu den Status/Prio-Selects daneben (.ticket-detail__meta
   select) statt der groesseren Standard-.btn-secondary-Groesse */
.ticket-trust-btn, .content .ticket-trust-btn {
    height: 28px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    margin-left: auto;
}

/* "Neues Ticket" bekommt eine eigene Karten-Optik statt wie Antworten/Notiz nur
   eine schlichte eingefaerbte Flaeche - ist die einzige Aktion hier, die ein
   komplett neues, von uns ausgehendes Ticket anlegt statt nur auf ein
   bestehendes zu reagieren. Kein display hier gesetzt (bewusst, siehe an
   anderer Stelle dokumentierte [hidden]-Spezifitaets-Falle bei display:flex/block
   auf derselben Klasse). */
.ticket-neu-box {
    background: #fff;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(2, 106, 179, 0.08);
    margin-bottom: 12px;
    overflow: hidden;
}

.ticket-neu-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--mh-flaeche);
    border-bottom: 1px solid var(--mh-rand-leise);
    font-weight: 700;
    font-size: 14px;
    color: #16202a;
}

.ticket-neu-box__header i {
    color: var(--mh-blau);
    margin-right: 6px;
}

.ticket-neu-box__close, .content .ticket-neu-box__close {
    border: none;
    background: none;
    color: #889;
    cursor: pointer;
    font-size: 15px;
    padding: 2px 6px;
}

.ticket-neu-box__close:hover, .content .ticket-neu-box__close:hover {
    color: #16202a;
}

.ticket-neu-box__body {
    padding: 16px;
}

/* An/Betreff bei "Neues Ticket" etwas grosszuegiger als die schmalen
   Standard-Inputs (kv-value hat sonst keine eigene Hoehe/Optik) - der
   Adressbuch-Knopf daneben bekommt dieselbe Hoehe, damit beide buendig stehen. */
.ticket-neu-feld, .content .ticket-neu-feld {
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
}

.ticket-neu-adressbuch-btn, .content .ticket-neu-adressbuch-btn {
    height: 40px;
    width: 40px;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ticket-reply {
    border-bottom: 1px solid var(--mh-rand-leise);
    padding: 12px 14px;
    background: var(--mh-flaeche);
}

.ticket-reply--notiz {
    background: var(--mh-notiz);
}

/* .content-Praefix noetig: ".content textarea" (TEIL 1, Klasse+Element) hat
   sonst hoehere Spezifitaet als die blosse Klasse hier und ueberschreibt Rand/
   Radius/Padding mit den generischen grauen Werten - die eigentliche Ursache,
   warum das Feld bisher nie so rund/luftig aussah wie hier eigentlich gesetzt. */
.ticket-reply__text, .content .ticket-reply__text {
    width: 100%;
    min-height: 170px;
    padding: 12px 14px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket-reply__text:focus, .content .ticket-reply__text:focus {
    outline: none;
    border-color: #8fc4ea;
    box-shadow: 0 0 0 3px rgba(2, 106, 179, 0.12);
}

.ticket-reply--notiz .ticket-reply__text, .content .ticket-reply--notiz .ticket-reply__text {
    background: var(--mh-notiz);
    border-color: var(--mh-notiz-rand);
}

.ticket-reply__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ticket-reply__toolbar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Anhaenge-Uebersicht (Antworten/Neues Ticket) - je ausgewaehlte Datei ein
   Chip mit eigenem Entfernen-Knopf, siehe TICKET_ANHAENGE in tickets.php */
.ticket-anhang-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ticket-anhang-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--mh-grau);
    border-radius: 14px;
    padding: 4px 4px 4px 12px;
    font-size: 12.5px;
    color: var(--mh-text);
}

.ticket-anhang-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--mh-text-leise);
    border-radius: 50%;
    padding: 0;
}

.ticket-anhang-chip__remove:hover {
    background: var(--mh-blaugrau-hell);
    color: var(--mh-rot-dunkel);
}

/* "Textvorlage"-Dropdown (alle Textbausteine, gruppiert nach Kategorie) -
   .order-posi-menu ist das generische Dropdown-Menu-Muster dieser Seite */
.ticket-vorlage-menu__body {
    max-height: 320px;
    overflow-y: auto;
}

.ticket-vorlage-menu__kategorie {
    padding: 6px 12px 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mh-blaugrau-text);
}

/* Ein <details>-Dropdown in einer .knopfreihe: das <details> selbst wird durch
   align-items:stretch gestreckt, sein <summary> waechst aber nicht von allein
   mit und saesse dann oben in einem zu hohen Kasten. */
.knopfreihe > details.order-posi-menu {
    display: flex;
}

.knopfreihe > details.order-posi-menu > summary {
    display: flex;
    align-items: center;
}

/* "Hinweis merken" unter einem frischen KI-Entwurf - dezent, es ist ein
   Angebot und keine Aufforderung (siehe ticketKiHinweisMerken() in tickets.php) */
.ticket-ki-nach {
    margin-bottom: 8px;
    font-size: 12px;
}

.ticket-ki-nach a {
    color: var(--mh-text-leise);
    text-decoration: none;
}

.ticket-ki-nach a:hover {
    color: var(--mh-blau);
    text-decoration: underline;
}

/* Schnellvorlagen (die als wichtig markierten Textbausteine) unter der
   Knopfreihe: schlichte, mit "|" getrennte Textlinks statt einer zweiten Reihe
   Pillen - sonst konkurriert die Zeile optisch mit "Senden". Gleiches Muster
   und gleiche Begruendung wie filter_liste() in core/design.inc.php. */
.ticket-schnellvorlagen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.ticket-schnellvorlagen__label {
    color: var(--mh-text-leise);
}

.ticket-schnellvorlagen__trenner {
    color: var(--mh-rand);
}

.ticket-schnellvorlagen a.ticket-textbaustein-btn {
    color: var(--mh-blau);
    text-decoration: none;
    cursor: pointer;
}

.ticket-schnellvorlagen a.ticket-textbaustein-btn:hover {
    text-decoration: underline;
}

/* Dieselben Bausteine stehen im "Textvorlage"-Menue nochmal ganz oben - auf dem
   Desktop ausgeblendet, weil sie dort schon als Textzeile darunter stehen. */
.ticket-vorlage-menu__schnell {
    display: none;
}

@media (max-width: 767px) {

    /* Am Handy braucht die Textzeile zu viele Zeilen und bietet zu kleine
       Klickflaechen - dort stehen die Bausteine oben im Textvorlagen-Menue. */
    .ticket-schnellvorlagen {
        display: none;
    }

    .ticket-vorlage-menu__schnell {
        display: block;
        border-bottom: 1px solid var(--mh-rand-leise);
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
}

/* WYSIWYG-Editor (Quill, siehe tickets.php + tickets_textbausteine.php) -
   eigener Rahmen um Toolbar+Editor zusammen statt Quills eigenem doppeltem
   Rand (.ql-toolbar + .ql-container haben beide ihre eigene Snow-Theme-
   Umrandung), damit es wie EIN einheitliches Eingabefeld aussieht, passend
   zu .ticket-reply__text auf den restlichen Formularfeldern der Seite. */
.ticket-wysiwyg {
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket-wysiwyg:focus-within {
    border-color: #8fc4ea;
    box-shadow: 0 0 0 3px rgba(2, 106, 179, 0.12);
}

.ticket-wysiwyg .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--mh-rand-leise);
    padding: 6px 8px;
}

.ticket-wysiwyg .ql-container.ql-snow {
    border: none;
    font-family: inherit;
    font-size: 13.5px;
}

.ticket-wysiwyg .ql-editor {
    min-height: 140px;
    padding: 12px 14px;
    line-height: 1.5;
}

.ticket-wysiwyg .ql-editor.ql-blank::before {
    font-style: normal;
    color: var(--mh-blaugrau-text);
}

/* Rechte Spalte: Kontext zum Absender */
.ticket-side__section {
    padding: 14px;
    border-bottom: 1px solid #f1f1f1;
}

.ticket-side__name {
    font-size: 14.5px;
    font-weight: 700;
    color: #16202a;
}

.ticket-side__meta {
    font-size: 12px;
    color: var(--mh-text-leise);
    margin-top: 2px;
}

/* Antworten/Notiz/Beleg/Schliessen/Spam/Loeschen + "Absender vertrauen" auf
   dem Handy nur als Icon: mit vollem Text nebeneinander sprengen sie auf
   schmalen Bildschirmen die Zeile und verziehen die ganze Kopfansicht (siehe
   .btn-label-Spans um den jeweiligen Beschriftungstext in tickets.php). Eigener
   Block statt Ergaenzung im @media weiter oben, damit diese Regeln nach den
   allgemeinen .btn-primary/.btn-secondary/.ticket-trust-btn-Definitionen
   stehen und bei gleicher Spezifitaet zuverlaessig gewinnen. */
@media (max-width: 768px) {

    .ticket-action-bar {
        flex-wrap: wrap;
    }

    .ticket-action-bar .btn-label,
    .ticket-trust-btn .btn-label {
        display: none;
    }

    .ticket-action-bar .btn-primary,
    .ticket-action-bar .btn-secondary,
    .ticket-trust-btn, .content .ticket-trust-btn {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.ticket-side__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mh-text-leise);
    margin-bottom: 8px;
}


/* ===========================================================================
   Mobiloptimierung der Kopfzeile (Subnavi-Menue systemweit, tickets.php extra)
   ---------------------------------------------------------------------------
   Ausgangslage: Statusleiste (2 Zeilen), Subnavigation (2-3 Zeilen), Titelzeile,
   Suchzeile - bis zum ersten Inhalt standen rund 400px reine Bedienelemente.
   Bewusst am Dateiende, damit diese Regeln nach den allgemeinen Definitionen
   von .unternavi/.btn-primary stehen und bei gleicher Spezifitaet gewinnen.
   =========================================================================== */

/* Subnavi-Burger-Menue: auf Desktop gar nicht vorhanden, dort bleibt die normale
   .unternavi-Leiste unveraendert. */
.unternavi-mobile { display: none; }

/* Titelzeile der Seiten, die ihren Titel ueber design_header() ausgeben: auf
   Desktop sieht sie genauso aus wie die frueheren Inline-Styles (24px, fett),
   auf Mobil steht links davor das Burger-Menue. */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.page-title-row__title {
    font-size: 24px;
    font-weight: bold;
    min-width: 0;
}

/* Ohne Subnavigation traegt die Titelzeile die Trennlinie selbst - vorher stand
   sie als Inline-Stil an einem eigenen <div> in design_header(). */
.page-title-row--allein {
    border-bottom: 2px solid #006eaf;
}

/* Seitenaktionen rechtsbuendig auf Hoehe der Ueberschrift (design_header,
   4. Parameter) - fuer selten gebrauchte Verweise, die sonst als einzelner
   Link am Seitenende landen. */
.page-title-row__aktionen {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ticket-suche-toggle { display: none; }

/* Farbgebung des Prioritaets-Sterns steht weiter unten bei .ticket-flag-btn -
   hier bewusst nichts auf das <i>, sonst kaeme die Hover-Farbe des Knopfes nicht an. */

@media (max-width: 768px) {

    /* Die normale Subnavi-Leiste braucht je nach Bereich zwei bis drei Zeilen - auf
       Mobil ersetzt durch das Burger-Menue links neben der Ueberschrift.
       WICHTIG: nur auf Seiten ausblenden, die dieses Menue auch wirklich rendern -
       sonst waere die Subnavi dort mobil ersatzlos weg. Daher ueber :has() an die
       Anwesenheit von .unternavi-mobile gekoppelt (frueher an .tickets-page, als es
       das Menue nur in tickets.php gab). Faellt :has() aus, ist die Leiste doppelt zu
       sehen statt zu fehlen - unschoen, aber nichts geht verloren.
       Die Kopie im Menue liegt in .content-inner und ist von der Regel nicht
       betroffen (nur direkte Kinder von .content). */
    .content:has(.unternavi-mobile) > .unternavi {
        display: none;
    }

    .unternavi-mobile {
        display: inline-block;
        position: relative;
        flex: 0 0 auto;
    }

    /* Titelzeile: Burger-Menue + Titel in einer Reihe. Der Titel darf hier
       kleiner ausfallen als die 24px auf Desktop, sonst drueckt er das Menue
       bei laengeren Ueberschriften in die naechste Zeile. */
    .page-title-row {
        gap: 8px;
        margin-bottom: 14px;
    }

    .page-title-row__title {
        font-size: 19px;
        line-height: 1.25;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .unternavi-mobile > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--mh-hell);
        color: var(--mh-blau);
        font-size: 15px;
    }

    .unternavi-mobile > summary::-webkit-details-marker { display: none; }

    .unternavi-mobile__body {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 1000;
        margin-top: 4px;
        min-width: 220px;
        background: var(--mh-flaeche);
        border: 1px solid var(--mh-blau);
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        padding: 4px 0;
    }

    /* Die Links kommen aus derselben navigation_sub()-Ausgabe wie auf Desktop,
       werden hier aber untereinander statt nebeneinander gesetzt. */
    .unternavi-mobile__body .unternavi {
        display: block;
        background: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        width: auto;
    }

    .unternavi-mobile__body .unternavi a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Trennstriche des Desktop-Layouts hier unpassend (untereinander statt nebeneinander) */
    .unternavi-mobile__body .unternavi a::before { display: none; }
    .unternavi-mobile__body .unternavi a:first-child { padding-left: 14px; }
    .unternavi-mobile__body .unternavi a:hover { background: var(--mh-blau); color: #fff; text-decoration: none; }
    .unternavi-mobile__body .unternavi a:hover .unternavi__badge { background: #fff; color: var(--mh-blau); }

    /* Einstellungen (z.B. Textilmotive/Druckdaten in der Produktion-Subnavi):
       auf Desktop rechtsbuendig abgesetzt (margin-left:auto, senkrechter Strich),
       im Menue stattdessen als eigener Abschnitt unten mit Ueberschrift.
       Selektoren bewusst dreiteilig (...__body .unternavi .unternavi__settings),
       damit sie dieselbe Spezifitaet wie die Desktop-Regeln
       ".content .unternavi .unternavi__settings" haben und als spaetere Regel
       gewinnen - mit nur zwei Klassen blieben margin-left:auto und der linke
       Rahmen aktiv und die Gruppe haenge im Menue schief. */
    .unternavi-mobile__body .unternavi .unternavi__settings {
        display: block;
        margin: 4px 0 0 0;
        padding: 4px 0 0 0;
        border-left: none;
        border-top: 1px solid var(--mh-blaugrau-rand);
    }

    .unternavi-mobile__body .unternavi .unternavi__settings-label {
        display: block;
        margin: 0;
        padding: 6px 14px 2px 14px;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: rgba(2, 106, 179, 0.55);
    }

    .unternavi-mobile__body .unternavi .unternavi__settings a {
        font-size: 13px;
        font-weight: 600;
        opacity: 1;
    }

    /* Kopfzeile: alles in EINE Zeile - Subnavi-Knopf, Titel, Sync, Mitarbeiter,
       Suchknopf, "Neues Ticket" (nur noch Icon).
       .page-header-bar__actions wird per display:contents aufgeloest, damit seine
       Kinder direkte Flex-Elemente der Kopfzeile werden - nur so kann die aufgeklappte
       Suche auf eine eigene Zeile ueber die volle Breite umbrechen, statt in der
       schmalen rechten Gruppe eingesperrt zu bleiben. Die Gruppe hat weder Hintergrund
       noch Innenabstand, es geht dabei also nichts verloren. */
    .tickets-page .page-header-bar {
        align-items: center;
        gap: 6px;
    }

    .tickets-page .page-header-bar__actions {
        display: contents;
    }

    .tickets-page .page-header-bar__left {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
    }

    .tickets-page .page-header-bar__title {
        font-size: 17px;
        white-space: nowrap;
    }

    /* Der Vollbild-Umschalter blendet die Hauptnavigation aus - auf dem Handy
       gibt es die Seitennavigation ohnehin nicht, der Knopf ist dort sinnlos. */
    .tickets-page #ticketsNavToggleBtn { display: none; }

    .tickets-page .ticket-mitarbeiter-switch {
        max-width: 108px;
        font-size: 12px;
        padding-left: 6px;
        padding-right: 18px;
    }

    /* "Neues Ticket" auf das Plus-Icon reduzieren */
    .tickets-page .page-header-bar__actions .btn-primary .btn-label { display: none; }
    .tickets-page .page-header-bar__actions .btn-primary,
    .content .tickets-page .page-header-bar__actions .btn-primary {
        padding-left: 11px;
        padding-right: 11px;
    }

    /* Suche klappt hinter den Lupenknopf weg und oeffnet sich als volle Zeile
       darunter. Bei aktiver Suche ist sie serverseitig schon aufgeklappt. */
    .ticket-suche-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border: 1px solid var(--mh-blaugrau-rand);
        border-radius: 8px;
        background: #fff;
        color: var(--mh-blau);
        font-size: 14px;
        cursor: pointer;
    }

    .tickets-page .tickets-global-suche { display: none; }

    .tickets-page .tickets-global-suche--offen {
        display: flex;
        order: 10;
        flex: 1 0 100%;
        margin-top: 8px;
    }

    .tickets-page .tickets-global-suche--offen input { flex: 1 1 auto; min-width: 0; }
}


/* ===========================================================================
   tickets.php - Statussymbole und gebuendeltes Aktionsmenue
   ---------------------------------------------------------------------------
   Prioritaet und Whitelist waren Knoepfe mit Textbeschriftung mitten in der
   Absenderzeile. Sie sind jetzt reine Zustandssymbole an der Stelle, zu der sie
   gehoeren: der Stern vor dem Betreff, das Schild vor dem Absender. Beide grau
   (aus) oder gold (an), Klick schaltet um.
   =========================================================================== */

/* Feste quadratische Flaeche statt eines nackten Glyphen: das Symbol allein waere
   nur ~17px gross und damit auf dem Handy kaum zu treffen. Das negative margin-left
   holt die optische Kante wieder an den linken Rand des Textblocks zurueck.
   Doppelte Selektoren, weil ".content button" (TEIL 1) sonst gewinnt. */
.ticket-flag-btn, .content .ticket-flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0 0 0 -5px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: var(--mh-rand-grau-satt);
    font-size: 15px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* TEIL 1 faerbt jeden Button im .content beim Hover blau ein - hier muss die
   Flaeche dezent grau bleiben, sonst springt aus dem Symbol ein blauer Kreis. */
.ticket-flag-btn:hover, .content .ticket-flag-btn:hover {
    background-color: var(--mh-grau);
}

.ticket-flag-btn:disabled, .content .ticket-flag-btn:disabled {
    opacity: 0.5;
    cursor: default;
    background: none;
}

/* Stern vor dem Betreff */
.ticket-detail__title {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Beim Ueberfahren nur eine Ahnung der Farbe - waere es dasselbe Orange wie
   unten, saehe ein nicht gesetzter Knopf beim Hover aus wie ein gesetzter. */
.ticket-prio-btn:hover, .content .ticket-prio-btn:hover { color: var(--mh-orange-hell); }
.ticket-prio-btn--wichtig, .content .ticket-prio-btn--wichtig,
.ticket-prio-btn--wichtig:hover, .content .ticket-prio-btn--wichtig:hover { color: var(--mh-orange); }

/* Der eigene gap der Metazeile (8px) waere zwischen Schild und Absender zu viel */
.ticket-detail__meta { gap: 5px 8px; }

.ticket-trust-flag:hover, .content .ticket-trust-flag:hover { color: var(--mh-blaugrau-text); }
.ticket-trust-flag--vertraut, .content .ticket-trust-flag--vertraut,
.ticket-trust-flag--vertraut:hover, .content .ticket-trust-flag--vertraut:hover { color: var(--mh-orange); }

/* Menue am rechten Ende der Aktionsleiste - margin-left:auto schiebt es in der
   Flex-Gruppe an den rechten Rand. */
.ticket-mehr-menu { margin-left: auto; }

.ticket-mehr-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: var(--ticket-aktion-hoehe, 34px);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    background: var(--mh-flaeche);
    color: var(--mh-blau);
    font-size: 14px;
}

.ticket-mehr-menu[open] > summary { background: var(--mh-blau); color: #fff; }

@media (max-width: 768px) {

    /* Zusatzinfos-Panel: der Schliessen-Knopf sass oben links und lag damit unter
       dem fixierten Burger-Symbol (z-index 300). Jetzt oben rechts als grosses X,
       ueber dem Panel (z-index 260), aber unter dem Burger. */
    .ticket-context-close,
    .content .ticket-context-close {
        position: fixed;
        top: 8px;
        right: 10px;
        z-index: 261;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        justify-content: center;
        border: 1px solid var(--mh-rand-leise);
        border-radius: 50%;
        background: #fff;
        font-size: 22px;
        color: #16202a;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* Beim runden Knopf bleibt nur das X - die Beschriftung wuerde ihn sprengen */
    .ticket-context-close__label { display: none; }

    /* Platz schaffen, damit der Panelinhalt nicht unter dem X beginnt */
    .tickets-layout.tickets-context-open .tickets-col--context {
        padding-top: 56px;
    }
}


/* ==========================================================================
   order.php - Adressen direkt in der Bestellung bearbeiten
   ---------------------------------------------------------------------------
   Liefer- und Rechnungsadresse wurden frueher auf eigenen Seiten
   (order_adress.php / order_adress_billing.php) bearbeitet. Beide Formulare
   stecken jetzt aufgeklappt-bei-Bedarf direkt im jeweiligen Adressblock
   (details/summary wie bei .order-posi-menu / .posi-wunsch-add).
   ========================================================================== */

/* Unter-Ueberschrift innerhalb einer Karte (Rechnungs-/Lieferadresse) - zieht
   sich ueber die volle Kartenbreite, gleicht also das Padding von
   .order-card__body wieder aus (frueher als Inline-Style an der Stelle) */
.order-card__header--sub {
    margin: 12px -16px 0 -16px;
}

.adress-edit {
    margin-top: 10px;
    font-size: 12.5px;
}

.adress-edit > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--mh-hell);
    border: 1px solid var(--mh-rand);
    color: var(--mh-blau);
}

.adress-edit > summary::-webkit-details-marker { display: none; }

/* Formular, das ueber den Kartenkopf aufgeklappt wird (order.php, siehe
   mhAdressEdit()): der eigene Griff entfaellt, sonst stuende derselbe
   Auslöser zweimal auf der Karte. Das <summary> bleibt im Markup, weil ein
   <details> ohne eines nicht gueltig ist. */
.adress-edit--kopf > summary { display: none; }

/* Zugeklappt ist von diesem details nichts mehr zu sehen - der Abstand von oben
   wuerde sonst als unerklaerliche Luecke unter der Adresse stehenbleiben. */
.adress-edit--kopf:not([open]) { margin-top: 0; }

.adress-edit > summary:hover {
    background: var(--mh-hell-hover);
    border-color: var(--mh-rand-hover);
}

.adress-edit[open] > summary {
    background: var(--mh-blau);
    border-color: var(--mh-blau);
    color: #fff;
}

.adress-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 12px;
    margin-top: 10px;
    padding: 12px;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
}

.adress-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Spaltenbreiten - siehe order_adress_field() in order.php */
.adress-field--full  { grid-column: 1 / -1; }
.adress-field--half  { grid-column: span 2; }
.adress-field--wide  { grid-column: span 3; }
.adress-field--small { grid-column: span 1; }

.adress-field label {
    font-size: 11.5px;
    font-weight: bold;
    color: var(--mh-text-label);
}

.adress-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 5px;
    line-height: 1.4;
}

.adress-form__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.adress-form__actions input[type="submit"] {
    padding: 6px 14px;
}

/* Kontrollanzeige, wie die Adresse fuers DHL-Label in Strasse/Hausnummer
   getrennt wurde (nur Admin) */
.adress-form__hint {
    font-size: 11.5px;
    color: var(--mh-text-leise);
}

/* Bestellhinweis-Formular rechts in der Infobar (frueher Inline-Style
   margin-left:auto - als Klasse mobil ueberschreibbar) */
.order-infobar__right {
    margin-left: auto;
}

/* Bestellpositionen: Preis und Aktionslinks als eigene Elemente, damit sie auf
   dem Handy getrennt platziert werden koennen (siehe @media weiter unten).
   Auf Desktop bleibt die Optik wie zuvor: Preis in Zeile 1, Links darunter,
   durch schmale Striche getrennt. */
.posi-preis {
    display: block;
}

.posi-aktionen {
    display: block;
}

.posi-aktionen a + a::before {
    content: "|";
    color: var(--mh-rand-grau-satt);
    margin: 0 5px;
}

/* Feldbreiten des "Position hinzufuegen"-Formulars (frueher Inline-Styles) */
.posi-new-form__sku    { width: 120px; }
.posi-new-form__anzahl { width: 60px; }
.posi-new-form__name   { width: 220px; }
.posi-new-form__preis  { width: 100px; }

.posi-new-form__namewrap {
    position: relative;
    display: inline-block;
}

.posi-new-form__check {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}


/* ==========================================================================
   order.php - Mobilansicht
   ---------------------------------------------------------------------------
   Ausgangslage: die Seite war auf feste Spaltenbreiten (Label 125px,
   Produkttyp 130px, Formularfelder 220-300px) und Zeilen mit nowrap gebaut.
   Auf dem Handy blieben dadurch fuer den Artikelnamen nur wenige Zeichen
   Breite (Titel brach auf 6+ Zeilen um), und die Eingabefelder von
   Lieferscheininfo/Bestellhinweis sowie "Position hinzufuegen" schoben den
   Speichern-Knopf aus dem Bild.
   Bewusst am Dateiende, damit diese Regeln nach den Desktop-Definitionen
   stehen und bei gleicher Spezifitaet gewinnen.
   ========================================================================== */

@media (max-width: 768px) {

    /* 20px links + rechts sind auf einem 390px-Display rund 10% der Breite */
    .content {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Eingabefelder in Formularbereichen (Suchmaske und Aktionszeilen, z.B.
       wawi_update_mass.php). Das globale padding: 1px 4px ergibt am Handy eine
       Feldhoehe, die sich kaum treffen laesst. 16px Schrift ist kein Zufall:
       darunter zoomt iOS Safari die Seite beim Antippen automatisch heran. */
    .content .search-field input[type="text"],
    .content .search-field select,
    .content .kv-value input[type="text"],
    .content .kv-value select {
        min-height: 38px;
        padding: 6px 10px;
        font-size: 16px;
    }

    /* Der Knopf daneben muss mitwachsen - sonst stand er beim Zahlstatus in
       order.php 23px hoch neben dem 38px hohen Pulldown (gemessen mit
       pruefstand/mobil/, 14.09.2026; gegen alle Seiten ohne Nebenwirkung). */
    .content .kv-value input[type="submit"],
    .content .kv-value button {
        min-height: 38px;
    }

    /* Lieferscheininfo / Bestellhinweis: Beschriftung ueber das Feld, Feld
       nimmt die Restbreite, Speichern-Knopf bleibt daneben sichtbar */
    .order-infobar {
        padding: 10px 12px;
        gap: 12px;
    }

    .order-infobar form {
        width: 100%;
        flex-wrap: wrap;
    }

    .order-infobar__right {
        margin-left: 0;
    }

    .order-infobar form > span {
        flex: 0 0 100%;
        font-size: 12.5px;
        font-weight: bold;
        color: var(--mh-text);
    }

    .order-infobar input[type="text"] {
        flex: 1 1 140px;
        width: auto;
        min-width: 0;
    }

    /* Karten: schmaleres Innenpadding, Label-Spalte kuerzer (die Werte
       daneben brauchen den Platz dringender) */
    .order-card__header,
    .order-section__header,
    .order-section__body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .order-card__body {
        padding: 4px 12px 12px 12px;
    }

    .order-card__header--sub {
        margin-left: -12px;
        margin-right: -12px;
    }

    .kv-label {
        flex: 0 0 92px;
        font-size: 12px;
    }

    .kv-value select {
        max-width: 100%;
    }

    /* Adressformulare: zwei statt vier Rasterspalten */
    .adress-form {
        grid-template-columns: repeat(2, 1fr);
        padding: 10px;
    }

    .adress-field--half,
    .adress-field--wide {
        grid-column: span 1;
    }

    /* Versand-Label: zwei feste Zeilen statt einer ausgefransten Reihe. Oben
       Pakettyp und Gewicht (das Gewicht rechtsbuendig, weil der Typ die Zeile
       fuellt), darunter die Aktionen. Vorher lief alles als eine umbrechende
       Reihe durch und margin-left:auto schob "Storno bei DHL" allein an den
       rechten Rand der zweiten Zeile - das sah wie ein Layoutfehler aus, und
       weil die Boxen je nach Textlaenge unterschiedlich umbrachen, stand
       dieselbe Aktion in jeder Box woanders. */
    .shipment__label {
        gap: 2px 10px;
    }

    .shipment__label > .order-actions-bar__label {
        flex: 1;
    }

    /* display:contents (Desktop) wird hier zur eigenen Zeile aufgehoben */
    .shipment__label-aktionen {
        display: flex;
        flex-basis: 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        margin-top: 4px;
    }

    /* In der eigenen Aktionszeile reihen sich Storno/"Label storniert!" hinten
       ein, statt per auto-Rand an den rechten Rand zu springen */
    .shipment__label-ende {
        margin-left: 0;
    }

    /* Bestellpositionen: Produkttyp + Menge + Preis in einer Kopfzeile, der
       Artikel darunter ueber die volle Breite, Aktionslinks ganz unten -
       statt vier Spalten nebeneinander, von denen der Artikelname die
       schmalste war. .posi-side loest sich per display:contents auf, damit
       Preis und Links einzeln im Raster platziert werden koennen. */
    .posi-row--detail {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "typ  qty   preis"
            "main main  main"
            "akt  akt   akt";
        align-items: center;
        gap: 2px 10px;
    }

    .posi-row--wunsch {
        margin: 0 -8px;
        padding: 10px 8px;
    }

    .posi-row--detail .posi-typ {
        grid-area: typ;
        flex: none;
        padding-top: 0;
    }

    .posi-row--detail .posi-qty {
        grid-area: qty;
        flex: none;
    }

    .posi-row--detail .posi-main {
        grid-area: main;
        margin-top: 4px;
    }

    .posi-title__name {
        overflow-wrap: anywhere;
    }

    .posi-row--detail .posi-side {
        display: contents;
    }

    .posi-row--detail .posi-preis {
        grid-area: preis;
        text-align: right;
        font-weight: bold;
        white-space: nowrap;
    }

    .posi-row--detail .posi-aktionen {
        grid-area: akt;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        margin-top: 6px;
        /* .posi-side vererbt sein nowrap auch ueber display:contents hinweg */
        white-space: normal;
        text-align: left;
    }

    /* Ohne Aktionslinks (z.B. Nicht-Admin) keine leere Rasterzeile */
    .posi-aktionen:empty {
        display: none;
    }

    /* Trennstriche entfallen - die Links stehen mobil als eigene Flex-Zeile */
    .posi-aktionen a + a::before {
        content: none;
    }

    /* Wunschtext-Feld ueber die volle Zeilenbreite statt fester 200px */
    .posi-wunsch form,
    .posi-wunsch-add form {
        width: 100%;
        flex-wrap: wrap;
    }

    .posi-wunsch input[type="text"],
    .posi-wunsch-add input[type="text"] {
        max-width: none;
    }

    /* "Position hinzufuegen": alle Felder untereinander auf voller Breite */
    /* Vier Felder nebeneinander passen auf 390px nicht - untereinander stellen,
       Anzahl und Preis duerfen sich eine Zeile teilen. */
    .posi-edit__feld--name,
    .posi-edit__feld--artnr,
    .posi-edit__feld--knopf {
        flex: 1 1 100%;
    }

    .posi-edit__feld--artnr input,
    .posi-edit__feld--knopf input {
        width: 100%;
    }

    .posi-new-form {
        flex-direction: column;
        align-items: stretch;
    }

    .posi-new-form__namewrap {
        display: block;
    }

    .posi-new-form__sku,
    .posi-new-form__anzahl,
    .posi-new-form__name,
    .posi-new-form__preis {
        width: 100%;
        box-sizing: border-box;
    }

    .posi-new-form input[type="submit"] {
        padding: 8px;
    }

    /* Protokoll: Datum + loeschen in einer Zeile, Text darunter (statt einer
       145px breiten Datumsspalte neben schmalem Text) */
    .protokoll-entry {
        flex-wrap: wrap;
        gap: 2px 10px;
    }

    .protokoll-date {
        flex: 1 1 auto;
    }

    .protokoll-text {
        flex: 0 0 100%;
        order: 3;
    }

    /* Aktionsmenues ("Bearbeiten") oeffnen sonst ueber den rechten Rand hinaus */
    .order-posi-menu__body {
        max-width: calc(100vw - 40px);
    }

    .order-posi-menu__body a {
        white-space: normal;
    }
}


/* ==========================================================================
   PREIS-CHECK (wawi_preis_check.php) - Einkaufspreise aus Eingangsrechnungen.
   Nur die Spalte "Aenderung" und die abgehakte Zeile brauchen eigene Regeln,
   alles andere sind die vorhandenen Bausteine (order-section, designbox,
   status-badge, knopfreihe).
   ========================================================================== */

.prch-teurer     { color: var(--mh-rot-dunkel); font-weight: 600; }
.prch-guenstiger { color: var(--mh-gruen); font-weight: 600; }
.prch-gleich     { color: var(--mh-text-leise); }
.prch-neu        { color: var(--mh-text-leise); font-style: italic; }

/* Abgehakte Zeilen sieht man nur im Stand "abgehakt"/"alle" - dort duerfen sie
   zurueckgenommen wirken, ohne unlesbar zu werden. */
.prch-erledigt td {
    color: var(--mh-text-leise);
    background: var(--mh-flaeche-grau);
}


/* ==========================================================================
   OVERLAY (allgemein nutzbar) - oeffnet eine beliebige Seite des Systems ueber
   der aktuellen Seite, statt wegzunavigieren. Aufbau/Verwendung siehe
   mhOverlayOeffnen() in core/header.inc.php und overlay_link() in
   core/design.inc.php. Gilt auf allen Bildschirmgroessen - die frueher hier
   vermerkte 900px-Schwelle im JS ist entfallen, der mobile Block steht unten.
   ========================================================================== */

/* Seite darunter nicht mitscrollen lassen, solange das Overlay offen ist */
body.mh-overlay-offen {
    overflow: hidden;
}

.mh-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;          /* ueber Topbar (50) und mobiler Navigation */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 32, 52, 0.55);
}

.mh-overlay__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1500px, 95vw);
    height: 92vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.mh-overlay__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--mh-blau);
    color: #fff;
    font-family: 'Barlow', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.mh-overlay__titel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mh-overlay__aktionen {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-overlay__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.mh-overlay__knopf:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
    text-decoration: none;
}

/* min-height: 0 ist Pflicht, nicht Kosmetik: ein Flex-Kind schrumpft sonst nicht
   unter seine Inhaltshoehe (bei einem iframe die 150px-Vorgabe, beim geholten
   HTML dessen volle Hoehe). Ohne das waechst die Karte ueber den Rahmen hinaus
   und der untere Teil steht ausserhalb des Bildschirms. */
.mh-overlay__frame {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: var(--mh-flaeche);
}

/* Inhalt, der per fetch() geholt und direkt eingehaengt wurde (sync_link()),
   statt eines iframes. Braucht deshalb selbst Scrollen und Innenabstand. */
.mh-overlay__inhalt {
    flex: 1;
    min-height: 0;      /* siehe .mh-overlay__frame - sonst scrollt es nicht, sondern waechst */
    width: 100%;
    overflow: auto;
    padding: 16px 20px;
    background: var(--mh-flaeche);
    font-size: 13px;
}

/* Auf dem Handy fuellt das Overlay den ganzen Schirm. Die 95vw/92vh von oben
   liessen ringsum Raender stehen, die auf einem 390px-Display echten Platz
   kosten - zu sehen ist darunter ohnehin nur der abgedunkelte Hintergrund.

   Die dynamische Viewporthoehe (dvh) sitzt am RAHMEN, nicht mehr an der Karte
   darin - das war der Grund, warum das Overlay mobil verschoben aussah:
   .mh-overlay ist per inset:0 so hoch wie der Bildschirm OHNE Ruecksicht auf die
   ein- und ausfahrende Adressleiste (100vh), die Karte darin war 100dvh hoch,
   also um deren Hoehe kuerzer - und weil der Rahmen seine Kinder zentriert
   (align-items/justify-content: center), sass die Karte um die halbe Differenz
   zu tief und ragte unten aus dem sichtbaren Bereich.

   Jetzt bekommt der Rahmen selbst die dvh-Hoehe (bottom: auto, sonst wuerde
   inset:0 dagegenrechnen) und stellt seine Kinder auf volle Groesse statt sie zu
   zentrieren; die Karte fuellt ihn mit 100%/100% exakt aus. Aeltere Browser ohne
   dvh ueberspringen die zweite Zeile und behalten vh - dann ist es wieder so gut
   wie vorher, aber nie schlechter. */
@media (max-width: 768px) {

    .mh-overlay {
        bottom: auto;
        height: 100vh;
        height: 100dvh;
        align-items: stretch;
        justify-content: stretch;
    }

    .mh-overlay__dialog {
        width: 100%;      /* 100vw waere die Bildschirm-, nicht die Rahmenbreite */
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* Laufendes Sync-Icon: dreht sich, bis die Antwort da ist. Klicks in der
   Zwischenzeit ignoriert mhSyncStart() ohnehin. */
.mh-sync--laeuft {
    pointer-events: none;
    color: var(--mh-blau) !important;
}

.mh-sync--laeuft i {
    animation: mh-sync-dreh 0.9s linear infinite;
}

@keyframes mh-sync-dreh {
    to { transform: rotate(360deg); }
}

/* Die Seite IM Overlay (?overlay=1): ohne Hauptnavigation bleibt vom
   .content-inner-Limit (80% der Breite neben der 220px-Sidebar, siehe oben) nur
   unnoetiger Leerraum rechts uebrig - im Overlay also volle Breite. */
body.overlay-modus .content--overlay .content-inner {
    max-width: none;
}

body.overlay-modus .content--overlay {
    min-height: 100vh;
}

/* Mobil bekommt body oben 56px Innenabstand als Platz fuer den fixierten
   Sticky-Header (.mobile-topbar, siehe dort). Im Overlay gibt es den nicht -
   header.inc.php laesst Hauptnavigation UND Topbar bei $overlay weg. Der
   Platzhalter blieb aber stehen: die Seite im Overlay begann dadurch 56px zu
   tief, unter der blauen Kopfzeile klaffte ein leerer Streifen und unten fehlte
   genau dieses Stueck. Das war der sichtbare Versatz beim Oeffnen von
   wawi_bestand.php aus wawi.php heraus. */
@media (max-width: 768px) {

    body.overlay-modus {
        padding-top: 0;
    }
}

/* Auch die Subnavigation faellt im Overlay weg - dort ist eine Seite fuer
   genau eine Sache geoeffnet, ein Bereichswechsel darin ergibt keinen Sinn.
   Ohne die Regel blieb sie als einzige Navigation stehen, waehrend
   Hauptnavigation und Topbar schon weg waren (header.inc.php laesst sie bei
   $overlay aus). Das Burger-Menue derselben Leiste muss mit weg, sonst haengt
   auf schmalen Bildschirmen ein Menue neben der Ueberschrift, das dieselben
   Links aufklappt. */
body.overlay-modus .unternavi,
body.overlay-modus .unternavi-mobile {
    display: none;
}

/* ============================================================
   Suchleiste - gemeinsames Aussehen aller Suchformulare
   ============================================================
   Vorlage ist die Leiste aus wawi.php: hellblaue .infobox2-Flaeche, alle
   Bedienelemente 32px hoch (wie die Filter-Icons daneben), 6px Radius,
   8px Abstand. order.php und order_view.php hatten frueher eigene
   Varianten (.order-toolbar mit 37px-Feldern und dunkelblauem Knopf,
   .order-actions-bar mit beschrifteten 34px-Feldern auf weissem Grund).

   NEUE SUCHFORMULARE BITTE HIERUEBER BAUEN, nicht wieder mit eigenen
   Klassen - Markup: <div class="infobox2 suchleiste"> ... </div>. */
.suchleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Filterzeile (filter_liste() in .report-meta) direkt unter einer Suchleiste:
   .report-meta zieht sich mit margin-top: -8px an die Zeile darueber und
   rutschte hier 8px in Feld, Auswahl und Knopf hinein (seo/seiten.php,
   gemessen 15.09.2026). */
.suchleiste + .report-meta {
    margin-top: 8px;
}

/* Alle Bedienelemente auf eine Linie: gleiche Hoehe wie die Filter-Icons
   (.ticket-icon-link, 32px). Das .content-Praefix ist noetig, um die
   Basisregeln aus TEIL 1 zu schlagen. */
.content .suchleiste input[type="password"],
.content .suchleiste input[type="text"],
.content .suchleiste input[type="search"],
.content .suchleiste input[type="number"],
.content .suchleiste input[type="date"],
.content .suchleiste select,
.content .suchleiste input[type="submit"],
.content .suchleiste button {
    height: 32px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 6px;
    line-height: normal;
    margin: 0;
}

/* Standardbreite fuer Auswahlfelder in der Leiste */
.suchleiste__select {
    width: 170px;
}

/* Zuruecksetzen-Kreuz direkt hinter einem Auswahlfeld (suchleiste_x() in
   design.inc.php). Sonst wie jede andere .zeilen-aktion - nur die Hoehe folgt
   den 32px der Leiste, damit es auf einer Linie mit Feld und Knopf sitzt. Der
   negative Rand links zieht es an SEIN Feld heran, sonst stuende es genau
   zwischen zwei Pulldowns und man sieht nicht, wozu es gehoert. */
.content .suchleiste__x {
    height: 32px;
    min-width: 22px;
    padding: 0 4px;
    margin-left: -4px;
    flex: 0 0 auto;
    font-size: 14px;
}

/* Der Platzhalter haelt nur die Breite frei (siehe Kommentar an
   suchleiste_x()) - unsichtbar und nicht anklickbar. */
.suchleiste__x--platz {
    display: inline-flex;
    align-items: center;
    visibility: hidden;
    pointer-events: none;
}

/* Feld mit Beschriftung darueber (z.B. order_view.php, wo drei Auswahlfelder
   sonst nicht auseinanderzuhalten waeren). Die Vorlage in wawi.php kommt
   ohne Beschriftungen aus - beides passt in dieselbe Leiste. */
.suchleiste__feld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.suchleiste__feld--breit {
    flex: 1 1 220px;
}

/* Alle Felder teilen sich die Leiste zu gleichen Teilen - fuer Formulare mit
   mehreren gleichrangigen Feldern (wawi_update_mass.php: sechs Suchfelder),
   wo sonst jedes nur so breit waere wie das Eingabefeld von Haus aus. */
.suchleiste__feld--gleich {
    flex: 1 1 140px;
}

.content .suchleiste__feld input[type="password"],
.content .suchleiste__feld input[type="text"],
.content .suchleiste__feld select {
    width: 100%;
}

.suchleiste__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mh-text-label);
}

/* Beschriftung mit Info-Icon (wawi_update_mass.php): nur dann als Flexzeile,
   damit das runde "i" mittig zur Schrift sitzt statt auf der Grundlinie. */
.suchleiste__label:has(.info-icon) {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Der Knopfbereich ist selbst ein .suchleiste__feld und bekommt eine leere
   Beschriftungszeile. Dadurch ist seine Spalte exakt so hoch wie die der
   Felder und der Knopf steht auf derselben Linie wie die Eingaben - ohne
   align-self oder feste Abstaende, die auseinanderlaufen, sobald sich die
   Schriftgroesse der Beschriftungen aendert. */
.suchleiste__platz {
    visibility: hidden;
    /* Dieselbe Zeilenhoehe wie .suchleiste__label - sonst sass der Knopf 2px
       tiefer als die Felder daneben (order_anfragen.php, 17.09.2026) */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}

.suchleiste__aktionen {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
}

.suchleiste__aktionen a {
    font-size: 12.5px;
    color: var(--mh-text-leise);
    font-weight: normal;
}

.suchleiste__aktionen a:hover {
    color: var(--mh-blau);
}

/* .infobox2 bringt 20px Innenabstand mit - auf schmalen Displays zu viel */
@media (max-width: 767px) {
    .content .suchleiste { padding: 12px; }

    /* Auf dem Handy jeweils zwei Felder nebeneinander, das Suchfeld ganz breit */
    .suchleiste__feld { flex: 1 1 150px; }
    .suchleiste__feld--breit { flex: 1 1 100%; }

    /* Der Knopf ueber die volle Breite, die leere Beschriftungszeile darueber
       waere hier nur verschenkter Platz */
    .suchleiste__feld--aktionen { flex: 1 1 100%; }
    .suchleiste__feld--aktionen .suchleiste__platz { display: none; }
    .content .suchleiste__aktionen input[type="submit"] { flex: 1; }
}

/* Fokus dezent ueber den Rahmen, nicht ueber einen hellen Schein - die Leiste
   sitzt auf der hellblauen .infobox2, dort waere ein heller Schein unsichtbar. */
.content .suchleiste input:focus,
.content .suchleiste select:focus {
    outline: none;
    border-color: var(--mh-blau);
}


/* ============================================================
   wawi.php - Ergaenzungen zur Suchleiste + Ansichts-Filter
   ============================================================
   Die Leiste war vorher reiner Inline-Fluss (Input, zwei Selects, Button,
   danach Textlinks BESTAND/NEU/FEHL...) und lief auf dem Handy aus dem
   Bildschirm. Das gemeinsame Grundgeruest steht jetzt oben unter
   .suchleiste; hier nur noch, was es sonst nirgends gibt: der Sync-Link,
   die Vorschlagsliste und die Filter auf Desktop als rechtsbuendige
   Icon-Knoepfe (.ticket-icon-link, gleiches Design wie die Ordner-Icons in
   tickets.php), mobil als Pulldown-Menue rechts. */
.wawi-suchbar__suche {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Shopify-Sync-Link links vor dem Suchschlitz: nur das Icon, kein Rahmen,
   gedeckte Farbe - soll erkennbar, aber ruhiger als die Filter-Icons
   rechts sein. Farbe/Drehung kommen erst beim Hover. */
.content .wawi-suchbar__sync {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
    color: var(--mh-blaugrau-text);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.3s ease;
}

.content .wawi-suchbar__sync:hover {
    color: var(--mh-blau);
    transform: rotate(90deg);
}

/* Anker fuer die absolut positionierte Vorschlagsliste (#wawi2-suggest-list) */
.wawi-suchtext-wrap {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

/* Icon-Leiste rechtsbuendig ans Ende der Zeile */
.wawi-filter-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Ausnahme: der Mindestbestand-Filter steht direkt hinter dem Suchen-Knopf,
   also ohne das margin-left:auto, das die uebrigen nach rechts schiebt.
   Als einziges Icon bleibt er auch unterhalb 768px stehen (s. Media-Query
   unten) - er ist der meistgebrauchte Filter und waere im Pulldown zwei
   Klicks entfernt; entsprechend fehlt er dort. */
.wawi-filter-icons--vorn {
    margin-left: 0;
}

/* .ticket-icon-link ist fuer weissen Grund gebaut (grauer Rahmen, graues
   Icon) - auf der hellblauen .infobox2 der Suchleiste verschwindet das
   fast. Deshalb hier weisser Grund + blauer Rahmen/Icon wie bei den
   Kopf-Icons in tickets.php, aktive Ansicht gefuellt blau (gleiche
   Hervorhebung wie beim Ansicht-Pulldown auf dem Handy). */
.wawi-filter-icons .ticket-icon-link {
    background: #fff;
    border-color: var(--mh-rand);
    color: var(--mh-blau);
}

.wawi-filter-icons .ticket-icon-link:hover {
    background: var(--mh-hell);
    border-color: var(--mh-rand-hover);
    color: var(--mh-blau-hover);
}

.wawi-filter-icons .ticket-icon-link--active,
.wawi-filter-icons .ticket-icon-link--active:hover {
    background: var(--mh-blau);
    border-color: var(--mh-blau);
    color: #fff;
}

/* Pulldown nur mobil - auf Desktop uebernehmen die Icons */
.wawi-filter-menu {
    display: none;
    margin-left: auto;
}

.wawi-filter-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wawi-filter-menu .order-posi-menu__body a {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icons im Menue auf gleicher Breite, damit die Labels buendig stehen */
.wawi-filter-menu .order-posi-menu__body a i {
    width: 16px;
    text-align: center;
    color: var(--mh-blau);
}

.wawi-filter-menu__aktiv {
    background: var(--mh-hell);
    font-weight: bold;
}

.wawi-filter-menu .order-posi-menu__body a:hover i {
    color: #fff;
}

/* margin-left:auto bewusst nur im Menue - im Knopf selbst (shrink-to-fit)
   wuerde es den Aufklapp-Pfeil hinter der Zahl unnoetig abtrennen */
.wawi-filter-menu .order-posi-menu__body .wawi-filter-menu__anzahl {
    margin-left: auto;
}

.wawi-filter-menu__anzahl {
    color: var(--mh-rot);
    font-weight: bold;
}

.wawi-filter-menu .order-posi-menu__body a:hover .wawi-filter-menu__anzahl {
    color: #fff;
}


/* Der Knopf traegt die aktuell gewaehlte Ansicht als Text - die Bezeichnungen
   sind teils lang ("Produkte unter Mindestbestand"), deshalb abgeschnitten
   statt umgebrochen, damit die Zeile mit dem Suchen-Button intakt bleibt. */
.wawi-filter-menu__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.wawi-filter-menu > summary {
    max-width: 60vw;
}

.wawi-filter-menu__pfeil {
    flex: 0 0 auto;
    font-size: 10px;
    opacity: 0.7;
}

.wawi-filter-menu[open] .wawi-filter-menu__pfeil {
    transform: rotate(180deg);
}

/* Aktive Ansicht deutlich hervorgehoben (gefuellt statt nur hellblau),
   damit auf einen Blick klar ist, dass die Liste gefiltert ist */
.wawi-filter-menu--gewaehlt > summary {
    background: var(--mh-blau);
    border-color: var(--mh-blau);
    color: #fff;
    font-weight: bold;
}

.wawi-filter-menu--gewaehlt > summary:hover {
    background: var(--mh-blau-hover);
    border-color: var(--mh-blau-hover);
}

.wawi-filter-menu--gewaehlt > summary .wawi-filter-menu__anzahl {
    color: #fff;
}

@media (max-width: 767px) {
    /* Nur die rechtsbuendige Gruppe weicht dem Pulldown - der
       Mindestbestand-Blitz neben dem Suchen-Knopf bleibt sichtbar. */
    .wawi-filter-icons:not(.wawi-filter-icons--vorn) { display: none; }
    .wawi-filter-icons--vorn { flex: 0 0 auto; }
    .wawi-filter-menu { display: inline-block; }

    /* Suchfeld eine volle Zeile, darunter die beiden Selects nebeneinander,
       zuletzt Suchen-Button + Ansicht-Pulldown in einer Zeile */
    .wawi-suchbar__suche { flex: 1 1 100%; }
    .wawi-suchbar #wawi2-suchtext {
        width: 100%;
        box-sizing: border-box;
    }

    /* Nur fuer Auswahlfelder, die DIREKT in der Leiste stehen (wawi.php).
       Steckt eines dagegen in einem .suchleiste__feld, ist dessen Flex-Achse
       senkrecht - flex-basis waere dann die HOEHE und schlaegt das height:32px
       von oben, das Feld wurde 130px hoch. */
    .suchleiste > .suchleiste__select {
        flex: 1 1 130px;
        width: auto;
        min-width: 0;
    }
    .suchleiste input[type="submit"] { flex: 0 0 auto; }
}


/* Vorschlagsliste unter dem Suchfeld - stand frueher als langer inline-style
   am div selbst. display:none ist Startzustand, das JS schaltet per
   element.style.display um (siehe Script am Ende von wawi.php). */
.wawi-suggest-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-blau);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    width: max-content;
    min-width: 280px;
    max-width: 90vw;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Aktionsmenue an der Artikelzeile: nutzt .order-posi-menu, nur groesser.
   Vorher lag dafuer eine fast identische Kopie (.wawi2-artikel-menu) als
   <style>-Block in wawi.php. */
.order-posi-menu--gross > summary {
    font-weight: bold;
    font-size: 14px;
}

.order-posi-menu--gross .order-posi-menu__body a {
    font-size: 14px;
}

/* "Lieferung einbuchen" in der Bestandsspalte (wawi.php) und die
   Statusmeldung des Sammel-Einbuchens (wawi_bestellungen.php) */
.wawi2-einbuchen {
    color: orange;
    text-decoration: none;
}

.wawi2-einbuchen:hover {
    color: orange;
    text-decoration: underline;
}

.wawi2-einbuchen-status {
    font-size: 13px;
    color: var(--mh-text);
}

/* Schriftauswahl in marketing_insta_sprueche.php. Die @font-face-Regeln
   dazu bleiben dort inline - sie werden aus marketing_font_list() erzeugt. */
.font-choice {
    display: inline-block;
    border: 2px solid var(--mh-rand-grau);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 8px 8px 0;
    cursor: pointer;
    vertical-align: top;
    max-width: 230px;
}

.font-choice.selected {
    border-color: var(--mh-blau);
    background: #f0f7fc;
}

.font-choice .font-label {
    font-size: 11px;
    color: var(--mh-text-label);
    margin-bottom: 4px;
}

.font-choice .font-preview-text {
    font-size: 22px;
    line-height: 1.2;
    overflow: hidden;
    max-height: 2.6em;
}

/* Auf dem Handy eine Schriftart je Zeile ueber die volle Breite. Nebeneinander
   blieben von 230px kaum 150px uebrig - zu wenig, um zwei Schriften
   miteinander zu vergleichen, worum es hier ja geht. */
@media (max-width: 768px) {
    .font-choice {
        display: block;
        max-width: 100%;
        margin: 0 0 8px 0;
    }

    /* Ueber die volle Breite passt der Vorschautext meist in eine Zeile -
       die Hoehenbegrenzung wuerde ihn dann unnoetig beschneiden. Der Platz
       reicht hier auch fuer eine groessere Schrift, und genau darum geht es
       bei der Vorschau. */
    .font-choice .font-preview-text {
        max-height: none;
        font-size: 27px;
    }
}
/* ==========================================================================
   Auswertungsseiten (wawi_ladenhueter.php, statistik_produkte_typen.php)

   Beide brachten frueher ein eigenes Design mit (dunkelgraue Tabellenkoepfe,
   eigenes Blau #006eaf, gruene CSV-Knoepfe) - jetzt auf die Designlinie
   umgestellt. Der Grossteil laeuft ueber vorhandene Bausteine:
   order-actions-bar + order-pill fuer die Filterzeile, kpi-grid/kpi-card
   fuer die Kennzahlen, order-section + designbox fuer die Tabellen.
   Hier stehen nur die Ergaenzungen, die es dafuer noch nicht gab.
   ========================================================================== */

/* Erklaerender Kleintext unter der Filterzeile (Berechnungsgrundlage, Stand) */
.report-meta {
    color: var(--mh-text-leise);
    font-size: 12px;
    line-height: 1.6;
    margin: -8px 0 20px 2px;
}

/* Der negative Abstand oben ist fuer die Zeile unter einer Ueberschrift
   gedacht. Unter einer Knopfreihe schob er den Text in den Knopf - sichtbar,
   seit die Felder und Knoepfe dort keinen eigenen Aussenabstand mehr haben
   (16.09.2026, "An den Kunden" in order_angebot.php, und auf rund 20
   weiteren Seiten mit derselben Folge). */
.knopfreihe + .report-meta { margin-top: 8px; }

/* Zwei Knopfreihen untereinander: dieselben 8 px, die bis 16.09.2026 aus den
   4-px-Aussenabstaenden der Felder und Knoepfe entstanden (order_angebot.php,
   "Stand setzen" ueber "Bestellung erzeugen" - danach Abstand 0). */
.knopfreihe + .knopfreihe { margin-top: 8px; }

/* Kennzahl-Kachel ohne Verlinkung: gleiche Optik wie im Dashboard, aber
   ohne den Anheb-Effekt beim Ueberfahren (es gibt nichts zu klicken). */
.kpi-card--static {
    cursor: default;
}

.kpi-card--static:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Aktiver Zustand fuer .order-pill - fuer Umschalter, bei denen eine der
   Moeglichkeiten gerade gilt (z.B. Normale Bestellungen / B2B-Haendler).
   .content-Verdopplung wie bei .order-pill selbst - ohne sie gewinnt oben die
   Grundregel (die ist dank .content spezifischer) und diese Abwandlung hier
   bliebe wirkungslos. Gilt genauso fuer --icon und --gefahr weiter unten. */
.order-pill--aktiv,
.order-pill--aktiv:hover,
.content .order-pill--aktiv,
.content .order-pill--aktiv:hover {
    background: var(--mh-blau);
    border-color: var(--mh-blau);
    color: #fff;
    font-weight: 600;
}

/* Hauptaktion als Pille - gefuellt im Blau von .btn-primary, aber in den
   Massen der Pille, damit sie in der order-actions-bar auf einer Linie mit
   den Aktionen daneben bleibt (genutzt fuer "FÜR HANDEL FREIGEBEN" in
   order.php). Anders als --aktiv beschreibt sie keinen Zustand, sondern
   Gewicht - deshalb ein eigener Hover. .content-Verdopplung wie oben. */
.order-pill--primary, .content .order-pill--primary {
    background: var(--mh-blau);
    border-color: var(--mh-blau);
    color: #fff;
    font-weight: 600;
}

.order-pill--primary:hover, .content .order-pill--primary:hover {
    background: var(--mh-blau-hover);
    border-color: var(--mh-blau-hover);
    color: #fff;
}

/* Loeschende Aktion als Pille - gleiche Form wie .order-pill, nur in den
   Alarmfarben, damit sie sich von den blauen Aktionen daneben abhebt.
   Bewusst nicht gefuellt rot: sie steht meist neben harmlosen Aktionen und
   soll auffallen, nicht dominieren. Erst beim Ueberfahren wird sie deutlich. */
/* Pill nur mit Symbol, ohne Beschriftung (z.B. Archivieren an der Nachrichten-
   karte). Quadratisch statt breit-oval, damit sie neben beschrifteten Pills
   nicht wie ein abgeschnittener Knopf wirkt. */
.order-pill--icon, .content .order-pill--icon {
    justify-content: center;
    gap: 0;
    padding: 4px 8px;
}

.order-pill--gefahr, .content .order-pill--gefahr {
    background: var(--mh-rot-hell);
    border-color: #f3c6c6;
    color: var(--mh-rot-dunkel);
}

.order-pill--gefahr:hover, .content .order-pill--gefahr:hover {
    background: var(--mh-rot);
    border-color: var(--mh-rot);
    color: #fff;
}

/* Tabelle soll buendig in der Karte sitzen: .designbox bringt eigenen
   Aussenabstand mit, .order-section__body eigenen Innenabstand. */
.order-section__body--blank {
    padding: 0;
    /* Breite Tabellen (pack_dhl_ls.php hat 10 Spalten, wawi_ladenhueter.php
       ebenfalls) scrollen in ihrer Karte, statt die Seite querzuschieben. */
    overflow-x: auto;
}

/* Auch ueber einen .tabelle-scroll hinweg: der Wrapper steht bei zwoelf Seiten
   zwischen Body und Tabelle, und ein blosser Kindselektor greift dann nicht
   mehr (siehe den Kopfzeilen-Block weiter unten). */
.order-section__body--blank > .designbox,
.order-section__body--blank > .tabelle-scroll > .designbox {
    margin: 0;
}

/* Dasselbe Verhalten fuer eine breite Tabelle, die NICHT in einer
   order-section steckt (wawi.php: sieben Spalten voller Formulare). Der
   Rahmen wird quergeschoben, die Seite selbst bleibt bildschirmbreit.
   Die Mindestbreite ist noetig, weil eine Tabelle mit width=100% sich sonst
   auch im Scrollrahmen auf Bildschirmbreite zusammenquetschen liesse. */
.tabelle-scroll {
    overflow-x: auto;
}

.tabelle-scroll > table {
    min-width: 900px;
}

/* overflow-x zieht overflow-y zwangsweise von visible auf auto - ein
   aufgeklapptes .order-posi-menu ("Bearbeiten") in einer der letzten Zeilen
   wuerde sonst am unteren Rand des Rahmens abgeschnitten. Solange eines offen
   ist, bekommt der Rahmen unten Platz dafuer. */
.tabelle-scroll:has(.order-posi-menu[open]) {
    padding-bottom: 330px;
}

/* Dichtere Variante fuer Auswertungstabellen mit vielen Spalten */
.designbox--kompakt th,
.designbox--kompakt td {
    padding: 7px 10px;
    font-size: 13px;
}

.designbox .num {
    text-align: right;
    white-space: nowrap;
}

/* Aufklappbare Gruppe (Produkttypen in wawi_ladenhueter.php). Kopf und
   Koerper sind dieselben Bausteine wie bei .order-section, deshalb steht
   hier nur, was details/summary zusaetzlich braucht. */
.report-gruppe {
    margin-bottom: 12px;
}

.report-gruppe > summary {
    cursor: pointer;
    list-style: none;
}

.report-gruppe > summary::-webkit-details-marker {
    display: none;
}

/* Zugeklappt ist der Kopf die ganze Karte - dann rundum abgerundet */
.report-gruppe:not([open]) > summary {
    border-radius: 8px;
}

/* Aufklapp-Pfeil. Bewusst gross und in Markenblau - bei 12px ging das Dreieck
   neben der fetten 14,5px-Kopfzeile fast unter. Kein \25B6 (grosses Dreieck):
   das rendern manche Systeme als Emoji, deshalb \25B8 in gross. Feste Breite
   plus zentrierte Ausrichtung, damit der Titel in allen Kopfzeilen an derselben
   Stelle beginnt und der Pfeil beim Drehen optisch stehen bleibt. */
.report-gruppe > summary::before {
    content: '\25B8';           /* kleines Dreieck, dreht sich beim Aufklappen */
    display: inline-block;
    width: 14px;
    margin-right: 2px;
    font-size: 19px;
    line-height: 1;
    text-align: center;
    color: var(--mh-blau);
    transition: transform 0.15s ease;
}

.report-gruppe[open] > summary::before {
    transform: rotate(90deg);
}

.report-gruppe__name {
    flex: 1;
}

.report-gruppe__meta {
    font-weight: normal;
    font-size: 12.5px;
    color: var(--mh-blau);
}

/* Anteilsbalken in der Umsatztabelle */
.report-anteil {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-bar-wrap {
    flex: 0 0 auto;
    width: 160px;
    height: 10px;
    background: var(--mh-grau);
    border-radius: 5px;
    overflow: hidden;
}

.report-bar {
    height: 100%;
    background: var(--mh-blau);
    border-radius: 5px;
}

/* 90%-Grenze: Trennlinie unter der letzten Zeile davor, darunter die
   Erklaerung. Rot bewusst das Warnrot des Systems (Glocke, Ticket-Prio). */
.designbox tr.report-grenze td {
    border-bottom: 2px solid var(--mh-rot);
}

.designbox td.report-grenze-label {
    background: var(--mh-rot-hell);
    color: var(--mh-rot-dunkel);
    font-size: 11.5px;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
}

/* Summenzeile am Tabellenfuss */
.designbox tfoot tr,
.designbox tfoot tr:nth-child(odd),
.designbox tfoot tr:nth-child(even) {
    background: var(--mh-hell);
    font-weight: bold;
}

.designbox tfoot td {
    border-top: 1px solid var(--mh-rand);
}

.report-fuss-hinweis {
    font-weight: normal;
    color: var(--mh-text-leise);
}



/* ==========================================================================
   Erweiterung (nachrichten.php): interne Nachrichten zwischen Buero und
   Versand. Vorher eine .infobox2-Tabelle als Formular und pro Nachricht eine
   .designbox bzw. ein <p class="infobox"> mit Aktionen in eckigen Klammern.
   Jetzt: eine order-section je Bereich, darin das Formular untereinander und
   die Nachrichten als eigene Karten mit Kopfzeile (wer/wann) und Pillen.
   ========================================================================== */

/* ---- Formular "Neue Nachricht" ---- */

/* .form-stapel ist dieselbe Darstellung generisch nutzbar: Beschriftung ueber
   dem Feld, Felder untereinander, Felder immer volle Rahmenbreite (also auch
   auf dem Handy nie breiter als der Schirm). Zuerst in wawi_etti.php gebraucht. */
.nachricht-form,
.form-stapel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}

/* Variante fuer lange Texte, die die volle Breite ausnutzen duerfen */
.form-stapel--breit {
    max-width: 100%;
}

/* .content select / .content textarea aus TEIL 1 sind spezifischer als eine
   blosse Klasse - deshalb hier ebenfalls mit .content-Praefix. */
.content .nachricht-form select,
.content .nachricht-form textarea,
.content .nachricht-form input[type="file"],
.content .form-stapel select,
.content .form-stapel textarea,
.content .form-stapel input[type="file"],
.content .form-stapel input[type="text"],
.content .form-stapel input[type="number"],
.content .form-stapel input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    background: #fff;
    font-size: 13.5px;
    font-family: inherit;
    margin: 0;
}

.content .nachricht-form textarea,
.content .form-stapel textarea {
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
}

.content .nachricht-form select:focus,
.content .nachricht-form textarea:focus,
.content .form-stapel select:focus,
.content .form-stapel textarea:focus,
.content .form-stapel input:focus {
    outline: none;
    border-color: var(--mh-rand-hover);
    box-shadow: 0 0 0 3px var(--mh-hell);
}

.nachricht-form__optional {
    font-weight: normal;
    color: var(--mh-text-leise);
}

/* Absender: keine Auswahl, sondern die eigene Stelle als feststehende Angabe.
   Sieht wie ein Feld aus (gleicher Rahmen und Innenabstand wie das Pulldown
   daneben), ist aber gedeckt gefaerbt - so ist auf einen Blick zu sehen, dass
   hier nichts einzustellen ist. */
.nachricht-form__absender {
    padding: 7px 9px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    background: var(--mh-flaeche-grau);
    color: var(--mh-text-label);
    font-size: 13.5px;
}

.nachricht-form__aktionen,
.form-stapel__aktionen {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Kurzes Formular in EINER Zeile statt untereinander (Vorlage: "Neues TODO" auf
   todo.php): das Eingabefeld nimmt den Platz, danach Haken und Knopf.
   align-items: stretch statt einer ausgerechneten Hoehe - der groesste
   Bedienpunkt gibt die Hoehe vor, die anderen ziehen mit, auch nach spaeteren
   Aenderungen an Schrift oder Innenabstand (gleiches Prinzip wie .knopfreihe). */
.form-stapel--zeile {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
}

/* Schlaegt das width:100% der Grundregel weiter oben - gleiche Spezifitaet,
   steht aber spaeter in der Datei. Ohne flex-basis/min-width laesst flex das
   Feld auf schmalen Displays bis auf die Platzhalterbreite zusammenschrumpfen;
   mit flex-wrap rutschen Haken und Knopf dort stattdessen in die naechste Zeile. */
.content .form-stapel--zeile input[type="text"] {
    flex: 1 1 240px;
    min-width: 180px;
    width: auto;
}

.form-stapel--zeile .form-check {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Ankreuzfeld mit Beschriftung daneben. Die ganze Beschriftung ist anklickbar,
   das Kaestchen selbst gross genug zum Antippen (Vorgabe aus TEIL 1 gibt ihm
   sonst nur die winzige Browser-Groesse mit 4px Aussenabstand). */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    cursor: pointer;
}

.content .form-check input[type="checkbox"],
.content .form-check input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--mh-blau);
}

/* ---- Eine Nachricht ---- */

.nachricht {
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    background: var(--mh-flaeche);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.nachricht:last-child {
    margin-bottom: 0;
}

.nachricht__kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 10px;
}

.nachricht__wer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 13px;
}

.nachricht__von,
.nachricht__an {
    font-weight: 600;
    color: #16202a;
}

.nachricht__pfeil {
    font-size: 10px;
    color: var(--mh-blaugrau-text);
}

.nachricht__zeit {
    color: var(--mh-text-leise);
    font-size: 12px;
}

.nachricht__aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nachricht__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mh-text);
    overflow-wrap: anywhere;
}

.nachricht__foto {
    display: inline-block;
    margin-top: 10px;
}

.nachricht__foto img {
    display: block;
    max-width: 100%;
    width: 320px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
}

@media (max-width: 767px) {
    /* Auf dem Handy stehen die Aktionen unter der Wer/Wann-Zeile statt daneben */
    .nachricht__kopf {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Kleine Variante von .boxwarnung fuer einen kurzen, aber deutlichen Hinweis
   ueber einer Liste (erste Verwendung: "Anzeige auf 50 Artikel begrenzt" in
   wawi.php). Gleiche Warnflaeche und Rundung wie die grosse Box, nur schmaler
   und einzeilig; der Text bleibt im normalen Dunkelgrau, nur das Icon traegt
   das Warnorange - das liest sich besser als durchgehend oranger Text.
   Muss nach .boxwarnung stehen, sonst gewinnt dessen padding: 20px. */
.boxwarnung--klein {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    font-size: 13.5px;
    margin-bottom: 12px;
}

.boxwarnung--klein i {
    color: var(--mh-orange-text);
    font-size: 15px;
}

/* ==========================================================================
   Leerzustand mit Erklaerung (erste Verwendung: pack_scan.php, wenn nichts
   zu scannen ist). Groesser als .order-empty, das nur ein grauer Kleintext
   ist - hier steht ein Icon, eine kurze Ueberschrift, ein Satz Erklaerung
   und je nach Lage eine Aktion.
   ========================================================================== */

.leer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    padding: 30px 20px;
    margin-bottom: 24px;
}


/* [hidden] hier explizit erzwingen: display:flex oben und das hidden-Attribut
   haben gleiche Spezifitaet, ohne diese Regel bliebe eine versteckt
   ausgegebene Box sichtbar (dieselbe Falle wie bei .ticket-bulkbar). Gebraucht
   fuer "Alles abgearbeitet!" in wawi.php?show=bestand: die Meldung steht immer
   im HTML und wird erst eingeblendet, wenn die letzte Karte rausfaellt. */
.leer-box[hidden] {
    display: none;
}

.leer-box__icon {
    font-size: 30px;
    color: var(--mh-blaugrau-text);
}

.leer-box__titel {
    font-size: 15px;
    font-weight: 700;
    color: #16202a;
}

.leer-box__text {
    font-size: 13px;
    color: var(--mh-text-label);
    max-width: 420px;
    line-height: 1.55;
}

/* Der Knopf steht optional darunter und braucht etwas Luft nach oben */
.leer-box .btn-primary {
    margin-top: 6px;
}

/* Scan-Protokoll (pack_scan.php): Zeitpunkt schmal und ohne Umbruch, damit
   die Ergebnis-Spalte den Platz bekommt. */
.scan-protokoll__zeit {
    white-space: nowrap;
    width: 1%;
    color: var(--mh-text-label);
}

.scan-protokoll__leer {
    color: var(--mh-blaugrau-text);
}

/* Tabellenzeile hervorheben (erste Verwendung: Express-Bestellungen in
   pack_control.php). Zweiteiliger Selektor, damit er die Zebrastreifen aus
   .designbox tr:nth-child() schlaegt; gleicher Ton wie .list-row--express. */
.designbox tr.zeile-alarm > td {
    background: var(--mh-rot-hell);
}

/* Datums- und Leerzellen in Auswertungstabellen */
.designbox .tabelle-datum {
    white-space: nowrap;
    color: var(--mh-text-label);
}

.tabelle-leer {
    color: var(--mh-blaugrau-text);
}

/* Tabelle direkt unter einem Section-Kopf (.order-section__body--blank):
   .designbox th hat denselben hellblauen Grund wie .order-section__header,
   die beiden stapeln sich dort also zu zwei gleichen Balken uebereinander.
   In dieser Lage bekommt die Kopfzeile deshalb weissen Grund - die Spalten
   trennt nur noch die Linie darunter, und der blaue Balken bleibt der eine
   Kopf der Karte. */
/* WICHTIG: beide Wege nennen. Steckt die Tabelle in einem .tabelle-scroll
   (zwoelf Seiten tun das), ist sie kein direktes Kind des Body mehr - der
   Kindselektor allein greift dann nicht, und genau dann stehen zwei gleich
   aussehende blaue Balken uebereinander. Aufgefallen am 12.09.2026 an
   sys_fehler.php, betroffen waren alle zwoelf. */
.order-section__body--blank > .designbox th,
.order-section__body--blank > .tabelle-scroll > .designbox th {
    background-color: #fff;
    border-radius: 0;
}

/* Erfolgs-Variante des Leerzustand-Icons (pack_start.php nach dem Aktivieren) */
.leer-box__icon--ok {
    color: var(--mh-gruen);
}

/* Die beiden Start-Aktionen in pack_start.php nebeneinander, auf dem Handy
   untereinander und ueber die volle Breite. */
.start-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Erklaerender Fliesstext in einer order-section (Info zum PRIO-Versand) */
.start-info {
    font-size: 13px;
    line-height: 1.65;
    color: var(--mh-text);
}

@media (max-width: 767px) {
    .start-aktionen { flex-direction: column; }
    .content .start-aktionen .btn-important,
    .content .start-aktionen .btn-primary { text-align: center; }
}

/* ==========================================================================
   pack_dhl_ls.php - Ampel-Punkte, Schrittliste, Tabellen-Kleinigkeiten
   ==========================================================================
   Die Ampel in der Bestellliste waren frueher zwei Emoji direkt im Text
   (rotes Kreissymbol / gruenes Herz). Als Emoji sahen sie auf jedem
   Betriebssystem anders aus und liessen sich nicht einfaerben - jetzt
   FontAwesome-Icons wie ueberall sonst, Farben aus der Palette.
   ========================================================================== */

/* Ampel vor der Bestellnummer: gefuellter Kreis mit Symbol darin. Als blosses
   Icon in 11px war auf einen Blick kaum zu sehen, welche Zeilen schon fertig
   sind - jetzt traegt die Farbflaeche die Aussage, nicht die Strichstaerke. */
.status-punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    /* middle statt eines festen Versatzes: -5px schob den 20px hohen Kreis unter
       die Grundlinie, dadurch wuchs die Zeilenbox nach unten und die Bestellnummer
       daneben sass optisch hochgestellt (wie mit einem Umbruch dahinter). */
    vertical-align: middle;
}

.status-punkt--offen { background: var(--mh-rot); }
.status-punkt--ok    { background: var(--mh-gruen); }

/* Etwas Luft zwischen Ampel und Bestellnummer */
.status-punkt { margin-right: 5px; }

/* Rote/blaue <font>-Hinweise in Tabellenzellen, jetzt als Klassen */
.text-alarm {
    color: var(--mh-rot);
    font-weight: bold;
}

a.text-alarm:hover {
    color: var(--mh-rot-dunkel);
}

.text-warnung {
    color: var(--mh-orange-warn);
    font-weight: bold;
}

.text-hinweis {
    color: var(--mh-blau);
    font-weight: bold;
}

/* Adressfehler-Knopf ganz rechts in der Zeile: derselbe rote Pfeil wie
   frueher (dort das Zeichen U+21AA), jetzt als Icon - fa-share ist von den
   FontAwesome-Pfeilen der, der dem alten Zeichen am naechsten kommt. */
.dhl-adressfehler {
    color: var(--mh-rot);
    font-size: 15px;
}

.dhl-adressfehler:hover {
    color: var(--mh-rot-dunkel);
    text-decoration: none;
}

.dhl-tabelle__nr,
.dhl-tabelle__gewicht,
.dhl-tabelle__aktion {
    white-space: nowrap;
}

/* Ampel + Bestellnummer brauchen zusammen etwas Platz, sonst draengt sich die
   Spalte zusammen und der Kreis klebt an der Nummer. Kopfzeile mit, damit die
   Breite auch bei kurzen Nummern haelt. */
.dhl-tabelle th:first-child,
.dhl-tabelle__nr {
    min-width: 125px;
}

.dhl-tabelle__gewicht {
    font-weight: bold;
}

/* Ablauf als nummerierte Schritte (pack_dhl_ls.php) statt einer Liste aus
   fetten Textlinks. Jeder Schritt zeigt seinen Zustand doppelt: an der Marke
   links (Nummer / gruener Haken) und am Grundton der Zeile. Der Schritt, der
   gerade dran ist, hat zusaetzlich einen blauen Balken an der linken Kante. */
.schritte {
    list-style: none;
    margin: 0;
    padding: 0;
}

.schritt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mh-grau);
    /* Platz fuer den Zustandsbalken links, damit die Zeilen nicht springen,
       sobald ein anderer Schritt aktiv wird */
    border-left: 3px solid transparent;
}

.schritt:last-child {
    border-bottom: none;
}

/* Marke links: Schrittnummer, bei erledigten Schritten ein Haken */
.schritt__marke {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--mh-blaugrau-hell);
    color: var(--mh-blaugrau-text);
}

.schritt__text {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.schritt__titel {
    font-size: 14px;
    font-weight: 700;
    color: #16202a;
}

.schritt__status {
    font-size: 12px;
    color: var(--mh-text-label);
}

/* Die Aktion steht direkt neben dem Text statt rechtsbuendig am Zeilenende -
   auf breiten Bildschirmen waere sie sonst weit vom Schritt entfernt. */
.schritt__aktion {
    flex: 0 0 auto;
    margin-left: 6px;
}

/* --- Zustaende --- */

/* erledigt: gruene Marke mit Haken, Zeile leicht gruenlich hinterlegt */
.schritt--fertig {
    background: var(--mh-gruen-hell);
    border-left-color: var(--mh-gruen-rand);
}

.schritt--fertig .schritt__marke {
    background: var(--mh-gruen);
    color: #fff;
}

/* jetzt dran: weiss, blauer Balken links, blaue Marke */
.schritt--aktiv {
    background: #fff;
    border-left-color: var(--mh-blau);
}

.schritt--aktiv .schritt__marke {
    background: var(--mh-blau);
    color: #fff;
}

/* noch nicht dran: zurueckgenommen, aber lesbar */
.schritt--wartet {
    background: var(--mh-flaeche);
}

.schritt--wartet .schritt__titel {
    color: var(--mh-text-label);
    font-weight: 600;
}

@media (max-width: 767px) {
    /* Auf dem Handy die Aktion unter den Text, sonst wird es zu eng */
    .schritt {
        flex-wrap: wrap;
    }
    .schritt__aktion {
        margin-left: 40px;
    }
}

/* Warnhinweis am Fuss einer order-section (unter den Schritten) */
.order-hinweis-fuss {
    border-top: 1px solid var(--mh-grau);
    background: var(--mh-warnung-hell);
    font-size: 13px;
    color: var(--mh-text);
}

.order-hinweis-fuss i {
    color: var(--mh-orange-text);
    margin-right: 6px;
}

/* Zwei weitere Badge-Toene fuer Adressmeldungen in pack_dhl_ls.php.
   --orange nutzt das kraeftige Warnorange auf der hellen Flaeche, die
   status-badge--warning schon mitbringt; --info ist die blaue Chip-Flaeche
   wie bei den Pillen und Section-Koepfen. */
.status-badge--orange { background: #fdf1dc; color: var(--mh-orange-warn); }
.status-badge--info   { background: var(--mh-hell); color: var(--mh-blau); }

/* Mehrere Meldungen untereinander in einer Tabellenzelle brauchen etwas Luft */
.dhl-tabelle .status-badge {
    margin-top: 3px;
    white-space: normal;
}

/* Fortschrittsbalken in einem Schritt (pack_dhl_ls.php: Label + Lieferscheine).
   Liegt versteckt im Markup und wird vom Script eingeblendet, sobald der Lauf
   startet - der Knopf verschwindet dafuer. */
.schritt__balken {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--mh-grau);
    overflow: hidden;
    margin-top: 2px;
    max-width: 420px;
}

.schritt__balken-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--mh-blau);
    transition: width 0.3s ease;
}

/* Waehrend des Laufs dreht sich die Marke des Schritts */
.schritt__marke--laeuft {
    animation: schritt-dreh 1.1s linear infinite;
}

@keyframes schritt-dreh {
    to { transform: rotate(360deg); }
}

.schritt__status--fehler {
    color: var(--mh-rot);
    font-weight: bold;
}

/* Laeuft der Schritt, braucht die Textspalte die volle Breite fuer den Balken */
.schritt:has(.schritt__balken:not([hidden])) .schritt__text {
    flex: 1;
}

/* Adressmeldungen sind Links zum Bearbeiten (pack_dhl_ls.php). Ohne diese
   Regel wuerde .content a die Badge-Farbe ueberschreiben und beim Ueberfahren
   unterstreichen. */
.content a.status-badge {
    text-decoration: none;
    cursor: pointer;
}

/* Nur in der Adressliste - ohne die Einschraenkung schlaegt diese Regel wegen
   der hoeheren Spezifitaet auch den weissen Text des Express-Knopfs in der
   Topbar, der ebenfalls ein a.status-badge--danger ist. */
.dhl-tabelle a.status-badge--danger { color: var(--mh-rot-dunkel); }
.dhl-tabelle a.status-badge--orange { color: var(--mh-orange-warn); }
.dhl-tabelle a.status-badge--info   { color: var(--mh-blau); }

.content a.status-badge:hover {
    text-decoration: none;
    filter: brightness(0.94);
}

/* Knopf, der gerade nicht angeklickt werden darf (z.B. waehrend das Erzeugen
   in pack_dhl_ls.php laeuft). Fuer <a>-Knoepfe gibt es kein disabled-Attribut,
   deshalb ueber aria-disabled - das sagt zugleich Screenreadern Bescheid.
   pointer-events:none haelt den Klick ab, bevor er beim Handler ankommt. */
.content .btn-primary[aria-disabled="true"],
.content .btn-important[aria-disabled="true"],
.content .btn-secondary[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   Kopfzeilen-Aktionen einer Bestellung auf dem Handy (wawi_bestellungen.php).
   Vorher standen dort ein bis drei Textlinks ("Sammeletiketten · Schließen ·
   Bearbeiten"), die in eine zweite, zusammenhanglos wirkende Zeile unter der
   Ueberschrift rutschten.

   Gibt es ein Bearbeiten-Menue (nur Admin), verschwinden die Direktlinks ganz -
   alles steckt dann im Pulldown, das selbst unveraendert bleibt (gleiches
   Aussehen wie in order.php). Die Kopplung per :has() ist wichtig: ohne Menue
   (Nicht-Admin) muss der Sammeletiketten-Link stehen bleiben, dort nur auf
   sein Icon eingedampft.
   Steht bewusst am Dateiende, damit diese Regeln nach den Grundregeln greifen.
   ========================================================================== */
@media (max-width: 768px) {

    /* Positionsliste laesst sich quer schieben, statt die Zeile zusammen-
       zuquetschen (gleiches Verhalten wie die Tabelle in pack_dhl_ls.php).
       Ohne die Mindestbreite verteilt der Flexbau den zu knappen Platz auf
       Menge und Artikelname, statt ueberzulaufen. */
    .wb-posis {
        overflow-x: auto;
    }

    .wb-row {
        box-sizing: border-box;
        min-width: 520px;
    }

    .wb-kopf-aktionen {
        gap: 6px;
        margin-left: auto;
    }

    .wb-kopf-aktionen:has(.order-posi-menu) .wb-kopf-direkt {
        display: none;
    }

    /* Beschriftung nur im Direktbereich ausblenden - das Menue behaelt
       ueberall seinen Text */
    .wb-kopf-direkt .wb-kopf-text,
    .wb-kopf-direkt .wb-kopf-trenner {
        display: none;
    }

    /* Fingergerechte Flaeche, sobald nur noch das Icon dasteht */
    .wb-kopf-direkt > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        border-radius: 6px;
        border: 1px solid var(--mh-rand);
        background: #fff;
        font-size: 14px;
    }

    /* Eintraege, die es nur im Handy-Menue gibt (Sammeletiketten) */
    .order-posi-menu__body .wb-menu-mobil {
        display: block;
    }
}


/* ==========================================================================
   Erweiterung (time_arbeitsplan.php): Arbeitsplan je Tag.
   Vorher eine .designbox-Tabelle je Tag, darin die eingeteilten Personen als
   float:left-Kaesten mit fester Breite 100px und die Admin-Formulare als
   verschachtelte Tabellen mit 200px-Auswahlfeldern - beides lief auf dem
   Handy aus dem Bildschirm. Jetzt eine order-section je Tag, die Personen
   als umbrechende Plaketten, die Formulare als .suchleiste.
   ========================================================================== */

.plan-personen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Die Flaechenfarbe kommt aus user.user_color und wird deshalb weiter inline
   gesetzt - alles andere steht hier. */
.plan-person {
    min-width: 110px;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}

.plan-person__info {
    display: block;
    font-size: 11.5px;
    opacity: .92;
}

/* Der Loeschknopf sitzt auf der farbigen Flaeche - .content a waere hier blau
   und auf dunklen Farben kaum lesbar. */
.content .plan-person a {
    color: #fff;
    opacity: .8;
    margin-left: 4px;
}

.content .plan-person a:hover {
    opacity: 1;
}

.plan-leer {
    color: var(--mh-text-leise);
    font-size: 13px;
}

/* Geburtstagshinweis - im Tag selbst und als Sammelhinweis fuer die
   ausgeblendeten Wochenendtage. */
.plan-geburtstag {
    margin: 12px 0 0 0;
    padding: 8px 12px;
    background: var(--mh-rot-hell);
    border: 1px solid #f3c6c6;
    border-radius: 8px;
    color: var(--mh-rot-dunkel);
    font-weight: bold;
    font-size: 13.5px;
}

.plan-geburtstag--sammel {
    margin: 0 0 15px 0;
}

/* Trennung nach dem Freitag, damit die Wochen optisch auseinanderfallen */
.plan-tag--wochenende-danach {
    margin-bottom: 40px;
}

/* Die beiden Admin-Formulare untereinander mit etwas Luft dazwischen */
.plan-formulare {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

/* Waehrend per AJAX gespeichert wird, ist die Karte kurz gedaempft und
   gesperrt - ohne Seitenwechsel saehe man sonst gar nicht, dass etwas
   passiert, und ein zweiter Klick koennte dazwischenfunken. */
.plan-body--laeuft {
    opacity: .5;
    pointer-events: none;
}


/* ==========================================================================
   Erweiterung (shops.php)
   ========================================================================== */

/* Mindestbreite fuer eine Tabelle in einem Scrollrahmen - egal ob der Rahmen
   .tabelle-scroll heisst oder (wie hier) der Kartenkoerper selbst ist, der mit
   .order-section__body--blank schon overflow-x mitbringt.
   Die Grundregel .tabelle-scroll > table setzt 900px: richtig fuer die
   siebenspaltige Artikeltabelle in wawi.php, viel zu viel fuer eine Liste mit
   vier, fuenf Spalten - die wuerde sonst auch auf dem Tablet quergeschoben,
   obwohl sie laengst hinpasst. */
.tabelle-scroll--schmal > table {
    min-width: 640px;
}

/* Aktionssymbole am Ende einer Tabellenzeile bleiben in einer Zeile
   nebeneinander (shops.php, versand_label.php) */
.zeilen-aktionen {
    white-space: nowrap;
}

/* gilt fuer alles nebeneinander, nicht nur fuer Pillen - in versand_label.php
   stehen drei beschriftete Pillen und danach ein blosses Loeschsymbol */
.zeilen-aktionen > * + * {
    margin-left: 4px;
}

/* inline-flex-Knoepfe sitzen sonst auf der Textgrundlinie und stehen damit
   unterschiedlich hoch, sobald sie verschiedene Hoehen haben */
.zeilen-aktionen > * {
    vertical-align: middle;
}

/* Spalte, die den Restplatz der Tabelle bekommt. Ohne das verteilt die
   Auto-Tabelle die uebrige Breite auf alle Spalten - die Aktionsspalte wird
   dann breiter als noetig und das Loeschsymbol steht mitten im Nirgendwo
   statt am Zeilenende. */
.designbox .spalte-fuellt {
    width: 100%;
}

/* Loeschsymbol als letzte, schmale Spalte ganz rechts */
.designbox .zeilen-del {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Zelle, deren Inhalt am Stueck bleiben soll (Domains, URLs, Kennungen). Die
   Tabelle wird dadurch breiter und schiebt sich in ihrem Rahmen quer - das
   liest sich besser als eine mitten im Wort getrennte Adresse. */
.designbox .nicht-umbrechen {
    white-space: nowrap;
}


/* ==========================================================================
   Erweiterung (versand_label.php): "Adresse aus Freitext uebernehmen".
   Vorher ein per JavaScript ein- und ausgeblendeter <div> mit Inline-Styles -
   ein <details> kann das von sich aus.
   ========================================================================== */

.texterkennung {
    margin-bottom: 16px;
}

.texterkennung > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--mh-hell);
    border: 1px solid var(--mh-rand);
    color: var(--mh-blau);
    font-size: 12.5px;
}

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

.texterkennung > summary:hover {
    background: var(--mh-hell-hover);
    border-color: var(--mh-rand-hover);
}

.texterkennung__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    max-width: 480px;
    background: var(--mh-flaeche);
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
}

/* .content textarea aus TEIL 1 ist spezifischer als eine blosse Klasse */
.content .texterkennung__body textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
}


/* ==========================================================================
   Formular als Beschriftung-links / Feld-rechts-Liste.
   Baut auf .kv-row/.kv-label/.kv-value auf (order.php) - also dieselbe Optik
   wie die Datenzeilen dort, nur mit Eingabefeldern. Gedacht fuer Formulare,
   die als EINE Liste gelesen werden sollen; ein .search-grid mit vielen
   kurzen Feldern nebeneinander wird da schnell unuebersichtlich.
   Erste Verwendung: versand_label.php.
   ========================================================================== */

/* .content input/.content select aus TEIL 1 sind spezifischer als eine blosse
   Klasse - deshalb auch hier mit .content-Praefix. */
.content .kv-form input[type="text"],
.content .kv-form input[type="number"],
.content .kv-form input[type="email"],
.content .kv-form input[type="date"],
.content .kv-form select,
.content .kv-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    background: #fff;
    font-size: 13.5px;
    font-family: inherit;
}

.content .kv-form input:focus,
.content .kv-form select:focus,
.content .kv-form textarea:focus {
    outline: none;
    border-color: var(--mh-rand-hover);
    box-shadow: 0 0 0 3px var(--mh-hell);
}

/* Zwei Felder in einer Zeile (Strasse + Hausnummer, PLZ + Ort) */
.kv-feldreihe {
    display: flex;
    gap: 8px;
}

/* Feld, das nur wenig Platz braucht (Hausnummer, PLZ, Gewicht, Anzahl) */
.content .kv-form .kv-kurz {
    flex: 0 0 96px;
    width: 96px;
}

.kv-feldreihe .kv-breit {
    flex: 1 1 auto;
    min-width: 0;
}

/* Erklaerender Kleintext unter einem Feld */
.kv-hinweis {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--mh-text-leise);
}

/* Waagerechte Trennung zwischen zwei Gruppen von Zeilen - ersetzt das
   frueher haendisch gesetzte <hr/> in der Formulartabelle. */
.kv-trenner {
    border-top: 2px solid var(--mh-rand-leise);
    margin: 6px 0;
}

/* Die Aktionszeile am Ende braucht keinen Trennstrich ueber sich */
.kv-row--aktionen {
    border-bottom: none;
    padding-top: 14px;
}

@media (max-width: 768px) {
    /* Beschriftung ueber das Feld: 92px links lassen fuer "Empfaenger 1" oder
       "Bezeichnung" keine lesbare Zeile mehr uebrig, und das Feld daneben
       waere nur noch halb so breit wie der Schirm. */
    .kv-form .kv-row {
        flex-direction: column;
        gap: 4px;
    }

    .kv-form .kv-label {
        flex: none;
    }

    /* In der Aktionszeile gibt es links nichts - die leere Beschriftung wuerde
       sonst als Luecke ueber dem Knopf stehen. */
    .kv-form .kv-row--aktionen .kv-label:empty {
        display: none;
    }
}


/* Kleines Formular in einer Tabellenzelle: Anzahl + Knopf nebeneinander
   (produktion_daten_rubs.php, "in die Bestellung legen") */
.rubs-add {
    display: flex;
    align-items: center;
    gap: 6px;
}

.content .rubs-add input[type="number"] {
    width: 62px;
    height: 28px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 6px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 5px;
}

.content .rubs-add button {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
    white-space: nowrap;
}


/* Platzhalter fuer eine Aktion, die es in dieser Zeile nicht gibt. Ohne das
   ruecken die nachfolgenden Symbole nach links und dasselbe Symbol steht von
   Zeile zu Zeile an einer anderen Stelle - beim Ueberfliegen einer Liste ist
   genau das anstrengend. Der Platzhalter ist eine unsichtbare Kopie des
   Knopfes, damit er exakt dessen Breite hat. */
.aktion-platzhalter {
    visibility: hidden;
}


/* ==========================================================================
   Erweiterung (marketing_insta_sprueche.php): Galerie der erzeugten Postings.
   Vorher inline gestylte <span>-Kacheln mit fest 260px breiten Bildern - auf
   dem Handy passte keine davon in den Bildschirm.
   ========================================================================== */

.posting-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.posting-kachel {
    position: relative;
}

.posting-kachel img {
    display: block;
    width: 100%;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
}

/* Auswahlkaestchen oben links auf dem Bild - gross genug zum Antippen */
.content .posting-kachel input[type="checkbox"] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--mh-blau);
    /* Auf dem hellen wie dunklen Bild erkennbar */
    box-shadow: 0 0 0 2px rgba(255,255,255,.85);
    border-radius: 3px;
}

/* Loeschen oben rechts. Hier bewusst NICHT die rahmenlose .zeilen-aktion:
   der Knopf liegt auf einem beliebigen Bild und braucht eigene Deckung. */
.content .posting-kachel__del {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mh-rot);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.content .posting-kachel__del:hover {
    background: var(--mh-rot-dunkel);
    text-decoration: none;
}

/* Erzeugtes Posting mittig, nie breiter als der Rahmen */
.posting-vorschau {
    text-align: center;
}

.posting-vorschau img {
    max-width: 400px;
    width: 100%;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 6px;
    margin-bottom: 14px;
}

/* Farbfeld: der Hex-Wert liest sich in Festbreitenschrift besser */
.content .farbfeld {
    font-family: monospace;
    max-width: 160px;
}

/* Zuletzt benutzte Farben als anklickbare Tupfer unter dem Feld */
.farbtupfer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.farbtupfer span {
    width: 22px;
    height: 22px;
    border: 1px solid var(--mh-rand-grau);
    border-radius: 4px;
    cursor: pointer;
}

/* Auswahl aus mehreren Moeglichkeiten nebeneinander (Format-Radios) */
.radio-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

/* Sendungsverfolgung (order_tracking.php): Stationen als Zeitstrahl. Die
   Linie ist der linke Rand des Eintrags selbst, der Punkt sitzt absolut
   darauf - so bleibt sie ohne Extra-Element luecklos durchgezogen. */
.tracking-verlauf {
    list-style: none;
    margin: 0;
    padding: 2px 0 0 2px;
}

.tracking-event {
    position: relative;
    padding: 0 0 16px 20px;
    border-left: 2px solid var(--mh-rand);
}

/* Beim letzten Eintrag endet der Strahl - der Rand bleibt aber als
   Platzhalter stehen, damit der Punkt nicht um 2px verspringt */
.tracking-event:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.tracking-event::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mh-flaeche);
    border: 2px solid var(--mh-rand);
}

.tracking-event--aktuell::before {
    background: var(--mh-blau);
    border-color: var(--mh-blau);
}

.tracking-event__zeit {
    font-size: 12.5px;
    color: var(--mh-text-leise);
}

.tracking-event__text {
    font-size: 13.5px;
}

.tracking-event--aktuell .tracking-event__text {
    font-weight: bold;
}

.tracking-event__ort {
    font-size: 12.5px;
    color: var(--mh-text-leise);
    margin-top: 1px;
}


/* ==========================================================================
   Push-Einstellungen je Meldungstyp (sys_glocke.php): rechts in der Zeile der
   Schalter "Push" und dahinter die Geraete, die diesen Typ bekommen sollen.
   Auf schmalen Bildschirmen rutscht der Block unter den Meldungstext, deshalb
   nur umbrechen statt nebeneinander zu quetschen.
   ========================================================================== */

.glocke-push {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

/* Der Schalter gehoert optisch zur Zeile, die Geraete dahinter sind seine
   Ausfuehrung - der Strich dazwischen macht das ohne Ueberschrift deutlich. */
.glocke-push__empfaenger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-left: 14px;
    border-left: 1px solid var(--mh-rand-leise);
}

.glocke-push__empfaenger:empty {
    display: none;
}

.glocke-push .form-check {
    color: var(--mh-text-leise);
}

/* Der Schalter selbst ist die eigentliche Entscheidung und darf sich vom
   Rest abheben. */
.glocke-push__schalter {
    font-weight: 600;
    color: inherit;
}


/* ==========================================================================
   Raster aus Ankreuzfeldern (handel_kontakte.php: 18 Ladenarten).
   Als reine Flexzeile stehen die .form-check-Beschriftungen unterschiedlich
   weit ein und die Kaestchen bilden keine Spalte - im Raster mit fester
   Mindestbreite sitzen sie untereinander und lassen sich abhaken, ohne dass
   das Auge suchen muss. Spaltenzahl richtet sich nach der Breite.
   ========================================================================== */

.check-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px 16px;
}


/* ==========================================================================
   Vorschau eines Serienanschreibens (handel_kontakte_liste.php).
   Zeigt den fertigen HTML-Rumpf der Mail samt Signatur. Bewusst KEIN
   white-space: pre-wrap - die Zeilenumbrueche stecken bereits als <br> darin
   (nl2br in hako_mail_html()), pre-wrap wuerde jeden davon verdoppeln.
   ========================================================================== */

.hako-vorschau {
    word-break: break-word;
    margin: 0;
    padding: 12px 14px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    background: var(--mh-flaeche);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}


/* .report-meta traegt bewusst margin-top: -8px - der Kleintext ist auf die
   .order-actions-bar darueber abgestimmt, die eigenen Abstand mitbringt.
   Innerhalb einer .kv-value steht er dagegen direkt unter Knoepfen oder einem
   Eingabefeld, und der negative Abstand zieht ihn sichtbar in diese hinein
   (aufgefallen an "Adressen als CSV exportieren" in handel_kontakte_liste.php).
   Dort also ein echter Abstand statt eines negativen. */
.kv-value .report-meta {
    margin-top: 6px;
}


/* ==========================================================================
   wawi_bestand.php
   ========================================================================== */

/* Rechte Haelfte der Kartenkopfzeile: Stand der Daten und das Aktionen-Pulldown
   sitzen zusammen, damit der Kopf-Flex (space-between) sie nicht auseinander-
   zieht - der Produktname bleibt links, beides andere rueckt nach rechts. */
.bestand-kopf__rechts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Variante gehoert zum Namen, soll ihn aber nicht ueberstrahlen */
.bestand-kopf__variante {
    font-weight: normal;
    color: var(--mh-text-leise);
}

.bestand-menu__pfeil {
    font-size: 10px;
    opacity: 0.7;
}

.bestand-menu[open] .bestand-menu__pfeil {
    transform: rotate(180deg);
}

/* Archivieren ist die einzige Aktion im Menue, die nicht rueckgaengig zu machen
   ist - im Menue ohne eigene Flaeche, aber in Rot. Das Icon faerbt
   .order-posi-menu__body a i blau ein, deshalb hier ausdruecklich mit. */
.order-posi-menu__body a.bestand-menu__gefahr,
.order-posi-menu__body a.bestand-menu__gefahr i {
    color: var(--mh-rot-dunkel);
}

.order-posi-menu__body a.bestand-menu__gefahr:hover {
    background: var(--mh-rot);
}

.order-posi-menu__body a.bestand-menu__gefahr:hover,
.order-posi-menu__body a.bestand-menu__gefahr:hover i {
    color: #fff;
}


/* Offene Lieferantenbestellungen */

/* .list-row__main hat flex:1 mit min-width:0, gibt also lieber Breite ab, als
   die Zeile umbrechen zu lassen. Neben den beiden Knoepfen ("Lieferung
   einbuchen", "nur abhaken") blieb dem Produktnamen auf dem Handy dadurch eine
   Spalte von wenigen Zeichen - ein Wort je Zeile. Mit einer Mindestbreite als
   flex-basis rutscht stattdessen die Aktionsgruppe in die naechste Zeile,
   waehrend auf dem Desktop beides nebeneinander bleibt. */
.lieferzeile__main {
    flex: 1 1 260px;
}


/* ==========================================================================
   bank_umsaetze.php - Kontoumsaetze
   ========================================================================== */

/* Zahlungseingang und Abgang auf einen Blick unterscheidbar. Kein
   Hintergrund wie bei .status-badge: in einer langen Liste mit einem
   Betrag je Zeile waere das zu unruhig. */
.bank-plus {
    color: var(--mh-gruen);
    font-weight: bold;
    white-space: nowrap;
}

.bank-minus {
    color: var(--mh-text-leise);
    white-space: nowrap;
}


/* ==========================================================================
   Systemmeldung nach einer Aktion ("Bestellung verschickt", ...)
   ========================================================================== */

/* Ersetzt die alten <font color=red><b>...</b></font>-Rueckmeldungen. Bewusst
   generisch gehalten (nicht wawi-spezifisch), weil solche Rueckmeldungen ueber
   das ganze System verstreut sind und alle gleich aussehen sollen. */
.meldung {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    margin-bottom: 15px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 13.5px;
}

.meldung i {
    font-size: 15px;
    /* Das Symbol darf nicht mitschrumpfen, wenn der Text auf schmalen
       Displays ueber mehrere Zeilen laeuft. */
    flex: 0 0 auto;
}

.meldung--erfolg {
    background: var(--mh-gruen-hell);
    border-color: var(--mh-gruen-rand);
    color: var(--mh-gruen);
}

.meldung--info {
    background: var(--mh-hell);
    border-color: var(--mh-rand);
    color: var(--mh-blau);
}

.meldung--warnung {
    background: var(--mh-notiz);
    border-color: var(--mh-notiz-rand);
    color: var(--mh-orange-text);
}

.meldung--fehler {
    background: var(--mh-rot-hell);
    border-color: var(--mh-rot);
    color: var(--mh-rot-dunkel);
}


/* Textfeld, das seine Eingabe als Punkte zeigt - fuer Kennungen, bei denen
   der Passwortmanager des Browsers NICHT anspringen soll (time.php: gemeinsam
   genutztes Geraet). Ein type="password" wuerde dort die gespeicherten
   Backoffice-Passwoerter zur Auswahl aufklappen. */
.eingabe-verdeckt {
    -webkit-text-security: disc;
}


/* ==========================================================================
   wawi.php - Box "Offene Bestellung" (Zwischenablage vor dem Verschicken)
   ========================================================================== */

/* Die Menge steht vor dem Produktnamen und soll sich davon abheben, ohne wie
   ein Link auszusehen. Feste Mindestbreite, damit die Namen aller Zeilen
   untereinander an derselben Stelle beginnen (1x neben 250x). */
.bestellbox__menge {
    display: inline-block;
    min-width: 42px;
    margin-right: 6px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* Summe links, Aktionen rechts, abgesetzt von der Positionsliste darueber. */
.bestellbox__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mh-grau);
}

.bestellbox__summe {
    font-size: 13px;
    color: var(--mh-text-leise);
}

/* Einkaufswert je Position (nur Admin) rechts vor dem Loeschsymbol:
   Zeilensumme als Hauptwert, "Menge x Einzelpreis" als Kleintext darunter.
   Rechtsbuendig mit Ziffern gleicher Breite, damit die Betraege aller
   Zeilen untereinander stehen. */
.bestellbox__ek {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bestellbox__ek-fehlt {
    font-size: 12px;
    color: var(--mh-orange-text);
}

/* Hinweis "Mindestbestellwert nicht erreicht" zwischen Positionen und Fuss.
   .meldung bringt einen Abstand nach unten mit, hier sitzt der Fuss mit
   eigenem Abstand und Trennlinie direkt darunter. */
.bestellbox__hinweis {
    margin: 12px 0 0;
}

/* Auf dem Handy stehen Summe und Knoepfe sonst gequetscht nebeneinander. */
@media (max-width: 600px) {
    .bestellbox__fuss {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   WARENWIRTSCHAFT: Trefferliste (wawi.php)
   --------------------------------------------------------------------------
   Bis 09.09.2026 war die Liste EINE 7-spaltige Tabelle: je Artikel zwei und je
   Variante zwei Zeilen, die Spaltenbedeutung wechselte also von Zeile zu Zeile
   ("BESTAND" stand ueber dem Produktstatus-Pulldown). Jetzt eine Karte je
   Artikel, darin beschriftete Felder statt namenloser Eingabefelder.

   Es ist kein Wert weggefallen - die Beschriftung macht die Karte hoeher als
   die alte Zeile, dafuer laesst sie sich ueberhaupt lesen.
   ========================================================================== */

.wawi-liste {
    display: flex;
    flex-direction: column;
    gap: 14px;

    /* Gemeinsame Hoehe ALLER Bedienelemente der Liste - Eingabefelder,
       Pulldowns, Knoepfe und der Bestandsknopf. Eine Variable statt an jeder
       Regel eine eigene Pixelzahl: sonst waeren das sechs Stellen, die beim
       naechsten Umbau einzeln nachgezogen werden muessten und dabei
       auseinanderlaufen. 32px ist dieselbe Hoehe wie in der Suchleiste. */
    --wawi-hoehe: 32px;

    /* Die Spaltenbreiten der Variantenzeile stehen als Variablen da, weil die
       Meldungszeile darunter sich an ihnen ausrichtet: sie ist um die
       Kennungsspalte eingerueckt (faengt also unter "Bestellen" an), und die
       orange Meldung beginnt buendig unter dem Lief-ArtNr-Feld. Beide Masse
       rechnen sich aus genau diesen Werten - sonst muesste man den Einzug bei
       jeder Breitenaenderung von Hand nachziehen und er liefe weg. */
    --wawi-ident-breite: 165px;
    --wawi-bestellen-breite: 108px;
    --wawi-bestand-gruppe: 168px;   /* Bestand 62 + 8 + Mindest 50 + 8 + Speichern 40 */
    --wawi-preis-breite: 105px;
    --wawi-spalte-gap: 14px;        /* Abstand zwischen den Spalten der Zeile */
    --wawi-gruppe-gap: 24px;        /* Abstand zwischen den Bloecken im Formular */
}

/* Die Karten stehen in einer Liste, nicht einzeln auf einer Detailseite -
   der Abstand von .order-section (24px) waere hier zu luftig. */
.wawi-artikel {
    margin-bottom: 0;
}

/* Ein geaenderter Mindestbestand kann den Artikel aus der BESTAND-Ansicht
   nehmen (keine Variante liegt mehr unter ihrem Mindestbestand) - die Karte
   geht dann gleich weg. Kurz ausgeblendet statt schlagartig entfernt, damit
   man sieht, welche Karte gerade gegangen ist und die Liste nicht springt,
   ohne dass klar ist warum. */
.wawi-artikel--faellt-raus {
    transition: opacity .35s ease, transform .35s ease;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
}

.wawi-artikel__kopf {
    gap: 10px;
}

.wawi-artikel__titel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.content .wawi-artikel__name {
    color: #16202a;
    font-weight: bold;
    font-size: 14.5px;
    text-decoration: none;
}

.content .wawi-artikel__name:hover {
    color: var(--mh-blau);
    text-decoration: underline;
}

/* Nur im Debug-Modus: Shopify-GID neben dem Namen */
.wawi-artikel__id {
    font-size: 11px;
    color: var(--mh-text-leise);
    font-weight: normal;
}

/* --- Kuerzel der Herstellungsart (LA / JIT / LAS / TXT) ---
   Frueher ein <font> in Pastellfarbe auf weissem Grund - bei 23px fett zwar
   gross, aber kaum zu lesen. Jetzt farbige Flaeche mit dunkler Schrift; die
   Farbfamilie bleibt dieselbe wie vorher, damit die Gewohnheit erhalten bleibt. */
.wawi-typ {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 38px;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    background: var(--mh-grau);
    color: #556;
}

.wawi-typ--la  { background: #fbe0fa; color: #93268c; }
.wawi-typ--jit { background: #dceffd; color: #0b5c93; }
.wawi-typ--las { background: #d9f6e7; color: #146c43; }
.wawi-typ--txt { background: #ffeed6; color: #8a5300; }
.wawi-typ--grk { background: #e7e4fb; color: #4a3ba8; }
.wawi-typ--rub { background: #fde6e6; color: #a3271c; }

.wawi-artikel__body {
    padding: 12px 16px 14px 16px;
}

/* --- Feldraster ---
   Ein Muster fuer Stammdaten und Variantendaten: beschriftete Bloecke, die
   nebeneinander laufen und am Zeilenende umbrechen. */
.wawi-felder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 22px;
}

/* Zusammengehoerende Felder ruecken enger zusammen: innerhalb der Gruppe ein
   kleiner Abstand, zur naechsten Gruppe der normale grosse aus .wawi-felder.
   Ohne das stehen in der Artikelzeile acht Felder in gleichem Abstand
   nebeneinander und es ist nicht zu sehen, was womit zu tun hat. */
.wawi-gruppe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 8px;
}

/* Die Stammdaten sind vom Variantenteil abgesetzt, sonst laesst sich beim
   Ueberfliegen nicht sagen, wo der Artikel aufhoert und die Variante anfaengt.
   Bewusst 2px in der Randfarbe der Karte: die duenne graue Linie ging zwischen
   den Trennlinien der Varianten unter, die Grenze Hauptprodukt/Varianten ist
   aber die wichtigste der Karte. */
.wawi-felder--stamm {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--mh-rand);
    /* Groesserer Abstand zwischen den Gruppen als innerhalb (.wawi-gruppe: 8px) */
    gap: 8px 26px;
}

.wawi-feld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.wawi-feld__label {
    font-size: 11px;
    color: var(--mh-text-label);
    line-height: 1.2;
    white-space: nowrap;
}

.wawi-feld__wert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    min-height: var(--wawi-hoehe);
}

/* Alle Bedienelemente eines Feldes auf dieselbe Hoehe - Eingabefeld,
   Pulldown, Knopf und der Bestandsknopf standen sonst unterschiedlich hoch
   nebeneinander, der Speichern-Knopf ragte unten heraus. Bewusst ueber die
   Elementtypen und nicht ueber die Klassennamen: so erwischt es auch spaeter
   dazukommende Felder. Kontrollkaestchen (checkbox) sind ausgenommen, die
   haben ihre eigene Groesse.

   Das Innenmass der Knoepfe (.btn-primary: padding 8px) muss dabei mit weg -
   sonst rechnet es gegen die feste Hoehe und die Beschriftung sitzt nicht
   mittig. Die Hoehe macht hier das Feldraster, nicht der Knopf. */
.content .wawi-feld__wert input[type="text"],
.content .wawi-feld__wert input[type="submit"],
.content .wawi-feld__wert button,
.content .wawi-feld__wert select,
.content .wawi-feld__wert a.wawi-bestand {
    height: var(--wawi-hoehe);
    box-sizing: border-box;
}

.content .wawi-feld__wert input[type="submit"],
.content .wawi-feld__wert button {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    vertical-align: middle;
}

/* Ein Feld, das die restliche Zeile fuellen darf */
.wawi-feld--breit { flex: 1 1 240px; }

/* Lagerinfo steht mit seinem Speichern-Knopf als Gruppe am rechten Zeilenende
   und nimmt den Platz ein, der uebrig bleibt - mindestens aber die 480px der
   flex-basis. Es ist das einzige Freitextfeld der Zeile und braucht Platz;
   der Knopf klebt trotzdem direkt daneben (Gruppenabstand 8px) statt wie
   frueher am rechten Rand weit weg von dem, was er sichert.

   Das margin-left:auto haelt die Gruppe rechts, solange sie NICHT waechst -
   sobald sie waechst (flex: 1 1 auto), ist kein freier Platz mehr uebrig, den
   der Rand aufsaugen koennte, und sie fuellt den Rest der Zeile von selbst. */
.wawi-gruppe--rechts {
    margin-left: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.wawi-feld--lagerinfo { flex: 1 1 480px; min-width: 160px; }

/* Mit dem Feld als Selektor davor, nicht nur ueber die Klasse am Eingabefeld:
   ".content input.wawi-input { width: 130px }" weiter oben ist gleich
   spezifisch und steht frueher in der Datei - das Feld blieb dadurch 130px
   schmal in einer 480px breiten Zelle. */
.content .wawi-feld--lagerinfo input.wawi-input { width: 100%; }

/* --- Spalten der Variantenzeile ---
   Feste Breiten (flex-basis ohne grow), damit dieselbe Angabe bei jeder
   Variante eines Artikels an derselben Stelle steht. Mit mitwachsenden
   Feldern stuende jede Zeile anders und die Liste liesse sich nicht mehr
   senkrecht lesen. Reihenfolge: Info, Bestellen, Bestand, Preis, Statistik,
   ganz hinten EK/HA. */
/* Die Summe aller Spalten plus Abstaende muss in die Inhaltsspalte passen -
   sonst rutschen die letzten Felder (EK/HA, Drei-Punkte-Menue) in eine zweite
   Zeile und die Zeile ist wieder zwei hoch.

   Nur die Statistik waechst und schrumpft mit. Ihre flex-basis ist bewusst
   KLEIN (110px, nicht ihre Inhaltsbreite): der Umbruch einer Flexzeile
   entscheidet sich an der basis, nicht an der geschrumpften Breite - mit einer
   grossen basis waere die Statistik zwar breit genug, haette dafuer aber EK/HA
   und das Menue in die naechste Zeile gedraengt. So bekommt sie auf breiten
   Bildschirmen trotzdem den ganzen Rest und bricht auf schmalen INNERHALB
   ihrer eigenen Spalte um. Geprueft bei 1180px und 1440px Fensterbreite. */
.wawi-feld--ident    { flex: 0 1 var(--wawi-ident-breite); min-width: 115px; }
.wawi-feld--bestellen{ flex: 0 0 var(--wawi-bestellen-breite); }
.wawi-feld--preis    { flex: 0 0 var(--wawi-preis-breite); }
.wawi-feld--zahlen   { flex: 1 1 110px; min-width: 0; }
.wawi-feld--ekha     { flex: 0 0 84px; }
.wawi-feld--menue    { flex: 0 0 30px; }

/* Menge und Knopf nebeneinander auf einer Hoehe */
.wawi-bestellform {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.content .wawi-bestellform input[type="text"] {
    width: 62px;
}

/* Einkauf und Handel sind Nachschlagewerte, keine Arbeitszahlen - bewusst
   klein und leise ganz am Zeilenende. */
.wawi-ekha {
    font-size: 12px;
    color: var(--mh-text-leise);
    white-space: nowrap;
}

/* --- Meldungen in der zweiten Variantenzeile ---
   Alle drei sehen gleich aus und unterscheiden sich nur in der Farbe: gruen
   was schon im Versand ist, orange die offene Bestellposition, blau die
   laufende Lieferung beim Lieferanten. Vorher war jede anders gebaut - eine
   gerahmte Pille, ein Status-Badge und ein Stueck Fliesstext -, was drei
   gleichrangige Meldungen wie drei verschiedene Dinge aussehen liess.
   Etwas groesser als .status-badge, weil sie allein in ihrer Zeile stehen. */
.wawi-info-pill,
.content a.wawi-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.wawi-info-pill--versand,
.content a.wawi-info-pill--versand  { background: var(--mh-gruen-hell); color: var(--mh-gruen); }

.wawi-info-pill--offen,
.content a.wawi-info-pill--offen    { background: #fdf1dc;              color: #92400e; }

.wawi-info-pill--bestellt,
.content a.wawi-info-pill--bestellt { background: var(--mh-hell);       color: var(--mh-blau); }

/* Nur die beiden anklickbaren reagieren - die orange Meldung ist reine Anzeige */
.content a.wawi-info-pill--versand:hover  { background: #d5efe1; text-decoration: none; }
.content a.wawi-info-pill--bestellt:hover { background: var(--mh-hell-hover); text-decoration: none; }

/* Der Speichern-Knopf steht auf Feldhoehe, nicht auf Beschriftungshoehe -
   deshalb die leere Beschriftungszeile im Markup (gleiches Vorgehen wie
   .suchleiste__platz in der Suchleiste). */
.wawi-feld--knopf .wawi-feld__label {
    font-size: 11px;
}

/* .content input setzt margin:4px - in einem Raster mit eigenem gap ergibt das
   krumme Abstaende. */
.content .wawi-feld input,
.content .wawi-feld select {
    margin: 0;
}

.content input.wawi-input,
.content select.wawi-select {
    box-sizing: border-box;
    font-size: 13px;
}

.content input.wawi-input         { width: 130px; }
.content input.wawi-input--klein  { width: 62px; }
.content input.wawi-input--mittel { width: 95px; }
.content input.wawi-input--breit  { width: 100%; min-width: 220px; }

/* Der Mindestbestand ist eine ein- bis zweistellige Zahl - linksbuendig in
   einem 62px breiten Feld stand sie verloren am Rand. Das Feld fuellt jetzt
   seine (schmalere) Spalte und setzt die Zahl mittig; die Spaltenbreite steht
   bei .wawi-feld--mindest, damit die Zahl hier nirgends wiederholt wird. */
.content .wawi-feld--mindest input.wawi-input {
    width: 100%;
    text-align: center;
}

.content select.wawi-select        { max-width: 150px; }
.content select.wawi-select--breit { max-width: 230px; }

/* Hersteller und Motiv mit fester Breite: seit sie nur die gewaehlte Option
   tragen (Paket 7.6), waere jeder so breit wie deren Text - von Karte zu Karte
   verschieden, und beim Antippen spraenge er auf die Breite der langen Liste. */
.content select.wawi-select--breit { width: 230px; }

/* Fehlender Hersteller faellt gelb auf - war vorher genauso, nur inline gesetzt */
.content select.wawi-select--fehlt { background-color: #ffda80; }

.wawi-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--mh-text-label);
    white-space: nowrap;
    cursor: pointer;
}

.wawi-hinweis {
    font-size: 11.5px;
    color: var(--mh-text-leise);
    white-space: nowrap;
}

.wawi-text        { font-size: 13.5px; }
.wawi-text--leise { color: var(--mh-text-leise); }

/* --- Varianten --- */
.wawi-varianten {
    display: flex;
    flex-direction: column;
}

.wawi-variante {
    padding: 12px 0;
    border-bottom: 1px solid var(--mh-grau);
}

.wawi-variante:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Kennung der Variante als erste Spalte der Datenzeile: Name gross, darunter
   grau die Nummern (SKU, EAN). Frueher stand das als eigene Kopfzeile ueber
   der Datenzeile - zwei Zeilen je Variante fuer eine Bezeichnung. */
.wawi-variante__ident {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wawi-variante__name {
    font-size: 15px;
    font-weight: 700;
    color: #16202a;
    line-height: 1.25;
}

/* Ohne eigenen Variantennamen steht die SKU an dessen Stelle - dann aber in
   normaler Textfarbe, sie ist hier die Bezeichnung und kein Nachschlagewert. */
.content .wawi-variante__name--sku a,
.content .wawi-variante__name--sku a.wawi-variante__sku {
    font-size: 15px;
    font-weight: 700;
    color: #16202a;
}

/* SKU und EAN sind Nachschlagewerte, keine Ueberschrift - bewusst leise.
   Die SKU ist fuer Admins zugleich der Weg zum Umbenennen. */
.wawi-variante__kennung {
    font-size: 12px;
    color: var(--mh-text-leise);
    line-height: 1.35;
}

.wawi-variante__sku,
.content a.wawi-variante__sku {
    color: var(--mh-text-leise);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.content a.wawi-variante__sku:hover {
    color: var(--mh-blau);
    text-decoration: underline;
}

/* Zweite Zeile mit den Meldungen zur Variante. Der Rahmen steht immer im DOM
   (das JS schreibt nach dem Bestellen hinein), ist ohne Inhalt aber null Pixel
   hoch - den Abstand bekommt er erst, wenn wirklich etwas drin steht. */
.wawi-variante__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    /* Bewusst KEIN gap: die orange Meldung soll exakt an der Breite des linken
       Blocks beginnen (buendig unter dem Lief-ArtNr-Feld). Ein Abstand hier
       wuerde sich zu dieser Breite addieren und sie um genau diesen Betrag
       daneben setzen. Den Abstand zwischen den beiden linken Pillen macht
       .wawi-variante__info-links selbst. */
    gap: 0;

    /* Bündig mit dem Bestellen-Feld beginnen, nicht unter dem Variantennamen:
       die Meldungen gehoeren zur Ware, nicht zur Bezeichnung. Der Einzug ist
       die Breite der Kennungsspalte plus der Spaltenabstand - beides steht
       genau einmal in --wawi-ident-breite bzw. der gap-Angabe daneben. */
    margin-left: calc(var(--wawi-ident-breite) + var(--wawi-spalte-gap));
}

.wawi-variante__info:has(.wawi-info-pill) {
    margin-top: 8px;
}

/* Der linke Block ist genau so breit wie die Spalten Bestellen, Bestand und
   Preis darueber zusammen - dadurch beginnt die orange Meldung dahinter
   buendig unter dem Lief-ArtNr-Feld. min-width statt fester Breite: sind die
   beiden Meldungen darin ausnahmsweise breiter, rutscht die orange nach
   rechts, statt dass sich die Pillen ueberlappen. */
.wawi-variante__info-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: calc(var(--wawi-bestellen-breite) + var(--wawi-spalte-gap)
                  + var(--wawi-bestand-gruppe) + var(--wawi-gruppe-gap)
                  + var(--wawi-preis-breite) + var(--wawi-gruppe-gap));
}

.wawi-variante__daten {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px var(--wawi-spalte-gap);
    margin-top: 8px;
}

/* Bestand, Mindestbestand und Lief-ArtNr liegen in EINEM Formular (gemeinsamer
   Speichern-Knopf) und sind deshalb ein einzelnes Element der Zeile. Sie
   duerfen darin nicht umbrechen, sonst reisst die Gruppe auseinander.
   Die feste Breite ist die Summe der Spalten darin - so ist die Gruppe in der
   Nicht-Admin-Ansicht (ohne Mindestbestand, Lief-ArtNr und Speichern) genauso
   breit wie beim Admin und alles dahinter steht an derselben Stelle. */
/* Drei Bloecke im selben Formular: Bestand + Mindestbestand eng zusammen (die
   eine Zahl wird an der anderen gemessen), dann der Verkaufspreis als reine
   Anzeige, dann die Lieferanten-Artikelnummer samt Speichern-Knopf.
   Feste Breite = 62+8+50+8+40 (Gruppe 1) + 24 + 105 (Preis) + 24 + 90+8+40 (Gruppe 2).
   Beide Gruppen haben einen eigenen Speichern-Knopf - sie sitzen im selben
   Formular und speichern deshalb dasselbe, stehen aber dort, wo man gerade
   getippt hat. */
.wawi-felder--variante {
    flex: 0 0 459px;
    flex-wrap: nowrap;
    gap: 8px var(--wawi-gruppe-gap);
}

/* Die Spalten innerhalb der Gruppen - jede steht auch leer da
   (wawi_feld_platz), damit die Zeile bei fehlenden Rechten nicht anders
   aussieht. */
.wawi-feld--bestand    { flex: 0 0 62px; }
.wawi-feld--mindest    { flex: 0 0 50px; }   /* Mindestbestand: ein- bis zweistellig */
.wawi-feld--liefartnr  { flex: 0 0 90px; }
.wawi-feld--knopf      { flex: 0 0 90px; }
.wawi-feld--knopf-icon { flex: 0 0 40px; }

/* Speichern als reiner Symbolknopf - mit der Beschriftung "Speichern" war er
   breiter als das Feld, das er sichert. Das Symbol ist ein Haken und keine
   Diskette: der Knopf uebernimmt eine Zeile, er speichert keine Datei - und
   genau das hat das fruehere ">" an dieser Stelle gemeint. */
.content button.wawi-knopf-icon {
    width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* Kurze Bestaetigung nach dem Speichern per AJAX: der Knopf leuchtet gut eine
   Sekunde gruen auf. Eine Meldung waere fuer ein einzelnes Feld zu viel, gar
   keine Rueckmeldung zu wenig - ohne Seitenneuaufbau sieht man sonst nicht,
   ob etwas passiert ist. */
.content button.wawi-knopf-icon--ok,
.content button.wawi-knopf-icon--ok:hover {
    background: var(--mh-gruen-signal);
    color: #fff;
}

/* Der Bestand ist die Zahl, wegen der die Seite aufgerufen wird - er darf
   groesser sein als der Rest. Die Zahl ist zugleich der Knopf, der die
   Bestandskorrektur im Overlay oeffnet: das ist die haeufigste Aktion der
   Zeile, und sie war vorher ein beschrifteter Link weiter rechts.
   Ampel: 0 rot, unter Mindestbestand orange. */
.wawi-bestand,
.content a.wawi-bestand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: var(--wawi-hoehe);
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--mh-rand);
    /* gleiche Eckenrundung wie die Eingabefelder daneben (.content input: 4px) -
       mit 6px sah der Bestandsknopf wie ein Fremdkoerper in der Zeile aus */
    border-radius: 4px;
    background: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: #16202a;
    text-decoration: none;
}

.content a.wawi-bestand:hover {
    background: var(--mh-hell);
    border-color: var(--mh-rand-hover);
    text-decoration: none;
}

/* Spezifitaet wie die Grundregel oben (.content a.wawi-bestand), sonst gewinnt
   deren Textfarbe gegen die Ampel. */
.content a.wawi-bestand--leer  { color: var(--mh-rot); border-color: #f0b4b4; }
.content a.wawi-bestand--knapp { color: var(--mh-orange-warn); border-color: #f2cf9a; }

.content a.wawi-bestand--leer:hover  { background: var(--mh-rot-hell); border-color: var(--mh-rot); }
.content a.wawi-bestand--knapp:hover { background: #fdf1dc; border-color: var(--mh-orange-warn); }

/* Drei-Punkte-Menue am rechten Rand der Variantenzeile (Material, Etikett,
   Druckdaten, EAN). Gleiches Aussehen wie .zeilen-aktion: rahmenlos und
   gedeckt, erst beim Ueberfahren farbig. */
.wawi-variante__menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    color: var(--mh-text-leise);
    font-size: 14px;
}

.wawi-variante__menu > summary:hover,
.wawi-variante__menu[open] > summary {
    background: var(--mh-hell);
    color: var(--mh-blau);
    text-decoration: none;
}

.wawi-variante__menu .order-posi-menu__body a i {
    width: 16px;
    text-align: center;
    margin-right: 6px;
    color: var(--mh-text-leise);
}

.wawi-variante__menu .order-posi-menu__body a:hover i {
    color: #fff;
}

/* Der Verkaufspreis traegt die Marge in seiner Farbe - die Prozentzahl stand
   frueher als eigene Pille daneben und kostete eine halbe Spalte je Variante.
   Der genaue Wert steht im title und erscheint beim Ueberfahren.
   Ohne Adminrechte bleibt der Preis schwarz: die Farbe allein wuerde schon
   verraten, in welchem Bereich die Marge liegt. */
.wawi-preis {
    display: inline-flex;
    align-items: center;
    height: var(--wawi-hoehe);
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    background: var(--mh-grau);
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: default;
}

/* Dieselben Farbpaare wie die frueheren .status-badge-Pillen daneben */
.wawi-preis--schlecht { background: var(--mh-rot-hell);   color: var(--mh-rot-dunkel); }
.wawi-preis--mittel   { background: #fdf1dc;              color: #92400e; }
.wawi-preis--gut      { background: var(--mh-gruen-hell); color: var(--mh-gruen); }
.wawi-preis--top      { background: var(--mh-gruen-hell); color: var(--mh-gruen); }

/* Ab 200 % Marge zusaetzlich unterstrichen - sonst waere "gut" von "TOP" nur
   an der Prozentzahl im Tooltip zu unterscheiden. */
.wawi-preis--top {
    text-decoration: underline;
    text-decoration-style: double;
    text-underline-offset: 3px;
}

.wawi-bestellung {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Das Bestellformular ist selbst eine .knopfreihe (Feld + Knopf auf gleicher
   Hoehe), es darf deshalb keinen eigenen Aussenabstand mitbringen. */
.wawi-bestellung form {
    margin: 0;
}

/* --- Verkaufszahlen ---
   Jede Zahl ist eine kleine Spalte mit ihrem Kuerzel darueber. Aufbau bewusst
   identisch zu .wawi-feld (Beschriftung, 3px Abstand, Wert in einem Kasten von
   --wawi-hoehe): dadurch stehen die Kuerzel auf der Beschriftungszeile der
   Nachbarfelder und die Zahlen auf Hoehe von deren Eingabefeldern, ohne dass
   irgendwo ein Abstand von Hand nachgerechnet wird.
   Frueher "<b>7T:</b> 4 | <b>30T:</b> 7 | ..." in einer Zeile - die fetten
   Kuerzel zogen mehr Aufmerksamkeit auf sich als die Zahlen. */
.wawi-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.wawi-zahl {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}

.wawi-zahl em {
    font-style: normal;
    font-size: 11px;
    color: var(--mh-text-label);
    line-height: 1.2;
}

.wawi-zahl__wert {
    display: flex;
    align-items: center;
    min-height: var(--wawi-hoehe);
    font-size: 13px;
}

/* Die Kopierliste "Name - Lagerplatz" - zugeklappt, sie wiederholte sonst
   unter jeder Suche noch einmal alle Treffer. Bewusst grau statt im
   Kartenblau der Trefferliste und mit deutlichem Abstand darueber: sie gehoert
   nicht zu den Artikeln, sie ist ein Werkzeug am Seitenende. */
.wawi-export {
    margin-top: 44px;
}

.wawi-export > summary {
    cursor: pointer;
    list-style: none;
    background: var(--mh-flaeche-grau);
    border-color: var(--mh-rand-grau);
    color: var(--mh-text-label);
    font-weight: normal;
    font-size: 13px;
}

.wawi-export > summary:hover {
    background: var(--mh-grau);
}

.wawi-export > .order-section__body {
    border-color: var(--mh-rand-grau);
    color: var(--mh-text-label);
    font-size: 12.5px;
}

.wawi-export > summary::-webkit-details-marker { display: none; }

.wawi-export[open] > summary { border-radius: 8px 8px 0 0; }
.wawi-export:not([open]) > summary { border-radius: 8px; }

/* Zugeklappte Varianten (Paket 7.6): Artikel mit mehr als zehn Varianten
   kommen ohne ihre Zeilen, das Aufklappen holt sie ueber ajax.php. Der Knopf
   ist eine .order-pill, der Pfeil dreht beim Oeffnen. */
.wawi-varianten-klappe > summary {
    margin-top: 12px;
    list-style: none;
}

.wawi-varianten-klappe > summary::-webkit-details-marker { display: none; }

.wawi-varianten-klappe > summary i {
    transition: transform 0.15s ease;
}

.wawi-varianten-klappe[open] > summary i {
    transform: rotate(90deg);
}

.wawi-varianten-klappe__laden {
    padding: 12px 0 0 0;
    color: var(--mh-text-leise);
}

@media (max-width: 768px) {

    .wawi-felder {
        gap: 8px 16px;
    }

    .wawi-variante__daten {
        gap: 10px 18px;
    }

    /* Kopfzeile der Variante bricht um: Bezeichnung oben, Aktionen darunter -
       nebeneinander bleiben von beidem nur Bruchstuecke uebrig. */
    .wawi-variante__kopf {
        flex-direction: column;
        align-items: flex-start;
    }

    .content input.wawi-input--breit { min-width: 0; }

    /* Das Variantenformular hat am Desktop eine feste Breite (459 px), damit
       die Spalten ueber alle Varianten untereinander stehen, und die Meldungen
       darunter sind eingerueckt und so breit wie die Spalten darueber. Mobil
       bricht die Zeile ohnehin um - dort schoben beide die Seite um 276 px
       quer (Paket 7.6, gemessen mit pruefstand/mobil). */
    .wawi-felder--variante {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .wawi-variante__info { margin-left: 0; }
    .wawi-variante__info-links { min-width: 0; }

    /* Mobil ein Feld je Zeile, Beschriftung links, Eingabe fuellt den Rest
       (Wunsch 14.09.2026). Nebeneinander brachen Stammdaten und Variante an
       zufaelligen Stellen um - Bestand, Material, Haken und Preis in einer
       Zeile, die Lief-ArtNr mit zweitem Haken darunter. Die Spalten des
       Desktops sind hier ohne Wert, jede Zeile steht fuer sich. */
    .wawi-felder--stamm,
    .wawi-felder--stamm .wawi-gruppe,
    .wawi-variante__daten,
    .wawi-felder--variante,
    .wawi-felder--variante .wawi-gruppe {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
    }

    .wawi-felder--stamm .wawi-gruppe--rechts { margin-left: 0; }

    .wawi-felder--stamm .wawi-feld,
    .wawi-variante__daten .wawi-feld {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    /* Auch die leeren Beschriftungen der Knoepfe behalten die Breite - so
       steht der Haken unter den Feldern statt am Rand. */
    .wawi-felder--stamm .wawi-feld__label,
    .wawi-variante__daten .wawi-feld__label {
        flex: 0 0 105px;
        white-space: normal;
    }

    .wawi-felder--stamm .wawi-feld__wert,
    .wawi-variante__daten .wawi-feld__wert {
        flex: 1 1 auto;
        min-width: 0;
    }

    .content .wawi-felder--stamm .wawi-feld__wert input[type="text"],
    .content .wawi-felder--stamm .wawi-feld__wert select,
    .content .wawi-felder--variante .wawi-feld__wert input[type="text"] {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* Platzhalter-Zellen (wawi_feld_platz) halten am Desktop die Spalten -
       hier waeren sie leere Zeilen. */
    .wawi-variante__daten .wawi-feld:has(> .wawi-feld__wert:empty) { display: none; }

    /* Beide Haken der Variante speichern dasselbe Formular; untereinander
       genuegt der letzte. :first-of-type, weil das erste Kind das Token-Feld ist. */
    .wawi-felder--variante .wawi-gruppe:first-of-type .wawi-feld--knopf-icon { display: none; }

    /* Drei-Punkte-Menue neben den Variantennamen statt als letzte Zeile */
    .wawi-variante { position: relative; }
    .wawi-variante__daten .wawi-feld--menue { position: absolute; top: 12px; right: 0; }
    .wawi-variante__daten .wawi-feld--menue .wawi-feld__label { display: none; }
}

/* Drei-Punkte-Menue rechts neben der Seitenueberschrift (wawi.php) - gleiches
   Aussehen wie das Menue in der Variantenzeile. */
.wawi-kopf-menue > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    color: var(--mh-text-leise);
    font-size: 15px;
}

.wawi-kopf-menue > summary:hover,
.wawi-kopf-menue[open] > summary {
    background: var(--mh-hell);
    color: var(--mh-blau);
    text-decoration: none;
}

.wawi-kopf-menue .order-posi-menu__body a i {
    width: 16px;
    text-align: center;
    margin-right: 6px;
    color: var(--mh-text-leise);
}

.wawi-kopf-menue .order-posi-menu__body a:hover i {
    color: #fff;
}


/* ══════════════════════════════════════════════════════════════════
   RETOUREN (order_retoure_neu.php, order_retouren.php)
   ══════════════════════════════════════════════════════════════════
   Das Anmeldeformular ist bewusst eine Tabelle und keine Karte je
   Position: die Spaltenbedeutung wechselt hier nicht von Zeile zu
   Zeile (Artikel / bestellt / zurueck / Bestand / Bemerkung), und die
   Mengenauswahl braucht den direkten Vergleich untereinander. Breit
   wird sie trotzdem - sie steht deshalb in einem
   .order-section__body--blank und scrollt dort in ihrer Karte. */

.retoure-tabelle td {
    vertical-align: top;
}

/* Zweite Zeile unter dem Artikelnamen: SKU, Wunschtext, Hinweis auf
   eine frueher schon zurueckgeschickte Menge. Gleiche Optik wie
   .posi-artnr in der Bestellansicht. */
.retoure-artnr {
    color: var(--mh-text-leise);
    font-size: 12px;
    margin-top: 2px;
}

.retoure-bundle {
    background: var(--mh-flaeche);
    font-weight: 600;
}

/* Alle Bedienelemente des Anmeldeformulars auf dieselbe Hoehe: das
   Mengen-Pulldown, die Bemerkungsfelder und der Knopf standen sonst
   unterschiedlich hoch nebeneinander. Eine Variable statt einer Pixelzahl
   an jeder Regel - dasselbe Vorgehen wie --wawi-hoehe in der
   Warenwirtschaft, und dieselben 32px wie in der Suchleiste.

   Das Innenmass von .btn-primary (padding 8px) muss dabei weg, sonst
   rechnet es gegen die feste Hoehe und die Beschriftung sitzt nicht
   mittig. Kontrollkaestchen sind ausgenommen, die haben ihre eigene
   Groesse. */
.retoure-form {
    --retoure-hoehe: 32px;
}

.content .retoure-form input[type="text"],
.content .retoure-form input[type="number"],
.content .retoure-form input[type="submit"],
.content .retoure-form select {
    height: var(--retoure-hoehe);
    box-sizing: border-box;
    font-size: 13px;
}

.content .retoure-form input[type="submit"] {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

/* Der Gegenknopf einer Formularzeile ("Zurueck zum Formular", "Abbrechen",
   "stornieren") ist ein <a> und traegt deshalb .btn-secondary statt
   .order-pill: die Pille ist fuer Listen und Kartenkoepfe gedacht und faellt
   neben einem .btn-primary durch kleinere Schrift und den Rand sofort als
   anderer Knopftyp auf. Damit er trotz inline-block mittig sitzt, bekommt er
   dieselbe Hoehe wie die uebrigen Bedienelemente und zentriert seinen Inhalt
   selbst. */
.content .retoure-form a.btn-secondary {
    display: inline-flex;
    align-items: center;
    height: var(--retoure-hoehe);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

.content .retoure-tabelle select.retoure-menge {
    width: 70px;
}

/* Umtausch in der Ersatzlieferung (order_ersatz.php): Variantennamen wie
   "XL / Dunkelgrau" brauchen Platz, auf dem Handy scrollt die Tabelle. */
.content .retoure-tabelle select.ersatz-variante {
    min-width: 160px;
    max-width: 100%;
}

.content .retoure-tabelle input.retoure-bemerkung {
    width: 100%;
    min-width: 140px;
}

/* Haken samt Beschriftung in einer Zeile - ohne das steht die
   Beschriftung je nach Browser um ein bis zwei Pixel versetzt ueber
   dem Kaestchen. */
.retoure-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

/* Steht anstelle des Hakens, wo nichts gebucht werden kann
   (Wunschname, keine Bestandsfuehrung) - der Grund gehoert sichtbar
   dorthin, sonst sucht jemand den fehlenden Haken. */
.retoure-kein {
    color: var(--mh-text-leise);
    font-size: 12.5px;
    font-style: italic;
}

/* Das Bemerkungsfeld ist mehrzeilig und bekommt deshalb keine feste
   Hoehe - Schrift und Familie aber dieselben wie bei den einzeiligen
   Feldern daneben, sonst faellt es als Fremdkoerper auf (Browser setzen
   textarea von sich aus in einer Monospace-Schrift). */
.content textarea.retoure-notiz {
    width: 100%;
    max-width: 560px;
    font-family: inherit;
    font-size: 13px;
}

/* Abschlusszeile in der Uebersicht: Notizfeld und Knoepfe in einer
   .knopfreihe, das Feld darf den Platz fuellen. */
.content .retoure-abschluss input.retoure-bemerkung {
    flex: 1 1 220px;
    min-width: 180px;
}

.content input.retoure-frist {
    width: 70px;
}

.retoure-frist-text {
    align-self: center;
    color: var(--mh-text-leise);
    font-size: 12.5px;
}

/* Eine Retoure in der Uebersicht ist eine eigenstaendige, aufklappbare
   .order-section (wie die Gruppen in wawi_ladenhueter.php) - bewusst OHNE
   weitere Karte darum herum, das waere Rahmen in Rahmen. Der Kopf traegt
   beide Angaben - links Nummer/Datum/Bestellung, rechts Menge/Wert/Status -
   und muss deshalb umbrechen duerfen. Dass der Titel direkt am Aufklapp-
   Pfeil beginnt und nicht in der Mitte landet, macht .report-gruppe__name
   (flex: 1) am Titel-span: .order-section__header verteilt seine Kinder
   sonst mit space-between ueber die ganze Breite. */
.retoure-eintrag > summary.order-section__header {
    flex-wrap: wrap;
    gap: 6px;
}

.retoure-eintrag .order-card__extra {
    font-weight: 400;
}

/* Merkzettel nach dem Anmelden einer Retoure: die Papiere, die der Kunde
   ins Paket gelegt hat, kommen in die Ablage - und ohne Bestellnummer
   darauf ist der Vorgang spaeter nicht mehr zuzuordnen. Die Nummer steht
   deshalb so gross, dass sie am Packtisch aus einem Meter Abstand lesbar
   ist; der Kasten hat bewusst die Warnfarbe und nicht das ruhige Blau der
   uebrigen Karten - er ist eine Handlungsanweisung, keine Information. */
.retoure-ablage {
    background: var(--mh-warnung-hell);
    border: 2px solid #e6c200;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    text-align: center;
}

.retoure-ablage__text {
    font-size: 15px;
    line-height: 1.5;
}

/* Ziffern in gleicher Breite, damit die Nummer beim Abschreiben nicht
   verrutscht. Umbruch erlaubt (B2B-Nummern sind laenger), aber die Zahl
   soll auf schmalen Bildschirmen nicht ueber den Rand laufen. */
.retoure-ablage__nummer {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
    word-break: break-all;
}

@media (max-width: 768px) {
    .retoure-ablage__nummer { font-size: 40px; }
}

/* Link in die Shopify-Bestellung, wo die Erstattung tatsaechlich passiert
   (order_retouren.php, neben dem Haken "Geld erstattet"). Bewusst ein Link
   und kein Knopf: er soll neben "Retoure abschliessen" nicht um
   Aufmerksamkeit konkurrieren - der Haken ist die Aktion auf dieser Seite,
   der Link nur der Weg dorthin. */
.retoure-shopify {
    margin-left: 14px;
    font-size: 12.5px;
    white-space: nowrap;
}

.retoure-shopify i {
    font-size: 11px;
    margin-left: 3px;
}

/* Positionstabelle einer Retoure: eigener Karten-Koerper direkt unter dem
   Kopf, damit die Tabelle buendig sitzt statt als Kasten im Kasten. Weil
   darunter ein zweiter Koerper (Bemerkung, Abschluss) folgt, bleibt sie
   unten eckig und ohne Abschlusskante - die beiden sollen wie EIN Koerper
   wirken. */
.retoure-eintrag > .retoure-posi {
    border-radius: 0;
    border-bottom: none;
}

/* Der Bereich darunter beginnt ohne eigene Oberkante (die Tabelle bringt
   ihre Trennlinie schon mit). */
.retoure-eintrag > .retoure-posi + .order-section__body {
    border-top: none;
}

/* .content input setzt margin: 4px (TEIL 1) - in einer .knopfreihe mit
   eigenem gap sassen die Eingabefelder und der Absende-Knopf dadurch 4px
   tiefer als der danebenstehende <a class="btn-secondary">, der keinen
   Margin hat. Gleiche Stelle wie bei .wawi-feld weiter oben. */
.content .retoure-form input,
.content .retoure-form select {
    margin: 0;
}

/* Auf dem Handy setzt der mobile Block weiter oben fuer Felder in einer
   .kv-value min-height: 38px und 16px Schrift (unter 16px zoomt iOS Safari
   die Seite beim Antippen heran). min-height schlaegt die feste Hoehe, das
   Feld waere also 38 und die Knoepfe daneben 32. Deshalb waechst dort die
   Variable mit - die eine Stelle, an der die Hoehe steht, bleibt die eine
   Stelle. */
@media (max-width: 768px) {
    .retoure-form {
        --retoure-hoehe: 38px;
    }
}

/* Retouren aus dem Kundenportal (order_retoure_neu.php im Modus "Eingang
   bestaetigen", order_retouren.php): angemeldete Positionen dezent blau
   hinterlegt - beim Auspacken sieht man so auf einen Blick, was der Kunde
   angekuendigt hat. Weicht die eingegangene Menge ab, steht die Zeile in
   Warnfarbe; danach richtet sich die Erstattung. */
.retoure-tabelle tr.retoure-angemeldet td {
    background: var(--mh-hell);
}

tr.retoure-abweichung td {
    background: var(--mh-warnung-hell);
    font-weight: 600;
}

/* Eingang bestaetigen / stornieren unter "noch nicht eingegangen" */
.retoure-aktionen {
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Hinweis vom Wareneingang fuers Buero (Abweichung von Anmeldung bzw.
   Reklamation): in Warnfarbe, damit ihn beim Erstatten niemand uebersieht. */
.retoure-hinweis-buero {
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--mh-warnung-hell);
    border-left: 3px solid #e6c200;
    border-radius: 4px;
}

.kv-value > .retoure-hinweis-buero:first-child { margin-top: 0; }

/* Reklamationen (order_reklamation.php): Fotos des Kunden als Vorschau,
   Klick oeffnet das volle Bild (ueber datei.php, hinter der Anmeldung). */
.rekl-bilder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rekl-bilder img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--mh-rand);
}

.content .retoure-form select.rekl-ergebnis {
    width: auto;
    min-width: 190px;
}


/* ==================================================================
   LAGERCHECK (wawi_lagercheck.php)
   ------------------------------------------------------------------
   Ein Artikel je Bildschirm, bedient wird die Seite im Lager auf dem
   Handy - mit einer Hand, oft mit einem Karton im anderen Arm. Alles
   Anfassbare ist deshalb deutlich groesser als sonst im System und
   haengt an EINER Hoehenvariable (gleiches Vorgehen wie --wawi-hoehe
   in der Warenwirtschaft und --retoure-hoehe bei den Retouren): steht
   ein Knopf neben einem Eingabefeld, sitzen beide auf einer Linie,
   ohne dass irgendwo eine zweite Pixelzahl steht.
   ================================================================== */

.lagercheck {
    --lagercheck-hoehe: 44px;
    max-width: 640px;
}

/* Fortschritt ueber der Karte: die Zahl sagt, wieviel noch kommt, der
   Balken zeigt es auf einen Blick - beim Rundgang ist das die einzige
   Frage neben dem Artikel selbst. */
.lagercheck-fortschritt {
    margin-bottom: 12px;
}

.lagercheck-fortschritt__zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    margin-bottom: 6px;
}

.lagercheck-fortschritt__meta {
    font-size: 12px;
    color: var(--mh-text-leise);
}

.lagercheck-balken {
    height: 6px;
    border-radius: 3px;
    background: var(--mh-grau);
    overflow: hidden;
}

.lagercheck-balken__fuell {
    height: 100%;
    background: var(--mh-blau);
}

/* Kartenkopf: der Lagerplatz ist die Ansage, wohin man geht - er steht
   deshalb allein und gross oben, das Aktionsmenue rechts daneben. */
.lagercheck-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lagercheck-platz {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.lagercheck-menu > summary {
    font-size: 18px;
    padding: 0 6px;
    color: inherit;
}

.lagercheck-menu__gefahr {
    color: #b00020 !important;
}

.lagercheck-menu__gefahr:hover {
    background: #b00020 !important;
    color: #fff !important;
}

/* Artikelnummer zuerst und in fester Schrift: danach wird im Regal
   verglichen, Ziffer fuer Ziffer. */
.lagercheck-artnr {
    font-family: "Courier New", monospace;
    font-size: 19px;
    font-weight: bold;
    word-break: break-all;
}

.lagercheck-name {
    font-size: 15px;
    margin-top: 2px;
}

.lagercheck-variante {
    color: var(--mh-text-leise);
}

.lagercheck-info {
    margin-top: 8px;
    font-size: 13px;
    color: var(--mh-text-leise);
}

/* Die drei Zahlen nebeneinander statt als kv-Zeilen untereinander -
   auf dem Handy passen sie so ohne Scrollen ueber das Eingabefeld. */
.lagercheck-zahlen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0 10px 0;
}

.lagercheck-zahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    background: var(--mh-hell);
}

.lagercheck-zahl__wert {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.lagercheck-zahl__wert--rot {
    color: #b00020;
}

.lagercheck-zahl__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mh-text-leise);
}

.lagercheck-hinweis {
    font-size: 12.5px;
    color: var(--mh-text-leise);
    margin-bottom: 10px;
}

.lagercheck-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mh-text-leise);
    margin-bottom: 4px;
}

/* Feld und Knopf teilen sich die Zeile: das Feld nimmt den Rest, der
   Knopf bleibt so breit wie seine Beschriftung. Die Hoehe kommt aus der
   Variable, das Innenmass von .btn-primary (8px) muss dabei weg - sonst
   rechnet es gegen die feste Hoehe und die Beschriftung sitzt schief
   (dieselbe Falle wie bei .retoure-form). */
.lagercheck-eingabe {
    align-items: stretch;
}

.content .lagercheck-eingabe input[type="number"] {
    flex: 1 1 100px;
    min-width: 90px;
    height: var(--lagercheck-hoehe);
    box-sizing: border-box;
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.content .lagercheck-eingabe input[type="submit"] {
    height: var(--lagercheck-hoehe);
    box-sizing: border-box;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    font-size: 15px;
    white-space: nowrap;
}

/* "stimmt so" ist der haeufigste Griff im Rundgang (der Bestand passt,
   es wird nichts gebucht) - deshalb nimmt er die ganze Restbreite,
   "zurueck" bleibt schmal daneben. */
.lagercheck-navi {
    margin-top: 12px;
    align-items: stretch;
}

.content .lagercheck-navi a.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--lagercheck-hoehe);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 15px;
}

.content .lagercheck-navi a.lagercheck-navi__weiter {
    flex: 1 1 auto;
}

/* Das Beenden steht zusaetzlich unten - oben in der Titelzeile ist es
   nach dem Scrollen nicht mehr zu sehen. Bewusst als leiser Textlink:
   ein zweiter Knopf wuerde mit "Speichern" konkurrieren. */
.lagercheck-ende {
    margin: 18px 0 24px 0;
    text-align: center;
    font-size: 13px;
}

.lagercheck-ende a {
    color: var(--mh-text-leise);
}

/* Auf dem Handy alles eine Spur groesser - und die Schrift im Eingabefeld
   bleibt ueber 16px, sonst zoomt iOS Safari die Seite beim Antippen heran. */
@media (max-width: 768px) {

    .lagercheck {
        --lagercheck-hoehe: 52px;
    }

    .lagercheck-platz {
        font-size: 22px;
    }

    .lagercheck-artnr {
        font-size: 21px;
    }

    .lagercheck-zahl__wert {
        font-size: 26px;
    }

    .content .lagercheck-eingabe input[type="number"] {
        font-size: 24px;
    }
}

/* ==========================================================================
   LADEANZEIGE IM OVERLAY: die Brezn wird aufgegessen
   --------------------------------------------------------------------------
   Manche Zielseiten holen beim Aufbau Daten bei Shopify (wawi_bestand.php:
   Bestand, Verkaufs-, Einkaufs- und Haendlerpreis) und brauchen dafuer ein
   paar Sekunden - ohne Anzeige steht das Overlay so lange leer da und sieht
   aus, als waere es kaputt.

   Bewusst keine Fortschrittsanzeige: wie weit die Zielseite ist, weiss der
   Rahmen nicht. Ein Durchlauf dauert 4 Sekunden und wiederholt sich, solange
   geladen wird.
   ========================================================================== */

/* Deckt die ganze Dialogflaeche ab. Die Kopfzeile liegt darueber
   (.mh-overlay__head bekommt dafuer unten einen z-index) - damit muss die
   Hoehe der Kopfzeile nirgends ausgerechnet werden. Beim Verschwinden nur
   durchsichtig statt display:none, dann springt nichts. */
.mh-overlay__laden {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--mh-flaeche);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    pointer-events: none;
}

.mh-overlay__laden--an {
    opacity: 1;
    visibility: visible;
}

/* Kopfzeile ueber die Ladeflaeche legen, sonst deckt diese sie mit ab */
.mh-overlay__head {
    position: relative;
    z-index: 2;
}

.mh-laden {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.mh-laden__brezn {
    position: relative;
    width: 124px;
    height: 106px;
}

/* Die Brezn kommt als CSS-Maske herein, nicht als <img>: so steckt die Farbe
   im Stylesheet und nicht in der Datei, und sie laesst sich hier aendern, ohne
   die Grafik anzufassen. Die Datei selbst ist eine schwarze Silhouette
   (gfx/brezn.svg) - die Salzkoerner sind Loecher darin und zeigen deshalb den
   hellen Untergrund, sehen also wie Salz aus.
   -webkit-mask zusaetzlich fuer Safari vor 15.4. */
.mh-laden__brezn-bild {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #b8782f 0%, #8d5119 62%, #6f3c11 100%);
    -webkit-mask: url(../gfx/brezn.svg) center / contain no-repeat;
            mask: url(../gfx/brezn.svg) center / contain no-repeat;
}

/* Ein "Biss": ein Kreis in der Farbe des Untergrunds, der ueber der Brezn
   aufploppt - es wird also nichts ausgeschnitten. Das kommt ohne Pfadrechnerei
   aus und faellt bei einem Farbwechsel des Untergrunds nicht auf, weil Kreis
   und Flaeche dieselbe Variable benutzen.

   Lage, Groesse und Animation setzt mhLadeBrezn() in header.inc.php als
   Inline-Stil: jeder Biss hat dort SEINE eigenen Keyframes. Mit einem
   gemeinsamen @keyframes und versetztem animation-delay wuerden die Bisse
   genauso versetzt wieder verschwinden, wie sie gekommen sind - die Brezn
   wuechse dann mitten im Abbeissen schon wieder nach. Warum das so ist, steht
   ausfuehrlich an der Funktion. */
.mh-laden__biss {
    position: absolute;
    border-radius: 50%;
    background: var(--mh-flaeche);
    transform: scale(0);
}

.mh-laden__text {
    font-size: 13px;
    color: var(--mh-text-leise);
}

/* Was beim Lieferanten unterwegs ist: eigener Hinweisblock je Bestellung,
   nicht die kleine .wawi-info-pill aus der Warenwirtschaft. Dort steht sie
   in einer vollen Trefferliste zwischen lauter anderen Angaben und darf
   leise sein; hier ist sie neben drei grossen Zahlen und einem grossen
   Eingabefeld die einzige weitere Aussage der Karte - als Pille mit
   grauem Kleintext daneben ging sie schlicht unter.
   Farbiger Balken links, farbiger Grund, Menge in Farbe und fett; die
   beiden Farben stehen als Variablen am Block, damit die orange Fassung
   (im Bestellkorb, noch nicht abgeschickt) nur zwei Werte tauscht. */
.lagercheck-lieferung {
    --lief-grund: var(--mh-hell-hover);
    --lief-farbe: var(--mh-blau);

    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--lief-grund);
    border-left: 5px solid var(--lief-farbe);
    border-radius: 6px;
}

/* Noch nicht abgeschickt: dasselbe Orange wie die "X Stk. offen"-Meldung
   in der Warenwirtschaft, damit die Unterscheidung dieselbe bleibt. */
.lagercheck-lieferung--offen {
    --lief-grund: #fdf1dc;
    --lief-farbe: #92400e;
}

.lagercheck-lieferung__icon {
    font-size: 20px;
    color: var(--lief-farbe);
    flex: 0 0 auto;
}

.lagercheck-lieferung__menge {
    font-size: 15px;
    font-weight: bold;
    color: var(--lief-farbe);
}

/* Lieferant und Datum in derselben Farbe wie die Menge, nur ungefettet:
   das uebliche Grau (--mh-text-leise) ist auf dem farbigen Grund zu
   kontrastarm - und genau dieser Text ist die eigentliche Aussage
   ("seit 37 Tagen bestellt"), nicht die Menge. */
.lagercheck-lieferung__meta {
    font-size: 12.5px;
    color: var(--lief-farbe);
}

@media (max-width: 768px) {

    .lagercheck-lieferung__menge {
        font-size: 16px;
    }

    .lagercheck-lieferung__icon {
        font-size: 22px;
    }
}

/* Rueckfrage zum Artikel: Feld und Knopf auf einer Linie ueber
   align-items: stretch statt einer ausgerechneten Hoehe - das Feld ist ein
   <textarea rows="1">, damit eine laengere Frage mehrzeilig weiterwaechst
   und der Knopf mitwaechst (gleiches Muster wie das Notizfeld in
   wawi_bestellungen.php). Abgesetzt durch eine duenne Linie: es ist keine
   Bestandseingabe mehr, sondern etwas fuer jemand anderen. */
.lagercheck-frage {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mh-rand-leise);
}

.lagercheck-frage__zeile {
    align-items: stretch;
}

.content .lagercheck-frage textarea {
    flex: 1 1 140px;
    min-width: 120px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;   /* darunter zoomt iOS Safari beim Antippen heran */
    resize: vertical;
}

.content .lagercheck-frage button {
    white-space: nowrap;
}

/* ==========================================================================
   ANMELDUNG (login.php, login_setup.php)
   Eigenständige Seiten ohne Navigation - deshalb ein eigener, schmaler
   Rahmen statt .content-inner.
   ========================================================================== */

.login-seite {
    max-width: 420px;
    margin: 60px auto;
    padding: 0 16px;
}

.login-seite--breit { max-width: 560px; }

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.login-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-feld label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mh-text-leise);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* 16px ist kein Zierwert: darunter zoomt iOS Safari die Seite beim Antippen
   heran - dieselbe Ueberlegung wie beim Lagercheck. */
.login-seite .login-feld input[type="text"],
.login-seite .login-feld input[type="password"] {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid var(--mh-rand);
    border-radius: 4px;
    background: #fff;
}

.login-seite .login-feld input:focus {
    outline: none;
    border-color: var(--mh-blau);
}

/* .btn-primary bringt padding: 8px mit - bei fester Hoehe rechnet das dagegen
   und die Beschriftung sitzt nicht mittig. */
.login-seite .content button.btn-primary,
.login-seite button.btn-primary {
    height: 44px;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    width: 100%;
}

.login-qr {
    text-align: center;
    margin: 16px 0;
}

.login-qr img {
    width: 220px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 4px;
    padding: 8px;
    background: #fff;
}

@media (max-width: 480px) {
    .login-seite { margin: 24px auto; }
}


/* ==========================================================================
   ANMELDUNG: eigener Auftritt statt Systemgeruest
   ========================================================================== */

/* Die Markenfarbe von meinherzschlag.de, rgb(28,109,171). Sie steht hier und
   nicht oben bei den anderen :root-Variablen, weil sie nur diese beiden Seiten
   betrifft - das Backoffice bleibt bei --mh-blau. */
:root {
    --mh-marke:        #1c6dab;
}

/* Anmelde- und Willkommensseite tragen diese Klasse am <body>. Beide sind
   eigenstaendige Seiten ohne Navigation, deshalb darf der body hier die volle
   Flaeche fuellen und mittig ausrichten.

   100dvh mit 100vh als Rueckfall: vh ignoriert bei mobilen Browsern die ein-
   und ausfahrende Adressleiste, der untere Rand laege sonst ausserhalb des
   sichtbaren Bereichs (dieselbe Ueberlegung wie beim Overlay). */
body.login-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background: var(--mh-marke);
    background:
        radial-gradient(1100px 620px at 18% -10%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
        radial-gradient(900px 560px at 88% 108%, rgba(0,0,0,.28), rgba(0,0,0,0) 62%),
        linear-gradient(158deg, #2a82c4 0%, var(--mh-marke) 46%, #12547f 100%);
    font-family: "Barlow", Arial, Helvetica, sans-serif;
}

/* Die Saeule: Logo, darunter die Karte. */
.login-huelle {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.login-huelle--breit { max-width: 560px; }

.login-logo {
    width: 230px;
    max-width: 72%;
    height: auto;
    display: block;
}

.login-karte {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 14px;
    padding: 26px 28px 28px;
    /* Bewusst ohne Schatten: die Karte soll flach auf dem Verlauf liegen,
       kein aufgesetzter 3D-Effekt. */
}

.login-karte__titel {
    margin: 0 0 20px;
    font-size: 19px;
    font-weight: 600;
    color: #17222c;
    text-align: center;
    letter-spacing: .01em;
}

.login-karte p { color: #46525e; line-height: 1.5; }

/* Meldungen in der Karte: die Systemboxen sind fuer Seiten mit Navigation
   gebaut und wirken hier zu breit. */
.login-karte .boxfehler,
.login-karte .boxwarnung,
.login-karte .boxok {
    margin: 0 0 16px;
    border-radius: 6px;
    font-size: 13.5px;
}

.login-fuss {
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255,255,255,.72);
}

.login-fuss a { color: rgba(255,255,255,.92); }

/* --------------------------------------------------------------------------
   Willkommensseite: mhsys.de zeigt nichts als das Logo. Wer sich anmelden
   will, muss die Adresse der Anmeldeseite kennen.
   -------------------------------------------------------------------------- */

.willkommen-logo {
    width: 340px;
    max-width: 76vw;
    height: auto;
    display: block;
}

@media (max-width: 480px) {
    .login-karte { padding: 24px 20px 22px; }
    .login-huelle { gap: 20px; }
}

/* Eingabefelder und Knopf der Anmeldung.
   
   Vollstaendig ausgeschrieben und nicht nur als Ergaenzung zu den
   .login-seite-Regeln weiter oben: die neue Anmeldeseite hat kein
   .login-seite mehr um sich, sondern .login-huelle > .login-karte - jene
   Regeln greifen hier also gar nicht. Ohne width/box-sizing/font-size waeren
   die Felder unterschiedlich breit und iOS wuerde beim Antippen zoomen. */
.login-karte .login-feld input[type="text"],
.login-karte .login-feld input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 14px;
    /* 16px ist kein Zierwert: darunter zoomt iOS Safari beim Antippen heran. */
    font-size: 16px;
    color: #1b2733;
    /* Flach: kein innerer Schatten, nur ein 1px-Rahmen. Der Kontrast kommt
       allein aus der Flaeche - deutlich dunkler als das Weiss der Karte,
       sonst verschwimmt das Feld darin. */
    border: 1px solid #cdd8e4;
    border-radius: 9px;
    background: #e4eaf0;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}

.login-karte .login-feld input::placeholder { color: #8fa0b0; }

.login-karte .login-feld input:hover { background: #dde5ec; }

/* outline statt border beim Tippen: ein Rahmen wuerde die Feldgroesse
   aendern und das Formular um einen Pixel springen lassen. */
.login-karte .login-feld input:focus {
    background: #dde5ec;
    border-color: var(--mh-marke);
    outline: none;
    box-shadow: none;
}

.login-karte button.btn-primary,
.login-karte input.btn-primary {
    width: 100%;
    height: 52px;
    padding: 0;
    line-height: 1;
    font-size: 15.5px;
    border: 0;
    border-radius: 9px;
    background: var(--mh-marke);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease;
}

.login-karte button.btn-primary:hover,
.login-karte input.btn-primary:hover { background: #17608f; }

/* .report-meta bringt margin-top: -8px mit - im Dashboard rueckt der
   erklaerende Kleintext damit dicht unter seine Ueberschrift. In der
   Anmeldekarte zog das den Abbrechen-Link in den Knopf hinein. */
.login-karte .report-meta {
    margin-top: 14px;
    margin-bottom: 0;
}

/* Kurzfassung im Kopf einer aufklappbaren Karte (admin_user.php): Abstand zum
   Namen, damit beides nicht zusammenklebt. */
.order-section__header .report-gruppe__meta { margin-left: 10px; }

/* ==========================================================================
   ADMIN -> Geraete: Tabellenspalten
   Die Tabellen sind schmal beschriftet, aber die Werte darin sind kurz und
   zusammenhaengend - IP-Adressen, Datumsangaben, "vor 3 Tagen". Ohne feste
   Behandlung bricht der Browser sie mitten im Wert um, und die Zeile wird
   doppelt so hoch. Deshalb: diese Spalten nicht umbrechen, dafuer darf die
   Geraetespalte umbrechen und den Rest der Breite schlucken.
   ========================================================================== */

/* Die Tabelle bekommt KEINEN eigenen Scroll-Wrapper: .order-section__body--blank
   scrollt bereits selbst, und ein zusaetzliches div zwischen body und table
   bricht die Regeln .order-section__body--blank > .designbox (Kindselektor!) -
   die Kopfzeile verliert dann ihr Weiss und den aufgehobenen Aussenabstand,
   und es sieht aus wie ein zweiter, leerer Kopfbalken. */
.geraete-tabelle { table-layout: auto; width: 100%; }

/* Werte, die nie mitten im Wort umbrechen duerfen */
.geraete-tabelle td.nowrap,
.geraete-tabelle th.nowrap {
    white-space: nowrap;
}

/* Die Geraetebezeichnung ist das einzige lange Feld - sie darf umbrechen und
   bekommt den uebrigen Platz. */
.geraete-tabelle td.geraete-name {
    min-width: 160px;
}

/* Zahlenspalte rechtsbuendig, das liest sich besser */
.geraete-tabelle td.zahl,
.geraete-tabelle th.zahl { text-align: right; white-space: nowrap; }

/* Zeile am Seitenende: wer ist angemeldet (core/footer.inc.php). Bewusst
   zurueckhaltend - sie soll nachschlagbar sein, nicht ins Auge fallen. */
.seiten-fuss {
    margin-top: 28px;
    padding-top: 10px;
    border-top: 1px solid var(--mh-rand-leise);
    font-size: 12px;
    color: var(--mh-text-leise);
}

.seiten-fuss b { font-weight: 600; color: var(--mh-text-leise); }

.seiten-fuss a { color: var(--mh-text-leise); text-decoration: underline; }
.seiten-fuss a:hover { color: var(--mh-blau); }

/* Gerätename direkt in der Tabellenzeile aenderbar (admin_geraete.php).
   Das Feld soll wie Text aussehen, solange niemand hineinklickt - eine Zeile
   mit fuenf gerahmten Kaesten untereinander wirkt wie ein Formular, dabei ist
   es eine Liste. */
.geraete-name-form { margin: 0; }

.geraete-name-form input[type="text"] {
    width: 100%;
    min-width: 150px;
    box-sizing: border-box;
    height: 26px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: inherit;
}

.geraete-name-form input[type="text"]:hover {
    border-color: var(--mh-rand-leise);
    background: #fff;
}

.geraete-name-form input[type="text"]:focus {
    outline: none;
    border-color: var(--mh-blau);
    background: #fff;
}

/* Ohne Namen steht die Browserkennung als Platzhalter da - die ist eine
   Notloesung und soll auch so aussehen. */
.geraete-name-form input::placeholder {
    color: var(--mh-text-leise);
    font-style: italic;
}


/* ------------------------------------------------------------------
   BESTELLVORSCHLAEGE (wawi_bestellvorschlaege.php)
   ------------------------------------------------------------------ */

/* "Jetzt neu berechnen" ist eine schreibende Aktion und muss deshalb ein
   Formular sein (POST), soll in der Aktionsleiste aber neben den Links
   stehen wie eine Pille unter Pillen. display: contents loest den
   Formularblock im Flex-Layout auf - gleiches Vorgehen wie bei
   .shipment__label-aktionen. */
.bvor-lauf-form {
    display: contents;
}

/* Der Bestellhinweis vom Produkt steht als eigene Zeile unter seiner
   Position - er gehoert sichtbar dazu, ist aber kein Messwert, also
   leiser und ohne die Trennlinie, die ihn von seiner Zeile abschneiden
   wuerde. */
.designbox .bvor-hinweis td {
    border-top: none;
    padding-top: 0;
    color: var(--mh-text-leise);
    font-size: 12px;
    font-style: italic;
}

.content input.bvor-zahl {
    width: 70px;
}

.bvor-text {
    align-self: center;
    color: var(--mh-text-leise);
    font-size: 12.5px;
}



/* Die Trefferzeile hat sechs Spalten statt siebzehn: was zusammen
   gelesen wird, steht in einer Zelle - der Hauptwert gross, die
   erklaerenden Nebenzahlen als Kleintext darunter. Ohne dieses
   Zusammenfassen war die Tabelle breiter als jeder Bildschirm, und der
   waagrechte Scrollbalken der Karte trennte die Vorschlagsmenge von
   dem Artikel, zu dem sie gehoert. */
.bvor-wert {
    font-size: 14px;
}

/* Die Vorschlagsmenge ist der Wert, wegen dem die Seite existiert */
.bvor-wert--menge {
    font-weight: bold;
}

/* Nebenzahlen und der Variantenname unter dem Produktnamen. Auch als
   <span> brauchbar (leeres Feld, Hinweistext in der Filterzeile). */
.bvor-sub {
    color: var(--mh-text-leise);
    font-size: 11.5px;
    font-weight: normal;
    line-height: 1.45;
}

/* Der Artikelname darf umbrechen - die Produktnamen sind lang
   ("Glaslspezialitaet Mutter's Leberwurst"), und eine Spalte, die sich
   nach dem laengsten richtet, schiebt alle Zahlen nach rechts aus dem
   Bild. Die Zahlenspalten bleiben dagegen einzeilig (.num). */
.bvor-tabelle .bvor-artikel {
    min-width: 200px;
}

/* Dieselbe Ampel wie in der Warenwirtschaft, hier an der Zahl in der
   Zelle statt an einem Link - die dortigen Regeln greifen nur auf
   "a.wawi-bestand--*". */
.bvor-tabelle .bvor-wert.wawi-bestand--leer  { color: var(--mh-rot); font-weight: bold; }
.bvor-tabelle .bvor-wert.wawi-bestand--knapp { color: var(--mh-orange-warn); font-weight: bold; }

/* Ware, die beim Lieferanten schon unterwegs ist. Diese Zeilen sind
   standardmaessig ausgeblendet - wer sie einblendet, sucht genau sie,
   deshalb ein dezent blauer Grund statt nur Kleintext. Die Markenfarbe
   in ihrer hellen Variante, wie sie das System sonst fuer ruhige
   Hervorhebungen nutzt. */
.bvor-unterwegs {
    background: var(--mh-hell);
    color: var(--mh-blau);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* Vorjahreswert weit ueber dem errechneten Bedarf: Saisonware, bei der
   vier Wochen den kommenden Bedarf nicht beschreiben. Bewusst nur eine
   Einfaerbung und kein eigener Zeilenhintergrund - es ist ein Hinweis
   zum Nachrechnen, keine Fehlermeldung. */
.bvor-saison {
    color: var(--mh-orange-text);
    font-weight: bold;
    white-space: nowrap;
}

/* Jahresverkauf eines Auslaufkandidaten - dieselbe Farbe wie sein
   Kennzeichen am Artikelnamen, damit der Blick die beiden verbindet. */
.bvor-langsam {
    color: var(--mh-lila-text);
    font-weight: bold;
    white-space: nowrap;
}

/* Gemessene Lieferzeit eines Herstellers (core/lieferdauer.inc.php).
   Taucht an drei Stellen auf - im Gruppenkopf der Bestellvorschlaege,
   in der offenen Bestellung in wawi.php und im Kopf jeder Bestellung
   in wawi_bestellungen.php - und sieht deshalb ueberall gleich aus.
   Bewusst zurueckhaltend: eine Auskunft, kein Zustand. */
.lieferzeit-pille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--mh-hell);
    color: var(--mh-blau);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* Die Ziel-Reichweite dieser Zeile, wenn sie von der allgemeinen
   abweicht - also bei einem Hersteller mit gemessener Lieferzeit.
   Steht neben dem Bedarf und erklaert ihn. */
.bvor-lz {
    color: var(--mh-blau);
}

/* Die Kennzeichen-Spalte ganz vorn. Sie steht vorn und nicht hinter
   dem Artikelnamen, weil sie dort an dessen Laenge hing und in jeder
   Zeile woanders begann - so fangen alle Produktnamen an derselben
   Stelle an.

   width: 1% plus nowrap ist der uebliche Weg zu "so schmal wie der
   Inhalt": die Zelle bekommt nur, was sie braucht, der Rest der
   Breite bleibt den Artikelnamen. Am th, weil die Kopfzeile die
   Spaltenbreite bestimmt. */
.bvor-tabelle .bvor-stand-kopf,
.bvor-tabelle .bvor-stand {
    width: 1%;
    white-space: nowrap;
}

/* Zwei Kennzeichen (Stand + Langsamdreher) stehen untereinander.
   Bewusst KEIN display:flex an der Zelle - ein td verliert damit sein
   Zellverhalten (Breitenverteilung, vertikale Ausrichtung). block am
   Badge reicht, fit-content haelt ihn so schmal wie seinen Text.
   .status-badge ist sonst inline-block. */
.bvor-tabelle .bvor-stand .status-badge {
    display: block;
    width: fit-content;
}

.bvor-tabelle .bvor-stand .status-badge + .status-badge {
    margin-top: 3px;
}

/* Positionen mit offenen Reminder (wawi_remind.php): Kunden warten auf genau
   diesen Artikel. Hellrot hinterlegt, samt der Hinweiszeile darunter, damit
   die Position beim Durchgehen nicht zwischen den anderen verschwindet.
   .designbox vorn, sonst gewinnen die Zeilenregeln der Tabelle. */
.designbox.bvor-tabelle tr.bvor-zeile--remind td {
    background: var(--mh-rot-hell);
}



/* ==================================================================
   UMSATZCHECK (wawi_umsatzcheck.php)
   ================================================================== */

/* Das Eingabefeld fuer den Zielprozentsatz. Schmal - es steht nie mehr
   als "2,5" darin - und die Zahl gross, weil sie der eine Wert ist,
   den die ganze Seite beantwortet. Die Hoehe kommt von .suchleiste,
   deshalb steht hier keine. */
.content input.umsa-proz {
    width: 80px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
}

/* Die Einheit hinter dem Feld. Sie sitzt in einem eigenen
   suchleiste__feld mit leerer Beschriftungszeile darueber, damit sie
   auf Feldhoehe steht (gleiches Vorgehen wie .suchleiste__platz beim
   Knopf). */
.umsa-einheit {
    display: inline-flex;
    align-items: center;
    height: 32px;
    color: var(--mh-text-label);
    font-size: 13px;
}

/* Zahlenfelder und Erklaertexte im Regelblock - wie .bvor-zahl /
   .bvor-text bei den Bestellvorschlaegen, damit beide Seiten gleich
   aussehen. */
.content input.umsa-zahl {
    width: 70px;
}

.umsa-text {
    align-self: center;
    color: var(--mh-text-leise);
    font-size: 12.5px;
}

.content select.umsa-select {
    max-width: 220px;
}

/* Der Artikelname darf umbrechen, die Zahlenspalten daneben nicht -
   gleiche Ueberlegung wie bei .bvor-artikel: eine Spalte, die sich
   nach dem laengsten Produktnamen richtet, schiebt alle Zahlen nach
   rechts aus dem Bild. */
.umsa-tabelle .umsa-artikel {
    min-width: 200px;
}

/* Alter und neuer Preis nebeneinander - das Kernstueck jeder Zeile.
   Der alte Wert bleibt lesbar (kein Durchstreichen: er ist nicht
   ungueltig, er ist der Ausgangspunkt), der neue traegt die
   Markenfarbe und das Gewicht. */
.umsa-preis {
    white-space: nowrap;
}

.umsa-alt {
    color: var(--mh-text-label);
    font-size: 13px;
}

.umsa-neu {
    color: var(--mh-blau);
    font-size: 15px;
    font-weight: bold;
}

.umsa-pfeil {
    color: var(--mh-blaugrau-text);
    font-size: 11px;
    margin: 0 2px;
}

/* Nachfrage-Trend, nur wo er auffaellt: anziehende Nachfrage ist ein
   Argument fuer die Erhoehung, nachlassende eines dagegen. */
.umsa-trend {
    font-weight: 600;
    white-space: nowrap;
}

.umsa-trend--auf { color: var(--mh-gruen); }
.umsa-trend--ab  { color: var(--mh-orange-text); }

/* Artikel, die im Schnitt deutlich unter Listenpreis weggingen - dort
   laufen dauerhaft Rabatte, und von einer Erhoehung kommt nur ein Teil
   an. Ein Hinweis zum Nachdenken, keine Fehlermeldung, deshalb nur
   eine Einfaerbung. */
.umsa-quote {
    color: var(--mh-orange-text);
    white-space: nowrap;
}

/* Die Ampel, wenn das Ziel nicht erreichbar ist. Sie sagt nicht nur
   Nein, sondern womit es doch ginge - die Wege stehen deshalb als
   eigene Liste darunter und nicht im Fliesstext. */
.umsa-ampel__wege {
    margin-top: 8px;
}

.umsa-ampel__wege ul {
    margin: 4px 0 6px 0;
    padding-left: 20px;
}

.umsa-ampel__wege li {
    margin: 2px 0;
}

/* Die Schlussrechnung: Umsatz heute + Erhoehung = Umsatz danach.
   Bewusst keine Tabelle - es sind drei bis fuenf Zeilen aus Text und
   Betrag, und als Flex-Reihen mit space-between stehen die Betraege
   ohne Spaltengeruest sauber untereinander. */
.umsa-rechnung {
    max-width: 520px;
    margin-bottom: 16px;
}

.umsa-rechnung__zeile {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 0;
    border-bottom: 1px solid var(--mh-rand-leise);
}

.umsa-rechnung__zeile--summe {
    border-bottom: none;
    border-top: 2px solid var(--mh-rand);
    margin-top: 2px;
    padding-top: 7px;
    font-size: 15px;
    font-weight: bold;
}

/* Der Rohertrag daneben: dieselbe Rechnung fuer die zweite Haelfte der
   Antwort, aber leiser - er ist die Gegenprobe, nicht das Ziel. */
.umsa-rechnung__zeile--neben {
    border-bottom: none;
    color: var(--mh-text-label);
    font-size: 12.5px;
    padding: 2px 0;
}

.umsa-plus {
    color: var(--mh-gruen);
    font-weight: bold;
}

/* Die drei Aufschluesselungen nebeneinander, solange Platz ist - und
   untereinander, sobald eine unter 260px fiele. Kein Media Query
   noetig, das erledigt wrap zusammen mit der Mindestbreite. */
.umsa-splits {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.umsa-split {
    flex: 1 1 260px;
    min-width: 0;
}

.umsa-split__titel {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--mh-text);
}


/* ====================================================================
   Druckdateien zuordnen (produktion_textil_zuordnen.php)
   Vorschauen auf mittlerem Grau - die Druckdateien sind meist weiss.
   ==================================================================== */
.dtfz-bild { width: 120px; height: 80px; object-fit: contain; background: #6e6e6e; padding: 4px; border-radius: 4px; display: block; }
.dtfz-alt { width: 90px; height: 60px; object-fit: contain; background: #6e6e6e; padding: 3px; border-radius: 4px; display: block; }
.dtfz-name { font-size: 12px; margin-top: 4px; max-width: 128px; overflow-wrap: anywhere; }
.dtfz-wahl { max-width: 100%; }
.dtfz-vergleich { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.dtfz-foto { width: 110px; height: 110px; object-fit: cover; border-radius: 4px; border: 1px solid var(--mh-rand); display: block; }
.dtfz-ersetzt { font-size: 12px; color: var(--mh-rot-dunkel); }
/* hidden muss gegen das display:block der Bilder gewinnen */
.dtfz-zeile [hidden] { display: none; }
.dtfz-ki { font-size: 12.5px; max-width: 340px; }
.dtfz-ki__text { margin-top: 4px; font-style: italic; }
.designbox .dtfz-zeile td { vertical-align: top; }
/* aufgerichtet angezeigt (Drehung aus der KI-Erkennung); quer gedreht wird
   verkleinert, damit das Bild in seinem 120 x 80 px grossen Kasten bleibt */
.dtfz-dreh-180 { transform: rotate(180deg); }
.dtfz-dreh-90 { transform: rotate(90deg) scale(.66); }
.dtfz-dreh-270 { transform: rotate(-90deg) scale(.66); }
/* .report-meta zieht sich mit -8px an die Zeile darueber - in der Tabelle
   landete die Massangabe dadurch auf dem Dateinamen */
.dtfz-zeile .report-meta { margin: 2px 0 0; }
.dtfz-ki { min-width: 240px; }

/* ==========================================================================
   Motiv auf Textilien (produktion_textil_montage.php): je Foto eine Karte,
   das Bild quadratisch, darunter Textil, Kragenabstand und Massstab.
   ========================================================================== */
.montage-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.montage-karte { margin: 0; background: #fff; border: 1px solid var(--mh-rand-leise); border-radius: 8px; overflow: hidden; }
.montage-karte img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--mh-flaeche); }
.montage-karte figcaption { padding: 6px 10px 8px; font-size: 12.5px; line-height: 1.45; }
.montage-karte figcaption span { color: var(--mh-text-leise); }

/* ---------------------------------------------------------------------------
   Fehlerprotokoll (core/fehler.inc.php, sys_fehler.php, core/footer.inc.php)
   --------------------------------------------------------------------------- */

/* Zeile am Seitenende fuer Admins: Warnungen und Hinweise dieser Seite.
   Gleiche Machart wie .seiten-fuss, nur in Warnfarbe - sie soll auffallen,
   aber nicht die Seite dominieren. */
.seiten-fehler {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mh-rot-hell);
    color: var(--mh-rot-dunkel);
    font-size: 12px;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.seiten-fehler b { font-weight: 600; font-family: inherit; }
.seiten-fehler a { color: var(--mh-rot-dunkel); text-decoration: underline; }

/* Liste in sys_fehler.php */
.fehler-tabelle td { vertical-align: top; }
.fehler-tabelle .fehler-meldung {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.fehler-tabelle .fehler-ort { color: var(--mh-text-leise); font-size: 12px; }
.fehler-tabelle details summary { cursor: pointer; color: var(--mh-blau); font-size: 12px; margin-top: 4px; }
.fehler-tabelle pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--mh-flaeche);
    border-radius: 6px;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}
.fehler-tabelle tr.fehler-zeile--erledigt td { color: var(--mh-text-leise); }
.fehler-tabelle tr.fehler-zeile--erledigt .fehler-meldung { text-decoration: line-through; }

/* Messzeile fuer Admins am Seitenende (core/footer.inc.php): Queries, Shopify,
   Gesamtzeit. Genauso leise wie .seiten-fuss. */
.seiten-mess { margin-top: 6px; font-size: 11.5px; color: var(--mh-text-leise); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: help; }

/* ---------------------------------------------------------------------------
   Umbauplan (sys_plan.php): Phasen mit ihren Arbeitspaketen
   --------------------------------------------------------------------------- */

/* Kopfzahlen. Bewusst keine kpi-card: das sind drei Zahlen zur Einordnung,
   keine Kacheln, auf die man klickt. */
.plan-stand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 34px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--mh-rand);
    border-radius: 8px;
}

.plan-stand__block { min-width: 86px; }

.plan-stand__zahl {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mh-blau);
}

.plan-stand__zahl span { font-size: 15px; font-weight: 600; color: var(--mh-text-leise); }

.plan-stand__was {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mh-text-leise);
}

/* Die Kennungen C / L / L! erklaert */
.plan-stand__legende {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    font-size: 12.5px;
    color: var(--mh-text-leise);
}
.plan-stand__legende b { color: var(--mh-text); font-weight: 600; }

/* Phasenkopf: die Nummer traegt den Zustand, nicht die ganze Zeile */
.plan-phase__nr {
    display: inline-block;
    min-width: 22px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mh-text-leise);
    font-variant-numeric: tabular-nums;
}
.plan-phase--fertig .plan-phase__nr { color: var(--mh-gruen); }
.plan-phase--laeuft .plan-phase__nr { color: var(--mh-blau); }

.plan-phase__zeit { font-weight: 400; font-size: 12.5px; color: var(--mh-text-leise); }

.plan-phase__fortschritt { display: flex; align-items: center; gap: 10px; }
.plan-phase__quote { font-size: 12.5px; color: var(--mh-text-leise); font-variant-numeric: tabular-nums; }

.plan-balken {
    display: block;
    width: 90px;
    height: 5px;
    border-radius: 3px;
    background: var(--mh-grau);
    overflow: hidden;
}
.plan-balken i { display: block; height: 100%; background: var(--mh-gruen); border-radius: 3px; }

/* Das Ziel der Phase - ein Satz, kein Absatz */
.plan-ziel {
    padding: 9px 16px;
    border-bottom: 1px solid var(--mh-rand-leise);
    font-size: 13px;
    line-height: 1.5;
    color: var(--mh-text-leise);
    background: var(--mh-flaeche);
}

.plan-liste { margin: 0; padding: 0; list-style: none; }

.plan-paket {
    display: grid;
    grid-template-columns: 26px 42px 1fr auto;
    align-items: baseline;
    gap: 0 8px;
    padding: 7px 16px;
    border-bottom: 1px solid var(--mh-rand-leise);
}
.plan-paket:last-child { border-bottom: 0; }

/* Erledigtes tritt zurueck, statt durchgestrichen zu werden: es soll lesbar
   bleiben, nur nicht mehr um Aufmerksamkeit bitten. */
.plan-paket--fertig .plan-text b { font-weight: 500; color: var(--mh-text-leise); }
.plan-paket--fertig .plan-nr { color: var(--mh-gruen); }

/* Der Haken ist eine Anzeige, kein Knopf - der Stand wird im Plan gepflegt */
.plan-haken {
    align-self: center;
    font-size: 14px;
    line-height: 1;
    color: var(--mh-rand-hover);
    text-decoration: none;
}

.plan-paket--fertig .plan-haken { color: var(--mh-gruen); }

.plan-nr {
    font-size: 13px;
    font-weight: 600;
    color: var(--mh-text-leise);
    font-variant-numeric: tabular-nums;
}

.plan-text { min-width: 0; }
.plan-text b { font-weight: 600; }

.plan-detail {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mh-text-leise);
}

/* Wo das Paket gemacht werden kann - C, L oder L! */
.plan-ort {
    align-self: center;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid var(--mh-rand);
    color: var(--mh-text-leise);
    white-space: nowrap;
}
.plan-ort--lokal { border-color: #ddc9a4; color: #8a6d32; background: #fbf4e6; }
.plan-ort--live  { border-color: #e2b4ad; color: var(--mh-rot-dunkel); background: var(--mh-rot-hell); }

/* "Erledigte ausblenden" (Klasse am <body>, gemerkt im localStorage) */
.plan-stand__filter { align-self: center; }
.plan-ohne-fertige .plan-paket--fertig,
.plan-ohne-fertige .plan-phase--fertig { display: none; }
/* :last-child trifft dann ein ausgeblendetes Paket - die Linie gehoert unter
   das letzte sichtbare, sonst steht sie doppelt ueber dem Kartenrand */
.plan-ohne-fertige .plan-paket:not(.plan-paket--fertig):not(:has(~ .plan-paket:not(.plan-paket--fertig))) { border-bottom: 0; }

@media (max-width: 700px) {
    .plan-stand__legende { margin-left: 0; width: 100%; }
    .plan-paket { grid-template-columns: 24px 40px 1fr; row-gap: 3px; }
    .plan-ort { grid-column: 3; justify-self: start; }
}

/* --- Datensicherung (sys_sicherung.php) ---------------------------------
   Der Loeschknopf ist ein <button> in einem eigenen POST-Formular (Loeschen
   braucht Token und Code, ein Link per GET waere beides nicht). Er soll aber
   aussehen wie jedes andere .zeilen-aktion-Symbol: .content button aus TEIL 1
   gibt ihm sonst Rahmen und hellblauen Grund. */
.content .sicherung-loeschen {
    display: inline;
    margin: 0;
}

.content .sicherung-loeschen button.zeilen-aktion {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.content .sicherung-loeschen button.zeilen-aktion:hover {
    background: var(--mh-rot-hell);
    color: var(--mh-rot-dunkel);
}

.sicherung-log {
    margin: 0;
    font-size: 12px;
    white-space: pre-wrap;
}

/* Datum, Dateiname und Groesse bleiben einzeilig - .spalte-fuellt (width:100%)
   drueckte die Spalten davor sonst auf Wortbreite zusammen, der Dateiname brach
   an jedem Bindestrich um und die Zeile wurde 95px hoch. */
.content .sicherung-tabelle td {
    white-space: nowrap;
}

.content input.sicherung-zahl {
    width: 80px;
}

.content input.sicherung-passwort {
    width: 240px;
}

.sicherung-schluessel {
    word-break: break-all;
    user-select: all;
}

/* ==========================================================================
   Eingabefelder mobil: 16px Schrift, nie breiter als ihr Platz (Paket 7.9)
   ========================================================================== */

/* Unter 16px zoomt iOS Safari die Seite beim Antippen eines Feldes heran, und
   sie bleibt danach vergroessert. Vorher erbte jedes Feld ohne eigene Groesse
   die 13,3px des Browsers - gemessen am 14.09.2026: 996 Felder auf 46 Seiten
   (pruefstand/mobil/). Die Einzelregeln fuer Lagercheck, Service und .kv-value
   gab es schon, die Grundregel fehlte.

   !important mit Absicht: die Schwelle ist absolut. Ohne blieben 13 Felder auf
   9 Seiten klein, weil seitenspezifische Regeln (.content .form-stapel textarea
   u.a.) spezifischer sind - und eine kleinere Schrift ist mobil in jedem Fall
   falsch, egal wo sie herkommt.

   max-width gehoert dazu: ein Feld mit size= oder fester Breite waechst mit der
   Schrift. Nur 16px haette statistik_verkauf.php und produkte_shops_sync.php neu
   zu breit gemacht; mit der Grenze fallen umgekehrt die festen 320-500px-Felder
   in material_textil.php, produktion.php, tickets_konfig.php und
   wawi_kopieren.php weg (7.10). Knoepfe, Haken und Dateiauswahl zoomen nicht
   und bleiben aussen vor.

   Jede Aenderung hier vorher mit pruefstand/mobil/messen.php --css=<datei>
   gegen alle Seiten messen - Ueberlauf, Feldgroesse, Hoehe neben Knoepfen. */
@media (max-width: 768px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .content input,
    .content select,
    .content textarea {
        max-width: 100%;
    }

    /* Der ungestaltete Knopf neben so einem Feld waechst mit, sonst steht er
       3px niedriger daneben (22 zu 19px - gemessen in produktion_bestand.php
       in 99 Zeilen, dazu statistik_verkauf.php und wawi_material.php).
       Knoepfe mit Klasse (.btn-primary, .order-pill ...) haben ihre eigene
       Groesse und bleiben, wie sie sind. */
    .content input[type="submit"]:not([class]),
    .content input[type="button"]:not([class]),
    .content button:not([class]) {
        font-size: 16px;
    }
}

/* ==========================================================================
   Lange Zeichenketten mobil (Paket 7.10)
   ========================================================================== */

/* Eine Zeichenkette ohne Umbruchstelle - Shopify-GID, Pfad, E-Mail-Liste mit
   Semikolon - schob die Seite quer, obwohl kein Kasten zu breit war:
   sys_control.php (gid://shopify/ProductVariant/... in .kv-value, 17px),
   sys_sicherung.php (Ablagepfad in <code> in .kv-value, 69px), handel.php
   (E-Mail-Listen in <p>, 524px). anywhere statt break-word, weil nur anywhere
   auch die Mindestbreite senkt - .kv-value steht in einer Flex-Zeile.
   Umgebrochen wird nur, was sonst nicht passt; normaler Text bricht wie immer
   an Leerzeichen. Gegen alle Seiten gemessen: keine andere Seite veraendert. */
@media (max-width: 768px) {
    .kv-value,
    .content p {
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   Materialzuordnung (material_produkte.php, wawi_material.php - Paket 7.2)
   ========================================================================== */

/* Die zugeordneten Materialien unter dem Produktnamen, je mit kleinem X */
.material-zuordnungen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mh-text-leise);
}

.material-zuordnung {
    display: inline-flex;
    align-items: center;
}

.material-zuordnung .zeilen-aktion {
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
}

/* Feld + Pulldown + Knopf in einer .knopfreihe. Die Materialnamen sind lang;
   der Pulldown nimmt den freien Platz, statt die Zeile umbrechen zu lassen.
   Mit .kv-form davor, weil dessen width:100% sonst jedes Feld auf eine eigene
   Zeile schiebt. */
.content .material-form select,
.content .kv-form .material-form input[type="text"],
.content .kv-form .material-form select {
    width: auto;
    flex: 1 1 220px;
    min-width: 0;
}

.content .material-form input.material-anzahl {
    width: 52px;
    flex: 0 0 52px;
    box-sizing: border-box;
    text-align: right;
}

.material-form > .kv-hinweis {
    align-self: center;
    margin-top: 0;
}

/* Die .knopfreihe allein reicht hier nicht: ".kv-value form" (align-items:
   center) ist spezifischer und liess die Knoepfe 19px hoch neben 29px hohen
   Feldern stehen, und ".content input" gibt jedem Feld 4px Aussenabstand, der
   beim Strecken abgezogen wird (gemessen mit pruefstand/mobil/). */
.content .material-form {
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.content .material-form > input,
.content .material-form > select {
    margin: 0;
}

/* In einer .list-row nimmt das Formular den Platz neben dem Loeschen-Symbol -
   mit flex-basis auto waere es so breit wie sein Inhalt und schoebe das
   Symbol in eine eigene Zeile. */
.content .list-row > .material-form {
    flex: 1 1 0;
}

/* ==========================================================================
   Textil-Wareneingang: QR-Code per Kamera (material_textil.php - Paket 7.4)
   ========================================================================== */

/* Vorher Inline-Stile. Das Skript der Seite blendet die Teile per
   style.display ein und aus - ausgeblendet starten sie deshalb ueber diese
   Klassen, sichtbar macht sie der Inline-Wert, den das Skript setzt. */
.qr-kamera {
    display: none;
    margin: 10px 0;
}

.qr-kamera__video {
    display: block;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #000;
    border-radius: 6px;
}

.qr-kamera__wahl,
.qr-kamera__fokus {
    display: none;
    margin-top: 6px;
    max-width: 600px;
}

.qr-kamera__fokus input[type="range"] {
    width: 250px;
    max-width: 100%;
    vertical-align: middle;
}

.qr-kamera__leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.qr-kamera__canvas {
    display: none;
}

/* ==========================================================================
   Sendungen scannen (pack_scan.php - Paket 7.5)
   ========================================================================== */

/* Die Leiste fuer die Mitarbeiterkennung steht gelb, solange eine gescannte
   Packliste darauf wartet - vorher ein Inline-Stil an der alten .order-toolbar. */
.infobox2.suchleiste--wartet {
    background: var(--mh-warnung-hell);
    border-color: #f0dfa0;
}

/* Vier Ziffern - ein volles Feld waere dafuer zu breit */
.content .suchleiste__feld input.pack-scan__kennung {
    width: 120px;
}

/* ==========================================================================
   SEO-Werkzeug (system/seo/ - docs/module/seo.md)
   ========================================================================== */

/* Die Snippet-Vorschau: so ungefaehr zeigt Google ein Suchergebnis. Bewusst
   eine Naeherung und keine Nachbildung - Google kuerzt je Geraet und
   Suchbegriff anders, und das steht auch so daneben. */
.seo-snippet {
    max-width: 600px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    font-family: arial, sans-serif;
}

.seo-snippet--mobil {
    max-width: 400px;
}

.seo-snippet__pfad {
    font-size: 12px;
    color: #4d5156;
    line-height: 1.4;
    word-break: break-all;
}

.seo-snippet__titel {
    font-size: 20px;
    line-height: 1.3;
    color: #1a0dab;
    margin: 2px 0 3px;
}

.seo-snippet--mobil .seo-snippet__titel {
    font-size: 16px;
}

.seo-snippet__titel--leer,
.seo-snippet__text--leer {
    color: var(--mh-text-leise);
    font-style: italic;
}

.seo-snippet__text {
    font-size: 14px;
    line-height: 1.58;
    color: #4d5156;
}

/* Der Pixelmesser unter einem Feld: ein Balken, der sich fuellt, und ab der
   Grenze faerbt er sich um. Die Zahl daneben ist dieselbe, die der Crawler
   rechnet - Tabelle und Formel stehen in core/seo_crawler.inc.php. */
.seo-pixel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mh-text-leise);
}

.seo-pixel__balken {
    position: relative;
    flex: 1 1 auto;
    max-width: 320px;
    height: 6px;
    border-radius: 3px;
    background: var(--mh-grau);
    overflow: hidden;
}

.seo-pixel__fuell {
    display: block;
    height: 100%;
    background: var(--mh-blau);
    transition: width 0.15s ease;
}

.seo-pixel--zu-breit .seo-pixel__fuell { background: #c0392b; }
.seo-pixel--zu-kurz  .seo-pixel__fuell { background: #e0a800; }

/* Der Score: ein Kreis mit einer Zahl, daneben die drei Bereiche. Bewusst
   SVG aus PHP statt einer Chart-Bibliothek - es ist ein Kreis. */
.seo-score {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.seo-score__kreis {
    flex: 0 0 auto;
    line-height: 0;
}

.seo-score__zahl {
    font-size: 30px;
    font-weight: 700;
    fill: var(--mh-blau);
}

.seo-score__einheit {
    font-size: 11px;
    fill: var(--mh-text-leise);
}

.seo-score__bereiche {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 260px;
}

.seo-kachel {
    flex: 1 1 130px;
    min-width: 120px;
    padding: 10px 12px;
    border: 1px solid var(--mh-rand-leise);
    border-radius: 8px;
    background: var(--mh-flaeche);
    text-decoration: none;
    color: inherit;
}

.seo-kachel:hover {
    border-color: var(--mh-rand);
    text-decoration: none;
}

.seo-kachel__wert {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.seo-kachel__label {
    font-size: 12px;
    color: var(--mh-text-leise);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.seo-kachel__trend {
    font-size: 12px;
    margin-left: 6px;
    font-weight: 600;
}

.seo-kachel__trend--besser { color: #2e7d32; }
.seo-kachel__trend--schlechter { color: #c0392b; }

/* Der Verlauf ueber die letzten Crawls - eine schlichte SVG-Linie aus PHP */
.seo-verlauf {
    width: 100%;
    max-width: 760px;
    height: auto;
}

.seo-verlauf__flaeche { fill: var(--mh-hell); }
.seo-verlauf__linie   { fill: none; stroke: var(--mh-blau); stroke-width: 2; }

/* Eine Aufgabe in der Liste: Kopf immer sichtbar, Erklaerung und betroffene
   Seiten erst beim Aufklappen. */
.seo-aufgabe__nr {
    display: inline-block;
    min-width: 22px;
    font-weight: 700;
    color: var(--mh-text-leise);
}

.seo-aufgabe__erklaerung {
    background: var(--mh-flaeche);
    border-left: 3px solid var(--mh-rand);
    padding: 10px 14px;
    margin-bottom: 12px;
}

.seo-aufgabe__erklaerung p { margin: 0 0 6px; }
.seo-aufgabe__erklaerung p:last-child { margin-bottom: 0; }

.seo-aufgabe__label {
    font-weight: 700;
    color: var(--mh-blau);
}

/* Aktionen einer betroffenen Seite: immer in einer Zeile. Mit vier, fuenf Knoepfen
   brach .knopfreihe (flex-wrap) den letzten unter die anderen - die Zeilen wurden
   doppelt so hoch und die Knoepfe standen nicht mehr untereinander. Die Tabelle
   steht in .tabelle-scroll, eine breitere Spalte schiebt also nur sie selbst. */
.knopfreihe.seo-aufgabe__aktionen {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.seo-aufgabe__aktionen > .order-pill {
    white-space: nowrap;
}

/* Auf schmalen Schirmen steht der Score ueber den Kacheln statt daneben */
@media (max-width: 560px) {
    .seo-score { gap: 12px; }
    .seo-score__bereiche { flex-basis: 100%; }
    .seo-kachel { flex-basis: 100%; }
}

/* ==========================================================================
   Linktree (marketing_linktree.php)
   ========================================================================== */

.linktree-hinweis {
    margin-bottom: 6px;
}

/* Rueckmeldung nach dem Verschieben, rechts im Kartenkopf */
.linktree-status {
    font-size: 12px;
    font-weight: normal;
    color: var(--mh-gruen);
}

.linktree-status--fehler {
    color: var(--mh-rot);
}

.linktree-zeile {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mh-rand-leise);
    background: #fff;
}

.linktree-zeile:last-child {
    border-bottom: none;
}

/* Die Zeile, die gerade am Finger haengt */
.linktree-zeile--zieht {
    position: relative;
    z-index: 2;
    background: var(--mh-hell);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

.linktree-zeile--aus .linktree-knopf {
    opacity: 0.45;
}

/* Griff: .content davor, sonst faerbt ihn .content button aus TEIL 1 hellblau.
   touch-action: none, damit der Finger zieht statt die Seite zu scrollen. */
.content .linktree-griff {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: var(--mh-text-leise);
    font-size: 15px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.content .linktree-griff:hover,
.content .linktree-griff:focus-visible {
    background: var(--mh-hell);
    color: var(--mh-blau);
}

.linktree-zeile--zieht .linktree-griff {
    cursor: grabbing;
}

.linktree-zeile__inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Der Knopf so, wie er auf der oeffentlichen Seite aussieht - verkleinert */
.linktree-knopf {
    display: inline-block;
    max-width: 100%;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.linktree-knopf--vorschau {
    display: block;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
}

.linktree-zeile__url {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--mh-text-leise);
}


/* ============================================================================
   Schnellmenue (core/schnellmenue.inc.php, docs/module/schnellmenue.md)
   Knopf mit Stern in der Topbar links neben der Glocke, die Liste klappt beim
   Darueberfahren nach unten auf. Die Topbar gibt es mobil nicht - dort braucht
   es auch den Stern in der Titelzeile nicht.
   ============================================================================ */

.schnellmenue {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.schnellmenue > .topbar__bell {
    cursor: default;
}

/* Die Klappe beginnt direkt an der Unterkante des Knopfs und haelt den Abstand
   mit padding statt margin - sonst liegt zwischen Knopf und Liste eine Luecke,
   in der das :hover abreisst, bevor die Maus die Liste erreicht. */
.schnellmenue__klappe {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    padding-top: 6px;
}

.schnellmenue:hover .schnellmenue__klappe,
.schnellmenue:focus-within .schnellmenue__klappe {
    display: block;
}

.schnellmenue__liste {
    min-width: 240px;
    max-width: 360px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px 0;
    background: #fff;
    border: 1px solid var(--mh-rand-grau);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.schnellmenue__eintrag {
    display: flex;
    align-items: center;
}

.schnellmenue__eintrag:hover {
    background: var(--mh-hell);
}

.schnellmenue__link {
    flex: 1;
    min-width: 0;
    padding: 7px 6px 7px 12px;
    color: var(--mh-text);
    text-decoration: none;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .content davor: ".content button" aus TEIL 1 faerbt jeden Knopf sonst hellblau */
.content .schnellmenue__weg,
.content .schnellmenue__weg:hover {
    flex: 0 0 auto;
    margin: 0 6px 0 0;
    padding: 4px 6px;
    border: none;
    background: none;
    color: var(--mh-text-leise);
    font-size: 12px;
    cursor: pointer;
    visibility: hidden;
}

.content .schnellmenue__eintrag:hover .schnellmenue__weg {
    visibility: visible;
}

.content .schnellmenue__weg:hover {
    color: var(--mh-rot);
}

.schnellmenue__leer {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--mh-text-label);
}

/* Stern ganz rechts in der Titelzeile. margin-left: auto schiebt ihn nach rechts;
   stehen Seitenaktionen davor, tun die das schon - zwei auto-Raender teilten den
   freien Platz, und der Stern stuende mitten in der Zeile. */
.content .schnellmenue-stern,
.content .schnellmenue-stern:hover {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 2px 4px;
    border: none;
    background: none;
    color: var(--mh-blaugrau-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.content .page-title-row__aktionen ~ .schnellmenue-stern {
    margin-left: 0;
}

.content .schnellmenue-stern:hover,
.content .schnellmenue-stern--an {
    color: var(--mh-orange);
}

@media (max-width: 768px) {
    .content .schnellmenue-stern {
        display: none;
    }
}