/* ---- Design-Tokens (ADR-0022) -----------------------------------------
   Die App ist nur dunkel. Flächen, Linien und Akzent stehen hier einmal; die Mud-Palette in
   Theme/AppTheme.cs trägt dieselben Werte, damit Mud-Komponenten und eigene Klassen nicht
   auseinanderlaufen. */
:root {
    color-scheme: dark;
    --leiss-bg: var(--mud-palette-background, #0b0d1a);
    --leiss-surface: var(--mud-palette-surface, #11142a);
    --leiss-surface-2: #161a33;
    --leiss-line: var(--mud-palette-lines-default, #232842);
    --leiss-line-strong: #2f3558;
    --leiss-text: var(--mud-palette-text-primary, #e8eaf2);
    --leiss-text-2: var(--mud-palette-text-secondary, #8d94ab);
    --leiss-accent: var(--mud-palette-primary, #845adf);
    --leiss-accent-soft: rgba(132, 90, 223, .18);
    --leiss-accent-softer: rgba(132, 90, 223, .08);
    --leiss-radius: 14px;
    --leiss-radius-sm: 10px;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--leiss-bg);
    color: var(--leiss-text);
}

/* ---- Sichere Bereiche (Startbildschirm-Modus) -------------------------
   Als App vom Startbildschirm läuft die Seite ohne Browser-Rahmen bis an die
   Gerätekanten. Ohne diese Abstände liegt der Inhalt unter dem Home-Indicator und
   in Querlage unter der Notch. Im Browser und auf Geräten ohne Aussparungen sind
   alle env()-Werte 0, die Regeln ändern dort also nichts.

   Bewusst nur unten und seitlich: den Streifen der Statusleiste reserviert iOS
   selbst, solange kein "black-translucent" gesetzt ist (siehe App.razor). Oben
   einzugreifen hieße, MudBlazors responsive --mud-appbar-height nachzubauen. */
.leiss-main {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.leiss-drawer {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ---- App bar ---------------------------------------------------------- */
/* Ohne Trennlinie zum Inhalt: Kopfzeile, Menü und Dashboard sollen als eine Fläche lesen. */
.leiss-appbar {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.leiss-search .mud-input-root {
    min-width: 320px;
}

.leiss-search .mud-input-outlined-border {
    border-radius: var(--leiss-radius-sm);
    border-color: var(--leiss-line) !important;
}

.leiss-search .mud-input {
    background: var(--leiss-surface);
    border-radius: var(--leiss-radius-sm);
}

.leiss-avatar {
    background: linear-gradient(135deg, #9b6cff, #6a3fd6) !important;
    font-weight: 600;
}

/* ---- Drawer / brand --------------------------------------------------- */
.leiss-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: var(--mud-appbar-height, 64px);
    padding: 0 1.25rem;
}

.leiss-brand-icon {
    color: var(--leiss-accent);
    font-size: 1.9rem !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    filter: drop-shadow(0 0 10px rgba(132, 90, 223, .45));
}

.leiss-brand-text {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: #ffffff;
}

.leiss-nav {
    padding: .25rem .6rem 1rem;
}

.leiss-nav-caption {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--leiss-text-2);
    opacity: .7;
    padding: 1.1rem .75rem .4rem;
}

.leiss-nav .mud-nav-link {
    border-radius: var(--leiss-radius-sm);
    margin: 1px 0;
    padding-top: 7px;
    padding-bottom: 7px;
    font-weight: 500;
    font-size: .9rem;
    color: var(--mud-palette-drawer-text);
    border: 1px solid transparent;
}

.leiss-nav .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon);
}

.leiss-nav .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .04);
}

.leiss-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(132, 90, 223, .28), rgba(132, 90, 223, .12));
    border-color: rgba(132, 90, 223, .35);
    color: #ffffff;
}

.leiss-nav .mud-nav-link.active .mud-nav-link-icon {
    color: #b99cff;
}

/* Eingeklappt bleibt nur die Symbolleiste: Beschriftungen, Abschnittstitel und der
   Markenname fallen weg, die Symbole rücken in die Mitte der schmalen Leiste. MudBlazor
   blendet von sich aus nur die Linktexte aus. */
.mud-drawer--closed.leiss-drawer .leiss-brand {
    justify-content: center;
    padding: 0;
}

.mud-drawer--closed.leiss-drawer .leiss-brand-text,
.mud-drawer--closed.leiss-drawer .leiss-nav-caption,
.mud-drawer--closed.leiss-drawer .leiss-logout-text,
.mud-drawer--closed.leiss-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-text,
.mud-drawer--closed.leiss-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon {
    display: none;
}

.mud-drawer--closed.leiss-drawer .leiss-nav {
    padding-left: 0;
    padding-right: 0;
}

.mud-drawer--closed.leiss-drawer .leiss-nav-logout .mud-icon-root {
    margin-right: 0 !important;
}

/* ---- Page header / breadcrumbs --------------------------------------- */
.leiss-pageheader {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.leiss-breadcrumbs .mud-breadcrumbs {
    padding: 0;
}

/* ---- Cards ------------------------------------------------------------ */
/* Haarlinie statt Schatten: auf dunklem Grund sieht man Schatten kaum, eine Linie schon. Gilt
   auch für jedes MudPaper/MudCard ohne eigene Klasse, damit Verwaltungsseiten mitziehen. */
.leiss-card,
.mud-main-content .mud-paper:not(.mud-popover):not(.mud-alert):not(.mud-table),
.mud-main-content .mud-table {
    background: var(--leiss-surface);
    border: 1px solid var(--leiss-line);
    border-radius: var(--leiss-radius) !important;
    box-shadow: none !important;
}

.leiss-card {
    transition: border-color .2s ease, background-color .2s ease;
}

.leiss-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.leiss-card-link:hover .leiss-card {
    border-color: var(--leiss-line-strong);
    background: var(--leiss-surface-2);
}

.leiss-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: 0 0 auto;
}

/* Dialoge und Menüs liegen außerhalb des Hauptbereichs, brauchen die Haarlinie aber genauso. */
.mud-dialog,
.mud-popover {
    border: 1px solid var(--leiss-line);
    border-radius: var(--leiss-radius) !important;
}

/* ---- DashCard: Kachel mit Kopf (Icon, Titel, Aktion) ------------------ */
.leiss-dashcard {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem 1.1rem 1.1rem;
}

/* wrap: ein Umschalter im Kopf rutscht auf schmalen Kacheln unter den Titel, statt ihn zu quetschen. */
.leiss-dashcard-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}

