/*
 * theme.css - Farbpalette fuer die Measuree-Portalseiten (Light + Dark)
 *
 * MUSS ALS ERSTES STYLESHEET geladen werden, denn measuree_master.css,
 * jo_popover.css und jo_table_sorter.css beziehen ihre Farben ueber var()
 * aus dieser Datei. Eingebunden wird sie ueber include/theme_head.php.
 *
 * ABLAGE - BITTE NICHT NACH include/measuree/ VERSCHIEBEN
 * versions/update_js_css.php ueberschreibt die dort liegenden Dateien beim
 * Versionsupdate aus dem Ordner versions/<Version>/ und legt die alten Staende
 * nach include/measuree_backup/. Alles, was hier im Haus entsteht, gehoert
 * deshalb in include/ selbst.
 *
 * DREI ZUSTAENDE
 * -------------
 *   kein data-theme        -> Systemeinstellung entscheidet (Default)
 *   data-theme="light"     -> ausdruecklich hell, auch bei dunklem System
 *   data-theme="dark"      -> ausdruecklich dunkel, auch bei hellem System
 *
 * Das Attribut setzt das Inline-Skript in theme_head.php, bevor die Seite
 * gerendert wird - sonst blitzt beim Laden kurz die helle Fassung auf.
 *
 * LIGHT IST DER DEFAULT und entspricht exakt dem bisherigen Aussehen. Die
 * Werte unten sind 1:1 aus measuree_master.css, jo_popover.css und
 * jo_table_sorter.css uebernommen, nicht neu gewaehlt.
 *
 * ACHTUNG - der Dark-Block steht ZWEIMAL (Media-Query und Attribut). CSS
 * bietet ohne Praeprozessor keinen Weg, das zu vermeiden. Beide Bloecke
 * muessen synchron gehalten werden; Aenderungen also immer an beiden Stellen.
 *
 * SCHRIFTEN: Lexend und PT Sans Narrow, siehe den @font-face-Block unten.
 * measuree_master.css bezieht sie ueber --fd und --fb.
 */

/*
 * SCHRIFTEN
 * ---------
 * Dieselben zwei Familien wie im Portal, aus demselben Bestand - nur die
 * Pfade unterscheiden sich, weil diese Datei eine Ebene tiefer liegt.
 * Das CI bindet sie ueber Bunny Fonts ein; externe Quellen sind hier nicht
 * gestattet, deshalb selbst gehostet.
 *
 * Vorher liefen diese Seiten auf 'Arial', 'Verdana' - beide CI-Schriften
 * fehlten hier ganz.
 */
