/* app.css
   Gestaltung des Dashboards und der Wartungsseite (Präfix jd-), angelehnt an
   MyTeam (assets/css/app.css dort). Farben, Schriften und Abstände kommen aus
   tokens.css. Mobil zuerst: ab 360 px Breite ohne waagrechtes Scrollen,
   Tippflächen mindestens 44 px, Kacheln mindestens 48 px hoch. */

:root {
  --jd-zu-grund:      var(--jfv-sage-soft);
  --jd-zu-text:       #2F5E4A;
  --jd-ab-grund:      #FDE4E9;
  --jd-ab-text:       #B3143A;
  --jd-offen-grund:   #FFF4D1;
  --jd-offen-text:    #7A5A00;
  --jd-linie-stark:   #D0D0D6;
  --jd-flaeche-grau:  #F0F0F2;
  --jd-kopf-hoehe:    56px;
  --jd-radius-karte:  14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
/* start.js leitet gerade weiter: nichts aufblitzen lassen (app.js hebt das nach 4 s auf) */
html.jd-weiterleitung body { visibility: hidden; }

body.jd-app {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--jfv-surface);
  color: var(--jfv-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--jfv-navy); text-underline-offset: 3px; }
a:hover { color: var(--jfv-navy-deep); }
img { max-width: 100%; height: auto; }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--jfv-sage-deep); outline-offset: 2px; }

/* ---------- Kopfleiste ---------- */
.jd-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--jd-kopf-hoehe);
  padding: env(safe-area-inset-top) 12px 0;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--jfv-navy);
  color: var(--jfv-white);
}
.jd-kopf__logo {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; background: var(--jfv-white);
  display: flex; align-items: center; justify-content: center;
}
.jd-kopf__logo img { width: 36px; height: 36px; display: block; }
.jd-kopf__titel {
  min-width: 0;
  font-family: var(--font-stencil);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jd-kopf__rechts { margin-left: auto; flex-shrink: 0; }
.jd-kopf__rechts form { margin: 0; }
.jd-kopf__knopf {
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 12px;
  background: none;
  color: var(--jfv-white);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.jd-kopf__knopf:hover { border-color: var(--jfv-white); }

/* ---------- Inhalt ---------- */
.jd-inhalt {
  flex-grow: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.jd-seitentitel {
  margin: 0;
  font-family: var(--font-stencil);
  font-weight: 600;
  font-size: 28px;
  line-height: var(--lh-snug);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jfv-navy);
}
.jd-zwischentitel {
  margin: 0;
  font-family: var(--font-stencil);
  font-weight: 600;
  font-size: 20px;
  line-height: var(--lh-snug);
  color: var(--jfv-navy);
}
.jd-klein { margin: 0; font-size: 13px; color: var(--jfv-ink-3); }
.jd-reihe { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.jd-reihe form { margin: 0; }
.jd-umbruch { overflow-wrap: anywhere; }

.jd-fuss {
  padding: var(--s-3) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--jfv-ink-3);
  text-align: center;
}
.jd-fuss p { margin: 0 0 var(--s-1); }
.jd-fuss a { color: var(--jfv-ink-3); }

/* ---------- Kacheln ---------- */
.jd-kacheln {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) {
  .jd-kacheln { grid-template-columns: 1fr 1fr; }
}
.jd-kachel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 72px;
  height: 100%;
  padding: 14px 16px;
  background: var(--jfv-white);
  border: 1px solid var(--jfv-line);
  border-radius: var(--jd-radius-karte);
  color: inherit;
  text-decoration: none;
}
.jd-kachel:hover { color: inherit; border-color: var(--jd-linie-stark); box-shadow: var(--shadow-1); }
.jd-kachel:focus-visible { outline-offset: 0; }
.jd-kachel::after {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px;
  margin-left: auto;
  margin-right: 4px;
  border-top: 2.4px solid var(--jfv-ink-4);
  border-right: 2.4px solid var(--jfv-ink-4);
  transform: rotate(45deg);
}
.jd-kachel__symbol {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--jfv-sage-soft);
  display: flex; align-items: center; justify-content: center;
}
.jd-kachel__symbol img { width: 28px; height: 28px; display: block; }
.jd-kachel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.jd-kachel__titel {
  font-family: var(--font-stencil);
  font-weight: 600;
  font-size: 20px;
  line-height: var(--lh-snug);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jfv-navy);
}
.jd-kachel__info { font-size: 14px; color: var(--jfv-ink-3); }

