/* ===========================================================================
   Warnhinweis Identitätsmissbrauch – Schrumpf-Variante
   ---------------------------------------------------------------------------
   Der Warnhinweis muss laut Anforderungskonzept dauerhaft sichtbar sein. Er
   verschwindet deshalb nie, sondern klappt nur auf eine schmale Leiste
   zusammen: Überschrift, Kurzlink und Schalter zum Wiederaufklappen bleiben
   stehen.

   Ohne JavaScript bleibt der Hinweis vollständig ausgeklappt – die kompakte
   Darstellung wird ausschliesslich über die Klasse .warnhinweis--kompakt
   aktiviert, die assets/js/warnhinweis.js setzt.
   =========================================================================== */

.warnhinweis__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.warnhinweis__titel {
    margin: 0;
}

/* Der Schalter erscheint erst, wenn JavaScript ihn freigibt (Attribut hidden
   wird dort entfernt). Ohne JS gäbe es sonst einen funktionslosen Knopf. */
.warnhinweis__schalter {
    flex: 0 0 auto;
}

/* Kurzlink ist nur im kompakten Zustand sinnvoll – ausgeklappt gibt es die
   grosse Schaltfläche darunter. */
.warnhinweis__kurzlink {
    display: none;
}

.warnhinweis__inhalt {
    margin-top: 0.75rem;
}

/* --- kompakter Zustand --------------------------------------------------- */

.warnhinweis--kompakt {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.warnhinweis--kompakt .warnhinweis__inhalt {
    display: none;
}

.warnhinweis--kompakt .warnhinweis__titel {
    font-size: 1rem;
}

.warnhinweis--kompakt .warnhinweis__kurzlink {
    display: inline;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* --- Bewegung ------------------------------------------------------------- */

/* Nur die Polsterung wird animiert, nicht der Text. Das Konzept untersagt
   bewegte Elemente, welche die Lesbarkeit beeinträchtigen; ein kurzer
   Übergang der Höhe erfüllt das. Wer Bewegung reduziert haben möchte,
   bekommt gar keine. */
.warnhinweis {
    transition: padding 200ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .warnhinweis {
        transition: none;
    }
}

/* --- schmale Bildschirme -------------------------------------------------- */

@media (max-width: 575.98px) {
    .warnhinweis__kopf {
        align-items: flex-start;
    }

    .warnhinweis--kompakt .warnhinweis__kurzlink {
        display: block;
        margin-left: 0;
        white-space: normal;
    }
}