/* BSG TargetTrack – Grundlayout der Anwendung nach dem freigegebenen UI-Entwurf (E-129).
   Farben 1:1 aus docs/entwuerfe/design-tokens.json (Test kern/tests.py prüft das), Hell/Dunkel nach
   Systemeinstellung (E-063). Schriften: Zilla Slab, Atkinson Hyperlegible, Saira Condensed (E-066) – werden
   später lokal ausgeliefert (offline); bis dahin greifen die Ersatzschriften. */
:root {
  --grund: #F7F5EF;
  --flaeche: #FFFFFF;
  --flaeche-zart: #EDF1EA;
  --text: #1B231D;
  --text-leise: #4F5A52;
  --linie: #D6D0C0;
  --tanne: #0B3B1E;
  --auf-tanne: #FFFFFF;
  --gold: #B08D3C;
  --gold-auf-tanne: #D9B867;
  --gold-text: #7A5A14;
  --melde-rand: var(--tanne);
  --buehne-innen: #FBF8EF;
  --buehne-aussen: #EAE3D0;
  --spruch: #0B3B1E;
  --primaer: #0B3B1E;
  --auf-primaer: #FFFFFF;
  --akzent: #0A6B12;
  --fokus: #1F5FA8;
  --ok: #1E6B2A;
  --ok-grund: #E2F0E3;
  --pruefen: #7D5200;
  --pruefen-grund: #FFF0CC;
  --fehler: #A32018;
  --fehler-grund: #FBE3E0;
  --wartet: #1F5FA8;
  --wartet-grund: #E3ECF8;
  --schrift-titel: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --schrift-text: "Atkinson Hyperlegible", "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-zahl: "Saira Condensed", "Arial Narrow", sans-serif;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(11, 59, 30, .08), 0 8px 24px rgba(11, 59, 30, .07);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0D1711;
    --flaeche: #142219;
    --flaeche-zart: #1B2D21;
    --text: #E8EDE6;
    --text-leise: #A9B5AB;
    --linie: #2E4033;
    --tanne: #09301A;
    --auf-tanne: #F2F5F0;
    --gold: #C9A552;
    --gold-auf-tanne: #D9B867;
    --gold-text: #D9B867;
  --melde-rand: var(--gold);
  --buehne-innen: #124A2A;
  --buehne-aussen: #06241A;
  --spruch: #E9CF8E;
    --primaer: #D4B062;
    --auf-primaer: #15200F;
    --akzent: #7CCF86;
    --fokus: #8DB8F2;
    --ok: #86D290;
    --ok-grund: #183A20;
    --pruefen: #F2C66B;
    --pruefen-grund: #3A2D0E;
    --fehler: #F19A91;
    --fehler-grund: #3D1714;
    --wartet: #8DB8F2;
    --wartet-grund: #16263D;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grund); color: var(--text); font: 17px/1.5 var(--schrift-text); }
a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.kopf { background: var(--tanne); color: var(--auf-tanne); display: flex; align-items: center; gap: 14px;
        padding: 10px 18px; border-bottom: 3px solid var(--gold); }
.kopf img { width: 44px; height: 44px; }
.kopf .titel { font-family: var(--schrift-titel); font-size: 20px; font-weight: 700; }
.kopf .verein { font-size: 13px; color: var(--gold-auf-tanne); }
.kopf .rechts { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.kopf .rechts button { background: none; border: 1px solid var(--gold-auf-tanne); color: var(--auf-tanne);
                       border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; min-height: 40px; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
h1, h2 { font-family: var(--schrift-titel); color: var(--text); margin: 0 0 12px; }
.karte { background: var(--flaeche); border: 0; border-radius: 14px; box-shadow: var(--schatten); padding: 18px;
         min-width: 0; }
.schmal { max-width: 440px; margin: 32px auto; }
.zentriert { text-align: center; }
.wappen-gross { width: 120px; height: 120px; display: block; margin: 0 auto 8px; }
.logo-gross img { width: 210px; height: auto; display: block; margin: 0 auto 4px; }
label { display: block; font-weight: 700; margin: 14px 0 6px; }
input, select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px;
                background: var(--flaeche); color: var(--text); font: inherit; }
/* iPhone (Safari) gibt Datumsfeldern eine Mindestbreite und mittigen Text – sonst ragen sie über den Rand */
input[type="date"], input[type="datetime-local"], input[type="time"] { -webkit-appearance: none; appearance: none;
  min-width: 0; display: block; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; }
input[readonly] { background: var(--flaeche-zart); color: var(--text-leise); }
.knopf { display: inline-block; width: 100%; min-height: 48px; margin-top: 20px; border: 0; border-radius: 8px;
         background: var(--primaer); color: var(--auf-primaer); font: 700 17px var(--schrift-text); cursor: pointer;
         text-align: center; text-decoration: none; line-height: 48px; }
.hinweis { font-size: 14px; color: var(--text-leise); }
/* Impressum und Datenschutz unten auf jeder Seite (E-202) */
.rechtliches { margin: 28px 0 8px; text-align: center; font-size: 13px; color: var(--text-leise); }
.rechtliches a { color: inherit; }
.rechtstext { max-width: 760px; margin: 0 auto; }
.rechtstext p { line-height: 1.5; }
.meldung { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; }
.meldung.ok { background: var(--ok-grund); color: var(--ok); }
.meldung.fehler { background: var(--fehler-grund); color: var(--fehler); }
.meldung.pruefen { background: var(--pruefen-grund); color: var(--pruefen); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.kachel { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--gold);
          border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; min-height: 96px; }
.kachel strong { font-family: var(--schrift-titel); font-size: 18px; display: block; }
.kachel.bald { opacity: .6; }
.link-kasten { word-break: break-all; background: var(--wartet-grund); color: var(--wartet); padding: 10px; border-radius: 8px; }
/* Darstellung aus dem Profil (E-063): überschreibt die Geräteeinstellung */
:root[data-thema="hell"] {
  --grund: #F7F5EF;
  --flaeche: #FFFFFF;
  --flaeche-zart: #EDF1EA;
  --text: #1B231D;
  --text-leise: #4F5A52;
  --linie: #D6D0C0;
  --tanne: #0B3B1E;
  --auf-tanne: #FFFFFF;
  --gold: #B08D3C;
  --gold-auf-tanne: #D9B867;
  --gold-text: #7A5A14;
  --melde-rand: var(--tanne);
  --buehne-innen: #FBF8EF;
  --buehne-aussen: #EAE3D0;
  --spruch: #0B3B1E;
  --primaer: #0B3B1E;
  --auf-primaer: #FFFFFF;
  --akzent: #0A6B12;
  --fokus: #1F5FA8;
  --ok: #1E6B2A;
  --ok-grund: #E2F0E3;
  --pruefen: #7D5200;
  --pruefen-grund: #FFF0CC;
  --fehler: #A32018;
  --fehler-grund: #FBE3E0;
  --wartet: #1F5FA8;
  --wartet-grund: #E3ECF8;
  color-scheme: light;
}
:root[data-thema="dunkel"] {
  --grund: #0D1711;
  --flaeche: #142219;
  --flaeche-zart: #1B2D21;
  --text: #E8EDE6;
  --text-leise: #A9B5AB;
  --linie: #2E4033;
  --tanne: #09301A;
  --auf-tanne: #F2F5F0;
  --gold: #C9A552;
  --gold-auf-tanne: #D9B867;
  --gold-text: #D9B867;
  --melde-rand: var(--gold);
  --buehne-innen: #124A2A;
  --buehne-aussen: #06241A;
  --spruch: #E9CF8E;
  --primaer: #D4B062;
  --auf-primaer: #15200F;
  --akzent: #7CCF86;
  --fokus: #8DB8F2;
  --ok: #86D290;
  --ok-grund: #183A20;
  --pruefen: #F2C66B;
  --pruefen-grund: #3A2D0E;
  --fehler: #F19A91;
  --fehler-grund: #3D1714;
  --wartet: #8DB8F2;
  --wartet-grund: #16263D;
  color-scheme: dark;
}
/* Profil und Profilbild (UI-Konzept „Profilbild“: rund, goldener Rand, ohne Bild Initialen auf Gold) */
.avatar { border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; display: inline-flex;
          align-items: center; justify-content: center; vertical-align: middle; flex: none; }
.avatar.initialen { background: var(--gold); color: var(--tanne); font-weight: 700; }
.avatar.klein { width: 34px; height: 34px; font-size: 13px; margin-right: 8px; }
.avatar.gross { width: 120px; height: 120px; font-size: 40px; }
.profil-link { color: var(--auf-tanne); text-decoration: none; display: inline-flex; align-items: center; }
.profil-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.profil-kopf { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.profil-kopf h2 { margin: 0; }
.profil-kopf > div { min-width: 0; }
.profil-adresse { overflow-wrap: anywhere; margin-top: 0; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.haken input { width: 22px; min-height: 22px; height: 22px; margin-top: 3px; flex: none; }
.knopf.zweitrangig { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.abstand { margin-top: 24px; }
/* Anmeldung in zwei Schritten (E-137) */
.code-feld { font: 700 26px/1 var(--schrift-zahl); letter-spacing: .25em; text-align: center; }
.qr { background: #FFFFFF; display: block; width: fit-content; padding: 8px; border-radius: 8px; margin: 10px 0; }
.qr svg { width: 220px; height: 220px; display: block; }
.schluessel { font: 700 18px/1.4 ui-monospace, Consolas, monospace; word-break: break-all;
             background: var(--flaeche-zart); padding: 8px 10px; border-radius: 8px; }
.schritte { padding-left: 20px; } .schritte li { margin-bottom: 12px; }
.codes { columns: 2; list-style: none; padding: 0; font: 700 18px/2 ui-monospace, Consolas, monospace; }
@media print { .kopf, .knopf, .leiste, .kopf-handy, .handyleiste { display: none; } }

/* ---------- App-Rahmen wie im UI-Entwurf (E-129) ----------
   Ab 820 px: Seitenleiste links (Tablet, Stand-PC). Darunter (Handy): Kopf oben, Leiste unten mit rundem
   „Erfassen“-Knopf. Was noch nicht gebaut ist, steht als „folgt“ an seinem Platz. */
[hidden] { display: none !important; }
body.mit-rahmen { font-size: 16px; }
.app { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: 1fr; }
.leiste { background: var(--tanne); color: var(--auf-tanne); display: flex; flex-direction: column; padding: 20px 14px;
  gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; grid-row: 1 / -1; }
.leiste .marke { display: flex; align-items: center; gap: 12px; padding: 0 4px 18px; margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.leiste .marke .wappen { width: 76px; height: 76px; flex: none; }
.leiste .marke > div { display: grid; gap: 3px; min-width: 0; }
.leiste .marke b { font-family: var(--schrift-titel); font-size: 1.15rem; line-height: 1.1; }
.leiste .marke small { color: var(--gold-auf-tanne); font-size: .72rem; line-height: 1.25; letter-spacing: .05em;
  text-transform: uppercase; }
.navpunkt { display: flex; align-items: center; gap: 12px; color: var(--auf-tanne); text-decoration: none; padding: 10px 12px;
  border-radius: 10px; min-height: 48px; font-weight: 700; }
.navpunkt svg { width: 22px; height: 22px; flex: none; }
a.navpunkt:hover { background: color-mix(in srgb, var(--auf-tanne) 8%, transparent); }
.navpunkt[aria-current="page"] { background: color-mix(in srgb, var(--auf-tanne) 13%, transparent);
  box-shadow: inset 3px 0 0 var(--gold-auf-tanne); }
.navpunkt.folgt { opacity: .55; cursor: default; }
.zaehler { margin-left: auto; background: var(--gold-auf-tanne); color: #0B3B1E; border-radius: 999px; font-size: .78rem;
  padding: 1px 8px; font-weight: 800; }
.navpunkt.folgt small { margin-left: auto; font-size: .72rem; font-weight: 400; }
.leiste .unten { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; }
.person { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: inherit; text-decoration: none;
  border-radius: 10px; padding: 6px; }
.person:hover, .person[aria-current="page"] { background: color-mix(in srgb, var(--auf-tanne) 8%, transparent); }
.person small { display: block; color: var(--gold-auf-tanne); }
.avatar.gross40 { width: 40px; height: 40px; font-size: 15px; }
.kopf-handy, .handyleiste { display: none; }
main.seite { max-width: none; margin: 0; padding: 22px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px; align-content: start; min-width: 0; }
main.seite h2 { overflow-wrap: anywhere; }
main.seite > * { max-width: 1100px; width: 100%; }
main.seite > .meldung { margin: 0; }

/* Bausteine aus dem Entwurf */
.etikett { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--gold-text); }
.leise { color: var(--text-leise); }
.zahl { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; font-weight: 700; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.seitenkopf h2 { font-size: 1.75rem; margin: 0; line-height: 1.15; }
.seitenkopf h3 { font-size: 1.3rem; margin: 0; font-family: var(--schrift-titel); line-height: 1.15; }
.seitenkopf .rechts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.knopf.haupt, .knopf.neben, .knopf.text { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; margin: 0; min-height: 48px; padding: 10px 20px; border-radius: 12px; line-height: 1.2;
  border: 2px solid transparent; font: 700 16px var(--schrift-text); text-decoration: none; cursor: pointer; }
.knopf.haupt { background: var(--primaer); color: var(--auf-primaer); }
.knopf.haupt:hover { filter: brightness(1.12); }
.knopf.neben { background: transparent; border-color: var(--primaer); color: var(--text); }
.knopf.neben.auf-tanne { color: var(--auf-tanne); border-color: color-mix(in srgb, var(--auf-tanne) 40%, transparent);
  width: 100%; min-height: 44px; font-size: .9rem; }
.knopf.text { background: none; color: var(--akzent); padding-inline: 8px; }
.knopf.breit { width: 100%; }
.melde-zu { flex: none; white-space: nowrap; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.hinweiskasten { border-left: 4px solid var(--gold); background: var(--flaeche-zart); border-radius: 0 10px 10px 0;
  padding: 10px 14px; font-size: .95rem; }
.hinweiskasten b { color: var(--gold-text); }
.hinweiskasten p { margin: 0; } .hinweiskasten p + p { margin-top: 6px; }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px 3px 8px;
  font-weight: 700; font-size: .85rem; white-space: nowrap; }
.status i { font-style: normal; font-weight: 800; }
.status.ok { color: var(--ok); background: var(--ok-grund); }
.status.pruefen { color: var(--pruefen); background: var(--pruefen-grund); }
.status.wartet { color: var(--wartet); background: var(--wartet-grund); }
.ringzahl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ringzahl .gross { font-family: var(--schrift-zahl); font-weight: 800; font-size: 4rem; line-height: .9;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ringzahl .einheit { font-weight: 700; color: var(--text-leise); }

.kacheln { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; }
.karte.kachel { display: grid; gap: 8px; align-content: start; border-left: 0; min-height: 0; padding: 18px; }
.karte.kachel h3 { font-family: var(--schrift-titel); font-size: 1.05rem; margin: 0; }
.karte.kachel .knopf.text { justify-self: start; padding-left: 0; }
.ringzahl .gross.pruefen { color: var(--pruefen); }
.karte.kachel.zurueck-kachel { box-shadow: inset 0 0 0 2px var(--pruefen), var(--schatten); }
@media (max-width: 819px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .leiste { display: none; }
  .kopf-handy { display: flex; align-items: center; gap: 10px; background: var(--tanne); color: var(--auf-tanne);
    padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 10; }
  .kopf-handy .wappen { width: 36px; height: 36px; }
  .kopf-handy b { font-family: var(--schrift-titel); font-size: 1.1rem; }
  .kopf-handy .kopf-avatar { margin-left: auto; display: grid; }
  .kopf-handy .avatar.klein { margin: 0; border-color: var(--gold-auf-tanne); }
  main.seite { padding: 18px 16px 110px; gap: 16px; }
  .seitenkopf h2 { font-size: 1.45rem; }
  .handyleiste { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0;
    bottom: 0; z-index: 10; background: var(--flaeche); border-top: 1px solid var(--linie);
    padding: 6px 4px max(14px, env(safe-area-inset-bottom)); }
  .handyleiste > * { display: grid; justify-items: center; gap: 2px; font-size: .72rem; font-weight: 700;
    color: var(--text-leise); min-height: 52px; padding: 4px 0; text-decoration: none; }
  .handyleiste svg { width: 24px; height: 24px; }
  .handyleiste [aria-current="page"] { color: var(--akzent); }
  .handyleiste .folgt { opacity: .45; }
  .handyleiste > * { position: relative; }
  .handyleiste .zaehler { position: absolute; top: 0; right: 18%; margin: 0; }
  .handyleiste .erfassen-rund { width: 58px; height: 58px; border-radius: 50%; background: var(--primaer);
    color: var(--auf-primaer); display: grid; place-items: center; margin-top: -26px; box-shadow: var(--schatten);
    border: 3px solid var(--flaeche); }
  .handyleiste .erfassen-rund svg { width: 26px; height: 26px; }
}
/* Handy (bis 600 px): Kopf kompakt, E-Mail ausblenden, damit „Abmelden“ immer sichtbar bleibt */
@media (max-width: 600px) {
  .kopf { gap: 10px; padding: 8px 12px; }
  .kopf img { width: 36px; height: 36px; }
  .kopf .titel { font-size: 17px; white-space: nowrap; }
  .kopf .verein { display: none; }
  .kopf .rechts .wer { display: none; }
  main { padding: 16px 12px 40px; }
  .schmal { margin: 12px auto; }
}
/* Fehler oder Idee melden (E-106), wie im UI-Entwurf */
.leiste .melden-knopf { color: var(--auf-tanne); border-color: color-mix(in srgb, var(--auf-tanne) 40%, transparent); min-height: 44px; font-size: .9rem; text-decoration: none; }
.meldung-formular { display: grid; gap: 12px; border: 2px solid var(--gold); min-width: 0; overflow-wrap: anywhere; max-width: 720px; }
.meldung-formular .seitenkopf { flex-wrap: nowrap; }
.meldung-felder { display: grid; gap: 12px; min-width: 0; }
.meldung-formular textarea { width: 100%; border-radius: 10px; border: 2px solid var(--linie); background: var(--flaeche); color: var(--text); padding: 10px 12px; font: inherit; resize: vertical; box-sizing: border-box; }
.meldung-formular input[type=file] { max-width: 100%; min-height: 0; }
.status.umbruch { white-space: normal; }
.meldung-formular .seitenkopf > .knopf { margin-left: auto; }
.leiste .person.oben { margin: 0 0 12px; }   /* E-160: Nutzer über „Start“ */
/* E-160: Piktogramme Fehler | Idee, in der Seitenleiste und im Profil gleich, als quadratischer Knopf */
.knopf.melden-knopf { display: flex; align-items: center; justify-content: center; gap: 10px; width: 88px; aspect-ratio: 1;
  margin: 12px auto 0; padding: 0; border: 2px solid var(--melde-rand); border-radius: 14px; line-height: 1; }
.melden-knopf svg { width: 24px; height: 24px; flex: none; }
.melden-knopf .trenner { width: 1.5px; height: 24px; background: currentColor; opacity: .5; border-radius: 1px; }
/* Seitenleiste: klein neben „Abmelden“, die Leiste ist in beiden Farbwelten dunkel, also immer Gold */
@media (min-width: 820px) { .profil-raster .melden-knopf { display: none; } }   /* am PC steht er immer in der Leiste */
.leiste .unten { grid-template-columns: auto minmax(0, 1fr); }
.leiste .unten .sync { grid-column: 1 / -1; justify-self: start; }
.leiste .knopf.melden-knopf { width: auto; aspect-ratio: auto; min-height: 44px; margin: 0; padding: 0 12px; gap: 7px;
  border: 1.5px solid var(--gold-auf-tanne); border-radius: 12px; }
.leiste .melden-knopf svg { width: 19px; height: 19px; }
.leiste .melden-knopf .trenner { height: 18px; }
/* Absenden einer Meldung: Schuss fliegt auf die Scheibe, danach sitzt der Treffer in der Mitte */
.melde-senden { display: grid; justify-items: center; gap: 10px; padding: 18px 0; }
.melde-senden[hidden] { display: none; }
.melde-scheibe { width: 132px; height: 132px; overflow: visible; }
.melde-scheibe .ring { fill: none; stroke: currentColor; stroke-width: 2; }
.melde-scheibe .spiegel { fill: #0B3B1E; }
.melde-scheibe .schuss { fill: var(--gold); animation: melde-flug 1.1s cubic-bezier(.3, .1, .3, 1) infinite; }
.melde-scheibe .welle { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0; transform-origin: 60px 60px; animation: melde-welle 1.1s ease-out infinite; }
.melde-scheibe .haken { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.melde-treffer { display: grid; justify-items: center; gap: 10px; }
.melde-treffer .haken { stroke-dasharray: 40; animation: melde-haken .5s ease-out both; }
.melde-treffer .welle { animation: melde-welle .7s ease-out both; }
@keyframes melde-flug { 0% { transform: translate(-90px, 70px) scale(1.8); opacity: 0; } 15% { opacity: 1; } 62%, 100% { transform: none; opacity: 1; } }
@keyframes melde-welle { 0%, 60% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes melde-haken { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .melde-scheibe .schuss, .melde-scheibe .welle, .melde-treffer .haken, .melde-treffer .welle { animation: none; } }
/* Sync-Baustein am Stand-PC (E-168), wie syncBaustein im Entwurf */
.leiste .sync { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-size: .82rem;
  font-weight: 700; text-decoration: none; justify-self: start; }
.leiste .sync .punkt { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.leiste .sync.online { background: var(--ok-grund); color: var(--ok); }
.leiste .sync.offline { background: var(--wartet-grund); color: var(--wartet); }

/* PDF in der installierten iPhone-App: eigene Ansicht mit x */
.pdf-ansicht { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--flaeche); padding-top: env(safe-area-inset-top); }
.pdf-ansicht button { align-self: flex-end; width: 56px; height: 56px; border: 0; background: none; color: var(--text); font-size: 2rem; line-height: 1; cursor: pointer; }
.pdf-ansicht iframe { flex: 1; width: 100%; border: 0; }

/* Bilder für den Beamer je Disziplin (Wettkampf → Einstellungen, E-238) */
.beamerbild-zeile { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); }
.beamerbild-zeile img, .beamerbild-leer { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.beamerbild-leer { display: grid; place-items: center; border: 2px dashed var(--linie); color: var(--text-leise); font-size: .8rem; }
.beamerbild-zeile .knopf.klein { padding: 0; min-height: 0; font-size: inherit; }

/* Plus/Minus zum letzten Training (Start, Ergebnis, Kladde) */
.diff { font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.15rem; }
.diff.plus { color: var(--ok); } .diff.minus { color: var(--fehler); }