/* Design „Rot & Weiß“ – Vorgabe des Masters (Christian, 05.11.2026: „Meigra als Master fände ich schon gut vom Design“).
   Übertragen aus dem MEIGRA-Cockpit (ki-Tools.cloud, themen/meigra.css, Mockup MEIGRA_Cockpit_Mockup.html): weiße Leiste,
   rote Akzente, Kacheln und Kennzahlen mit blaugrauem Randstreifen, Schrift Manrope.
   Die Bausteine (Kacheln, Reiterleiste, Kundenkarte, Schalter) bleiben die des Promundius-Cockpits – Christian: „auch
   Karteielemente von Promundius sind sinnvoll“. Hier ändern sich nur Farben, Schrift, Rundungen und die Kopfzeile.

   Grautöne: MEIGRA hatte #888 und #aaa für Kleinschrift – auf Weiß 3,5:1 bzw. 2,3:1, unter der Norm (4,5:1). Im MEIGRA-Cockpit
   wurde #888 am 05.11.2026 auf #6e6e6e gezogen (gemessen 28 Bausteine, keiner schlechter). Derselbe Wert steht hier als --ink-2. */
@font-face{font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../schrift/manrope.woff2) format("woff2")}

:root{
  --rot:#C1272F; --rot-dunkel:#9E1F26; --rot-hell:#FBEDEE; --blau:#334862; --blau-hell:#E8EDF3;
  --ink:#3A3A3A; --ink-2:#6e6e6e; --bg:#FAFAFA; --surface:#FFFFFF; --line:#E2E2E2; --line-2:#F1F1F1;
  --ok:#2E7D4F; --ok-bg:#E7F4EC;
  --warn:#B3261E; --warn-bg:#FBEDEE;     /* Zähler und Warnungen rot wie im Mockup; #B3261E statt #C1272F, weil auf --warn-bg sonst 4,4:1 */
  --akzent:#C1272F; --akzent-dunkel:#9E1F26; --akzent-hell:#FBEDEE;
  --kopf:#C1272F; --kopf-2:#9E1F26; --kopf-3:#E2E2E2;   /* --kopf färbt Markierungen (Suche, Kalender, Kundenmodus), nicht mehr die Kopfzeile */
  --radius:10px;
}
html{background:var(--bg)}
body{font-family:Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg)}
a{color:var(--rot)}

/* Kopfzeile: weiß statt farbig – im MEIGRA-Mockup gibt es keine farbige Leiste, das Rot steckt im Logo und den Akzenten */
.top{background:#fff; color:var(--ink); border-bottom:1px solid var(--line)}
.wortmarke.kopf{color:var(--rot); font-weight:800; font-size:1.3rem; letter-spacing:.03em}
.kopfname{border-left-color:var(--line); color:var(--ink-2); opacity:1}
.menuknopf{color:var(--rot)}
.userchip{background:var(--line-2); color:var(--ink); font-weight:600}
.top .btn.ghost.hell{color:var(--rot); border-color:var(--line); background:#fff}
.top .btn.ghost.hell:hover{background:var(--rot-hell)}
.kopf-release{color:var(--ink-2)}
.kopf-release:not(a):hover{color:var(--ink-2)}
.kopf-release:hover{background:var(--line-2); color:var(--ink)}
.ansichtwahl label{color:var(--ink-2); opacity:1; text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; font-weight:800}
.ansichtwahl select{background:#fff !important; color:var(--ink); border:1.5px solid var(--line) !important}

/* Leiste: Menüpunkte als runde Flächen, aktiver Punkt rot hinterlegt (Mockup) */
nav.side{background:#fff; border-right-color:var(--line); padding:.8rem .6rem 1rem}
nav.side a{border-left:0; border-radius:6px; padding:.45rem .7rem; color:var(--ink); font-weight:600; font-size:.9rem}
nav.side a:hover{background:var(--line-2)}
nav.side a.active{background:var(--rot-hell); color:var(--rot); border-left:0}
nav.side .navcap{font-size:.66rem; font-weight:800; letter-spacing:.12em; color:var(--ink-2); padding:1rem .7rem .3rem}
nav.side .release{padding:1.2rem .7rem 0; color:var(--ink-2)}
.badge{background:var(--rot); font-weight:800}

/* Bausteine */
h1{font-weight:800; color:var(--ink)}
h2{font-weight:800}
.card{border-color:var(--line); border-radius:var(--radius)}
.btn{background:var(--rot); border-color:var(--rot); font-weight:700; border-radius:6px}
.btn:hover{background:var(--rot-dunkel); border-color:var(--rot-dunkel)}
.btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--line-2)}
.linkknopf{color:var(--rot)}
input:not([type=checkbox]):not([type=color]):not([type=radio]),select,textarea{border:1.5px solid var(--line); border-radius:6px}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none; border-color:var(--rot); box-shadow:0 0 0 3px var(--rot-hell)}
th{color:var(--ink-2); font-weight:700; font-size:.68rem}
td{border-bottom-color:#F0F0F0}
.banner.info{background:var(--blau-hell); color:var(--blau); border:0; border-left:4px solid var(--blau)}
.banner.ok{border:0; border-left:4px solid var(--ok)}
.banner.warn{color:#8A1C22; border:0; border-left:4px solid var(--rot)}

/* Kacheln und Kennzahlen mit Randstreifen links – das Erkennungszeichen des MEIGRA-Mockups */
.kachel,.kpi{position:relative; overflow:hidden; border-color:var(--line); border-radius:var(--radius)}
.kachel::before,.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blau)}
.kachel:hover{border-color:#cfcfcf; box-shadow:none}
.kachel-titel{font-weight:800; color:var(--ink)}
.kachel-demo::before{background:var(--line)}
.kpi .v{font-weight:800; color:var(--ink)}
.kpi .l{font-weight:700; letter-spacing:.04em}
a.kpi-link.on{border-color:var(--rot); box-shadow:inset 0 0 0 1px var(--rot)}

/* Reiterleiste: grau wie bisher, aktiver Reiter mit roter Zahl */
.reiterleiste{background:var(--line-2); border-color:var(--line)}
.reiterleiste a.on{font-weight:700}
.reiterleiste a.on .zahl{background:var(--rot); color:#fff}

/* Anmeldung */
body.schlicht{--akzent:#C1272F; --ink:#3A3A3A; --ink-2:#6e6e6e; --bg:#F1F1F1; --line:#E2E2E2; font-family:Manrope, system-ui, sans-serif}
body.schlicht .btn:hover{background:var(--rot-dunkel); border-color:var(--rot-dunkel)}
body.schlicht .banner.info{background:var(--blau-hell); color:var(--blau); border-color:var(--blau-hell)}
.schlicht-kasten{border-top:0; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.06)}
.wortmarke.anmeldung{color:var(--rot); font-weight:800; letter-spacing:.03em}