/* Der meteoCORE-Kopf auf der Statusseite.
   ===================================================================

   Diese Datei wird unverändert ausgeliefert (theme/bauen.py kopiert sie
   nach web/). Die Bausteine daneben -- .seitenkopf, .drawer, .kicker,
   .icon-btn, .umschalter -- kommen aus der veröffentlichten
   meteocore.css, die derselbe Lauf daneben legt.

   Warum die ganze Paketdatei und nicht nur ein Auszug: Am 2026-09-19
   gemessen, dass sich ihre 144 Klassennamen mit den 180 Klassen im
   Gatus-DOM an KEINER Stelle überschneiden, und dass sie weder `html`
   noch `body` noch `*` anfasst. Sie kann hier also nichts umwerfen --
   ein Auszug wäre eine Kopie, die beim nächsten Paketstand veraltet.

   Der custom-css-Block in config/config.yaml bleibt daneben bestehen:
   Er trägt die Werte in Gatus' eigene Oberfläche (shadcn-HSL-Tripel,
   Schriften, Grund). Hier steht nur der Kopf.
   =================================================================== */

/* ALLES HIER HÄNGT AN .mc-kopf-aktiv -- der Klasse, die kopf.js beim
   Start setzt. Läuft das Skript nicht, bleibt die Seite so, wie Gatus sie
   ausliefert: mit eigenem Kopf, eigener Fußzeile und der Bedienleiste an
   ihrem Platz. Eine Seite, die ohne Skript kopflos dasteht, wäre auf einer
   Statusseite der schlechteste Ausfall. */

/* Gatus' eigene Kopfzeile trägt Logo und Titel -- beides steht jetzt in
   unserem Kopf darüber. Ausgeblendet und nicht entfernt: Was wir nicht
   anfassen, kann auch nicht brechen.

   :not(.mc-kopf) ist nicht kosmetisch: Unser Kopf IST ein <header>, und
   ohne die Einschränkung blendet diese Regel ihn gleich mit aus -- am
   2026-09-19 genau so passiert, die Seite stand danach ganz ohne Kopf da. */
.mc-kopf-aktiv header:not(.mc-kopf) {
    display: none;
}

/* Dasselbe für die Fußzeile ("Powered by Gatus"). Unsere steht darunter
   und führt dieselben vier Ziele wie überall sonst. Apache-2.0 verlangt
   keine Nennung in der Oberfläche; die Lizenz selbst bleibt unberührt. */
.mc-kopf-aktiv footer {
    display: none;
}

/* Gatus' Bedienleiste (#settings) steht seit dem 2026-09-19 im Fuß der
   Schublade, neben der Darstellung -- kopf.js hängt sie dorthin um. Sie
   trägt die Aktualisierungsspanne, und die stellt der Betrachter ein.

   theme.css hatte sie oben rechts festgenagelt (fixed, top/right) -- genau
   dort, wo jetzt der Burger sitzt; ihr Sonnensymbol fing dessen Klicks ab.
   Hier wird sie aus dieser Verankerung gelöst und steht wieder im Fluss.

   Der Hell/Dunkel-Knopf darin entfällt: Die Wahl steht daneben, mit drei
   Stellungen statt zwei. */
.mc-kopf-aktiv .mc-fuss__zeile #settings {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
}
.mc-kopf-aktiv #settings button:has(svg[class*="lucide-sun"], svg[class*="lucide-moon"]) {
    display: none;
}

/* Darstellung und Aktualisierungsspanne in einer Zeile (E1). */
.mc-fuss__zeile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Die Auswahlliste der Spanne hängt am Knopf und öffnet nach unten -- im
   Fuß der Schublade ist dort nichts mehr. */
.mc-kopf-aktiv .mc-fuss__zeile #settings [role="menu"],
.mc-kopf-aktiv .mc-fuss__zeile #settings ul,
.mc-kopf-aktiv .mc-fuss__zeile #settings [class*="absolute"] {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: var(--space-1) !important;
}

/* Der Satzspiegel ist der von Gatus' Inhalt (max-w-7xl, 80rem), damit
   das Logo mit dem Dashboard darunter fluchtet -- nicht die 1200 px der
   Website: Hier gibt eine fremde Oberfläche die Kante vor. */
.mc-kopf {
    --kopf-breite: 80rem;
    position: relative;
    z-index: 20;
}

/* Die Schublade liegt über allem, was Gatus stapelt. */
.mc-menue {
    --drawer-z: 60;
}
.mc-schleier {
    --drawer-schleier-z: 59;
}

/* Zwei Rubriken in der Schublade. Der Baustein führt Eintrag und Kicker,
   nicht die Gliederung dazwischen. */
.mc-rubrik {
    display: flex;
    flex-direction: column;
    gap: var(--space-hair);
}
.mc-rubrik + .mc-rubrik {
    margin-top: var(--space-5);
}
.mc-rubrik .kicker {
    margin-bottom: var(--space-2);
}

/* Die Fußzeile, wie auf den Landing-Seiten und den Rechtsseiten: Mono,
   tertiär, zentriert, ohne Trennzeichen -- der Abstand trennt. */
.mc-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-5) var(--space-5) var(--space-7);
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-tertiary);
    text-align: center;
}
.mc-fuss a {
    color: var(--text-tertiary);
    text-decoration: none;
}
.mc-fuss a:hover {
    color: var(--text-secondary);
}

/* Das Abschlussband am Seitenende, wie auf den Rechtsseiten: derselbe
   Baustein, dieselbe Höhe.

   "Am Seitenende" ist dabei die eigentliche Arbeit: Kopf, Fußzeile und
   Band hängen am <body>, Gatus' Oberfläche dazwischen in #app. Ohne die
   beiden Zeilen darunter stapelt sich alles nur, und auf einer kurzen
   Seite -- und die Statusseite IST kurz, wenn alles läuft -- schwebte das
   Band mitten im Bild statt unten. */
.mc-kopf-aktiv body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.mc-kopf-aktiv body > #app {
    flex: 1 0 auto;
}

.mc-band {
    --spektrumleiste-hoehe: 8mm;
}

/* Im Druck bleibt das Logo, die Bedienung geht (E14). */
@media print {
    .mc-kopf .icon-btn,
    .mc-menue,
    .mc-schleier {
        display: none;
    }
}