/* Antibiotika-Meldung im Design des Equi-Dent-Shops (Nutzer 06.11.2026: „passe die ganze app an das design des equident shop an“).
   Werte aus equident.shop, Theme-Datei equident-modern.css (--eq-*): heller, bläulicher Grund mit weichen Verläufen, der Kopf eine
   schwebende helle Glas-Pille, Marineblau für Schrift und Hauptknöpfe, Karten aus hellem Glas mit weißem Rand. Liegt über
   ../app/styles.css und meldung.css – die große App TAMG-Wedge bleibt, wie sie ist. Schriften: „Sora“ für Überschriften und
   „Instrument Sans“ für Text wie im Shop (Ordner fonts/). */

/* Schriften wie im Shop, selbst ausgeliefert (nicht von Google nachgeladen – sonst ginge die IP-Adresse der Besucher an Google).
   Quelle: Google Fonts, Teilmenge „latin“ (deckt Umlaute, ß, §, €), variable Schnitte, Lizenz SIL Open Font License 1.1.
   Abgerufen am 06.11.2026. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("./fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("./fonts/sora-latin.woff2") format("woff2"); }

:root {
  /* Farben aus dem Zeichen (Nutzer 06.11.2026: „die farben des pferdes und des zahnes im symbol … sollen sich in der app
     wiederfinden“): das Blau des Pferdes (#1b3b61, eq-logo-navy.png) trägt Schrift, Hauptknöpfe und den aktiven Reiter, das Rot des
     Zahns (#f66057, eq-logo-red.png) ist der Akzent. Für Fehler bleibt das kräftigere Ampel-Rot (--rot), damit nichts verwechselt wird;
     als Schrift auf Weiß ist das Zahn-Rot zu hell, deshalb nur als Fläche, Linie oder Punkt. */
  --eq-pferd: #1b3b61; --eq-zahn: #f66057; --eq-zahn-hell: #fde8e6; --eq-zahn-tief: #c8473f;
  --eq-navy: var(--eq-pferd); --eq-navy-deep: #12294a; --eq-blue: #2a5285; --eq-accent: var(--eq-zahn); --eq-sky: #9fb6d4; --eq-ice: #e7edf5;
  --eq-gold: var(--eq-zahn); --eq-ink: #0f2440; --eq-body: #3a4a62; --eq-muted: #5c6a80;
  --eq-glass: rgba(255, 255, 255, .58); --eq-glass-strong: rgba(255, 255, 255, .78); --eq-glass-border: rgba(255, 255, 255, .85);
  --eq-glass-blur: blur(18px) saturate(170%);
  --eq-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(7, 31, 80, .04), 0 30px 60px -40px rgba(7, 51, 88, .45);
  --eq-shadow-button: 0 14px 30px -14px rgba(27, 59, 97, .85);
  --eq-schrift: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --eq-titel: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Die Größen der App auf die Farben des Shops umgestellt. */
  --bg: #f2f6fb; --card: var(--eq-glass-strong);
  --ink: var(--eq-ink); --ink-2: var(--eq-body); --muted: var(--eq-muted);
  --line: #dbe5f0; --line-2: #e9f0f8;
  --brand: var(--eq-navy); --brand-dark: var(--eq-navy-deep); --brand-tint: var(--eq-ice); --brand-ink: var(--eq-ink);
  --kopf-glas: #ffffff;
  /* Eine orange Linie, überall gleich dünn wie bei 1 · 2 · 3 (Nutzer 06.11.2026: „mach die orangene umrandung mal einheitlich“). */
  --ring: 0 0 0 1px var(--eq-zahn);
  --sh-1: var(--eq-glass-shadow);
  --sh-2: 0 24px 50px -24px rgba(7, 51, 88, .45);
  --r-card: 24px;
  /* Hintergrund mit einem sehr leichten Farbverlauf ins Zahn-Orange (Nutzer 06.11.2026: „nen orangenen colour grade auf der seite im
     hintergrund … aber sehr leicht“): warmer Schein oben rechts und unten links, ein Hauch Blau oben links. */
  --eq-grund: radial-gradient(1100px 700px at 100% 0%, rgba(246, 96, 87, .13), rgba(246, 96, 87, 0) 62%),
    radial-gradient(1000px 680px at 0% 100%, rgba(246, 96, 87, .10), rgba(246, 96, 87, 0) 60%),
    radial-gradient(900px 560px at 4% -6%, rgba(159, 182, 212, .30), rgba(159, 182, 212, 0) 58%), #f7f6f7;
}

body {
  font-family: var(--eq-schrift); letter-spacing: .01em; color: var(--eq-body);
  background: var(--eq-grund);
  background-attachment: fixed;
}
::selection { background: var(--eq-zahn-hell); color: var(--eq-ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--eq-pferd); }
h1, h2, h3, .kopf-titel { font-family: var(--eq-titel); color: var(--eq-ink); letter-spacing: -.02em; }
h1, h2 { font-weight: 700; }