@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('fonts/PTSansNarrow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('fonts/PTSansNarrow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 * HERKUNFT DER WERTE
 * ------------------
 * Die dunklen Werte stammen aus dem CI-Kit unter .docs/ci/ (LIESMICH.md,
 * Abschnitt Design-Tokens, Stand 25.08.2026). Rollennamen und Farben folgen
 * dort eins zu eins: --dk/--dk2/--dk4 -> --bg/--surface/--divider,
 * --off/--t1..t4 -> --text/--text-1..3 und --field-line.
 *
 * ACHTUNG - DIE HELLEN WERTE HABEN KEINE CI-GRUNDLAGE. Das CI beschreibt ein
 * durchgehend dunkles System ("Auf hellem Grund funktionieren die Elemente
 * nicht"). Der helle Modus ist eine bewusste Abweichung fuer den Innen-
 * gebrauch; seine Werte sind abgeleitet, nicht vorgegeben. Wer etwas am
 * dunklen Block aendert, hat eine Quelle - wer den hellen aendert, entscheidet
 * selbst.
 */

/* ---------------------------------------------------------------- LIGHT */
:root {
    /* Flaechen */
    --bg:          #eeeeee;   /* body, #container             CI --dk    */
    --surface:     #ffffff;   /* Listen, Felder, Popover      CI --dk2   */
    --surface-2:   #f8f8f8;   /* Zebra, Tabellenkopf          CI --dk3   */
    --surface-3:   #fafafa;   /* Tabellen-Zellen                         */
    --surface-4:   #f0f0f0;   /* Kopf des Sortierdialogs      CI --dk3   */

    /* Linien */
    --line:        #cccccc;   /* Feldrahmen                   CI --t4    */
    --divider:     #dddddd;   /* Trennlinien, Tabellen        CI --dk4   */
    --hairline:    rgba(0, 0, 0, .08);  /* Rahmen allgemein   CI-Vorgabe */

    /* Text */
    --text:        #000000;   /* CI --off */
    --text-1:      #333333;   /* Labels, Spaltentitel         CI --t1    */
    --text-2:      #a0a0a0;   /* zurueckgenommen              CI --t2    */
    --text-3:      #999999;   /* Platzhalter, Rahmen        CI --t3    */
    --text-mute:   #bbbbbb;   /* Icons                        CI --t3    */
    --quiet-link:  var(--text);   /* Verweis "Passwort vergessen": im Hellen schwarz, im Dunklen orange */
    --on-accent:   #ffffff;   /* Text auf farbiger Flaeche               */

    /* Interaktion */
    --row-hover: rgba(232, 114, 28, .12);   /* Zeile unter dem Mauszeiger              */
    --sel: rgba(232, 114, 28, .18);   /* Auswahl (jo_table_sorter)               */
    --sel-line: #e8721c;
    --link:        #0d80a9;   /* Links in Tabellen                       */

    /* Akzente - identisch mit portal.css */
    --cyan:        #5097da;   /* CI-Themenfarbe "Messen"                 */
    --ok:        #00c853;   /* MEASUREE Green - abgeschlossene Vorgaenge  */
    --warn:      #f5a623;   /* MEASUREE Amber - laufend, ausstehend       */
    --teal:      #00b8a9;   /* CI-Sekundaerfarbe, derzeit ungenutzt:
                               Aktive Zustaende laufen im Portal ueber
                               Orange. Vorgesehen fuer Auswahlen im
                               Viewer - siehe Handbuch Kapitel 03.     */   /* MEASUREE Teal - aktive Zustaende, Hover    */
    --orange:      #e8721c;   /* CI-Primaerfarbe                         */
    --orange-l:    #fc954f;   /* Hover der Primaerfarbe   CI --orange-l */
    --red:         #b5152b;   /* CI-Themenfarbe "Sehen"                  */
    --red-2:       #cc123c;   /* Popover-Warnung                         */
    --red-3:       #cc515c;   /* Tabellen-Markierung                     */
    --error:       #d92b2b;   /* Formularfehler - hell abgeleitet        */

    /* Schriften - CI: Lexend fuer Ueberschriften und Buttons,
       PT Sans Narrow fuer alles, was gelesen und bedient wird */
    --fd: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fb: 'PT Sans Narrow', 'Arial Narrow', Arial, sans-serif;

    /* Radien und Bewegung nach CI */
    --r:           4px;      /* Eingabefeld, Formular-Button            */
    --r-card:      12px;     /* Karte, Dialog        (CI 12-18px)       */
    --r-pill:      100px;    /* Button, Pill, Tag                       */
    --ease:        cubic-bezier(.16, 1, .3, 1);

    /* Schatten */
    --shadow:      rgba(0, 0, 0, 0.6);

    /* Sorgt dafuer, dass native Elemente (Scrollbars, Datumswaehler,
       Auswahllisten) zum Modus passen. */
    color-scheme: light;
}

/* ----------------------------------------------------------------- DARK
   Werte aus include/portal.css uebernommen (--dk, --off, --t1 ...), auf die
   Rollen oben gemappt. Bei Aenderungen den zweiten Block unten mitziehen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #111111;   /* CI --dk  */
        --surface:     #191919;   /* CI --dk2 */
        --surface-2:   #222222;   /* CI --dk3 */
        --surface-3:   #191919;   /* Zellen wie die Flaeche */
        --surface-4:   #222222;   /* CI --dk3 */

        --line:        #3a3430;   /* CI --t4 */
        --divider:     #2a2a2a;   /* CI --dk4 */
        --hairline:    rgba(255, 255, 255, .04);   /* CI-Vorgabe */

        --text:        #faf6f1;   /* CI --off */
        --text-1:      #c8c0b8;   /* CI --t1 */
        --text-2:      #8a827a;   /* CI --t2 */
        --text-3:      #5a534c;   /* Platzhalter, Rahmen        CI --t3    */
        --text-mute:   #5a534c;   /* CI --t3 */
        --quiet-link:  var(--orange);
        --on-accent:   #ffffff;

        --row-hover: rgba(232, 114, 28, .16);
        --sel: rgba(232, 114, 28, .22);
        --sel-line: #e8721c;
        --link:        #6ab7e0;

        --cyan:        #5097da;
        --ok:        #00c853;
        --warn:      #f5a623;
        --teal:      #00b8a9;   /* CI-Sekundaerfarbe, derzeit ungenutzt:
                               Aktive Zustaende laufen im Portal ueber
                               Orange. Vorgesehen fuer Auswahlen im
                               Viewer - siehe Handbuch Kapitel 03.     */
        --orange:      #e8721c;
        --orange-l:    #fc954f;
        --red:         #b5152b;
        --red-2:       #e0546b;
        --red-3:       #cc515c;
        --error:       #ff6b6b;   /* CI-Fehlerrot */

        --shadow:      rgba(0, 0, 0, .8);

        color-scheme: dark;
    }
}

