/* Das Aussehen des öffentlichen Portals (Paket 4-03). Eine Datei, kein Inline-Stil: Die Content-Security-Policy (Paket 3-03) erlaubt kein <style> und kein style-Attribut.
   Mobil zuerst und bedienbar ab 360 px Breite (plan.md 6.13): keine feste Breite über 360 px, Umbruch langer Wörter statt waagerechtem Scrollen, Ziele zum Antippen ab 2,75 rem.
   Farben mit mindestens 4,5 : 1 Kontrast (WCAG 2.1 AA, plan.md 7.8). Die Verwaltung lädt diese Datei nicht. */
:root {
  --portal-text: #1b1f24;
  --portal-leise: #4a5360;
  --portal-grund: #f4f5f7;
  --portal-flaeche: #fff;
  --portal-rand: #c9ced4;
  --portal-link: #1f5fa8;
  --portal-warnung: #fff4d6;
  --portal-warnung-rand: #b07a00;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--portal-grund);
  color: var(--portal-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

a { color: var(--portal-link); text-decoration: underline; }
a:hover { text-decoration-thickness: .125rem; }
a:focus-visible, button:focus-visible { outline: .1875rem solid var(--portal-link); outline-offset: .125rem; }

img, svg { max-width: 100%; height: auto; }

h1 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.25; }
h2 { margin: 1.5rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; }
p { margin: 0 0 1rem; }

/* Der Sprung zum Inhalt: erst sichtbar, wenn die Tastatur ihn erreicht */
.portal-sprung {
  position: absolute;
  left: .5rem;
  top: -4rem;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--portal-flaeche);
  border: .125rem solid var(--portal-link);
}
.portal-sprung:focus { top: .5rem; }

.portal { display: flex; flex-direction: column; min-height: 100vh; }

.portal-kopf {
  padding: .5rem 1rem;
  background: var(--portal-flaeche);
  border-bottom: 1px solid var(--portal-rand);
}

