/* ══════════════ TRAJEKT — GEMEINSAME MARKE ══════════════
 * Schrift, Farben, Zeichen: einmal hier, für Vollansicht, Trajekt-App
 * und Team. Alles lokal (CSP: font-src 'self'), nichts von fremden Servern.
 *
 * Richtung "Schwarz & Bronze" (Auswahl vom 25.09.2026): Zeichen schwarz
 * auf Weiß, Schwarz als Grundfarbe, Bronze für Hervorhebungen,
 * Cormorant Garamond für Überschriften, DM Sans für Text. Hell und
 * dunkel folgen der Einstellung des Geräts.
 */
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(/marke/schrift/dm-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(/marke/schrift/dm-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url(/marke/schrift/dm-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(/marke/schrift/dm-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url(/marke/schrift/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(/marke/schrift/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }

:root {
  --m-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m-titel: "Cormorant Garamond", Garamond, "Times New Roman", serif;

  --m-grund: #F6F4F1;      /* Seite */
  --m-blatt: #FFFFFF;      /* Karten, Felder */
  --m-blatt-2: #FAF8F5;    /* leicht abgesetzt */
  --m-tinte: #111111;
  --m-leise: #6B665F;
  --m-linie: #E6E1DA;
  --m-akzent: #111111;     /* Knöpfe, aktive Reiter */
  --m-auf-akzent: #FFFFFF;
  --m-bronze: #9C7645;     /* Hervorhebung, Zahlen, Fokus-Details */
  /* Für Linktext eigens dunkler: das helle Bronze erreicht als normaler
     Text auf hellem Grund keine 4.5:1 (WCAG 1.4.3) — als Fläche/Fokus
     bleibt --m-bronze. */
  --m-link: #856237;
  --m-hauch: #F1EADF;      /* zarte Bronze-Fläche */
  --m-seite: #111111;      /* Seitenleiste */
  --m-seite-tinte: #CFC7BC;
  --m-seite-aktiv: #242120;
  /* Grün/Bernstein als kleiner Text auf ihrer eigenen Hauch-Fläche etwas
     dunkler, damit Meldungen und Merkmale 4.5:1 erreichen (WCAG 1.4.3).
     Die Punkte/Balken sind Fläche und bleiben davon unberührt. */
  --m-gut: #137446;  --m-gut-hauch: #E4F3EA;
  --m-warn: #8C5200; --m-warn-hauch: #FBEFD9;
  --m-rot: #BF3A2B;  --m-rot-hauch: #FBE7E4;
  --m-rund: 12px;
  --m-schatten: 0 1px 2px rgba(17,17,17,.05), 0 8px 24px rgba(17,17,17,.06);
  color-scheme: light;
}
/* ══════════════ DUNKEL — vom System ENTKOPPELT ══════════════
   Greift auf zwei Wegen:
     1. Systemeinstellung "dunkel" — außer der Nutzer hat ausdrücklich
        "hell" gewählt (data-theme="light").
     2. Nutzer hat ausdrücklich "dunkel" gewählt (data-theme="dark") —
        egal, was das System sagt.
   Beide Blöcke tragen dieselben Werte. Der Tag/Nacht-Schalter (thema.js)
   setzt data-theme am <html>; ohne data-theme entscheidet das System. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-grund: #0B0B0C; --m-blatt: #171615; --m-blatt-2: #1D1C1A;
    --m-tinte: #F2EEE8; --m-leise: #A39B90; --m-linie: #2A2724;
    --m-akzent: #C9A26D; --m-auf-akzent: #15110C;
    --m-bronze: #C9A26D; --m-hauch: #2A2319; --m-link: #C9A26D;
    --m-seite: #060606; --m-seite-tinte: #B8AFA3; --m-seite-aktiv: #1D1B19;
    --m-gut: #5FD39A;  --m-gut-hauch: #13291E;
    --m-warn: #F0B64A; --m-warn-hauch: #2E2410;
    --m-rot: #F07A6A;  --m-rot-hauch: #33160F;
    --m-schatten: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --m-grund: #0B0B0C; --m-blatt: #171615; --m-blatt-2: #1D1C1A;
  --m-tinte: #F2EEE8; --m-leise: #A39B90; --m-linie: #2A2724;
  --m-akzent: #C9A26D; --m-auf-akzent: #15110C;
  --m-bronze: #C9A26D; --m-hauch: #2A2319;
  --m-link: #C9A26D;
  --m-seite: #060606; --m-seite-tinte: #B8AFA3; --m-seite-aktiv: #1D1B19;
  --m-gut: #5FD39A;  --m-gut-hauch: #13291E;
  --m-warn: #F0B64A; --m-warn-hauch: #2E2410;
  --m-rot: #F07A6A;  --m-rot-hauch: #33160F;
  --m-schatten: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ══════════════ BARRIEREFREIHEIT: BEWEGUNG REDUZIEREN ══════════════
   Wer im System „Bewegung reduzieren“ eingestellt hat, bekommt keine
   Animationen aufgezwungen (WCAG 2.3.3 / 2.2.2). Gilt für jede Oberfläche,
   die diese Datei lädt (App, Fahrer-App, Statusseite). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════ UNTERSCHRIFTSFELD (public/marke/unterschriftsfeld.js, Inhaber 23.10.) ══════════════
   Für Web, Trajekt-App und die App der Hausarztpraxis gleich. Die Fläche ist immer hell — die Unterschrift
   ist schwarz wie auf Papier, auch im dunklen Thema. touch-action: none, damit der Finger zeichnet statt zu scrollen. */
.uf-dialog { border: 1px solid var(--m-linie); border-radius: 14px; padding: 0; width: min(640px, calc(100vw - 32px));
  background: var(--m-blatt); color: var(--m-tinte); box-shadow: var(--m-schatten); }
.uf-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.uf-kasten { padding: 18px 20px; display: grid; gap: 10px; }
.uf-kasten h2 { margin: 0; font-family: var(--m-titel); font-size: 24px; font-weight: 600; }
.uf-vermerk { margin: 0; color: var(--m-leise); font-size: 14px; }
.uf-rahmen { position: relative; background: #FFFFFF; border: 2px dashed #9C7645; border-radius: 10px; }
.uf-flaeche { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; border-radius: 8px; }
.uf-linie { position: absolute; left: 16px; right: 16px; bottom: 34px; border-top: 1.5px solid #9C9389; color: #5E5850;
  font-size: 12px; padding-top: 4px; pointer-events: none; }
.uf-hinweis { margin: 0; font-size: 13px; color: var(--m-leise); }
.uf-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 480px) { .uf-kasten { padding: 14px 16px; } .uf-flaeche { height: 170px; } }

/* ══════════════ DIE UNTERSCHRIFT AUF DEM SCHEIN (Web, Trajekt-App) ══════════════
   Bild auf hellem Grund (wie aufgeklebt), darunter Name, Zeitpunkt, Verfahren, gekürzte Prüfsumme. */
.us-bild { display: block; max-width: 100%; max-height: 90px; margin: 0 auto 4px; background: #FFFFFF; border-radius: 4px;
  padding: 2px 8px; }
.us-zeile { display: block; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.us-pruef { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .02em; }
.us-ungueltig { color: var(--m-rot); font-weight: 700; }
.us-frueher { margin-top: 6px; font-size: 11.5px; color: var(--m-leise); }
.us-frueher s { text-decoration-thickness: 1px; }

/* ══════════════ DIE APP DER HAUSARZTPRAXIS (public/marke/praxisansicht.js, Agent R, 25.10.) ══════════════
   Vollansicht und Trajekt-App gleich: Fälle wie Einsätze, ein Tipp öffnet den Fall; auf dem Handy eine Spalte. */
.pv-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.pv-kachel { background: var(--m-blatt); border: 1px solid var(--m-linie); border-radius: var(--m-rund); padding: 10px 12px; }
.pv-kachel b { display: block; font: 600 26px/1 var(--m-titel); font-variant-numeric: tabular-nums lining-nums; }
.pv-kachel span { display: block; font-size: 12px; color: var(--m-leise); margin-top: 4px; line-height: 1.3; }
.pv-kachel.warn { background: var(--m-warn-hauch); } .pv-kachel.warn b { color: var(--m-warn); }
.pv-kachel.rot { background: var(--m-rot-hauch); } .pv-kachel.rot b { color: var(--m-rot); }
button.pv-eintrag { display: grid; gap: 4px; width: 100%; text-align: left; font-weight: 400; line-height: 1.4; margin: 10px 0;
  border: 1px solid var(--m-linie); background: var(--m-blatt); color: var(--m-tinte); padding: 14px 16px; min-height: 44px; }
button.pv-eintrag[disabled] { opacity: 1; cursor: default; }
/* Über der Karte bleibt die Schrift lesbar (die allgemeine Knopffarbe der Vollansicht wäre dunkel auf dunkel). */
button.pv-eintrag:hover, button.pv-eintrag:focus-visible { background: var(--m-hauch); color: var(--m-tinte); border-color: var(--m-bronze); }
.pv-fall a, .pv-brief a { color: var(--m-link); }
button.pv-eintrag.ungelesen { border-left: 3px solid var(--m-bronze); }
.pv-zeile { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.pv-kurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-fall p, .pv-brief p, .pv-schein p { margin: 0 0 10px; line-height: 1.45; overflow-wrap: anywhere; }
.pv-fall h2, .pv-brief h2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-schein h3, .pv-formular h3, .pv-brief h3 { margin: 0 0 8px; font-size: 16px; }
.pv-zwischen { margin-top: 18px; }
.pv-text { white-space: pre-line; }
.pv-merkmalchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-formular label { display: block; margin: 12px 0 4px; }
.pv-formular input:not([type=checkbox]), .pv-formular select, .pv-formular textarea { width: 100%; box-sizing: border-box; }
.pv-formular fieldset { border: 1px solid var(--m-linie); border-radius: var(--m-rund); margin: 12px 0 0; padding: 6px 12px 10px; }
.pv-formular label.pv-haken { display: inline-flex; align-items: center; gap: 6px; margin: 8px 14px 0 0; color: var(--m-tinte); min-height: 32px; }
.pv-formular .knoepfe { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.pv-verordnung { display: grid; gap: 6px; }
@media (max-width: 480px) { .pv-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .pv-kachel b { font-size: 22px; } }
/* Das Feld „Unterschrift des Arztes“ am Schein der Praxis — in der Vollansicht wie in der App (public/app/app.css as-unterschrift),
   auch wenn es nur zeigt (unterschrieben, oder: nur ein Arzt darf); sonst färbte die allgemeine Knopffarbe es grau. */
.pv-schein button.as-unterschrift, .pv-schein button.as-unterschrift:disabled, .pv-schein button.as-unterschrift:hover {
  display: block; width: 100%; margin-top: 8px; padding: 12px; text-align: center; font-weight: 400; line-height: 1.4;
  background: var(--m-blatt-2, var(--m-blatt)); border: 1.5px solid var(--m-linie); color: var(--m-tinte); opacity: 1; cursor: default; }
.pv-schein button.as-unterschrift small { display: block; color: var(--m-leise); font-size: 12px; margin-bottom: 6px; }
.pv-schein button.as-unterschrift.offen, .pv-schein button.as-unterschrift.offen:hover {
  border: 2px dashed var(--m-bronze); background: var(--m-hauch); cursor: pointer; }
.pv-schein button.as-unterschrift.frei { border-color: var(--m-gut); }
.pv-schein .as-us { display: block; margin-bottom: 6px; }
.pv-schein .as-us-tipp { display: block; margin-top: 6px; font-weight: 700; color: var(--m-link); }