/* Ausdrueckliche Wahl des Nutzers - gewinnt auch bei hellem System. */
:root[data-theme="dark"] {
    --bg:          #111111;   /* CI --dk  */
    --surface:     #191919;   /* CI --dk2 */
    --surface-2:   #222222;   /* CI --dk3 */
    --surface-3:   #191919;   /* Zellen wie die Flaeche */
    --surface-4:   #222222;   /* CI --dk3 */

    --line:        #3a3430;   /* CI --t4 */
    --divider:     #2a2a2a;   /* CI --dk4 */
    --hairline:    rgba(255, 255, 255, .04);   /* CI-Vorgabe */

    --text:        #faf6f1;   /* CI --off */
    --text-1:      #c8c0b8;   /* CI --t1 */
    --text-2:      #8a827a;   /* CI --t2 */
    --text-3:      #5a534c;   /* Platzhalter, Rahmen        CI --t3    */
    --text-mute:   #5a534c;   /* CI --t3 */
    --quiet-link:  var(--orange);
    --on-accent:   #ffffff;

    --row-hover: rgba(232, 114, 28, .16);
    --sel: rgba(232, 114, 28, .22);
    --sel-line: #e8721c;
    --link:        #6ab7e0;

    --cyan:        #5097da;
    --ok:        #00c853;
    --warn:      #f5a623;
    --teal:      #00b8a9;   /* CI-Sekundaerfarbe, derzeit ungenutzt:
                               Aktive Zustaende laufen im Portal ueber
                               Orange. Vorgesehen fuer Auswahlen im
                               Viewer - siehe Handbuch Kapitel 03.     */
    --orange:      #e8721c;
    --orange-l:    #fc954f;
    --red:         #b5152b;
    --red-2:       #e0546b;
    --red-3:       #cc515c;
    --error:       #ff6b6b;   /* CI-Fehlerrot */

    --shadow:      rgba(0, 0, 0, .8);

    color-scheme: dark;
}

