/* ==========================================================================
   MDInform – Design "Rot klassisch"
   ==========================================================================

   FERTIG ZUM HOCHLADEN.
   Admin → Website & Kommunikation → Design-Datei → hochladen → aktivieren.

   Gefällt es nicht: auf der Design-Seite die eingebaute Gestaltung wieder
   aktivieren. Ein Klick, nichts geht kaputt. Diese Seite selbst wird
   absichtlich NIE von einer hochgeladenen Datei beeinflusst – du sperrst
   dich also nie aus.

   Farbwelt: das ursprüngliche MDInform-Rot – aber mit allem, was seit dem
   braunen Design dazugekommen ist: weiße Symbole auf farbigen Kacheln,
   ruhigere Tabellenköpfe, die Statusfarben als eigene Variablen. Dazu eine
   DUNKLERE Seitenleiste, die den Inhalt stärker abhebt.

   Warum eine eigene Datei und nicht einfach "eingebaut" zurückschalten:
   Die eingebaute Gestaltung färbt die Symbole per Filter, der nur zum Rot
   passt. Die Kacheln aus dem braunen Design sind robuster – sie passen zu
   jeder Farbe, die du später wählst. Diese Datei bringt beides zusammen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Farben, Schrift, Formen
   -------------------------------------------------------------------------- */
:root{
  /* Marke */
  --pri:      #B91C1C;   /* Hauptfarbe: Knöpfe, Links, Markierungen         */
  --pri-h:    #991B1B;   /* beim Überfahren mit der Maus                    */
  --maroon:   #7F1D1D;   /* dunklere Betonung, Überschriften in Tabellen    */
  --soft:     #FEF2F2;   /* zarter Hintergrund in der Hauptfarbe            */

  /* Flächen und Text */
  --bg:       #FAF7F7;   /* Seitenhintergrund – ein Hauch kühler als weiß   */
  --card:     #FFFFFF;
  --tx:       #1A1A1A;   /* Schrift: sehr dunkles Blaugrau statt Schwarz    */
  --tx2:      #57534E;
  --bd:       #EBE3E3;

  /* Seitenleiste */
  /* DUNKLE Seitenleiste – dein Wunsch. Ein tiefes Weinrot statt Weiß;
     die Schrift hell, der aktive Punkt als hellere Fläche mit weißer
     Schrift. Der Inhalt rechts bleibt hell und hebt sich damit ab. */
  --side:        #F1E9E9;
  --side-tx:     #2A2622;
  --side-act-bg: #B91C1C;
  --side-act-tx: #FFFFFF;

  /* Status – bewusst NICHT blau, sonst verlieren sie ihre Bedeutung */
  --ok:         #16A34A;
  --ok-bg:      #DCFCE7;
  --ok-tx:      #166534;
  --ok-stark:   #15803D;
  --warn:       #D97706;
  --warn-bg:    #FEF3C7;
  --warn-tx:    #78350F;
  --warn-stark: #B45309;
  --info:       #2563EB;
  --info-bg:    #EFF6FF;
  --akzent:     #7C3AED;
  --akzent-stark:#5B21B6;
  --neutral-bd: #EBE3E3;
  --weiss:      #FFFFFF;

  /* Formen: wie das Original */
  --radius:       11px;
  --radius-knopf: 9px;
  --radius-chip:  20px;
  --radius-feld:  12px;
}


/* --------------------------------------------------------------------------
   2. Die Symbole

   WARUM DAS HIER NÖTIG IST:
   Die Symbole sind graue SVG-Dateien, die per CSS-Filter eingefärbt werden.
   Der eingebaute Filter ist auf das Rot der Marke gerechnet – bei einer
   neuen Farbe passt er nicht mehr, und die Symbole blieben rot.

   Solche Filter für jede Wunschfarbe auszurechnen ist mühsam und trifft nie
   genau. Deshalb hier der verlässliche Weg: Das Symbol wird WEISS gefärbt
   (das kann ein Filter exakt) und sitzt auf einer Fläche in der Markenfarbe.
   Das passt automatisch zu jedem Farbton – auch zu einem, den du später
   wählst.
   -------------------------------------------------------------------------- */
.nav-ico,
.tico{
  background: var(--pri) !important;
}
.nav-ico img,
.tico img{
  filter: brightness(0) invert(1) !important;   /* immer weiß */
}
.sidebar nav a:hover .nav-ico,
.sidebar nav summary:hover .nav-ico{
  background: var(--pri-h) !important;
}
.sidebar nav a.aktiv .nav-ico{
  background: var(--maroon) !important;
}


/* --------------------------------------------------------------------------
   2b. Dunkle Seitenleiste – Details
   Auf dunklem Grund brauchen Linien, Untermenüs und die Marke eigene Werte,
   sonst verschwinden sie.
   -------------------------------------------------------------------------- */
.sidebar{
  background:var(--side) !important;
  color:var(--side-tx) !important;
  border-right:1px solid var(--bd) !important;
}
.sidebar nav a, .sidebar nav summary{ color:var(--side-tx) !important; }
.sidebar nav a:hover, .sidebar nav summary:hover{ background:rgba(0,0,0,.05) !important; }
.sidebar nav a.aktiv{ background:var(--side-act-bg) !important; color:var(--side-act-tx) !important; }
.sidebar .nav-ico{ background:var(--pri) !important; }
.sidebar nav a.aktiv .nav-ico{ background:var(--pri) !important; }
/* Der Markenname: "MD" war auf dunklem Grund unsichtbar, weil er die
   normale Textfarbe trug. Jetzt weiss; "Inform" bleibt in der Markenfarbe. */
.sidebar .name{ color:var(--tx) !important; }
.sidebar .name b{ color:var(--pri) !important; }
.sidebar .unter, .sidebar details > div{ border-left-color:rgba(255,255,255,.14) !important; }

/* --------------------------------------------------------------------------
   3. Feinschliff
   -------------------------------------------------------------------------- */

/* Der Hauptknopf: in Rot mit dem gewohnten weichen Schatten */
.btn-primary{
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--pri) 50%, transparent);
}
.btn-primary:hover{ background: var(--pri-h); }

/* Tabellenkopf: der zarte rote Ton wie im Original */
table th{
  background: var(--soft);
  color: var(--maroon);
}

/* Der Balken links am Einleitungssatz jeder Werkzeugseite */
.kat-info{
  border-left-color: var(--pri);
}


/* --------------------------------------------------------------------------
   4. Wenn du eine eigene Schrift willst

   Nicht über Google Fonts laden – bei einem medizinischen Dienst mit
   europäischen Nutzern ist das ein Datenschutzproblem. Die Schriftdatei
   stattdessen mit hochladen und so einbinden:

   @font-face{
     font-family:'MeineSchrift';
     src:url('/static/design/meineschrift.woff2') format('woff2');
     font-weight:400; font-display:swap;
   }
   :root{ --sans:'MeineSchrift'; }
   -------------------------------------------------------------------------- */