/* Freier Tahoma-Nachbau aus dem Wine-Projekt, siehe fonts/LIZENZ.txt */
@font-face {
  font-family: "Karten Tahoma";
  src: url("fonts/tahoma.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Karten Tahoma";
  src: url("fonts/tahomabd.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f2f2ef;
  --surface: #ffffff;
  --ink: #161616;
  --muted: #5c5c58;
  --line: #d2d2cc;
  --accent: #2f6f1a;
  --accent-soft: #e3ebd8;
  --accent-fill: var(--ink);   /* Hauptknöpfe: volle Tintenfarbe … */
  --on-fill: var(--bg);        /* … mit Schrift in Hintergrundfarbe */
  --sunk: #e4e4df;
  /* Klare Farben der Karten (G, K, M, Faktor Mensch, FORDEC-Deckblatt) */
  --k-orange: #e39a33;
  --k-blau: #8fbbd0;
  --k-gruen: #b9c872;
  --k-gelb: #e8d887;
  --k-dunkel: #3a3735;
  --auf-farbe: #161616;        /* Schrift und Symbole auf Kartenfarben, in hell und dunkel gleich */
  --tap: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.4 "Karten Tahoma", Tahoma, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
svg { display: block; flex: none; }

/* Auswahlseite */
.home {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(28px + var(--safe-t)) calc(16px + var(--safe-r)) calc(28px + var(--safe-b)) calc(16px + var(--safe-l));
}
/* Das Logo hat einen weißen Hintergrund; multiply lässt ihn im App-Hintergrund verschwinden. */
.logo { display: block; flex: none; width: auto; height: clamp(42px, 13.9vw, 52px); mix-blend-mode: multiply; }
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-head .logo { height: clamp(46px, 15.5vw, 58px); }
.home h1 { margin: 0; font-size: clamp(20px, 5.9vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.home header p { margin: 4px 0 20px; color: var(--muted); }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Drei Kartensätze: der dritte steht mittig unter den ersten beiden. */
.tiles.drei > :nth-child(3) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.tile-bild { display: block; width: 100%; aspect-ratio: 2000 / 1326; }
.tile-icon { display: grid; place-items: center; font-weight: 700; letter-spacing: .06em; }
.farbe-blau { background: var(--k-blau); color: var(--auf-farbe); }
.farbe-orange { background: var(--k-orange); color: var(--auf-farbe); }
.farbe-gruen { background: var(--k-gruen); color: var(--auf-farbe); }
.tile-bald { box-shadow: inset 0 0 0 1px var(--line); background: transparent; color: var(--muted); }
.tile-bald .tile-icon { background: var(--sunk); }
.tile-text { display: block; padding: 10px 12px 12px; }
.tile-text strong { display: block; font-size: 17px; line-height: 1.25; }
.tile-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.tile-breit { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.tile-breit .tile-text { padding: 14px 14px 14px 0; }
.tile-zeichen { display: grid; place-items: center; flex: none; width: 60px; align-self: stretch; color: var(--accent); }

/* Kurzanleitung */
.anleitung h2 { margin: 8px 0 10px; font-size: 22px; line-height: 1.2; }
.anleitung h3 { margin: 22px 0 6px; font-size: 17px; }
.anleitung p { margin: 0 0 12px; }
.anleitung ol, .anleitung ul { margin: 0 0 14px; padding-left: 1.4em; }
.anleitung li { margin-bottom: 8px; line-height: 1.45; }
.anleitung li::marker { color: var(--accent); font-weight: 700; }
.trenner { margin: 0 calc(-1 * var(--safe-r)) 20px calc(-1 * var(--safe-l)); border: 0; border-top: 2px solid var(--line); }

/* Hinweis „Neue Version verfügbar“, liegt über jeder Seite */
.update {
  position: fixed;
  z-index: 50;
  top: calc(10px + var(--safe-t));
  left: calc(10px + var(--safe-l));
  right: calc(10px + var(--safe-r));
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 16px;
  border-radius: 0;
  background: var(--ink);
  color: var(--bg);
}
.update p { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.25; }
.update button { border: 0; font: inherit; cursor: pointer; }
.update-ja { min-height: 44px; padding: 0 14px; border-radius: 0; background: var(--bg); color: var(--ink); font-weight: 700; }
.update-nein { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; background: transparent; color: var(--bg); }

/* Gelbes i in der Kartenansicht und die Erklärungsseite dahinter */
.info-btn {
  grid-area: pos;
  justify-self: end;
  align-self: end;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 18px 2px 0;
  border-radius: 50%;
  background: #f2c230; /* gelber Kreis wie die Buchstabenkreise auf den Karten */
  color: #1c1d1a;
  font-weight: 700; font-size: 21px; line-height: 1;
  text-decoration: none;
  box-shadow: none;
}
.viewer .pos { align-self: end; }
/* Blauer Kreis links über dem Zurück-Pfeil: PDF zur aktuellen Karte (z. B. FB = Faltblatt) */
.pdf-btn {
  grid-area: pos;
  justify-self: start;
  align-self: end;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 2px 18px;
  border-radius: 50%;
  background: #014e60; /* Farbe des Schriftzugs „ACHTUNG LAWINEN!“ auf der Deckkarte */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}
.erklaerung .schema { display: block; width: 100%; height: auto; margin: 16px 0 8px; border-radius: 0; background: #fff; }
.erklaerung .schritte { margin: 0 0 14px; }
.erklaerung .schritte dt { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.erklaerung .schritte dd { margin: 4px 0 0 48px; line-height: 1.45; }
.erklaerung .buchstabe {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border: 2px solid #1c1d1a; border-radius: 50%;
  color: #000; font-weight: 700; font-size: 18px;
}
.erklaerung .buchstabe.ohne-rand { border-color: transparent; }
.erklaerung .zeilen { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px 12px; margin: 16px 0; }
.erklaerung .zeilen p { margin: 0; line-height: 1.45; }
.erklaerung .pdf-link { margin-top: 24px; }

/* Link zu Impressum & Datenschutz, auf jeder Seite */
.recht { grid-area: recht; text-align: center; font-size: 13px; }
.recht a { display: inline-block; padding: 10px 12px; color: var(--muted); }
.home .recht { margin-top: 20px; }
.page .recht { padding-bottom: 12px; }
.viewer .recht a { padding: 0 12px 10px; }
.recht-text address { margin: 0 0 12px; font-style: normal; line-height: 1.5; }
.recht-text p, .recht-text li { overflow-wrap: anywhere; }
.recht-text a { color: var(--accent); }
.widerspruch { margin-top: 18px; padding: 2px 14px 4px; border: 2px solid var(--ink); border-radius: 0; background: var(--surface); }
.widerspruch h3 { margin-top: 12px; }

/* Gruppenseiten */
[hidden] { display: none !important; }
.page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.page .bar { max-width: 880px; margin: 0 auto; }
.page-body { max-width: 560px; margin: 0 auto; padding: 4px 16px 32px; }
.hint { margin: 0 0 16px; color: var(--muted); }
.hint.klein { margin-top: 14px; font-size: 14px; text-align: center; }
.hint.mitte { margin-top: 14px; text-align: center; }
.label { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.choices { display: grid; gap: 12px; }
.choices.zwei { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.choice strong { font-size: 18px; }
.choice small { color: var(--muted); font-size: 14px; line-height: 1.3; }
.choice .gross { font-size: 30px; font-weight: 700; line-height: 1.1; }
.segment {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 0;
  background: var(--sunk);
}
.segment button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
}
.segment button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.btn, .btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.btn { background: var(--accent-fill); color: var(--on-fill); }
.btn-sec { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn:disabled, .btn-sec:disabled { opacity: .4; cursor: default; }
.stack { display: grid; gap: 10px; }
.stack.schmal { max-width: 340px; margin: 16px auto 0; }
.hint.gross-abstand { margin-top: 48px; font-size: 18px; }
.choice:disabled { opacity: .5; cursor: default; }
.qr-info { margin: 0 0 12px; color: var(--muted); text-align: center; }
.qr-info strong { display: block; color: var(--ink); font-size: 22px; }
.qr-box {
  width: min(100%, 340px, 56dvh);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 6px;
  border-radius: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-nav { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; max-width: 340px; margin: 16px auto 0; }
.scanner {
  position: relative;
  width: min(100%, 420px);
  height: min(62dvh, 520px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: #1d1f1c;
}
.scanner video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan-rahmen {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgb(255 255 255 / .9);
  border-radius: 0;
  box-shadow: 0 0 0 999px rgb(0 0 0 / .28);
}
.install {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.install p { margin: 0; }
.install button {
  min-height: var(--tap);
  margin-bottom: 10px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--accent-fill);
  color: var(--on-fill);
  font-weight: 600;
}

/* Kartenansicht */
.viewer {
  display: grid;
  grid-template: "bar" auto "track" minmax(0, 1fr) "pos" auto "controls" auto "recht" auto / minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 72px;
  padding: 6px 8px;
}
.bar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  /* Lange Kartentitel: höchstens zwei Zeilen neben dem Logo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.icon-btn:disabled { opacity: .3; cursor: default; }
.bar .logo { margin: 0 6px 0 2px; }

.track {
  grid-area: track;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  container-type: size;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.card {
  display: block;
  width: min(100cqw - 24px, (100cqh - 16px) * 1.5083);
  aspect-ratio: 2000 / 1326;
  padding: 0;
  border: 0;
  background: none;
  perspective: 1400px;
}
.card-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.3, .7, .3, 1);
}
.card.flipped .card-inner { transform: rotateY(180deg); }
.face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-user-drag: none;
  user-select: none;
}
.face.back { transform: rotateY(180deg); }

.pos {
  grid-area: pos;
  margin: 0;
  padding: 4px 16px 2px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  gap: 8px;
  padding: 8px 12px 12px;
}
.flip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  border: 0;
  border-radius: 0;
  background: var(--accent-fill);
  color: var(--on-fill);
  font-weight: 600;
}
.controls .icon-btn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.controls.einzeln { grid-template-columns: minmax(0, 1fr); }

/* Handy quer: Karte maximal groß, Bedienung seitlich */
@media (orientation: landscape) and (max-height: 520px) {
  .viewer {
    grid-template: "bar track controls" minmax(0, 1fr) "bar track pos" auto "bar track recht" auto / auto minmax(0, 1fr) auto;
  }
  .viewer .bar { flex-direction: column; justify-content: space-between; padding: 8px 0 8px 8px; }
  .viewer .bar h1, .flip-btn span, .pos .seite { display: none; }
  .controls.einzeln { grid-template-rows: var(--tap); }
  .viewer .bar .logo {
    position: fixed;
    top: calc(12px + var(--safe-t));
    right: calc(8px + var(--safe-r));
    width: var(--tap);
    height: auto;
    margin: 0;
  }
  .controls {
    grid-template-columns: var(--tap);
    grid-template-rows: var(--tap) var(--tap) var(--tap);
    align-content: center;
    padding: 8px 8px 0 0;
  }
  .pos { padding: 0 8px 4px 0; }
  .viewer .recht { font-size: 10px; line-height: 1.3; }
  .info-btn {
    position: fixed;
    top: 50%;
    left: calc(14px + var(--safe-l));
    margin: -20px 0 0;
  }
  .pdf-btn {
    position: fixed;
    top: 50%;
    left: calc(14px + var(--safe-l));
    margin: 28px 0 0;
  }
  .viewer .recht a { padding: 0 8px 8px 0; }
  .viewer .recht span { display: block; }
  .viewer .recht .und { display: none; }
  .card { width: min(100cqw - 12px, (100cqh - 8px) * 1.5083); }
}

/* Inhaltsverzeichnis */
#toc {
  width: min(100%, 560px);
  max-width: none;
  max-height: min(86dvh, 720px);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
#toc[open] { display: flex; flex-direction: column; }
#toc::backdrop { background: rgb(20 22 18 / .5); }
.toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 4px 16px;
  border-bottom: 1px solid var(--line);
}
.toc-head h2 { margin: 0; font-size: 18px; }
.toc-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 6px 6px calc(10px + var(--safe-b));
  list-style: none;
}
.toc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.toc-item[aria-current] { background: var(--accent-soft); }
.toc-item img {
  flex: none;
  width: 72px;
  height: 48px;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .1);
}
.toc-item strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.toc-item small { display: block; margin-top: 1px; color: var(--muted); font-size: 13px; line-height: 1.25; }

@media (orientation: landscape) and (max-height: 520px) {
  #toc { max-height: 100dvh; margin: auto auto 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card-inner { transition: none; }
}

/* Dunkelmodus. app.js setzt data-theme="dark" oder "light" am <html>-Element:
   je nach Wahl in der App (System / Hell / Dunkel) und der Einstellung des Geräts.
   Die Karten selbst bleiben unverändert. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111210;
  --surface: #1c1d1b;
  --ink: #f0f0ec;
  --muted: #a3a39d;
  --line: #343530;
  --accent: #8fcf63;
  --accent-soft: #263019;
  --sunk: #272825;
}
/* Logo: Weiß wird durch Umkehren schwarz und verschwindet mit screen im dunklen Hintergrund. */
[data-theme="dark"] .logo { filter: invert(1) brightness(1.5); mix-blend-mode: screen; }
[data-theme="dark"] .erklaerung .buchstabe { border-color: #000; }

/* Umschalter Darstellung auf der Startseite */
.design { margin-top: 24px; }
.design .segment { margin-bottom: 0; }

/* ---------- Startseite: Modus-Kacheln, Listenzeile, Zurück-Link ---------- */
.tile { transition: transform .12s ease-out, opacity .12s ease-out; }
.tile:active, .choice:active, .zeile:active { transform: scale(.98); opacity: .85; }
.tile-modus .tile-bild { aspect-ratio: 4 / 3; }
.tile-icon svg { width: 44%; height: auto; max-width: 72px; }
.zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin-top: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.zeile-zeichen { color: var(--ink); }
.zeile-text { flex: 1; min-width: 0; }
.zeile-text strong { display: block; font-size: 17px; line-height: 1.25; }
.zeile-text small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.zeile-pfeil { color: var(--muted); }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: -10px 0 2px -7px;
  padding-right: 10px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.zurueck svg { width: 22px; height: 22px; }

/* ---------- Bewegung: Ebenen schieben sich wie ein Stapel ---------- */
@keyframes rein-von-rechts { from { opacity: 0; transform: translateX(32px); } }
@keyframes raus-nach-links { to { opacity: 0; transform: translateX(-32px); } }
@keyframes rein-von-links { from { opacity: 0; transform: translateX(-32px); } }
@keyframes raus-nach-rechts { to { opacity: 0; transform: translateX(32px); } }
@keyframes blatt-hoch { from { transform: translateY(100%); } }
@keyframes einblenden { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  html[data-nav="vor"]::view-transition-old(root) { animation-name: raus-nach-links; }
  html[data-nav="vor"]::view-transition-new(root) { animation-name: rein-von-rechts; }
  html[data-nav="zurueck"]::view-transition-old(root) { animation-name: raus-nach-rechts; }
  html[data-nav="zurueck"]::view-transition-new(root) { animation-name: rein-von-links; }
  #toc[open] { animation: blatt-hoch .26s cubic-bezier(.2, .7, .2, 1); }
  #toc[open]::backdrop { animation: einblenden .2s ease-out; }
  .update { animation: einblenden .2s ease-out; }
}