/* ============================================================================
   SoftTec Online-Ticketsystem — globale Styles
   Basiert auf dem SoftTec Design System (CD-Guidelines, Stand 03/2026).
   Vier Markenfarben + warme Neutraltöne, Schrift Sora, weiche Radien.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Schrift — Sora, selbst gehostet (kein CDN, das Portal muss ohne
   Drittanbieter-Requests funktionieren).
   --------------------------------------------------------------------------- */

/* latin-ext */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/sora-latin-ext.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/sora-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Tokens
   Abgeleitete Farbtöne sind als fixe Hex-Werte hinterlegt statt per color-mix(),
   damit das Portal auch in älteren Browsern (Hotel-Rezeptionen) korrekt aussieht.
   Der jeweilige Mischwert steht als Kommentar dahinter.
   --------------------------------------------------------------------------- */
:root {
    /* Markenpalette */
    --st-navy: #002F5D; /* Hauptfarbe */
    --st-purple: #4E56D3; /* Sekundärfarbe */
    --st-green: #008075; /* Sekundärfarbe */
    --st-lime: #DCEE64; /* Signature-Akzent */

    /* Neutraltöne (warm) */
    --st-gray-dark: #333328;
    --st-gray-mid: #9C9B98;
    --st-gray-light: #F4F3EF;

    /* Semantische Aliase */
    --text-strong: var(--st-navy);
    --text-body: var(--st-gray-dark);
    --text-muted: var(--st-gray-mid);
    --color-danger: #C2453B;

    --border-subtle: #E6E5E0;
    --border-default: #D8D7D1;
    --border-strong: var(--st-gray-mid);

    /* Abgeleitete Töne */
    --lime-tint-55: #ECF6AA; /* lime 55% + weiß */
    --lime-tint-35: #F3F9C9; /* lime 35% + weiß */
    --purple-tint-05: #F6F7FD; /* purple  5% + weiß */
    --purple-tint-08: #F1F2FC; /* purple  8% + weiß */
    --purple-tint-18: #DFE1F7; /* purple 18% + weiß */
    --purple-tint-22: #D8DAF5; /* purple 22% + weiß */
    --purple-tint-45: #AFB3EB; /* purple 45% + weiß — Fokusring */
    --green-tint-08: #EBF5F4; /* green   8% + weiß */
    --green-tint-25: #BFDFDC; /* green  25% + weiß */
    --danger-tint-15: #F6E0DE; /* Fehler-Flächenfarbe */
    --danger-tint-35: #EABEBA; /* danger 35% + weiß */
    --danger-ink: #A53B32; /* danger 85% + schwarz — Fehlertext */
    --navy-tint-45: #8CA1B6; /* navy   45% + weiß — Input-Hover */
    --navy-tint-18: #D1DAE2; /* navy   18% + weiß — Spinner-Spur */
    --gray-light-55: #F9F8F6; /* gray-light 55% + weiß */

    --focus-ring: var(--purple-tint-45);

    /* Schrift */
    --font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Radien */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Schatten — weich, kühl-navy getönt */
    --shadow-xs: 0 1px 2px rgba(0, 47, 93, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 47, 93, 0.07);
    --shadow-md: 0 8px 24px rgba(0, 47, 93, 0.09);
    --shadow-lg: 0 18px 48px rgba(0, 47, 93, 0.12);

    /* Bewegung */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;

    /* Ladeanzeige (LoadingSpinner-Komponente) */
    --spinner-color-primary: var(--st-navy);
    --spinner-color-secondary: var(--st-purple);
    --spinner-color-accent: var(--st-green);
    --spinner-color-core: var(--st-navy);
    --spinner-track: var(--navy-tint-18);
    --spinner-overlay-bg: rgba(255, 255, 255, 0.82);
    --spinner-message-color: var(--st-navy);
    --spinner-size: 96px;
    --spinner-gap: 14px;
    --spinner-border-width: 4px;
    --spinner-duration: 1s;
}

/* ---------------------------------------------------------------------------
   Basis
   --------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-body);
    background: var(--st-gray-light);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    color: var(--text-strong);
}

a {
    color: var(--st-purple);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

::selection {
    background: var(--st-lime);
    color: var(--st-navy);
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Buttons — verbindlich: 1rem / Gewicht 700 / Höhe 52px / Pill-Radius
   --------------------------------------------------------------------------- */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2rem;
    height: 52px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

    .st-btn:active {
        transform: translateY(1px) scale(0.985);
    }

.st-btn--sm {
    height: 44px;
    font-size: 0.875rem;
    padding: 0 1.5rem;
}

.st-btn--primary {
    background: var(--st-navy);
    color: #fff;
}

    .st-btn--primary:hover {
        background: var(--st-purple);
        color: var(--st-lime);
    }

.st-btn--accent {
    background: var(--st-lime);
    color: var(--st-navy);
}

    .st-btn--accent:hover {
        background: var(--st-green);
        color: var(--st-lime);
    }

.st-btn--outline {
    background: transparent;
    color: var(--st-navy);
    border-color: var(--border-default);
}

    .st-btn--outline:hover {
        background: var(--st-navy);
        color: var(--st-lime);
        border-color: var(--st-navy);
    }

.st-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Formularfelder
   16px Schriftgröße ist Absicht: alles darunter löst auf iOS einen Auto-Zoom aus.
   --------------------------------------------------------------------------- */
.st-input,
.st-select {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-body);
    background: #fff;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0 1rem;
    height: 48px;
    width: 100%;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.st-input::placeholder {
    color: var(--text-muted);
}

.st-input:hover,
.st-select:hover {
    border-color: var(--navy-tint-45);
}

.st-input:focus,
.st-select:focus {
    outline: none;
    border-color: var(--st-purple);
    box-shadow: 0 0 0 3px var(--purple-tint-18);
}

.st-input--error {
    border-color: var(--color-danger);
}

    .st-input--error:focus {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 3px var(--danger-tint-15);
    }

textarea.st-input {
    height: auto;
    min-height: 150px;
    padding: 0.75rem 1rem;
    resize: vertical;
    line-height: 1.55;
}

.st-select {
    padding-right: 3rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23002F5D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

/* ---------------------------------------------------------------------------
   Blazor-Startbildschirm und Fehleranzeige
   --------------------------------------------------------------------------- */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--navy-tint-18);
        stroke-width: 0.5rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--st-navy);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    color: var(--st-navy);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Anwendung wird geladen");
    }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.9rem 3rem 0.9rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--danger-ink);
    background: var(--danger-tint-15);
    border-top: 1px solid var(--danger-tint-35);
    box-shadow: 0 -1px 2px rgba(0, 47, 93, 0.08);
}

    #blazor-error-ui .reload {
        color: var(--danger-ink);
        text-decoration: underline;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.75rem;
    }

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    color: var(--danger-ink);
    background: var(--danger-tint-15);
    border: 1px solid var(--danger-tint-35);
}

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