/* ------------------------------------------------- Hintergrundbild (body)
   measuree_master.css bettet ein Foto als base64-Grafik ein (1,21 MB). Die URL
   wird hier bewusst NICHT wiederholt - das wuerde die Datei verdoppeln.

   background-blend-mode: normal heisst: Das Bild liegt unveraendert ueber der
   Flaechenfarbe, wird also nicht abgedunkelt. Die Farbe wirkt nur dort, wo das
   Bild nicht deckt. Vorher stand hier multiply. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background-color: var(--bg);
        background-blend-mode: normal;
    }
}

:root[data-theme="dark"] body {
    background-color: var(--bg);
    background-blend-mode: normal;
}

/* ------------------------------------------------------ Logo im Dark Mode
   measuree_logo_text.svg hat keine fill-Angabe, die Elemente sind daher
   schwarz und auf dunklem Grund unsichtbar. invert(1) macht daraus Weiss -
   dieselbe Loesung wie bei .meelogo in portal.css. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #logo img {
        filter: invert(1);
        opacity: .92;
    }
}

:root[data-theme="dark"] #logo img {
    filter: invert(1);
    opacity: .92;
}

/* --------------------------------------------- Katzen-Silhouette (Login)
   measuree/measuree_cat_only_silhouette.svg traegt fill="#BBBBBB" fest in
   der Datei. Das laesst sich per CSS nicht umfaerben, weil die Grafik als
   background-image geladen wird (measuree_master.css Z. 355). brightness(.75)
   macht daraus etwa #8c8c8c und damit denselben Eindruck wie --text-mute im
   Dark Mode - die Silhouette passt so zu den typcn-Symbolen daneben. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form_field_container.measuree_version::before {
        filter: brightness(.75);
    }
}

:root[data-theme="dark"] .form_field_container.measuree_version::before {
    filter: brightness(.75);
}
/*
 * BREITE UND HOEHE SCHLIESSEN POLSTERUNG UND RAHMEN EIN
 *
 * Ohne diese Regel rechnet der Browser beides ZUSAETZLICH zur angegebenen
 * Groesse: Ein Feld mit width: 100% und padding: 10px ist 100% + 20px breit
 * und ragt aus seinem Behaelter. Genau daher kam der waagrechte Bildlauf in
 * den Bearbeitungsdialogen.
 *
 * Der Universalselektor hat die Spezifitaet 0 - jede Regel, die box-sizing
 * ausdruecklich setzt, gewinnt weiterhin. Das gilt auch fuer die Stylesheets,
 * die spaeter geladen werden.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Der Theme-Umschalter braucht hier keine eigene Regel: Er steht in
   <div id="user"> und uebernimmt Groesse und Abstand aus '#user button',
   Farbe und Rahmen aus der allgemeinen button-Regel (measuree_master.css). */

/* ============================================================== DIALOGE
   Einheitliche Optik fuer alle <dialog>-Elemente der Anwendung:
   #sessionDialog (portal_projects.php), #editDialog (portal_master.php),
   #resetDialog (index.php) und #confirmDialog (app/session_viewer.php).

   Aufbau eines Dialogs mit Leisten:

       <dialog>
         <div class="dialog_head"> Titel  <button class="dialog_close">x</button>
         <div class="dialog_body"> Inhalt                (oder ein <iframe>)
         <div class="dialog_foot"> Schaltflaechen        (optional)
       </dialog>

   padding: 0 ist noetig, weil der Browser einem dialog von sich aus 1em
   Innenabstand gibt - die Leisten sassen sonst als Streifen mitten in einer
   Flaeche. Der Innenabstand steckt deshalb in .dialog_body. */
dialog {
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
    animation: fadeIn .3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

dialog::backdrop {
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px);
}

.dialog_head,
.dialog_foot {
    box-sizing: border-box;
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    color: var(--text);
}

/* Kopfleiste eines Dialogs. Schrift bewusst fest gesetzt und in beiden
   Paletten gleich - sonst haetten die Dialoge je nach Seite unterschiedliche
   Groessen, weil der Fliesstext hier 1.15rem und dort 12px betraegt.
   Die Werte folgen der Ableitung, die das CI fuer Portalelemente vorgibt:
   PT Sans Narrow, Versalien, letter-spacing .09em. */
.dialog_head {
    justify-content: space-between;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--fb);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dialog_foot {
    justify-content: flex-end;
    border-top: 1px solid var(--line);
}

/* Muss die allgemeinen button-Regeln der jeweiligen Seite ueberschreiben -
   die geben Schaltflaechen sonst Flaechenfarbe, Polsterung und volle Breite. */
.dialog_close {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}

/* Nur die Farbe wechselt - kein Anheben, keine Flaeche. */
.dialog_close:hover {
    background: none;
    color: var(--orange);
    transform: none;
}

/* overflow: auto, damit wachsender Inhalt scrollt statt abgeschnitten zu
   werden. Der Dialog selbst bleibt overflow: hidden - das schneidet nur die
   runden Ecken sauber ab, gescrollt wird hier drin. */
.dialog_body {
    padding: 20px;
    overflow: auto;
}
/* ----------------------------------------------------- Bildlaufleisten
   Durchgehend in der Primaerfarbe, nicht nur in Dialogen.

   scrollbar-color ist eine erbende Eigenschaft: an html gesetzt, gilt sie
   fuer jedes scrollende Element darunter - das deckt Firefox ab. Die
   ::-webkit-Regeln fuer Chrome, Edge und Safari kennen keine Vererbung und
   stehen deshalb ungebunden, womit sie alles treffen. Beide Wege sind noetig,
   keiner deckt alle Browser ab.

   ACHTUNG Reihenfolge: measuree_master.css setzt die Leiste auf #ccc und wird
   auf den Listenseiten NACH dieser Datei geladen. Dort wiederholt
   measuree_ui.css die Angaben - wer hier etwas aendert, aendert es auch dort. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--orange);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--orange-l);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}


/* Fuellt den Rest des Dialogs unter der Kopfleiste. Kein scrolling="no" am
   Element: Ist das Formular darin hoeher als der Rahmen, muss es scrollen
   koennen. */
dialog iframe {
    display: block;
    width: 100%;
    height: calc(100% - 50px);
    border: none;
}

/* ========================================================== HILFSKLASSEN
   Ersetzen die frueheren style-Attribute im Markup. Bewusst knapp gehalten:
   Was eine Rolle hat, bekommt einen sprechenden Namen; reine Masse stehen als
   kurze Hilfsklassen hier. */

.w100   { width: 100%; }
.w200   { width: 200px; }
.m0     { margin: 0; }
.mt10   { margin-top: 10px; }
.mt20   { margin-top: 20px; }
.mt25   { margin-top: 25px; }
.mb2    { margin-bottom: 2px; }
.mb20   { margin-bottom: 20px; }
.center { text-align: center; }
.hidden { display: none; }

/* Beschriftung mit Kontrollkaestchen davor */
.check_label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}


/* Feld, das nachtraeglich nicht mehr geaendert werden darf. Der Mauszeiger
   weist auf den erklaerenden title hin. */
.field_locked { cursor: help; }

/* ------------------------------------------------------- Hinweiskaesten
   Ein Aussehen fuer alle drei: der Hinweis beim Anlegen eines Benutzers,
   die Passwortpruefung und Fehlermeldungen. Orange Kontur, keine Flaeche -
   sie liegen auf dem Formular, das dieselbe Flaeche traegt, und waeren mit
   Hintergrund nicht zu erkennen. */
.info_box,
#pw-validation-box,
.ok_text,
.error_text {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid var(--orange);
    border-radius: var(--r-card);
}

/* Die Kontur macht den Kasten kenntlich. Farbe traegt nur die Fehlermeldung -
   das Handbuch kennt kein Gruen und loest die Bestaetigung als neutrale Karte
   mit gewoehnlichem Text (.docs/ci/26-bestaetigung.png). Die Marke --ok bleibt
   definiert, sie wird noch von .msg_ok und .btn-send benutzt. */
.error_text { color: var(--error); }
.ok_text    { color: var(--text); }

/* Ohne Kontur: Die Liste darin traegt ihre Aussage schon in den Haken und
   Kreisen jeder Zeile; ein Rahmen daeumt sie nur ein. Masse und Abstaende
   bleiben, damit sie im Formular an derselben Stelle sitzt wie die
   uebrigen Kaesten. */
#pw-validation-box {
    border: none;
    padding: 0;
}

/* '.hidden' allein reicht hier nicht: Die beiden Regeln darueber sprechen den
   Kasten ueber seine ID an und setzen display: block - eine ID gewinnt gegen
   jede Klasse. Ohne diesen Nachtrag war die Pruefliste von Anfang an sichtbar,
   obwohl das Markup sie als versteckt auszeichnet. */
#pw-validation-box.hidden {
    display: none;
}

