/* ===== Querformat-Pflicht ==============================================
   Zeigt einen Vollbild-Hinweis, sobald der Viewport hochkant ist (Hoehe >
   Breite) und blendet die eigentliche Anwendung dahinter aus - rein per
   CSS media feature (min-aspect-ratio), bewusst OHNE JavaScript: die
   Bedingung "Breite >= Hoehe -> Seite, sonst Hinweis" laesst sich exakt
   damit abbilden (min-aspect-ratio: 1/1 matcht width/height >= 1), und
   Media Queries werten bei jeder Fenstergroessenaenderung/Drehung
   automatisch neu aus - kein Resize-Listener, kein Reload noetig.
   1:1 aus SoulKeeper/css/querformat.css uebernommen (identische Klassen/
   Logik), eigene Datei wie bei css/variables.css, damit dieses Projekt
   unabhaengig bleibt - siehe AUFTRAG "Querformat-Pflicht". */

.querformat-hinweis {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 40%, var(--horizon-color) 0%, var(--sky-black) 70%);
    color: var(--text);
}

/* Rein dekoratives Telefon-Icon (kein Bild noetig), das per Animation
   zwischen Hoch- und Querformat kippt - Kernaussage "dreh dein Geraet"
   auf einen Blick, auch ohne die Textzeile zu lesen. */
.querformat-hinweis__icon {
    position: relative;
    width: 46px;
    height: 78px;
    border: 3px solid var(--accent-bright);
    border-radius: 8px;
    box-shadow: 0 0 16px var(--accent);
    animation: querformat-dreh 2.4s ease-in-out infinite;
}

.querformat-hinweis__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-bright);
    transform: translateX(-50%);
}

@keyframes querformat-dreh {
    0%, 15% { transform: rotate(0deg); }
    45%, 65% { transform: rotate(-90deg); }
    85%, 100% { transform: rotate(0deg); }
}

.querformat-hinweis__titel {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--accent-bright);
    text-shadow: 0 0 15px var(--accent);
}

.querformat-hinweis__text {
    margin: 0;
    max-width: 32ch;
    /* Keine eigene Groesse mehr (vorher 0.65rem) - normaler Fliesstext-
       Hinweis, einheitlich mit den uebrigen normalen Textinhalten (siehe
       TODO-20260901-030, Review-Beanstandung). */
    line-height: 1.8;
    color: var(--text-dim);
}

/* Breite >= Hoehe (Landscape oder Quadrat): Hinweis verbergen, Anwendung
   normal sichtbar - siehe Kommentar oben zur min-aspect-ratio-Logik. */
@media (min-aspect-ratio: 1/1) {
    .querformat-hinweis {
        display: none;
    }
}