@charset "UTF-8";

/* ============================================================
   Responsive Design-Flaeche ("Stage")
   ------------------------------------------------------------
   Home- und Quiz-Screen sind auf eine feste Design-Flaeche von
   820 x 1180 px gebaut (iPad Hochformat). Das ist exakt das
   Seitenverhaeltnis der Hintergrund-SVGs (1639 x 2368 = 2x).

   Statt jede Position einzeln zu skalieren, wird die komplette
   Flaeche proportional auf den Viewport skaliert. Dadurch sind
   alle Abstaende, Schriftgroessen und Positionen auf jedem iPad
   identisch - unabhaengig von Aufloesung und Seitenverhaeltnis.

   Die Hintergrundgrafik liegt darunter und fuellt den Bildschirm
   immer vollflaechig (cover), damit keine Balken entstehen.
   ============================================================ */

:root {
    --design-width: 820;
    --design-height: 1180;
    /* Wird von fitStage() in App.razor bei jedem Resize gesetzt.
       CSS kann eine Laenge nicht durch eine Laenge teilen, deshalb
       laesst sich dieser Faktor nicht rein in CSS berechnen.
       Der Wert hier ist nur der Fallback vor dem ersten Skriptlauf. */
    --stage-scale: 1;
}

.stage-frame {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-tap-highlight-color: transparent;
}

.stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--design-width) * 1px);
    height: calc(var(--design-height) * 1px);
    transform: translate(-50%, -50%) scale(var(--stage-scale));
    transform-origin: center center;
    font-size: 16px;
    -webkit-user-select: none;
    user-select: none;
}

    .stage button {
        /* Entfernt die 300ms-Verzoegerung beim Antippen auf iOS */
        touch-action: manipulation;
    }

/* Hinweis im Querformat - das Design ist fuer Hochformat gebaut.
   Nur auf Touch-Geraeten, damit die Seite am Desktop testbar bleibt. */
.rotate-hint {
    display: none;
}

@media (orientation: landscape) and (pointer: coarse) {
    .rotate-hint {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background-color: #56256b;
        color: #fff;
        font-family: "BundesSans Bold", Helvetica, Arial, sans-serif;
        font-size: 32px;
        line-height: 1.4;
        text-align: center;
    }
}

@font-face {
    font-family: "BundesSans Bold";
    src: url('/font/BundesSans-Bold.otf')
}

@font-face {
    font-family: "BundesSans Medium";
    src: url('/font/BundesSans-Medium.otf')
}

@font-face {
    font-family: "BundesSans";
    src: url('/font/BundesSans-Regular.otf')
}

html, body {
    font-family: 'BundesSans', Helvetica, Arial, sans-serif;
    color: #56256b;
    height: 100%;
    width: 100%;
    margin: 0;
    /* Verhindert, dass iOS Schriftgroessen eigenmaechtig hochskaliert */
    -webkit-text-size-adjust: 100%;
}

#wrapper {
    min-height: 100%;
    min-width: 100%;
}

a, .btn-link {
    color: #56256b;
}

.btn-primary {
    margin: 10px;
    color: #fff;
    background-color: #56256b;
    border-color: #56256b;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #785288;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}