/* Copyright-Zeile am Seitenende (MEE_FOOTER in include/db.php) */
.mee_footer {
    text-align: center;
    margin-top: 20px;
    color: var(--text-2);
}

/* Hinweis, wenn es nichts anzuzeigen gibt. Bernstein statt der frueheren
   festen Werte (#fff3cd auf #856404) - halbtransparent, damit er in beiden
   Modi zur Flaeche darunter passt. */
.notice_box {
    margin-top: 20px;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    background: rgba(255, 193, 7, .15);
    border: 1px solid rgba(255, 193, 7, .45);
    color: var(--text);
}

/* --- Bausteine der Dialoge, siehe Abschnitt DIALOGE ---
   .82rem ist die Mikrotext-Groesse des Handbuchs. rem statt em: em haengt am
   Elternelement, derselbe Hinweis saehe je nach Umgebung anders gross aus. */
.dialog_hint {
    margin-top: 0;
    font-size: .82rem;
    color: var(--text-2);
}

/* Der Selektor muss zwei Klassen tief sein: measuree_master.css wird spaeter
   geladen und setzt fuer 'input[type="text"], input[type="password"],
   form select' den Rahmen auf 0 - eine Regel fuer die runden Pillen des
   Anmeldeformulars. Mit nur '.dialog_input' verliert diese Regel den
   Gleichstand und das Feld steht ohne Rahmen da. */
.dialog_body .dialog_input {
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 0;
    padding: 10px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.dialog_foot button { padding: 8px 20px; }

/* Zurueckgenommene Schaltflaeche in einer Fussleiste (z.B. "Abbrechen").
   Nach CI ein Ghost-Button: nur Kontur, keine Flaeche - siehe
   .docs/ci/12-btn-ghost.png.

   Zwei Namen, eine Optik: .btn-cancel steht in den Bearbeitungsdialogen des
   Masterportals und im Session-Viewer, .btn-quiet im Dialog "Passwort
   vergessen". Beide bekommen dieselben Werte, damit die Dialoge gleich
   aussehen - siehe app/session_viewer.php, wo diese Regel frueher noch einmal
   fuer sich stand.

   Der :hover-Selektor ist zwei Stufen stark (Klasse + Pseudoklasse) und
   gewinnt damit gegen 'button:hover' der jeweiligen Seite, das sonst die
   Flaeche orange faerbt und den Knopf anhebt. */
.btn-quiet,
.btn-cancel {
    padding: 8px 20px;
    background: none;
    color: var(--text-2);
    border: 1px solid var(--text-mute);
    border-radius: var(--r-pill);
    cursor: pointer;
}

.btn-quiet:hover,
.btn-cancel:hover {
    background: none;
    color: var(--orange);
    border-color: var(--orange);
    transform: none;
}

/* Schaltflaeche ueber die volle Breite (Anmeldeseite) */
.btn-block {
    width: 100%;
    padding: 14px;
}

/* Eigene Sitzung in der Liste des Session-Viewers hervorheben */
.row_me {
    background-color: var(--row-hover);
    border-left: 4px solid var(--cyan);
}

/* Groesse des Session-Viewer-Dialogs (portal_projects.php) - das Aussehen
   kommt aus dem Abschnitt DIALOGE.

   Keine feste Hoehe: Der Rahmen richtet sich nach dem Inhalt des iframes, die
   Hoehe setzt portal_projects.php nach dem Messen. max-height begrenzt ihn
   nach oben, damit eine lange Sitzungsliste nicht ueber den Bildschirm
   hinauslaeuft - ab dort scrollt der Inhalt im iframe selbst. */
#sessionDialog {
    width: 85%;

    /* 1100px stammten aus der Zeit mit fuenf Spalten. Geblieben sind vier -
       Zeit, Benutzer, Projekt und die 26px breite Aktionsspalte -, und die
       standen darin weit auseinandergezogen. 760px reichen dafuer und halten
       die Zeile in einer Breite, die sich noch am Stueck lesen laesst. */
    max-width: 760px;

    /* 90 Prozent der Fensterhoehe: Der Dialog zeigt eine Liste, die
       weiterlaeuft - je mehr Zeilen ohne Bildlauf sichtbar sind, desto besser.
       Der Rest bleibt als Rand stehen. Die Grenze steht gleichlautend in
       portal_projects.php (anpassen), weil sie dort gerechnet werden muss;
       wird sie hier geaendert, gehoert sie dort mitgeaendert. */
    max-height: 90vh;
}

