/* Startseite der Toolbox ohne Anmeldung (welcome.blade.php), Jakob 22.10.2026:
   als interner Bereich kenntlich, app-maessig, neue Markenfarben vom 12.10.2026. */
@font-face { font-family:'Titillium Web'; src:url('/assets/fonts/titillium-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('/assets/fonts/titillium-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
    --st-primaer: #21497A;
    --st-primaer-hover: #1A3A62;
    --st-text: #263747;
    --st-text-2: #4F5870;
    --st-grund: #E9EDF3;
    --st-flaeche: #FFFFFF;
    --st-linie: #D5DCE6;
    --st-fuss: #4F5870;
    --st-marke-grund: #E6EDF6;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --st-grund: #121A24; --st-fuss: #A9B2C3; --st-linie: #2A3646; color-scheme: dark; }
}
:root[data-theme="dark"] { --st-grund: #121A24; --st-fuss: #A9B2C3; --st-linie: #2A3646; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--st-grund);
    color: var(--st-text);
    font: 400 1rem/1.55 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    padding-inline: 16px;
}
.st-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 2rem; }

/* Die Karte ist immer hell: das farbige Logo braucht hellen Grund. */
.st-app {
    width: 100%;
    max-width: 400px;
    background: var(--st-flaeche);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(19, 28, 43, .14), 0 2px 6px rgba(19, 28, 43, .06);
}
.st-kopf { border-top: 6px solid var(--st-primaer); padding: 2.25rem 2rem 1.5rem; text-align: center; border-bottom: 1px solid #E4E9F0; }
.st-logo { width: 200px; max-width: 100%; height: auto; }
.st-symbol { width: 72px; max-width: 100%; height: auto; }

.st-inhalt { padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; gap: .9rem; }
.st-marke {
    align-self: flex-start;
    margin: 0;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--st-marke-grund);
    color: var(--st-primaer);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.st-titel { margin: 0; font: 600 2.4rem/1 'Barlow Condensed', 'Arial Narrow', sans-serif; color: var(--st-text); }
.st-text { margin: 0; color: var(--st-text-2); }

.st-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    margin-top: .4rem;
    border-radius: 12px;
    background: var(--st-primaer);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background .15s;
}
.st-knopf:hover { background: var(--st-primaer-hover); color: #FFFFFF; }
.st-knopf:focus-visible { outline: 3px solid var(--st-primaer); outline-offset: 3px; }

.st-hinweis { margin: .4rem 0 0; padding-top: .9rem; border-top: 1px solid #E4E9F0; font-size: .88rem; color: var(--st-text-2); display: flex; gap: .45rem; }
.st-hinweis i { color: var(--st-primaer); }

.st-fuss { text-align: center; padding-block: 1rem 1.5rem; font-size: .85rem; color: var(--st-fuss); }
.st-fuss a { color: inherit; }
.st-fuss a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }