/*
 * Oberflaeche - Bewegung, Uebergaenge und Rueckmeldungen.
 *
 * Diese Schicht liegt bewusst NACH site.css und aendert keine Farbe: Alle Werte
 * stammen aus den bestehenden Design-Tokens. Sie ergaenzt nur das Verhalten -
 * weiche Seitenwechsel, spuerbares Feedback auf Eingaben, ruhige Ladezustaende.
 *
 * Grundregel: Bewegung ist Beiwerk. Wer sie abbestellt hat (prefers-reduced-motion),
 * bekommt dieselbe Seite ohne jede Animation - siehe ganz unten.
 */

:root {
    --uebergang-schnell: 140ms;
    --uebergang-normal: 240ms;
    --uebergang-ruhig: 380ms;
    --kurve-weich: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   Seitenuebergaenge (View Transitions API)

   Nativ im Browser, kein zusaetzliches JavaScript, kein SPA-Umbau. Browser ohne
   Unterstuetzung ignorieren die Regeln und zeigen den gewohnten harten Wechsel.
   --------------------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: seite-aus var(--uebergang-schnell) var(--kurve-weich) both;
}

::view-transition-new(root) {
    animation: seite-ein var(--uebergang-normal) var(--kurve-weich) both;
}

@keyframes seite-aus {
    to { opacity: 0; transform: translateY(-6px); }
}

@keyframes seite-ein {
    from { opacity: 0; transform: translateY(8px); }
}

/* ---------------------------------------------------------------------------
   Fokus

   Ein sichtbarer Fokusring ist kein Schoenheitsfehler, sondern die einzige
   Orientierung fuer alle, die mit der Tastatur bedienen. :focus-visible zeigt ihn
   nur dort, wo er gebraucht wird - Mausklicks bleiben unauffaellig.
   --------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--color-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline-offset: 3px;
}

/* Sprungmarke: erscheint erst bei Tastaturfokus und fuehrt an der Navigation vorbei. */
.sprung-zum-inhalt {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary, #0d6efd);
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top var(--uebergang-schnell) var(--kurve-weich);
}

