/* Fahrzeugprotokoll – mobile Erfassung. Große Touch-Flächen (mind. 48 px),
   gut lesbar auch im Freien, keine externen Ressourcen. */

:root {
  --blau: #0b4f8a;
  --blau-hell: #e6eef7;
  --text: #10213a;
  --text-leise: #56657a;
  --rand: #c9d2de;
  --flaeche: #ffffff;
  --hintergrund: #f4f6f9;
  --gruen: #1d7a46;
  --gruen-hell: #e3f3ea;
  --rot: #b42318;
  --rot-hell: #fdecea;
  --gelb-hell: #fff6dd;
  --radius: 10px;
  --abstand: 16px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Angesprungene und fokussierte Elemente nicht unter der Navigationsleiste */
  scroll-padding-top: 72px;
  scroll-padding-bottom: 96px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  background: var(--hintergrund);
  padding-bottom: env(safe-area-inset-bottom);
}

.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px var(--abstand);
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--blau);
  color: #ffffff;
}

.marke-logo {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.marke-logo span {
  font-weight: 400;
  opacity: 0.85;
}

.netzstatus {
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.netzstatus.offline {
  background: #f2b705;
  color: var(--text);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--abstand);
}

.laden {
  color: var(--text-leise);
}

h2 {
  font-size: 22px;
  margin: 8px 0 16px;
}

h2:focus {
  outline: none;
}

h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.abschnitt {
  margin-top: 28px;
}

/* Schaltflächen */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--blau);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.knopf.primaer {
  background: var(--blau);
  color: #ffffff;
}

.knopf.sekundaer {
  background: var(--flaeche);
  color: var(--blau);
}

.knopf.gefahr {
  background: var(--flaeche);
  border-color: var(--rot);
  color: var(--rot);
}

.knopf.klein {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 15px;
}

.knopf.gross {
  display: flex;
  width: 100%;
  min-height: 56px;
  margin: 12px 0;
  font-size: 18px;
}

.knopf:disabled {
  opacity: 0.4;
  cursor: default;
}

.knopf:focus-visible,
.link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f2b705;
  outline-offset: 2px;
}

.link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--blau);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.knopfleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Formularfelder */

.feld {
  margin: 0 0 18px;
}

.feld > label,
.label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.feld-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feld-zeile > input,
.feld-zeile > select,
.feld-zeile > textarea {
  flex: 1;
  min-width: 0;
}

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}

input[type="range"] {
  width: 100%;
  min-height: 48px;
  accent-color: var(--blau);
}

#kennzeichen {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.einheit,
.wert {
  font-weight: 600;
  white-space: nowrap;
}

.feldhinweis {
  margin: -8px 0 16px;
  color: var(--text-leise);
  font-size: 15px;
}

.feldhinweis.warnung {
  color: var(--rot);
}

fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}

.gruppe {
  padding: 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.gruppe legend {
  padding: 0 6px;
}

/* Auswahl als große Schaltflächen */

.auswahl-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option {
  flex: 1 1 0;
  min-width: 96px;
}

.option input {
  position: absolute;
  opacity: 0;
}

.option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: center;
  cursor: pointer;
}

.option input:checked + span {
  border-color: var(--blau);
  background: var(--blau-hell);
  font-weight: 700;
}

.option input:focus-visible + span {
  outline: 3px solid #f2b705;
  outline-offset: 2px;
}

.schalter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 12px;
  font-weight: 600;
}

.schalter input {
  width: 26px;
  height: 26px;
  accent-color: var(--blau);
}

/* Karten und Hinweise */

.karte {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 6px 14px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.karte dt {
  color: var(--text-leise);
}

.karte dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hinweis {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 4px solid #f2b705;
  border-radius: 6px;
  background: var(--gelb-hell);
}

.hinweis.fehler {
  border-left-color: var(--rot);
  background: var(--rot-hell);
}

.hinweis ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.marke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--blau-hell);
  color: var(--blau);
}

.marke.ok,
.marke.status-eingereicht {
  background: var(--gruen-hell);
  color: var(--gruen);
}

.marke.fehler {
  background: var(--rot-hell);
  color: var(--rot);
}

.marke.wartet,
.marke.status-einreichen {
  background: var(--gelb-hell);
  color: #7a5a00;
}

/* Wizard */

.wizard-kopf {
  margin-bottom: 12px;
}

.wizard-typ {
  margin: 0 0 10px;
  color: var(--text-leise);
  font-weight: 600;
}

.schritte {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schritte li {
  flex: 1;
}

.schritt-punkt {
  width: 100%;
  min-height: 40px;
  border: 2px solid var(--rand);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--text-leise);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.schritt-punkt[aria-current="step"] {
  border-color: var(--blau);
  background: var(--blau);
  color: #ffffff;
}

.wizard-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 24px calc(-1 * var(--abstand)) 0;
  padding: 12px var(--abstand);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(244, 246, 249, 0.96);
  border-top: 1px solid var(--rand);
}

.wizard-nav .knopf {
  flex: 1;
}

/* Fotokacheln */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.kacheln.einzeln {
  grid-template-columns: minmax(0, 1fr);
  max-width: 320px;
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px;
  border: 2px dashed var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kachel.hat-foto {
  border-style: solid;
  border-color: var(--gruen);
}

.kachel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--hintergrund);
}

.kachel img.silhouette {
  object-fit: contain;
  padding: 10px;
}

.kachel-titel {
  font-weight: 700;
}

.kachel-hinweis {
  color: var(--text-leise);
  font-size: 14px;
}

.kachel .marke {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* Schäden */

.schaeden,
.liste,
.zubehoer {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.schaden,
.zubehoer-eintrag {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.zubehoer-eintrag .feld,
.zubehoer-eintrag fieldset {
  margin-bottom: 10px;
}

.schaden-fotos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.schaden-fotos figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 128px;
  margin: 0;
}

.schaden-fotos img {
  width: 128px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
}

/* Unterschrift */

canvas.unterschrift {
  display: block;
  width: 100%;
  height: 180px;
  margin-bottom: 8px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  touch-action: none;
}

/* Übersicht und Ergebnis */

.liste li {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.eintrag {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ergebnis {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--rand);
}

.ergebnis.erfolg {
  border-color: var(--gruen);
  border-left-width: 6px;
}

.protokoll-nr {
  font-size: 20px;
}

@media (min-width: 640px) {
  .kacheln {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Kennzeichnung der Testumgebung */

.testumgebung {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2b705;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.ist-testumgebung .kopf {
  background: repeating-linear-gradient(135deg, #0b4f8a 0 18px, #0d5a9c 18px 36px);
}