/* ===== Standplatz – globales Stylesheet ===== */

/* ============================================================================
   Marken-Farbpalette – Single Source of Truth
   ----------------------------------------------------------------------------
   Synchron halten mit Standplatz.WebUI/Theme/StandplatzTheme.cs
   (dort sind dieselben Hex-Werte als C#-Konstanten für das MudBlazor-Theme
   hinterlegt). Bei Branding-Änderungen NUR diese beiden Stellen anpassen.

   Verwendung:   color: var(--std-primary);
                 background: rgba(var(--std-primary-rgb), 0.1);
   ============================================================================ */
:root {
    --std-primary:        #A84B35;            /* Terrakotta, Header/Footer/Brand */
    --std-secondary:      #23747B;            /* Türkis-Akzent (Verlauf, Hover) */
    --std-light:          #F6E7DF;            /* Warmer Akzent-Hintergrund (Tabellen, Cards) */
    --std-border:         #C9A08E;            /* Trennlinien in Akzent-Sektionen */
    --std-background:     #FAF6F0;            /* Seitenhintergrund (warmes Weiß), Karten bleiben weiß */
    --std-success:        #2F7D4A;            /* Statusfarben gedämpft (#1376), identisch zum MudTheme */
    --std-warning:        #A85E12;
    --std-error:          #B93A2E;
    --std-info:           #2A6F8A;
    --std-primary-rgb:    168, 75, 53;        /* RGB-Tripel für rgba(...) */
    --std-secondary-rgb:  35, 116, 123;
}

/* ============================================================================
   Kachel-Schatten (#1194)
   ----------------------------------------------------------------------------
   Hebt die Kacheln dreidimensional vom Seitenhintergrund ab und gibt der
   Oberfläche dadurch zusätzliche Orientierung. Bewusst KEINE Marken-Farben –
   diese Variablen haben deshalb auch keine Entsprechung in
   Standplatz.WebUI/Theme/StandplatzTheme.cs und sind davon unabhängig.

   Ruhezustand: neutrales Grau, zweistufig (enger Kontaktschatten + weiter
   Streuschatten), nach unten versetzt – das ergibt den Auflage-Eindruck.
   Hover: kräftiger Marken-Schatten, damit die Kachel beim Überfahren trotz
   des vorhandenen Ruheschattens klar weiter nach vorn tritt.
   ============================================================================ */
:root {
    --std-shadow-tile:       0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.13);
    --std-shadow-tile-hover: 0 10px 28px rgba(var(--std-primary-rgb), 0.22);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333333;
    background-color: var(--std-background);
}