.leiss-dashcard-titel {
    flex: 1 1 auto;
    min-width: 0;
}

.leiss-dashcard-ueber {
    font-size: .78rem;
    color: var(--leiss-text-2);
    line-height: 1.3;
}

.leiss-dashcard-name {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ohne Inhalt (etwa die Poolstromzeile ohne Warnung) bleibt nur der Kopf stehen. */
.leiss-dashcard-inhalt:empty { display: none; }

.leiss-dashcard-inhalt {
    margin-top: .9rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Die Aktion im Kopf ist kein Link im Link: die ganze Kachel verlinkt schon dorthin. Sie
   sieht nur aus wie ein Knopf, damit man sieht, wohin der Klick führt. */
.leiss-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid var(--leiss-line-strong);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--leiss-text);
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease;
}

.leiss-card-link:hover .leiss-pill,
a.leiss-pill:hover {
    border-color: rgba(132, 90, 223, .6);
    background: var(--leiss-accent-softer);
}

/* ---- Dashboard-Raster -------------------------------------------------- */
.leiss-willkommen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* ---- Chips neben der Begrüßung: Systemstatus und Kopfzeilen-Sensoren ---- */
.leiss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.leiss-chip {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    max-width: 16rem;
    padding: .5rem .9rem .5rem .55rem;
    border: 1px solid var(--leiss-line);
    border-radius: 12px;
    background: var(--leiss-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

a.leiss-chip:hover {
    border-color: var(--leiss-line-strong);
    background: var(--leiss-surface-2);
}

.leiss-chip-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.leiss-chip-wert {
    font-weight: 600;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.leiss-chip-name {
    font-size: .74rem;
    color: var(--leiss-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* FocusOnNavigate setzt den Fokus auf die Überschrift — für Screenreader, nicht als Rahmen. */
.leiss-willkommen h1:focus { outline: none; }

.leiss-willkommen h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.2px;
}

.leiss-willkommen p {
    margin: .15rem 0 0;
    color: var(--leiss-text-2);
}

/* Zwölf Spalten, jede Kachel sagt, wie viele sie braucht. dense füllt Lücken, wenn eine Kachel
   mangels Daten fehlt — sonst bliebe an ihrer Stelle ein Loch in der Reihe. */
.leiss-dash {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 1rem;
}

.leiss-dash > * { grid-column: span 12; min-width: 0; }

/* Halbe Breite erst ab Tabletbreite; darunter steht jede Kachel für sich. */
@media (min-width: 960px) {
    .leiss-dash > .leiss-span-6 { grid-column: span 6; }
}

/* Mehrere Kacheln in einer Zelle (Kinder im Stundenplan, Pool + Poolstrom). */
.leiss-dash-stapel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.leiss-dash-nebeneinander {
    display: grid;
    /* Breiter als das Kompaktraster (20rem) plus Innenabstand, sonst scrollt es in der Kachel. */
    grid-template-columns: repeat(auto-fit, minmax(min(22.5rem, 100%), 1fr));
    gap: 1rem;
}

/* Kleine Zählkacheln: zwei je Reihe innerhalb ihrer Zelle, auf breiten Schirmen vier. */
.leiss-dash-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 1rem;
}

.leiss-abschnitt {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--leiss-text-2);
    margin: 1.5rem 0 .75rem;
}

/* Haarlinien-Liste (Termine auf dem Dashboard). */
.leiss-liste > * + * {
    border-top: 1px solid var(--leiss-line);
}

/* Kennzahlen-Leiste unten in einer Kachel, durch Haarlinien getrennt. */
.leiss-kennzahlen {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--leiss-line);
}

.leiss-kennzahlen > * + * {
    border-left: 1px solid var(--leiss-line);
    padding-left: .9rem;
}

.leiss-kennzahl-wert {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Schmale Kachel: kleinere Kennzahlen, statt dass „10,892.0 kWh" umbricht. */
@container (max-width: 24rem) {
    .leiss-kennzahlen { grid-auto-columns: auto; }
    .leiss-kennzahl-wert { font-size: .92rem; }
    .leiss-kennzahlen > * + * { padding-left: .6rem; }
}

.leiss-kennzahl-name {
    font-size: .75rem;
    color: var(--leiss-text-2);
}

/* Auf der Dashboard-Kachel stehen die Termine luftiger als in der Kalenderliste. */
.leiss-liste > .leiss-kal-listenzeile { padding: .55rem 0; }

/* ---- Energiekachel: Tacho und Stundenbalken --------------------------- */
.leiss-energie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: .25rem;
}

/* margin-inline: auto mittelt den Tacho, sobald die Balken in die nächste Zeile rutschen;
   daneben frisst der wachsende Balkenblock den freien Platz, und der Rand bleibt 0. */
.leiss-tacho {
    position: relative;
    flex: 0 0 10.5rem;
    width: 10.5rem;
    margin-inline: auto;
}

.leiss-tacho > svg { display: block; width: 100%; }

/* Nur der Bogen — das Blitzsymbol in der Mitte ist auch ein SVG-Pfad und bräuchte seine Füllung. */
.leiss-tacho > svg path {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
}

.leiss-tacho-spur { stroke: var(--leiss-surface-2); }

.leiss-tacho-wert {
    stroke: url(#leiss-tacho-verlauf);
    transition: stroke-dasharray .6s ease;
}

.leiss-tacho-mitte {
    position: absolute;
    inset: auto 0 0;
    text-align: center;
    line-height: 1.15;
}

.leiss-tacho-blitz {
    color: #ffffff;
    font-size: 1.1rem !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.leiss-tacho-zahl {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.leiss-tacho-einheit {
    font-size: .85rem;
    color: var(--leiss-text-2);
    margin-left: .15rem;
}

.leiss-balken {
    flex: 1 1 9rem;
    min-width: 9rem;
}

.leiss-balken-flaeche {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 2px;
    height: 5.5rem;
}

.leiss-balken-stunde {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.leiss-balken-stunde span {
    display: block;
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, var(--leiss-accent), var(--mud-palette-success));
    opacity: .8;
}

.leiss-balken-jetzt span { opacity: 1; box-shadow: 0 0 8px rgba(38, 191, 148, .5); }

.leiss-balken-spaeter span { background: var(--leiss-surface-2); opacity: 1; }

.leiss-balken-achse {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: .3rem;
    font-size: .68rem;
    color: var(--leiss-text-2);
    font-variant-numeric: tabular-nums;
}

/* ---- Wetterkachel ------------------------------------------------------ */
/* Umschalter im Pill-Stil des Entwurfs: Haarlinie außen, die gewählte Stufe violett gefüllt. */
.leiss-umschalter.mud-toggle-group {
    border: 1px solid var(--leiss-line-strong);
    border-radius: 8px;
    overflow: hidden;
}

.leiss-umschalter .mud-toggle-item {
    color: var(--leiss-text-2) !important;
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    text-transform: none;
    border: 0 !important;
    border-radius: 0 !important;
}

.leiss-umschalter .mud-toggle-item + .mud-toggle-item {
    border-left: 1px solid var(--leiss-line-strong) !important;
}

.leiss-umschalter .mud-toggle-item-selected {
    background: var(--leiss-accent-soft) !important;
    color: #ffffff !important;
}

/* In der Kachel knapper als auf der Wetterseite: nur Uhrzeit, Symbol, Temperatur. */
.leiss-stunden-kompakt .leiss-stunde {
    width: 48px;
    padding: .35rem .15rem;
}

.leiss-wetter-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem 1rem;
}

.leiss-wetter-details > * {
    padding-left: .75rem;
    border-left: 1px solid var(--leiss-line);
}

.leiss-wetter-jetzt {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.leiss-wetter-jetzt .mud-icon-root { font-size: 3rem !important; width: 3rem; height: 3rem; }

.leiss-wetter-temp {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Die Folgetage als kleine Kästchen: gleich breit, damit die Temperaturen untereinander
   vergleichbar bleiben. */
.leiss-wetter-tage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.1rem, 1fr));
    gap: .4rem;
    margin-top: auto;
}

.leiss-wetter-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem .25rem;
    border: 1px solid var(--leiss-line);
    border-radius: var(--leiss-radius-sm);
    background: rgba(255, 255, 255, .015);
}

.leiss-wetter-spanne {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Kachelbild (Kamerabild am Pool) ----------------------------------- */
.leiss-dashcard-bild {
    position: relative;
    height: 8.5rem;
    margin: -1rem -1.1rem .9rem;
    border-radius: var(--leiss-radius) var(--leiss-radius) 0 0;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

/* Oberhalb der Mitte ausgerichtet: der Verlauf unten deckt ohnehin gut die Hälfte ab, bei
   zentriertem Ausschnitt blieb vom Motiv nur der untere Teil sichtbar. */
.leiss-dashcard-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.leiss-dashcard-bildtext {
    position: absolute;
    right: .6rem;
    bottom: .45rem;
    z-index: 1;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: rgba(11, 13, 26, .6);
    font-size: .7rem;
    color: var(--leiss-text-2);
}

/* Verlauf in die Kachelfläche, damit das Bild nicht mit harter Kante endet. */
.leiss-dashcard-bild::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(to bottom, transparent, var(--leiss-surface));
}

/* ---- Sollwert-Balken auf der Poolkachel -------------------------------- */
.leiss-sollbalken {
    position: relative;
    height: 5px;
    margin: .45rem .5rem .3rem 0;
    border-radius: 3px;
    background: var(--leiss-surface-2);
}

.leiss-sollbalken-band {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mud-palette-secondary), var(--mud-palette-success));
    opacity: .75;
}

