/* ============================================================================
   TESTUMGEBUNG

   Zwei Bausteine, beide nur sichtbar, wenn die Installation als Vorführung
   läuft (includes/demo.php): das Band unter der Kopfleiste und der Kasten mit
   den Zugangsdaten auf der Anmeldeseite.

   WARUM EIN BAND UND KEIN SCHWEBENDER KASTEN: Es soll gelesen und dann
   vergessen werden. Ein Overlay verdeckt genau das, was der Besucher ansehen
   soll, und ein Kasten, den man wegklicken muss, ist eine Aufgabe, bevor die
   Vorführung beginnt. Das Band schiebt die Seite einmal nach unten und stört
   danach nie wieder.

   WARUM DER ORANGE TON: Rot ist in dieser Oberfläche die Ausnahme (Marke,
   HEUTE im Kalender, Deckungslücken) und hieße „hier stimmt etwas nicht".
   Blaugrau wäre unsichtbar, weil es die ganze Oberfläche trägt. Der gedämpfte
   Orangeton sagt „Achtung, aber kein Fehler" – und er kommt sonst nirgends
   flächig vor.
   ============================================================================ */

.demo-band {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    padding: 0.5rem var(--sp-6);
    border-bottom: 1px solid var(--btn-orange-bg-light);
    background: var(--btn-orange-bg-light);
    color: var(--btn-orange-text);
    font-size: var(--fs-5);
    line-height: 1.5;
}

/* Das Wort „Testumgebung" trägt die Aussage und steht deshalb als Marke da –
   in Versalien wie die Mikrolabels der übrigen Oberfläche, damit es nicht wie
   ein zweiter Satz aussieht. */
.demo-band-marke {
    flex: none;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-pill);
    background: var(--btn-orange-text);
    color: var(--auf-marke);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.demo-band-text { flex: 1 1 20rem; }
.demo-band-text strong { font-weight: 700; }

/* Schmale Schirme: Die Marke bekommt eine eigene Zeile, sonst bleibt für den
   Satz daneben eine Spalte von zwei Wörtern Breite. */
@media (max-width: 560px) {
    .demo-band { padding: 0.5rem var(--sp-4); }
    .demo-band-text { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   Der Kasten auf der Anmeldeseite

   Er steht über dem Formular und nicht darunter: Wer die Seite aufschlägt,
   soll die Zugangsdaten lesen, bevor er im leeren Feld steht und überlegt,
   wo er sie herbekommt. Die Felder sind zusätzlich vorbelegt – der Kasten ist
   für die, die auf dem Handy abtippen, und für die, die sich fragen, ob sie
   hier richtig sind.
   --------------------------------------------------------------------------- */

.lg-demo {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--btn-orange-bg-light);
    border-radius: var(--r-card);
    background: var(--btn-orange-bg-light);
}

.lg-demo-marke {
    display: inline-block;
    margin-bottom: 8px;
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--btn-orange-text);
}

.lg-demo-text {
    margin: 0 0 12px;
    font-size: var(--fs-5);
    line-height: 1.55;
    color: var(--brand-quiet);
}

/* Zwei Spalten, Beschriftung links: Das ist die kürzeste Form, in der
   „Benutzer" und „Passwort" nebeneinander lesbar bleiben. `dl` statt einer
   Tabelle, weil es genau das ist – eine Liste aus Begriff und Wert. */
.lg-demo-daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.9rem;
    margin: 0;
    align-items: baseline;
}
.lg-demo-daten dt {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.lg-demo-daten dd { margin: 0; }

/* Auswählbar in einem Rutsch: `user-select: all` markiert bei einem Klick das
   ganze Wort. Wer die Daten weitergibt, kopiert sie damit ohne Nachfassen. */
.lg-demo-daten code {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--btn-orange-bg-light);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    font-size: var(--fs-6);
    color: var(--brand-text);
    user-select: all;
}

/* Die Sperrseite (demoSeiteSperren()) hat keine Kopfleiste und keinen Fuß –
   ohne diese Regel stünde sie auf dem Grundweiß des Browsers, während die
   ganze übrige Anwendung auf dem gedeckten Ton der Arbeitsfläche liegt. */
body.demo-sperrseite {
    background: var(--brand-bg);
    color: var(--brand-text);
}