/* =====================================================================
   schlichte-seite.css – Seiten im schlichten Rahmen
   ---------------------------------------------------------------------
   Für Seiten ohne Kopfzeile, Menü und Leiste (seite_schlicht_ausgeben()
   in src/vorlage.php): Einrichtung, Anmeldung, Abmelden (Fehlerfall) und
   die 404-Seite ohne Anmeldung.
   Geladen nach grundlagen.css und aufbau.css; aus
   aufbau.css werden nur die Variablen (Maße, Rundungen, Schatten)
   gebraucht. Das Seitenraster von dort hebt Abschnitt 1 wieder auf.

   Farben, Schriften und Dauern nur als Variablen aus grundlagen.css,
   Maße, Rundungen und Schatten aus aufbau.css.
   Diese Datei braucht keine Bedingungen für Fensterbreiten: Die Fläche
   ist höchstens 26 rem breit und füllt in schmaleren Fenstern einfach
   die Breite aus.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Seite: Raster aus aufbau.css aufheben, Inhalt mittig
   body.schlicht wiegt schwerer als die Regeln für body und main in
   aufbau.css (Klasse plus Element), deshalb gilt es in jeder Breite.
   --------------------------------------------------------------------- */

body.schlicht {
    /* kein Raster aus Seitenleiste und Kopfzeile (aufbau.css, BREIT) */
    display: block;
    /* rundum Abstand; wo das Gerät mehr braucht (Kamera-Aussparung,
       Home-Balken), gilt dessen Sicherheitsabstand. Unten kein Platz für
       eine Leiste (aufbau.css, SCHMAL), weil es hier keine gibt. */
    padding:
        var(--rand-oben)
        max(var(--abstand-aussen), env(safe-area-inset-right))
        var(--rand-unten)
        max(var(--abstand-aussen), env(safe-area-inset-left));
}

/* Waagerecht mittig; oben etwas Luft, die mit der Fensterhöhe wächst
   (8 Prozent der Höhe, mindestens 1 rem, höchstens 5 rem) */
body.schlicht main {
    max-inline-size: 26rem;
    margin: clamp(1rem, 8vh, 5rem) auto 2rem;
}

/* Die schwebende Fläche mit dem ganzen Inhalt */
.schlicht-flaeche {
    padding: clamp(1.25rem, 5vw, 2rem);
    border-radius: var(--radius-schwebend);
    background-color: var(--farbe-flaeche);
    box-shadow: var(--schatten-schwebend);
}

/* Name "Tabularium" (Schrift Marcellus über .name-tabularium aus
   grundlagen.css) als kleine Zeile über der Überschrift */
.schlicht-name {
    margin: 0;
    font-size: 1.25rem;
}

.schlicht-flaeche h1 {
    margin-block-start: 0.25rem;
}

/* Link "Zur Startseite" (nach dem Anlegen bzw. wenn man schon angemeldet
   ist): Tippfläche mindestens 44 Punkte */
.schlicht-weiter {
    margin: 0;
}

.schlicht-weiter a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tippflaeche);
    font-weight: 600;
}


/* ---------------------------------------------------------------------
   2. Meldungen (Fehler, Erfolg und Hinweis) über dem Formular
   Fehler und Erfolg: links das gefüllte Siegel, mit Ausrufezeichen in
   Siegellack (Fehler) bzw. mit Haken in Bronze (Erfolg); daneben der Text
   in Haupttextfarbe.
   Hinweis (z. B. "Deine Sitzung ist abgelaufen." auf der Anmeldeseite):
   ruhig und neutral, ohne Symbol; er nutzt nur die Grundform unten
   (feiner Rand in Linienfarbe, Fläche im Seitenhintergrund).
   --------------------------------------------------------------------- */

.meldung {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-block: 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-eintrag);
    background-color: var(--farbe-hintergrund);
}

/* Symbol auf Höhe der ersten Textzeile */
.meldung .symbol {
    margin-block-start: 0.125rem;
}

.meldung p,
.meldung ul {
    margin: 0;
}

.meldung ul {
    padding: 0;
    list-style: none;
}

