/* Meldeschicht — Tokens und Bausteine der Fahrerseite (Plan 14-07, 14-UI-SPEC „Design System“).
 *
 * Geladen nach design/dist/schrift.css, kern.css, website.css; nie werkzeug.css oder bausteine.css. Englische
 * Token-Namen (D-41 Nr. 3), damit ein Umzug nach `design` ein reiner Dateiumzug ist; kein Name aus `design` wird
 * ueberschrieben (Schriftgroessen heissen --type-*, nicht --text-*). `--color-surface-2` (UI-SPEC #f5f5f5) fehlt in
 * design/dist/kern.css am gelockten Stand; die Regeln tragen deshalb den Vertragswert als Rueckfall. Nur logische Richtungen (RTL, D-17); das
 * Eckraster und die Beispielzeichnungen stehen bewusst `direction: ltr`. Nur hell (O-07).
 */

:root {
  color-scheme: light;

  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 16px;
  --gap-4: 24px;
  --gap-5: 32px;
  --gap-6: 48px;
  --gap-7: 64px;

  --page-margin: 16px;
  --measure: min(560px, 100% - 2 * var(--page-margin));
  --control-h: 56px;
  --submit-h: 64px;
  --header-h: 56px;
  --slot-ratio: 4 / 3;
  --radius-pill: 999px;
  --radius-overlay: 16px;
  --radius-sm: 8px;
  --focus-w: 3px;
  --focus-offset: 2px;

  --type-s: 14px;
  --type-m: 18px;
  --type-l: 22px;
  --type-xl: 28px;

  --color-field-edge: var(--color-text-muted);
  /* benannte Schriften vor jeder generischen: system-ui zeigt Arabisch in Mobile Safari als Ersatzkaestchen (14-17, 261108-q50) */
  --font-arabic: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

@media (min-width: 600px) {
  :root {
    --page-margin: 24px;
  }
}

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

html {
  scroll-padding-block: var(--gap-6);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--type-m);
  font-weight: 400;
  line-height: 1.5;
}

:lang(ar),
:lang(fa),
:lang(ps),
:lang(ur),
:lang(ckb) {
  font-family: var(--font-arabic);
  line-height: 1.7;
}

.kopf,
main,
.fuss {
  inline-size: var(--measure);
  margin-inline: auto;
}

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  min-block-size: var(--header-h);
  padding-block: var(--gap-2);
}

.kopf-start {
  justify-content: flex-end;
}

main {
  padding-block-end: var(--gap-5);
}

h1 {
  font-size: var(--type-xl);
  font-weight: 600;
  line-height: 1.2;
  margin-block: var(--gap-4) var(--gap-3);
}

h2 {
  font-size: var(--type-l);
  font-weight: 600;
  line-height: 1.25;
  margin-block: 0 var(--gap-4);
}

:lang(ar) h1,
:lang(fa) h1 {
  line-height: 1.35;
}

:lang(ar) h2,
:lang(fa) h2 {
  line-height: 1.4;
}

p {
  margin-block: 0 var(--gap-3);
}

h1:focus,
.fehlerliste:focus {
  outline: none;
}

/* --- Startseite und Hinweisseiten ------------------------------------------------------------------------- */

.startseite,
.hinweisseite,
.bestaetigung {
  padding-block-start: var(--gap-7);
}

.marke {
  display: block;
  block-size: 32px;
  inline-size: auto;
  margin-block-end: var(--gap-5);
}

.startsatz {
  margin-block-end: var(--gap-6);
}

.fuss {
  padding-block: var(--gap-4);
  border-block-start: var(--border-w) solid var(--color-border);
}

/* --- Knoepfe ---------------------------------------------------------------------------------------------- */

.knopf-haupt,
.knopf,
.knopf-leise,
.sprachwahl,
.wahl-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-block-size: var(--control-h);
  min-inline-size: var(--control-h);
  padding-inline: var(--gap-4);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.knopf-haupt {
  inline-size: 100%;
  min-block-size: var(--submit-h);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 0;
  margin-block: var(--gap-4) var(--gap-3);
}

.knopf {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-field-edge);
}

.knopf-leise {
  background: none;
  border: 0;
  color: var(--color-text);
  text-decoration: underline;
  padding-inline: var(--gap-2);
  font-weight: 400;
}

.knopf-negativ {
  color: var(--color-neg);
  border-color: var(--color-neg);
}

