/* Oeffentliches Meldeformular (Zone A). Wird per QR-Aushang am Telefon
   geoeffnet, mit Handschuhen, im Stehen, auf alten Geraeten. Daher: grosse
   Ziele, hoher Kontrast, keine Animationen, keine externen Ressourcen.

   Farben wie im Portal (frontend/GESTALTUNG.md): Rollax-Blau #003A70 fuer
   Kopfleiste und Primaeraktion, Orange #E87A00 nur fuer Warnungen, Rot nur
   fuer Fehler, sonst Grau. */
:root {
  --grund: #ffffff;
  --eingabe-grund: #ffffff;
  --text: #1d2126;
  --gedaempft: #596170;
  --rand-eingabe: #7d8591;
  --linie: #dfe2e7;
  --blau: #003a70;
  --blau-flaeche: #eef3f9;
  --knopf: #003a70;
  --knopf-text: #ffffff;
  --knopf-hover: #002f5c;
  --kopf: #003a70;
  --warn-rand: #e87a00;
  --warn-flaeche: #fff4e5;
  --rot: #c92a2a;
  --gesperrt: #f1f3f5;
  --radius: 4px;
  --spalte-bez: 15rem;
  --spalte-feld: 40rem;
  --abstand-spalten: 2rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1c1e21;
    --eingabe-grund: #25282c;
    --text: #eceef1;
    --gedaempft: #a3a9b3;
    --rand-eingabe: #737a85;
    --linie: #33373d;
    /* Hellere Stufe des Rollax-Blau: #003A70 waere auf dunklem Grund kaum
       sichtbar. Gefuellt deshalb mit dunkler Schrift. */
    --blau: #709ac4;
    --blau-flaeche: rgba(112, 154, 196, 0.14);
    --knopf: #709ac4;
    --knopf-text: #0b1f36;
    --knopf-hover: #8aaed2;
    --kopf: #002447;
    --warn-rand: #e87a00;
    --warn-flaeche: rgba(232, 122, 0, 0.12);
    --rot: #ff8787;
    --gesperrt: #1c1e21;
  }
}

* { box-sizing: border-box; }
html {
  /* 17 px: gut lesbar im Stehen, und iOS zoomt ab 16 px nicht mehr in Felder. */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--grund);
  color: var(--text);
}
[hidden] { display: none !important; }

/* Kopfleiste wie im Portal: Rollax-Blau, weisse Schrift. */
.kopf {
  background: var(--kopf);
  color: #ffffff;
}
.kopf-innen {
  max-width: calc(var(--spalte-bez) + var(--abstand-spalten) + var(--spalte-feld) + 32px);
  margin: 0 auto;
  padding: 0 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marke {
  font-weight: 700;
  font-size: 1.05rem;
}
.sprachen {
  display: flex;
  gap: 4px;
}
.sprachen button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  cursor: pointer;
}
.sprachen button[aria-pressed='true'] {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--kopf);
  font-weight: 600;
}
.sprachen button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Seite: eine Spalte am Telefon, Bezeichnung links und Feld rechts ab 880 px. */
.seite {
  max-width: calc(var(--spalte-bez) + var(--abstand-spalten) + var(--spalte-feld) + 32px);
  margin: 0 auto;
  padding: 20px 16px 32px;
}
h1 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 6px;
}
h1:focus { outline: none; }
.einleitung {
  color: var(--gedaempft);
  margin: 0 0 8px;
  max-width: var(--spalte-feld);
}
.warnung {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--warn-rand);
  background: var(--warn-flaeche);
  max-width: calc(var(--spalte-bez) + var(--abstand-spalten) + var(--spalte-feld));
}
/* Testbetrieb: ganz oben, kraeftig — niemand soll ihn uebersehen. */
.testbetrieb {
  margin-top: 0;
  font-weight: 600;
}