/*
 * DIESELBE HOEHENREGEL WIE DIE LISTE DER PROJEKTUEBERSICHT
 *
 * calc(100vh - 400px) steht wortgleich an #menu in measuree_ui.css. Der Dialog
 * ist damit so hoch wie die Liste dort, und sein Inhalt scrollt in sich, sobald
 * er nicht mehr hineinpasst - genau das Verhalten, das die Uebersichten schon
 * haben.
 *
 * KEINE MESSUNG MEHR. Hier stand eine Hoehe, die portal_projects.php aus dem
 * Inhalt des Rahmens errechnete - ueber postMessage, einen ResizeObserver und
 * zuletzt einen Takt. Fuenf Anlaeufe, und der Rahmen stand trotzdem zu knapp.
 * Ein iframe passt sich seinem Inhalt nun einmal nicht von selbst an; jede
 * Loesung dafuer war eine Kette, die an einer Stelle riss.
 *
 * Der Preis: Bei einer einzigen Sitzung bleibt Platz darunter frei. Wer das
 * nicht will, muesste den Inhalt ohne iframe in den Dialog holen - dann
 * genuegten max-height und overflow: auto, und der Dialog schruempfte von
 * selbst mit.
 *
 * min-height faengt sehr flache Fenster ab: Tabellenkopf, eine Hinweiszeile
 * und der Text darunter brauchen zusammen knapp 230px.
 */
#sessionIframe {
    height: calc(100vh - 400px);
    min-height: 230px;
}

/* Breite des Bestaetigungsdialogs (app/session_viewer.php) */
#confirmDialog {
    max-width: 350px;
}

/* Breite des Dialogs zum Zuruecksetzen des Passworts (index.php) */
#resetDialog {
    width: 350px;
}

/* ---------------------------------------------- Status- und Meldungstexte
   Corporate_Design_MEE_2026.pdf, Kapitel 03, fuehrt Green, Amber und Teal
   ausdruecklich "fuer den Einsatz in der Benutzeroberflaeche" - siehe den
   Kommentar in include/portal.css an derselben Stelle. */

.warn_text  { color: var(--warn); }

/* Meldung mit Rahmen */
.msg_ok,
.msg_warn,
.msg_error {
    padding: 10px 14px;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    background: var(--surface);
}

.msg_ok    { color: var(--ok);    border-color: var(--ok); }
.msg_warn  { color: var(--warn);  border-color: var(--warn); }
.msg_error { color: var(--error);   border-color: var(--error); }

/* Kennzeichnung neben einer Ueberschrift - im Stil der CI-Tags
   (.docs/ci/43-tags.png): Pille, Versalien, Kontur statt Flaeche.
   Bewusst zurueckgenommen: Der Zusatz erlaeutert die Ueberschrift, er soll
   sie nicht ueberstimmen. vertical-align haelt ihn auf der Mittellinie des
   Textes, sonst haengt er an der Schriftlinie der grossen Ueberschrift. */
.meta_tag {
    display: inline-block;
    margin-left: .6em;
    padding: 0 .7em;
    font-family: var(--fb);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.9;
    vertical-align: middle;
    color: var(--text-2);
    border: 1px solid var(--text-2);
    border-radius: var(--r-pill);
}

/* Zeile in einer Liste, wenn der Filter nichts uebriglaesst. */
tr.filter_leer td {
    padding: 18px 10px;
    text-align: center;
    font-style: italic;
    color: var(--text-2);
}

/* Schaltflaeche mit Textbeschriftung auf den Measuree-Seiten - derzeit der
   Verweis zur Anmeldung nach dem Setzen eines Passworts. Die Schriftfarbe
   kommt aus --link, der Linkfarbe fuer Tabellen und Verweise. */
.btn-submit-mee {
    color: var(--link);
}