.sprachwahl {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-field-edge);
}

.zurueck {
  margin-inline-end: auto;
}

/* --- Formular --------------------------------------------------------------------------------------------- */

.speicherstand {
  font-size: var(--type-s);
  line-height: 1.4;
  color: var(--color-text-muted);
  min-block-size: 1.4em;
}

.abschnitt {
  padding-block: var(--gap-5) 0;
  border-block-start: var(--border-w) solid var(--color-border);
  margin-block-start: var(--gap-5);
}

.zaehler {
  font-size: var(--type-m);
  font-weight: 400;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}

.wahl-knopf {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-field-edge);
}

.wahl-knopf[aria-checked="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.feld {
  display: grid;
  gap: var(--gap-2);
}

.feld-beschriftung {
  font-weight: 600;
}

.feld input,
.feld textarea {
  min-block-size: var(--control-h);
  inline-size: 100%;
  padding: var(--gap-2) var(--gap-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-field-edge);
  border-radius: var(--radius-sm);
}

.eingabe-kennzeichen {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.eingabe-km,
.feld-echo {
  font-variant-numeric: tabular-nums;
}

.feld-hinweis,
.fotoplatz-status {
  font-size: var(--type-s);
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

.feld-ungueltig input,
.feld-ungueltig textarea,
[aria-invalid="true"] {
  border-color: var(--color-neg);
}

.feld-fehler {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  color: var(--color-neg);
  font-size: var(--type-s);
  margin: 0;
}

.standorthinweis {
  display: flex;
  gap: var(--gap-2);
  align-items: flex-start;
  margin-block-start: var(--gap-5);
}

.fehlerliste {
  border: 2px solid var(--color-neg);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
  margin-block-start: var(--gap-4);
}

.fehlerliste h2 {
  color: var(--color-neg);
  margin-block-end: var(--gap-2);
}

.fehlerliste ul {
  margin: 0;
  padding-inline-start: var(--gap-4);
}

/* block statt inline-block (Nacharbeit C1): ein inline-block setzt seine Grundlinie auf die LETZTE Zeile, und der
   Aufzaehlungspunkt folgte ihr; als Block steht er auf der ersten Zeile, in LTR wie in RTL */
.fehlerliste a {
  display: block;
  min-block-size: var(--control-h);
  padding-block: var(--gap-3);
  color: var(--color-text);
}

.speicher-voll {
  margin-block-start: var(--gap-3);
}

/* --- Fotoplaetze ------------------------------------------------------------------------------------------ */

.fotoplaetze {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-2);
  margin-block-start: var(--gap-2);
}

/* das Eckraster bildet das Fahrzeug von oben ab: links = Fahrzeug links, auch in RTL (UI-SPEC, bindend) */
.fotoplaetze-ecken {
  grid-template-columns: 1fr 1fr;
  direction: ltr;
}

.fotoplatz {
  display: grid;
  gap: var(--gap-2);
  align-content: start;
}

.fotoplatz-knopf {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-block-size: var(--control-h);
  aspect-ratio: var(--slot-ratio);
  overflow: hidden;
  border-radius: var(--radius-overlay);
  background: var(--color-surface-2, #f5f5f5);
  border: 2px solid transparent;
  cursor: pointer;
}

.fotoplaetze-ecken .fotoplatz-knopf {
  aspect-ratio: auto;
  min-block-size: 168px;
}

.fotoplatz-bild {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
}

/* Beispielzeichnung (D-12): nie gespiegelt, auch in RTL; hoechstens 70 % der Kachel (UI-SPEC Fotokachel „leer“) */
.fotoplatz-beispiel {
  position: relative;
  min-block-size: 0;
  direction: ltr;
}

.fotoplatz-beispiel img {
  position: absolute;
  inset: 10%;
  inline-size: 80%;
  block-size: 80%;
  object-fit: contain;
}

/* „Neu aufnehmen“ unter einer halben Kachel (Nacharbeit C1): schmaler Innenrand, damit der Text in S25- und
   iPhone-Breite auch in langen Sprachen auf eine Zeile passt; umbrechen darf er weiterhin (UI-SPEC long-text: Umbruch
   statt Abkuerzung, 320 px und 200 % Zoom), abgeschnitten wird nie */
.fotoplatz > .knopf {
  padding-inline: var(--gap-2);
}

.fotoplatz-name {
  display: block;
  padding: var(--gap-1) var(--gap-2) 0;
  background: var(--color-surface);
  font-weight: 600;
}

.fotoplatz-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-1);
  padding: 0 var(--gap-2) var(--gap-1);
  background: var(--color-surface);
}