.portal-name {
  display: inline-block;
  padding: .5rem 0;
  min-height: 2.75rem;
  color: var(--portal-text);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.portal-inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* Freitext aus einer Vereinsmaske: ausgegeben als Text, die Zeilenumbrüche zeigt das Format */
.portal-text { white-space: pre-line; }

.portal-fuss {
  padding: 1rem;
  background: var(--portal-flaeche);
  border-top: 1px solid var(--portal-rand);
  color: var(--portal-leise);
  font-size: .9375rem;
}

.portal-rechtshinweis {
  margin: 0 0 .75rem;
  padding: .6rem .8rem;
  background: var(--portal-warnung);
  border: 1px solid var(--portal-warnung-rand);
  color: var(--portal-text);
}

.portal-rechtstexte { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.portal-rechtstexte a { display: inline-block; padding: .625rem 0; min-height: 2.75rem; }

/* Die Kopfnavigation (Paket 4-02): Der Name steht oben, die Einstiege der Module darunter und umbrechen; ab 48 em stehen sie neben dem Namen. Ziele ab 2,75 rem. */
.portal-kopf { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; }
.portal-einstiege { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.portal-einstiege a { display: inline-block; padding: .625rem 0; min-height: 2.75rem; color: var(--portal-text); }
.portal-einstiege a[aria-current="page"] { font-weight: 700; text-decoration: none; border-bottom: .1875rem solid var(--portal-link); }

/* Die Kacheln der Startseite (Paket 4-02): eine Spalte auf dem Smartphone, ab 48 em mehrere. Ein ausgefallener Inhalt (KachelFehlerGrenze) zeigt nur seinen Satz. */
.portal-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; }
.portal-kachel { padding: 1rem; background: var(--portal-flaeche); border: 1px solid var(--portal-rand); }
.portal-kachel-titel { margin: 0 0 .5rem; font-size: 1.125rem; }
.portal-kachel-inhalt p { margin: 0 0 .75rem; }
.portal-kachel-link { display: inline-block; padding: .625rem 0; min-height: 2.75rem; }
.spg-kachel-ausfall { color: var(--portal-leise); }

@media (min-width: 48em) {
  .portal-kopf { padding: .5rem 2rem; }
  .portal-inhalt { padding: 2rem; }
  .portal-fuss { padding: 1rem 2rem; }
  h1 { font-size: 1.875rem; }
  .portal-kacheln { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* Die Konto-Links in der Kopfzeile und die Formulare der Portal-Konten (Paket 4-04): derselbe Aufbau wie die Einstiege, Ziele ab 2,75 rem; Felder und Knöpfe in voller Breite auf dem Smartphone. */
.portal-konto-navigation { margin-left: auto; }
.portal-konto-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.portal-konto-links a { display: inline-block; padding: .625rem 0; min-height: 2.75rem; color: var(--portal-text); }
.portal-konto-links a[aria-current="page"] { font-weight: 700; text-decoration: none; border-bottom: .1875rem solid var(--portal-link); }

.portal-formular { max-width: 26rem; margin-bottom: 1.5rem; }
/* Die Anmeldung auf der Startseite eines Vereins (ADR 0022): ein Feld wie die Kacheln, nicht breiter als das Formular darin */
.portal-anmeldung { max-width: 28rem; margin-top: 1.5rem; padding: 1rem; background: var(--portal-flaeche); border: 1px solid var(--portal-rand); }
.portal-anmeldung h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
.portal-feld { margin-bottom: 1rem; }
.portal-feld label { display: block; margin-bottom: .25rem; font-weight: 600; }
.portal-feld input { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .625rem; font: inherit; color: var(--portal-text); background: var(--portal-flaeche); border: 1px solid var(--portal-leise); border-radius: .25rem; }
/* Ein Haken mit Satz (Paket 4-08: Datenschutzerklärung und Nutzungsbedingungen bestätigen): das Kästchen links, der Satz daneben; die Zeile ist ein Ziel ab 2,75 rem. Nicht in .portal-feld, dessen Regel jedes Eingabefeld auf volle Breite zieht */
.portal-haken { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.portal-haken input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: .625rem 0 0; }
.portal-haken label { flex: 1; min-height: 2.75rem; padding: .5rem 0; }
.kurzhinweis { margin: 0 0 1rem; }
.portal-knopf { min-height: 2.75rem; padding: .5rem 1.25rem; font: inherit; font-weight: 600; color: #fff; background: var(--portal-link); border: 1px solid var(--portal-link); border-radius: .25rem; cursor: pointer; }
.portal-knopf:disabled { opacity: .6; cursor: not-allowed; }
.portal-links { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.portal-links a { display: inline-block; padding: .625rem 0; min-height: 2.75rem; }

.portal-meldung { margin: 0 0 1rem; padding: .6rem .8rem; background: var(--portal-flaeche); border: 1px solid var(--portal-rand); }
.portal-meldung-fehler { background: #fde8e8; border-color: #b3261e; }
.portal-meldung-erfolg { background: #e8f5ea; border-color: #2a7d3f; }

.portal-daten { margin: 0 0 1.5rem; }
.portal-daten dt { font-weight: 600; }
.portal-daten dd { margin: 0 0 .75rem; }

/* Der Bot-Schutz (BotSchutzFeld, Paket 2-08): Die Falle für Skripte liegt außerhalb des Bildschirms, der Hinweis der Prüfung ist leise */
.bs-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hinweis { font-size: .9375rem; color: var(--portal-leise); }
.fehler { padding: .6rem .8rem; background: #fde8e8; border: 1px solid #b3261e; }

/* Ein eigenständiger Link unter einem Formular (Zurück zur Anmeldung, Neuen Link anfordern): ein Ziel von mindestens 2,75 rem Höhe wie die Links der Kopfzeile und des Fußes */
.portal-link { display: inline-block; padding: .625rem 0; min-height: 2.75rem; }

/* Die Einwilligungen in „Mein Konto“ (Paket 4-08): je Zweck ein Block mit Titel, Wortlaut, Stand und den Knöpfen; der Wortlaut behält seine Zeilenumbrüche */
.portal-einwilligung { margin-bottom: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--portal-rand); }
.portal-einwilligung h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.portal-einwilligung-text { white-space: pre-line; }
/* Eine Aktion, die sich nicht rückgängig machen lässt (Konto löschen): rot wie die Fehlermeldungen, damit sie nicht wie die übrigen Knöpfe aussieht */
.portal-knopf-gefahr { background: #b3261e; border-color: #b3261e; }

/* Die Hinweise des Betreibers am Kopf des Portals (Paket 7-07), Kontrast über 4,5 : 1 */
.spg-ankuendigungen {
  padding: .5rem 1rem;
  background: var(--portal-warnung);
  border-bottom: .0625rem solid var(--portal-warnung-rand);
  color: #4a3300;
}

.spg-ankuendigung {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.spg-ankuendigung + .spg-ankuendigung { margin-top: .25rem; }

/* Das Auge am Passwortfeld (ADR 0015, PasswortFeld und passwort-auge.js): ein Knopf im Feld, rechts, ein Ziel von 2,75 rem. Ohne Skript bleibt er verborgen (hidden). */
.passwort-feld { position: relative; display: block; }
.passwort-feld input { padding-right: 3.25rem; }
.passwort-feld .passwort-auge { position: absolute; top: 0; bottom: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: auto 0; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: var(--portal-leise); cursor: pointer; }
.passwort-feld .passwort-auge[hidden] { display: none; }
.passwort-feld .passwort-auge:hover { color: var(--portal-text); }
.passwort-feld .passwort-auge svg { width: 1.375rem; height: 1.375rem; }
.passwort-feld .passwort-auge .auge-zu, .passwort-feld .passwort-auge[aria-pressed="true"] .auge-offen { display: none; }
.passwort-feld .passwort-auge[aria-pressed="true"] .auge-zu { display: block; }

/* Die neutrale Seite (Host ohne Verein, ADR 0015): das Gesicht von SPG-Portal selbst, im Aussehen von spg-direkt.de wie die Masken der Anmeldung (ADR 0011): Wortmarke in der Kopfzeile, die Mitteilung in einer weißen Karte
   auf grauem Grund. Farben, Schrift und Maße kommen aus marke.css, das App.razor vor dieser Datei lädt. Das Portal eines Vereins behält sein eigenes Aussehen (oben): Die Klasse portal--neutral setzt das Layout nur,
   wenn die Domäne keinem Verein gehört. Mobil zuerst: die große Karte erst ab 30 em. */
.portal--neutral { background: var(--marke-grund); color: var(--marke-text); font-family: var(--marke-schrift); }
.portal--neutral .portal-kopf { min-height: var(--marke-kopf-hoehe); padding: 0 max(1rem, 4vw); background: #ffffffeb; border-bottom: 1px solid var(--marke-linie); box-shadow: 0 1px 4px #00000008; }
.portal--neutral .portal-name { padding: 0; color: var(--marke-rot); font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; }
.portal--neutral a:focus-visible { outline-color: var(--marke-dunkel); }
.portal--neutral .portal-inhalt { flex: 0 1 auto; width: calc(100% - 2rem); max-width: 28rem; margin: 1rem auto; padding: 1.5rem; background: var(--marke-weiss); border: 1px solid var(--marke-linie); border-radius: var(--marke-radius-karte); box-shadow: var(--marke-schatten-leise); }
.portal--neutral h1 { margin: 0 0 1rem; color: var(--marke-ueberschrift); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.portal--neutral .portal-inhalt p:last-child { margin-bottom: 0; }
/* Ohne Rechtstexte und ohne Hinweis ist der Fuß leer: dann auch kein Strich und kein Rand */
.portal--neutral .portal-fuss:not(:has(*)) { display: none; }

@media (min-width: 30em) {
  .portal--neutral .portal-inhalt { margin: 3rem auto; padding: 2rem; border-radius: var(--marke-radius); }
  .portal--neutral h1 { font-size: 1.75rem; }
}