@charset "UTF-8";
/* ============================================================
   Mail-Checker – Bereiche hinter einer Anmeldung

   Gilt für das Verwaltungszentrum und das Kundenkonto. Ergänzt
   style.css: Die Farbwerte und Grundformen kommen von dort,
   hier stehen nur Bausteine, die es auf den öffentlichen Seiten
   nicht gibt – Kennzahlkacheln, Tabellen, Formulare, Diagramme.
   ============================================================ */

/* --- Kopfbereich ------------------------------------------- */

.marke-zusatz {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--cyan-dunkel);
    background: var(--cyan-flaeche);
    border-radius: 999px;
    padding: .1rem .55rem;
    margin-left: .2rem;
}

.angemeldet-als {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verwaltung main { padding: 1.5rem 0 2.5rem; }

.fuss-schmal { padding: 1.2rem 0; }

/* --- Kennzahlkacheln --------------------------------------- */

.kachel-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
    margin: 0 0 1.2rem;
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-klein);
    padding: 1rem 1.1rem;
}

.kachel-zahl {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.kachel-titel {
    font-size: .82rem;
    color: var(--text-leise);
}

/* Eine Kachel, die Aufmerksamkeit verdient – etwa
   fehlgeschlagene Auswertungen, solange es welche gibt. */
.kachel-warnung {
    border-color: var(--rot);
    border-left-width: 4px;
}

.kachel-warnung .kachel-zahl { color: var(--rot); }

/* --- Aufteilung in zwei Spalten ---------------------------- */

.spalten-zwei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* --- Tabellen ---------------------------------------------- */

/* Breite Tabellen rollen in ihrem eigenen Rahmen, damit die
   Seite selbst nie seitlich rollen muss. */
.tabelle-rahmen {
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.tabelle-breit { min-width: 760px; }

.tabelle th,
.tabelle td {
    text-align: left;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}

.tabelle thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-leise);
    background: var(--flaeche-2);
    white-space: nowrap;
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle tbody tr:hover { background: var(--flaeche-2); }

.tabelle code {
    font-size: .85em;
    word-break: break-all;
}

.rechts { text-align: right; }

/* --- Statuskennzeichnung ----------------------------------- */

.marke-status {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .12rem .6rem;
    white-space: nowrap;
}

.marke-grau  { color: var(--text-leise);  background: var(--flaeche-2); }
.marke-blau  { color: var(--cyan-dunkel); background: var(--cyan-flaeche); }
.marke-gruen { color: var(--gruen);       background: var(--gruen-flaeche); }
.marke-rot   { color: var(--rot);         background: var(--rot-flaeche); }

/* --- Formulare --------------------------------------------- */

.formular { max-width: 380px; }

.feld {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0 0 .9rem;
}

.feld label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-leise);
}

.feld input,
.feld select {
    font-family: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    padding: .55rem .7rem;
    min-width: 0;
}

.feld input:focus-visible,
.feld select:focus-visible {
    border-color: var(--cyan);
    outline: 2px solid var(--cyan);
    outline-offset: 1px;
}

.filter-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin: 0 0 1rem;
}

.filter-leiste .feld { margin: 0; }

.anmelde-karte { margin-top: 2.5rem; }

/* --- Meldungen --------------------------------------------- */

.meldung {
    border-radius: var(--radius-klein);
    padding: .65rem .85rem;
    margin: 0 0 1rem;
    font-size: .9rem;
}

.meldung-fehler {
    color: var(--rot);
    background: var(--rot-flaeche);
    border-left: 3px solid var(--rot);
}

.meldung-erfolg {
    color: var(--gruen);
    background: var(--gruen-flaeche);
    border-left: 3px solid var(--gruen);
}

/* --- Seitenwahl -------------------------------------------- */

.seitenwahl {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1rem 0;
}

/* --- Diagramme --------------------------------------------- */

/* Serverseitig gezeichnetes SVG. preserveAspectRatio ist im
   Markup auf "none" gesetzt, das Bild darf sich also in die
   Breite ziehen – bei Balken stört das nicht. */
.diagramm {
    display: block;
    width: 100%;
    height: 150px;
    margin: .6rem 0 .4rem;
}

.diagramm-linie {
    stroke: var(--rand-stark);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.diagramm-balken {
    fill: var(--cyan-dunkel);
    transition: fill .15s ease;
}

.diagramm-balken:hover { fill: var(--cyan-hell); }

/* --- Aufklappbare Modulergebnisse -------------------------- */

.modul {
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    margin: 0 0 .5rem;
}

.modul > summary {
    cursor: pointer;
    padding: .5rem .8rem;
    font-weight: 600;
    font-size: .9rem;
}

.modul > summary:hover { background: var(--flaeche-2); }

.modul .codeblock {
    margin: 0;
    border-radius: 0 0 var(--radius-klein) var(--radius-klein);
    max-height: 420px;
    overflow: auto;
}

/* --- Kundenkonto ------------------------------------------- */

.konto-kopf { margin: 0 0 1.2rem; }
.konto-kopf h1 { margin-bottom: .2rem; }

/* Eine Karte, die etwas Einmaliges zeigt – etwa einen gerade
   erzeugten Schlüssel, den es später nicht mehr zu sehen gibt. */
.karte-hervor {
    border-left: 4px solid var(--cyan-dunkel);
    background: var(--cyan-flaeche);
}

.karte-hervor .codeblock { user-select: all; }

/* Ein Formular, das in einer Tabellenzeile sitzt */
.reihen-formular { display: inline; margin: 0; }

/* Ein Zahlenfeld, das in eine Tabellenzeile passt */
.feld-schmal {
    width: 5.5rem;
    font-family: inherit;
    font-size: .85rem;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    padding: .3rem .45rem;
    margin-right: .3rem;
}