/* ════════════════════════════════════════════════════════════════════
   HINWEIS NACH DEM BESTÄTIGEN DER E-MAIL

   Er liegt oben in der Mitte, nicht unten in der Ecke. Unten rechts ist
   der Platz für Beiläufiges — hier geht es aber um die Frage, mit der
   jemand gerade aus seinem Postfach gekommen ist. Die will beantwortet
   werden, wo man hinschaut.

   Eigene Farbwerte mit Rückfall: Das Blatt wird auf dem Dashboard und auf
   der Anmeldeseite geladen, und die beiden bringen verschiedene Hüllen
   mit. Es darf von keiner etwas voraussetzen.
   ════════════════════════════════════════════════════════════════════ */

.vh-hinweis {
    --vh-papier: var(--hb-card, #FCFAF4);
    --vh-tinte:  var(--hb-ink, #23201B);
    --vh-mitte:  var(--hb-ink-mid, #6E6757);
    --vh-gut:    var(--hb-oliv, #5E7A4F);
    --vh-rot:    var(--hb-terra, #B0492C);

    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 1200;

    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 13px;
    align-items: start;

    width: min(440px, calc(100vw - 32px));
    padding: 15px 16px;
    border: 2px solid var(--vh-tinte);
    background: var(--vh-papier);
    /* Der harte Druckschatten — die einzige Schattenform des Hauses. */
    box-shadow: 5px 5px 0 var(--vh-tinte);

    /* Startzustand: etwas nach oben versetzt und unsichtbar. Der Übergang
       läuft auf transform und opacity, damit er nicht bei jedem Bild ein
       neues Layout auslöst. */
    transform: translate(-50%, -14px);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}
.vh-hinweis.ist-da {
    transform: translate(-50%, 0);
    opacity: 1;
}

.vh-zeichen {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #FFF;
}
.vh-zeichen svg { width: 14px; height: 14px; }
.vh-gut .vh-zeichen   { background: var(--vh-gut); }
.vh-fehler .vh-zeichen { background: var(--vh-rot); }

.vh-text {
    display: grid;
    gap: 3px;
    font-family: var(--hb-serif, 'Lora', Georgia, serif);
}
.vh-text strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vh-tinte);
}
.vh-text span {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--vh-mitte);
}

.vh-zu {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vh-mitte);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.vh-zu:hover { color: var(--vh-tinte); }
.vh-zu:focus-visible { outline: 2px solid var(--vh-tinte); outline-offset: 2px; }

/* Wer Bewegung abgestellt hat, bekommt den Kasten ohne Einflug — aber
   er bekommt ihn. Ausblenden wäre hier das Falsche: Die Meldung ist der
   Inhalt, die Bewegung nur ihre Zugabe. */
@media (prefers-reduced-motion: reduce) {
    .vh-hinweis { transition: none; transform: translate(-50%, 0); }
}

/* Der Knopf für einen neuen Bestätigungslink.
   ------------------------------------------------------------------
   Er sitzt unter dem Satz im Textblock, nicht in der Zeile daneben: Der
   Kasten ist schmal, und ein Knopf neben zwei Zeilen Text drückte beide in
   eine Spalte von wenigen Zeichen Breite.

   Gefüllt in Terrakotta wie jeder Primärknopf des Hauses — er ist hier die
   einzige Handlung, und ein zurückhaltender Knopf wäre an dieser Stelle
   eine verpasste Gelegenheit: Wer hier steht, wollte gerade etwas
   bestätigen und ist gescheitert. */
.vh-tun {
    /* justify-self, nicht align-self: `.vh-text` ist ein Grid, und dort
       steuert align-self die Blockachse. Der Knopf würde sich damit auf die
       volle Spaltenbreite ziehen, statt links neben dem Text zu stehen. */
    justify-self: start;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid var(--vh-tinte);
    border-radius: 0;
    background: var(--vh-rot);
    color: #FFF;
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
}
.vh-tun:hover:not(:disabled) { background: var(--vh-tinte); }
.vh-tun:disabled { opacity: 0.6; cursor: progress; }