.sprung-zum-inhalt:focus {
    top: 0;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Micro-Interactions
   --------------------------------------------------------------------------- */

.btn {
    transition: transform var(--uebergang-schnell) var(--kurve-weich),
                box-shadow var(--uebergang-schnell) var(--kurve-weich),
                background-color var(--uebergang-schnell) ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Der Druckpunkt beim Klicken macht den Knopf greifbar. */
.btn:active:not(:disabled) {
    transform: translateY(1px);
    transition-duration: 60ms;
}

.card,
.dashboard-karte,
.modul-kachel {
    transition: transform var(--uebergang-normal) var(--kurve-weich),
                box-shadow var(--uebergang-normal) var(--kurve-weich);
}

.card:hover,
.dashboard-karte:hover,
.modul-kachel:hover {
    transform: translateY(-3px);
}

/* Wartet ein Knopf auf eine Antwort, darf er nicht erneut ausgeloest werden. */
.btn[data-laedt="true"] {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn[data-laedt="true"]::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.6em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dreh 700ms linear infinite;
}

@keyframes dreh {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Skeleton-Loader

   Ein Platzhalter in der Form des spaeteren Inhalts wirkt schneller als ein
   Spinner, weil das Auge die Struktur schon kennt, wenn die Daten eintreffen.
   --------------------------------------------------------------------------- */

.skelett {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.12) 37%,
        rgba(0, 0, 0, 0.06) 63%);
    background-size: 400% 100%;
    animation: skelett-welle 1.3s ease infinite;
    border-radius: 6px;
    min-height: 1em;
}

.skelett-zeile { height: 0.9em; margin-bottom: 0.6em; }
.skelett-zeile:last-child { width: 65%; margin-bottom: 0; }
.skelett-titel { height: 1.6em; width: 45%; margin-bottom: 1em; }
.skelett-karte { height: 8rem; }

@keyframes skelett-welle {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

/* ---------------------------------------------------------------------------
   Toasts

   Ersetzen die Alert-Balken, die bisher den Seiteninhalt nach unten geschoben
   haben. Die Region ist ein aria-live-Bereich, damit Screenreader die Meldung
   vorlesen, ohne dass der Fokus wegspringt.
   --------------------------------------------------------------------------- */

.toast-bereich {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

/* Auch hier gilt: keine festen Farben. Zuvor stand hier weisser Grund mit
   dunkler Schrift - im Dunkelmodus leuchtete der Kasten als greller weisser
   Fleck aus der Seite heraus. */
.hinweis-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--color-surface-solid);
    color: var(--color-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    animation: toast-ein var(--uebergang-normal) var(--kurve-weich) both;
}

.hinweis-toast[data-art="erfolg"] { border-left-color: var(--color-success); }
.hinweis-toast[data-art="fehler"] { border-left-color: var(--color-danger); }
.hinweis-toast[data-art="warnung"] { border-left-color: var(--color-warning); }

.hinweis-toast.geht { animation: toast-aus var(--uebergang-schnell) ease forwards; }

.hinweis-toast .toast-symbol { font-size: 1.15rem; line-height: 1.35; }
.hinweis-toast .toast-text { flex: 1; line-height: 1.4; }

.hinweis-toast .toast-schliessen {
    background: none;
    border: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
}

.hinweis-toast .toast-schliessen:hover { opacity: 1; }

@keyframes toast-ein {
    from { opacity: 0; transform: translateX(1.5rem); }
}

@keyframes toast-aus {
    to { opacity: 0; transform: translateX(1.5rem); }
}

/* ---------------------------------------------------------------------------
   Fehlerseiten
   --------------------------------------------------------------------------- */

.fehler-seite {
    display: flex;
    align-items: center;
    min-height: 68vh;
    padding: 3rem 0;
}

.fehler-karte {
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
}

.fehler-symbol {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--color-primary, #0d6efd);
    margin-bottom: 1.25rem;
}

.fehler-code {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.fehler-titel { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; margin-bottom: 0.75rem; }
.fehler-text { opacity: 0.8; margin-bottom: 2rem; }

.fehler-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.fehler-kennung { margin-top: 2rem; font-size: 0.85rem; opacity: 0.6; }

/* ---------------------------------------------------------------------------
   Tabellen als Karten (schmale Bildschirme)

   Statt horizontalem Scrollen bekommt jede Zelle ihre Spaltenueberschrift als
   Label vorangestellt. Die View muss dafuer nur data-spalte setzen.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .tabelle-als-karten thead { display: none; }

    .tabelle-als-karten tbody tr {
        display: block;
        margin-bottom: 0.85rem;
        padding: 0.85rem 1rem;
        border: 1px solid rgba(0, 0, 0, 0.09);
        border-radius: 12px;
        background: #fff;
    }

    .tabelle-als-karten tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: 0.35rem 0;
        text-align: right;
    }

    .tabelle-als-karten tbody td::before {
        content: attr(data-spalte);
        font-weight: 600;
        text-align: left;
        opacity: 0.7;
    }

    .tabelle-als-karten tbody td:empty { display: none; }
}

/* ---------------------------------------------------------------------------
   Bewegung abbestellt

   Diese Einstellung wird aus gutem Grund gesetzt - bei manchen Menschen loesen
   bewegte Oberflaechen Schwindel oder Uebelkeit aus. Deshalb wird hier wirklich
   ALLES stillgelegt, auch die Animationen der uebrigen Stylesheets.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover:not(:disabled),
    .btn:active:not(:disabled),
    .card:hover,
    .dashboard-karte:hover,
    .modul-kachel:hover {
        transform: none;
    }

    @view-transition {
        navigation: none;
    }
}

/* ---------------------------------------------------------------------------
   Empfehlung zur Zwei-Faktor-Anmeldung.

   Ein Hinweis, keine Warnung: gedaempfte Farben, keine roten Signale. Wer
   hier Alarm schlaegt, erzeugt Gewoehnung - und dann wird auch der echte
   Alarm ueberlesen.
   --------------------------------------------------------------------------- */

/* Farben ausschliesslich ueber die Entwurfsmarken, nie fest verdrahtet: Sie
   schalten unter html[data-theme='dark'] mit um. Vorher stand hier ein blauer
   Verlauf mit festem Grau fuer den Fliesstext - im Dunkelmodus blieb davon ein
   unlesbares Dunkelgrau auf Dunkelblau uebrig. */
.sicherheitshinweis {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 1.15rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: .65rem;
    background: linear-gradient(135deg, var(--color-primary-softer), transparent 70%), var(--color-surface-solid);
    color: var(--color-text);
}

.sicherheitshinweis__zeichen {
    flex: 0 0 auto;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-primary);
}

.sicherheitshinweis__text {
    flex: 1 1 18rem;
    min-width: 0;
}

.sicherheitshinweis__titel {
    display: block;
    font-size: .98rem;
    color: var(--color-text);
}

.sicherheitshinweis__satz {
    margin: .15rem 0 0;
    font-size: .89rem;
    line-height: 1.45;
    color: var(--color-text-soft);
}

.sicherheitshinweis__knoepfe {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

/* Das Wegklicken bleibt bewusst unauffaellig - aber gross genug, um es auf
   dem Handy zu treffen, und deutlich genug, um es ueberhaupt zu sehen. */
.sicherheitshinweis__spaeter {
    color: var(--color-text-muted);
    text-decoration: none;
    min-height: 2.25rem;
}

.sicherheitshinweis__spaeter:hover,
.sicherheitshinweis__spaeter:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .sicherheitshinweis {
        gap: .65rem;
    }

    .sicherheitshinweis__knoepfe {
        width: 100%;
        justify-content: space-between;
    }
}