/* Karten: helles Glas mit weißem Rand, weicher Schatten nach unten. */
.card, .anmeldung-karte, .tour-karte, dialog.dlg {
  background: var(--eq-glass-strong); border: 1px solid var(--eq-glass-border); box-shadow: var(--eq-glass-shadow);
  -webkit-backdrop-filter: var(--eq-glass-blur); backdrop-filter: var(--eq-glass-blur);
}
dialog.dlg { background: #fff; }
/* Die Anmeldeseite deckt die App ab – mit demselben Grund wie die Seite. */
.anmeldung { background: var(--eq-grund); background-attachment: fixed; }
/* Die Anmeldekarte trägt oben eine feine Linie im Zahn-Rot. */
.anmeldung-karte { border-top: 1px solid var(--eq-zahn); }
.start-blende { background: #f2f6fb; }

/* Knöpfe: Pillen. Hauptknopf marineblau mit Schatten, Nebenknopf weiß mit marineblauer Schrift. */
button { background: var(--eq-navy); border-color: var(--eq-navy); font-weight: 600; }
button:hover { background: var(--eq-blue); border-color: var(--eq-blue); }
.actions > button:not(.secondary):not(.tiny):not(.danger), button.primary { box-shadow: var(--eq-shadow-button); }
button.secondary { background: #fff; color: var(--eq-navy); border-color: rgba(7, 51, 88, .16); box-shadow: none; }
button.secondary:hover { background: var(--eq-ice); border-color: var(--eq-blue); }
:where(a) { color: var(--eq-pferd); }

/* Felder */
label input:not([type="checkbox"]):not([type="radio"]), label select, label textarea { border-color: rgba(7, 51, 88, .16); background: #fff; }
label input:focus, label select:focus, label textarea:focus { border-color: var(--eq-zahn); box-shadow: none; }

/* ── Kopf: eine schwebende helle Glas-Pille wie im Shop ─────────────────────────────────────────────────────── */
header.top {
  background: rgba(255, 255, 255, .9); color: var(--eq-ink);
  -webkit-backdrop-filter: var(--eq-glass-blur); backdrop-filter: var(--eq-glass-blur);
  box-shadow: inset 0 0 0 1px var(--eq-glass-border), var(--eq-glass-shadow);
}
header.top .brand { background: none; box-shadow: none; }
header.top .brand strong, header.top #nav button { text-shadow: none; }
#kopf-praxis { color: var(--eq-muted); font-weight: 500; opacity: 1; }
/* Im Shop stehen Zeichen und Name direkt im Kopf – keine eigene Pille darin. */
header.top .kopf-titel { background: none; box-shadow: none; padding: 0 var(--s2) 0 0; font-size: 1.05rem; }
/* Der Name zweifarbig wie das Zeichen und die Equident-App (Nutzer 06.11.2026: „mach antibiotika blau und meldung orange“). */
.kopf-titel { color: var(--eq-pferd); }
.kopf-titel .titel-akzent { color: var(--eq-zahn); }
.anmeldung .kopf-titel { background: none; padding: 0; font-size: 1.1rem; }
#nav button { color: var(--eq-ink); font-weight: 500; }
#nav button:hover { background: rgba(7, 51, 88, .06); color: var(--eq-ink); }
/* Der aktive Schritt orange gefüllt, die Nummer im blauen Kreis (Nutzer 06.11.2026: „bei 1 2 3 sollte es trotzdem ausgefüllt sein“). */
#nav button.active { background: #fff; color: var(--eq-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--eq-zahn); }
/* Die Nummern 1 · 2 · 3 im Blau des Pferdes (Nutzer 06.11.2026: „1 2 3 mit dem kreis vllt trotzdem blau“). */
#nav .schritt-nr { background: var(--eq-pferd); color: #fff; }
/* Die Nummer des aktiven Schritts im Zahn-Rot – wie der Zahn im Pferd. */
#nav button.active .schritt-nr { background: var(--eq-pferd); color: #fff; }
.nav-pflicht::before { background: linear-gradient(90deg, rgba(7, 51, 88, .14) 0 1px, rgba(255, 255, 255, .9) 1px 2px); }
#nav .nav-klapper { background: #fff; color: var(--eq-navy); box-shadow: inset 0 0 0 1px rgba(7, 51, 88, .16); }
#nav .nav-klapper:hover, #nav .nav-klapper[aria-expanded="true"] { background: var(--eq-ice); box-shadow: inset 0 0 0 1px rgba(7, 51, 88, .28); }
#nav .nav-einrichtung.aktiv .nav-klapper[aria-expanded="false"] { background: #fff; color: var(--eq-ink); box-shadow: inset 0 0 0 1px var(--eq-zahn); }
.nav-einrichtung-band { background: rgba(7, 51, 88, .04); box-shadow: inset 0 0 0 1px rgba(7, 51, 88, .1); }
#nav .nav-einrichtung-liste button { color: var(--eq-body); }
header.top .kopf-abmelden { color: var(--eq-navy); background: #fff; border-color: rgba(7, 51, 88, .16); }
header.top .kopf-abmelden:hover { background: var(--eq-ice); }
.praxis-aktiv { border-color: rgba(7, 51, 88, .2); color: var(--eq-navy); }
.praxis-aktiv:hover { background: var(--eq-ice); }
#nav button.tour-reiter { background: #fff; color: var(--eq-ink); box-shadow: inset 0 0 0 1px var(--eq-zahn); animation: none; }

/* Fußzeile und Nebentexte */
.seiten-fuss, .anmeldung-fuss { color: var(--eq-muted); }

/* Einführung: Schein und Fortschritt im Zahn-Rot. */
.tour-licht { box-shadow: 0 0 0 1px var(--eq-zahn); }
.tour-punkte button.aktiv { background: var(--eq-zahn); }
.tour-punkte button.erledigt { background: color-mix(in srgb, var(--eq-pferd) 55%, var(--line)); }

/* Orange als wichtigere Farbe (Nutzer 06.11.2026: „oben beim auswählen sollten die felder nicht blau werden sondern orange … wenn ich
   datei wählen klicke, sollte es orange umrahmt werden, nicht blau“): Auswahl, Fokus und Überfahren im Zahn-Orange. Die Hauptknöpfe
   bleiben im Blau des Pferdes. */
:where(button, input, select, textarea, a, summary):focus-visible { outline: 1px solid var(--eq-zahn); outline-offset: 1px; }
label input:focus, label select:focus, label textarea:focus, .actions.inline input:focus, .actions.inline select:focus,
input.suchfeld:focus, #text-eingabe textarea:focus { border-color: var(--eq-zahn); box-shadow: none; outline: none; }
/* Nur orange Umrandung, keine orange Füllung – überall (Nutzer 06.11.2026: „mach mal nur die orangene umrandung doch … was bei allem das
   orange leicht ausgefüllte weg“). */
.file-btn:hover, button.secondary:hover { background: #fff; border-color: var(--eq-zahn); color: var(--eq-pferd); box-shadow: none; }
#nav button:not(.active):hover { background: transparent; box-shadow: inset 0 0 0 1px var(--eq-zahn); }
#nav .nav-klapper:hover, #nav .nav-klapper[aria-expanded="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--eq-zahn); }
/* Auch unter „Einstellungen“ sanft statt tief orange (Nutzer 06.11.2026). */
#nav .nav-einrichtung-liste button.active { background: #fff; color: var(--eq-ink); box-shadow: inset 0 0 0 1px var(--eq-zahn); }
header.top .kopf-abmelden:hover { background: #fff; border-color: var(--eq-zahn); }

/* 1 · 2 · 3 ruhiger (Nutzer 06.11.2026: „wie würdest du es machen, sodass das orange noch irgendwie hervorkommt und das blau, es aber
   nicht soooo penetrant ist“): keine gefüllte Pille mehr. Blau steckt in den Nummern – inaktiv ein zarter Ring, aktiv ein gefüllter
   Kreis –, Orange nur als kurzer Strich unter dem aktiven Schritt. */
#nav .nav-schritte button, #nav .nav-pflicht button { position: relative; }
/* Der aktive Schritt leicht orange gefüllt, ohne Rand (Nutzer 06.11.2026). */
#nav .nav-schritte button.active, #nav .nav-pflicht button.active { background: var(--eq-zahn-hell); color: var(--eq-ink); font-weight: 600; box-shadow: none; }
#nav .nav-schritte .schritt-nr, #nav .nav-pflicht .schritt-nr { background: transparent; color: var(--eq-pferd); box-shadow: inset 0 0 0 1.5px rgba(27, 59, 97, .4); }
#nav .nav-schritte button.active .schritt-nr, #nav .nav-pflicht button.active .schritt-nr { background: var(--eq-pferd); color: #fff; box-shadow: none; }
#nav .nav-schritte button:not(.active):hover, #nav .nav-pflicht button:not(.active):hover { background: rgba(246, 96, 87, .07); box-shadow: none; }
/* Die Zahl der offenen Zeilen neben „2 Prüfen“: weiß mit gelbem Rand statt gelber Fläche – auf dem leicht orangen aktiven Schritt sah
   Gelb auf Orange komisch aus (Nutzer 06.11.2026). Gelb bleibt als Rand und Schrift, damit „offen“ erkennbar bleibt. */
#nav .nav-zahl { background: #fff; color: var(--gelb); box-shadow: inset 0 0 0 1px #e5c36a; }
/* Geführtes Nachtragen: dieselbe dünne Linie; ein kurzer weicher Schein beim Erscheinen zeigt, wohin es geht. */
/* Die Linie liegt 4 px außerhalb des Feldes im freien Abstand – das Feld selbst wird nicht größer und ragt nicht in die Nachbarspalte
   (Nutzer 06.11.2026, Bildschirmfoto „Packung“: „dass es hier nicht so über den rand geht“). */
#form-zeile .nachtragen { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eq-zahn); animation: nachtragen-schein 1.2s ease-out 1; }
@keyframes nachtragen-schein { 0% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eq-zahn), 0 0 0 11px rgba(246, 96, 87, .22); }
  100% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eq-zahn), 0 0 0 5px rgba(246, 96, 87, 0); } }