.leiss-sollbalken-wert {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--leiss-surface);
    background: #ffffff;
    transform: translate(-50%, -50%);
}

.leiss-sollbalken-daneben { background: var(--mud-palette-warning); }

/* ---- Formular-Grundelemente der statisch gerenderten Seiten ------------
   Login und Passwort ändern laufen ohne Interaktivität (App.razor), MudTextField ginge dort
   nicht — daher schlichte Eingaben, die zum Theme passen. */
.leiss-feld {
    width: 100%;
    padding: .65rem .8rem;
    border-radius: var(--leiss-radius-sm);
    border: 1px solid var(--leiss-line-strong);
    background: var(--leiss-bg);
    color: inherit;
    font: inherit;
}

.leiss-feld:focus {
    outline: none;
    border-color: var(--leiss-accent);
    box-shadow: 0 0 0 3px var(--leiss-accent-soft);
}

.leiss-knopf {
    padding: .7rem 1.5rem;
    border: 0;
    border-radius: var(--leiss-radius-sm);
    cursor: pointer;
    background: var(--leiss-accent);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
}

.leiss-knopf:hover { filter: brightness(1.1); }

/* ---- Zufallsbild aus Immich ------------------------------------------- */
/* Absolut im Kasten statt im Fluss: so bestimmt das Bild die Kartenhöhe nicht mit, sondern
   füllt, was die Kalenderkarte in der Nachbarspalte vorgibt. Ohne das setzte jedes
   Seitenverhältnis die Reihe neu, und Hoch- und Querformat ließen die Kacheln springen. */