/* Klammer um alle Eingaben, nur um sie ohne Token gemeinsam zu sperren. */
.eingaben {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Gruppen: Art · Wann und wo · Hergang · Angaben zur Person. */
.gruppe {
  padding: 8px 0 12px;
}
.gruppe + .gruppe {
  border-top: 1px solid var(--linie);
}

.feld {
  margin: 14px 0;
  min-width: 0;
}
.bez {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.hilfe {
  margin: -2px 0 8px;
  font-size: 0.88rem;
  color: var(--gedaempft);
}
/* Zweiter Hinweis im selben Hilfetext (Namen Dritter beim Hergang). */
.hilfe-zeile { display: block; }

a {
  color: var(--blau);
  text-underline-offset: 2px;
}
a:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

input[type='text'],
input[type='date'],
input[type='time'],
textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--eingabe-grund);
  border: 1px solid var(--rand-eingabe);
  border-radius: var(--radius);
}
input[type='date'],
input[type='time'] {
  -webkit-appearance: none;
  appearance: none;
}
input::-webkit-date-and-time-value { text-align: left; }
textarea {
  resize: vertical;
  line-height: 1.45;
}
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 1px;
  border-color: var(--blau);
}
/* Nach den Regeln oben, mit Elementnamen: setzt sich gegen input[type='date']
   und gegen den Fokusrand durch. Das fehlerhafte Feld bekommt sofort den
   Fokus; der zeigt sich dann nur noch ueber die blaue Kontur. */
input[aria-invalid='true'],
textarea[aria-invalid='true'],
input[aria-invalid='true']:focus-visible,
textarea[aria-invalid='true']:focus-visible {
  border-color: var(--rot);
  box-shadow: inset 0 0 0 1px var(--rot);
}
/* Ohne Token gesperrt (siehe melden.js). */
input:disabled,
textarea:disabled {
  background: var(--gesperrt);
  opacity: 0.6;
  cursor: not-allowed;
}
.arten:has(input:disabled) {
  opacity: 0.6;
}
.option:has(input:disabled),
.option input:disabled {
  cursor: not-allowed;
}
.feldfehler {
  margin: 6px 0 0;
  color: var(--rot);
  font-weight: 600;
}

/* Datum und Uhrzeit nebeneinander, auch am Telefon. Ein Raster statt Flex,
   damit beide Felder auf einer Hoehe stehen, auch wenn eine Bezeichnung
   (tr, ru, pl) zweizeilig umbricht. */
@media (min-width: 341px) and (max-width: 879px) {
  .zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    margin: 14px 0;
  }
  .zeile > .feld { display: contents; }
  .zeile > .feld:first-child > * { grid-column: 1; }
  .zeile > .feld:last-child > * { grid-column: 2; }
  .zeile .bez { grid-row: 1; align-self: end; }
  .zeile input { grid-row: 2; }
  .zeile > .feld > .feldfehler { grid-row: 3; grid-column: 1 / -1; }
}

/* Art des Ereignisses: eine Liste, jede Zeile als Ganzes treffbar. */
.feld-auswahl {
  border: 0;
  padding: 0;
}
.feld-auswahl > legend {
  /* float nimmt die Legende aus dem Rahmen des fieldset und macht sie zu
     einer gewoehnlichen Bezeichnung. */
  float: left;
  width: 100%;
  padding: 0;
}
.arten {
  clear: both;
  border: 1px solid var(--rand-eingabe);
  border-radius: var(--radius);
}
.option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 56px;
  padding: 12px 14px;
  cursor: pointer;
}
.option + .option {
  border-top: 1px solid var(--linie);
}
.option input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--blau);
  cursor: pointer;
}
.option:has(input:checked) {
  background: var(--blau-flaeche);
}
.option:has(input:focus-visible) {
  outline: 2px solid var(--blau);
  outline-offset: -2px;
}
.option-text { min-width: 0; }
.option-name {
  display: block;
  font-weight: 600;
}
.option-beschreibung {
  display: block;
  color: var(--gedaempft);
  font-size: 0.94rem;
}
.option-beschreibung::first-letter { text-transform: uppercase; }

.zusage {
  margin: 14px 0 4px;
  max-width: var(--spalte-feld);
}

.honigtopf { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Bot-Pruefung: Platz nur, wenn sie gezeichnet ist. */
.turnstile:not(:empty) { margin-bottom: 16px; }

.aktionen {
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}
.fehler {
  margin: 0 0 12px;
  color: var(--rot);
  font-weight: 600;
}
.datenschutz-hinweis {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--gedaempft);
}