/* Umbruch statt Abkuerzung (UI-SPEC long-text, 320 px / 200 %): lange Woerter brechen, die Kachel waechst nach unten;
   ohne das setzt das laengste Wort die Mindestbreite, die Spalte wird breiter als die Kachel und overflow: hidden
   schneidet Text und Beispielbild ab (Geraetetest 14-17, 261108-q50) */
.fotoplatz-name,
.fotoplatz-status,
.fotoplatz > .knopf {
  overflow-wrap: anywhere;
  hyphens: auto;
  min-inline-size: 0;
}

.fotoplatz-haken {
  position: absolute;
  inset-block-start: var(--gap-2);
  inset-inline-start: var(--gap-2);
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--color-pos);
  color: var(--color-on-primary);
}

.fotoplatz-fehlt .fotoplatz-knopf,
.fotoplatz-abgewiesen .fotoplatz-knopf,
.fotoplatz-nicht_lesbar .fotoplatz-knopf {
  border-color: var(--color-neg);
}

.fotoplatz-fehlt .fotoplatz-status,
.fotoplatz-abgewiesen .fotoplatz-status,
.fotoplatz-nicht_lesbar .fotoplatz-status {
  color: var(--color-neg);
}

.fotoplatz-vorbereitung .fotoplatz-knopf {
  cursor: progress;
  opacity: 0.7;
}

.schadensbereich {
  display: grid;
  gap: var(--gap-3);
  margin-block-start: var(--gap-4);
  animation: einblenden 150ms ease-out;
}

/* --- Karten, Senden, Bestaetigung ------------------------------------------------------------------------- */

.ausstehend {
  background: var(--color-surface-2, #f5f5f5);
  border-radius: var(--radius-overlay);
  padding: var(--gap-3);
  margin-block: var(--gap-3);
}

.ausstehend .knopf-haupt {
  margin-block: var(--gap-2) 0;
}

.sendeanzeige progress {
  inline-size: 100%;
  block-size: var(--gap-2);
  accent-color: var(--color-primary);
  margin-block: var(--gap-3);
}

.bestaetigung-haken {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--color-pos);
  color: var(--color-on-primary);
  margin-block-end: var(--gap-6);
}

.zusammenfassung {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap-4);
  display: grid;
  gap: var(--gap-2);
  font-variant-numeric: tabular-nums;
}

.datenschutz ul {
  padding-inline-start: var(--gap-4);
}

/* --- Blatt (Dialog) --------------------------------------------------------------------------------------- */

.blatt {
  inline-size: var(--measure);
  max-inline-size: 100%;
  margin-block: auto 0;
  margin-inline: auto;
  padding: var(--gap-4) var(--gap-3);
  border: 0;
  border-start-start-radius: var(--radius-overlay);
  border-start-end-radius: var(--radius-overlay);
  background: var(--color-surface);
  color: var(--color-text);
}

.blatt::backdrop {
  background: var(--color-scrim);
}

.sprachwahl-liste {
  list-style: none;
  margin: 0 0 var(--gap-3);
  padding: 0;
}

.sprachwahl-liste button {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding-inline: var(--gap-3);
  font: inherit;
  text-align: start;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}

/* die Knoepfe tragen lang je Sprache; `font: inherit` oben schlaegt :lang(ar) (0,1,0), diese Regel (0,2,0) nicht */
.sprachwahl-liste :lang(ar),
.sprachwahl-liste :lang(fa) {
  font-family: var(--font-arabic);
  line-height: 1.7;
}

.sprachwahl-liste button[aria-current="true"]::before {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--color-primary);
}

.sprachwahl-hinweis {
  font-size: var(--type-s);
  color: var(--color-text-muted);
}

.blatt-knoepfe {
  display: grid;
  gap: var(--gap-3);
}

/* --- Symbole, Hilfen ---------------------------------------------------------------------------------------- */

.symbol {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bestaetigung-haken .symbol {
  inline-size: 40px;
  block-size: 40px;
}

.visuell-versteckt {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Fokus, Bewegung, erzwungene Farben ------------------------------------------------------------------------ */

:focus-visible {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.knopf-haupt:focus-visible,
.wahl-knopf[aria-checked="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-on-primary);
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }
}