@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 haengt fest an der Design-Flaeche und wird
   mit ihr skaliert - Grafik, Texte und Buttons liegen dadurch auf
   jedem iPad exakt gleich zueinander. Passt das Seitenverhaeltnis
   des Geraets nicht genau, fuellt ein lila Rand (--frame-color)
   den uebrigen Platz.
   ============================================================ */

: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;
    --frame-color: #56256b;
}

.stage-frame {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--frame-color);
    -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;
    /* cover statt 100% 100%: die SVGs sind 1639 x 2368, die Flaeche 820 x 1180.
       cover schneidet oben und unten je gut 2px ab - genau wie im
       urspruenglichen Layout, gegen das alle Positionen gemessen sind. */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    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;
}