.knopf {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
}
.knopf-primaer {
  color: var(--knopf-text);
  background: var(--knopf);
  border: 1px solid var(--knopf);
}
.knopf-primaer:hover:not([disabled]) {
  background: var(--knopf-hover);
  border-color: var(--knopf-hover);
}
.knopf-standard {
  color: var(--text);
  background: var(--eingabe-grund);
  border: 1px solid var(--rand-eingabe);
}
.knopf:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}
.knopf[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Ab Tabletbreite Knoepfe in normaler Breite, rechtsbuendig unter dem
   Formular. Nur am Telefon bildschirmbreit. */
@media (min-width: 600px) {
  .aktionen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .aktionen > .fehler,
  .aktionen > .datenschutz-hinweis {
    align-self: stretch;
  }
  .knopf {
    width: auto;
  }
}

.danke-text {
  margin: 0 0 20px;
  max-width: var(--spalte-feld);
}

.fuss {
  max-width: calc(var(--spalte-bez) + var(--abstand-spalten) + var(--spalte-feld) + 32px);
  margin: 0 auto;
  padding: 12px 16px 24px;
  font-size: 0.82rem;
  color: var(--gedaempft);
}

/* Datenschutzinformation in der Fusszeile: zugeklappt nur eine Zeile,
   aufgeklappt in Lesegroesse, damit sie sich am Telefon lesen laesst. */
.datenschutz > summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--blau);
  font-size: 0.94rem;
  cursor: pointer;
}
.datenschutz > summary:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}
.datenschutz-inhalt {
  max-width: var(--spalte-feld);
  font-size: 0.94rem;
  color: var(--text);
  /* Lange Adressen duerfen die Seite nicht verbreitern. */
  overflow-wrap: anywhere;
}
.datenschutz-inhalt h2 {
  margin: 16px 0 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.datenschutz-inhalt p,
.datenschutz-inhalt ul {
  margin: 0 0 8px;
}
/* Vermerk, solange die Information Platzhalter enthaelt. */
.datenschutz-inhalt .datenschutz-entwurf {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 4px solid var(--warn-rand);
  background: var(--warn-flaeche);
  font-weight: 600;
}
.datenschutz-inhalt ul {
  padding-left: 1.25em;
}

/* Breiter Bildschirm: Bezeichnung links, Feld rechts. Hilfetexte stehen dann
   unter dem Feld, damit die Bezeichnung auf Hoehe des Feldes bleibt. */
@media (min-width: 880px) {
  .seite { padding-top: 28px; }
  .feld {
    display: grid;
    grid-template-columns: var(--spalte-bez) minmax(0, var(--spalte-feld));
    /* Die Bezeichnung reicht ueber alle Zeilen. Bricht sie laenger um, als
       das Feld hoch ist (pl, ru), rueckt der Hilfetext nicht vom Feld ab. */
    grid-template-areas:
      'bez eingabe'
      'bez hilfe'
      'bez fehler';
    column-gap: var(--abstand-spalten);
    align-items: start;
  }
  .feld > .bez {
    grid-area: bez;
    margin: 0;
    padding-top: 11px;
  }
  .feld > input,
  .feld > textarea { grid-area: eingabe; }
  .feld > .hilfe {
    grid-area: hilfe;
    margin: 6px 0 0;
  }
  .feld > .feldfehler { grid-area: fehler; }
  .feld-kurz > input { max-width: 12rem; }

  .feld-auswahl { display: block; }
  .feld-auswahl > legend {
    width: var(--spalte-bez);
    padding-top: 13px;
  }
  .arten {
    clear: none;
    margin-left: calc(var(--spalte-bez) + var(--abstand-spalten));
    max-width: var(--spalte-feld);
  }

  .zusage,
  .aktionen > * {
    margin-left: calc(var(--spalte-bez) + var(--abstand-spalten));
  }
  .aktionen {
    max-width: calc(var(--spalte-bez) + var(--abstand-spalten) + var(--spalte-feld));
  }
  .knopf {
    min-height: 44px;
    padding: 9px 22px;
  }
}