/* ---------- Frage, Hinweise, Karten ---------- */
.jd-frage {
  padding: 14px 16px;
  border-radius: var(--jd-radius-karte);
  background: var(--jfv-navy-soft);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.jd-frage__text { margin: 0; font-weight: 600; font-size: 17px; color: var(--jfv-navy-deep); }

.jd-hinweis {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--jfv-navy-soft);
  color: var(--jfv-navy-deep);
  font-size: 15px;
}
.jd-hinweis--ok { background: var(--jd-zu-grund); color: var(--jd-zu-text); }
.jd-hinweis--warnung { background: var(--jd-offen-grund); color: var(--jd-offen-text); }
.jd-hinweis--fehler { background: var(--jd-ab-grund); color: var(--jd-ab-text); }
.jd-liste { margin: var(--s-2) 0 0; padding-left: 20px; }

.jd-karte {
  background: var(--jfv-white);
  border: 1px solid var(--jfv-line);
  border-radius: var(--jd-radius-karte);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ---------- Knöpfe ---------- */
.jd-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1.5px solid var(--jfv-navy);
  background: var(--jfv-navy);
  color: var(--jfv-white);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.jd-knopf:hover { background: var(--jfv-navy-deep); color: var(--jfv-white); }
.jd-knopf--zweit { background: var(--jfv-white); color: var(--jfv-ink-2); border-color: var(--jd-linie-stark); }
.jd-knopf--zweit:hover { background: var(--jd-flaeche-grau); color: var(--jfv-ink); }
.jd-knopf--gefahr { background: var(--jd-ab-text); border-color: var(--jd-ab-text); }
.jd-knopf--gefahr:hover { background: #8F0F2E; }
.jd-knopf--klein { min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* ---------- Formulare ---------- */
.jd-formular { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.jd-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jd-feld__name { font-weight: 600; font-size: 15px; }
.jd-feld__hilfe { font-size: 13px; color: var(--jfv-ink-3); }
.jd-eingabe {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--jd-linie-stark);
  border-radius: 12px;
  background: var(--jfv-white);
  color: var(--jfv-ink);
  font: inherit;
}
.jd-eingabe:focus { border-color: var(--jfv-navy); outline: none; box-shadow: 0 0 0 3px var(--jfv-navy-soft); }
.jd-eingabe[aria-invalid="true"] { border-color: var(--jd-ab-text); }
.jd-auswahl { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.jd-auswahl input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--jfv-navy); }
fieldset.jd-gruppe {
  border: 1px solid var(--jfv-line);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
fieldset.jd-gruppe legend {
  padding: 0 6px;
  font-family: var(--font-stencil);
  font-weight: 600;
  color: var(--jfv-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.jd-karte > fieldset.jd-gruppe { border: 0; padding: 0; }
.jd-karte > fieldset.jd-gruppe legend { padding: 0 0 6px; }

/* ---------- Wartungsseite ---------- */
.jd-menue { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.jd-menue a { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; background: var(--jfv-white);
              border: 1px solid var(--jfv-line); border-radius: 12px; font-weight: 600; text-decoration: none; }
.jd-fehlertext { margin: 0; font-size: 13px; color: var(--jd-ab-text); }
.jd-daten { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 15px; }
.jd-daten dt { color: var(--jfv-ink-3); }
.jd-daten dd { margin: 0; overflow-wrap: anywhere; }
.jd-versteckt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Kachel „Installation“ und Anleitung (Nr. 22) ---------- */
.jd-kachel--hinweis { height: auto; background: transparent; border-style: dashed; border-color: var(--jd-linie-stark); }
.jd-zurueck { margin: 0; font-size: 15px; font-weight: 600; }
.jd-anleitungen { display: flex; flex-direction: column; gap: var(--s-3); }
.jd-schritte { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.jd-inhalt > p:not([class]) { margin: 0; color: var(--jfv-ink-2); }
.jd-skizze { display: block; width: 100%; max-width: 320px; height: auto; margin: 8px 0 4px; border-radius: 14px; }
.jd-schritte li { overflow-wrap: anywhere; }