/* 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 {
  --eq-navy: #073358; --eq-navy-deep: #061d33; --eq-blue: #1b5788; --eq-accent: #2b7bd0; --eq-sky: #97c7f0; --eq-ice: #e3eefa;
  --eq-gold: #c8a35a; --eq-ink: #0a1638; --eq-body: #3a4661; --eq-muted: #5a6680;
  --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, 87, 136, .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;
  --ring: 0 0 0 3px rgba(43, 123, 208, .25);
  --sh-1: var(--eq-glass-shadow);
  --sh-2: 0 24px 50px -24px rgba(7, 51, 88, .45);
  --r-card: 24px;
}

body {
  font-family: var(--eq-schrift); letter-spacing: .01em; color: var(--eq-body);
  background: radial-gradient(900px 560px at 6% -4%, #97c7f080, #97c7f000 60%), radial-gradient(820px 520px at 98% 6%, #1b578829, #1b578800 60%),
    radial-gradient(760px 620px at 50% 108%, #c8a35a24, #c8a35a00 60%), #f2f6fb;
  background-attachment: fixed;
}
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: radial-gradient(900px 560px at 6% -4%, #97c7f080, #97c7f000 60%), radial-gradient(820px 520px at 98% 6%, #1b578829, #1b578800 60%),
  radial-gradient(760px 620px at 50% 108%, #c8a35a24, #c8a35a00 60%), #f2f6fb; }
.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-blue); }

/* 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-accent); box-shadow: var(--ring); }

/* ── Kopf: eine schwebende helle Glas-Pille wie im Shop ─────────────────────────────────────────────────────── */
header.top {
  background: var(--eq-glass); 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; }
.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); }
#nav button.active { background: var(--eq-navy); color: #fff; font-weight: 600; }
#nav .schritt-nr { background: rgba(7, 51, 88, .08); color: var(--eq-navy); }
#nav button.active .schritt-nr { background: rgba(255, 255, 255, .22); 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: var(--eq-navy); color: #fff; }
.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); }
#nav .nav-einrichtung-liste button.active { color: #fff; }
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: var(--eq-navy); color: #fff; box-shadow: 0 0 0 3px rgba(43, 123, 208, .35); }

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