/* Großes Bild links, die nächsten drei als Streifen rechts; in schmalen Kacheln darunter. */
.leiss-fotos {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: .75rem;
}

.leiss-foto-streifen {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: .6rem;
}

/* Über die volle Breite trüge das Bild bei 220px Höhe links und rechts nur Rand. */
@container (min-width: 50rem) {
    .leiss-foto { min-height: 26rem; }
}

@container (max-width: 30rem) {
    .leiss-fotos { grid-template-columns: minmax(0, 1fr); }
    .leiss-foto-streifen { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 4.5rem; }
}

/* Die Vorschau darf beschneiden, anders als das große Bild: sie ist ein Wegweiser auf das
   nächste Bild, nicht das Bild selbst — und gleich große Kästchen lesen sich als Reihe. */
.leiss-foto-klein {
    position: relative;
    min-height: 3.5rem;
    padding: 0;
    border: 1px solid var(--leiss-line);
    border-radius: var(--leiss-radius-sm);
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.leiss-foto-klein:hover {
    border-color: var(--leiss-accent);
    transform: translateY(-1px);
}

.leiss-foto-klein img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leiss-foto {
    display: block;
    position: relative;
    min-height: 220px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

/* contain, nicht cover: die Kachelhöhe kommt von der Nachbarspalte und passt zu keinem
   Seitenverhältnis: mit cover schnitt sie je nach Fenster oben und unten oder links und rechts
   etwas weg — bei Hochformaten regelmäßig die Köpfe. Das Bild steht dafür jetzt mit Rand im
   Kasten; der Rand ist der Preis dafür, dass immer das ganze Bild zu sehen ist. */
.leiss-foto img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- Stundenreihe der Wettervorhersage -------------------------------- */
/* Waagerecht scrollen statt umbrechen: 24 Stunden nebeneinander sind eine Zeitachse,
   und eine Zeitachse, die in der zweiten Reihe weitergeht, liest sich falsch. */
.leiss-stunden {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.leiss-stunde {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 64px;
    padding: .5rem .25rem;
    border-radius: 10px;
}

.leiss-stunde-jetzt {
    background: var(--mud-palette-action-default-hover);
}

/* ---- Glocke: Hinweise aus dem Systemstatus ----------------------------- */
.leiss-glocke-liste { min-width: 18rem; max-width: 24rem; }

.leiss-glocke-leer {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    line-height: 1.35;
}

.leiss-glocke-eintrag {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    white-space: normal;
}

.leiss-glocke-bereich {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--mud-palette-warning);
}

.leiss-glocke-zeit {
    font-size: .74rem;
    color: var(--leiss-text-2);
}

/* ---- Logout item inside profile menu --------------------------------- */
.leiss-logout-form {
    margin: 0;
}

.leiss-logout-btn {
    display: flex;
    align-items: center;
    /* MudNavMenu zentriert Knöpfe in sich; ohne das stünde Abmelden eingerückt. */
    justify-content: flex-start;
    width: 100%;
    padding: .6rem 1rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.leiss-logout-btn:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Im Drawer muss der Knopf wie ein MudNavLink aussehen, sonst fällt die einzige Zeile
   ohne Blazor-Routing optisch aus der Navigation heraus. */
.leiss-nav-logout {
    border-radius: var(--leiss-radius-sm);
    margin: 1px 0;
    width: 100%;
    padding: 7px 16px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mud-palette-drawer-text);
}

.leiss-nav-logout .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

.leiss-nav-logout:hover {
    background-color: rgba(255, 255, 255, .04);
}

/* ---- Blazor error boundary ------------------------------------------- */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten.";
}

.validation-message {
    color: #e6533c;
}

/* Kalender: Monatsraster von Hand statt einer Fremdkomponente. Sechs feste Zeilen, damit das
   Layout beim Blättern nicht springt — ein Monat, der über sechs Wochen läuft, braucht sie,
   und einer über fünf soll deswegen nicht anders hoch sein. */
.leiss-kal-kopf {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 0 4px 6px;
}

.leiss-kal-kopfzelle {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.leiss-kal-raster {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(6.5rem, auto);
    gap: 4px;
}

.leiss-kal-zelle {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 4px;
    overflow: hidden;
    min-width: 0;
}

/* Tage des Vor- und Folgemonats stehen mit, gehören aber nicht in den Vordergrund. */
.leiss-kal-fremd { opacity: .45; }

.leiss-kal-heute {
    border-color: var(--mud-palette-primary);
    background: rgba(132, 90, 223, .06);
}

.leiss-kal-tagzahl {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.leiss-kal-heute .leiss-kal-tagzahl { color: var(--mud-palette-primary); }

.leiss-kal-termin {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leiss-kal-punkt {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.leiss-kal-zeit {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.leiss-kal-titel { overflow: hidden; text-overflow: ellipsis; }

.leiss-kal-listentag {
    font-weight: 600;
    margin: 1rem 0 .35rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.leiss-kal-listentag:first-child { margin-top: 0; }

.leiss-kal-heute-text { color: var(--mud-palette-primary); }

.leiss-kal-listenzeile {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .25rem 0;
}

.leiss-kal-listenzeit {
    flex: 0 0 7.5rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
}

/* Auf dem Dashboard steht in dieser Spalte ein Datum statt einer Uhrzeit — und bei einem
   mehrtägigen Termin eine Spanne wie „30. Juli – 2. August", für die die Uhrzeitbreite nicht
   reicht. */
.leiss-kal-listendatum { flex-basis: 8.75rem; }

.leiss-kal-listentitel { flex: 1 1 auto; min-width: 0; }

/* Der Kalender rechts in der Zeile ersetzt auf dem Dashboard die Legende: der Name steht beim
   Termin, statt dass man die Punktfarbe darunter nachschlagen muss. In schmalen Kacheln fällt
   er weg — dort bleibt der Punkt, und Titel und Datum brauchen den Platz. */
.leiss-kal-quelle {
    flex: 0 1 9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: .78rem;
    color: var(--leiss-text-2);
}

@container (max-width: 26rem) {
    .leiss-kal-quelle { display: none; }
}

.leiss-kal-ort {
    display: block;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Legende zu den Punktfarben. Umbricht statt zu scrollen: wie viele Kalender es sind, steht
   nicht fest, und eine Legende, die seitlich verschwindet, erklärt nichts mehr. */
.leiss-kal-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .9rem;
}

.leiss-kal-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Ein langer Kalendername darf die Legende nicht auf eine Zeile pro Kalender aufblähen. */
.leiss-kal-legende-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

/* Unter 600px wird aus dem Raster eine sehr enge Sache — Uhrzeiten entfallen dort. */
@media (max-width: 600px) {
    .leiss-kal-raster { grid-auto-rows: minmax(4.5rem, auto); }
    .leiss-kal-zeit { display: none; }
    .leiss-kal-listenzeit { flex-basis: 5.5rem; }
    /* Muss mit, sonst zöge die Regel darüber die Datumsspalte auf die Uhrzeitbreite. */
    .leiss-kal-listendatum { flex-basis: 6.5rem; }
}

/* ---- Stundenplan ------------------------------------------------------------------------ */

/* Das Wochenraster scrollt seitlich, statt sich zu quetschen: fünf Fächer nebeneinander
   passen auf kein Telefon, und ein umgebrochenes „Mathematik" liest niemand mehr. */
.leiss-sp-scroll { overflow-x: auto; }

.leiss-sp-raster {
    display: grid;
    grid-template-columns: 7.5rem repeat(5, minmax(6.5rem, 1fr));
    gap: 4px;
    min-width: 40rem;
}

.leiss-sp-kopf {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 0 4px 6px;
}

.leiss-sp-kopf.leiss-sp-heute { color: var(--mud-palette-primary); }

/* Auf breiten Bildschirmen der ganze Wochentag, auf schmalen das Kürzel. */
.leiss-sp-tagkurz { display: none; }

.leiss-sp-zeit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.leiss-sp-nummer {
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.leiss-sp-uhr {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.leiss-sp-zelle {
    display: flex;
    align-items: center;
    min-height: 3rem;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Eine Freistunde ist eine Lücke, kein Fach ohne Namen — gestrichelt statt leer. */
.leiss-sp-zelle.leiss-sp-frei { border-style: dashed; }

.leiss-sp-zelle.leiss-sp-heute {
    border-color: var(--mud-palette-primary);
    background: rgba(132, 90, 223, .06);
}

/* Die laufende Stunde: als Zeile in der Zeitspalte, als Zelle im Schnitt mit heute. */
.leiss-sp-zeit.leiss-sp-jetzt { background: rgba(132, 90, 223, .12); }

.leiss-sp-zeit.leiss-sp-jetzt .leiss-sp-nummer,
.leiss-sp-zeit.leiss-sp-jetzt .leiss-sp-uhr { color: var(--mud-palette-primary); }

.leiss-sp-zelle.leiss-sp-heute.leiss-sp-jetzt {
    background: rgba(132, 90, 223, .18);
    font-weight: 600;
}

/* Die Kompaktvariante fürs Dashboard: Haarlinien statt einzelner Kacheln, Anfangszeit statt
   Spanne, Kürzel statt Wochentag. Die letzte Spalte und die letzte Zeile geben ihre Linie ab,
   sonst läge sie doppelt auf dem Rahmen — das Raster hat immer sechs Spalten. */
.leiss-sp-raster.leiss-sp-kompakt {
    grid-template-columns: 3.4rem repeat(5, minmax(0, 1fr));
    gap: 0;
    min-width: 20rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.leiss-sp-kompakt .leiss-sp-kopf,
.leiss-sp-kompakt .leiss-sp-zeit,
.leiss-sp-kompakt .leiss-sp-zelle {
    border: 0 solid var(--mud-palette-lines-default);
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-radius: 0;
}

.leiss-sp-kompakt > :nth-child(6n) { border-right-width: 0; }

.leiss-sp-kompakt > :nth-last-child(-n + 6) { border-bottom-width: 0; }

.leiss-sp-kompakt .leiss-sp-kopf {
    padding: .3rem .25rem;
    font-size: .7rem;
}

.leiss-sp-kompakt .leiss-sp-zeit {
    padding: .25rem .4rem;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.leiss-sp-kompakt .leiss-sp-zelle {
    display: block;
    min-height: 1.75rem;
    padding: .3rem .45rem;
    font-size: .75rem;
    line-height: 1.35;
    white-space: nowrap;
}

/* Eine Freistunde ist im Kompaktraster einfach eine leere Zelle — gestrichelte Kanten
   machten aus einem ruhigen Raster ein unruhiges. */
.leiss-sp-kompakt .leiss-sp-zelle.leiss-sp-frei { border-style: solid; }

.leiss-sp-kompakt .leiss-sp-zelle.leiss-sp-heute {
    border-color: var(--mud-palette-lines-default);
    background: rgba(132, 90, 223, .06);
}

.leiss-sp-kompakt .leiss-sp-zeit.leiss-sp-jetzt {
    background: rgba(132, 90, 223, .1);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.leiss-sp-kompakt .leiss-sp-zelle.leiss-sp-heute.leiss-sp-jetzt {
    background: rgba(132, 90, 223, .16);
    color: var(--mud-palette-primary);
}

/* Der Editor: eine Tabelle aus Eingabefeldern, Zeit- und Nummernspalte schmal. */
.leiss-sp-editor {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px 6px;
}

.leiss-sp-editor th {
    padding: 0 4px;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.leiss-sp-editor td {
    min-width: 7rem;
    vertical-align: top;
}

.leiss-sp-editor .leiss-sp-editor-nr {
    min-width: 2.5rem;
    padding-top: 14px;
    text-align: center;
    font-weight: 600;
}

.leiss-sp-editor .leiss-sp-editor-zeit { min-width: 7.5rem; }

@media (max-width: 600px) {
    .leiss-sp-raster {
        grid-template-columns: 5.5rem repeat(5, minmax(5.5rem, 1fr));
        min-width: 33rem;
    }
    .leiss-sp-taglang { display: none; }
    .leiss-sp-tagkurz { display: inline; }
}

/* ---- Energie: Kostenanalyse -------------------------------------------- */
/* Acht Zeiträume passen am Telefon nicht in eine Zeile. Seitlich scrollen statt umbrechen:
   ein umbrochener Pill-Umschalter verliert seine Haarlinie an der Bruchstelle. */
.leiss-kosten-zeitraum {
    max-width: 100%;
    overflow-x: auto;
}

.leiss-kosten-zeitraum .mud-toggle-item { white-space: nowrap; }

/* Anteilsbalken: ein Segment je Zählstelle, die Breite ist ihr Anteil an den Kosten. Die
   Fugen in Flächenfarbe trennen Nachbarn, die sich farblich nahekommen. */
.leiss-anteile {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--leiss-surface-2);
}

.leiss-anteil {
    flex-basis: 0;
    min-width: 4px;
}

.leiss-punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: .5rem;
    border-radius: 50%;
    vertical-align: baseline;
}

.leiss-tabelle-scroll { overflow-x: auto; }

.leiss-kosten-tabelle .leiss-zahl {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.leiss-kosten-tabelle tfoot td {
    border-top: 1px solid var(--leiss-line-strong);
}

.leiss-kosten-tabelle .leiss-kosten-zwischensumme td {
    color: var(--leiss-text-2);
}

.leiss-kosten-tabelle .leiss-kosten-summe td {
    font-weight: 600;
}

.leiss-klein { font-size: .72rem; }