/* ==========================================================================
   DIE EINE STILDATEI DER APP

   Sie bindet drei Blaetter in der Reihenfolge ein, die ueber Gewinnen und
   Verlieren entscheidet:

     1. baukasten.css   die Werte (erzeugt aus dem Theme) und die
                        Schichtreihenfolge
     2. l24-v2.css      der Altbestand, in die SCHWAECHSTE Schicht gelegt
     3. bauteile.css    HHVs Bauteile auf den Klassennamen der App

   WARUM DER ALTBESTAND PER @import IN EINE SCHICHT WANDERT UND NICHT
   UMGESCHRIEBEN WIRD: `l24-v2.css` bleibt damit byteweise unveraendert. Der
   ganze Umbau haengt an dieser einen Datei hier, und wer ihn zurueckdrehen
   will, tauscht in den Seiten einen Dateinamen. Haette man stattdessen 1.969
   Zeilen in `@layer altbestand { … }` eingeschlossen, waere jede spaetere
   Zusammenfuehrung mit einer parallel arbeitenden Sitzung ein Konflikt ueber
   die ganze Datei.

   WAS DAS FUER EINE REGEL BEDEUTET, DIE MAN NEU SCHREIBT: Sie gehoert nach
   `bauteile.css`. Eine neue Zeile in `l24-v2.css` landet in der schwaechsten
   Schicht und wird still ueberstimmt.
   ========================================================================== */

@import url("baukasten.css?h=7b0917cd1d89");
@import url("l24-v2.css?h=d7ee9faac9b8") layer(altbestand);
@import url("bauteile.css?h=39bd66c87eb7");
/* Board v24.28 (25.10.2026): die Bausteine im Board-Aussehen, ungeschichtet, also staerker als alles darueber. */
@import url("platin-bruecke.css?h=902b35fec53b");
/* Token-Satz und Feder (ClosingHub-Audit, 31.10.2026): zuletzt, damit die Feder an den vorhandenen Bausteinen greift. */
@import url("l24-tokens.css?h=aef390e34b6b");
@import url("l24-look.css?h=82f6c614591d");
@import url("l24-stil.css?h=938e5bd35eda");
@import url("l24-ruhe.css?h=7647acabb92b");

/* ── Am Handy im App-Rahmen (27.10.2026): EINE Kopfzeile ───────────────────
   Den Titel zeigt die App, das Neu laden auch (rechts oben im App-Kopf).
   Unterzeile links, die uebrigen Knoepfe in EINER grauen Kapsel rechts. */
@media (max-width: 700px) {
  html.im-rahmen .l24-page-hd { flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; margin: 6px 0 12px !important; }
  html.im-rahmen .l24-page-hd h1 { display: none !important; }
  html.im-rahmen .l24-page-hd > div:first-child { flex: 1 1 auto; min-width: 0; }
  html.im-rahmen .l24-page-hd .spacer { display: none !important; }
  html.im-rahmen .l24-page-hd .hd-actions {
    flex: none; flex-wrap: nowrap !important; gap: 2px !important; margin-left: auto; align-items: center;
    padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(30, 34, 40, .06); box-shadow: inset 0 1px 2px rgba(20, 24, 32, .07);
  }
  html.im-rahmen .l24-page-hd .hd-actions .l24-btn {
    min-height: 36px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important;
    background: transparent !important; color: #15171B !important; border: 0 !important; box-shadow: none !important;
  }
  html.im-rahmen .l24-page-hd .hd-actions .l24-btn:disabled { opacity: .45; }
  html.im-rahmen :is(.l24-page-hd .hd-actions, .skopf .aktionen) :is(#refreshBtn, #wsReload, #neuBtn, #neuLaden, #vfNeu) { display: none !important; }
  html.im-rahmen .l24-page-hd .hd-actions { width: auto !important; flex: 0 1 auto !important; }
  html.im-rahmen .l24-page-hd .hd-actions .l24-btn { flex: none !important; }
  html.im-rahmen .l24-page-hd .hd-actions > .l24-muted { display: none !important; }
  html.im-rahmen .l24-page-hd .hd-actions:not(:has(> :not(#refreshBtn, #wsReload, #neuBtn, #neuLaden, #vfNeu, .l24-muted))) { display: none !important; }
  html.im-rahmen .l24-page-hd .sub:empty { display: none !important; }
  html.im-rahmen .l24-page-hd:not(:has(.sub:not(:empty))):not(:has(.hd-actions > :not(#refreshBtn, #wsReload, #neuBtn, #neuLaden, #vfNeu, .l24-muted))) { display: none !important; }
  /* Eingebettet (?embed=1) blendet l24-v2.css alles ausser den Knoepfen aus;
     bleibt davon nichts, faellt der ganze Kopf weg statt einer leeren Zeile. */
  body.l24-eingebettet .l24-page-hd:not(:has(.hd-actions > :not(#refreshBtn, #wsReload, #neuBtn, #neuLaden, #vfNeu, .l24-muted))) { display: none !important; }
  /* Der Umschalter Kleinanzeigen | Plan: in der App ist Kleinanzeigen ein eigener Reiter. */
  html.im-rahmen .kp-umschalter { display: none !important; }
  /* Die Unternavigation System brauchen wir hier nicht: jede Seite hat unter Mehr ihre Zeile. */
  html.im-rahmen body.sy .sy-unter { display: none !important; }
}

/* Hat die App die Knoepfe in ihr ⋯ genommen (l24-mobil.js), faellt der Kopf hier weg. */
html.knoepfe-oben :is(.l24-page-hd, .skopf) { display: none !important; }

/* Am Handy im App-Rahmen: Hauptknopf blau wie in der App, nie Schwarz (Ebanks-Audit). */
@media (max-width: 700px) {
  html.im-rahmen :is(.knopf.prim, .l24-btn.primary, .l24-btn.dark) {
    background: var(--l24-akzent, #063971) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--l24-akzent, #063971) 25%, transparent), 0 6px 16px color-mix(in srgb, var(--l24-akzent, #063971) 22%, transparent) !important;
  }
}
@media (max-width: 700px) {
  html.im-rahmen :not(.hd-actions) > .l24-btn:not(.primary):not(.dark):not(.danger):not(.ico):not(.l24-tab) {
    background: #fff !important; border: 1px solid rgba(19, 32, 59, .18) !important;
    color: var(--l24-akzent-tief, #04294F) !important; box-shadow: 0 1px 2px rgba(20, 33, 61, .06) !important;
  }
}