a {
    color: var(--std-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== Rechtliche Inhalte (Impressum, Datenschutz) =====
   Inhalt zentriert in lesbarer Breite (1280px). Der scrollbare Bereich
   (Outer-Container .std-content) liegt eine Ebene höher und ist voll-breit –
   siehe CLAUDE.md Pattern 6, Layout-Patterns ("Content-Scrollbar am
   Viewport-Rand"). */
.legal-content {
    flex: 1;
    /* Gleiche Breite wie die Welcome-Seite (MudContainer MaxWidth.Large = 1280px). */
    max-width: 1280px;
    width: 100%;
    margin: 32px auto;
    padding: 0 24px;
}

/* <code>-Tags innerhalb des Datenschutz-/Impressum-Texts erben die normale
   Body-Schrift, statt vom Browser auf Monospace umgestellt zu werden. */
.legal-content code {
    font-family: inherit;
    font-size: inherit;
}

.legal-content h1 {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 25px;
    color: var(--std-primary);
}

.legal-content h2 {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 25px;
    color: #333333;
}

.legal-content h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333333;
}

.legal-content p {
    color: #555555;
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-content ul {
    color: #555555;
    line-height: 1.7;
    margin-bottom: 12px;
    padding-left: 1.5rem;
    list-style: disc outside;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content strong {
    color: #333333;
}

.legal-section {
    margin-bottom: 25px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .legal-content {
        margin: 16px auto;
        padding: 0 16px;
    }
}

/* #1059: Themenübersicht der Hilfe. Seit die Hilfe ohne Themen-Parameter nur noch
   das Inhaltsverzeichnis zeigt, ist diese Liste die Einstiegsseite und keine
   Randnotiz mehr – deshalb als Kachelraster statt als Aufzählung. Die Klassen
   entstanden bereits mit #1058, blieben dort aber ohne Gestaltung. */
.std-help-toc {
    margin-bottom: 32px;
}

.std-help-toc-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333333;
}

.std-help-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.std-help-toc li {
    margin: 0;
}

.std-help-toc-link {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--std-border);
    border-radius: 6px;
    color: var(--std-primary);
    text-decoration: none;
    line-height: 1.4;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.std-help-toc-link:hover {
    border-color: var(--std-primary);
    background-color: var(--std-light);
}

.std-help-toc-link:focus-visible {
    outline: 2px solid var(--std-primary);
    outline-offset: 2px;
}

.std-help-toc-link.active {
    border-color: var(--std-primary);
    background-color: var(--std-light);
    font-weight: 500;
}

/* #1059: Tabellen in Hilfe-Abschnitten (z. B. die sechs Einrichtungsschritte).
   Auf schmalen Fenstern rollt die Tabelle waagerecht, statt die Seite zu sprengen. */
.std-help-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    display: block;
    overflow-x: auto;
}

.std-help-table th,
.std-help-table td {
    border: 1px solid var(--std-border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    color: #555555;
    line-height: 1.6;
}

.std-help-table th {
    background-color: var(--std-light);
    color: #333333;
    font-weight: 500;
}

/* ===== #1195/#1200: Linksbündiger Inhalt über die volle Breite in Bereichen
   mit Navigation =====
   Jede Seite wickelt ihren Inhalt in ein eigenes MudContainer mit eigener
   MaxWidth (ExtraLarge auf Übersichten, Large/Medium auf Unterseiten).
   MudBlazor zentriert diesen Container (margin-left/right: auto), sobald der
   Content-Bereich breiter ist als seine max-width – dadurch sprang der Inhalt
   beim Wechsel von der Bereichs-Übersicht auf eine Unterseite nach rechts.
   Links ausgerichtet halten alle Seiten denselben Abstand zur Navigation (#1195).

   #1195 ließ die max-width bestehen: Der Inhalt stand danach zwar links, endete
   aber vor dem rechten Rand des Content-Bereichs – auf Unterseiten (Large,
   1280 px) bei 1920 px Fenster um 306 px zu früh. max-width: none hebt das auf,
   der Inhalt füllt den Bereich jetzt vollständig aus (#1200). Die MaxWidth der
   einzelnen Seiten bleibt im Markup stehen, greift hier aber nicht mehr – sie
   wirkt weiterhin auf Seiten ohne Navigation.

   Bewusst nur im Bereichs-Layout: Auf Seiten ohne Navigation (Startseite,
   Anmeldung, Ersteinrichtung) sind Zentrierung und begrenzte Lesebreite gewollt.

   #1195 und #1200 richteten nur die Box des Containers aus. Der Innenabstand des
   Containers (.mud-container--gutters, 24 px ab 600 px Fensterbreite) blieb und
   rückte den Seiteninhalt gegenüber Breadcrumb und Veranstaltungs-Kopfzeile ein,
   die direkt im Content-Bereich stehen – der Versatz aus #1220. Der Content-Bereich
   bringt seinen Abstand zum Rand mit 24 px selbst mit (MainLayout.razor.css), der
   Container braucht hier deshalb keinen eigenen. */
.std-admin-content .mud-container {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* #1298: Dasselbe für die Hilfe. Sie führt keinen MudContainer, sondern den mit
   Impressum/Datenschutz geteilten Wrapper .legal-content (1280 px, zentriert,
   24 px Innenabstand) – im Bereichs-Layout stand sie deshalb als einzige Seite
   mittig und eingerückt. Außerhalb der Bereiche (/hilfe, Impressum, Datenschutz)
   bleibt die Lesebreite gewollt. #1299: Gilt genauso für den Bereichs-Kontakt,
   der denselben Wrapper nutzt. */
.std-admin-content .legal-content {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Admin-Übersichtskarten – Ruheschatten (#1194) + Hover-Highlight + Cursor.
   height: 100 % (#1373): Kacheln einer Reihe bleiben gleich hoch, auch wenn ein
   Titel bei schmalem Viewport zweizeilig wird. */
.std-admin-card {
    cursor: pointer;
    position: relative;
    height: 100%;
    box-shadow: var(--std-shadow-tile);
    transition: border-color 0.18s ease, top 0.18s ease, box-shadow 0.18s ease;
}

/* #1373: Der Textblock ist ein Flex-Kind; ohne min-width: 0 darf er nicht schmaler
   als sein längstes Wort werden und sprengt bei schmalem Viewport die Kachel
   („Systemmeldungen"). Lange Titelwörter trennen per Silbentrennung (html lang="de"),
   Browser ohne deutsche Trennregeln brechen notfalls im Wort um. */
.std-admin-card-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.std-admin-card-text .mud-typography-h6 {
    -webkit-hyphens: auto;
    hyphens: auto;
}

.std-admin-card:hover {
    border-color: var(--std-primary);
    top: -2px;
    box-shadow: var(--std-shadow-tile-hover);
}

.std-admin-card:focus-visible {
    outline: 2px solid var(--std-primary);
    outline-offset: 2px;
}

/* Einheitliche Kachel-Optik für alle Karten/Panels (Dashboard-Widgets,
   Hub-Kacheln, KPI-, Feature- und Event-Karten). Optik wie im Homepage-
   Projekt: dezenter Rahmen und Ruheschatten (#1194), beim Hover Anheben +
   kräftiger Marken-Schatten + Rahmen in Marine. Damit der Schatten voll
   sichtbar ist, müssen die Kacheln flach sein (MudCard Elevation=0) – dieses
   Stylesheet wird nach MudBlazor.min.css geladen und übersteuert deren
   .mud-elevation-0. Marken-Farben ausschließlich über die :root-Variablen.
   #1375: Die Anhebung läuft über position/top statt transform – ein transformierter
   Vorfahr würde den fixen Backdrop des Kachel-Hilfetexts (TileHelpInfo) auf das
   Kachel-Innere beschränken, ein Klick außerhalb schlösse dann nichts. Gilt ebenso
   für .std-admin-card oben. */
.std-tile-hover {
    position: relative;
    border: 1px solid var(--std-border);
    border-radius: 8px;
    box-shadow: var(--std-shadow-tile);
    transition: top 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.std-tile-hover:hover {
    top: -2px;
    box-shadow: var(--std-shadow-tile-hover);
    border-color: var(--std-primary);
}

/* Klickbare Kachel (z. B. Hub-Kacheln) – Zeiger + Tastatur-Fokusrahmen. */
.std-tile-hover.std-tile-clickable {
    cursor: pointer;
}

/* Fokusring zusätzlich zum Ruheschatten – ohne dessen Wiederholung würde die
   Kachel bei Tastaturfokus flach werden (box-shadow ersetzt, nicht ergänzt). */
.std-tile-hover:focus-visible {
    border-color: var(--std-primary);
    box-shadow: 0 0 0 2px var(--std-light), var(--std-shadow-tile);
    outline: none;
}

/* Gesperrte Kachel: sichtbar (gestrichelt, gedämpft), aber ohne Hover-Anhebung. */
.std-tile-hover.std-tile-locked {
    cursor: not-allowed;
    opacity: 0.55;
    border-style: dashed;
}

.std-tile-hover.std-tile-locked:hover {
    top: 0;
    box-shadow: var(--std-shadow-tile);
    border-color: var(--std-border);
}

/* #874: Warn-Zustand einer Hub-Kachel (z. B. erkannte Terminkollision). Der Zustand ist
   bewusst nicht allein über Farbe erkennbar – die Kachel trägt zusätzlich ein Warn-Symbol
   und einen Klartext. Warnfarbe aus dem MudBlazor-Theme, keine Marken-Hexwerte. */
.std-tile-hover.std-tile-warning {
    border-color: var(--mud-palette-warning);
    border-width: 2px;
}

/* „Jetzt dran"-Betonung der als Nächstes fälligen Kachel. */
.std-tile-hover.std-tile-next {
    border-color: var(--std-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--std-light), var(--std-shadow-tile);
}

/* #1375: Gesperrte Kachel mit gezeigtem Hilfetext (TileHelpInfo). Die gedämpfte
   Sperr-Optik (opacity) würde den Text mit ausbleichen – solange er gezeigt wird,
   ist die Kachel voll deckend. */
.std-tile-hover.std-tile-locked:has(.std-tile-help.open),
.std-tile-hover.std-tile-locked:has(.std-tile-help:hover) {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .std-tile-hover,
    .std-tile-hover:hover {
        transition: none;
        top: 0;
    }
}

/* StandplatzActionMenu in MudTable-Zeilen: das absolut positionierte
   Dropdown-Panel wird sonst vom MudBlazor-Tabellen-Container abgeschnitten
   (.mud-table-container hat overflow-x:auto, wodurch overflow-y zu auto
   berechnet wird ⇒ vertikales Clipping + Scrollbar). Solange ein Menü
   geöffnet ist, geben wir den Overflow des Containers frei, damit das Panel
   vollständig sichtbar ist. Horizontales Scrollen bleibt im geschlossenen
   Zustand unverändert. */
.mud-table-container:has(.std-action-menu.open) {
    overflow: visible;
}

/* Führender Leerzustand (StandplatzEmptyState, #238): einheitlicher, zentrierter
   Empty State für Listen-/Tabellenseiten. Marken-Farben ausschließlich über die
   var(--std-*)-Variablen bzw. MudBlazor Color.Primary (Icon) – kein Hardcoding. */
.std-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
}

.std-empty-state-icon {
    font-size: 3rem !important;
    width: 3rem;
    height: 3rem;
    opacity: 0.7;
}

.std-empty-state-title {
    margin-top: 0.25rem;
}

.std-empty-state-description {
    max-width: 32rem;
}

.std-empty-state-actions {
    margin-top: 0.75rem;
}

/* #1092: Text ausschließlich für Screenreader – optisch nicht vorhanden, im
   Barrierefreiheitsbaum aber vollwertig. Für Zustände, die visuell allein über Farbe
   oder Form erkennbar sind und deshalb nach WCAG 2.1 SC 1.4.1 zusätzlich in Textform
   vorliegen müssen (z. B. der Auswahlzustand an den Chips der Bewerbungs-Detailansicht,
   der optisch nur als gefüllte Chip-Variante erscheint). Bewusst nicht display:none und
   nicht visibility:hidden –
   beides nähme den Text auch dem Screenreader. */
.std-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* #1229: Zeilen des Tabellen-Builders auf der Berichte-Seite (Filter, Sortierung,
   Aggregat, Aktionen). MudSelect legt sein Feld in einen eigenen Wrapper
   (div.mud-select), den MudBlazor mit flex-grow:1 versieht; die Style-Angabe der
   Aufrufstelle landet dagegen erst im inneren .mud-input-control und blieb damit
   wirkungslos. Ein einzelnes Feld füllte so die gesamte Zeile – in der
   Aggregat-Zeile über 1000 px. Hier wächst der Wrapper nicht mehr; die Breite
   kommt aus der Style-Angabe des jeweiligen Feldes. */
.std-builder-row > .mud-select,
.std-builder-row > .mud-input-control {
    flex: 0 0 auto;
}