.meldung li + li {
    margin-block-start: 0.375rem;
}

/* Fehler: Rand in Siegellack, Fläche leicht mit Siegellack getönt */
.meldung--fehler {
    border-color: var(--farbe-fehler);
    background-color: color-mix(in srgb, var(--farbe-fehler) 8%, var(--farbe-flaeche));
}

.meldung--fehler .symbol {
    color: var(--farbe-fehler);
}

.meldung--erfolg .symbol {
    color: var(--farbe-bronze);
}

/* Hinweis: Grundform ohne Symbol; nur die Schrift ausdrücklich in
   Haupttextfarbe, damit er nie wie ein Fehler oder Erfolg wirkt */
.meldung--hinweis {
    color: var(--farbe-text);
}


/* ---------------------------------------------------------------------
   3. Formular
   Eingabefelder sind gefüllte Felder mit feinem Rahmen: leicht getönte
   Feldfläche und rundum ein Rahmen von 1 px. Der Rahmen zeigt, wo das
   Feld ist (mindestens 3 : 1 zur Feldfläche und zur Umgebung, wie WCAG
   es für Bedienelemente verlangt). Das Suchfeld (aufbau.css) hat
   dieselbe Fläche und denselben Rahmen, aber Kapselform.
   --------------------------------------------------------------------- */

.formular-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-end: 1.25rem;
}

.formular-feld label {
    font-weight: 600;
}

.eingabefeld {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: var(--tippflaeche);
    padding: 0 0.75rem;
    /* feiner Rahmen rundum; durch box-sizing: border-box zählt er zur
       Höhe, das Feld bleibt also so hoch wie die Tippfläche */
    border: 1px solid var(--farbe-feldrahmen);
    border-radius: var(--radius-eintrag);
    background-color: var(--farbe-feld);
    color: var(--farbe-text);
    font: inherit;
    /* Mindestens 16 Pixel: Bei kleinerer Schrift zoomt das iPhone beim
       Antippen eines Felds heran. Das könnte passieren, wenn in iOS eine
       kleine Textgröße eingestellt ist (1 rem ist dann kleiner). */
    font-size: max(16px, 1rem);
    /* Safaris eigene Gestaltung von Eingabefeldern abschalten */
    -webkit-appearance: none;
    appearance: none;
}

/* Ring direkt am Rand (wie beim Suchfeld); er erscheint bei Textfeldern
   auch beim Antippen oder Klicken */
.eingabefeld:focus-visible {
    outline: 2px solid var(--farbe-bronze);
    outline-offset: 0;
}

/* Feld mit Fehler: Der Rahmen wird Siegellack statt grau. Was falsch
   ist, steht zusätzlich in Worten in der Meldung über dem Formular. */
.eingabefeld[aria-invalid="true"] {
    border-color: var(--farbe-fehler);
}

/* Im Fokus ersetzt der Bronze-Ring den Rahmen, auch den roten bei einem
   Fehler. Der Rahmen bleibt 1 px breit und wird nur durchsichtig
   (darunter sieht man die Feldfläche), damit das Feld nicht springt.
   Die zweite Zeile wiegt mehr als die Fehlerregel darüber und setzt
   sich deshalb sicher gegen sie durch. */
.eingabefeld:focus-visible,
.eingabefeld[aria-invalid="true"]:focus-visible {
    border-color: transparent;
}

/* Hinweis unter dem Feld, klein in Nebentextfarbe */
.formular-hinweis {
    margin: 0;
    color: var(--farbe-nebentext);
    font-size: 0.875rem;
}

/* Knopf mit Bronze-Fläche und halbfetter Schrift, volle Breite */
.knopf-bronze {
    inline-size: 100%;
    min-block-size: var(--tippflaeche);
    margin-block-start: 0.5rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--radius-eintrag);
    background-color: var(--farbe-bronze-flaeche);
    color: var(--farbe-schrift-auf-bronze);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--dauer-hover) ease;
}

/* Hover: etwas dunkler (wie "Erneut versuchen" auf der Fehlerseite) */
@media (hover: hover) {
    .knopf-bronze:hover {
        filter: brightness(0.9);
    }
}